秀山金融大屏完成

packages/bigscreen/designer/components/Layout.vue

@@ -45,13 +45,13 @@
       <div class="layout-middle">
         <div class="canvas-wrapper">
           <vue-ruler-tool
-            v-model="dashboard.presetLine"
-            class="vueRuler"
-            :step-length="50"
-            :parent="true"
-            :position="'relative'"
-            :is-scale-revise="true"
-            :visible.sync="dashboard.presetLineVisible">
+              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"
@@ -63,29 +63,29 @@
               <ai-dv-wrapper style="height: 100%" :title="params.name" :theme="dashboard.theme">
                 <div style="width: 100%; height: 100%">
                   <AiDvBackground
-                    :theme="dashboard.theme"
-                    v-if="dashboard.backgroundImage.length || dashboard.theme === '1'"
-                    :src="dashboard.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : dashboard.backgroundImage[0].url">
+                      :theme="dashboard.theme"
+                      v-if="dashboard.backgroundImage.length || dashboard.theme === '1'"
+                      :src="dashboard.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : dashboard.backgroundImage[0].url">
                   </AiDvBackground>
                   <vue-draggable-resizable
-                    :w="item.width"
-                    :h="item.height"
-                    :x="item.left"
-                    :y="item.top"
-                    :scale="heightScale"
-                    :z="item.zIndex || 0"
-                    :parent="true"
-                    :resizable="item.type !== 'display' || item.display === 'summary2' || item.display === 'summary3'"
-                    class-name-active="drag-active"
-                    :class="[activeIndex === index ? 'drag-active' : '']"
-                    class="draggable"
-                    @contextmenu.native.stop="e => onContextmenu(e, index)"
-                    @dragging="(x, y) => onDrag(x, y, index)"
-                    @resizing="(x, y, w, h) => onResizing(x, y, w, h, index, item.type)"
-                    @activated="onActivated(index)"
-                    @click.native.stop="activeIndex = index"
-                    v-for="(item, index) in componentList"
-                    :key="index">
+                      :w="item.width"
+                      :h="item.height"
+                      :x="item.left"
+                      :y="item.top"
+                      :scale="heightScale"
+                      :z="item.zIndex || 0"
+                      :parent="true"
+                      :resizable="item.type !== 'display' || item.display === 'summary2' || item.display === 'summary3'"
+                      class-name-active="drag-active"
+                      :class="[activeIndex === index ? 'drag-active' : '']"
+                      class="draggable"
+                      @contextmenu.native.stop="e => onContextmenu(e, index)"
+                      @dragging="(x, y) => onDrag(x, y, index)"
+                      @resizing="(x, y, w, h) => onResizing(x, y, w, h, index, item.type)"
+                      @activated="onActivated(index)"
+                      @click.native.stop="activeIndex = index"
+                      v-for="(item, index) in componentList"
+                      :key="index">
                     <div class="coordinate" v-show="activeIndex === index">
                       <div class="coordinate-left"></div>
                       <div class="coordinate-top"></div>
@@ -156,15 +156,6 @@
                   </el-select>
                 </div>
               </div>
-              <div class="layout-config__item" v-if="currLayout.type === 'map'">
-                <label>遮罩层</label>
-                <div class="layout-config__item--right">
-                  <el-select size="mini" v-model="currLayout.mask" placeholder="请选择" clearable>
-                    <el-option label="是" value="1"></el-option>
-                    <el-option label="否" value="2"></el-option>
-                  </el-select>
-                </div>
-              </div>
               <div class="layout-config__item layout-config__item--input" v-if="currLayout.type === 'video'">
                 <label>视频地址</label>
                 <div class="layout-config__item--right">
@@ -201,21 +192,44 @@
                   <el-input-number size="mini" style="width: 232px" :min="0" v-model="currLayout.rowNum" controls-position="right"></el-input-number>
                 </div>
               </div>
-              <div class="layout-config__item" v-if="currLayout.type === 'map'">
-                <label>选择地区</label>
-                <div class="layout-config__item--right">
-                  <AiAreaGet :instance="instance" :valueLevel="3" v-model="currLayout.areaId" placeholder="请选择地区"></AiAreaGet>
+              <template v-if="currLayout.type === 'map'">
+                <div class="layout-config__item">
+                  <label>遮罩层</label>
+                  <div class="layout-config__item--right">
+                    <el-select size="mini" v-model="currLayout.mask" placeholder="请选择" clearable>
+                      <el-option label="是" value="1"></el-option>
+                      <el-option label="否" value="2"></el-option>
+                    </el-select>
+                  </div>
                 </div>
-              </div>
+                <div class="layout-config__item">
+                  <label>选择地区</label>
+                  <div class="layout-config__item--right">
+                    <AiAreaGet :instance="instance" :valueLevel="3" v-model="currLayout.areaId" placeholder="请选择地区"></AiAreaGet>
+                  </div>
+                </div>
+                <div class="layout-config__item">
+                  <label>展示光轨</label>
+                  <div class="layout-config__item--right">
+                    <ai-select v-model="currLayout.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
+                  </div>
+                </div>
+                <div class="layout-config__item layout-config__item--input">
+                  <label>地图样式</label>
+                  <div class="layout-config__item--right">
+                    <el-input size="mini" v-model="currLayout.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
+                  </div>
+                </div>
+              </template>
               <div class="layout-config__item" v-if="currLayout.type === 'summary'">
                 <label>数据汇总</label>
                 <div class="layout-config__item--right">
                   <el-select size="mini" v-model="currLayout.display" placeholder="请选择类型" clearable>
                     <el-option
-                      v-for="(item, index) in summaryList"
-                      :key="index"
-                      :label="item"
-                      :value="item">
+                        v-for="(item, index) in summaryList"
+                        :key="index"
+                        :label="item"
+                        :value="item">
                     </el-option>
                   </el-select>
                 </div>
@@ -284,9 +298,9 @@
       </div>
     </div>
     <div
-      class="layout-menu"
-      v-if="activeIndex > -1 && isShowMenu"
-      :style="{top: menuY + 'px', left: menuX + 'px'}">
+        class="layout-menu"
+        v-if="activeIndex > -1 && isShowMenu"
+        :style="{top: menuY + 'px', left: menuX + 'px'}">
       <div class="layout-menu__item" @click="removeLayer">
         <span>删除图层</span>
       </div>
@@ -303,17 +317,17 @@
     <ai-dialog :visible.sync="isShowImg" append-to-body title="图片素材" @onConfirm="isShowImg = false">
       <el-button type="primary" style="margin-bottom: 20px" @click="isShowAddImg = true">添加图片</el-button>
       <ai-table
-        :tableData="images"
-        :total="images.length"
-        :colConfigs="colConfigs"
-        @getList="() => {}">
+          :tableData="images"
+          :total="images.length"
+          :colConfigs="colConfigs"
+          @getList="() => {}">
         <el-table-column slot="img" label="图片" align="center">
           <template slot-scope="{ row }">
             <ai-uploader
-              :instance="instance"
-              :value="[{url: row.url}]"
-              disabled
-              :limit="1">
+                :instance="instance"
+                :value="[{url: row.url}]"
+                disabled
+                :limit="1">
             </ai-uploader>
           </template>
         </el-table-column>
@@ -329,9 +343,9 @@
     </ai-dialog>
     <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加图片" @closed="form.images = []" @onConfirm="onImageConfirm">
       <ai-uploader
-        :instance="instance"
-        v-model="form.images"
-        :limit="9">
+          :instance="instance"
+          v-model="form.images"
+          :limit="9">
         <template slot="tips">
           <p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
         </template>
@@ -341,284 +355,283 @@
 </template>
 
 <script>
-  import { components } from '../config'
-  import VueRulerTool from 'vue-ruler-tool'
-  import VueDraggableResizable from 'vue-draggable-resizable'
-  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
-  import DataConfig from './form/DataConfig.vue'
-  import RenderElement from './RenderElement'
+import {components} from '../config'
+import VueRulerTool from 'vue-ruler-tool'
+import VueDraggableResizable from 'vue-draggable-resizable'
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
+import DataConfig from './form/DataConfig.vue'
+import RenderElement from './RenderElement'
 
-  export default {
-    props: {
-      instance: Function,
-      dict: Object,
-      params: Object,
-      urlPrefix: String
-    },
+export default {
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+    urlPrefix: String
+  },
 
-    data() {
-      return {
-        colConfigs: [
-          // { prop: 'url', label: '图片链接', showOverflowTooltip: false },
-          { slot: 'img', label: '图片' }
-        ],
-        form: {
-          images: []
-        },
-        isShowAddImg: false,
-        isShowImg: false,
-        parentIndex: 0,
-        subIndex: 0,
-        sonIndex: 0,
-        leftIndex: 0,
-        rightIndex: 1,
-        configIndex: 0,
-        components,
-        bigscreenWidth: 1920,
-        bigscreenHeight: 1080,
-        widthPaddingTools: 18,
-        componentList: [],
-        dashboard: {
-          title: '大屏',
-          width: 1920,
-          height: 1080,
-          theme: '0',
-          backgroundColor: '',
-          backgroundImage: []
-        },
-        menuX: 0,
-        menuY: 0,
-        isShowMenu: false,
-        activeIndex: -1,
-        middleWidth: 0,
-        middleHeight: 0,
-        widthScale: 0,
-        heightScale: 0,
-        bigscreenScaleInWorkbench: 0,
-        tableStatus: [{
-          label: '是',
-          value: '1'
-        }, {
-          label: '否',
-          value: '0'
-        }],
-        images: [],
-        summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
-        borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
-      }
-    },
-
-    components: {
-      RenderElement,
-      DataConfig,
-      VueRulerTool,
-      VueDraggableResizable,
-    },
-
-    computed: {
-      workbenchTransform() {
-        return `scale(${this.heightScale})`
+  data() {
+    return {
+      colConfigs: [
+        // { prop: 'url', label: '图片链接', showOverflowTooltip: false },
+        {slot: 'img', label: '图片'}
+      ],
+      form: {
+        images: []
       },
-
-      currLayout() {
-        if (this.activeIndex === -1) return {}
-
-        return this.componentList[this.activeIndex]
+      isShowAddImg: false,
+      isShowImg: false,
+      parentIndex: 0,
+      subIndex: 0,
+      sonIndex: 0,
+      leftIndex: 0,
+      rightIndex: 1,
+      configIndex: 0,
+      components,
+      bigscreenWidth: 1920,
+      bigscreenHeight: 1080,
+      widthPaddingTools: 18,
+      componentList: [],
+      dashboard: {
+        title: '大屏',
+        width: 1920,
+        height: 1080,
+        theme: '0',
+        backgroundColor: '',
+        backgroundImage: []
       },
+      menuX: 0,
+      menuY: 0,
+      isShowMenu: false,
+      activeIndex: -1,
+      middleWidth: 0,
+      middleHeight: 0,
+      widthScale: 0,
+      heightScale: 0,
+      bigscreenScaleInWorkbench: 0,
+      tableStatus: [{
+        label: '是',
+        value: '1'
+      }, {
+        label: '否',
+        value: '0'
+      }],
+      images: [],
+      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
+      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
+    }
+  },
 
-      widget() {
-        if (this.components.length && this.components[this.parentIndex].list.length) {
-          return this.components[this.parentIndex].list[this.subIndex].list
-        }
+  components: {
+    RenderElement,
+    DataConfig,
+    VueRulerTool,
+    VueDraggableResizable,
+  },
 
-        return []
-      }
+  computed: {
+    workbenchTransform() {
+      return `scale(${this.heightScale})`
     },
 
-    mounted() {
-      if (this.params && this.params.id) {
-        this.getInfo(this.params.id)
+    currLayout() {
+      if (this.activeIndex === -1) return {}
+      return this.componentList[this.activeIndex]
+    },
+
+    widget() {
+      if (this.components.length && this.components[this.parentIndex].list.length) {
+        return this.components[this.parentIndex].list[this.subIndex].list
       }
+
+      return []
+    }
+  },
+
+  mounted() {
+    if (this.params && this.params.id) {
+      this.getInfo(this.params.id)
+    }
+    this.$nextTick(() => {
+      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
+      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
+      this.initCanvas()
+    })
+  },
+
+  methods: {
+    bindEvent() {
+      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
+      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
+
       this.$nextTick(() => {
-        this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-        this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
         this.initCanvas()
       })
     },
 
-    methods: {
-      bindEvent() {
-        this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-        this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
+    copy(link) {
+      let oInput = document.createElement('input')
+      oInput.value = link
+      document.body.appendChild(oInput)
+      oInput.select()
+      document.execCommand('Copy')
+      this.$message({
+        message: '已复制',
+        type: 'success'
+      })
+      oInput.remove()
+    },
 
-        this.$nextTick(() => {
-          this.initCanvas()
-        })
-      },
+    removeImg(index) {
+      this.images.splice(index, 1)
+    },
 
-      copy (link) {
-        let oInput = document.createElement('input')
-        oInput.value = link
-        document.body.appendChild(oInput)
-        oInput.select()
-        document.execCommand('Copy')
-        this.$message({
-          message: '已复制',
-          type: 'success'
-        })
-        oInput.remove()
-      },
-
-      removeImg (index) {
-        this.images.splice(index, 1)
-      },
-
-      onImageConfirm () {
-        if (!this.form.images.length) {
-          return this.$message.error('请上传图片')
-        }
-
-        this.images = [
-          ...this.images,
-          ...this.form.images
-        ]
-
-        this.form.images = []
-        this.isShowAddImg = false
-      },
-
-      setTop() {
-        const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
-          return item.zIndex
-        }))
-
-        this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
-      },
-
-      setBottom() {
-        const item = this.componentList[this.activeIndex]
-        this.componentList.splice(this.activeIndex, 1)
-        this.componentList.unshift(item)
-      },
-
-      getInfo(id) {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
-          if (res.code === 0) {
-            const data = JSON.parse(res.data.config)
-            this.componentList = data.config
-            this.dashboard = data.dashboard
-            this.images = data.images || []
-          }
-        })
-      },
-
-      back() {
-        this.$emit('close')
-      },
-
-      save() {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
-          config: JSON.stringify({
-            config: this.componentList,
-            dashboard: this.dashboard,
-            images: this.images
-          }),
-          status: 1,
-          title: this.dashboard.title,
-          id: this.params.id || ''
-        }).then(res => {
-          if (res.code == 0) {
-            this.$message.success('保存成功')
-            this.$emit('change', res.data)
-            this.back()
-          }
-        })
-      },
-
-      clone(e) {
-        this.componentList.push(this.deepClone(e))
-      },
-
-      onChange(e) {
-        if (e.indexOf('Chart') > -1) {
-          this.$refs[`chart${this.activeIndex}`][0].refresh()
-        }
-      },
-
-      deepClone(data, hash = new WeakMap()) {
-        if (typeof data !== 'object' || data === null) {
-          throw new TypeError('传入参数不是对象')
-        }
-        if (hash.has(data)) {
-          return hash.get(data)
-        }
-        let newData = {}
-        const dataKeys = Object.keys(data)
-        dataKeys.forEach(value => {
-          const currentDataValue = data[value]
-          if (typeof currentDataValue !== "object" || currentDataValue === null) {
-            newData[value] = currentDataValue
-          } else if (Array.isArray(currentDataValue)) {
-            newData[value] = [...currentDataValue]
-          } else if (currentDataValue instanceof Set) {
-            newData[value] = new Set([...currentDataValue])
-          } else if (currentDataValue instanceof Map) {
-            newData[value] = new Map([...currentDataValue])
-          } else {
-            hash.set(data, data)
-            newData[value] = this.deepClone(currentDataValue, hash)
-          }
-        })
-        return newData
-      },
-
-      onContextmenu(e, index) {
-        this.menuX = e.clientX + 10
-        this.menuY = e.clientY + 10
-        this.activeIndex = index
-        this.isShowMenu = true
-
-        e.preventDefault()
-      },
-
-      copyLayer() {
-        const layer = this.deepClone(this.componentList[this.activeIndex])
-        this.componentList.push(layer)
-      },
-
-      removeLayer() {
-        this.componentList.splice(this.activeIndex, 1)
-        this.activeIndex = -1
-      },
-
-      onActivated(index) {
-        this.activeIndex = index
-      },
-
-
-      onDrag(x, y, index) {
-        this.$set(this.componentList[index], 'left', x)
-        this.$set(this.componentList[index], 'top', y)
-      },
-
-      onResizing(x, y, w, h, index, type) {
-        this.$set(this.componentList[index], 'left', x)
-        this.$set(this.componentList[index], 'top', y)
-        this.$set(this.componentList[index], 'width', w)
-        this.$set(this.componentList[index], 'height', h)
-
-        if (type.indexOf('Chart') > -1) {
-          // this.$refs[`chart${index}`][0].watchResize()
-        }
-      },
-
-      initCanvas() {
-        var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
-        var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
-        this.heightScale = Math.min(widthScale, heightScale)
+    onImageConfirm() {
+      if (!this.form.images.length) {
+        return this.$message.error('请上传图片')
       }
+
+      this.images = [
+        ...this.images,
+        ...this.form.images
+      ]
+
+      this.form.images = []
+      this.isShowAddImg = false
+    },
+
+    setTop() {
+      const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
+        return item.zIndex
+      }))
+
+      this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
+    },
+
+    setBottom() {
+      const item = this.componentList[this.activeIndex]
+      this.componentList.splice(this.activeIndex, 1)
+      this.componentList.unshift(item)
+    },
+
+    getInfo(id) {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+        if (res.code === 0) {
+          const data = JSON.parse(res.data.config)
+          this.componentList = data.config
+          this.dashboard = data.dashboard
+          this.images = data.images || []
+        }
+      })
+    },
+
+    back() {
+      this.$emit('close')
+    },
+
+    save() {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
+        config: JSON.stringify({
+          config: this.componentList,
+          dashboard: this.dashboard,
+          images: this.images
+        }),
+        status: 1,
+        title: this.dashboard.title,
+        id: this.params.id || ''
+      }).then(res => {
+        if (res.code == 0) {
+          this.$message.success('保存成功')
+          this.$emit('change', res.data)
+          this.back()
+        }
+      })
+    },
+
+    clone(e) {
+      this.componentList.push(this.deepClone(e))
+    },
+
+    onChange(e) {
+      if (e.indexOf('Chart') > -1) {
+        this.$refs[`chart${this.activeIndex}`][0].refresh()
+      }
+    },
+
+    deepClone(data, hash = new WeakMap()) {
+      if (typeof data !== 'object' || data === null) {
+        throw new TypeError('传入参数不是对象')
+      }
+      if (hash.has(data)) {
+        return hash.get(data)
+      }
+      let newData = {}
+      const dataKeys = Object.keys(data)
+      dataKeys.forEach(value => {
+        const currentDataValue = data[value]
+        if (typeof currentDataValue !== "object" || currentDataValue === null) {
+          newData[value] = currentDataValue
+        } else if (Array.isArray(currentDataValue)) {
+          newData[value] = [...currentDataValue]
+        } else if (currentDataValue instanceof Set) {
+          newData[value] = new Set([...currentDataValue])
+        } else if (currentDataValue instanceof Map) {
+          newData[value] = new Map([...currentDataValue])
+        } else {
+          hash.set(data, data)
+          newData[value] = this.deepClone(currentDataValue, hash)
+        }
+      })
+      return newData
+    },
+
+    onContextmenu(e, index) {
+      this.menuX = e.clientX + 10
+      this.menuY = e.clientY + 10
+      this.activeIndex = index
+      this.isShowMenu = true
+
+      e.preventDefault()
+    },
+
+    copyLayer() {
+      const layer = this.deepClone(this.componentList[this.activeIndex])
+      this.componentList.push(layer)
+    },
+
+    removeLayer() {
+      this.componentList.splice(this.activeIndex, 1)
+      this.activeIndex = -1
+    },
+
+    onActivated(index) {
+      this.activeIndex = index
+    },
+
+
+    onDrag(x, y, index) {
+      this.$set(this.componentList[index], 'left', x)
+      this.$set(this.componentList[index], 'top', y)
+    },
+
+    onResizing(x, y, w, h, index, type) {
+      this.$set(this.componentList[index], 'left', x)
+      this.$set(this.componentList[index], 'top', y)
+      this.$set(this.componentList[index], 'width', w)
+      this.$set(this.componentList[index], 'height', h)
+
+      if (type.indexOf('Chart') > -1) {
+        // this.$refs[`chart${index}`][0].watchResize()
+      }
+    },
+
+    initCanvas() {
+      var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
+      var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
+      this.heightScale = Math.min(widthScale, heightScale)
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>