front/src/views/home/detailsPageInfrastructureTree.vue

@@ -2,7 +2,14 @@
   <div class="wrapper">
     <div class="wrapper-title-left-tree" :key="showKey">
       <div v-for="item in treeData" :key="item.id" class="primaryNode">
-        <div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
+        <!-- <div v-if="!item.children || item.children.length == 0">
+          {{ item.title }}
+        </div> -->
+        <div
+          class="top"
+          @click="showBottom(item)"
+          :class="item.show ? 'topSelect' : ''"
+        >
           {{ item.name }}
           ({{ item.channelCount }})
           <DownOutlined v-show="!item.show" />
@@ -10,13 +17,28 @@
         </div>
         <div class="bottom" v-show="item.show">
           <div v-for="val in item.children" :key="val.id" class="item">
-            <div class="up" :class="selectId == val.id ? 'select' : ''"
+            <div
-              @click="showDown(item, val), onSelect(item, val)">
+              class="up"
+              :class="selectId == val.id ? 'select' : ''"
+              @click="showDown(item, val), onSelect(item, val)"
+            >
               <div>
-                <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                <svg
-                  xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
+                  t="1654068878091"
-                  v-show="selectId == val.id">
+                  class="icon"
-                  <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
+                  viewBox="0 0 1024 1024"
+                  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>
@@ -27,13 +49,30 @@
               </span>
             </div>
             <div class="down" v-show="val.show">
-              <div v-for="child in val.children" :key="child.id" class="child"
+              <div
-                :class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
+                v-for="child in val.children"
+                :key="child.id"
+                class="child"
+                :class="selectId == child.id ? 'select2' : ''"
+                @click="onSelect(item, child, child)"
+              >
                 <div>
-                  <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  <svg
-                    xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
+                    t="1654068878091"
-                    v-show="selectId == child.id">
+                    class="icon"
-                    <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
+                    viewBox="0 0 1024 1024"
+                    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 }}
@@ -45,251 +84,407 @@
           </div>
         </div>
       </div>
+      <!-- <a-directory-tree
+        class="draggable-tree"
+        block-node
+        :tree-data="treeData"
+        @select="onSelect"
+      ></a-directory-tree> -->
     </div>
   </div>
 </template>
 <script>
-import { defineComponent, ref, watch } from 'vue'
+  import { defineComponent, ref, watch } from 'vue'
-import { getCameraAllOrgan } from '@/api/videoSurveillance'
+  import { getCameraAllOrgan } from '@/api/videoSurveillance'
-import { getCameraInfoByAreaId } from '@/api/file'
+  import { getCameraInfoByAreaId } from '@/api/file'
-import mybus from '@/myplugins/mybus'
+  import mybus from '@/myplugins/mybus'
-import { useRouter } from 'vue-router'
+  import { useRouter } from 'vue-router'
-import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
-import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
+  import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
   
-export default defineComponent({
+  export default defineComponent({
-  setup() {
+    setup() {
-    const router = useRouter()
+      const selectedKeys = ref([])
-    const whoShow1 = ref(whoShow)
+      const checkedKeys = ref([])
-    const showKey = ref(0)
+      const router = useRouter()
-    const treeData = ref([])
+      const fieldNames = {
-    const selectId = ref('')
+        children: 'children',
-
+        title: 'name',
-    // 初始化
-    const init = async () => {
-      treeData.value = []
-      console.log(
-        'router.currentRoute.value.query.select',
-        router.currentRoute.value.query.select
-      )
-      let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
-      if (select === '123') {
-        select = ''
       }
-      console.log(
+      const whoShow1 = ref(whoShow)
-        '获取url中的select=====================>',
+      const showKey = ref(0)
-        router.currentRoute.value.query.select
+      const treeData = ref([])
-      )
+      const init = () => {
-      if (select == '基础设施') {
+        treeData.value = []
-        let res = {};
+        console.log(
-        if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
+          'router.currentRoute.value.query.select',
-          res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
+          router.currentRoute.value.query.select
-        } else {
+        )
-          // 西海岸
+        let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
-          res = await getCameraInfoByAreaId({
+        if (select === '123') {
-            areaId: '70be8c5b664f4bcf869d82f2e8335051',
+          select = ''
-          })
+        }
+        console.log(
+          '获取url中的select=====================>',
+          router.currentRoute.value.query.select
+        )
+        if (select == '基础设施') {
+          if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
+            getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
+              (res) => {
+                treeData.value = res.data.data
+              }
+            )
+          } else {
+            getCameraInfoByAreaId({
+              areaId: '70be8c5b664f4bcf869d82f2e8335051',
+            }).then((res) => {
+              treeData.value = res.data.data
+            })
+          }
+          // selectDeptList({ type: select }).then((res) => {
+          //   // 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++
+          // })
         }
-        treeData.value = res.data && res.data.data || []
       }
-    }
+      mybus.on('getDeptList', () => {
-    mybus.on('getDeptList', () => {
+        init()
-      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,
-      mybus.emit('getCameraByParentId', val.id)
+              show: false,
-      mybus.emit('getListByParentId', val.id)
+              select: false,
-      let res = {}
+              total: child.deptCount,
-      if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
+              key: child.deptId,
-        res = await getCameraAllOrgan({ parentId: val.id })
-      } else {
-        // 西海岸
-        res = await getCameraInfoByAreaId({ areaId: 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
             }
+            obj.children.push(children)
           })
         }
-      })
-      if (child) {
-        selectId.value = child.id
       }
-    }
+      // 区级特殊处理
-
+      const generateChildren2 = (val, obj) => {
-    watch(selectId, (newVal) => {
+        if (val.dataList.length > 0) {
-      if (newVal == '') {
+          val.dataList.forEach((dis) => {
-        mybus.emit('getCameraByParentId', '')
+            let children = {
-        mybus.emit('getListByParentId', '')
+              title: dis.type,
-      }
+              total: dis.total,
-    })
+              show: false,
-
+              select: false,
-    const showBottom = async (item) => {
+              key: dis.dataList[0].districtId,
-      item.show = !item.show;
+              children: [],
-      let res = {};
+            }
-      if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
+            if (dis.dataList.length > 0) {
-        res = await getCameraAllOrgan({ parentId: item.id })
+              dis.dataList.forEach((child) => {
-      } else {
+                let children2 = {
-        // 西海岸
+                  title: child.deptName,
-        res = await getCameraInfoByAreaId({ areaId: item.id })
+                  total: child.deptCount,
-      }
+                  show: false,
-
+                  select: false,
-      treeData.value.map((treeDataItem, index) => {
+                  key: child.deptId,
-        if (item.id == treeDataItem.id) {
+                }
-          treeData.value[index].children = res.data && res.data.data || []
+                children.children.push(children2)
-          console.log('treeData.value.[index]', treeData.value[index])
+              })
-        }
+            }
-      })
+            obj.children.push(children)
-    }
+          })
-    const showDown = (item, val) => {
-      selectId.value = val.id
-      console.log('item---showDown--------->', item);
-      console.log('val----showDown-------->', val);
-      if (item.children) {
-        val.show = !val.show;
-        // 取消选中
-        if (!val.show) {
-          selectId.value = ''
         }
       }
-    }
+      // const onSelect = (event, node, dragNode, dragNodesKeys) => {
-    return {
+      //   console.log(event[0], node.node.children, dragNode, dragNodesKeys)
-      treeData,
+      //   if (!node.node.children) {
-      showKey,
+      //     mybus.emit('paramsGetResources', [event[0]])
-      onSelect,
+      //   } else {
-      showBottom,
+      //     let arr = []
-      showDown,
+      //     switch (event[0]) {
-      selectId,
+      //       case '全部能力目录':
-    }
+      //         mybus.emit('paramsGetResources', [])
-  },
+      //         break
-  beforeUnmount() {
+      //       case '区级':
-    mybus.off('getDeptList')
+      //         node.node.children.forEach((dis) => {
-    console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
+      //           dis.children.forEach((val) => {
-  },
+      //             arr.push(val.key)
-  components: {
+      //           })
-    UpOutlined,
+      //         })
-    DownOutlined,
+      //         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)
+        if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
+          getCameraAllOrgan({ parentId: val.id }).then((res) => {
+            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,
+          }).then((res) => {
+            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])
+              }
+            })
+          })
+        }
+        if (child) {
+          selectId.value = child.id
+        }
+      }
+      watch(selectedKeys, () => {
+        console.log('selectedKeys', selectedKeys)
+      })
+      watch(checkedKeys, (val) => {
+        if (val.checked.length > 1) {
+          val.checked.halfChecked = val.checked.shift()
+        }
+        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) => {
+            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,
+          }).then((res) => {
+            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])
+              }
+            })
+          })
+        }
+      }
+      const showDown = (item, val) => {
+        console.log('showDown', val)
+        if (item.children) {
+          val.show = !val.show
+        }
+      }
+      return {
+        value,
+        onSearch,
+        selectedKeys,
+        checkedKeys,
+        fieldNames,
+        treeData,
+        dianjisousuo,
+        quxiaoshijian,
+        xuanzeshijian,
+        showKey,
+        onSelect,
+        showBottom,
+        showDown,
+        selectId,
+      }
+    },
+    beforeUnmount() {
+      mybus.off('getDeptList')
+      console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
+    },
+    components: {
+      UpOutlined,
+      DownOutlined,
+    },
+  })
 </script>
 <style lang="less" scoped>
-.primaryNode {
+  // .wrapper {
-  .top {
+  //   height: 100%;
-    width: 100%;
+  //   width: 100%;
-    height: 0.4rem;
+  //   padding: .2rem;
-    background: rgba(0, 135, 225, 0.1);
+  //   .wrapper-title {
-    display: flex;
+  //     height: .28rem;
-    justify-content: space-between;
+  //     width: 100%;
-    align-items: center;
+  //     margin-bottom: .25rem;
-    padding: 0 0.1rem;
+  //     .wrapper-title-name {
-    margin-top: 0.08rem;
+  //       width: 100%;
-  }
+  //       height: .17rem;
-
+  //       font-size: .18rem;
-  .top:hover {
+  //       font-family: 'AlibabaPuHuiTiR';
-    cursor: pointer;
+  //       font-weight: 400;
-    // 0058e1 透明度 0.5
+  //       color: #0058e1;
-    background: rgba(0, 88, 225, 0.8);
+  //       line-height: .34rem;
-    color: white;
+  //     }
-
+  //     .wrapper-title-yangshi {
-    :deep(.anticon) {
+  //       width: .4rem;
-      color: white;
+  //       height: .03rem;
-    }
+  //       background: #0058e1;
-  }
+  //       border-radius: .02rem;
-
+  //       margin-top: .2rem;
-  .topSelect {
+  //       margin-left: .15rem;
-    background: #0058e1;
+  //     }
-    color: white;
+  //   }
-
+  //   .wrapper-title-left-tree {
-    :deep(.anticon) {
+  //     overflow-y: auto;
-      color: white;
+  //     height: 80%;
-    }
+  //     width: 2.1rem;
-  }
+  //   }
-
+  //   .wrapper-title-left-tree::-webkit-scrollbar {
-  .bottom {
+  //     width: .05rem;
-    width: 100%;
+  //     height: .05rem;
-    background: rgba(244, 245, 248, 0.8);
+  //   }
-    padding: 0 0.1rem;
+  //   .wrapper-title-left-tree::-webkit-scrollbar-thumb {
-
+  //     border-radius: .05rem;
-    // margin-bottom: .08rem;
+  //     background-color: #0058e1;
-    .up {
+  //   }
-      cursor: pointer;
+  //   .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%;
       height: 0.4rem;
+      background: rgba(0, 135, 225, 0.1);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      border-top: 0.01rem solid #ccc;
       padding: 0 0.1rem;
-
+      margin-top: 0.08rem;
-      &>div {
+    }
-        display: flex;
+    .top:hover {
-        justify-content: flex-start;
+      cursor: pointer;
-      }
+      // 0058e1 透明度 0.5
-
+      background: rgba(0, 88, 225, 0.8);
-      .name {
+      color: white;
-        overflow: hidden;
+      :deep(.anticon) {
-        text-overflow: ellipsis;
+        color: white;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        word-break: break-all;
       }
     }
-
+    .topSelect {
-    .up:hover {
+      background: #0058e1;
-      .name {
+      color: white;
-        color: #0058e1;
+      :deep(.anticon) {
-        font-weight: 600;
+        color: white;
-      }
-
-      span {
-        color: #0058e1;
-        font-weight: 600;
       }
     }
-
+    .bottom {
-    .select {
-      padding: 0 0.1rem 0 0;
-
-      .name {
-        width: 1.7rem;
-        color: #0058e1 !important;
-        font-weight: 600;
-      }
-
-      span {
-        color: #0058e1;
-        font-weight: 600;
-      }
-    }
-
-    .item:nth-of-type(1) .up {
-      border-top: none;
-    }
-
-    .down {
       width: 100%;
-
+      background: rgba(244, 245, 248, 0.8);
-      .child {
+      padding: 0 0.1rem;
+      // margin-bottom: .08rem;
+      .up {
         cursor: pointer;
         height: 0.4rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        border-top: 0.01rem solid #ccc;
         padding: 0 0.1rem;
-
+        & > div {
-        &>div {
           display: flex;
           justify-content: flex-start;
         }
-
         .name {
           overflow: hidden;
           text-overflow: ellipsis;
@@ -299,34 +494,76 @@ export default defineComponent({
           word-break: break-all;
         }
       }
-
+      .up:hover {
-      .child:hover {
         .name {
           color: #0058e1;
           font-weight: 600;
         }
-
         span {
           color: #0058e1;
           font-weight: 600;
         }
       }
-
+      .select {
-      .select2 {
+        padding: 0 0.1rem 0 0;
         .name {
           width: 1.7rem;
           color: #0058e1;
           font-weight: 600;
         }
-
         span {
           color: #0058e1;
           font-weight: 600;
         }
-
+      }
-        padding: 0 0.1rem 0 0;
+      .item:nth-of-type(1) .up {
+        border-top: none;
+      }
+      .down {
+        width: 100%;
+        .child {
+          cursor: pointer;
+          height: 0.4rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 0.1rem;
+          & > div {
+            display: flex;
+            justify-content: flex-start;
+          }
+          .name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            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;
+        }
       }
     }
   }
-}
 </style>