From c6595943f6b779c1cddbc4082e9704efc0452307 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 22 Aug 2024 16:34:29 +0800
Subject: [PATCH] =?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/realTimeManage.js |  27 ++
 .../manage/realTimeManage/realTimeManage.vue  | 260 +++++++++++++-----
 2 files changed, 224 insertions(+), 63 deletions(-)

diff --git a/src/api/construction/manage/realTimeManage.js b/src/api/construction/manage/realTimeManage.js
index dac9504..b60be78 100644
--- a/src/api/construction/manage/realTimeManage.js
+++ b/src/api/construction/manage/realTimeManage.js
@@ -6,4 +6,31 @@ export function getBallDeviceLists(query) {
         method: 'get',
         params: query
     })
+}
+
+/* 根据文件ID获取照片 */
+export function getPhotosById(data) {
+    return request({
+        url: '/bracelet/consControl/getPhotosById',
+        method: 'post',
+        data: data
+    })
+}
+
+/* 球机违章识别 */
+export function getBallWarnLists(query) {
+    return request({
+        url: '/bracelet/consControl/getBallWarnLists',
+        method: 'get',
+        params: query
+    })
+}
+
+/* 球机预警信息 */
+export function getWarnLists(query) {
+    return request({
+        url: '/bracelet/consControl/getWarnLists',
+        method: 'get',
+        params: query
+    })
 }
\ 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 a9dac30..4ad24be 100644
--- a/src/views/construction/manage/realTimeManage/realTimeManage.vue
+++ b/src/views/construction/manage/realTimeManage/realTimeManage.vue
@@ -57,86 +57,90 @@
         <video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
       </div>
       <!-- 违章识别 -->
-      <div class="vio-box"></div>
+      <div class="vio-box">
+        <el-carousel height="200px" indicator-position="outside" :interval="10000" @change="loadVioInfos"
+          v-if="vioArr.length > 0">
+          <el-carousel-item v-for="(itemArr, arrIndex) in vioArr" :key="arrIndex">
+            <div class="vio-box-info layout">
+              <div class="vio-detail layout" v-for="(item, index) in itemArr" :key="index">
+                <div class="vio-img">
+                  <img :src="item.base64Url" alt="违章照片">
+                </div>
+                <div class="vio-content layout">
+                  <span>{{ item.devName }}</span>
+                  <span>{{ item.warnTime }}</span>
+                  <span>{{ item.warnContent }}</span>
+                </div>
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+        <el-empty v-if="vioArr.length == 0" :image-size="100" description="暂无违章数据"></el-empty>
+      </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 class="infinite-list-wrapper">
+        <ul class="list" v-infinite-scroll="loadWarnInfoData" infinite-scroll-disabled="busy"
+          infinite-scroll-distance="50">
+          <li v-for="(item, index) in warnInfoArr" :key="index" class="warn-li layout">
+            <span class="layout">{{ item.devTypeName }}</span>
+            <span class="layout">{{ item.devName }}</span>
+            <span class="layout">{{ item.warnTime }}</span>
+            <span class="layout">{{ item.warnContent }}</span>
+          </li>
+          <p v-if="loading" style="text-align: center;">加载中...</p>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { getBallDeviceLists } from "@/api/construction/manage/realTimeManage.js";
+import { getBallDeviceLists, getPhotosById, getBallWarnLists, getWarnLists } from "@/api/construction/manage/realTimeManage.js";
 export default {
   name: 'realTimeManage',
   /* 球机树前端筛选 */
   watch: {
     filterText(val) {
       this.$refs.tree.filter(val);
-    }
+    },
   },
   data() {
     return {
-      //页码
-      pageNo: 1,
-      //每页条数
-      pageSize: 5,
       // 球机树过滤
       filterText: '',
       //球机树数据
       treeData: [],
       // 球机树默认展示的节点
       idArr: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10
+      },
+      // 违章识别数组
+      vioArr: [],
       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: '人员未佩戴安全帽'
-        }
-      ],
+      //预警信息数据
+      warnInfoArr: [],
+      //预警是否加载
+      loading: false,
+      //预警滚动是否有数据
+      isHasData: true,
+      busy: true
     };
   },
   created() {
     this.laodBallDeviceLists();
+    this.loadBallWarnLists();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.busy = false;
+    });
   },
-  mounted() { },
   methods: {
     /* 加载球机树 */
     laodBallDeviceLists() {
@@ -151,6 +155,64 @@ export default {
         }
       }).catch(res => { });
     },
+    /* 加载获取违章照片 */
+    async loadPhotosById(newIndex) {
+      if (this.vioArr.length === 0) {
+        return;
+      }
+      let filePathArr = [];
+      let arrData = this.vioArr[newIndex];
+      arrData.forEach(item => {
+        if (!item.isLoad) {
+          filePathArr.push(item.base64Url)
+        }
+      })
+      let obj = {
+        dataName: filePathArr
+      }
+      if (filePathArr.length > 0) {
+        await getPhotosById(obj).then(res => {
+          let photosData = res.data;
+          if (photosData && photosData.length > 0) {
+            this.vioArr[newIndex].forEach((item, index) => {
+              item.base64Url = photosData[index]
+              item.isLoad = true
+            });
+          }
+        })
+      }
+    },
+    /* 加载违章识别信息 */
+    loadBallWarnLists() {
+      getBallWarnLists().then(res => {
+        const data = res.data;
+        this.vioArr = data;
+      }).catch(res => { });
+    },
+    // 预警信息动态加载
+    loadWarnInfoData() {
+      if (!this.isHasData) {
+        return;
+      }
+      this.queryParams.pageNum = this.queryParams.pageNum + 1;
+      this.loading = true;
+      this.busy = true;
+      getWarnLists(this.queryParams).then(res => {
+        const data = res.data;
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            this.warnInfoArr.push(item);
+          })
+        } else {
+          this.isHasData = false;
+        }
+        this.loading = false;
+        this.busy = false;
+      }).catch(res => {
+        this.loading = false;
+        this.busy = false;
+      });
+    },
     /* 球机树过滤 */
     filterNode(value, data, node) {
       if (!value) {
@@ -197,7 +259,12 @@ export default {
         // 点击球机时触发的事件
       }
     },
-
+    // 轮播图切换时触发
+    loadVioInfos(newIndex, oldIndex) {
+      this.loadPhotosById(newIndex);
+      // alert(newIndex)
+      // alert(oldIndex)
+    },
     //给梳妆街头不同层级设置不同的icon
     renderContent(h, { node, data }) {
       // 根据层级使用不同的图标
@@ -330,40 +397,51 @@ export default {
   background: url("../../../../assets/images/video/fd_check.png") no-repeat 0 0 /100% 100%;
 }
 
-#left_nocheck{
+#left_nocheck {
   background: url("../../../../assets/images/video/left_nocheck.png") no-repeat 0 0 /100% 100%;
 }
-#left_nocheck:hover{
+
+#left_nocheck:hover {
   background: url("../../../../assets/images/video/left_check.png") no-repeat 0 0 /100% 100%;
 }
-#right_nocheck{
+
+#right_nocheck {
   background: url("../../../../assets/images/video/right_nocheck.png") no-repeat 0 0 /100% 100%;
 }
-#right_nocheck:hover{
+
+#right_nocheck:hover {
   background: url("../../../../assets/images/video/right_check.png") no-repeat 0 0 /100% 100%;
 }
-#top_nocheck{
+
+#top_nocheck {
   background: url("../../../../assets/images/video/top_nocheck.png") no-repeat 0 0 /100% 100%;
 }
-#top_nocheck:hover{
+
+#top_nocheck:hover {
   background: url("../../../../assets/images/video/top_check.png") no-repeat 0 0 /100% 100%;
 }
-#bottom_nocheck{
+
+#bottom_nocheck {
   background: url("../../../../assets/images/video/bottom_nocheck.png") no-repeat 0 0 /100% 100%;
 }
-#bottom_nocheck:hover{
+
+#bottom_nocheck:hover {
   background: url("../../../../assets/images/video/bottom_check.png") no-repeat 0 0 /100% 100%;
 }
-.fx-btn-box:nth-of-type(2){
+
+.fx-btn-box:nth-of-type(2) {
   flex-direction: column;
   justify-content: space-between;
 }
-.fx-btn-box:nth-of-type(2) button:nth-of-type(1){
+
+.fx-btn-box:nth-of-type(2) button:nth-of-type(1) {
   margin-top: 5px;
 }
-.fx-btn-box:nth-of-type(2) button:nth-of-type(2){
+
+.fx-btn-box:nth-of-type(2) button:nth-of-type(2) {
   margin-bottom: 5px;
 }
+
 .left-right-btn-box {
   width: 100%;
   height: 100%;
@@ -418,7 +496,7 @@ export default {
 
 .video-box {
   width: 100%;
-  height: calc(100% - 250px);
+  height: calc(100% - 275px);
 }
 
 .ball-content {
@@ -431,6 +509,41 @@ export default {
 .vio-box {
   width: 100%;
   height: 200px;
+  margin-top: 25px;
+}
+
+.vio-box-info {
+  width: 100%;
+  height: 100%;
+}
+
+.vio-detail {
+  width: 32%;
+  height: 100%;
+  margin-right: 1%;
+  flex-direction: column;
+  justify-content: start;
+  border: 1px solid #cccccc;
+  border-radius: 6px;
+}
+
+.vio-img {
+  width: 100%;
+  height: 60%;
+}
+
+.vio-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
+
+.vio-content {
+  width: 100%;
+  height: 40%;
+  flex-direction: column;
+  justify-content: space-evenly;
+
 }
 
 .realTimeManage .right {
@@ -438,6 +551,17 @@ export default {
   height: 100%;
 }
 
+.warn-li {
+  width: 100%;
+  height: 75px;
+  border-bottom: 1px solid #cccccc;
+}
+
+.warn-li span {
+  width: 25%;
+  height: 100%;
+  letter-spacing: 1px;
+}
 
 /* tree节点过长换行处理 */
 .tree {
@@ -461,4 +585,14 @@ export default {
 ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
   color: #1890ff;
 }
+
+ul {
+  padding-inline-start: 0;
+}
+
+.infinite-list-wrapper {
+  height: 90%;
+  margin-bottom: 10%;
+  overflow: auto;
+}
 </style>
\ No newline at end of file