预埋弹窗设置点

components/AiDvDialog.vue

@@ -27,6 +27,14 @@ export default {
       return config
     }
   },
+  methods: {
+    show() {
+      this.dialog = true
+    },
+    close() {
+      this.dialog = false
+    }
+  }
 }
 </script>
 

components/AiDvViewer.vue

@@ -1,9 +1,8 @@
 <template>
   <section class="AiDvViewer">
     <div v-if="!component">
-      <div
-          class="component-item"
-          :style="{
+      <div class="component-item"
+           :style="{
           width: item.width + 'px',
           height: item.height + 'px',
           left: item.left * scale + 'px',
@@ -12,19 +11,22 @@
           zIndex: item.zIndex,
           transform: `scale(${scale})`
         }"
-        v-for="(item, index) in componentList"
-        :key="index">
+           v-for="(item, index) in componentList"
+           :key="index" @click="handleClick(item)">
         <ai-dv-render :instance="instance" :key="index" :data="item" :index="index" :theme="dashboard.theme"/>
       </div>
     </div>
     <components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
+    <ai-dv-dialog ref="dvDialog" v-bind="dialog"/>
   </section>
 </template>
 
 <script>
+import AiDvDialog from "./AiDvDialog.vue";
 
 export default {
   name: 'AiDvViewer',
+  components: {AiDvDialog},
   label: '大屏预览',
   props: {
     instance: Function,
@@ -56,7 +58,8 @@ export default {
       },
       componentList: [],
       scale: 1,
-      meta: {}
+      meta: {},
+      dialog: {}
     }
   },
   mounted() {
@@ -168,11 +171,35 @@ export default {
         }
       })
     },
-
+    handleClick(item = {}) {
+      const {dialogTitle, dialogContent} = item
+      if (dialogTitle) {
+        this.dialog = {title: dialogTitle, content: dialogContent, ...this.getStaticDataProps(item.staticData)}
+        this.$refs.dvDialog.show()
+      }
+    },
+    //新版静态数据处理
+    getStaticDataProps(meta = []) {
+      const columnProp = "name"
+      let columns = [], tableData = []
+      meta.map((row, i) => {
+        const prop = `c${i || ""}`
+        columns.push({label: row[columnProp], prop})
+        Object.entries(row).map(([k, v]) => {
+          if (/^v/.test(k)) {
+            const item = tableData[k.substring(1) || 0] || {}
+            item[prop] = v
+            tableData[k.substring(1) || 0] = item
+          }
+        })
+      })
+      tableData = tableData.map(e => ({...e, $cellEdit: false}))
+      return {columns, tableData}
+    },
     close() {
       this.$emit('close')
     }
-  }
+  },
 }
 </script>
 

components/layout/AiDvSvg/AiDvSvg.vue

@@ -125,11 +125,12 @@ export default {
   .content {
     width: 100%;
     height: 100%;
-    padding: 14px 33px;
+    padding: 14px 33px 33px;
 
     .header {
       padding: 16px 0;
       font-weight: bold;
+      color: #FFFFFF;
     }
   }