表格调整完毕

2024-04-16 17:42:57 +08:00
parent 8f21db5ca3
commit 7393eeb858
5 changed files with 66 additions and 75 deletions
--- a/packages/bigscreen/designer/components/chartPicker.vue
+++ b/packages/bigscreen/designer/components/chartPicker.vue
@@ -7,7 +7,7 @@
        <el-button v-else type="text">选择图表</el-button>
      </template>
      <div class="charts">
-        <div class="item pointer" v-for="tpl in tpls" :key="tpl.type" :class="{selected:selected==tpl.type}"
+        <div class="item pointer" v-for="(tpl,i) in tpls" :key="i" :class="{selected:selected==tpl.type}"
             @click="selected=tpl.type">
          <img :src="tpl.thumb"/>
          <div v-text="tpl.label"/>
--- a/packages/bigscreen/designer/components/configExtra.vue
+++ b/packages/bigscreen/designer/components/configExtra.vue
@@ -33,7 +33,24 @@ export default {
  },
  computed: {
    summaryOps: () => Object.keys(AiDvSummary.components).map(e => ({label: e, id: e})),
-  }
+    values: v => v.config?.[v.config?.dataType] || v.config.data
+  },
+  watch: {
+    values: {
+      immediate: true, deep: true,
+      handler() {
+        if (this.config.type === 'AiDvTable') {
+          this.config.config = this.values?.map((v, i) => {
+            return {
+              color: this.config.config?.[i]?.color || '',
+              width: this.config.config?.[i]?.width || '',
+              align: this.config.config?.[i]?.align || '',
+            }
+          })
+        }
+      }
+    }
+  },
 }
 </script>

@@ -61,12 +78,12 @@ export default {
      </config-item>
    </template>
    <template v-if="/tabs/.test(config.type)">
-      <group-item v-for="(tab,i) in config.tabs" :key="i" :label="tab.label">
-        <template v-for="(comp,j) in tab.comps">
-          <config-item :label="comp.label">
+      <group-item v-for="(tab,i) in values" :key="i" :label="i">
+        <template v-for="(comp,j) in tab">
+          <config-item :label="comp.name">
            <chart-picker v-model="comp.type" :tpls="layers"/>
          </config-item>
-          <config-extra v-model="tab.comps[j]"/>
+          <config-extra v-model="tab[j]"/>
        </template>
      </group-item>
    </template>
--- a/ui/dv/AiDvRender.vue
+++ b/ui/dv/AiDvRender.vue
@@ -1,9 +1,10 @@
 <template>
  <div class="AiDvRender" style="width: 100%; height: 100%;">
    <ai-dv-display v-if="currentType === 'display'" :title="data.title" :list="values"/>
+    <ai-dv-tabs v-else-if="currentType=='tabs'" :config="data" :theme="theme"/>
    <ai-dv-panel
        style="height: 100%; width: 100%;"
-        v-if="currentType !== 'display'"
+        v-else
        :padding="data.padding"
        :title="data.title"
        :theme="theme"
@@ -33,7 +34,7 @@
          :stripe="data.stripe"
          :theme="theme"
          :isShowIndex="data.isShowIndex"
-          :config="dvTableConfig"
+          :config="data.config"
          :data="values" :simple="data.simple==1">
      </AiDvTable>
      <AiRanking
@@ -65,12 +66,6 @@
      <ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts" :instance="instance"/>
      <ai-assist v-else-if="currentType=='aiAssist'"/>
      <ai-linkage-map v-else-if="currentType=='linkageMap'" :config="data" :instance="instance"/>
-      <template v-else-if="currentType=='tabs'">
-        <div slot="right" class="flex">
-          <div class="tabItem" v-for="(tab,i) in data.tabs" :key="i" v-text="tab.label" @click="activeTab=i.toString()" :class="{active:activeTab==i}"/>
-        </div>
-        <ai-dv-tabs v-model="activeTab" :config="data" :values="values"/>
-      </template>
    </ai-dv-panel>
  </div>
 </template>
@@ -116,7 +111,6 @@ export default {
      map: null,
      lib: null,
      timer: null,
-      dvTableConfig: [],
      mapDialog: false,
      activeTab: '0'
    }
@@ -132,33 +126,6 @@ export default {
      deep: true, handler() {
        if (this.currentType == 'map') {
          this.renderMap()
-        } else if (this.currentType === 'tabs') {
-          //数据驱动内容生成,新增tab中的内容由设置的数据来生成
-          const meta = this.$copy(this.data.tabs)
-          this.data.tabs = Object.entries(this.values).map(([label, v]) => {
-            const tab = meta.find(e => e.label === label)
-            const comps = []
-            if (Array.isArray(v.data)) {
-              const origin = tab.comps?.[0] || {}
-              delete origin.comps
-              comps.push({...origin, label: "内容"})
-            } else {
-              Object.keys(v.data).map(name => {
-                const layer = tab.comps.find(e => e.label === name)
-                comps.push({label: name, ...layer})
-              })
-            }
-            return {label, comps}
-          })
-        } else if (this.currentType === 'AiDvTable') {
-          this.dvTableConfig = this.data[this.data.dataType].map((v, i) => {
-            return {
-              color: this.data.config?.[i]?.color || '',
-              width: this.data.config?.[i]?.width || '',
-              align: this.data.config?.[i]?.align || '',
-            }
-          })
-          this.data.config = this.dvTableConfig
        }
      }
    }
@@ -394,20 +361,5 @@ export default {
    right: 32px;
    backdrop-filter: blur(10px);
  }
-
-  .tabItem {
-    color: #1FBECC;
-    background: #1f9ecc29;
-    padding: 0 10px;
-    line-height: 20px;
-    margin-left: 4px;
-    font-size: 12px;
-    user-select: none;
-
-    &.active {
-      border: 1px solid #20B4C5;
-      color: #02FEFF;
-    }
-  }
 }
 </style>
--- a/ui/dv/AiDvTabs.vue
+++ b/ui/dv/AiDvTabs.vue
@@ -1,25 +1,27 @@
 <script>
+import AiDvPanel from "./layout/AiDvPanel/AiDvPanel.vue";
+
 export default {
  name: "AiDvTabs",
-  model: {
-    prop: "active",
-    event: "input"
-  },
+  components: {AiDvPanel},
  props: {
-    active: String,
    config: Object,
-    values: Object
+  },
+  data() {
+    return {activeTab: '0'}
  },
  computed: {
-    layers: {
-      set(settings) {
-        console.log(settings)
-      },
-      get() {
-        const v = this
-        const tab = v.config?.tabs[v.active]
-        const values = v.values[tab.label]?.data || {}
-        return tab.comps?.map(e => ({dataType: "staticData", ...e, staticData: Array.isArray(values) ? values : values[e.label]}))?.filter(e => e.type) || []
+    values: v => v.config?.[v.config?.dataType] || {},
+    tabs: v => Object.keys(v.values),
+    layers() {
+      return this.values[this.activeTab].map(e => ({dataType: "staticData", ...e, staticData: e.data})) || []
+    }
+  },
+  watch: {
+    tabs: {
+      immediate: true, deep: true,
+      handler(v) {
+        this.activeTab = v[0]
      }
    }
  }
@@ -28,7 +30,12 @@ export default {

 <template>
  <section class="AiDvTabs">
-    <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="layers[i]" :index="i"/>
+    <ai-dv-panel :padding="config.padding" :title="config.title" :theme="$attrs.theme" :border="config.border || ''">
+      <div slot="right" class="flex">
+        <div class="tabItem" v-for="(tab,i) in tabs" :key="i" v-text="tab" @click="activeTab=tab" :class="{active:activeTab==tab}"/>
+      </div>
+      <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="layers[i]" :index="i"/>
+    </ai-dv-panel>
  </section>
 </template>

@@ -38,5 +45,20 @@ export default {
  flex-direction: column;
  gap: 16px;
  height: 100%;
+
+  .tabItem {
+    color: #1FBECC;
+    background: #1f9ecc29;
+    padding: 0 10px;
+    line-height: 20px;
+    margin-left: 4px;
+    font-size: 12px;
+    user-select: none;
+
+    &.active {
+      border: 1px solid #20B4C5;
+      color: #02FEFF;
+    }
+  }
 }
 </style>
--- a/ui/dv/layout/AiDvTable/AiDvTable.vue
+++ b/ui/dv/layout/AiDvTable/AiDvTable.vue
@@ -118,7 +118,7 @@ export default {
    columns: v => v.header.map((e, i) => {
      let item = {}
      Object.values(e).forEach(label => {
-        const {align, width, color} = v.config[i]
+        const {align, width, color} = (v.config[i] || {})
        item.align = align
        item.prop = `col${i}`
        item.label = label
@@ -233,7 +233,7 @@ export default {
  }

  .body {
-    height: calc(100% - 40px);
+    height: calc(100% - 32px);
    padding: 10px 0;
    overflow-y: auto;
    box-sizing: border-box;