优化 大屏
qianlishi
3 years ago
parent
5d3993444e
commit
4cb06437d5
@ -0,0 +1,144 @@
|
||||
<!--
|
||||
* @Descripttion: 大屏左侧工具栏
|
||||
* @version:
|
||||
* @Author: qianlishi
|
||||
* @Date: 2022-05-12 11:05:21
|
||||
* @LastEditors: qianlishi
|
||||
* @LastEditTime: 2022-05-14 11:51:45
|
||||
-->
|
||||
<template>
|
||||
<el-tabs class="layout-left" type="border-card">
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date icon"></i>工具栏</span>
|
||||
<div class="chart-type">
|
||||
<el-tabs class="type-left" tab-position="left">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in widgetTools"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
>
|
||||
<draggable
|
||||
v-for="(it, idx) in item.list"
|
||||
:key="idx"
|
||||
@end="evt => widgetOnDragged(evt, it.code)"
|
||||
>
|
||||
<div class="tools-item">
|
||||
<span class="tools-item-icon">
|
||||
<i class="iconfont" :class="it.icon"></i>
|
||||
</span>
|
||||
<span class="tools-item-text">{{ it.label }}</span>
|
||||
</div>
|
||||
</draggable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane>
|
||||
<span slot="label" class="icon"
|
||||
><i class="el-icon-date icon"></i>图层</span
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in layerWidget"
|
||||
:key="'item' + index"
|
||||
class="tools-item"
|
||||
:class="widgetIndex == index ? 'is-active' : ''"
|
||||
@click="layerClick(index)"
|
||||
>
|
||||
<span class="tools-item-icon">
|
||||
<i class="iconfont" :class="item.icon"></i>
|
||||
</span>
|
||||
<span class="tools-item-text">{{ item.label }}</span>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from "vuedraggable";
|
||||
export default {
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
widgetIndex: Number,
|
||||
widgetTools: Array,
|
||||
layerWidget: Array
|
||||
},
|
||||
methods: {
|
||||
widgetOnDragged(evt, code) {
|
||||
this.$emit("widgetOnDragged", evt, code);
|
||||
},
|
||||
layerClick(index) {
|
||||
this.$emit("layerClick", index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/.el-dropdown-menu__item {
|
||||
max-width: none;
|
||||
}
|
||||
.layout-left {
|
||||
width: 200px;
|
||||
background: #242a30;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
.chart-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
.type-left {
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
text-align: center;
|
||||
/deep/.el-tabs__header {
|
||||
width: 30%;
|
||||
margin-right: 0;
|
||||
.el-tabs__nav-wrap {
|
||||
&::after {
|
||||
background: transparent;
|
||||
}
|
||||
.el-tabs__item {
|
||||
text-align: center;
|
||||
width: 100% !important;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-tabs__content {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
//工具栏一个元素
|
||||
.tools-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
padding: 0 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-bottom: 1px;
|
||||
|
||||
.tools-item-icon {
|
||||
color: #409eff;
|
||||
margin-right: 10px;
|
||||
width: 53px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
border: 1px solid #3a4659;
|
||||
background: #282a30;
|
||||
}
|
||||
.tools-item-text {
|
||||
}
|
||||
}
|
||||
/deep/.el-tabs__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<!--
|
||||
* @Descripttion: 大屏右侧配置
|
||||
* @version:
|
||||
* @Author: qianlishi
|
||||
* @Date: 2022-05-12 11:05:54
|
||||
* @LastEditors: qianlishi
|
||||
* @LastEditTime: 2022-05-14 11:52:30
|
||||
-->
|
||||
<template>
|
||||
<div class="layout-right">
|
||||
<el-tabs v-model="activeName" type="border-card" :stretch="true">
|
||||
<el-tab-pane
|
||||
v-if="
|
||||
isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
|
||||
"
|
||||
name="first"
|
||||
label="配置"
|
||||
>
|
||||
<dynamicForm
|
||||
ref="formData"
|
||||
:options="widgetOptions.setup"
|
||||
@onChanged="val => widgetValueChanged('setup', val)"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="isNotNull(widgetOptions.data)"
|
||||
name="second"
|
||||
label="数据"
|
||||
>
|
||||
<dynamicForm
|
||||
ref="formData"
|
||||
:options="widgetOptions.data"
|
||||
@onChanged="val => widgetValueChanged('data', val)"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="isNotNull(widgetOptions.position)"
|
||||
name="third"
|
||||
label="坐标"
|
||||
>
|
||||
<dynamicForm
|
||||
ref="formData"
|
||||
:options="widgetOptions.position"
|
||||
@onChanged="val => widgetValueChanged('position', val)"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import dynamicForm from "../components/dynamicForm.vue";
|
||||
export default {
|
||||
components: {
|
||||
dynamicForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "first"
|
||||
};
|
||||
},
|
||||
props: {
|
||||
widgetOptions: Object
|
||||
},
|
||||
methods: {
|
||||
widgetValueChanged(type, val) {
|
||||
this.$emit("widgetValueChanged", type, val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,229 @@
|
||||
<!--
|
||||
* @Descripttion: 大屏顶部操操按钮
|
||||
* @version:
|
||||
* @Author: qianlishi
|
||||
* @Date: 2022-05-14 11:54:07
|
||||
* @LastEditors: qianlishi
|
||||
* @LastEditTime: 2022-05-14 12:52:58
|
||||
-->
|
||||
<template>
|
||||
<!-- 操作栏 -->
|
||||
<div class="layout-bar">
|
||||
<div class="bar-item" @click="saveData">
|
||||
<i class="iconfont iconsave"></i>保存
|
||||
</div>
|
||||
<div class="bar-item" @click="viewScreen">
|
||||
<i class="iconfont iconyulan"></i>预览
|
||||
</div>
|
||||
<div class="bar-item" @click="handleUndo">
|
||||
<i class="iconfont iconundo"></i>撤销
|
||||
</div>
|
||||
<div class="bar-item" @click="handleRedo">
|
||||
<i class="iconfont iconhuifubeifen"></i>恢复
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<el-upload
|
||||
class="el-upload"
|
||||
ref="upload"
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
accept=".zip"
|
||||
:on-success="handleUpload"
|
||||
:on-error="handleError"
|
||||
:show-file-list="false"
|
||||
:limit="1"
|
||||
>
|
||||
<i class="iconfont icondaoru"></i>
|
||||
</el-upload>
|
||||
导入
|
||||
</div>
|
||||
<div class="bar-item">
|
||||
<i class="iconfont icondaochu"></i>
|
||||
<el-dropdown @command="exportDashboard">
|
||||
<span class="el-dropdown-link">
|
||||
导出<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="1">导出(包含数据集)</el-dropdown-item>
|
||||
<el-dropdown-item command="0">导出(不包含数据集)</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { insertDashboard, exportDashboard } from "@/api/bigscreen";
|
||||
import { Revoke } from "../util/revoke";
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
props: {
|
||||
dashboard: Object,
|
||||
widgets: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadUrl:
|
||||
process.env.BASE_API +
|
||||
"/reportDashboard/import/" +
|
||||
this.$route.query.reportCode,
|
||||
revoke: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
headers() {
|
||||
return {
|
||||
Authorization: getToken()
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
widgets: {
|
||||
handler(val) {
|
||||
//以下部分是记录历史
|
||||
this.$nextTick(() => {
|
||||
this.revoke.push(this.widgets);
|
||||
});
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/* 以下是记录历史的 */
|
||||
this.revoke = new Revoke();
|
||||
},
|
||||
methods: {
|
||||
// 保存
|
||||
async saveData() {
|
||||
if (!this.widgets || this.widgets.length == 0) {
|
||||
return this.$message.error("请添加组件");
|
||||
}
|
||||
const screenData = {
|
||||
reportCode: this.$route.query.reportCode,
|
||||
dashboard: {
|
||||
title: this.dashboard.title,
|
||||
width: this.dashboard.width,
|
||||
height: this.dashboard.height,
|
||||
backgroundColor: this.dashboard.backgroundColor,
|
||||
backgroundImage: this.dashboard.backgroundImage
|
||||
},
|
||||
widgets: this.widgets
|
||||
};
|
||||
const { code, data } = await insertDashboard(screenData);
|
||||
if (code == "200") {
|
||||
this.$message.success("保存成功！");
|
||||
}
|
||||
},
|
||||
// 预览
|
||||
viewScreen() {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: "/screen/preview",
|
||||
query: { reportCode: this.$route.query.reportCode }
|
||||
});
|
||||
window.open(routeUrl.href, "_blank");
|
||||
},
|
||||
// 撤销
|
||||
handleUndo() {
|
||||
const record = this.revoke.undo();
|
||||
if (!record) {
|
||||
return false;
|
||||
}
|
||||
this.widgets = record;
|
||||
},
|
||||
// 恢复
|
||||
handleRedo() {
|
||||
const record = this.revoke.redo();
|
||||
if (!record) {
|
||||
return false;
|
||||
}
|
||||
this.widgets = record;
|
||||
},
|
||||
// 导入失败
|
||||
handleError(err) {
|
||||
this.$message({
|
||||
message: "上传失败！",
|
||||
type: "error"
|
||||
});
|
||||
},
|
||||
// 导入 成功回调
|
||||
handleUpload(response, file, fileList) {
|
||||
//清除el-upload组件中的文件
|
||||
this.$refs.upload.clearFiles();
|
||||
//刷新大屏页面
|
||||
this.irefresh();
|
||||
if (response.code == "200") {
|
||||
this.$message({
|
||||
message: "导入成功！",
|
||||
type: "success"
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: response.message,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
},
|
||||
// 导出
|
||||
async exportDashboard(val) {
|
||||
const fileName = this.$route.query.reportCode + ".zip";
|
||||
|
||||
const param = {
|
||||
reportCode: this.$route.query.reportCode,
|
||||
showDataSet: val
|
||||
};
|
||||
exportDashboard(param).then(res => {
|
||||
const that = this;
|
||||
const type = res.type;
|
||||
if (type == "application/json") {
|
||||
let reader = new FileReader();
|
||||
reader.readAsText(res, "utf-8");
|
||||
reader.onload = function() {
|
||||
const data = JSON.parse(reader.result);
|
||||
that.$message.error(data.message);
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([res], {
|
||||
type: "application/octet-stream"
|
||||
});
|
||||
if (window.navigator.msSaveOrOpenBlob) {
|
||||
//msSaveOrOpenBlob方法返回bool值
|
||||
navigator.msSaveBlob(blob, fileName); //本地保存
|
||||
} else {
|
||||
const link = document.createElement("a"); //a标签下载
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = fileName;
|
||||
link.click();
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
}
|
||||
});
|
||||
},
|
||||
refresh() {
|
||||
this.$emit("refresh");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.layout-bar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
.bar-item {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue