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

packages/bigscreen/designer/components/chartPicker.vue

@@ -17,7 +17,7 @@
   </section>
 </template>
 <script>
-import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
+import AiDialogBtn from "dui/packages/layout/AiDialogBtn";
 import {chartTpl} from "../config";
 
 export default {
@@ -28,7 +28,8 @@ export default {
     event: "input"
   },
   props: {
-    value: String
+    value: String,
+    tpls: {default: () => chartTpl.map(e => e.list).flat()}
   },
   data() {
     return {
@@ -36,7 +37,6 @@ export default {
     }
   },
   computed: {
-    tpls: () => chartTpl.map(e => e.list).flat(),
     current: v => v.tpls.find(e => e.type == v.value) || {}
   },
   watch: {

packages/bigscreen/designer/components/componentConfig.vue

@@ -50,6 +50,13 @@
             <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]"/>
@@ -212,16 +219,17 @@
 </template>
 
 <script>
-import ConfigItem from "./configItem.vue";
+import ConfigItem from "./configItem";
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn";
-import {monitorTypes} from "../config";
+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: {ChartPicker, JsonEditor, AiDialogBtn, ConfigItem},
+  components: {GroupItem, ChartPicker, JsonEditor, AiDialogBtn, ConfigItem},
   props: {
     config: {default: () => ({})},
     instance: Function,
@@ -243,7 +251,8 @@ export default {
         {label: "右上", id: "rt"},
         {label: "左下", id: "lb"},
         {label: "右下", id: "rb"}
-      ]
+      ],
+      layers
     }
   },
   computed: {

packages/bigscreen/designer/components/configItem.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="configItem" :class="{topLabel}">
-    <label v-text="label"/>
+    <label :class="{bold}" v-text="label"/>
     <div class="content fill">
       <slot v-if="$slots.default"/>
       <div v-else-if="value" v-html="value"/>
@@ -13,7 +13,8 @@ export default {
   props: {
     label: String,
     value: {default: null},
-    topLabel: Boolean
+    topLabel: Boolean,
+    bold: Boolean
   },
 }
 </script>
@@ -35,6 +36,10 @@ export default {
     color: #FFFFFF;
     font-size: 12px;
     text-align: right;
+
+    &.bold {
+      font-weight: bold;
+    }
   }
 
   .el-select .el-tag {

packages/bigscreen/designer/components/groupItem.vue

@@ -0,0 +1,32 @@
+<script>
+export default {
+  name: "groupItem",
+  props: ['label']
+}
+</script>
+
+<template>
+  <section class="groupItem">
+    <h2 v-text="label"/>
+    <slot/>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.groupItem {
+  padding: 10px 10px 20px;
+  border-bottom: 1px solid #000000;
+
+  &:last-child {
+    border: none;
+  }
+
+
+  & > h2 {
+    margin-bottom: 20px;
+    color: #FFFFFF;
+    font-size: 15px;
+    font-weight: 700;
+  }
+}
+</style>