From d774203bd72f3e670e53af8185466c53f69ff91d Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Thu, 29 Aug 2024 19:40:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8F=AD=E7=BB=84bug=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=8E=E8=A7=86=E9=A2=91=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/views/base/staff/index.vue                |   6 +-
 src/views/base/team/index.vue                 |  43 ++-
 .../manage/components/monitor.vue             | 298 ++++++++++++++++++
 .../manage/realTimeManage/realTimeManage.vue  | 157 +++++++--
 vue.config.js                                 |   3 +-
 6 files changed, 474 insertions(+), 34 deletions(-)
 create mode 100644 src/views/construction/manage/components/monitor.vue

diff --git a/package.json b/package.json
index 464b9c6..a495009 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "^2.0.5",
+    "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
     "html2canvas": "^1.4.1",
diff --git a/src/views/base/staff/index.vue b/src/views/base/staff/index.vue
index 30feb06..13331ac 100644
--- a/src/views/base/staff/index.vue
+++ b/src/views/base/staff/index.vue
@@ -302,16 +302,16 @@
           </el-select>
           </el-form-item>
           <el-form-item label="身份证号" prop="idCard">
-            <el-input v-model="form.idCard" placeholder="请输入人员身份证号" maxlength="20"/>
+            <el-input v-model="form.idCard" placeholder="请输入人员身份证号" maxlength="18"/>
           </el-form-item>
           <el-form-item label="手机号" prop="phone">
             <el-input v-model="form.phone" placeholder="请输入人员手机号" maxlength="11"/>
           </el-form-item>
           <el-form-item label="安全帽编号" prop="aqmCode">
-            <el-input v-model="form.aqmCode" placeholder="请输入安全帽编号" maxlength="20"/>
+            <el-input v-model="form.aqmCode" placeholder="请输入安全帽编号" maxlength="10"/>
           </el-form-item>
           <el-form-item label="马甲编号" prop="mjCode">
-            <el-input v-model="form.mjCode" placeholder="请输入马甲编号" maxlength="20"/>
+            <el-input v-model="form.mjCode" placeholder="请输入马甲编号" maxlength="10"/>
           </el-form-item>
           <el-form-item label="人员岗位" prop="post">
             <el-select v-model="form.post" placeholder="请选择人员岗位" clearable style="width: 100%;">
diff --git a/src/views/base/team/index.vue b/src/views/base/team/index.vue
index 8ac6c54..310a830 100644
--- a/src/views/base/team/index.vue
+++ b/src/views/base/team/index.vue
@@ -280,7 +280,7 @@
             </el-row>
             <el-row :gutter="24" style="display: flex;justify-content: center;">
                 <el-col :span="23">
-                <el-table :data="teamUserList" style="max-height: 300px;overflow-y: auto;">
+                <el-table :data="teamUserList" style="max-height: 350px;overflow-y: auto;">
                     <el-table-column label="序号" type="index" />
                     <el-table-column label="姓名" align="center" prop="name" />
                     <el-table-column label="身份证" align="center" prop="idCard" />
@@ -306,7 +306,7 @@
             <!-- 左侧人员 -->
             <div class="people-list-box">
                 <div class="dialog-header">
-                    <el-input style="width: 90%;" @input="searchUser(searchName)"
+                    <el-input style="width: 100%;" @input="searchUser(searchName)"
                         placeholder="请输入人员姓名"
                         prefix-icon="el-icon-search"
                         v-model="searchName">
@@ -323,7 +323,10 @@
             </div>
             <!-- 右侧选中 -->
             <div class="chosen-list-box">
-                <div class="dialog-header">已选择</div>
+                <div class="dialog-header">
+                    <div style="margin-left: 20px;">已选择</div>
+                    <div style="margin-right: 20px;color: #46a6ff;cursor: pointer;" @click="cleanChosen">清空</div>
+                </div>
                 <div class="chosen-list">
                     <div class="chosen-list-item" v-for="item in chosenUser" :key="item.id">
                         <div style="margin-left: 20px;">{{ item.name }}</div>
@@ -622,13 +625,38 @@
         cancelPeople() {
             this.openPeople = false;
         },
+        //清空人员
+        cleanChosen(){
+            this.chosenUser=[];
+            // 取消勾选
+            this.$nextTick(()=>{
+                //清空时全部清除勾选
+                this.$refs.peopleTable.clearSelection()
+                // this.peopleList.forEach(row => {
+                //     for(let i=0;i<this.chosenUser.length;i++){
+                //         if(row.id==this.chosenUser[i].id){
+                //             this.$refs.peopleTable.toggleRowSelection(row,true);
+                //         }
+                //     }
+                // }) 
+            })
+        },
         //选择人员弹窗-确认
         submitPeople(){
+            // this.openPeople = false;
             // console.log(this.teamUserList)
             // console.log(this.chosenUser)
-            this.teamUserList = this.chosenUser;
-            this.teamUserList.unshift(this.leaderData)
+            // console.log(this.form.teamLeaderId)
+            if(this.form.teamLeaderId&&this.form.teamLeaderId!=""){
+                let arr = [this.leaderData]
+                this.teamUserList = arr.concat(this.chosenUser);
+            }else{
+                this.teamUserList=this.chosenUser;
+            }
             this.openPeople = false;
+            // this.teamUserList.unshift(this.leaderData)
+            
+            
         },
         /** 新增按钮操作 */
         handleAdd() {
@@ -714,6 +742,9 @@
   </script>
   
 <style lang="scss" scoped>
+    .el-table::before {
+        display: none !important;
+    }
     .people-dialog{
         width: 100%;height: 500px;display: flex; justify-content: space-between;
     }
@@ -730,7 +761,7 @@
         width: 100%;height: 40px;display: flex;justify-content: space-between;align-items: center;
     }
     .dialog-header{
-        width: 100%;height: 60px;background-color: #F2F2F2;display: flex;align-items: center;justify-content: center;
+        width: 100%;height: 60px;background-color: #F2F2F2;display: flex;align-items: center;justify-content: space-between;
     }
     .teamLeaderBox{
         width: 40px;
diff --git a/src/views/construction/manage/components/monitor.vue b/src/views/construction/manage/components/monitor.vue
new file mode 100644
index 0000000..29e09ca
--- /dev/null
+++ b/src/views/construction/manage/components/monitor.vue
@@ -0,0 +1,298 @@
+<template>
+	<div class="video-box">
+        <video id="videoPlayer" ref="videoPlayer" class="video-player" autoplay controls="controls"  @click="checkVideo(1)"/>
+        <!-- <video id="videoPlayer" class="video-player" autoplay="autoplay" loop="loop"
+          muted controls="controls"></video> -->
+	</div>
+</template>
+
+<script>
+    // import { videoConfig } from './js/video'
+    import flvjs from 'flv.js'
+    import CryptoJS from 'crypto-js';
+    import $ from 'jquery';
+    let _cf = {
+        ver:'debug',
+        q2http_url: 'http://112.31.70.193:1854/icvs/',
+        websocket_url:'ws://112.31.70.193:9580/wss',
+        // - 配置登录参数
+        connParams : {
+            // - 登录平台IP
+            address : "112.31.70.193",
+            port : "9988",
+            // - 登录平台用户名
+            user : "bns3",
+            // - 登录平台密码
+            password :"Bns@admin**",
+            // - 登录平台企业ID
+            epid : "system",
+            // - 登录平台是否通过网闸模式
+            bfix :1
+        }
+    }
+    var loginToken='';
+    var puId='';
+	export default {
+		name: "monitor",
+		props: {
+            
+		},
+
+
+		data() {
+			return {
+                // 视频播放实例
+                videoPlayer: null,
+                classStyle: 'ball-content',
+			};
+		},
+        mounted() {
+             this.connect()
+        },
+		methods: {
+            checkVideo(index){
+                console.log(index)
+            },
+            //加密
+            videoEncrypt(word){
+                var key = CryptoJS.enc.Utf8.parse("297796CCB81D2553");
+                var srcs = CryptoJS.enc.Utf8.parse(word);
+                var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
+                return encrypted.toString();
+            },
+            // 请求
+            requestPost(router, params, callback) {
+                $.ajax({
+                    type: 'post',
+                    url: _cf.q2http_url + router,
+                    data: params,
+                    traditional: true,
+                    dataType: 'json',
+                    async: false,
+                    complete: function (rv) {
+                        if (typeof callback == 'function') callback(rv)
+                    }
+                })
+            },
+            //连接
+            connect() {
+                console.log('connect')
+                var allDataParams="address="+_cf.connParams.address+"&port="+_cf.connParams.port+
+                "&user="+ _cf.connParams.user+"&password="+_cf.connParams.password+"&epid="+_cf.connParams.epid+"&fixaddr="+_cf.connParams.bfix;
+                let params = {
+                    "params":this.videoEncrypt(allDataParams)
+                }
+                // console.log(params)
+                this.requestPost('login2', params, function (rv) {
+                    let result = {
+                        errcode: -1,
+                        token: ''
+                    }
+                    let respJSON = JSON.parse(rv.responseText);
+                    if (respJSON.hasOwnProperty('errcode')) {
+                        result.errcode = respJSON.errcode;
+                    }
+                    if (respJSON.hasOwnProperty('token')) {
+                        result.token = respJSON.token;
+                        result.errcode = 0;
+                        loginToken = result.token;//获取Token
+                    }
+                });
+
+            },
+            // 初始化视频监控
+            initVideo(devId) {
+                puId = devId;
+                console.log(puId)
+                console.log(loginToken)
+                this.$nextTick(() => {
+                    const videoElement = this.$refs.videoPlayer
+                    const url = `${_cf.q2http_url}/stream.flv?puid=${puId}&idx=0&stream=0&token=${loginToken}`
+                    try {
+                    this.videoPlayer = flvjs.createPlayer({
+                        type: 'flv',
+                        url: url,
+                        isLive: true,
+                        hasAudio: false
+                    })
+
+                    this.videoPlayer.attachMediaElement(videoElement)
+                    this.videoPlayer.load()
+
+                    setTimeout(() => {
+                        this.videoPlayer.play()
+                    }, 200)
+                    } catch (err) {
+                    console.log(err)
+                    }
+                })
+            },
+            //缩放功能
+            zoomcontrol(option) {
+                console.log(puId)
+                let params = {
+                    puid: puId,
+                    idx: "0"
+                }
+                switch (option) {
+                    case "stop":
+                        //停止缩放接口
+                        this.requestPost('PTZ/C_PTZ_StopPictureZoom?token=' + loginToken, params, rv => {
+                        })
+                        break;
+                    case "zoomin":
+                        //放大图像接口
+                        this.requestPost('PTZ/C_PTZ_ZoomInPicture?token=' + loginToken, params, rv => {
+                        })
+                        break;
+                    default:
+                        //缩小图像接口
+                        this.requestPost('PTZ/C_PTZ_ZoomOutPicture?token=' + loginToken, params, rv => {
+                        })
+                        break;
+                }
+            },
+            //远近焦点功能
+            focuscontrol(option) {
+                console.log(puId)
+                let params = {
+                    puid: puId,
+                    idx: "0"
+                }
+                switch (option) {
+                    case "near":
+                        this.requestPost('PTZ/C_PTZ_MakeFocusNear?token=' + loginToken, params, rv => {
+                            console.log(rv)
+                        })
+                        break;
+                    case "faraway":
+                        this.requestPost('PTZ/C_PTZ_MakeFocusFar?token=' + loginToken, params, rv => {
+                            console.log(rv)
+                        })
+                        break;
+                    default:
+                        this.requestPost('PTZ/C_PTZ_StopFocusMove?token=' + loginToken, params, rv => {
+                            console.log(rv)
+                        })
+                        break;
+                }
+            },
+            aperture(option) {
+                let camera = {
+                    puid: puId,
+                    idx: "0"
+                };
+                let xml = "";
+                switch (option) {
+                    case "augment":
+                        xml = `<?xml version="1.0" encoding="UTF-8"?>
+                                    <M Type="ComReq">
+                                        <C Type="G" Prio="1" EPID="system" Lang="zh_CN">
+                                            <Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_AugmentAperture" Stream="0"><Param></Param></Res>
+                                        </C>
+                                    </M>`;
+                        this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
+                            console.log(rv);
+                        });
+                        break;
+                    case "minish":
+                        xml = `<?xml version="1.0" encoding="UTF-8"?>
+                                    <M Type="ComReq">
+                                        <C Type="G" Prio="1" EPID="system" Lang="zh_CN">
+                                            <Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_MinishAperture" Stream="0"><Param></Param></Res>
+                                        </C>
+                                    </M>`;
+                        this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
+                            console.log(rv)
+                        });
+                        break;
+                    default:
+                        xml = `<?xml version="1.0" encoding="UTF-8"?>
+                                    <M Type="ComReq">
+                                        <C Type="G" Prio="1" EPID="system" Lang="zh_CN">
+                                            <Res Type="IV" Idx="${camera.idx}" OptID="C_PTZ_StopApertureZoom" Stream="0"><Param></Param></Res>
+                                        </C>
+                                    </M>`;
+                        this.requestPost(`RawRequest?dstType=201&dstID=${camera.puid}&token=${loginToken}`, {xml: xml}, rv => {
+                            console.log(rv);
+                        });
+                        break;
+                }
+            },
+            //旋转平台功能
+            async turncontrol(option) {
+                let params = {
+                    puid: puId,
+                    idx: "0",
+                    motion: option
+                };
+                this.requestPost('PTZ/C_PTZ_Turn?token=' + loginToken, params, (rv) => {  }); 
+            },
+            //控制
+            control(key) {
+                console.log(key)
+                switch (key) {
+                    case 0:
+                        this.turncontrol('stop');
+                        break;
+                    case 1:
+                        this.turncontrol('up');
+                        break;
+                    case 2:
+                        this.turncontrol('down');
+                        break;
+                    case 3:
+                        this.turncontrol('left');
+                        break;
+                    case 4:
+                        this.turncontrol('right');
+                        break;
+                    case 5:
+                        this.zoomcontrol('zoomin');
+                        break;
+                    case 6:
+                        this.zoomcontrol('zoominout');
+                        break;
+                    case 7:
+                        this.focuscontrol('near');
+                        break;
+                    case 8:
+                        this.focuscontrol('faraway');
+                        break;
+                    case 9:
+                        this.zoomcontrol('stop');
+                        break;
+                    case 10:
+                        this.focuscontrol('stop');
+                        break;
+                    default:
+                        break;
+                }
+
+            },
+            // 销毁视频监控
+            closeVideo() {
+                if (this.videoPlayer) {
+                    // this.videoPlayer.pause()
+                    this.videoPlayer.unload()
+                    this.videoPlayer.detachMediaElement()
+                    this.videoPlayer.destroy()
+                }
+            },
+                    
+		}
+	}
+</script>
+
+<style lang="scss">
+    .video-box{
+        width: 100%;
+        height: 100%;
+    }
+	.video-player {
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        object-fit: fill;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/construction/manage/realTimeManage/realTimeManage.vue b/src/views/construction/manage/realTimeManage/realTimeManage.vue
index 8fd859d..04b45b2 100644
--- a/src/views/construction/manage/realTimeManage/realTimeManage.vue
+++ b/src/views/construction/manage/realTimeManage/realTimeManage.vue
@@ -13,27 +13,27 @@
         <div id="platform-center">
           <div id="center-btn-top-box" class="layout">
             <div class="fx-btn-box layout">
-              <button id="left_nocheck" class="common_size"></button>
+              <button id="left_nocheck" class="common_size" @click="leftMonitor"></button>
             </div>
             <div class="fx-btn-box layout">
-              <button id="top_nocheck" class="common_size"></button>
-              <button id="bottom_nocheck" class="common_size"></button>
+              <button id="top_nocheck" class="common_size" @click="upMonitor"></button>
+              <button id="bottom_nocheck" class="common_size" @click="downMonitor"></button>
             </div>
             <div class="fx-btn-box layout">
-              <button id="right_nocheck" class="common_size"></button>
+              <button id="right_nocheck" class="common_size"  @click="rightMonitor"></button>
             </div>
           </div>
           <div id="center-btn-bottom-box" class="layout">
-            <button id="sx_nocheck" class="common_size"></button>
+            <button id="sx_nocheck" class="common_size" @click="smallMonitor"></button>
             <span class="btn-desc2">缩放</span>
-            <button id="fd_nocheck" class="common_size"></button>
+            <button id="fd_nocheck" class="common_size" @click="bigMonitor"></button>
           </div>
         </div>
         <div id="platform-right">
           <div class="left-right-btn-box layout">
-            <button id="jj_nocheck" class="common_size"></button>
+            <button id="jj_nocheck" class="common_size" @click="nearMonitor"></button>
             <span class="btn-desc">聚焦</span>
-            <button id="yj_nocheck" class="common_size"></button>
+            <button id="yj_nocheck" class="common_size" @click="farawayMonitor"></button>
           </div>
         </div>
       </div>
@@ -59,14 +59,20 @@
       </div>
       <!-- 球机视频 -->
       <div class="video-box layout">
-        <video v-if="boxNum == 1 || boxNum == 4" id="videoPlayer1" :class="classStyle" autoplay="autoplay" loop="loop"
-          muted controls="controls"></video>
-        <video v-if="boxNum == 4" id="videoPlayer2" :class="classStyle" autoplay="autoplay" loop="loop" muted
-          controls="controls"></video>
-        <video v-if="boxNum == 4" id="videoPlayer3" :class="classStyle" autoplay="autoplay" loop="loop" muted
-          controls="controls"></video>
-        <video v-if="boxNum == 4" id="videoPlayer4" :class="classStyle" autoplay="autoplay" loop="loop" muted
-          controls="controls"></video>
+        <div v-if="boxNum == 1 || boxNum == 4" :class="classStyle" @click="checkPlayWindow(1)">
+          <Monitor ref="monitor1" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 1 }"></Monitor>
+        </div>
+        <div v-if="boxNum == 4" :class="classStyle" @click="checkPlayWindow(2)">
+          <Monitor ref="monitor2" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 2 }"></Monitor>
+        </div>
+        <div v-if="boxNum == 4" :class="classStyle" @click="checkPlayWindow(3)">
+          <Monitor ref="monitor3" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 3 }"></Monitor>
+        </div>
+        <div v-if="boxNum == 4" :class="classStyle" @click="checkPlayWindow(4)">
+          <Monitor ref="monitor4" style="width: 100%;height: 100%;" :class="{ border1: boxIndex == 4 }"></Monitor>
+        </div>
+        <!-- <video id="videoPlayer1" :class="classStyle" autoplay="autoplay" loop="loop"
+          muted controls="controls"></video>-->
       </div>
       <!-- 违章识别 -->
       <div class="vio-box">
@@ -111,6 +117,7 @@
 
 <script>
 import { getBallDeviceLists, getPhotosById, getBallWarnLists, getWarnLists } from "@/api/construction/manage/realTimeManage.js";
+import Monitor from '../components/monitor.vue';
 export default {
   name: 'realTimeManage',
   /* 球机树前端筛选 */
@@ -119,6 +126,9 @@ export default {
       this.$refs.tree.filter(val);
     },
   },
+  components: {
+    Monitor
+  },
   data() {
     return {
       // 球机树过滤
@@ -143,7 +153,8 @@ export default {
       isHasData: true,
       busy: true,
       // 窗口数量
-      boxNum: 1,
+      boxNum: 1,//1窗口或4窗口
+      boxIndex:1,//视频下标
       classStyle: 'ball-content'
     };
   },
@@ -269,11 +280,105 @@ export default {
       return false
     },
     //球机树节点点击
-    handleNodeClick(data, node, item) {
+    handleNodeClick(data, node, item) {// 点击球机时触发的事件
+      console.log(node)
       if (node.level === 2) {
-        // 点击球机时触发的事件
+        if(this.boxNum==1){
+          this.$refs[`monitor`+1].closeVideo()
+          this.$refs[`monitor`+1].initVideo(node.data.devCode);
+        }else{
+          console.log(this.boxIndex)
+          if(this.boxIndex==4){
+            console.log(4)
+            this.$refs[`monitor`+4].closeVideo()
+            this.$refs[`monitor`+4].initVideo(node.data.devCode);
+          }
+
+          if(this.boxIndex>1&&this.boxIndex<4){
+            console.log(23)
+            this.$refs[`monitor`+this.boxIndex].closeVideo()
+            this.$refs[`monitor`+this.boxIndex].initVideo(node.data.devCode);
+            this.boxIndex=this.boxIndex+1;
+          }
+
+          if(this.boxIndex==1){
+            this.$refs[`monitor`+1].closeVideo()
+            this.$refs[`monitor`+1].initVideo(node.data.devCode);
+            this.boxIndex=this.boxIndex+1;
+          }
+          
+
+
+
+        }
       }
     },
+    //球机上移
+    upMonitor(){
+      console.log('up')
+      this.$refs[`monitor`+this.boxIndex].control(1);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(0);
+      },2000)
+    },
+    //球机下移
+    downMonitor(){
+      console.log('down')
+      this.$refs[`monitor`+this.boxIndex].control(2);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(0);
+      },2000)
+    },
+     //球机左移
+     leftMonitor(){
+      console.log('left')
+      console.log(this.boxIndex)
+      this.$refs[`monitor`+this.boxIndex].control(3);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(0);
+      },2000)
+    },
+     //球机右移
+     rightMonitor(){
+      console.log('right')
+      console.log(this.boxIndex)
+      this.$refs[`monitor`+this.boxIndex].control(4);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(0);
+      },2000)
+    },
+    //图像放大
+    bigMonitor(){
+      console.log('big')
+      this.$refs[`monitor`+this.boxIndex].control(5);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(9);
+      },2000)
+    },
+    //图像缩小
+    smallMonitor(){
+      console.log('small')
+      this.$refs[`monitor`+this.boxIndex].control(6);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(9);
+      },2000)
+    },
+    // 聚焦近
+    nearMonitor(){
+      console.log('near')
+      this.$refs[`monitor`+this.boxIndex].control(7);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(10);
+      },2000)
+    },
+    // 聚焦远
+    farawayMonitor(){
+      console.log('small')
+      this.$refs[`monitor`+this.boxIndex].control(8);
+      setTimeout(()=>{
+        this.$refs[`monitor`+this.boxIndex].control(10);
+      },2000)
+    },
     // 轮播图切换时触发
     loadVioInfos(newIndex, oldIndex) {
       this.loadPhotosById(newIndex);
@@ -281,12 +386,18 @@ export default {
     // 切换播放窗口
     changePlayVideo(type) {
       this.boxNum = type;
+      this.boxIndex=1;
       if (type == 1) {
         this.classStyle = 'ball-content'
       } else {
         this.classStyle = 'ball-content-4'
       }
     },
+    checkPlayWindow(index){
+      this.boxIndex=index;
+      console.log(this.boxIndex)
+
+    },
     //给tree不同层级设置不同的icon
     renderContent(h, { node, data }) {
       // 根据层级使用不同的图标
@@ -526,17 +637,15 @@ export default {
 .ball-content {
   width: 100%;
   height: 100%;
-  pointer-events: none;
-  object-fit: fill;
 }
 
 .ball-content-4 {
   width: 49.5%;
   height: 49%;
-  pointer-events: none;
-  object-fit: fill;
 }
-
+.border1{
+  border:5px solid #1890ff;
+}
 .vio-box {
   width: 100%;
   height: 200px;
diff --git a/vue.config.js b/vue.config.js
index 40bbf21..41190fe 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,7 +35,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://127.0.0.1:18080/ljzhgd/`,
+        // target: `http://127.0.0.1:18080/ljzhgd/`,
+        target: `http://192.168.0.14:21900/ljzhgd/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''