调整大屏展示内容

components/AiDvDialog.vue

@@ -0,0 +1,56 @@
+<script>
+import AiDrag from "./AiDrag.vue";
+import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";
+
+export default {
+  name: "AiDvDialog",
+  components: {AiDvSvg, AiDrag},
+  props: {
+    title: {default: "弹窗"},
+    tableData: {default: () => []},
+    columns: {type: [Array, Object]}
+  },
+  data() {
+    return {
+      dialog: false,
+      detail: {}
+    }
+  },
+  computed: {
+    colConfigs() {
+      let config = []
+      if (!Array.isArray(this.columns)) {
+        config = Object.entries(this.columns).map(([key, value]) => {
+          return {...value, prop: key}
+        })
+      } else config = this.columns
+      return config
+    }
+  },
+}
+</script>
+
+<template>
+  <section class="AiDvDialog">
+    <ai-drag v-if="dialog" :resizable="false">
+      <ai-dv-svg :title="title" @close="dialog=false">
+        <slot v-if="$slots.default"/>
+        <el-table v-else class="simple" :data="tableData">
+          <el-table-column v-for="item in colConfigs" :key="item.prop" :prop="item.prop" :label="item.label"/>
+        </el-table>
+      </ai-dv-svg>
+    </ai-drag>
+  </section>
+</template>
+
+<style scoped lang="scss">
+@import "dv";
+
+.AiDvDialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 999;
+  transform: translate(-50%, -50%);
+}
+</style>

components/AiDvRender.vue

@@ -32,7 +32,7 @@
           :theme="theme"
           :isShowIndex="data.isShowIndex"
           :config="dvTableConfig"
-          :data="values">
+          :data="values" :simple="data.simple==1">
       </AiDvTable>
       <AiRanking
           v-else-if="currentType === 'AiRanking'"

components/dv.scss

@@ -0,0 +1,62 @@
+:deep(.el-table.simple) {
+  font-size: 13px;
+  color: #fff;
+  background-color: transparent !important;
+
+  .el-table__header {
+    background: rgba(33, 180, 253, 0.1);
+  }
+
+  &::before {
+    display: none !important;
+  }
+
+  tr.el-table__row--striped td {
+    background: rgba(33, 180, 253, 0.1) !important;
+  }
+
+  .el-table th.el-table__cell {
+    background: transparent !important;
+  }
+
+  .el-table__header tr th:first-child .cell {
+    padding-left: 20px !important;
+  }
+
+  .el-table__header tr th.is-right .cell {
+    padding-right: 20px !important;
+  }
+
+  .el-table__body tr td.is-right .cell {
+    padding-right: 20px !important;
+  }
+
+  .el-table__body tr td:first-child .cell {
+    padding-left: 20px !important;
+  }
+
+  &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: rgba(33, 180, 253, 0.1) !important;
+  }
+
+  td.el-table__cell, th.el-table__cell.is-leaf {
+    border-bottom: none !important;
+  }
+
+  th.el-table__cell {
+    background-color: transparent !important;
+  }
+
+  tr {
+    background-color: transparent !important;
+  }
+
+  .el-table__cell {
+    padding: 7px 0;
+    color: #d0e1e8;
+  }
+
+  .el-table__header tr .cell {
+    color: #02FEFF !important;
+  }
+}

components/layout/AiDvSvg/AiDvSvg.vue

@@ -2,6 +2,9 @@
 const w = 12, h = 10, r = 200
 export default {
   name: "AiDvSvg",
+  props: {
+    title: {default: "慧智会言"},
+  },
   data() {
     return {
       border: "",
@@ -18,7 +21,7 @@ export default {
       this.width = width
       this.height = height
       this.getBorder(width, height)
-      const vv = width - w, hh = height - h
+      const vv = width - w
       this.box = {
         top: `m${vv - r + 33},${13 + h}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
         leftBottom: `m46.5,${height + 10}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
@@ -96,7 +99,7 @@ export default {
     </svg>
     <div class="close" @click="$emit('close')"/>
     <div class="content">
-      <div class="header">慧智会言</div>
+      <div class="header" v-text="title"/>
       <slot/>
     </div>
   </section>

components/layout/AiDvTable/AiDvTable.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="aiDvTable" :class="'aiDvTable-' + theme + ' aiDvTable-' + size">
+  <section class="AiDvTable">
+    <el-table v-if="simple" class="simple" :data="tableData">
+      <el-table-column v-for="item in columns" :key="item.prop" v-bind="item"/>
+    </el-table>
+    <div v-else class="aiDvTable" :class="'aiDvTable-' + theme + ' aiDvTable-' + size">
       <div class="header" :style="headerStyle">
       <span
           v-for="(item, index) in header"
@@ -36,6 +40,7 @@
         </div>
       </div>
     </div>
+  </section>
 </template>
 
 <script>
@@ -70,7 +75,8 @@
 
     headerStyle: {
       type: Object,
-        default: () => {}
+      default: () => {
+      }
     },
 
     isShowIndex: {
@@ -96,7 +102,8 @@
     size: {
       type: String,
       default: 'small'
-      }
+    },
+    simple: Boolean
   },
 
   data() {
@@ -105,7 +112,25 @@
       body: []
     }
   },
-
+  computed: {
+    columns: v => v.header.map((e, i) => {
+      let item = {}
+      Object.values(e).forEach(label => {
+        const {align} = v.config[i]
+        item.align = align
+        item.prop = `col${i}`
+        item.label = label
+      })
+      return item
+    }),
+    tableData: v => v.body.map(arr => {
+      const item = {}
+      Object.values(arr).forEach((value, i) => {
+        item[`col${i}`] = value
+      })
+      return item
+    })
+  },
   watch: {
     data: {
       handler(v) {
@@ -115,10 +140,6 @@
       immediate: true
     }
   },
-
-    mounted () {
-    },
-
   methods: {
     init(value) {
       if (!value.length) {
@@ -148,12 +169,14 @@
       if (config.click && typeof config.click === 'function') {
         return config.click.call(this, e)
       }
-      }
+    },
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import "../../dv";
+
 .aiDvTable {
   height: 100%;
   overflow: hidden;
@@ -206,6 +229,7 @@
     padding: 10px 0;
     overflow-y: auto;
     box-sizing: border-box;
+
     .row {
       display: flex;
       align-items: center;
@@ -289,6 +313,7 @@
     ::-webkit-scrollbar-track {
       box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
     }
+
     .header {
       background: rgba(226, 121, 81, 0.2);
     }

packages/bigscreen/designer/components/componentConfig.vue

@@ -103,6 +103,15 @@
               </el-select>
             </div>
           </div>
+          <div class="layout-config__item" v-if="config.type === 'AiDvTable'">
+            <label>简易样式</label>
+            <div class="layout-config__item--right">
+              <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
+                <el-option label="是" value="1"/>
+                <el-option label="否" value="0"/>
+              </el-select>
+            </div>
+          </div>
           <div class="layout-config__item" v-if="config.type !== 'AiDvTable'">
             <label>表格行数</label>
             <div class="layout-config__item--right">
@@ -207,12 +216,25 @@
         </div>
       </div>
     </div>
+    <div class="layout-right__content--wrapper">
+      <div class="layout-config__group">
+        <h2>进阶设置</h2>
+        <config-item label="设置弹窗">
+          <config-item label="标题">
+<!--            <el-input v-model="config.dialog.title" clearable/>-->
+          </config-item>
+        </config-item>
+      </div>
+    </div>
   </section>
 </template>
 
 <script>
+import ConfigItem from "./configItem.vue";
+
 export default {
   name: 'componentConfig',
+  components: {ConfigItem},
 
   props: {
     config: {default: () => ({})},

packages/bigscreen/designer/config.js

@@ -426,8 +426,9 @@ const components = [{
     }]
   }]
 }, {
-  type: 'table', label: '表格', list: [{
+  label: '表格', list: [
-    label: '表格', type: 'table', list: [{
+    {
+      label: '单表格', list: [{
         type: 'table',
         label: '表格',
         title: '表格',
@@ -495,7 +496,8 @@ const components = [{
         dynamicData: [],
         staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
       }]
-  }]
+    },
+  ]
 }, {
   type: 'ai3d', label: "3D", list: [{
     label: "3D楼栋", type: 'building', list: [{