From 4db1e0dff510af9815c83d7a394d895c44af43a5 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 15 Aug 2024 19:01:37 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=BD=E5=B7=A5=E7=AE=A1=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/construction/manage/personManage.js          |  9 +++++++++
 .../manage/personManage/personManage.vue             | 12 ++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/api/construction/manage/personManage.js b/src/api/construction/manage/personManage.js
index d5d3c27..9e4ee09 100644
--- a/src/api/construction/manage/personManage.js
+++ b/src/api/construction/manage/personManage.js
@@ -51,4 +51,13 @@ export function getPersonsInfo(query) {
         method: 'get',
         params: query
     })
+}
+
+/* 人员树选中人员触发的接口 */
+export function getPersonDetail(query) {
+    return request({
+        url: '/bracelet/consControl/getPersonDetail',
+        method: 'get',
+        params: query
+    })
 }
\ No newline at end of file
diff --git a/src/views/construction/manage/personManage/personManage.vue b/src/views/construction/manage/personManage/personManage.vue
index f1e2d23..eef9bfa 100644
--- a/src/views/construction/manage/personManage/personManage.vue
+++ b/src/views/construction/manage/personManage/personManage.vue
@@ -169,7 +169,7 @@
 </template>
 
 <script>
-import { personsTree, teamPersonByTower, spotCheck, getCheckConfig, checkConfig, getPersonsInfo } from "@/api/construction/manage/personManage.js";
+import { personsTree, teamPersonByTower, spotCheck, getCheckConfig, checkConfig, getPersonsInfo, getPersonDetail } from "@/api/construction/manage/personManage.js";
 import no_warn from "@/assets/svg/no_warn.svg";
 import no_warn2 from "@/assets/svg/no_warn2.svg";
 import warn from "@/assets/svg/warn.svg";
@@ -271,7 +271,7 @@ export default {
         phone: '18855798259',
         teamName: '张三班组',
         idCard: '341181199807165636',
-        warnName: '离开工作区域',
+        warnName: '离开工作区域/人脸验证异常',
         warnType: 'danger',
         hasSafetyHat: true,
         sh: {
@@ -583,6 +583,14 @@ export default {
         }
       }).catch((res) => { })
     },
+    // 人员树选中人员加载的数据
+    loadPersonDetail() {
+      getPersonDetail(params).then((res) => {
+        const data = res.data;
+        if (data) {
+        }
+      }).catch((res) => { })
+    },
     handler({ BMap, map }) {
       this.BMap = BMap;
       this.map = map;

From 94e640ade3286b5c4894def487cdfaa99becf06c Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 16 Aug 2024 10:59:25 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BA=BA=E5=91=98=E7=AE=A1=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/construction/manage/personManage.js   |   9 +
 .../manage/personManage/personManage.vue      | 188 ++++++++----------
 2 files changed, 90 insertions(+), 107 deletions(-)

diff --git a/src/api/construction/manage/personManage.js b/src/api/construction/manage/personManage.js
index 9e4ee09..d470198 100644
--- a/src/api/construction/manage/personManage.js
+++ b/src/api/construction/manage/personManage.js
@@ -60,4 +60,13 @@ export function getPersonDetail(query) {
         method: 'get',
         params: query
     })
+}
+
+/* 人员历史轨迹 */
+export function getHistoryGj(query) {
+    return request({
+        url: '/bracelet/consControl/getHistoryGj',
+        method: 'get',
+        params: query
+    })
 }
\ No newline at end of file
diff --git a/src/views/construction/manage/personManage/personManage.vue b/src/views/construction/manage/personManage/personManage.vue
index eef9bfa..1e531c1 100644
--- a/src/views/construction/manage/personManage/personManage.vue
+++ b/src/views/construction/manage/personManage/personManage.vue
@@ -17,7 +17,7 @@
       <div class="content">
         <div id="searchBox" class="layout" v-if="isShowHistoryGj">
           <el-button type="primary" plain @click="clsoeHistoryGj" style="margin-right: 10px;">返回</el-button>
-          <el-date-picker v-model="chooseDate" @change="loadGj" :editable="false" :clearable="false" type="date"
+          <el-date-picker v-model="chooseDate" @change="loadHistoryGj" :editable="false" :clearable="false" type="date"
             format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
           </el-date-picker>
         </div>
@@ -73,8 +73,9 @@
             <div class="layout" v-if="person.sh.isWarn == 0"><img
                 src="../../../../assets/person_img/position_nowarn.png">正常
             </div>
-            <div class="layout info" v-if="person.sh.isWarn == 1"><img
-                src="../../../../assets/person_img/position_warn.png">异常</div>
+            <div class="layout" v-if="person.sh.isWarn == 1"><img
+                src="../../../../assets/person_img/position_warn.png">异常
+            </div>
             <div class="layout info"><img src="../../../../assets/person_img/temp.png">{{ person.sh.temp }}</div>
           </div>
           <div class="layout">
@@ -169,7 +170,7 @@
 </template>
 
 <script>
-import { personsTree, teamPersonByTower, spotCheck, getCheckConfig, checkConfig, getPersonsInfo, getPersonDetail } from "@/api/construction/manage/personManage.js";
+import { personsTree, teamPersonByTower, spotCheck, getCheckConfig, checkConfig, getPersonsInfo, getPersonDetail, getHistoryGj } from "@/api/construction/manage/personManage.js";
 import no_warn from "@/assets/svg/no_warn.svg";
 import no_warn2 from "@/assets/svg/no_warn2.svg";
 import warn from "@/assets/svg/warn.svg";
@@ -214,13 +215,6 @@ export default {
       },
       // 表单校验
       rules: {},
-      //记录设备位置数据
-      deviceData: [
-        { "position": { lng: 116.404, lat: 39.915 }, "deviceName": "设备11", show: false, },
-        { "position": { lng: 116.405, lat: 39.915 }, "deviceName": "设备22", show: false, },
-        { "position": { lng: 116.404, lat: 39.916 }, "deviceName": "设备33", show: false, },
-        { "position": { lng: 116.404, lat: 39.917 }, "deviceName": "设备44", show: false, },
-      ],
       map: null,
       BMap: null,
       // 作业杆塔
@@ -260,99 +254,33 @@ export default {
       isPerson: false,
       isShowHistoryGj: false,
       // 轨迹定位数组
-      gjArr: [
-        { lon: 117.287800, lat: 31.255550 },
-        { lon: 117.287450, lat: 31.255650 },
-        { lon: 117.287700, lat: 31.255750 },
-        { lon: 117.287650, lat: 31.255850 },
-      ],
+      gjArr: [],
       person: {
-        name: '张三',
-        phone: '18855798259',
-        teamName: '张三班组',
-        idCard: '341181199807165636',
-        warnName: '离开工作区域/人脸验证异常',
-        warnType: 'danger',
-        hasSafetyHat: true,
+        name: null,
+        phone: null,
+        teamName: null,
+        idCard: null,
+        warnName: null,
+        warnType: 'success',
+        hasSafetyHat: false,
         sh: {
-          devId: 37,
-          name: '1号手环',
-          elec: 10,
-          isWarn: 0,
-          temp: '37℃',
-          heartRate: '80次/分',
-          bloodPressure: '150/80mmHg',
-          mjCode: '1号马甲'
+          devId: null,
+          name: null,
+          elec: 0,
+          isWarn: 1,
+          temp: null,
+          heartRate: null,
+          bloodPressure: null,
+          mjCode: null,
         },
         hat: {
-          name: '1号安全帽',
+          name: null,
         },
-        workTeamNum: 5,
-        workPersonNum: 30
+        workTeamNum: 0,
+        workPersonNum: 0
       },
       // 预警表格
-      warnTable: [
-        {
-          warnTime: '2024-08-15 11:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 12:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 13:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 11:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 12:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 13:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 11:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 12:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 13:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 11:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 12:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 13:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 11:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 12:32:12',
-          warnContent: '离开工作区域'
-        },
-        {
-          warnTime: '2024-08-15 13:32:12',
-          warnContent: '离开工作区域'
-        },
-      ],
+      warnTable: [],
       //保存表格数据
       hatTable: [
         {
@@ -550,7 +478,7 @@ export default {
       this.dialogVisible2 = false
     },
     // 获取班组下的人员定位及杆塔坐标
-    laodPersonsInfo(params) {
+    loadPersonsInfo(params) {
       getPersonsInfo(params).then((res) => {
         const data = res.data;
         if (data) {
@@ -584,13 +512,54 @@ export default {
       }).catch((res) => { })
     },
     // 人员树选中人员加载的数据
-    loadPersonDetail() {
+    loadPersonDetail(params) {
       getPersonDetail(params).then((res) => {
         const data = res.data;
-        if (data) {
+        if (data && data.vo) {
+          const obj = data.vo;
+          this.warnTable = obj.warnInfoList;
+          this.person.name = obj.name;
+          this.person.phone = obj.phone;
+          this.person.teamName = obj.teamName;
+          this.person.idCard = obj.idCard;
+          this.person.warnName = obj.warnName;
+          this.person.warnType = obj.warnType;
+          this.person.hasSafetyHat = obj.hasSafetyHat;
+          this.person.sh.devId = obj.bracelet.devId;
+          this.person.sh.name = obj.bracelet.name;
+          this.person.sh.elec = obj.bracelet.elec;
+          this.person.sh.isWarn = obj.bracelet.isWarn;
+          this.person.sh.temp = this.handleData(obj.bracelet.temp);
+          this.person.sh.heartRate = this.handleData(obj.bracelet.heartRate);
+          this.person.sh.bloodPressure = this.handleData(obj.bracelet.bloodPressure);
+          this.person.sh.mjCode = this.handleData(obj.mjCode);
+          this.person.hat.name = obj.safetyHat.name;
         }
       }).catch((res) => { })
     },
+    // 人员历史轨迹
+    loadHistoryGj() {
+      // 手环设备ID和开始时间
+      let obj = {
+        'id': this.person.sh.devId,
+        'startTime': this.chooseDate
+      };
+      getHistoryGj(obj).then((res) => {
+        const data = res.data;
+        if (data && data.length > 0) {
+          this.gjArr = data;
+        } else {
+          this.gjArr = [];
+        }
+        this.loadGj();
+      }).catch((res) => { })
+    },
+    handleData(value) {
+      if (!value) {
+        return '--';
+      }
+      return value;
+    },
     handler({ BMap, map }) {
       this.BMap = BMap;
       this.map = map;
@@ -623,7 +592,7 @@ export default {
           'id': towerId,
           'teamId': teamId
         }
-        this.laodPersonsInfo(obj);
+        this.loadPersonsInfo(obj);
       } else if (node.level === 4) {
         this.isTower = false;
         this.isTeam = false;
@@ -671,6 +640,12 @@ export default {
       this.isTower = false;
       this.isTeam = false;
       this.isPerson = true;
+      // id：人员ID type: 0 班组成员 1 临时人员
+      const obj = {
+        'id': item.id,
+        'type': item.type
+      }
+      this.loadPersonDetail(obj);
     },
     /* 添加人员定位的覆盖物 */
     addPersonMarker(item) {
@@ -695,25 +670,24 @@ export default {
       marker.addEventListener("click", () => { this.clickMarker(item) });
     },
     // 人员绑定手环历史轨迹
-    openHistoryGj(devId) {
+    openHistoryGj() {
       this.removeOverlay();
+      this.loadHistoryGj();
       this.isShowHistoryGj = true;
-      this.loadGj(this.chooseDate);
     },
     // 关闭历史轨迹
-    clsoeHistoryGj(devId) {
+    clsoeHistoryGj() {
       this.removeOverlay();
       this.isShowHistoryGj = false;
       const obj = {
         'id': this.id,
         'teamId': this.teamId
       }
-      this.laodPersonsInfo(obj);
+      this.loadPersonsInfo(obj);
     },
     // 获取人员运动轨迹
-    loadGj(val) {
+    loadGj() {
       this.removeOverlay();
-      alert(val);
       const list = this.gjArr;
       if (list.length >= 2) { // 轨迹数组大于2个才会展示轨迹
         // 已轨迹的起点作为中心点

From 01fc431ec9c19a5da619bd9c07c656d19dc77e45 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 16 Aug 2024 13:05:55 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/construction/manage/realTimeManage.js |   9 +
 src/views/construction/manage/index.vue       |  22 +-
 .../manage/realTimeManage/realTimeManage.vue  | 778 +++++++-----------
 3 files changed, 328 insertions(+), 481 deletions(-)
 create mode 100644 src/api/construction/manage/realTimeManage.js

diff --git a/src/api/construction/manage/realTimeManage.js b/src/api/construction/manage/realTimeManage.js
new file mode 100644
index 0000000..dac9504
--- /dev/null
+++ b/src/api/construction/manage/realTimeManage.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+/* 人员树 */
+export function getBallDeviceLists(query) {
+    return request({
+        url: '/bracelet/consControl/getBallDeviceLists',
+        method: 'get',
+        params: query
+    })
+}
\ No newline at end of file
diff --git a/src/views/construction/manage/index.vue b/src/views/construction/manage/index.vue
index 487e0b6..3f7db17 100644
--- a/src/views/construction/manage/index.vue
+++ b/src/views/construction/manage/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="app-container" style="background-color: #F9F9F9;">
     <el-tabs v-model="activeName" class="demo-tabs">
-      <!-- <el-tab-pane label="实时监控" class="realTimeManage" name="first">
-          <realTimeManage/>
-      </el-tab-pane> -->
+      <el-tab-pane label="实时监控" class="realTimeManage" name="first">
+        <realTimeManage />
+      </el-tab-pane>
       <el-tab-pane label="人员管控" class="personManage" name="second">
-        <personManage/>
+        <personManage />
       </el-tab-pane>
       <el-tab-pane label="吊装管控" class="hoistManage" name="three">
-        <hoistManage/>
+        <hoistManage />
       </el-tab-pane>
     </el-tabs>
 
@@ -16,20 +16,19 @@
 </template>
 
 <script>
-// import realTimeManage from './realTimeManage/realTimeManage.vue';
+import realTimeManage from './realTimeManage/realTimeManage.vue';
 import personManage from './personManage/personManage.vue';
 import hoistManage from './hoistManage/hoistManage.vue';
 export default {
   name: "manage",
   components: {
-    // realTimeManage, 
+    realTimeManage, 
     personManage,
     hoistManage
   },
   data() {
     return {
-      // activeName: 'first'
-      activeName: 'second'
+      activeName: 'first'
     };
   },
   created() {
@@ -37,9 +36,8 @@ export default {
   methods: {
     // test();
   }
-  
+
 };
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></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 b562464..f4c49bf 100644
--- a/src/views/construction/manage/realTimeManage/realTimeManage.vue
+++ b/src/views/construction/manage/realTimeManage/realTimeManage.vue
@@ -1,93 +1,51 @@
 <template>
-    <div class="realTimeManage" style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;">
-            <div class="left">
-              <div class="leftTop">
-                <div class="title1">
-                  实时监控
-                </div>
-                <div class="controlDeck">
-                    <div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                      <div></div>
-                    </div>
-  
-                    <div>
-                      <div>聚焦</div>
-                      <div>缩放</div>
-                      <div>光圈</div>
-                    </div>
-                </div>
-                <div class="monitorList" >
-                  <!--  -->
-                  <el-tree :data="monitorList"  icon="el-icon-search" node-key="id" :default-expanded-keys="[1]"
-                    @node-click="handleNodeClick" :render-content="renderContent" style="font-size: 14px;"/>
-                </div>
-              </div>
-              <div class="rightTop">
-                  <div class="title">
-                    <el-tabs v-model="splitScreenName" class="demo-tabs" @tab-click="splitScreenClick">
-                      <el-tab-pane label="一画面" class="realTimeManage" name="first">
-                        <div style="width: 100%;height: 52vh;">
-                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
-                            style="height:100%;width:100%;object-fit: fill"></video>
-                        </div>
-                      </el-tab-pane>
-                      <el-tab-pane label="四画面" class="personManage" name="second">
-                        <<!-- div style="width: 100%;height: 52vh;">
-                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
-                            style="height:50%;width:50%;object-fit: fill"></video>
-                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
-                            style="height:50%;width:50%;object-fit: fill"></video>
-                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
-                            style="height:50%;width:50%;object-fit: fill"></video>
-                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
-                            style="height:50%;width:50%;object-fit: fill"></video>
-                        </div> -->
-                      </el-tab-pane>
-                    </el-tabs>
-                  </div>
-              </div>
-              <div class="down">
-                <div v-for="(item, index) in violationPhoto" :key="item.id">
-                  <div>
-                    <img :src="item.path" style="width: 100%;height: 100%;"/>
-                  </div>
-                  <div>
-                    <span>{{ item.cameraName }}</span>
-                    <span>{{ item.time }}</span>
-                  </div>
-                  <div>{{ item.content }}</div>
-                </div>
-  
-  
-              </div>
-            </div>
-            <div class="right">
-              <div>预警信息</div>
-              <div>
-                <el-table :data="tableData" style="width: 100%" :show-header="false">
-                  <el-table-column prop="deviceType" label="设备类型"/>
-                  <el-table-column prop="deviceName" label="设备名称"/>
-                  <el-table-column prop="time" label="预警时间" />
-                  <el-table-column prop="warnContent" label="预警内容" />
-                </el-table>
-                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
-                  :background="true" layout="prev, pager, next, jumper,->,total, sizes" :total="total"
-                  @current-change="getHasRole" @size-change="handler" />
-              </div>
-            </div>
+  <div class="realTimeManage">
+    <div class="left">
+      <!-- 云平台 -->
+      <div class="cloud-platform-box">
+
+      </div>
+      <!-- 球机树 -->
+      <div class="tree-box tree">
+        <el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="filterText" maxlength="30"
+          style="margin: 10px 0;"></el-input>
+        <el-tree :data="treeData" icon="el-icon-search" node-key="id" :default-expanded-keys="idArr"
+          @node-click="handleNodeClick" :render-content="renderContent" style="font-size: 15px;letter-spacing: 1px;"
+          ref="tree" :highlight-current="true" :filter-node-method="filterNode" />
+      </div>
     </div>
-  </template>
-  
-  <script>
+    <!-- 视频 -->
+    <div class="center">
+      <div class="change-box layout">
+        <el-button type="primary" plain>1</el-button>
+        <el-button type="primary" plain>4</el-button>
+      </div>
+      <!-- 球机视频 -->
+      <div class="video-box">
+        <video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
+      </div>
+      <!-- 违章识别 -->
+      <div class="vio-box"></div>
+    </div>
+    <!-- 预警信息 -->
+    <div class="right">
+      <h4>预警信息</h4>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="deviceType" label="设备类型" align="center">
+        </el-table-column>
+        <el-table-column prop="deviceName" label="设备名称" align="center">
+        </el-table-column>
+        <el-table-column prop="warnTime" label="违章时间" align="center">
+        </el-table-column>
+        <el-table-column prop="warnContent" label="违章内容" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBallDeviceLists } from "@/api/construction/manage/realTimeManage.js";
 /*   import { include } from '../../../../utils/video/include.js'
   import { video } from '../../../../utils/video/video-7.19.1.min.js'
   import { flv } from '../../../../utils/video/flv.js'
@@ -97,394 +55,276 @@
   import { videoQX } from '../../../../utils/video/videoQX';
   
   import $ from 'jquery'; */
-  export default {
-    name: 'realTimeManage',
-    data() {
-      return {
-        //页码
-        pageNo: 1,
-        //每页条数
-        pageSize: 5,
-
-        //保存球机数据
-        monitorList: [
-          {
-            id: '1',
-            label: '工程xxxxxxx',
-            children: [
-              {
-                label: '张三',
-                puId: '123123123123'
-              },
-            ],
-          },
-          {
-            label: '工程xxxxxxx',
-            children: [
-              {
-                label: '张三1',
-                puId: '798779798779877'
-              },
-            ],
-          },
-          {
-            label: '工程xxxxxxx',
-            children: [
-              {
-                label: '#张三2',
-                puId: '565445646464654'
-              },
-            ],
-          },
-        ],
-        splitScreenName: 'first',
-        //保存违章照片
-        violationPhoto: [{"id": "1", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "2", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "3", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "4", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "5", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "6", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "7", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "8", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "9", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "10", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}]
-        //保存表格数据
-        ,tableData: [
-          {
-            deviceType: '监控设备',
-            deviceName: 'xxxxx球机',
-            time: '2024-03-03',
-            warnContent: '人员未佩戴安全帽阿三大苏打啊飒飒大苏打飒飒打撒打撒'
-          },{
-            deviceType: '监控设备',
-            deviceName: 'xxxxx球机',
-            time: '2024-03-03',
-            warnContent: '人员未佩戴安全帽'
-          },{
-            deviceType: '监控设备',
-            deviceName: 'xxxxx球机',
-            time: '2024-03-03',
-            warnContent: '人员未佩戴安全帽'
-          },{
-            deviceType: '监控设备',
-            deviceName: 'xxxxx球机',
-            time: '2024-03-03',
-            warnContent: '人员未佩戴安全帽'
-          },
-          {
-            deviceType: '监控设备',
-            deviceName: 'xxxxx球机',
-            time: '2024-03-03',
-            warnContent: '人员未佩戴安全帽'
-          }
-        ]
-      };
+export default {
+  name: 'realTimeManage',
+  /* 球机树前端筛选 */
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  data() {
+    return {
+      //页码
+      pageNo: 1,
+      //每页条数
+      pageSize: 5,
+      // 球机树过滤
+      filterText: '',
+      //球机树数据
+      treeData: [],
+      // 球机树默认展示的节点
+      idArr: [],
+      splitScreenName: 'first',
+      //保存违章照片
+      violationPhoto: [{ "id": "1", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "2", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "3", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "4", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "5", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "6", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "7", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "8", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "9", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }, { "id": "10", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10" }]
+      //保存表格数据
+      , tableData: [
+        {
+          deviceType: '监控设备',
+          deviceName: 'xxxxx球机',
+          warnTime: '2024-03-03',
+          warnContent: '人员未佩戴安全帽阿三大苏打啊飒飒大苏打飒飒打撒打撒'
+        }, {
+          deviceType: '监控设备',
+          deviceName: 'xxxxx球机',
+          warnTime: '2024-03-03',
+          warnContent: '人员未佩戴安全帽'
+        }, {
+          deviceType: '监控设备',
+          deviceName: 'xxxxx球机',
+          warnTime: '2024-03-03',
+          warnContent: '人员未佩戴安全帽'
+        }, {
+          deviceType: '监控设备',
+          deviceName: 'xxxxx球机',
+          warnTime: '2024-03-03',
+          warnContent: '人员未佩戴安全帽'
+        },
+        {
+          deviceType: '监控设备',
+          deviceName: 'xxxxx球机',
+          warnTime: '2024-03-03',
+          warnContent: '人员未佩戴安全帽'
+        }
+      ]
+    };
+  },
+  created() {
+    this.laodBallDeviceLists();
+  },
+  mounted() {
+    this.loadExternalScript();
+  },
+  methods: {
+    /* 加载球机树 */
+    laodBallDeviceLists() {
+      getBallDeviceLists().then(res => {
+        const treeData = res.data;
+        if (treeData && treeData.length > 0) {
+          this.treeData = treeData
+          // 设置默认展示球机层级
+          treeData.forEach(item => {
+            this.idArr.push(item.id);
+          })
+        }
+      }).catch(res => { });
     },
-    created() {
-    },
-    mounted(){
-      this.loadExternalScript();
-      // const queryParams = this.$route.query;
-      // console.log("queryParams");
-    },
-    methods: {
-      async loadExternalScript() {
-        try {
-          // 假设你的JavaScript文件位于'/path/to/your/script.js'
-          const module = await import('../../../../utils/video/videoPage');
-          // 如果你需要使用module.export导出的内容，可以在这里进行操作
-        } catch (e) {
-          console.error('Error loading the external script:', e);
-        }
-      },
-
-
-
-      splitScreenClick(pane, event){
-        console.log("pane:", );
-        console.log("event:", event);
-  
-        if(pane.name === 'first'){
-  
-        }
-        if(pane.name === 'second'){
-  
-        }
-      },
-      //树组件节点点击
-      handleNodeClick(data){
-        console.log(data.puId)
-      },
-      //给梳妆街头不同层级设置不同的icon
-      renderContent(h, { node, data }) {
-        // 根据层级使用不同的图标
-        let icon;
-        if (node.level === 1) {
-          icon = 'el-icon-coin'; // 第一层使用主页图标
-        } else if (node.level === 2) {
-          icon = 'el-icon-s-unfold'; // 第二层使用展开图标
-        } else {
-          icon = 'el-icon-user'; // 其他层级使用平台图标
-        }
-  
-        return (
-          <span class="custom-tree-node">
-            <i class={icon}></i>
-            <span>{node.label}</span>
-          </span>
-        );
-      },
-
-      //
-      //分页器设置
-      handler(){
-          getHasRole()
-      },
-      //获取表格数据
-      getHasRole (page = 1){
-        //修改当前页码
-        this.pageNo = page;
-        /* let request = await reqAllRoleList(pageNo.value, pageSize.value, keyWord.value);
-        if (request.data.code == 200) {
-            total.value = request.data.data.total;
-            roleArr.value = request.data.data.records;
-        } */
+    async loadExternalScript() {
+      try {
+        // 假设你的JavaScript文件位于'/path/to/your/script.js'
+        const module = await import('../../../../utils/video/videoPage');
+        // 如果你需要使用module.export导出的内容，可以在这里进行操作
+      } catch (e) {
+        console.error('Error loading the external script:', e);
       }
+    },
+
+    /* 球机树过滤 */
+    filterNode(value, data, node) {
+      if (!value) {
+        if (node.level == 1) {
+          node.expanded = true
+        } else {
+          node.expanded = false
+        }
+        return true
+      }
+      // 查询列表是否有匹配数据
+      let val = value.toLowerCase()
+      return this.chooseNode(val, data, node)
+    },
+    // 过滤父节点 子节点:如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。
+    chooseNode(value, data, node) {
+      if (data.label.indexOf(value) !== -1) {
+        return true
+      }
+      const level = node.level
+      // 如果传入的节点本身就是一级节点就不用校验了
+      if (level === 1) {
+        return false
+      }
+      // 先取当前节点的父节点
+      let parentData = node.parent
+      // 遍历当前节点的父节点
+      let index = 0
+      while (index < level - 1) {
+        // 如果匹配到直接返回
+        if (parentData.data.label.indexOf(value) !== -1) {
+          return true
+        }
+        // 否则的话再往上一层做匹配
+        parentData = parentData.parent
+        index++
+      }
+      // 没匹配到返回false
+      return false
+    },
+    //球机树节点点击
+    handleNodeClick(data, node, item) {
+      if (node.level === 2) {
+        alert(data.id);
+      }
+    },
+    splitScreenClick(pane, event) {
+      console.log("pane:",);
+      console.log("event:", event);
+
+      if (pane.name === 'first') {
+
+      }
+      if (pane.name === 'second') {
+
+      }
+    },
+    //给梳妆街头不同层级设置不同的icon
+    renderContent(h, { node, data }) {
+      // 根据层级使用不同的图标
+      let icon;
+      if (node.level === 1) {
+        icon = 'el-icon-coin'; // 第一层使用主页图标
+      } else if (node.level === 2) {
+        icon = 'el-icon-s-unfold'; // 第二层使用展开图标
+      } else {
+        icon = 'el-icon-user'; // 其他层级使用平台图标
+      }
+
+      return (
+        <span class="custom-tree-node">
+          <i class={icon}></i>
+          <span>{node.label}</span>
+        </span>
+      );
+    },
+
+    //
+    //分页器设置
+    handler() {
+      getHasRole()
+    },
+    //获取表格数据
+    getHasRole(page = 1) {
+      //修改当前页码
+      this.pageNo = page;
+      /* let request = await reqAllRoleList(pageNo.value, pageSize.value, keyWord.value);
+      if (request.data.code == 200) {
+          total.value = request.data.data.total;
+          roleArr.value = request.data.data.records;
+      } */
     }
-  };
-  </script>
-  
-  <style scoped>
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.realTimeManage {
+  width: 100%;
+  height: 80vh;
+  background-color: #fff;
+  box-shadow: 10px 10px 5px #000;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.layout {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.realTimeManage .left {
+  width: 20%;
+  height: 100%;
+  padding: 0 0.5%;
+  box-sizing: border-box;
+}
+
+.cloud-platform-box {
+  width: 100%;
+  height: 250px;
+}
+
+.tree-box {
+  width: 100%;
+  height: calc(100% - 250px);
+  overflow-y: auto;
+}
+
+.realTimeManage .center {
+  width: 48%;
+  height: 100%;
+}
+
+.change-box {
+  width: 100%;
+  height: 50px;
+  justify-content: center;
+}
+
+.video-box {
+  width: 100%;
+  height: calc(100% - 250px);
+}
+
+.ball-content {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  object-fit: fill;
+}
+
+.vio-box {
+  width: 100%;
+  height: 200px;
+}
+
+.realTimeManage .right {
+  width: 30%;
+  height: 100%;
+}
 
 
-    .realTimeManage>div>div{
-      float: left;
-    }
-    .realTimeManage .left{
-      width: 66%;
+/* tree节点过长换行处理 */
+.tree {
+  width: 100%;
+
+  ::v-deep .el-tree-node {
+    white-space: normal;
+
+    .el-tree-node__content {
       height: 100%;
-    }
-    .realTimeManage .left>div{
-      float: left;
-    }
-    .realTimeManage .left>.leftTop{
-      width: 23%;
-      height: 75%;
-    }
-    .realTimeManage .left>.leftTop>.title1{
-      font-weight: 600;
-      font-size: 14px;
-      color: #333333;
-      width: 100%;
-      height: 8%;
-      display: flex;
       align-items: center;
-      text-indent: 20px;
+      margin: 4px 0;
     }
-    .realTimeManage .left>.leftTop>.controlDeck{
-      width: 100%;
-      height: 42%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1){
-      width: 100%;
-      height: 85%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div{
-      width: 40px;
-      height: 40px;
-      cursor: pointer;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(1){
-      position: absolute;
-      top: 7%;
-      left: 6.35%;
-      background-image: url('../../../../assets/images/control1.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(2){
-      position: absolute;
-      top: 12.55%;
-      left: 3.7%;
-      background-image: url('../../../../assets/images/control2.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(3){
-      position: absolute;
-      top: 12.5%;
-      left: 9%;
-      background-image: url('../../../../assets/images/control3.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(4){
-      position: absolute;
-      top: 18%;
-      left: 6.35%;
-      background-image: url('../../../../assets/images/control4.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(5){
-      position: absolute;
-      top: 21.9%;
-      left: 1%;
-      background-image: url('../../../../assets/images/control5.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(6){
-      position: absolute;
-      top: 27%;
-      left: 1%;
-      background-image: url('../../../../assets/images/control6.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(7){
-      position: absolute;
-      top: 27%;
-      left: 5.3%;
-      background-image: url('../../../../assets/images/control7.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(8){
-      position: absolute;
-      top: 27%;
-      left: 7.55%;
-      background-image: url('../../../../assets/images/control8.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(9){
-      position: absolute;
-      top: 21.9%;
-      left: 11.8%;
-      background-image: url('../../../../assets/images/control9.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(10){
-      position: absolute;
-      top: 27%;
-      left: 11.8%;
-      background-image: url('../../../../assets/images/control10.png');
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2){
-      width: 100%;
-      height: 15%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div{
-      color: #06182E; 
-      font-size: 14px;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(1){
-      margin-left: 9%;
-    }
-    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(3){
-      margin-right: 9%;
-    }
-  
-  
-    .realTimeManage .left>.leftTop>.monitorList{
-      width: 100%;
-      height: 50%;
-      overflow: auto;
-    }
-  
-    .realTimeManage .left>.leftTop>.monitorList>div:nth-child(1){
-      border-top: 0.5px solid #F5F4F4;
-    }
-  
-  
-  
-    .realTimeManage .left>.rightTop{
-      width: 77%;
-      height: 75%;
-    }
-    .realTimeManage .left>.down{
-      margin-top: 1%;
-      width: 100%;
-      height: 23%;
-      overflow-x: auto;
-      white-space: nowrap;
-      overflow-y: hidden;
-    }
-    .realTimeManage .left>.down>div{
-      height: 100%;
-      width: 17%;
-      margin-left: 2%;
-      display: inline-block;
-    }
-    .realTimeManage .left>.down>div>div:nth-child(1){
-      width: 100%;
-      height: 68%;
-    }
-    .realTimeManage .left>.down>div>div:nth-child(2){
-      width: 100%;
-      height: 16%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .realTimeManage .left>.down>div>div:nth-child(2)>span{
-      text-indent: 8px;
-      color: #333333;
-      font-size: 14px;
-    }
-    .realTimeManage .left>.down>div>div:nth-child(3){
-      width: 100%;
-      height: 16%;
-      text-indent: 8px;
-      color: #333333;
-      font-size: 14px;
-    }
-    .realTimeManage .right{
-      margin-left: 1%;
-      width:32%;
-      height: 100%;
-    }
-    .realTimeManage .right>div:nth-child(1){
-      width: 100%;
-      height: 6%;
-      color: #333333;
-      font-size: 14px;
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      text-indent: 20px;
-    }
-    .realTimeManage .right>div:nth-child(2){
-      width: 100%;
-      height: 94%;
-      overflow: auto;
-    }
-  
-  
-  
-    ::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
   }
-  /* 滚动槽 */
-  
-  ::-webkit-scrollbar-track {
-      -webkit-box-shadow: inset 0 0 5px #e8eceb;
-      border-radius: 5px;
+
+  ::v-deep .el-tree-node__label {
+    font-size: 15px;
   }
-  
-  /* 滚动条滑块 */
-  
-  ::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-      background: #ffffff;
-      -webkit-box-shadow: inset 0 0 6px #cbb7b7;
-  }
-  
-  ::-webkit-scrollbar-thumb:window-inactive {
-      background: #e8eceb;
-  }
-  
-  ::-webkit-scrollbar-corner {
-      background-color: #e8eceb;
-  }
-  </style>
\ No newline at end of file
+}
+
+::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  color: #1890ff;
+}
+</style>
\ No newline at end of file