大概可以看的一版

packages/bigscreen/designer/components/componentConfig.vue

@@ -29,177 +29,7 @@
           <el-input v-model="config.summaryTitle" size="mini" v-if="config.display === 'summary2'"/>
           <el-input v-else v-model="config.title" size="mini"/>
         </config-item>
-        <config-item label="边框" v-if="config.type !== 'display'">
+        <config-extra v-model="config"/>
-          <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
-            <el-option
-                v-for="(item, index) in borderList"
-                :key="index"
-                :label="item"
-                :value="item">
-            </el-option>
-          </el-select>
-        </config-item>
-        <template v-if="/(AiDvMap|linkageMap)/.test(config.type)">
-          <config-item label="地图数据(geoJSON)">
-            <el-input v-model="config.geoJson" size="mini" clearable placeholder="请输入geoJson的URL地址"/>
-          </config-item>
-        </template>
-        <template v-if="/linkageMap/.test(config.type)">
-          <config-item v-for="(item,i) in config.summaryConfigs" :key="i" :label="`统计${i+1}`">
-            <ai-select placeholder="请选择位置" v-model="item.pos" :select-list="positionList" size="mini"/>
-            <ai-select placeholder="请选择类型" v-model="item.display" :select-list="summaryOps" size="mini"/>
-          </config-item>
-        </template>
-        <template v-if="/tabs/.test(config.type)">
-          <group-item v-for="(tab,i) in config.tabs" :key="i" :label="tab.label">
-            <config-item :label="comp.label" v-for="(comp,j) in tab.comps" :key="i+'_'+j">
-              <chart-picker v-model="comp.type" :tpls="layers"/>
-            </config-item>
-          </group-item>
-        </template>
-        <template v-if="/Chart/.test(config.type)">
-          <config-item label="图表模板">
-            <chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
-          </config-item>
-          <config-item label="图表配置项" top-label>
-            <json-editor v-model="config.echartOps"/>
-          </config-item>
-        </template>
-        <config-item label="视频地址" v-if="config.type === 'video'">
-          <el-input v-model="config.src" size="mini"/>
-        </config-item>
-        <config-item label="图片URL" v-if="config.type=='img'">
-          <el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
-        </config-item>
-        <config-item label="视频类型" v-if="config.type === 'monitor'">
-          <ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
-        </config-item>
-        <config-item label="样式" v-if="config.type === 'AiRanking'">
-          <el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
-            <el-option label="样式1" value="Ranking1"></el-option>
-            <el-option label="样式2" value="Ranking2"></el-option>
-            <el-option label="样式3" value="Ranking3"></el-option>
-          </el-select>
-        </config-item>
-        <template v-if="config.type === 'table' || config.type === 'AiDvTable'">
-          <config-item label="显示排名">
-            <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
-              <el-option
-                  v-for="(item, index) in tableStatus"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value">
-              </el-option>
-            </el-select>
-          </config-item>
-          <config-item label="斑马纹" v-if="config.type === 'AiDvTable'">
-            <el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
-              <el-option
-                  label="是"
-                  value="1">
-              </el-option>
-              <el-option
-                  label="否"
-                  value="0">
-              </el-option>
-            </el-select>
-          </config-item>
-          <config-item label="简易样式" v-if="config.type === 'AiDvTable'">
-            <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
-              <el-option
-                  label="是"
-                  value="1">
-              </el-option>
-              <el-option
-                  label="否"
-                  value="0">
-              </el-option>
-            </el-select>
-          </config-item>
-          <config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
-            <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
-          </config-item>
-          <config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :key="i" :label="`第${i+1}列`">
-            <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
-              <el-option label="居中" value="center"></el-option>
-              <el-option label="居左" value="left"></el-option>
-              <el-option label="居右" value="right"></el-option>
-            </el-select>
-            <el-color-picker v-model="item.color" class="mar-h10" size="mini"/>
-            <el-input-number v-model="item.width" label="描述文字" controls-position="right" size="mini"/>
-          </config-item>
-        </template>
-        <template v-if="config.type === 'map'">
-          <div class="layout-config__item">
-            <label>遮罩层</label>
-            <div class="layout-config__item--right">
-              <el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
-                <el-option label="是" value="1"></el-option>
-                <el-option label="否" value="2"></el-option>
-              </el-select>
-            </div>
-          </div>
-          <div class="layout-config__item">
-            <label>地图图层</label>
-            <div class="layout-config__item--right">
-              <el-select size="mini" v-model="config.layers" placeholder="请选择" clearable>
-                <el-option label="地图" value="vector"/>
-                <el-option label="卫星" value="satellite"/>
-              </el-select>
-            </div>
-          </div>
-          <div class="layout-config__item">
-            <label>选择地区</label>
-            <div class="layout-config__item--right">
-              <AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
-            </div>
-          </div>
-          <div class="layout-config__item">
-            <label>限制地区</label>
-            <div class="layout-config__item--right">
-              <ai-select v-model="config.limitArea" :selectList="dict.getDict('yesOrNo')"/>
-            </div>
-          </div>
-          <div class="layout-config__item">
-            <label>显示标签</label>
-            <div class="layout-config__item--right">
-              <ai-select v-model="config.alwaysShow" :selectList="dict.getDict('yesOrNo')"/>
-            </div>
-          </div>
-          <div class="layout-config__item">
-            <label>展示光轨</label>
-            <div class="layout-config__item--right">
-              <ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
-            </div>
-          </div>
-          <div class="layout-config__item layout-config__item--input">
-            <label>地图样式</label>
-            <div class="layout-config__item--right">
-              <el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
-            </div>
-          </div>
-          <div class="layout-config__item layout-config__item--input">
-            <label>3D地图</label>
-            <div class="layout-config__item--right">
-              <ai-select v-model="config.is3d" :selectList="dict.getDict('yesOrNo')"/>
-            </div>
-          </div>
-          <div class="layout-config__item layout-config__item--input" v-if="config.is3d==1">
-            <label>3D环绕</label>
-            <div class="layout-config__item--right">
-              <ai-select v-model="config.is3dAround" :selectList="dict.getDict('yesOrNo')"/>
-            </div>
-          </div>
-          <div class="layout-config__item layout-config__item--input">
-            <label>显示图例</label>
-            <div class="layout-config__item--right">
-              <ai-select v-model="config.showPingchangMapLegend" :selectList="dict.getDict('yesOrNo')"/>
-            </div>
-          </div>
-        </template>
-        <config-item label="数据汇总" v-if="config.type === 'summary'">
-          <ai-select size="mini" v-model="config.display" placeholder="请选择类型" :select-list="summaryOps"/>
-        </config-item>
       </div>
     </div>
     <div class="layout-right__content--wrapper">
@@ -220,44 +50,16 @@
 
 <script>
 import ConfigItem from "./configItem";
-import AiDialogBtn from "dui/packages/layout/AiDialogBtn";
+import ConfigExtra from "./configExtra.vue";
-import {layers, monitorTypes} from "../config";
-import JsonEditor from "./jsonEditor.vue";
-import ChartPicker from "./chartPicker.vue";
-import AiDvSummary from "@dui/dv/layout/AiDvSummary/AiDvSummary";
-import GroupItem from "./groupItem";
 
 export default {
   name: 'componentConfig',
-  components: {GroupItem, ChartPicker, JsonEditor, AiDialogBtn, ConfigItem},
+  components: {ConfigExtra, ConfigItem},
   props: {
     config: {default: () => ({})},
     instance: Function,
     dict: Object,
   },
-  data() {
-    return {
-      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
-        'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
-      //是否显示排名
-      tableStatus: [
-        {label: '是', value: '1'},
-        {label: '否', value: '0'}
-      ],
-      dialog: {},
-      monitorTypes,
-      positionList: [
-        {label: "左上", id: "lt"},
-        {label: "右上", id: "rt"},
-        {label: "左下", id: "lb"},
-        {label: "右下", id: "rb"}
-      ],
-      layers
-    }
-  },
-  computed: {
-    summaryOps: () => Object.keys(AiDvSummary.components).map(e => ({label: e, id: e})),
-  }
 }
 </script>
 

packages/bigscreen/designer/components/configExtra.vue

@@ -0,0 +1,221 @@
+<script>
+import GroupItem from "./groupItem";
+import ConfigItem from "./configItem";
+import ChartPicker from "./chartPicker";
+import JsonEditor from "./jsonEditor";
+import {layers, monitorTypes} from "../config";
+import AiDvSummary from "@dui/dv/layout/AiDvSummary/AiDvSummary";
+
+export default {
+  name: "configExtra",
+  components: {JsonEditor, ChartPicker, ConfigItem, GroupItem},
+  props: ['config'],
+  model: {
+    prop: 'config',
+    event: 'input'
+  },
+  data() {
+    return {
+      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
+        'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
+      layers, monitorTypes,
+      tableStatus: [
+        {label: '是', value: '1'},
+        {label: '否', value: '0'}
+      ],
+      positionList: [
+        {label: "左上", id: "lt"},
+        {label: "右上", id: "rt"},
+        {label: "左下", id: "lb"},
+        {label: "右下", id: "rb"}
+      ],
+    }
+  },
+  computed: {
+    summaryOps: () => Object.keys(AiDvSummary.components).map(e => ({label: e, id: e})),
+  }
+}
+</script>
+
+<template>
+  <section class="configExtra">
+    <config-item label="边框" v-if="config.type !== 'display'">
+      <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
+        <el-option
+            v-for="(item, index) in borderList"
+            :key="index"
+            :label="item"
+            :value="item">
+        </el-option>
+      </el-select>
+    </config-item>
+    <template v-if="/(AiDvMap|linkageMap)/.test(config.type)">
+      <config-item label="地图数据(geoJSON)">
+        <el-input v-model="config.geoJson" size="mini" clearable placeholder="请输入geoJson的URL地址"/>
+      </config-item>
+    </template>
+    <template v-if="/linkageMap/.test(config.type)">
+      <config-item v-for="(item,i) in config.summaryConfigs" :key="i" :label="`统计${i+1}`">
+        <ai-select placeholder="请选择位置" v-model="item.pos" :select-list="positionList" size="mini"/>
+        <ai-select placeholder="请选择类型" v-model="item.display" :select-list="summaryOps" size="mini"/>
+      </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">
+            <chart-picker v-model="comp.type" :tpls="layers"/>
+          </config-item>
+          <config-extra v-model="tab.comps[j]"/>
+        </template>
+      </group-item>
+    </template>
+    <template v-if="/Chart/.test(config.type)">
+      <config-item label="图表模板">
+        <chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
+      </config-item>
+      <config-item label="图表配置项" top-label>
+        <json-editor v-model="config.echartOps"/>
+      </config-item>
+    </template>
+    <config-item label="视频地址" v-if="config.type === 'video'">
+      <el-input v-model="config.src" size="mini"/>
+    </config-item>
+    <config-item label="图片URL" v-if="config.type=='img'">
+      <el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
+    </config-item>
+    <config-item label="视频类型" v-if="config.type === 'monitor'">
+      <ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
+    </config-item>
+    <config-item label="样式" v-if="config.type === 'AiRanking'">
+      <el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
+        <el-option label="样式1" value="Ranking1"></el-option>
+        <el-option label="样式2" value="Ranking2"></el-option>
+        <el-option label="样式3" value="Ranking3"></el-option>
+      </el-select>
+    </config-item>
+    <template v-if="config.type === 'table' || config.type === 'AiDvTable'">
+      <config-item label="显示排名">
+        <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
+          <el-option
+              v-for="(item, index) in tableStatus"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+      </config-item>
+      <config-item label="斑马纹" v-if="config.type === 'AiDvTable'">
+        <el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
+          <el-option
+              label="是"
+              value="1">
+          </el-option>
+          <el-option
+              label="否"
+              value="0">
+          </el-option>
+        </el-select>
+      </config-item>
+      <config-item label="简易样式" v-if="config.type === 'AiDvTable'">
+        <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
+          <el-option
+              label="是"
+              value="1">
+          </el-option>
+          <el-option
+              label="否"
+              value="0">
+          </el-option>
+        </el-select>
+      </config-item>
+      <config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
+        <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
+      </config-item>
+      <config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :key="i" :label="`第${i+1}列`">
+        <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
+          <el-option label="居中" value="center"></el-option>
+          <el-option label="居左" value="left"></el-option>
+          <el-option label="居右" value="right"></el-option>
+        </el-select>
+        <el-color-picker v-model="item.color" class="mar-h10" size="mini"/>
+        <el-input-number v-model="item.width" label="描述文字" controls-position="right" size="mini"/>
+      </config-item>
+    </template>
+    <template v-if="config.type === 'map'">
+      <div class="layout-config__item">
+        <label>遮罩层</label>
+        <div class="layout-config__item--right">
+          <el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
+            <el-option label="是" value="1"></el-option>
+            <el-option label="否" value="2"></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="layout-config__item">
+        <label>地图图层</label>
+        <div class="layout-config__item--right">
+          <el-select size="mini" v-model="config.layers" placeholder="请选择" clearable>
+            <el-option label="地图" value="vector"/>
+            <el-option label="卫星" value="satellite"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="layout-config__item">
+        <label>选择地区</label>
+        <div class="layout-config__item--right">
+          <AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
+        </div>
+      </div>
+      <div class="layout-config__item">
+        <label>限制地区</label>
+        <div class="layout-config__item--right">
+          <ai-select v-model="config.limitArea" :selectList="dict.getDict('yesOrNo')"/>
+        </div>
+      </div>
+      <div class="layout-config__item">
+        <label>显示标签</label>
+        <div class="layout-config__item--right">
+          <ai-select v-model="config.alwaysShow" :selectList="dict.getDict('yesOrNo')"/>
+        </div>
+      </div>
+      <div class="layout-config__item">
+        <label>展示光轨</label>
+        <div class="layout-config__item--right">
+          <ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
+        </div>
+      </div>
+      <div class="layout-config__item layout-config__item--input">
+        <label>地图样式</label>
+        <div class="layout-config__item--right">
+          <el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
+        </div>
+      </div>
+      <div class="layout-config__item layout-config__item--input">
+        <label>3D地图</label>
+        <div class="layout-config__item--right">
+          <ai-select v-model="config.is3d" :selectList="dict.getDict('yesOrNo')"/>
+        </div>
+      </div>
+      <div class="layout-config__item layout-config__item--input" v-if="config.is3d==1">
+        <label>3D环绕</label>
+        <div class="layout-config__item--right">
+          <ai-select v-model="config.is3dAround" :selectList="dict.getDict('yesOrNo')"/>
+        </div>
+      </div>
+      <div class="layout-config__item layout-config__item--input">
+        <label>显示图例</label>
+        <div class="layout-config__item--right">
+          <ai-select v-model="config.showPingchangMapLegend" :selectList="dict.getDict('yesOrNo')"/>
+        </div>
+      </div>
+    </template>
+    <config-item label="数据汇总" v-if="config.type === 'summary'">
+      <ai-select size="mini" v-model="config.display" placeholder="请选择类型" :select-list="summaryOps"/>
+    </config-item>
+  </section>
+</template>
+
+<style scoped lang="scss">
+
+</style>

ui/dv/AiDvRender.vue

@@ -67,7 +67,7 @@
       <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 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>
@@ -139,7 +139,9 @@ export default {
             const tab = meta.find(e => e.label === label)
             const comps = []
             if (Array.isArray(v.data)) {
-              comps.push({label: "内容", ...tab})
+              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)
@@ -151,9 +153,9 @@ export default {
         } else 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 || '') : '',
+              color: this.data.config?.[i]?.color || '',
-              width: this.data.config[i] ? (this.data.config[i].width || '') : '',
+              width: this.data.config?.[i]?.width || '',
-              align: this.data.config[i] ? (this.data.config[i].align || '') : ''
+              align: this.data.config?.[i]?.align || '',
             }
           })
           this.data.config = this.dvTableConfig

ui/dv/AiDvTabs.vue

@@ -1,6 +1,4 @@
 <script>
-import AiDvRender from "./AiDvRender";
-
 export default {
   name: "AiDvTabs",
   model: {
@@ -12,12 +10,17 @@ export default {
     config: Object,
     values: Object
   },
-  components: {AiDvRender},
   computed: {
-    layers: v => {
+    layers: {
-      const tab = v.config?.tabs[v.active]
+      set(settings) {
-      const values = v.values[tab.label]
+        console.log(settings)
-      return tab.comps?.map(e => ({dataType: "staticData", ...e, staticData: values[e.label]}))?.filter(e => e.type) || []
+      },
+      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) || []
+      }
     }
   }
 }
@@ -25,7 +28,7 @@ export default {
 
 <template>
   <section class="AiDvTabs">
-    <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="e"/>
+    <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="layers[i]" :index="i"/>
   </section>
 </template>
 
@@ -33,6 +36,7 @@ export default {
 .AiDvTabs {
   display: flex;
   flex-direction: column;
-  gap: 16px
+  gap: 16px;
+  height: 100%;
 }
 </style>

ui/dv/AiLinkageMap.vue

@@ -65,7 +65,6 @@ export default {
         if (type == "530300000000") {
           this.geoData = json.map
           this.$refs.map.chart?.setOption({series: {data: this.mapData}})
-          console.log(this.$refs.map.chart?.getOption()?.series)
         }
         this.config.summaryConfigs = json.sta?.map((e, i) => ({pos: ["rt", "lb", 'lt', 'rb'][i % 4], display: "summary20", ...e})) || []
       })