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

2024-04-15 14:31:13 +08:00
parent e72f7c5e9f
commit fdfbaad6d8
9 changed files with 392 additions and 255 deletions
--- a/packages/bigscreen/designer/components/chartPicker.vue
+++ b/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: {
--- a/packages/bigscreen/designer/components/componentConfig.vue
+++ b/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: {
--- a/packages/bigscreen/designer/components/configItem.vue
+++ b/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 {
--- a/packages/bigscreen/designer/components/groupItem.vue
+++ b/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>
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -473,6 +473,241 @@ const customHtml = {
    html: `<div style="width: 100%;height: 100%;background: #fff;text-align: center;line-height: 300px;font-size: 20px;color: #000;">自定义HTML</div>`
  }]
 }
+const tables = [{
+  type: 'table',
+  label: '表格',
+  title: '表格',
+  border: 'border6',
+  width: 650,
+  height: 400,
+  zIndex: 1,
+  thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+  dataX: '',
+  dataY: [],
+  rowNum: 7,
+  isShowIndex: '1',
+  sourceDataId: '',
+  api: '',
+  apiData: [],
+  dataType: 'staticData',
+  dynamicData: [],
+  staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
+}, {
+  type: 'AiDvTable',
+  label: '新版表格',
+  title: '新版表格',
+  border: 'border6',
+  width: 650,
+  height: 400,
+  zIndex: 1,
+  thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+  dataX: '',
+  dataY: [],
+  rowNum: 7,
+  stripe: '1',
+  isShowIndex: '1',
+  sourceDataId: '',
+  api: '',
+  config: [{
+    width: '', color: '', align: ''
+  }, {
+    width: '', color: '', align: ''
+  }, {
+    width: '', color: '', align: ''
+  }],
+  apiData: [],
+  dataType: 'staticData',
+  dynamicData: [],
+  staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
+}, {
+  type: 'AiRanking',
+  label: '排行榜',
+  title: '排行榜',
+  border: 'border6',
+  width: 523,
+  height: 400,
+  zIndex: 1,
+  thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
+  dataX: '',
+  dataY: [],
+  rowNum: 7,
+  subType: 'Ranking1',
+  stripe: '1',
+  isShowIndex: '1',
+  sourceDataId: '',
+  api: '',
+  apiData: [],
+  dataType: 'staticData',
+  dynamicData: [],
+  staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
+}]
+const layouts = [
+  {
+    type: 'display',
+    label: '装饰',
+    display: 'display0',
+    width: 840,
+    height: 540,
+    isZoom: false,
+    zIndex: 1,
+    title: '标题',
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
+    sourceDataId: '',
+    dataType: 'staticData',
+    staticData: [{
+      label: '个人服务办理', value: 247
+    }, {
+      label: '同比上月', value: 247
+    }]
+  }, {
+    type: 'panel',
+    label: '边框',
+    title: '边框',
+    border: 'border0',
+    width: 400,
+    height: 400,
+    isZoom: false,
+    zIndex: 1,
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
+  }, {
+    type: 'summary',
+    label: '数据统计',
+    display: 'summary0',
+    width: 480,
+    height: 240,
+    zIndex: 1,
+    top: 0,
+    left: 0,
+    dataX: '',
+    dataY: [],
+    summaryTitle: '',
+    border: 'border3',
+    sourceDataId: '',
+    title: '数据统计',
+    dataType: 'staticData',
+    staticData: [{
+      key: '个人服务办理', value: 247
+    }, {
+      key: '同比上月', value: 247
+    }],
+    dynamicData: [],
+    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+  },
+]
+const others = [
+  {
+    label: "图片", list: [
+      {
+        label: "普通图片",
+        type: "img",
+        width: 500,
+        height: 400,
+        thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
+      }
+    ]
+  },
+  {
+    label: '党组织', type: 'partyOrg', list: [{
+      type: 'partyOrg',
+      label: '党组织',
+      width: 840,
+      height: 800,
+      zIndex: 1,
+      top: 0,
+      left: 0,
+      dataX: '',
+      dataY: [],
+      title: '党组织',
+      border: 'border3',
+      sourceDataId: '',
+      dataType: 'staticData',
+      staticData: [{
+        key: '个人服务办理', value: 247
+      }, {
+        key: '同比上月', value: 247
+      }],
+      dynamicData: [],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+    }]
+  }, {
+    label: '轮播图', list: [{
+      type: 'swiper',
+      label: '轮播图',
+      width: 400,
+      height: 300,
+      zIndex: 1,
+      border: 'border2',
+      dataType: 'staticData',
+      staticData: [{
+        img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
+							徐晓红 - 18273645627
+							歙县郑村镇唐跃村碉墅`
+      }],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
+    }, {
+      type: 'swiper',
+      label: '轮播图(点指示器)',
+      width: 800,
+      height: 358,
+      zIndex: 1,
+      border: 'border14',
+      dataType: 'staticData',
+      staticData: [{
+        content: `歙县众城湖羊养殖专业合作社
+							徐晓红 - 18273645627
+							歙县郑村镇唐跃村碉墅`
+      }, {
+        content: `歙县众城湖羊养殖专业合作社
+							徐晓红 - 18273645627
+							歙县郑村镇唐跃村碉墅`
+      },],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
+      dotIndicator: true
+    }]
+  }, {
+    label: '视频播放器', type: 'video', list: [{
+      type: 'video',
+      label: '视频播放器',
+      width: 400,
+      height: 300,
+      zIndex: 1,
+      src: '',
+      border: 'border2',
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
+    }]
+  }, {
+    label: '视频监控', list: [
+      {
+        type: 'monitor',
+        label: '视频监控',
+        src: '',
+        width: 480,
+        height: 240,
+        zIndex: 1,
+        top: 0,
+        left: 0,
+        title: '',
+        moniterId: '',
+        monitorType: 'cmcc',
+        api: '/app/appzyvideoequipment/list2',
+        border: 'border2',
+        sourceDataId: '',
+        dataType: 'staticData',
+        staticData: '',
+        dynamicData: '',
+        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
+      },
+      {
+        type: "monitorCarousel",
+        label: "视频轮播",
+        width: 480,
+        height: 480,
+        zIndex: 1,
+        title: "视频轮播",
+        thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
+      }
+    ]
+  }, customHtml]
 const components = [{
  label: '图表', list: [...chartTpl, {
    label: "多维图", type: "plot", list: [{
@@ -498,130 +733,14 @@ const components = [{

    }]
  }]
-}, {
-  label: '表格', list: [{
-    type: 'table',
-    label: '表格',
-    title: '表格',
-    border: 'border6',
-    width: 650,
-    height: 400,
-    zIndex: 1,
-    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-    dataX: '',
-    dataY: [],
-    rowNum: 7,
-    isShowIndex: '1',
-    sourceDataId: '',
-    api: '',
-    apiData: [],
-    dataType: 'staticData',
-    dynamicData: [],
-    staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
-  }, {
-    type: 'AiDvTable',
-    label: '新版表格',
-    title: '新版表格',
-    border: 'border6',
-    width: 650,
-    height: 400,
-    zIndex: 1,
-    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-    dataX: '',
-    dataY: [],
-    rowNum: 7,
-    stripe: '1',
-    isShowIndex: '1',
-    sourceDataId: '',
-    api: '',
-    config: [{
-      width: '', color: '', align: ''
-    }, {
-      width: '', color: '', align: ''
-    }, {
-      width: '', color: '', align: ''
-    }],
-    apiData: [],
-    dataType: 'staticData',
-    dynamicData: [],
-    staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
-  }, {
-    type: 'AiRanking',
-    label: '排行榜',
-    title: '排行榜',
-    border: 'border6',
-    width: 523,
-    height: 400,
-    zIndex: 1,
-    thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
-    dataX: '',
-    dataY: [],
-    rowNum: 7,
-    subType: 'Ranking1',
-    stripe: '1',
-    isShowIndex: '1',
-    sourceDataId: '',
-    api: '',
-    apiData: [],
-    dataType: 'staticData',
-    dynamicData: [],
-    staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
-  }]
 },
+  {label: '表格', list: tables},
  {
-    label: "样式", list: [
-      {
-        type: 'display',
-        label: '装饰',
-        display: 'display0',
-        width: 840,
-        height: 540,
-        isZoom: false,
-        zIndex: 1,
-        title: '标题',
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
-        sourceDataId: '',
-        dataType: 'staticData',
-        staticData: [{
-          label: '个人服务办理', value: 247
-        }, {
-          label: '同比上月', value: 247
-        }]
-      }, {
-        type: 'panel',
-        label: '边框',
-        title: '边框',
-        border: 'border0',
-        width: 400,
-        height: 400,
-        isZoom: false,
-        zIndex: 1,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
-      }, {
-        type: 'summary',
-        label: '数据统计',
-        display: 'summary0',
-        width: 480,
-        height: 240,
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        dataX: '',
-        dataY: [],
-        summaryTitle: '',
-        border: 'border3',
-        sourceDataId: '',
-        title: '数据统计',
-        dataType: 'staticData',
-        staticData: [{
-          key: '个人服务办理', value: 247
-        }, {
-          key: '同比上月', value: 247
-        }],
-        dynamicData: [],
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
-      }
-    ]
+    label: "样式", list: [...layouts, {
+      type: "tabs", label: "TAB页签", border: "border13", width: 480,
+      height: 240, thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/tabs.png', top: 0, left: 0,
+      dataType: 'staticData', staticData: {}, title: "TAB页签"
+    }]
  },
  {label: '地图', list: maps}, {
    type: 'ai3d', label: "3D", list: [{
@@ -646,122 +765,9 @@ const components = [{
      thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
    }]
  }, {
-    label: '其他', list: [
-      {
-        label: "图片", list: [
-          {
-            label: "普通图片",
-            type: "img",
-            width: 500,
-            height: 400,
-            thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
-          }
-        ]
-      },
-      {
-        label: '党组织', type: 'partyOrg', list: [{
-          type: 'partyOrg',
-          label: '党组织',
-          width: 840,
-          height: 800,
-          zIndex: 1,
-          top: 0,
-          left: 0,
-          dataX: '',
-          dataY: [],
-          title: '党组织',
-          border: 'border3',
-          sourceDataId: '',
-          dataType: 'staticData',
-          staticData: [{
-            key: '个人服务办理', value: 247
-          }, {
-            key: '同比上月', value: 247
-          }],
-          dynamicData: [],
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
-        }]
-      }, {
-        label: '轮播图', list: [{
-          type: 'swiper',
-          label: '轮播图',
-          width: 400,
-          height: 300,
-          zIndex: 1,
-          border: 'border2',
-          dataType: 'staticData',
-          staticData: [{
-            img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
-							徐晓红 - 18273645627
-							歙县郑村镇唐跃村碉墅`
-          }],
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
-        }, {
-          type: 'swiper',
-          label: '轮播图(点指示器)',
-          width: 800,
-          height: 358,
-          zIndex: 1,
-          border: 'border14',
-          dataType: 'staticData',
-          staticData: [{
-            content: `歙县众城湖羊养殖专业合作社
-							徐晓红 - 18273645627
-							歙县郑村镇唐跃村碉墅`
-          }, {
-            content: `歙县众城湖羊养殖专业合作社
-							徐晓红 - 18273645627
-							歙县郑村镇唐跃村碉墅`
-          },],
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
-          dotIndicator: true
-        }]
-      }, {
-        label: '视频播放器', type: 'video', list: [{
-          type: 'video',
-          label: '视频播放器',
-          width: 400,
-          height: 300,
-          zIndex: 1,
-          src: '',
-          border: 'border2',
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
-        }]
-      }, {
-        label: '视频监控', list: [
-          {
-            type: 'monitor',
-            label: '视频监控',
-            src: '',
-            width: 480,
-            height: 240,
-            zIndex: 1,
-            top: 0,
-            left: 0,
-            title: '',
-            moniterId: '',
-            monitorType: 'cmcc',
-            api: '/app/appzyvideoequipment/list2',
-            border: 'border2',
-            sourceDataId: '',
-            dataType: 'staticData',
-            staticData: '',
-            dynamicData: '',
-            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
-          },
-          {
-            type: "monitorCarousel",
-            label: "视频轮播",
-            width: 480,
-            height: 480,
-            zIndex: 1,
-            title: "视频轮播",
-            thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
-          }
-        ]
-      }, customHtml]
+    label: '其他', list: others
  }]
-
+export const layers = [...chartTpl.map(e => e.list), maps, tables, layouts, ...others.map(e => e.list)].flat()
 export {components}

 /**