大屏自残术结构重构

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%);