大屏自残术结构重构

2024-04-12 15:03:17 +08:00
parent b5523f5f40
commit 5d2a66b861
2 changed files with 229 additions and 234 deletions
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -458,7 +458,7 @@ const maps = [{
  thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
  is3dAround: '0',
  limitArea: '0',
-}, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560}]
+}, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560, thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/linkageMap.png"}]
 const customHtml = {
  label: "HTML块", type: "html", list: [{
    type: 'html',
@@ -474,7 +474,7 @@ const customHtml = {
  }]
 }
 const components = [{
-  type: 'chart', label: '图表', list: [...chartTpl, {
+  label: '图表', list: [...chartTpl, {
    label: "多维图", type: "plot", list: [{
      type: 'plot',
      label: '多维图表',
@@ -499,155 +499,78 @@ const components = [{
    }]
  }]
 }, {
-  label: '表格', list: [
-    {
-      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}]
-      }]
-    },
-  ]
-}, {
-  type: 'ai3d', label: "3D", list: [{
-    label: "3D楼栋", type: 'building', list: [{
-      type: 'building1',
-      label: "楼栋模型1",
-      width: 840,
-      height: 800,
-      zIndex: 1,
-      title: "楼栋模型1",
-      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
-    }]
+  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: "AI", list: [
-    {
-      label: "AI助手",
-      list: [{
-        type: "aiAssist",
-        label: "AI助手",
-        width: 134,
-        height: 140,
-        zIndex: 1,
-        title: "AI助手",
-        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: '地图', list: maps}, {
-      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: '边框', type: 'panel', list: [{
-        type: 'panel',
-        label: '边框',
-        title: '边框',
-        border: 'border0',
-        width: 400,
-        height: 400,
-        isZoom: false,
-        zIndex: 1,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
-      }]
-    }, {
-      label: '装饰', type: 'display', list: [{
+},
+  {
+    label: "样式", list: [
+      {
        type: 'display',
        label: '装饰',
        display: 'display0',
@@ -664,55 +587,17 @@ const components = [{
        }, {
          label: '同比上月', value: 247
        }]
-      }]
-    }, {
-      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: '视频播放器',
+        type: 'panel',
+        label: '边框',
+        title: '边框',
+        border: 'border0',
        width: 400,
-        height: 300,
+        height: 400,
+        isZoom: false,
        zIndex: 1,
-        src: '',
-        border: 'border2',
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
-      }]
-    }, {
-      label: '数据统计', type: 'summary', list: [{
+        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
+      }, {
        type: 'summary',
        label: '数据统计',
        display: 'summary0',
@@ -735,41 +620,147 @@ const components = [{
        }],
        dynamicData: [],
        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+      }
+    ]
+  },
+  {label: '地图', list: maps}, {
+    type: 'ai3d', label: "3D", list: [{
+      label: "3D楼栋", type: 'building', list: [{
+        type: 'building1',
+        label: "楼栋模型1",
+        width: 840,
+        height: 800,
+        zIndex: 1,
+        title: "楼栋模型1",
+        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
      }]
-    }, {
-      label: '视频监控', list: [
-        {
-          type: 'monitor',
-          label: '视频监控',
-          src: '',
-          width: 480,
-          height: 240,
+    }]
+  }, {
+    label: "AI", list: [{
+      type: "aiAssist",
+      label: "AI助手",
+      width: 134,
+      height: 140,
+      zIndex: 1,
+      title: "AI助手",
+      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,
-          title: '',
-          moniterId: '',
-          monitorType: 'cmcc',
-          api: '/app/appzyvideoequipment/list2',
-          border: 'border2',
+          dataX: '',
+          dataY: [],
+          title: '党组织',
+          border: 'border3',
          sourceDataId: '',
          dataType: 'staticData',
-          staticData: '',
-          dynamicData: '',
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
-        },
-        {
-          type: "monitorCarousel",
-          label: "视频轮播",
-          width: 480,
-          height: 480,
+          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,
-          title: "视频轮播",
-          thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
-        }
-      ]
-    }, customHtml]
-}]
+          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]
+  }]

 export {components}

--- a/packages/bigscreen/designer/viewport.vue
+++ b/packages/bigscreen/designer/viewport.vue
@@ -30,7 +30,7 @@
              <span>{{ item.label }}</span>
            </div>
          </div>
-          <div class="layout-left__middle">
+          <div class="layout-left__middle" v-if="hasCategories">
            <div>全部</div>
            <div
                class="layout-left__middle--item"
@@ -304,18 +304,20 @@ export default {
      }
    },
    widget() {
-      if (this.components.length && this.components[this.parentIndex].list.length) {
-        return this.components[this.parentIndex].list[this.subIndex].list
+      const categories = this.components[this.parentIndex].list
+      if (categories.length) {
+        return categories[this.subIndex]?.list || categories
      }
-
      return []
    },
+    hasCategories: v => v.components[v.parentIndex].list[v.subIndex].list?.length > 0,
    comps: v => {
      const obj = {}
-      v.components.map(e => e.list.map(c => c.list.map(com => {
-        com.echartOps = com.echartOps || v.$echartTpls[com.type]
-        obj[com.type] = com
-      })))
+      const handleOps = e => {
+        e.echartOps = e.echartOps || v.$echartTpls[e.type]
+        obj[e.type] = e
+      }
+      v.components.map(e => e.list.map(c => c.list?.map(handleOps) || handleOps(c)))
      return obj
    }
  },
@@ -386,7 +388,8 @@ export default {
      id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
        if (res?.data) {
          const data = JSON.parse(res.data.config)
-          this.componentList = data.config.filter(Boolean).map(e => ({...this.comps[e.type], ...e}))
+          const getComp = type => this.comps[type] || {}
+          this.componentList = data.config.filter(Boolean).map(e => ({...getComp(e.type), ...e}))
          this.dashboard = data.dashboard
          this.images = data.images || []
        }
@@ -826,6 +829,7 @@ export default {
      padding: 0 10px;
      background: #0A0B0D;
      overflow-y: auto;
+      overflow-x: hidden;

      .layout-left__right--item {
        margin-top: 10px;
@@ -839,7 +843,7 @@ export default {
        img {
          width: auto;
          height: auto;
-          max-height: 80px;
+          max-height: 130px;
          max-width: 100%;
          margin-left: 50%;
          transform: translateX(-50%);