From 94dca3d6c47f0c09ca784b06cedcd3d78a3b60c6 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 28 Dec 2021 16:34:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E8=AE=BE=E8=AE=A1=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=9B=BE=E7=89=87=E7=B4=A0=E6=9D=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bigscreen/designer/components/Layout.vue  | 483 ++++++++++--------
 1 file changed, 279 insertions(+), 204 deletions(-)

diff --git a/packages/bigscreen/designer/components/Layout.vue b/packages/bigscreen/designer/components/Layout.vue
index 60a9feb1..1236c625 100644
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/packages/bigscreen/designer/components/Layout.vue
@@ -7,6 +7,7 @@
         <h2>{{ dashboard.title }}</h2>
       </div>
       <div class="layout-header__right">
+        <span type="text" @click="isShowImg = true">图片素材</span>
         <span type="text" @click="back">退出</span>
         <span type="text" @click="save">保存</span>
       </div>
@@ -266,9 +267,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>
@@ -282,246 +283,320 @@
         <span>置底图层</span>
       </div>
     </div>
+    <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="() => {}">
+        <el-table-column slot="img" label="图片" align="center">
+          <template slot-scope="{ row }">
+            <ai-uploader
+              :instance="instance"
+              :value="[{url: row.url}]"
+              disabled
+              :limit="1">
+            </ai-uploader>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row, $index }">
+            <div class="table-options">
+              <el-button type="text" @click="removeImg($index)">删除</el-button>
+              <el-button type="text" @click="copy(row.url)">复制链接</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </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">
+        <template slot="tips">
+          <p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
+        </template>
+      </ai-uploader>
+    </ai-dialog>
   </div>
 </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
-  },
-
-  data() {
-    return {
-      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,
-        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'
-      }],
-      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary5', 'summary7', 'summary9', 'summary10'],
-      borderList: ['border0', 'border1', 'border2', 'border3', 'border4']
-    }
-  },
-
-  components: {
-    RenderElement,
-    DataConfig,
-    VueRulerTool,
-    VueDraggableResizable,
-  },
-
-  computed: {
-    workbenchTransform() {
-      return `scale(${this.heightScale})`
+  export default {
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object,
+      urlPrefix: String
     },
 
-    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
+    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,
+          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', 'summary5', 'summary7', 'summary9', 'summary10'],
+        borderList: ['border0', 'border1', 'border2', 'border3', 'border4']
       }
+    },
 
-      return []
-    }
-  },
+    components: {
+      RenderElement,
+      DataConfig,
+      VueRulerTool,
+      VueDraggableResizable,
+    },
 
-  created() {
-  },
+    computed: {
+      workbenchTransform() {
+        return `scale(${this.heightScale})`
+      },
 
-  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()
-    })
-  },
+      currLayout() {
+        if (this.activeIndex === -1) return {}
 
-  methods: {
-    bindEvent() {
-      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
+        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()
       })
     },
 
-    setTop() {
-      const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
-        return item.zIndex
-      }))
+    methods: {
+      bindEvent() {
+        this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
+        this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
 
-      this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
-    },
+        this.$nextTick(() => {
+          this.initCanvas()
+        })
+      },
 
-    setBottom() {
-      const item = this.componentList[this.activeIndex]
-      this.componentList.splice(this.activeIndex, 1)
-      this.componentList.unshift(item)
-    },
+      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()
+      },
 
-    getInfo(id) {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
-        if (res.code === 0) {
-          this.componentList = JSON.parse(res.data.config).config
-          this.dashboard = JSON.parse(res.data.config).dashboard
+      removeImg (index) {
+        this.images.splice(index, 1)
+      }, 
+
+      onImageConfirm () {
+        if (!this.form.images.length) {
+          return this.$message.error('请上传图片')
         }
-      })
-    },
 
-    back() {
-      this.$emit('close')
-    },
+        this.images.push(this.form.images)
+        this.form.images = []
+        this.isShowAddImg = false
+      },
 
-    save() {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
-        config: JSON.stringify({
-          config: this.componentList,
-          dashboard: this.dashboard
-        }),
-        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()
+      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()
         }
-      })
-    },
+      },
 
-    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)
+      deepClone(data, hash = new WeakMap()) {
+        if (typeof data !== 'object' || data === null) {
+          throw new TypeError('传入参数不是对象')
         }
-      })
-      return newData
-    },
+        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
+      onContextmenu(e, index) {
+        this.menuX = e.clientX + 10
+        this.menuY = e.clientY + 10
+        this.activeIndex = index
+        this.isShowMenu = true
 
-      e.preventDefault()
-    },
+        e.preventDefault()
+      },
 
-    copyLayer() {
-      const layer = this.deepClone(this.componentList[this.activeIndex])
-      this.componentList.push(layer)
-    },
+      copyLayer() {
+        const layer = this.deepClone(this.componentList[this.activeIndex])
+        this.componentList.push(layer)
+      },
 
-    removeLayer() {
-      this.componentList.splice(this.activeIndex, 1)
-      this.activeIndex = -1
-    },
+      removeLayer() {
+        this.componentList.splice(this.activeIndex, 1)
+        this.activeIndex = -1
+      },
 
-    onActivated(index) {
-      this.activeIndex = index
-    },
+      onActivated(index) {
+        this.activeIndex = index
+      },
 
 
-    onDrag(x, y, index) {
-      this.$set(this.componentList[index], 'left', x)
-      this.$set(this.componentList[index], 'top', y)
-    },
+      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)
+      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()
+        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)
       }
-    },
-
-    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>