提交一波,继续处理数据结构

ui/dv/AiDvRender.vue

@@ -65,6 +65,12 @@
       <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" :class="{active:activeTab==i}"/>
+        </div>
+        <ai-dv-tabs v-model="activeTab" :config="data" :values="values"/>
+      </template>
     </ai-dv-panel>
   </div>
 </template>
@@ -75,14 +81,15 @@ import Vue from "vue"
 import {mapState} from 'vuex'
 import AiDvMap from "./AiDvMap";
 import AiMonitor from "./AiMonitor/AiMonitor";
-import AiSwiper from './AiSwiper.vue'
+import AiSwiper from './AiSwiper'
 import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
 import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
 import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
-import AiDvPlot from "./layout/AiDvPlot/AiDvPlot.vue";
-import AiAssist from "./AiAssist.vue";
-import AiMonitorCarousel from "./AiMonitorCarousel.vue";
-import AiLinkageMap from "./AiLinkageMap.vue";
+import AiDvPlot from "./layout/AiDvPlot/AiDvPlot";
+import AiAssist from "./AiAssist";
+import AiMonitorCarousel from "./AiMonitorCarousel";
+import AiLinkageMap from "./AiLinkageMap";
+import AiDvTabs from "./AiDvTabs";
 
 Vue.use(scrollBoard)
 
@@ -90,6 +97,7 @@ export default {
   name: 'AiDvRender',
   props: ['data', 'index', 'theme', 'instance'],
   components: {
+    AiDvTabs,
     AiLinkageMap,
     AiMonitorCarousel,
     AiAssist,
@@ -110,6 +118,7 @@ export default {
       timer: null,
       dvTableConfig: [],
       mapDialog: false,
+      activeTab: '0'
     }
   },
   computed: {
@@ -123,6 +132,22 @@ 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)) {
+              comps.push({label: "内容", ...tab})
+            } 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 {
@@ -241,7 +266,7 @@ export default {
 
 <style lang="scss" scoped>
 .AiDvRender {
-  :deep(.dvScrollBoard1 ) {
+  :deep(.dvScrollBoard1) {
 
     .header {
       background: rgba(0, 0, 0, 0.1) !important;
@@ -282,7 +307,6 @@ export default {
     }
   }
 
-
   :deep(.marker) {
     position: relative;
 
@@ -368,5 +392,20 @@ 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>