表格组件

components/AiDvRender.vue

@@ -37,6 +37,7 @@
         :stripe="data.stripe"
         :theme="theme"
         :isShowIndex="data.isShowIndex"
+        :config="dvTableConfig"
         :data="values">
       </AiDvTable>
       <AiRanking
@@ -87,7 +88,8 @@ export default {
       chartList,
       map: null,
       lib: null,
-      timer: null
+      timer: null,
+      dvTableConfig: []
     }
   },
   computed: {
@@ -103,12 +105,24 @@ export default {
     currentType: v => v.data.type
   },
   watch: {
-    data: {
+    values: {
       immediate: true,
       deep: true, handler() {
         if (this.currentType == 'map') {
           // this.renderMap()
         }
+
+        if (this.currentType === 'AiDvTable') {
+          this.dvTableConfig = this.data[this.data.dataType].map((v, i) => {
+            return {
+              color: this.data.config[i] ? (this.data.config[i].color || '') : '',
+              width: this.data.config[i] ? (this.data.config[i].width || '') : '',
+              align: this.data.config[i] ? (this.data.config[i].align || '') : ''
+            }
+          })
+
+          this.data.config = this.dvTableConfig
+        }
       }
     }
   },

components/AiDvViewer.vue

@@ -85,7 +85,7 @@ export default {
             this.dashboard = JSON.parse(res.data.config).dashboard
 
             this.componentList.forEach((item, index) => {
-              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary'].includes(item.type))) {
+              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary', 'AiRanking', 'AiDvTable'].includes(item.type))) {
                 this.getSourceData(item, index)
               }
               if (item.type === 'monitor' && item.monitorType === 'cmcc') {

components/AiEchart/template/bar/barChart5.js

@@ -8,16 +8,15 @@ export default {
     left: 50, right: 0
   },
   tooltip: {
-    // trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
+    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
     textStyle: {color: '#fff'}
   },
   yAxis: {
     nameGap: 23, minInterval: 1,
-    // splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
     axisLabel: {color: '#fff'}, axisPointer: {show: false}
   },
   axisPointer: {
     type: 'none', show: true, triggerTooltip: false,
   },
-  daemon: {type: 'bar', barWidth: 12, stack: 'stack'}
 }

components/layout/AiDvTable/AiDvTable.vue

@@ -5,9 +5,9 @@
         v-for="(item, index) in header"
         :key="index"
         :style="{
-          width: item.width + 'px',
+          width: config[index].width ? config[index].width + 'px' : '',
-          textAlign: item.align,
+          textAlign: config[index].align,
-          flex: item.width ? 'inherit' : 1
+          flex: config[index].width ? 'inherit' : 1
         }">
         {{ item.v }}
       </span>
@@ -18,10 +18,10 @@
           v-for="(column, i) in item"
           :key="i"
           :style="{
-            color: column.color,
+            color: config[i].color,
-            textAlign: column.align,
+            textAlign: config[i].align,
-            width: column.width + 'px',
+            width: config[i].width ? config[i].width + 'px' : '',
-            flex: column.width ? 'inherit' : 1
+            flex: config[i].width ? 'inherit' : 1
           }">
           <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
           <span :title="column.v">{{ column.v }}</span>
@@ -54,6 +54,11 @@
       theme: {
         type: String,
         default: '0'
+      },
+
+      config: {
+        type: Array,
+        default: () => []
       }
     },
 
@@ -80,6 +85,7 @@
 
     methods: {
       init (value) {
+        console.log(this.config)
         if (!value.length) {
           this.header = []
           this.body = []

packages/bigscreen/designer/components/Layout.vue

@@ -396,6 +396,7 @@ export default {
       })
     },
     clone(e) {
+      console.log(this.deepClone(e))
       this.componentList.push(this.deepClone(e))
     },
 
@@ -405,31 +406,42 @@ export default {
       }
     },
 
-    deepClone(data, hash = new WeakMap()) {
+    deepClone(obj) {
-      if (typeof data !== 'object' || data === null) {
+      if (obj instanceof Object) {
-        throw new TypeError('传入参数不是对象')
+        let newObj = {}
-      }
+
-      if (hash.has(data)) {
+        if (Array.isArray(obj)) {
-        return hash.get(data)
+          let arr = []
-      }
+          obj.forEach(item => {
-      let newData = {}
+            arr.push(this.deepClone(item))
-      const dataKeys = Object.keys(data)
+          })
-      dataKeys.forEach(value => {
+          return arr
-        const currentDataValue = data[value]
+        } else if (typeof obj == 'function') {
-        if (typeof currentDataValue !== "object" || currentDataValue === null) {
+          newObj = obj.bind(newObj)
-          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)
+          for (let key in obj) {
-          newData[value] = this.deepClone(currentDataValue, hash)
+            let value = obj[key]
+            if (typeof value == 'function') {
+              newObj[key] = value.bind(newObj)
+            } else if (typeof value == 'object') {
+              if (Array.isArray(value)) {
+                newObj[key] = []
+                value.forEach(item => {
+                  newObj[key].push(this.deepClone(item))
+                })
+              } else {
+                newObj[key] = this.deepClone(value)
+              }
+            } else {
+              newObj[key] = value
+            }
+          }
         }
-      })
+
-      return newData
+        return newObj
+      } else {
+        return obj
+      }
     },
 
     onContextmenu(e, index) {

packages/bigscreen/designer/components/form/componentConfig.vue

@@ -110,7 +110,7 @@
               <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
             </div>
           </div>
-          <div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in data" :key="index">
+          <div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in config.config" :key="index">
             <label>第{{ index + 1 }}列</label>
             <div class="layout-config__item--right">
               <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
@@ -119,7 +119,7 @@
                 <el-option label="居右" value="right"></el-option>
               </el-select>
               <el-color-picker v-model="item.color" style="margin: 0 10px;"></el-color-picker>
-              <el-input-number v-model="item.width" :min="1" label="描述文字" controls-position="right"></el-input-number>
+              <el-input-number v-model="item.width" label="描述文字" controls-position="right"></el-input-number>
             </div>
           </div>
         </template>
@@ -213,23 +213,8 @@ export default {
       tableStatus: [
         {label: '是', value: '1'},
         {label: '否', value: '0'}
-      ],
+      ]
-      data: []
     }
-  },
-
-  watch: {
-    config: {
-      handler (v) {
-        this.data = v[v.dataType]
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-
-  created() {
-
   }
 }
 </script>

packages/bigscreen/designer/config.js

@@ -505,7 +505,23 @@ const components = [
             isShowIndex: '1',
             sourceDataId: '',
             api: '',
-            config: [],
+            config: [
+              {
+                width: '',
+                color: '',
+                align: ''
+              },
+              {
+                width: '',
+                color: '',
+                align: ''
+              },
+              {
+                width: '',
+                color: '',
+                align: ''
+              }
+            ],
             apiData: [],
             dataType: 'staticData',
             dynamicData: [],