优化驾驶舱

src/views/pqs/cockpit/setUp/components/popup.vue

@@ -87,7 +87,7 @@
                             <div class="imgBox">
                                 <div class="textName">{{ item.name }}</div>
                                 <img
-                                    :src="item.image"
+                                    :src="getImg(item.path)"
                                     :style="{
                                         height:
                                             item.h * rowHeight -
@@ -163,6 +163,8 @@ const layout: any = ref([
     // { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
     // { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
 ])
+const treeComponents: any = ref([]) //组件树
+const treeComponentsCopy: any = ref([]) //组件树
 const info = () => {
     activeNames.value = []
     activeNames1.value = []
@@ -174,7 +176,9 @@ const info = () => {
                 activeNames1.value.push(k.id)
             })
         })
+        treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
     })
+
     if (query.id) {
         queryById({ id: query.id }).then(res => {
             layout.value = JSON.parse(res.data.containerConfig)
@@ -185,7 +189,28 @@ const info = () => {
         })
     }
 }
-const treeComponents: any = ref([]) //组件树
+
+// 扁平化树
+const tree2List = (list: any, id: any) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        item.uPid = id
+        item.uId = Math.random() * 1000
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children, item.uId)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
 // 删除拖拽
 const removeItem = (id: string) => {
     const index = layout.value.findIndex(item => item.i === id)
@@ -286,7 +311,7 @@ function dragEnd(row: any) {
         i: dragItem.i,
         name: row.name,
         path: row.path,
-        image: row.image
+        icon: row.icon
     })
     gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
     const item = gridLayout.value.getItem(dropId)
@@ -332,6 +357,9 @@ const onSubmit = () => {
         }
     })
 }
+const getImg = throttle((path: string) => {
+    if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
+})
 onMounted(() => {
     info()