更改基础设施--左侧树选中状态以及取消选中（没区分西海岸和市局）

front/src/views/home/detailsPageInfrastructureTree.vue

@@ -2,14 +2,7 @@
   <div class="wrapper">
     <div class="wrapper-title-left-tree" :key="showKey">
       <div v-for="item in treeData" :key="item.id" class="primaryNode">
-        <!-- <div v-if="!item.children || item.children.length == 0">
+        <div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
-          {{ item.title }}
-        </div> -->
-        <div
-          class="top"
-          @click="showBottom(item)"
-          :class="item.show ? 'topSelect' : ''"
-        >
           {{ item.name }}
           ({{ item.channelCount }})
           <DownOutlined v-show="!item.show" />
@@ -17,28 +10,13 @@
         </div>
         <div class="bottom" v-show="item.show">
           <div v-for="val in item.children" :key="val.id" class="item">
-            <div
+            <div class="up" :class="selectId == val.id ? 'select' : ''"
-              class="up"
+              @click="showDown(item, val), onSelect(item, val)">
-              :class="selectId == val.id ? 'select' : ''"
-              @click="showDown(item, val), onSelect(item, val)"
-            >
               <div>
-                <svg
+                <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                  t="1654068878091"
+                  xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
-                  class="icon"
+                  v-show="selectId == val.id">
-                  viewBox="0 0 1024 1024"
+                  <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  p-id="2156"
-                  width="0.25rem"
-                  height="0.25rem"
-                  v-show="selectId == val.id"
-                >
-                  <path
-                    d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
-                    p-id="2157"
-                    fill="#0058e1"
-                  ></path>
                 </svg>
                 <span class="name">{{ val.name }}({{ val.channelCount }})</span>
               </div>
@@ -49,30 +27,13 @@
               </span>
             </div>
             <div class="down" v-show="val.show">
-              <div
+              <div v-for="child in val.children" :key="child.id" class="child"
-                v-for="child in val.children"
+                :class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
-                :key="child.id"
-                class="child"
-                :class="selectId == child.id ? 'select2' : ''"
-                @click="onSelect(item, child, child)"
-              >
                 <div>
-                  <svg
+                  <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                    t="1654068878091"
+                    xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
-                    class="icon"
+                    v-show="selectId == child.id">
-                    viewBox="0 0 1024 1024"
+                    <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    p-id="2156"
-                    width="0.25rem"
-                    height="0.25rem"
-                    v-show="selectId == child.id"
-                  >
-                    <path
-                      d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
-                      p-id="2157"
-                      fill="#0058e1"
-                    ></path>
                   </svg>
                   <span class="name">
                     {{ child.name }}
@@ -84,12 +45,6 @@
           </div>
         </div>
       </div>
-      <!-- <a-directory-tree
-        class="draggable-tree"
-        block-node
-        :tree-data="treeData"
-        @select="onSelect"
-      ></a-directory-tree> -->
     </div>
   </div>
 </template>
@@ -104,17 +59,14 @@
 
 export default defineComponent({
   setup() {
-      const selectedKeys = ref([])
-      const checkedKeys = ref([])
     const router = useRouter()
-      const fieldNames = {
-        children: 'children',
-        title: 'name',
-      }
     const whoShow1 = ref(whoShow)
     const showKey = ref(0)
     const treeData = ref([])
-      const init = () => {
+    const selectId = ref('')
+
+    // 初始化
+    const init = async () => {
       treeData.value = []
       console.log(
         'router.currentRoute.value.query.select',
@@ -129,149 +81,35 @@
         router.currentRoute.value.query.select
       )
       if (select == '基础设施') {
+        let res = {};
         if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
-            getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
+          res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
-              (res) => {
-                treeData.value = res.data.data
-              }
-            )
         } else {
-            getCameraInfoByAreaId({
+          // 西海岸
+          res = await getCameraInfoByAreaId({
             areaId: '70be8c5b664f4bcf869d82f2e8335051',
-            }).then((res) => {
-              treeData.value = res.data.data
           })
         }
-          // selectDeptList({ type: select }).then((res) => {
+        treeData.value = res.data && res.data.data || []
-          //   // console.log('区划数据=========================>', res.data.data)
-          //   res.data.data.forEach((val) => {
-          //     if (val.type !== '全部能力目录') {
-          //       let obj = {
-          //         title: val.type,
-          //         total: val.total,
-          //         show: val.type === '市级' ? true : false,
-          //         select: false,
-          //         key: val.type,
-          //         children: [],
-          //       }
-          //       switch (val.type) {
-          //         case '市级':
-          //         case '其他':
-          //           generateChildren(val, obj)
-          //           break
-          //         case '区级':
-          //           generateChildren2(val, obj)
-          //           break
-          //       }
-          //       treeData.value.push(obj)
-          //     }
-          //   })
-          //   // 排序
-          //   const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
-          //   treeData.value.sort((a, b) => {
-          //     return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
-          //   })
-          //   console.log('左侧树结构数据======================>', treeData.value)
-          //   showKey.value++
-          // })
       }
     }
     mybus.on('getDeptList', () => {
       init()
     })
-      // 生成children
+
-      const generateChildren = (val, obj) => {
+    const onSelect = async (item, val, child) => {
-        if (val.dataList.length > 0) {
+      console.log('item--------onSelect---->', item);
-          val.dataList.forEach((child) => {
+      console.log('val------onSelect------>', val);
-            let children = {
+      console.log('child-----onSelect------->', child);
-              title: child.deptName,
-              show: false,
-              select: false,
-              total: child.deptCount,
-              key: child.deptId,
-            }
-            obj.children.push(children)
-          })
-        }
-      }
-      // 区级特殊处理
-      const generateChildren2 = (val, obj) => {
-        if (val.dataList.length > 0) {
-          val.dataList.forEach((dis) => {
-            let children = {
-              title: dis.type,
-              total: dis.total,
-              show: false,
-              select: false,
-              key: dis.dataList[0].districtId,
-              children: [],
-            }
-            if (dis.dataList.length > 0) {
-              dis.dataList.forEach((child) => {
-                let children2 = {
-                  title: child.deptName,
-                  total: child.deptCount,
-                  show: false,
-                  select: false,
-                  key: child.deptId,
-                }
-                children.children.push(children2)
-              })
-            }
-            obj.children.push(children)
-          })
-        }
-      }
-      // const onSelect = (event, node, dragNode, dragNodesKeys) => {
-      //   console.log(event[0], node.node.children, dragNode, dragNodesKeys)
-      //   if (!node.node.children) {
-      //     mybus.emit('paramsGetResources', [event[0]])
-      //   } else {
-      //     let arr = []
-      //     switch (event[0]) {
-      //       case '全部能力目录':
-      //         mybus.emit('paramsGetResources', [])
-      //         break
-      //       case '区级':
-      //         node.node.children.forEach((dis) => {
-      //           dis.children.forEach((val) => {
-      //             arr.push(val.key)
-      //           })
-      //         })
-      //         mybus.emit('paramsGetResources', arr)
-      //         break
-      //       default:
-      //         node.node.children.forEach((val) => {
-      //           arr.push(val.key)
-      //         })
-      //         mybus.emit('paramsGetResources', arr)
-      //         break
-      //     }
-      //   }
-      // }
-      const selectId = ref('')
-      const onSelect = (item, val, child) => {
-        console.log('item, val, child', child)
       mybus.emit('getCameraByParentId', val.id)
       mybus.emit('getListByParentId', val.id)
+      let res = {}
       if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
-          getCameraAllOrgan({ parentId: val.id }).then((res) => {
+        res = await getCameraAllOrgan({ parentId: val.id })
-            treeData.value.map((treeDataItem, index) => {
-              if (item.id == treeDataItem.id) {
-                treeData.value[index].children.map((childItem, childIndex) => {
-                  if (childItem.id == val.id) {
-                    treeData.value[index].children[childIndex].children =
-                      res.data.data
-                  }
-                })
-                console.log('treeData.value.[index]', treeData.value[index])
-              }
-            })
-          })
       } else {
-          getCameraInfoByAreaId({
+        // 西海岸
-            areaId: val.id,
+        res = await getCameraInfoByAreaId({ areaId: val.id })
-          }).then((res) => {
+      }
       treeData.value.map((treeDataItem, index) => {
         if (item.id == treeDataItem.id) {
           treeData.value[index].children.map((childItem, childIndex) => {
@@ -280,97 +118,51 @@
                 res.data.data
             }
           })
-                console.log('treeData.value.[index]', treeData.value[index])
         }
       })
-          })
-        }
       if (child) {
         selectId.value = child.id
       }
     }
-      watch(selectedKeys, () => {
+
-        console.log('selectedKeys', selectedKeys)
+    watch(selectId, (newVal) => {
+      if (newVal == '') {
+        mybus.emit('getCameraByParentId', '')
+        mybus.emit('getListByParentId', '')
+      }
     })
-      watch(checkedKeys, (val) => {
+
-        if (val.checked.length > 1) {
+    const showBottom = async (item) => {
-          val.checked.halfChecked = val.checked.shift()
+      item.show = !item.show;
-        }
+      let res = {};
-        console.log('onCheck', val)
-      })
-      const value = ref('')
-      const onSearch = (searchValue) => {
-        console.log('use value', searchValue)
-        console.log('or use this.value', value.value.child)
-      }
-      // checkedKeys, checkedNodes, node, event
-      function xuanzeshijian(checkedKeys) {
-        checkedKeys.value.checked = []
-        checkedKeys.value.checked[0] =
-          checkedKeys.checked[checkedKeys.checked.length - 1]
-        // console.log('checkedKeys1', checkedNodes)
-        console.log('checkedKeys', checkedKeys)
-      }
-      let quxiaoshijian = ''
-      function dianjisousuo(selectedKeys, selectedNodes, node, event) {
-        if (quxiaoshijian == selectedNodes.node.id) {
-          quxiaoshijian = ''
-          mybus.emit('paramsGetResources', quxiaoshijian)
-        } else {
-          quxiaoshijian = selectedNodes.node.id
-          mybus.emit('paramsGetResources', selectedNodes.node.id.trim())
-        }
-        console.log(
-          'dianjisousuo',
-          selectedKeys,
-          'dianjisousuo',
-          selectedNodes,
-          'dianjisousuo',
-          node,
-          'dianjisousuo',
-          event
-        )
-      }
-      const showBottom = (item) => {
-        item.show = !item.show
       if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
-          getCameraAllOrgan({ parentId: item.id }).then((res) => {
+        res = await getCameraAllOrgan({ parentId: item.id })
-            treeData.value.map((treeDataItem, index) => {
-              if (item.id == treeDataItem.id) {
-                treeData.value[index].children = res.data.data
-                console.log('treeData.value.[index]', treeData.value[index])
-              }
-            })
-          })
       } else {
-          getCameraInfoByAreaId({
+        // 西海岸
-            areaId: item.id,
+        res = await getCameraInfoByAreaId({ areaId: item.id })
-          }).then((res) => {
+      }
+
       treeData.value.map((treeDataItem, index) => {
         if (item.id == treeDataItem.id) {
-                treeData.value[index].children = res.data.data
+          treeData.value[index].children = res.data && res.data.data || []
           console.log('treeData.value.[index]', treeData.value[index])
         }
       })
-          })
-        }
     }
     const showDown = (item, val) => {
-        console.log('showDown', val)
+      selectId.value = val.id
+      console.log('item---showDown--------->', item);
+      console.log('val----showDown-------->', val);
       if (item.children) {
-          val.show = !val.show
+        val.show = !val.show;
+        // 取消选中
+        if (!val.show) {
+          selectId.value = ''
+        }
       }
     }
     return {
-        value,
-        onSearch,
-        selectedKeys,
-        checkedKeys,
-        fieldNames,
       treeData,
-        dianjisousuo,
-        quxiaoshijian,
-        xuanzeshijian,
       showKey,
       onSelect,
       showBottom,
@@ -389,58 +181,6 @@
 })
 </script>
 <style lang="less" scoped>
-  // .wrapper {
-  //   height: 100%;
-  //   width: 100%;
-  //   padding: .2rem;
-  //   .wrapper-title {
-  //     height: .28rem;
-  //     width: 100%;
-  //     margin-bottom: .25rem;
-  //     .wrapper-title-name {
-  //       width: 100%;
-  //       height: .17rem;
-  //       font-size: .18rem;
-  //       font-family: 'AlibabaPuHuiTiR';
-  //       font-weight: 400;
-  //       color: #0058e1;
-  //       line-height: .34rem;
-  //     }
-  //     .wrapper-title-yangshi {
-  //       width: .4rem;
-  //       height: .03rem;
-  //       background: #0058e1;
-  //       border-radius: .02rem;
-  //       margin-top: .2rem;
-  //       margin-left: .15rem;
-  //     }
-  //   }
-  //   .wrapper-title-left-tree {
-  //     overflow-y: auto;
-  //     height: 80%;
-  //     width: 2.1rem;
-  //   }
-  //   .wrapper-title-left-tree::-webkit-scrollbar {
-  //     width: .05rem;
-  //     height: .05rem;
-  //   }
-  //   .wrapper-title-left-tree::-webkit-scrollbar-thumb {
-  //     border-radius: .05rem;
-  //     background-color: #0058e1;
-  //   }
-  //   .wrapper-title-left-tree::-webkit-scrollbar-track {
-  //     background-color: transparent;
-  //   }
-  //   :deep(.ant-tree-treenode) {
-  //     margin-top: .1rem;
-  //     height: .23rem;
-  //     overflow: hidden;
-  //     text-overflow: ellipsis;
-  //     display: -webkit-box;
-  //     -webkit-line-clamp: 1;
-  //     -webkit-box-orient: vertical;
-  //   }
-  // }
 .primaryNode {
   .top {
     width: 100%;
@@ -452,26 +192,32 @@
     padding: 0 0.1rem;
     margin-top: 0.08rem;
   }
+
   .top:hover {
     cursor: pointer;
     // 0058e1 透明度 0.5
     background: rgba(0, 88, 225, 0.8);
     color: white;
+
     :deep(.anticon) {
       color: white;
     }
   }
+
   .topSelect {
     background: #0058e1;
     color: white;
+
     :deep(.anticon) {
       color: white;
     }
   }
+
   .bottom {
     width: 100%;
     background: rgba(244, 245, 248, 0.8);
     padding: 0 0.1rem;
+
     // margin-bottom: .08rem;
     .up {
       cursor: pointer;
@@ -481,10 +227,12 @@
       align-items: center;
       border-top: 0.01rem solid #ccc;
       padding: 0 0.1rem;
+
       &>div {
         display: flex;
         justify-content: flex-start;
       }
+
       .name {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -494,33 +242,41 @@
         word-break: break-all;
       }
     }
+
     .up:hover {
       .name {
         color: #0058e1;
         font-weight: 600;
       }
+
       span {
         color: #0058e1;
         font-weight: 600;
       }
     }
+
     .select {
       padding: 0 0.1rem 0 0;
+
       .name {
         width: 1.7rem;
-          color: #0058e1;
+        color: #0058e1 !important;
         font-weight: 600;
       }
+
       span {
         color: #0058e1;
         font-weight: 600;
       }
     }
+
     .item:nth-of-type(1) .up {
       border-top: none;
     }
+
     .down {
       width: 100%;
+
       .child {
         cursor: pointer;
         height: 0.4rem;
@@ -528,10 +284,12 @@
         justify-content: space-between;
         align-items: center;
         padding: 0 0.1rem;
+
         &>div {
           display: flex;
           justify-content: flex-start;
         }
+
         .name {
           overflow: hidden;
           text-overflow: ellipsis;
@@ -541,26 +299,31 @@
           word-break: break-all;
         }
       }
+
       .child:hover {
         .name {
           color: #0058e1;
           font-weight: 600;
         }
+
         span {
           color: #0058e1;
           font-weight: 600;
         }
       }
+
       .select2 {
         .name {
           width: 1.7rem;
           color: #0058e1;
           font-weight: 600;
         }
+
         span {
           color: #0058e1;
           font-weight: 600;
         }
+
         padding: 0 0.1rem 0 0;
       }
     }