|
|
|
|
@ -6,15 +6,20 @@
|
|
|
|
|
!-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="layout">
|
|
|
|
|
<div v-if="toolIsShow" class="layout-left" :style="{ width: widthLeftForTools + 'px' }">
|
|
|
|
|
<el-tabs type="border-card" :stretch="true">
|
|
|
|
|
<div v-if="toolIsShow"
|
|
|
|
|
class="layout-left"
|
|
|
|
|
:style="{ width: widthLeftForTools + 'px' }">
|
|
|
|
|
<el-tabs type="border-card"
|
|
|
|
|
:stretch="true">
|
|
|
|
|
<!-- 左侧组件栏-->
|
|
|
|
|
<el-tab-pane label="工具栏">
|
|
|
|
|
<!-- <el-divider content-position="center">html</el-divider>-->
|
|
|
|
|
<draggable v-for="widget in widgetTools" :key="widget.code" @end="(evt) => widgetOnDragged(evt, widget.code)">
|
|
|
|
|
<draggable v-for="widget in widgetTools"
|
|
|
|
|
:key="widget.code"
|
|
|
|
|
@end="(evt) => widgetOnDragged(evt, widget.code)">
|
|
|
|
|
<div class="tools-item">
|
|
|
|
|
<span class="tools-item-icon">
|
|
|
|
|
<svg-icon :icon-class="widget.icon" />
|
|
|
|
|
<!-- <svg-icon :icon-class="widget.icon" /> -->1
|
|
|
|
|
</span>
|
|
|
|
|
<span class="tools-item-text">{{ widget.label }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
@ -22,9 +27,11 @@
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<!-- 左侧图层-->
|
|
|
|
|
<el-tab-pane label="图层">
|
|
|
|
|
<div v-for="(item, index) in layerWidget" :key="index" class="tools-item">
|
|
|
|
|
<div v-for="(item, index) in layerWidget"
|
|
|
|
|
:key="index"
|
|
|
|
|
class="tools-item">
|
|
|
|
|
<span class="tools-item-icon">
|
|
|
|
|
<svg-icon :icon-class="item.icon" />
|
|
|
|
|
<!-- <svg-icon :icon-class="item.icon" /> -->2
|
|
|
|
|
</span>
|
|
|
|
|
<span class="tools-item-text">{{ item.label }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
@ -32,48 +39,90 @@
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layout-left-fold" :style="{ width: widthLeftForToolsHideButton + 'px' }" @click="toolIsShow = !toolIsShow">
|
|
|
|
|
<div class="layout-left-fold"
|
|
|
|
|
:style="{ width: widthLeftForToolsHideButton + 'px' }"
|
|
|
|
|
@click="toolIsShow = !toolIsShow">
|
|
|
|
|
<i class="iconfont iconfold" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layout-middle" :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
|
|
|
|
|
<div class="layout-middle"
|
|
|
|
|
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
|
|
|
|
|
<div class="top-button">
|
|
|
|
|
<span class="btn">
|
|
|
|
|
<el-tooltip class="item" effect="dark" content="保存" placement="bottom">
|
|
|
|
|
<svg-icon icon-class="report" @click="saveData" />
|
|
|
|
|
<el-tooltip class="item"
|
|
|
|
|
effect="dark"
|
|
|
|
|
content="保存"
|
|
|
|
|
placement="bottom">
|
|
|
|
|
<!-- <svg-icon icon-class="report" @click="saveData" /> -->3
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn">
|
|
|
|
|
<el-tooltip class="item" effect="dark" content="预览" placement="bottom">
|
|
|
|
|
<svg-icon icon-class="eye-open" @click="viewScreen" />
|
|
|
|
|
<el-tooltip class="item"
|
|
|
|
|
effect="dark"
|
|
|
|
|
content="预览"
|
|
|
|
|
placement="bottom">
|
|
|
|
|
<!-- <svg-icon icon-class="eye-open" @click="viewScreen" /> -->4
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="workbench-container" :style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
|
|
|
|
|
<vue-ruler-tool v-model="dashboard.presetLine" class="vueRuler" :step-length="50" :parent="true" :position="'relative'" :is-scale-revise="true" :visible.sync="dashboard.presetLineVisible">
|
|
|
|
|
<div id="workbench" class="workbench" :style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }" @click="setOptionsOnClickScreen">
|
|
|
|
|
<widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :index="index" :type="widget.type" :bigscreen="{ bigscreenWidth, bigscreenHeight }" @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)" />
|
|
|
|
|
<div class="workbench-container"
|
|
|
|
|
:style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
|
|
|
|
|
<vue-ruler-tool v-model="dashboard.presetLine"
|
|
|
|
|
class="vueRuler"
|
|
|
|
|
:step-length="50"
|
|
|
|
|
:parent="true"
|
|
|
|
|
:position="'relative'"
|
|
|
|
|
:is-scale-revise="true"
|
|
|
|
|
:visible.sync="dashboard.presetLineVisible">
|
|
|
|
|
<div id="workbench"
|
|
|
|
|
class="workbench"
|
|
|
|
|
:style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }"
|
|
|
|
|
@click="setOptionsOnClickScreen">
|
|
|
|
|
<widget v-for="(widget, index) in widgets"
|
|
|
|
|
:key="index"
|
|
|
|
|
v-model="widget.value"
|
|
|
|
|
:index="index"
|
|
|
|
|
:type="widget.type"
|
|
|
|
|
:bigscreen="{ bigscreenWidth, bigscreenHeight }"
|
|
|
|
|
@onActivated="setOptionsOnClickWidget"
|
|
|
|
|
@contextmenu.prevent.native="rightClick($event, index)" />
|
|
|
|
|
</div>
|
|
|
|
|
</vue-ruler-tool>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
|
|
|
|
|
<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)" />
|
|
|
|
|
<dynamicCollapseForm v-if="widgetOptions.collapse && widgetOptions.collapse.length > 0" ref="formData" :options="widgetOptions.collapse" @onChanged="(val) => widgetValueChanged('collapse', val)" />
|
|
|
|
|
<div class="layout-right"
|
|
|
|
|
:style="{ width: widthLeftForOptions + 'px' }">
|
|
|
|
|
<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 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 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>
|
|
|
|
|
|
|
|
|
|
<content-menu :visible.sync="visibleContentMenu" :style-obj="styleObj" @deletelayer="deletelayer" />
|
|
|
|
|
<content-menu :visible.sync="visibleContentMenu"
|
|
|
|
|
:style-obj="styleObj"
|
|
|
|
|
@deletelayer="deletelayer" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -82,7 +131,6 @@ import { insertDashboard, detailDashboard } from '@/api/bigscreen'
|
|
|
|
|
import { widgetTools, getToolByCode } from './tools'
|
|
|
|
|
import widget from './widget/widget.vue'
|
|
|
|
|
import dynamicForm from './form/dynamicForm.vue'
|
|
|
|
|
import dynamicCollapseForm from './form/dynamicCollapseForm.vue'
|
|
|
|
|
import draggable from 'vuedraggable'
|
|
|
|
|
import VueRulerTool from 'vue-ruler-tool' // 大屏设计页面的标尺插件
|
|
|
|
|
import contentMenu from './form/contentMenu'
|
|
|
|
|
@ -93,7 +141,6 @@ export default {
|
|
|
|
|
VueRulerTool,
|
|
|
|
|
widget,
|
|
|
|
|
dynamicForm,
|
|
|
|
|
dynamicCollapseForm,
|
|
|
|
|
contentMenu,
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
@ -147,7 +194,6 @@ export default {
|
|
|
|
|
// 当前激活组件右侧配置属性
|
|
|
|
|
widgetOptions: {
|
|
|
|
|
setup: [], // 配置
|
|
|
|
|
collapse: [],
|
|
|
|
|
data: [], // 数据
|
|
|
|
|
position: [], // 坐标
|
|
|
|
|
},
|
|
|
|
|
@ -238,6 +284,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleInitEchartsData (data) {
|
|
|
|
|
console.log(data)
|
|
|
|
|
const widgets = data.dashboard.widgets
|
|
|
|
|
const widgetsData = []
|
|
|
|
|
for (let i = 0; i < widgets.length; i++) {
|
|
|
|
|
@ -281,17 +328,17 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// collapse
|
|
|
|
|
for (const key in data.collapse) {
|
|
|
|
|
for (let i = 0; i < option.collapse.length; i++) {
|
|
|
|
|
const itemList = option.collapse[i].list
|
|
|
|
|
for (let j = 0; j < itemList.length; j++) {
|
|
|
|
|
if (key == itemList[j].name) {
|
|
|
|
|
itemList[j].value = data.collapse[key]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// // collapse
|
|
|
|
|
// for (const key in data.collapse) {
|
|
|
|
|
// for (let i = 0; i < option.collapse.length; i++) {
|
|
|
|
|
// const itemList = option.collapse[i].list
|
|
|
|
|
// for (let j = 0; j < itemList.length; j++) {
|
|
|
|
|
// if (key == itemList[j].name) {
|
|
|
|
|
// itemList[j].value = data.collapse[key]
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
return option
|
|
|
|
|
},
|
|
|
|
|
// 保存数据
|
|
|
|
|
@ -311,14 +358,15 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
widgets: this.widgets,
|
|
|
|
|
}
|
|
|
|
|
console.log(this.dashboard)
|
|
|
|
|
console.log(screenData)
|
|
|
|
|
const { code, data } = await insertDashboard(screenData)
|
|
|
|
|
if (code != '200') return
|
|
|
|
|
},
|
|
|
|
|
// 预览
|
|
|
|
|
viewScreen () {
|
|
|
|
|
var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportCode: this.$route.query.reportCode }})
|
|
|
|
|
var routeUrl = this.$router.resolve({
|
|
|
|
|
path: '/report/bigscreen/viewer',
|
|
|
|
|
query: { reportCode: this.$route.query.reportCode },
|
|
|
|
|
})
|
|
|
|
|
window.open(routeUrl.href, '_blank')
|
|
|
|
|
},
|
|
|
|
|
// 在缩放模式下的大小
|
|
|
|
|
@ -344,13 +392,11 @@ export default {
|
|
|
|
|
|
|
|
|
|
// 复制一个组件
|
|
|
|
|
var tool = getToolByCode(widgetType)
|
|
|
|
|
|
|
|
|
|
var widgetJson = {
|
|
|
|
|
type: widgetType,
|
|
|
|
|
value: {
|
|
|
|
|
setup: {},
|
|
|
|
|
data: {},
|
|
|
|
|
collapse: {},
|
|
|
|
|
position: {
|
|
|
|
|
width: 0,
|
|
|
|
|
height: 0,
|
|
|
|
|
@ -361,14 +407,10 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
options: tool.options,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理默认值
|
|
|
|
|
const widgetJsonValue = this.handleDefaultValue(widgetJson)
|
|
|
|
|
|
|
|
|
|
// 将选中的复制组件，放到工作区中去
|
|
|
|
|
|
|
|
|
|
this.widgets.push(this.deepClone(widgetJsonValue))
|
|
|
|
|
console.log(this.widgets)
|
|
|
|
|
|
|
|
|
|
// 激活新组件的配置属性
|
|
|
|
|
this.setOptionsOnClickWidget(this.widgets.length - 1)
|
|
|
|
|
@ -382,8 +424,15 @@ export default {
|
|
|
|
|
// setup 处理
|
|
|
|
|
for (let i = 0; i < widgetJson.options.setup.length; i++) {
|
|
|
|
|
const item = widgetJson.options.setup[i]
|
|
|
|
|
if (item.value) {
|
|
|
|
|
if (Object.prototype.toString.call(item) == '[object Object]') {
|
|
|
|
|
widgetJson.value.setup[item.name] = item.value
|
|
|
|
|
} else if (Object.prototype.toString.call(item) == '[object Array]') {
|
|
|
|
|
for (let j = 0; j < item.length; j++) {
|
|
|
|
|
const list = item[j].list
|
|
|
|
|
list.forEach((el) => {
|
|
|
|
|
widgetJson.value.setup[el.name] = el.value
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// position
|
|
|
|
|
@ -393,18 +442,6 @@ export default {
|
|
|
|
|
widgetJson.value.position[item.name] = item.value
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// collapse 处理
|
|
|
|
|
if (widgetJson.options.collapse && widgetJson.options.collapse.length > 0) {
|
|
|
|
|
for (let i = 0; i < widgetJson.options.collapse.length; i++) {
|
|
|
|
|
const itemList = widgetJson.options.collapse[i].list
|
|
|
|
|
for (let j = 0; j < itemList.length; j++) {
|
|
|
|
|
const itemChildList = itemList[j]
|
|
|
|
|
if (itemChildList.value) {
|
|
|
|
|
widgetJson.value.collapse[itemChildList.name] = itemChildList.value
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// data 处理
|
|
|
|
|
if (widgetJson.options.data && widgetJson.options.data.length > 0) {
|
|
|
|
|
for (let i = 0; i < widgetJson.options.data.length; i++) {
|
|
|
|
|
@ -437,6 +474,7 @@ export default {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.widgetIndex = index
|
|
|
|
|
console.log(this.deepClone(this.widgets[index]['options']))
|
|
|
|
|
this.widgetOptions = this.deepClone(this.widgets[index]['options'])
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
@ -456,17 +494,16 @@ export default {
|
|
|
|
|
position: {}
|
|
|
|
|
}
|
|
|
|
|
}]*/
|
|
|
|
|
|
|
|
|
|
if (this.screenCode == 'screen') {
|
|
|
|
|
this.dashboard = this.deepClone(val)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < this.widgets.length; i++) {
|
|
|
|
|
if (this.widgetIndex == i) {
|
|
|
|
|
this.widgets[i].value[key] = this.deepClone(val)
|
|
|
|
|
this.setDefaultValue(this.widgets[i].options[key], key, val)
|
|
|
|
|
this.setDefaultValue(this.widgets[i].options[key], val)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// console.log(this.widgets)
|
|
|
|
|
},
|
|
|
|
|
rightClick (event, index) {
|
|
|
|
|
this.rightClickIndex = index
|
|
|
|
|
@ -485,30 +522,28 @@ export default {
|
|
|
|
|
deletelayer () {
|
|
|
|
|
this.widgets.splice(this.rightClickIndex, 1)
|
|
|
|
|
},
|
|
|
|
|
setDefaultValue(options, type, val) {
|
|
|
|
|
// type: setup、collapse、data、position
|
|
|
|
|
const optionsArr = options
|
|
|
|
|
if (type == 'collapse') {
|
|
|
|
|
for (let i = 0; i < optionsArr.length; i++) {
|
|
|
|
|
const list = optionsArr[i].list
|
|
|
|
|
for (let j = 0; j < list.length; j++) {
|
|
|
|
|
setDefaultValue (options, val) {
|
|
|
|
|
for (let i = 0; i < options.length; i++) {
|
|
|
|
|
if (Object.prototype.toString.call(options[i]) == '[object Object]') {
|
|
|
|
|
for (const k in val) {
|
|
|
|
|
if (list[j].name == k) {
|
|
|
|
|
list[j].value = val[k]
|
|
|
|
|
if (options[i].name == k) {
|
|
|
|
|
options[i].value = val[k]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
for (let i = 0; i < optionsArr.length; i++) {
|
|
|
|
|
} else if (Object.prototype.toString.call(options[i]) == '[object Array]') {
|
|
|
|
|
for (let j = 0; j < options[i].length; j++) {
|
|
|
|
|
const list = options[i][j].list
|
|
|
|
|
for (let z = 0; z < list.length; z++) {
|
|
|
|
|
for (const k in val) {
|
|
|
|
|
if (optionsArr[i].name == k) {
|
|
|
|
|
optionsArr[i].value = val[k]
|
|
|
|
|
if (list[z].name == k) {
|
|
|
|
|
list[z].value = val[k]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
yanzili
4 years ago