表格调整完毕

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"/>

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">
+      <group-item v-for="(tab,i) in values" :key="i" :label="i">
-        <template v-for="(comp,j) in tab.comps">
+        <template v-for="(comp,j) in tab">
-          <config-item :label="comp.label">
+          <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>

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>

ui/dv/AiDvTabs.vue

@@ -1,25 +1,27 @@
 <script>
+import AiDvPanel from "./layout/AiDvPanel/AiDvPanel.vue";
+
 export default {
   name: "AiDvTabs",
-  model: {
+  components: {AiDvPanel},
-    prop: "active",
-    event: "input"
-  },
   props: {
-    active: String,
     config: Object,
-    values: Object
+  },
+  data() {
+    return {activeTab: '0'}
   },
   computed: {
-    layers: {
+    values: v => v.config?.[v.config?.dataType] || {},
-      set(settings) {
+    tabs: v => Object.keys(v.values),
-        console.log(settings)
+    layers() {
-      },
+      return this.values[this.activeTab].map(e => ({dataType: "staticData", ...e, staticData: e.data})) || []
-      get() {
+    }
-        const v = this
+  },
-        const tab = v.config?.tabs[v.active]
+  watch: {
-        const values = v.values[tab.label]?.data || {}
+    tabs: {
-        return tab.comps?.map(e => ({dataType: "staticData", ...e, staticData: Array.isArray(values) ? values : values[e.label]}))?.filter(e => e.type) || []
+      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>

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;