大屏自残术结构重构

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,9 +499,7 @@ const components = [{
     }]
   }]
 }, {
-  label: '表格', list: [
+  label: '表格', list: [{
-    {
-      label: '单表格', list: [{
     type: 'table',
     label: '表格',
     title: '表格',
@@ -569,9 +567,63 @@ const components = [{
     dynamicData: [],
     staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
   }]
-    },
+},
+  {
+    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: maps}, {
     type: 'ai3d', label: "3D", list: [{
       label: "3D楼栋", type: 'building', list: [{
         type: 'building1',
@@ -583,11 +635,8 @@ const components = [{
         thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
       }]
     }]
-}, {
+  }, {
-  label: "AI", list: [
+    label: "AI", list: [{
-    {
-      label: "AI助手",
-      list: [{
       type: "aiAssist",
       label: "AI助手",
       width: 134,
@@ -596,9 +645,7 @@ const components = [{
       title: "AI助手",
       thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
     }]
-    }
+  }, {
-  ]
-}, {
     label: '其他', list: [
       {
         label: "图片", list: [
@@ -611,7 +658,7 @@ const components = [{
           }
         ]
       },
-    {label: '地图', list: maps}, {
+      {
         label: '党组织', type: 'partyOrg', list: [{
           type: 'partyOrg',
           label: '党组织',
@@ -634,37 +681,6 @@ const components = [{
           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: [{
-        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
-        }]
-      }]
       }, {
         label: '轮播图', list: [{
           type: 'swiper',
@@ -711,31 +727,6 @@ const components = [{
           border: 'border2',
           thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
         }]
-    }, {
-      label: '数据统计', type: 'summary', list: [{
-        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: [
           {
@@ -769,7 +760,7 @@ const components = [{
           }
         ]
       }, customHtml]
-}]
+  }]
 
 export {components}
 

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) {
+      const categories = this.components[this.parentIndex].list
-        return this.components[this.parentIndex].list[this.subIndex].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 => {
+      const handleOps = e => {
-        com.echartOps = com.echartOps || v.$echartTpls[com.type]
+        e.echartOps = e.echartOps || v.$echartTpls[e.type]
-        obj[com.type] = com
+        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%);