预埋弹窗设置点

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
+      <div class="component-item"
-          class="component-item"
+           :style="{
-          :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"
+           v-for="(item, index) in componentList"
-        :key="index">
+           :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;
     }
   }
 

packages/bigscreen/designer/components/componentConfig.vue

@@ -218,11 +218,12 @@
     </div>
     <div class="layout-right__content--wrapper">
       <div class="layout-config__group">
-        <h2>进阶设置</h2>
+        <h2>弹窗设置</h2>
-        <config-item label="设置弹窗">
+        <config-item label="标题">
-          <config-item label="标题">
+          <el-input size="mini" clearable placeholder="请输入弹窗标题" v-model="config.dialogTitle"/>
-<!--            <el-input v-model="config.dialog.title" clearable/>-->
+        </config-item>
-          </config-item>
+        <config-item label="内容" v-if="!['table','AiDvTable'].includes(config.type)">
+          <ai-editor clearable placeholder="请输入弹窗内容" v-model="config.dialogContent" :instance="instance"/>
         </config-item>
       </div>
     </div>
@@ -235,13 +236,11 @@ import ConfigItem from "./configItem.vue";
 export default {
   name: 'componentConfig',
   components: {ConfigItem},
-
   props: {
     config: {default: () => ({})},
     instance: Function,
     dict: Object,
   },
-
   data() {
     return {
       borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
@@ -253,9 +252,10 @@ export default {
       tableStatus: [
         {label: '是', value: '1'},
         {label: '否', value: '0'}
-      ]
+      ],
+      dialog: {}
     }
-  }
+  },
 }
 </script>
 

packages/bigscreen/designer/components/configItem.vue

@@ -73,12 +73,19 @@ export default {
     height: 18px;
   }
 
-  .content {
+  :deep(.content) {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     text-align: right;
     margin-left: 30px;
+
+    input, textarea {
+      background: #262C33;
+      font-size: 12px;
+      color: #fff;
+      border: 1px solid #030411;
+    }
   }
 
   &.topLabel {

packages/bigscreen/designer/components/tableEditor.vue

@@ -1,5 +1,4 @@
 <script>
-import Vue from 'vue'
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 
 export default {
@@ -75,11 +74,6 @@ export default {
     }
   },
   created() {
-    Vue.use(window.AVUE, {
-      size: 'mini',
-      tableSize: 'mini',
-      calcHeight: 36,
-    })
     this.records = this.tableData.map(e => ({$cellEdit: true, ...e}))
   }
 }

packages/bigscreen/designer/viewport.vue

@@ -7,6 +7,7 @@
         <h2>{{ dashboard.title }}</h2>
       </div>
       <div class="layout-header__right">
+        <span type="text" @click="preview">预览</span>
         <span type="text" @click="isShowImg = true">素材</span>
         <span type="text" @click="back()">退出</span>
         <span type="text" @click="save">保存</span>
@@ -233,9 +234,15 @@ import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 import DataConfig from './components/DataConfig.vue'
 import ComponentConfig from "./components/componentConfig.vue";
 import {mapActions} from "vuex"
+import Vue from "vue";
 
 export default {
   name: "designDashboard",
+  provide() {
+    return {
+      setCurLayer: this.setCurLayer
+    }
+  },
   props: {
     instance: Function,
     dict: Object,
@@ -284,22 +291,19 @@ export default {
       resizeWrapper: true
     }
   },
-
   components: {
     ComponentConfig,
     DataConfig,
     VueRulerTool,
     VueDraggableResizable,
   },
-
   computed: {
     workbenchTransform() {
       return `scale(${this.heightScale})`
     },
     currLayout: {
       set(v) {
-        console.log(v)
+        this.setCurLayer(v)
-        this.componentList.splice(this.activeIndex, 1, v)
       },
       get() {
         return this.activeIndex > -1 ? this.componentList[this.activeIndex] : {}
@@ -313,7 +317,6 @@ export default {
       return []
     }
   },
-
   mounted() {
     this.dict.load("yesOrNo")
     this.getInfo(this.$route.query.did)
@@ -500,7 +503,22 @@ export default {
       let widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
       let heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
       this.heightScale = Math.min(widthScale, heightScale)
+    },
+    preview() {
+      const {origin, pathname} = location
+      window.open(origin + pathname + '?id=' + this.$route.query.did + "#preview")
+    },
+    setCurLayer(v) {
+      console.log(v)
+      this.componentList.splice(this.activeIndex, 1, v)
     }
+  },
+  created() {
+    Vue.use(window.AVUE, {
+      size: 'mini',
+      tableSize: 'mini',
+      calcHeight: 36,
+    })
   }
 }
 </script>