From 4fba819602b0f041b352215e92a2d8dbaee1af90 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 24 Jun 2022 17:15:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD-=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/DetailsPageconetent.vue  |   7 +-
 .../home/detailsPageInfrastructureTree.vue    | 518 ++++++++++++++++++
 2 files changed, 524 insertions(+), 1 deletion(-)
 create mode 100644 front/src/views/home/detailsPageInfrastructureTree.vue

diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index d1a15f06..4afa53f2 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -3,9 +3,12 @@
 
   <div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
     <home-header></home-header>
-    <div class="details-pageconetent-left">
+    <div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
       <detailsPageconetentTree />
     </div>
+    <div class="details-pageconetent-left" v-else>
+      <detailsPageInfrastructureTree />
+    </div>
     <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
         <div
@@ -681,6 +684,7 @@
   import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
   // 基础设施引用
   import InfrastructurePage from './infrastructurePage.vue'
+  import detailsPageInfrastructureTree from './detailsPageInfrastructureTree.vue'
   export default defineComponent({
     setup() {
       // const store = useStore()
@@ -1319,6 +1323,7 @@
       // VideoSurveillance,
       DetailsPageResource,
       InfrastructurePage,
+      detailsPageInfrastructureTree,
     },
     beforeUnmount() {
       mybus.off('selectCardsitem')
diff --git a/front/src/views/home/detailsPageInfrastructureTree.vue b/front/src/views/home/detailsPageInfrastructureTree.vue
new file mode 100644
index 00000000..beb1ffd3
--- /dev/null
+++ b/front/src/views/home/detailsPageInfrastructureTree.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="wrapper">
+    <div class="wrapper-title-left-tree" :key="showKey">
+      <div v-for="item in treeData" :key="item.key" class="primaryNode">
+        <!-- <div v-if="!item.children || item.children.length == 0">
+          {{ item.title }}
+        </div> -->
+        <div
+          class="top"
+          @click="showBottom(item)"
+          :class="item.show ? 'topSelect' : ''"
+        >
+          {{ item.title }}
+          <DownOutlined v-show="!item.show" />
+          <UpOutlined v-show="item.show" />
+        </div>
+        <div class="bottom" v-show="item.show">
+          <div v-for="val in item.children" :key="val.key" class="item">
+            <div
+              class="up"
+              :class="selectId == val.key ? 'select' : ''"
+              @click="showDown(item, val), onSelect(item, val)"
+            >
+              <div>
+                <svg
+                  t="1654068878091"
+                  class="icon"
+                  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.key"
+                >
+                  <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.title }}
+                </span>
+              </div>
+              <span v-if="item.title !== '区级'">{{ val.total }}</span>
+              <span v-else>
+                <down-outlined v-show="!val.show" />
+                <up-outlined v-show="val.show" />
+              </span>
+            </div>
+            <div class="down" v-show="val.show">
+              <div
+                v-for="child in val.children"
+                :key="child.key"
+                class="child"
+                :class="selectId == child.key ? 'select2' : ''"
+                @click="onSelect(item, val, child)"
+              >
+                <div>
+                  <svg
+                    t="1654068878091"
+                    class="icon"
+                    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.key"
+                  >
+                    <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.title }}
+                  </span>
+                </div>
+                <span>{{ child.total }}</span>
+              </div>
+            </div>
+          </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 { selectDeptList } from '@/api/home.js'
+  import mybus from '@/myplugins/mybus'
+  import { useRouter } from 'vue-router'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  export default defineComponent({
+    setup() {
+      const selectedKeys = ref([])
+      const checkedKeys = ref([])
+      const router = useRouter()
+      const fieldNames = {
+        children: 'children',
+        title: 'name',
+      }
+      const showKey = ref(0)
+      const treeData = ref([])
+      const init = () => {
+        treeData.value = []
+        console.log(
+          'router.currentRoute.value.query.select',
+          router.currentRoute.value.query.select
+        )
+        let select = router.currentRoute.value.query.select
+        if (select === '123') {
+          select = ''
+        }
+        // debugger
+        console.log(
+          '获取url中的select=====================>',
+          router.currentRoute.value.query.select
+        )
+        if (
+          // select !== '基础设施' &&
+          select !== '数据资源' &&
+          select !== '知识库'
+        ) {
+          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++
+          })
+        }
+      }
+      mybus.on('getDeptList', () => {
+        init()
+      })
+      // 生成children
+      const generateChildren = (val, obj) => {
+        if (val.dataList.length > 0) {
+          val.dataList.forEach((child) => {
+            let children = {
+              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) => {
+        if (item.title === '区级') {
+          if (child) {
+            if (selectId.value !== child.key) {
+              mybus.emit('paramsGetResources', [child.key])
+              selectId.value = child.key
+            } else {
+              mybus.emit('paramsGetResources', [])
+              selectId.value = ''
+            }
+          }
+        } else {
+          if (selectId.value !== val.key) {
+            mybus.emit('paramsGetResources', [val.key])
+            selectId.value = val.key
+          } else {
+            mybus.emit('paramsGetResources', [])
+            selectId.value = ''
+          }
+        }
+      }
+      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
+      }
+      const showDown = (item, val) => {
+        console.log('showDown', val)
+        if (item.title === '区级') {
+          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>
+// .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%;
+    height: 0.4rem;
+    background: rgba(0, 135, 225, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    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;
+      height: 0.4rem;
+      display: flex;
+      justify-content: space-between;
+      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;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .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;
+        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;
+        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;
+        }
+      }
+      .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>