施工管控
This commit is contained in:
parent
5d64e103bf
commit
c6595943f6
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue