表格组件

2023-03-15 15:18:19 +08:00
parent 106535fc01
commit 529e0ddccf
7 changed files with 87 additions and 55 deletions
--- a/components/AiDvRender.vue
+++ b/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
+        }
      }
    }
  },
--- a/components/AiDvViewer.vue
+++ b/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') {
--- a/components/AiEchart/template/bar/barChart5.js
+++ b/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'}
 }
--- a/components/layout/AiDvTable/AiDvTable.vue
+++ b/components/layout/AiDvTable/AiDvTable.vue
@@ -5,9 +5,9 @@
        v-for="(item, index) in header"
        :key="index"
        :style="{
-          width: item.width + 'px',
-          textAlign: item.align,
-          flex: item.width ? 'inherit' : 1
+          width: config[index].width ? config[index].width + 'px' : '',
+          textAlign: config[index].align,
+          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,
-            textAlign: column.align,
-            width: column.width + 'px',
-            flex: column.width ? 'inherit' : 1
+            color: config[i].color,
+            textAlign: config[i].align,
+            width: config[i].width ? config[i].width + 'px' : '',
+            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 = []
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/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()) {
-      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])
+    deepClone(obj) {
+      if (obj instanceof Object) {
+        let newObj = {}
+
+        if (Array.isArray(obj)) {
+          let arr = []
+          obj.forEach(item => {
+            arr.push(this.deepClone(item))
+          })
+          return arr
+        } else if (typeof obj == 'function') {
+          newObj = obj.bind(newObj)
        } else {
-          hash.set(data, data)
-          newData[value] = this.deepClone(currentDataValue, hash)
+          for (let key in obj) {
+            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) {
--- a/packages/bigscreen/designer/components/form/componentConfig.vue
+++ b/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>
--- a/packages/bigscreen/designer/config.js
+++ b/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: [],