From 3e225ddce24d80eaa681dccfe73c491a4d6f25e6 Mon Sep 17 00:00:00 2001
From: gongjiale <942894820@qq.com>
Date: Mon, 21 Nov 2022 12:21:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E8=A7=86=E9=A2=91=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/api/file.js                         |   9 +
 .../home/detailsPageInfrastructureTreeXha.vue | 247 +++++++++++++++---
 .../views/home/videoSurveillance/index.vue    |  25 +-
 3 files changed, 236 insertions(+), 45 deletions(-)

diff --git a/front/src/api/file.js b/front/src/api/file.js
index 23e6e43a..d5ae6a57 100644
--- a/front/src/api/file.js
+++ b/front/src/api/file.js
@@ -113,6 +113,15 @@ export function getPlaceType() {
     config2
   )
 }
+
+//西海岸 根据标签树查询视频列表
+export function CameraConditionPlaceType(params) {
+  return axios.post(
+    'http://10.134.135.92:9537/data_service/getCamera/CameraConditionPlaceType',
+    params,
+    config2
+  )
+}
 // 西海岸--获取摄像头列表的后台地址 (测试环境地址：10.134.135.92:9537)
 let _cameraUrl =
   (_global &&
diff --git a/front/src/views/home/detailsPageInfrastructureTreeXha.vue b/front/src/views/home/detailsPageInfrastructureTreeXha.vue
index b30661cb..9ce9e429 100644
--- a/front/src/views/home/detailsPageInfrastructureTreeXha.vue
+++ b/front/src/views/home/detailsPageInfrastructureTreeXha.vue
@@ -1,8 +1,34 @@
 <template>
   <div class="wrapper">
-    <div class="wrapper-title-left-tree" :key="showKey">
+    <div class="nav">
+      <div :class="{ active: itemIndex == 1 }" @click="btnClick(1)">
+        <span
+          class="photo"
+          :style="{
+            backgroundImage: `url(${bumenImg}) `,
+            backgroundSize: 'cover',
+          }"
+        ></span>
+        <span>部门</span>
+      </div>
+      <div :class="{ active: itemIndex == 2 }" @click="btnClick(2)">
+        <span
+          class="photo"
+          :style="{
+            backgroundImage: `url(${biaoqianImg}) `,
+            backgroundSize: 'cover',
+          }"
+        ></span>
+        <span>标签</span>
+      </div>
+    </div>
+    <div v-if="itemIndex == 1" 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
+          class="top"
+          @click="showBottom(item)"
+          :class="item.show ? 'topSelect' : ''"
+        >
           {{ item.name }}
           ({{ item.channelCount }})
           <DownOutlined v-show="!item.show" />
@@ -10,13 +36,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' : ''"
-              @click="showDown(item, val), onSelect(item, val)">
+            <div
+              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"
-                  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
+                  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.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 +68,30 @@
               </span>
             </div>
             <div class="down" v-show="val.show">
-              <div v-for="child in val.children" :key="child.id" class="child"
-                :class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
+              <div
+                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"
-                    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
+                    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.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 }}
@@ -46,12 +104,31 @@
         </div>
       </div>
     </div>
+    <div v-if="itemIndex == 2" class="wrapper-title-left-tree">
+      <div v-for="(item, index) in biaoqianList">
+        <div class="titleName">{{ item.placeTypeName }}</div>
+        <div class="glgkmk" v-for="(child, index) in item.children">
+          <a-tooltip placement="topLeft">
+              <template #title>{{ child.placeTypeName }}</template>
+              <div
+            class="glgknum"
+            :class="{ active: child.placeTypeCode == chooseId }"
+            @click="tabClick(child.placeTypeCode)"
+          >
+            {{ child.placeTypeName }}
+          </div>
+            </a-tooltip>
+          
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { defineComponent, ref, watch } from 'vue'
 import { getCameraAllOrgan } from '@/api/videoSurveillance'
-import { getCameraInfoByAreaId } from '@/api/file'
+
+import { getCameraInfoByAreaId ,getPlaceType} from '@/api/file'
 import mybus from '@/myplugins/mybus'
 import { useRouter } from 'vue-router'
 import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
@@ -59,29 +136,39 @@ import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
 
 export default defineComponent({
   setup() {
+    const biaoqianList = ref([])
+    const bumenImg = require('@/assets/newHome/bumen.png')
+    const biaoqianImg = require('@/assets/newHome/biaoqian.png')
     const router = useRouter()
     const whoShow1 = ref(whoShow)
     const showKey = ref(0)
     const treeData = ref([])
     const selectId = ref('')
-
+    let itemIndex = ref(1)
+    let chooseId = ref('')
+    //切换tab
+    const btnClick = (index) => {
+      itemIndex.value = index
+    }
+    //选择标签内容
+    const tabClick = (id) => {
+      chooseId.value = id
+      let placeTypeCode =[]
+      placeTypeCode.push(id)
+      mybus.emit('CameraConditionPlaceType', placeTypeCode)
+    }
     // 初始化
     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
+      let select =
+        router.currentRoute.value.query.select ||
+        DETAIL_PAGE_CONTENT_DEFAULT_TAB
       if (select === '123') {
         select = ''
       }
-      console.log(
-        '获取url中的select=====================>',
-        router.currentRoute.value.query.select
-      )
       if (select == '基础设施') {
-        let res = {};
+  
+        let res = {}
         if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
           res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
         } else {
@@ -90,9 +177,13 @@ export default defineComponent({
             areaId: '70be8c5b664f4bcf869d82f2e8335051',
           })
         }
-        treeData.value = res.data && res.data.data || []
+        treeData.value = (res.data && res.data.data) || []
+        let tabs={}
+        tabs = await getPlaceType()
+        //获取标签列表=========
+        biaoqianList.value =(tabs.data && tabs.data.data) || []
         // 只有一个，默认展开到二级菜单
-        if(res.data && res.data.data.length == 1) {
+        if (res.data && res.data.data.length == 1) {
           showBottom(treeData.value[0])
         }
       }
@@ -102,15 +193,12 @@ export default defineComponent({
     })
 
     const onSelect = async (item, val, child) => {
-      console.log('item--------onSelect---->', item);
-      console.log('val------onSelect------>', val);
-      console.log('child-----onSelect------->', child);
-      mybus.emit('getCameraByParentId', val.id)
-      mybus.emit('getListByParentId', val.id)
+
       let res = {}
       if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
         res = await getCameraAllOrgan({ parentId: val.id })
       } else {
+         mybus.emit('getCameraByParentId', val.id)
         // 西海岸
         res = await getCameraInfoByAreaId({ areaId: val.id })
       }
@@ -137,8 +225,8 @@ export default defineComponent({
     })
 
     const showBottom = async (item) => {
-      item.show = !item.show;
-      let res = {};
+      item.show = !item.show
+      let res = {}
       if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
         res = await getCameraAllOrgan({ parentId: item.id })
       } else {
@@ -148,17 +236,17 @@ export default defineComponent({
 
       treeData.value.map((treeDataItem, index) => {
         if (item.id == treeDataItem.id) {
-          treeData.value[index].children = res.data && res.data.data || []
+          treeData.value[index].children = (res.data && res.data.data) || []
           console.log('treeData.value.[index]', treeData.value[index])
         }
       })
     }
     const showDown = (item, val) => {
       selectId.value = val.id
-      console.log('item---showDown--------->', item);
-      console.log('val----showDown-------->', val);
+      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 = ''
@@ -166,12 +254,19 @@ export default defineComponent({
       }
     }
     return {
+      btnClick,
+      tabClick,
       treeData,
       showKey,
       onSelect,
       showBottom,
       showDown,
       selectId,
+      itemIndex,
+      bumenImg,
+      biaoqianImg,
+      biaoqianList,
+      chooseId,
     }
   },
   beforeUnmount() {
@@ -185,6 +280,76 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
+.titleName {
+  font-size: 18px;
+  color: #7e7676;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  border-left: 6px solid #1296db;
+}
+.glgkmk {
+  cursor: pointer;
+  text-align: left;
+  position: relative;
+  display: inline-block;
+  width: 30%;
+  margin-bottom: 10px;
+  margin-left: 6px;
+ 
+  .glgknum {
+    // width: 100px;
+    // color: #000000;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+  }
+  .active {
+    color: #0058e1;
+  }
+}
+
+.glgkmk :hover {
+  color: #0058e1;
+}
+.nav {
+  margin-bottom: 13px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 18px;
+  font-family: 'Alibaba PuHuiTi';
+  color: #000000;
+  line-height: 0.32rem;
+  margin-bottom: 0.1rem;
+
+  .photo {
+    display: inline-block;
+    height: 0.3rem;
+    width: 0.3rem;
+    margin-right: 0.1rem;
+  }
+
+  div {
+    padding: 0 0.1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  div:hover {
+    color: #1296db;
+  }
+
+  .active {
+    font-weight: 600;
+    color: #1296db;
+    border-bottom: 0.02rem solid #1296db;
+  }
+}
+
 .primaryNode {
   .top {
     width: 100%;
@@ -232,7 +397,7 @@ export default defineComponent({
       border-top: 0.01rem solid #ccc;
       padding: 0 0.1rem;
 
-      &>div {
+      & > div {
         display: flex;
         justify-content: flex-start;
       }
@@ -289,7 +454,7 @@ export default defineComponent({
         align-items: center;
         padding: 0 0.1rem;
 
-        &>div {
+        & > div {
           display: flex;
           justify-content: flex-start;
         }
diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue
index 1d8cad1e..6128f09d 100644
--- a/front/src/views/home/videoSurveillance/index.vue
+++ b/front/src/views/home/videoSurveillance/index.vue
@@ -108,7 +108,7 @@ import { ElMessage } from 'element-plus'
     selectByLabelName,
     selectByChannelName,
   } from '@/api/videoSurveillance'
-  import { getCameraByCondition,getListForPOI } from '@/api/file'
+  import { getCameraByCondition,getListForPOIm,CameraConditionPlaceType } from '@/api/file'
   import mybus from '@/myplugins/mybus'
   import * as turf from '@turf/turf';
 
@@ -204,8 +204,25 @@ import { ElMessage } from 'element-plus'
       mybus.on('cameraDataOnMap', (data) => {
           this.addResourceTomap('videoMap', data)
       })
+      //行政区划点击查询摄像头
+      mybus.off('CameraConditionPlaceType')
+      mybus.on('CameraConditionPlaceType', (data) => {
+        this.queryCameraConditionPlace(data)
+         
+      })
     },
     methods: { // 查询
+      //查询标签视频
+      queryCameraConditionPlace(data) {
+          let params = {
+        placeTypeCode: data,
+        pageNum: "1",
+        pageSize: 30000,
+        }
+      CameraConditionPlaceType(params).then((res) => {
+          this.addResourceTomap('videoMap', res.data.data)
+        })
+      },
       handleEnter(){
         console.log('查询',this.address,this.addressType)
         if(this.address){
@@ -378,9 +395,9 @@ import { ElMessage } from 'element-plus'
       // 初始化地址匹配服务
       initAddressMatchService() {
         this.L = window.L || {}
-        this.addressMatchService = L.supermap.addressMatchService(
-          this.addressMatchUrl
-        )
+        // this.addressMatchService = L.supermap.addressMatchService(
+        //   this.addressMatchUrl
+        // )
       },
       areaMode(){
         // 转换不规则形状模式