|
@@ -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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.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;
|