zishuo/VehicleMonitor-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/

Browse Source
This commit is contained in:
siyouyou
2024-05-21 17:24:06 +08:00
parent 8f7edd7f76
commit a77d8c49eb
1 changed files with 212 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
src/views/dashboard/index.vue
View File

@@ -5,68 +5,33 @@
<div class="left-map">
<div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
<span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">线路实况</span>
<div class="cameraBtn" >
<!-- <el-select></el-select> -->
<el-select></el-select>
<!-- <img src="/map/camera.png" :style="cameraShow?{opacity:0.6}:{opacity:1}" width="32" height="32" alt="" @click="showCamera"> -->
<div class="cameraBtn">
<!-- <el-select></el-select>
<el-select></el-select> -->
<!-- <el-input size="small" v-model="searchInfo.camera" placeholder="输入摄像机编号" clearable></el-input> -->
<el-input size="small" v-model="searchInfo.vehicle" placeholder="输入机车编号" clearable></el-input>
<el-button @click="highlighPanel" size="small" type="primary">
<i class="el-icon-search"></i>
</el-button>
<!-- <img src="/map/camera.png" :style="cameraShow ? { opacity: 0.6 } : { opacity: 1 }" width="32" height="32" alt=""
@click="showCamera"> -->
</div>
<iframe ref="mapRef" style="width: 100%;height: 100%;" src="SH-demo.html" frameborder="0"></iframe>
<iframe ref="mapRef" style="width: 100%;height: 100%;" src="/SH-demo(1).html" frameborder="0"></iframe>
</div>
<div class="right-msg">
<div class="msgStatistics">
<div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
<span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">设备状态</span>
<div class="left">
<img src="../../assets/编组201.png" style="position: absolute;right: 25px;top: 29px;">
<span style="color:#333333;font-size:12px;position: absolute;top: 18px;left: 77px;">在线</span>
<span style="color:#333333;font-size:12px;position: absolute;bottom: 18px;left: 77px;">离线</span>
<span
style="color:#333333;font-size:12px;position: absolute;bottom: 10px;right: 16px;font-weight: 600;">接入摄像机</span>
<!-- <span style="color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;top: 13px;">{{ msgStatisticsData.online||0 }}{{ '台' }}</span>
<span style="color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;bottom: 13px;">{{ msgStatisticsData.offline ||0}}{{ '台' }}</span>
<span style="color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 42px;top: 13px;">{{ msgStatisticsData.countAllCamera||0}}{{ '台' }}</span> -->
<div class="onlineNum" style="width: 40%;height: 50%;text-align: center;">
<span
style="color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
@click="toCameraMonitoring('2')">{{ msgStatisticsData.online || 0 }}{{ '台' }}</span>
</div>
<div class="offlineNum" style="width: 40%;height: 50%;text-align: center;">
<span
style="color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
@click="toCameraMonitoring('1')">{{ msgStatisticsData.offline || 0 }}{{ '台' }}</span>
</div>
<div class="cameraNum" style="position: absolute;right: 5px;top:0;width: 40%;height: 50%;text-align: center;">
<span
style="color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);">{{
msgStatisticsData.countAllCamera || 0 }}{{ '台' }}</span>
</div>
</div>
<div class="right">
<img src="../../assets/编组202.png" style="position: absolute;left: 25px;top: 29px;">
<span style="color:#333333;font-size:12px;position: absolute;top: 18px;right: 77px;">在线</span>
<span style="color:#333333;font-size:12px;position: absolute;bottom: 18px;right: 77px;">离线</span>
<span
style="color:#333333;font-size:12px;position: absolute;bottom: 10px;left: 24px;font-weight: 600;">车载终端</span>
<!-- <span style="color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;top: 13px;">{{ msgStatisticsData.OFFLINETERMINAL ||0}}{{ '台' }}</span>
<span style="color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;bottom: 13px;">{{ msgStatisticsData.ONLINETERMINAL ||0}}{{ '台' }}</span>
<span style="color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 37px;top: 13px;">{{ msgStatisticsData.COUNTALLTERMINAL ||0}}{{ '台' }}</span> -->
<div class="terminalNum"
style="position: absolute;left: 5px;top:0;width: 40%;height: 50%;text-align: center;">
<span
style="color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);">{{
msgStatisticsData.COUNTALLTERMINAL || 0 }}{{ '台' }}</span>
</div>
<div class="onlineNum" style="width: 40%;height: 50%;text-align: center;float: right;">
<span
style="color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
@click="toVehicleMonitoring('1')">{{ msgStatisticsData.OFFLINETERMINAL || 0 }}{{ '台' }}</span>
</div>
<div class="offlineNum"
style="width: 40%;height: 50%;text-align: center;position: absolute;right: 0;bottom: 0;">
<span
style="color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
@click="toVehicleMonitoring('2')">{{ msgStatisticsData.ONLINETERMINAL || 0 }}{{ '台' }}</span>
</div>
<span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">信息统计</span>
<div class="tjMsg">
<img src="../../assets/矩形_28@2x.png">
<span class="total">车载终端总数</span>
<div class="blueDrop"></div>
<span class="onlineText">在线</span>
<div class="redDrop"></div>
<span class="offlineText">离线</span>
<span class="zs">{{ this.msgStatisticsData.COUNTALLTERMINAL }}</span>
<span class="onlineTotal">{{ this.msgStatisticsData.OFFLINETERMINAL }}</span>
<span class="offlineTotal">{{ this.msgStatisticsData.ONLINETERMINAL }}</span>
</div>
</div>
<div class="systemMsg">
@@ -102,7 +67,7 @@
style="font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;">离线</span>
</div>
</div>
<div class="msgItem" v-for="item in sysMsg.monitorSystemList.slice(0,3)">
<div class="msgItem" v-for="item in sysMsg.monitorSystemList.slice(0, 3)">
<div class="blueDrop"></div>
<div style="width: 100%;height: 10px;"></div>
<div class="sysName">{{ item.monitorSystemName }}</div>
@@ -224,6 +189,20 @@
</div>
</div>
</div>
<el-dialog width="65%" :visible="dialogInfo.show" @close="dialogInfo.show = false, dialogInfo.data = {}">
<template #title>
<div :style="`opacity: ${Object.keys(dialogInfo.data).length === 0 ? '1' : '0'};`">视频加载中...</div>
</template>
<div class="video" v-loading="Object.keys(dialogInfo.data).length === 0">
<div v-for="item in dialogInfo.data.data" :key="item">
<div>
<VideoLine :showElectric="false" :items="false" :camera-code="item.cameraCode ? item.cameraCode : ''">
</VideoLine>
<Video :src="item.url"></Video>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
@@ -257,8 +236,9 @@ import {
baseVehicleVehicleTree,
baseVehicleVehicleCurrentStream,
} from "@/api/alarmList";
import { statisticsNum, getVehicleList, getCameraList } from "@/api/home";
import Video from "./Video";
import { statisticsNum, getVehicleList, getCameraList, getVehicleVideo } from "@/api/home";
import Video from "./Video.vue";
import VideoLine from "@/components/videoPlayer/videoLine";
export default {
name: "Cart",
computed: {},
@@ -297,7 +277,15 @@ export default {
errorMsgList: [],
data: [],
timer: null,
cameraShow:false
cameraShow: false,
dialogInfo: {
show: false,
data: {}
},
searchInfo: {
camera: '',
vehicle: ''
}
};
},
mounted() {
@@ -336,6 +324,27 @@ export default {
}
getMapData()
this.timer = setInterval(getMapData, 10000);
window.onmessage = (e) => {
const { data: { data, name } } = e
if(!name) return
this.$set(this.dialogInfo, 'show', true)
getVehicleVideo(data).then(res => {
if (res.data?.length > 0) {
this.dialogInfo = {
show: true,
data: {
name,
data: res.data
}
}
}
else this.$message({
message: "无监控视频",
type: 'warning'
})
})
}
},
beforeDestroy() {
clearInterval(this.timer)
@@ -373,9 +382,10 @@ export default {
components: {
warningDispose,
Video,
VideoLine
},
methods: {
showCamera(){
showCamera() {
this.$refs.mapRef.contentWindow.postMessage(this.cameraShow, "*");
this.cameraShow = !this.cameraShow
},
@@ -506,7 +516,6 @@ export default {
this.videoCode = "";
return;
}
console.log(item);
const nodes =
this.getParentNodesByCode(
this.butType === 1 ? this.data : this.VehicleTree,
@@ -726,6 +735,12 @@ export default {
this.sysMsg = res.data
}
})
},
highlighPanel() {
this.$refs.mapRef.contentWindow.postMessage({
type: 3,
data: this.searchInfo
}, "*");
}
},
};
@@ -752,7 +767,7 @@ export default {
margin-right: 10px;
padding: 60px 20px 12px 13px;
background-color: #fff;
background: url('../../assets/地图图片.png');
//background: url('../../assets/地图图片.png');
}
.right-msg {
@@ -769,28 +784,102 @@ export default {
background-color: #fff;
box-shadow: 0px 0px 4px 0px #E4E4E4;
border-radius: 2px;
.left {
position: relative;
background: url('../../assets/编组24.png') no-repeat 50% 50%;
.tjMsg{
width: 501px;
height: 180px;
background: url('../../assets/messageTjbgc.png') no-repeat 50% 50%;
background-size: 100% 100%;
width: 205px;
height: 103px;
float: left;
margin-top: 47px;
margin-left: 20px;
position: relative;
left: -25px;
top: 8px;
img{
width: 1px;
height: 46px;
position: relative;
left: 245px;
top: 60px;
}
.total{
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 12px;
color: #484646;
line-height: 22px;
font-style: normal;
position: relative;
left: 140px;
top: 30px;
}
.blueDrop{
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #2250C8;
position: relative;
left: 265px;
top: 17px;
}
.redDrop{
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #FF0000;
position: relative;
left: 350px;
top: -10px;
}
.onlineText{
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #696969;
line-height: 22px;
font-style: normal;
position: relative;
left: 275px;
top: 2px;
}
.offlineText{
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #696969;
line-height: 22px;
font-style: normal;
position: relative;
left: 360px;
top: -25px;
}
.zs{
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 20px;
color: #2250C8;
line-height: 22px;
font-style: normal;
position: relative;
left: 135px;
}
.onlineTotal{
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 20px;
color: #00974D;
font-style: normal;
position: relative;
left: 235px;
}
.offlineTotal{
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 20px;
color: #ff0000;
font-style: normal;
position: relative;
left: 310px;
}
}
.right {
position: relative;
background: url('../../assets/编组25.png') no-repeat 50% 50%;
background-size: 100% 100%;
width: 205px;
height: 103px;
float: right;
margin-top: 47px;
margin-right: 20px;
}
}
.systemMsg {
@@ -1023,6 +1112,10 @@ export default {
padding: 20px 95px !important;
}
::v-deep .el-button--primary i {
top: 0 !important;
}
.dialog-footer {
div {
display: inline-block;
@@ -1058,7 +1151,8 @@ export default {
border: 1px solid #1f9fff;
}
}
.cameraBtn{
.cameraBtn {
cursor: pointer;
top: 12px;
right: 21px;
@@ -1068,6 +1162,40 @@ export default {
gap: 12px;
}
.video {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fill, calc(50% - 6px));
min-height: 300px;
max-height: 85vh;
overflow: auto;
>div {
width: 100%;
padding-bottom: 56.5%;
position: relative;
// overflow: hidden;
>div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
// height: 60vh;
}
::v-deep .el-dialog {
margin-top: 8vh !important;
.el-dialog__body {
padding: 6px !important;
}
}
// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
color: #2766dd;