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

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>

ui/dv/AiDvTabs.vue

@@ -0,0 +1,38 @@
+<script>
+import AiDvRender from "./AiDvRender";
+
+export default {
+  name: "AiDvTabs",
+  model: {
+    prop: "active",
+    event: "input"
+  },
+  props: {
+    active: String,
+    config: Object,
+    values: Object
+  },
+  components: {AiDvRender},
+  computed: {
+    layers: v => {
+      const tab = v.config?.tabs[v.active]
+      const values = v.values[tab.label]
+      return tab.comps?.map(e => ({dataType: "staticData", ...e, staticData: values[e.label]}))?.filter(e => e.type) || []
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="AiDvTabs">
+    <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="e"/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.AiDvTabs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px
+}
+</style>

ui/dv/layout/AiDvPanel/AiDvPanel.vue

@@ -4,6 +4,9 @@
       <template v-if="$slots.title" #title>
         <slot name="title"/>
       </template>
+      <template v-if="$slots.right" #right>
+        <slot name="right"/>
+      </template>
       <div :style="{padding}" class="content">
         <slot/>
       </div>

ui/dv/layout/AiDvPanel/borders/border13.vue

@@ -1,8 +1,9 @@
 <template>
   <section class="border13" :class="'border13-' + theme">
-    <div class="border13-title">
+    <div class="border13-title" :class="{right:!!$scopedSlots.right}">
       <!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
-      <h2>{{ title }}</h2>
+      <h2 class="fill" v-text="title"/>
+      <slot name="right"/>
     </div>
     <div class="slot">
       <slot/>
@@ -44,6 +45,10 @@ export default {
       height: 28px;
       margin-right: 8px;
     }
+
+    &.right {
+      padding-right: 0;
+    }
   }
 
   &.border13-1 .border13-title {