From 1b34a1cc4afd8796b969efef58b3600665c5cfe8 Mon Sep 17 00:00:00 2001
From: chendingwei <1170506816@qq.com>
Date: Tue, 13 Dec 2022 16:49:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=9B=B8=E6=9C=BA=E6=A8=A1?=
 =?UTF-8?q?=E7=B3=8A=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue                     |   1 -
 src/views/page/aside/cameraLeftMenu.vue | 216 ++++++++++++++++++++++++
 src/views/page/cameraCenter.vue         | 178 ++-----------------
 3 files changed, 227 insertions(+), 168 deletions(-)
 create mode 100644 src/views/page/aside/cameraLeftMenu.vue

diff --git a/src/views/index.vue b/src/views/index.vue
index 86bb995..135afad 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -20,7 +20,6 @@
 </template>
   
 <script lang="ts" setup>
-import ComSetup from "@/components/aside/index.vue";
 import CameraCenter from "@/views/page/cameraCenter.vue";
 import UserEdit from "@/views/page/userEdit.vue"
 
diff --git a/src/views/page/aside/cameraLeftMenu.vue b/src/views/page/aside/cameraLeftMenu.vue
new file mode 100644
index 0000000..1629624
--- /dev/null
+++ b/src/views/page/aside/cameraLeftMenu.vue
@@ -0,0 +1,216 @@
+<template>
+    <div class="arTagTitle">
+        请输入标签内容
+    </div>
+    <div class="messageList">
+        <div class="messageTitle">
+            选择切换高点
+        </div>
+        <div class="search">
+            <img src="@/assets/images/search.png">
+            <input class="arScrean" placeholder='请输入站点名称' v-model="searchStr" type="text" id="" />
+        </div>
+        <div class="container clearfix">
+            <a-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" :expandAction="'click'"
+                @select="selectCamera">
+                <template #title="{ key: treeKey, title }">
+                    <a-dropdown :trigger="['contextmenu']">
+                        <span>{{ title }}</span>
+                        <template #overlay>
+                            <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
+                                <a-menu-item key="1">打开</a-menu-item>
+                                <a-menu-item key="2">删除</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                </template>
+            </a-tree>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import { useStore } from '@/store/index';
+import * as cameraApi from '@/axios/cameraBase/cameraApi';
+let piniaStore = useStore();
+const treeData = ref<any>([
+    {
+        title: '视频监控',
+        key: '视频监控',
+        children: [
+            {
+                title: '横琴',
+                key: '横琴',
+                children: [
+                    // { title: '0-0-1-0', key: '0-0-1-0' },
+                    // { title: '0-0-1-1', key: '0-0-1-1' },
+                    // { title: '0-0-1-2', key: '0-0-1-2' },
+                ],
+            },
+        ],
+    }
+]);
+const onContextMenuClick = (treeKey: string, menuKey: string) => {
+    console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+};
+let searchStr = ref('');
+const expandedKeys = ref<any[]>([]);
+
+onMounted(() => {
+    loadTreeData()
+})
+watch(searchStr, (newVal, oldVal) => {
+    let expandedKeyArr: any[] = []
+    if (newVal.length == 0) return
+    treeData.value.forEach((element: any) => {
+        if (element.children.length != 0) {
+            let arr = searchFn(newVal, element.children)
+            if(arr.length!=0){
+                expandedKeyArr = expandedKeyArr.concat(arr)
+                expandedKeyArr.push(element.key)
+            }
+        }
+    });
+    expandedKeys.value = expandedKeyArr
+    console.log(expandedKeys.value);
+
+
+})
+function selectCamera(e: any) {
+    if (e.length && !isNaN(parseInt(e[0]))) {
+        piniaStore.updateCurSelectKey(e[0].toString())
+    }
+}
+function searchFn(newVal: string, arr: any[]): any {
+    let expandedKeyArr: any[] = []
+    arr.forEach(element => {
+        if (element.children && element.children.length) {
+            let ab = searchFn(newVal, element.children);
+            if (ab && ab.length) {
+                ab.push(element.key)
+                expandedKeyArr = expandedKeyArr.concat(ab);
+            }
+        }
+
+        if (element.title.indexOf(newVal) > -1) {
+            expandedKeyArr.push(element.key);
+        }
+
+    });
+    return expandedKeyArr
+}
+function loadTreeData() {
+    cameraApi.GetList().then((res: any) => {
+        let list: Array<any> = res.data.data;
+        console.log(list);
+        treeData.value[0].children[0].children = list.map((item: any) => {
+            item.title = item.name
+            item.key = item.id.toString()
+            return item
+        })
+        piniaStore.addCameraMap(list)
+
+        // switchCamera(list[0].id.toString())
+        // treeData.value=piniaStore.treeData
+    });
+}
+</script>
+
+<style scoped lang='less'>
+.container {
+    padding: 0 20px;
+}
+
+:deep(.ant-tree) {
+    background-color: transparent !important;
+
+    div {
+        color: #000 !important;
+    }
+}
+
+.messageList {
+    position: absolute;
+    top: 18%;
+    left: 1%;
+    width: 11vw;
+    height: 21vw;
+    background: url(@/assets/images/loginBG.png);
+    background-size: 100% 100%;
+}
+
+.messageTitle {
+    position: absolute;
+    top: 6%;
+    left: 50%;
+    width: 75%;
+    border-radius: 1vh;
+    transform: translate(-50%, -50%);
+    height: 3vh;
+    color: #fff;
+    line-height: 3vh;
+    text-align: center;
+    background-image: linear-gradient(to right, rgba(255, 107, 0, 0.3), rgba(80, 80, 80, 0.1), rgba(255, 107, 0, 0.3));
+}
+
+.arTagTitle {
+    font-size: 1em;
+    color: #333;
+    padding-left: 1.2vw;
+    line-height: 47px;
+    position: absolute;
+    top: 10%;
+    left: 1%;
+    width: 8.5vw;
+    height: 50px;
+    background: url(@/assets/images/textBG.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.arTagTitle::before {
+    content: '';
+    background: url(@/assets/images/textAnimal.png) no-repeat;
+    background-size: 100% 100%;
+    height: 35px;
+    width: 35px;
+    position: absolute;
+    top: 6px;
+    left: -15px;
+    animation: rounte 5s linear infinite;
+}
+
+.search {
+    position: relative;
+    height: 1.5em;
+    width: 75%;
+    margin: 6vh 0 0 50%;
+    transform: translateX(-50%);
+    color: #eee;
+
+    img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 1.5em;
+        width: 1.5em;
+    }
+
+    .arScrean {
+        border: 0;
+        outline: 0;
+        height: 1.5em;
+        position: absolute;
+        top: 0;
+        left: 1.9em;
+        padding-left: 0.3em;
+        border-left: #999 1px solid;
+        color: #eee;
+        background: rgba(200, 200, 255, 0);
+    }
+}
+
+:deep(.ant-dropdown-menu-title-content) {
+    color: #000 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/page/cameraCenter.vue b/src/views/page/cameraCenter.vue
index c22d86f..621ff9a 100644
--- a/src/views/page/cameraCenter.vue
+++ b/src/views/page/cameraCenter.vue
@@ -42,33 +42,7 @@
                 <div class="buttomName">工具箱</div>
             </div>
         </div>
-        <div class="arTagTitle">
-            请输入标签内容
-        </div>
-        <div class="messageList">
-            <div class="messageTitle">
-                选择切换高点
-            </div>
-            <div class="search">
-                <img src="@/assets/images/search.png">
-                <input class="arScrean" placeholder='请输入站点名称' type="text" id="" value="" />
-            </div>
-            <div class="container clearfix">
-                <a-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" :expandAction="'click'"  @select="selectCamera" >
-                    <template #title="{ key: treeKey, title }">
-                        <a-dropdown :trigger="['contextmenu']">
-                            <span>{{ title }}</span>
-                            <template #overlay>
-                                <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
-                                    <a-menu-item key="1">打开</a-menu-item>
-                                    <a-menu-item key="2">删除</a-menu-item>
-                                </a-menu>
-                            </template>
-                        </a-dropdown>
-                    </template>
-                </a-tree>
-            </div>
-        </div>
+        <CameraLeftMenu></CameraLeftMenu>
     </div>
 </template>
 
@@ -82,7 +56,7 @@ import { apiUrl } from "@/axios";
 import { storeToRefs } from 'pinia';
 import Msg from "@/utils/message";
 import * as cameraApi from '@/axios/cameraBase/cameraApi';
-import { number } from "vue-types";
+import CameraLeftMenu from '@/views/page/aside/cameraLeftMenu.vue'
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
 let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
@@ -97,41 +71,19 @@ let labelList = ref<any[]>([])
 let addLabel = storeToRefs(piniaStore).addLabel
 let addLabelLeft = ref(0);
 let addLabelTop = ref(0);
-const treeData =ref<any>( [
-    {
-        title: '视频监控',
-        key: '视频监控',
-        children: [
-            {
-                title: '横琴',
-                key: '横琴',
-                children: [
-                    // { title: '0-0-1-0', key: '0-0-1-0' },
-                    // { title: '0-0-1-1', key: '0-0-1-1' },
-                    // { title: '0-0-1-2', key: '0-0-1-2' },
-                ],
-            },
-        ],
-    },
-]);
+
 onMounted(() => {
     {
         player = <HTMLVideoElement>document.querySelector('#videoPlayer');
         canvas = <HTMLCanvasElement>document.querySelector('#videoCanvas');
-        loadTreeData();
         loadVideoPlayer();
         loadVideoCanvas();
 
     }
 })
-const onContextMenuClick = (treeKey: string, menuKey: string) => {
-    console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
-};
-const expandedKeys = ref<string[] | number[]>([]);
-
-watch(expandedKeys, (newVal,oldVal) => {
-    console.log(newVal[newVal.length-1],'expandedKeys', newVal,oldVal);
-});
+
+
+
 watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
@@ -145,21 +97,7 @@ watch(addLabel, (newVal, oldVal) => {
         }
     }
 })
-function loadTreeData() {
-    cameraApi.GetList().then((res: any) => {
-        let list: Array<any> = res.data.data;
-        console.log(list);
-        treeData.value[0].children[0].children=list.map((item:any)=>{
-            item.title=item.name
-            item.key=item.id
-            return item
-        })
-        piniaStore.addCameraMap(list)
-
-        // switchCamera(list[0].id.toString())
-        // treeData.value=piniaStore.treeData
-    });
-}
+
 //测试删除标签
 function test(id: number) {
 
@@ -178,12 +116,7 @@ function test(id: number) {
         Msg.error("删除失败")
     })
 }
-function selectCamera(e:any){
-    console.log(e);
-    if(e.length&&typeof e[0]=='number'){
-        switchCamera(e[0].toString())
-    }
-}
+
 function mouseRightFn(e: any) {
     console.log(1111111111, e);
 
@@ -443,67 +376,8 @@ onUnmounted(() => {
         }
     }
 
-    .container {
-        padding: 0 20px;
-    }
-
-    :deep(.ant-tree) {
-        background-color: transparent !important;
-
-        div {
-            color: #000 !important;
-        }
-    }
-
-    .messageList {
-        position: absolute;
-        top: 18%;
-        left: 1%;
-        width: 11vw;
-        height: 21vw;
-        background: url(@/assets/images/loginBG.png);
-        background-size: 100% 100%;
-    }
-
-    .messageTitle {
-        position: absolute;
-        top: 6%;
-        left: 50%;
-        width: 75%;
-        border-radius: 1vh;
-        transform: translate(-50%, -50%);
-        height: 3vh;
-        color: #fff;
-        line-height: 3vh;
-        text-align: center;
-        background-image: linear-gradient(to right, rgba(255, 107, 0, 0.3), rgba(80, 80, 80, 0.1), rgba(255, 107, 0, 0.3));
-    }
 
-    .arTagTitle {
-        font-size: 1em;
-        color: #333;
-        padding-left: 1.2vw;
-        line-height: 47px;
-        position: absolute;
-        top: 10%;
-        left: 1%;
-        width: 8.5vw;
-        height: 50px;
-        background: url(@/assets/images/textBG.png) no-repeat;
-        background-size: 100% 100%;
-    }
-
-    .arTagTitle::before {
-        content: '';
-        background: url(@/assets/images/textAnimal.png) no-repeat;
-        background-size: 100% 100%;
-        height: 35px;
-        width: 35px;
-        position: absolute;
-        top: 6px;
-        left: -15px;
-        animation: rounte 5s linear infinite;
-    }
+   
 
     .buttomList {
         position: absolute;
@@ -559,38 +433,8 @@ onUnmounted(() => {
         font-size: 0.8em;
     }
 
-    .search {
-        position: relative;
-        height: 1.5em;
-        width: 75%;
-        margin: 6vh 0 0 50%;
-        transform: translateX(-50%);
-        color: #eee;
-
-        img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 1.5em;
-            width: 1.5em;
-        }
-
-        .arScrean {
-            border: 0;
-            outline: 0;
-            height: 1.5em;
-            position: absolute;
-            top: 0;
-            left: 1.9em;
-            padding-left: 0.3em;
-            border-left: #999 1px solid;
-            color: #eee;
-            background: rgba(200, 200, 255, 0);
-        }
-    }
+  
 }
 
-:deep(.ant-dropdown-menu-title-content) {
-    color: #000 !important;
-}
+
 </style>