682 lines
20 KiB
Vue
682 lines
20 KiB
Vue
<template>
|
|
<div class="box-1">
|
|
<template v-if="!scenicSpotId">
|
|
<Title1 title="AI分析统计" />
|
|
<div class="traffic">
|
|
<div class="traffic-item">
|
|
<span class="traffic-item__title">总监控点位 </span>
|
|
<countup
|
|
class="traffic-item__value--primary"
|
|
:end-val="aiAnalyzeData.allCoreMonitoringPoints"
|
|
/>
|
|
</div>
|
|
<div class="traffic-item">
|
|
<span class="traffic-item__title">核心分析点位 </span>
|
|
<countup
|
|
class="traffic-item__value--success"
|
|
:end-val="aiAnalyzeData.allAnalysisPoints"
|
|
/>
|
|
</div>
|
|
<div class="traffic-item">
|
|
<span class="traffic-item__title">异常点位 </span>
|
|
<countup class="traffic-item__value--error" :end-val="aiAnalyzeData.abnormalPoints" />
|
|
</div>
|
|
</div>
|
|
<Title1 title="景区智能AI分析" />
|
|
<div class="scenic">
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">核心景区分析点位</span>
|
|
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.coreMonitoringPoints" />
|
|
</div>
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">异常点位</span>
|
|
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalPoints" />
|
|
</div>
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">异常告警</span>
|
|
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.abnormalAlarm" />
|
|
</div>
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">已处理</span>
|
|
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
|
|
</div>
|
|
</div>
|
|
<div class="flex pt-20 gap8">
|
|
<div class="box">
|
|
<Title3 title="异常告警" />
|
|
<Line
|
|
:width="370"
|
|
:height="180"
|
|
:data="abnormalAlarm"
|
|
:xAxisData="abnormalAlarmXAxisData"
|
|
/>
|
|
</div>
|
|
<div class="box">
|
|
<Title3 title="异常告警占比" />
|
|
<div class="flex">
|
|
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Title1 title="交通智能AI分析" />
|
|
<div class="scenic">
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">核心路段分析点位</span>
|
|
<countup
|
|
class="scenic-item__value"
|
|
:end-val="trafficAiAnalyzeData.coreMonitoringPoints"
|
|
/>
|
|
</div>
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">拥堵点位</span>
|
|
<countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalPoints" />
|
|
</div>
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">拥堵告警</span>
|
|
<countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.abnormalWarnings" />
|
|
</div>
|
|
<div class="scenic-item">
|
|
<span class="scenic-item__label">已处理</span>
|
|
<countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.handled" />
|
|
</div>
|
|
</div>
|
|
<div class="flex pt-20">
|
|
<div class="box">
|
|
<Title3 title="拥堵告警" />
|
|
<Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-if="scenicSpotId">
|
|
<div class="detection-top">
|
|
<!-- <img
|
|
v-if="scenicSpotId == 'root000000'"
|
|
class="map-img"
|
|
src="@/assets/images/bdc.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-if="scenicSpotId == 'root00000000'"
|
|
class="map-img"
|
|
src="@/assets/images/sxzd.png"
|
|
alt=""
|
|
/>
|
|
<img v-if="scenicSpotId == '龙桥河'" class="map-img" src="@/assets/images/lqh.jpg" alt="" /> -->
|
|
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
|
|
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
|
|
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="monitor">
|
|
<div class="t-title">
|
|
<span>监控点位统计</span>
|
|
</div>
|
|
<div class="monitor-statistics">
|
|
<img class="monitor-statistics-icon" src="@/assets/images/t-ico-0.png" />
|
|
<div class="monitor-statistics-item">
|
|
<span class="monitor-statistics-item__label">监控点位</span>
|
|
<countup
|
|
class="monitor-statistics-item__value"
|
|
:end-val="pointAlarmData.coreMonitoringPoints"
|
|
/>
|
|
</div>
|
|
<div class="monitor-statistics-item">
|
|
<span class="monitor-statistics-item__label">核心点位</span>
|
|
<countup
|
|
class="monitor-statistics-item__value"
|
|
:end-val="pointAlarmData.analysisPoints"
|
|
/>
|
|
</div>
|
|
<div class="monitor-statistics-item">
|
|
<span class="monitor-statistics-item__label">异常点位</span>
|
|
<countup
|
|
class="monitor-statistics-item__value"
|
|
:end-val="pointAlarmData.abnormalPoints"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="bg">
|
|
<Title3 title="今日安全告警" />
|
|
<Line
|
|
:width="370"
|
|
:height="180"
|
|
:data="abnormalAlarm"
|
|
:xAxisData="abnormalAlarmXAxisData"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="traffic-alarm">
|
|
<div class="t-title">
|
|
<span>异常告警统计</span>
|
|
</div>
|
|
<div class="traffic-alarm-statistics">
|
|
<img class="traffic-alarm-statistics-icon" src="@/assets/images/t-ico-2.png" />
|
|
<div class="traffic-alarm-statistics-item">
|
|
<span class="traffic-alarm-statistics-item__label">当前告警总数</span>
|
|
<countup
|
|
class="traffic-alarm-statistics-item__value"
|
|
:end-val="pointAlarmData.abnormalAlarm"
|
|
/>
|
|
</div>
|
|
<div class="traffic-alarm-statistics-item">
|
|
<span class="traffic-alarm-statistics-item__label">安全告警总数</span>
|
|
<countup
|
|
class="traffic-alarm-statistics-item__value"
|
|
:end-val="pointAlarmData.allAbnormalAlarm"
|
|
/>
|
|
</div>
|
|
<div class="traffic-alarm-statistics-item">
|
|
<span class="traffic-alarm-statistics-item__label">已解除告警总数</span>
|
|
<countup
|
|
class="traffic-alarm-statistics-item__value"
|
|
:end-val="pointAlarmData.handled"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="bg">
|
|
<Title3 title="异常告警占比" />
|
|
<div class="flex">
|
|
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import countup from 'vue-countup-v3'
|
|
import alarmRate from './alarmRate'
|
|
import alarmList from './alarmList'
|
|
import alarmToday from './alarmToday'
|
|
|
|
import { useWebSocket } from '@/hooks/socket'
|
|
import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
|
|
import {getPreviewUrlApi} from "@/api/home.js";
|
|
|
|
const { isConnected, dataRes, sendMessage } = useWebSocket(
|
|
`${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/monitor`
|
|
)
|
|
|
|
// 景区id
|
|
let scenicSpotId = ref('')
|
|
// AI分析统计
|
|
let aiAnalyzeData = ref({
|
|
abnormalPoints: 0,
|
|
allAnalysisPoints: 0,
|
|
allCoreMonitoringPoints: 0
|
|
})
|
|
// 景区智能AI分析
|
|
let scenicAiAnalyzeData = ref({
|
|
abnormalAlarm: 0,
|
|
abnormalPoints: 0,
|
|
coreMonitoringPoints: 0,
|
|
handled: 0
|
|
})
|
|
let abnormalData = ref({
|
|
abnormalAlarm: [],
|
|
abnormalAlarmPercent: []
|
|
})
|
|
// 交通告警信息
|
|
let trafficAiAnalyzeData = ref({
|
|
abnormalWarnings: 0,
|
|
abnormalPoints: 0,
|
|
coreMonitoringPoints: 0,
|
|
handled: 0,
|
|
abnormalAlarm: []
|
|
})
|
|
// 监控点位异常告警统计
|
|
let pointAlarmData = ref({
|
|
abnormalPoints: 0, // 异常点位
|
|
analysisPoints: 0, // 核心点位
|
|
coreMonitoringPoints: 0, // 监控点位
|
|
abnormalAlarm: 0, // 当前告警总数
|
|
allAbnormalAlarm: 0, // 安全告警总数
|
|
handled: 0 // 已处理告警数
|
|
})
|
|
let src = ref('')
|
|
let cameraIndexCode = ref('')
|
|
let videoShow = ref(false)
|
|
window.addEventListener("message", async(e) => {
|
|
let {code,data} = await getPreviewUrlApi({
|
|
type: 'hls',
|
|
cameraIndexCode:e.data.cameraIndexCode
|
|
})
|
|
if(code===200){
|
|
src.value = data.url
|
|
cameraIndexCode.value = e.data.cameraIndexCode
|
|
videoShow.value = true
|
|
}
|
|
});
|
|
// 异常告警
|
|
let abnormalAlarm = computed(() => {
|
|
return [{ data: abnormalData.value.abnormalAlarm.map((item) => item.value) }]
|
|
})
|
|
let abnormalAlarmXAxisData = computed(() => {
|
|
return abnormalData.value.abnormalAlarm.map((item) => item.name)
|
|
})
|
|
|
|
// 拥堵告警
|
|
let jamlData = computed(() => {
|
|
return [{ data: trafficAiAnalyzeData.value.abnormalAlarm.map((item) => item.value) }]
|
|
})
|
|
let jamXAxisData = computed(() => {
|
|
return trafficAiAnalyzeData.value.abnormalAlarm.map((item) => item.name)
|
|
})
|
|
|
|
watch(
|
|
() => isConnected.value,
|
|
(val) => {
|
|
if (val) {
|
|
sendMessage(
|
|
JSON.stringify({
|
|
action: 'start',
|
|
type: 'index',
|
|
scenicSpotId: ''
|
|
})
|
|
)
|
|
}
|
|
}
|
|
)
|
|
watch(
|
|
() => dataRes.value,
|
|
(val) => {
|
|
if (val) {
|
|
console.log(val, '安全接受消息')
|
|
switch (val.type) {
|
|
case 'AI分析统计':
|
|
aiAnalyzeData.value = val.data
|
|
break
|
|
case '获取景区智能AI分析':
|
|
scenicAiAnalyzeData.value = val.data
|
|
break
|
|
case '异常警告图表和警告比例图表':
|
|
abnormalData.value = val.data
|
|
break
|
|
case '监控点位统计和异常告警统计':
|
|
pointAlarmData.value = val.data
|
|
break
|
|
case '交通智能AI分析':
|
|
trafficAiAnalyzeData.value = val.data
|
|
}
|
|
}
|
|
}
|
|
)
|
|
|
|
let monitorChange = null
|
|
|
|
onMounted(() => {
|
|
monitorChange = PubSub.subscribe('monitorChange', (msg, data) => {
|
|
// console.log(data,'监听测试一下 反馈信息')
|
|
scenicSpotId.value = data.scenicSpotId
|
|
sendMessage(
|
|
JSON.stringify({
|
|
action: 'start',
|
|
type: 'index',
|
|
scenicSpotId: data.scenicSpotId
|
|
})
|
|
)
|
|
})
|
|
})
|
|
onUnmounted(() => {
|
|
PubSub.unsubscribe(monitorChange)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.gap8 {
|
|
gap: vw(8);
|
|
}
|
|
.none {
|
|
width: vw(380);
|
|
height: vh(200);
|
|
font-size: vw(28);
|
|
color: #f2f2f2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.detection-top {
|
|
width: 100%;
|
|
height: vh(560);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent;
|
|
/* 滚动条整体样式 */
|
|
&::-webkit-scrollbar {
|
|
height: vh(10); /* 滚动条的宽度 */
|
|
}
|
|
/* 滚动条轨道 */
|
|
&::-webkit-scrollbar-track {
|
|
background: 'transparent'; /* 轨道的背景色 */
|
|
}
|
|
/* 滚动条滑块 */
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
|
border-radius: 5px; /* 滑块的圆角 */
|
|
}
|
|
.map-img {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.monitor {
|
|
width: vw(405);
|
|
margin-right: vw(8);
|
|
&-statistics {
|
|
height: vh(90);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
background-image: url('@/assets/images/i-data-bg-1.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&-statistics-icon {
|
|
width: vw(45);
|
|
height: vw(48);
|
|
}
|
|
&-statistics-item {
|
|
&__label {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: #fff;
|
|
}
|
|
&__value {
|
|
margin-top: vh(10);
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #ffffff;
|
|
}
|
|
&:nth-child(4) {
|
|
.monitor-statistics-item__value {
|
|
color: #e21b1b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.traffic-alarm {
|
|
width: vw(405);
|
|
&-statistics {
|
|
height: vh(90);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
background-image: url('@/assets/images/i-data-bg-1.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&-statistics-icon {
|
|
width: vw(45);
|
|
height: vw(48);
|
|
}
|
|
&-statistics-item {
|
|
&__label {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: #fff;
|
|
}
|
|
&__value {
|
|
margin-top: vh(10);
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #e21b1b;
|
|
text-align: center;
|
|
}
|
|
&:nth-child(4) {
|
|
.traffic-statistics-item__value {
|
|
color: rgba(167, 0, 0, 0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bg {
|
|
padding: vw(5);
|
|
margin-top: vh(8);
|
|
background-image: url('@/assets/images/bg-3.png');
|
|
background-size: 100% 100%;
|
|
&:nth-child(1) {
|
|
margin-right: vw(10);
|
|
}
|
|
}
|
|
.t-title {
|
|
margin: vh(10) auto;
|
|
width: 100%;
|
|
height: vh(32);
|
|
font-weight: 800;
|
|
font-size: vw(16);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url('@/assets/images/title-4.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
:deep(.el-select__wrapper) {
|
|
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
|
|
border: none;
|
|
box-shadow: none;
|
|
border-top-left-radius: vh(30);
|
|
border-bottom-left-radius: vh(30);
|
|
font-size: vw(14);
|
|
color: #fff;
|
|
}
|
|
.box-1 {
|
|
margin-top: vh(120);
|
|
width: vw(800);
|
|
height: vh(950);
|
|
padding: vw(8);
|
|
box-sizing: border-box;
|
|
background-image: url('@/assets/images/bg-2.png');
|
|
background-size: 100% 100%;
|
|
.traffic {
|
|
margin-top: vh(20);
|
|
height: vh(72);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
|
|
&-item {
|
|
width: vw(229);
|
|
height: vw(72);
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: #fff;
|
|
padding-left: vw(84);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
&:nth-child(1) {
|
|
background-image: url('@/assets/images/m-t-1.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&:nth-child(2) {
|
|
background-image: url('@/assets/images/m-t-2.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&:nth-child(3) {
|
|
background-image: url('@/assets/images/m-t-3.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
&-item__title {
|
|
margin-bottom: vh(6);
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: #ffffff;
|
|
}
|
|
&-item__value--primary {
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #12b5fd;
|
|
}
|
|
&-item__value--success {
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #02f9fa;
|
|
}
|
|
&-item__value--error {
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #f15a25;
|
|
}
|
|
}
|
|
.scenic {
|
|
display: flex;
|
|
align-items: center;
|
|
height: vh(106);
|
|
gap: vw(20);
|
|
|
|
&-item {
|
|
width: vw(182);
|
|
height: vw(106);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:nth-child(1) {
|
|
background-image: url('/src/assets/images/four-t-1.png');
|
|
background-size: 100% 100%;
|
|
.scenic-item__value {
|
|
color: #02f9fa;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
background-image: url('/src/assets/images/four-t-1.png');
|
|
background-size: 100% 100%;
|
|
.scenic-item__value {
|
|
color: #02f9fa;
|
|
}
|
|
}
|
|
&:nth-child(3) {
|
|
background-image: url('/src/assets/images/four-t-2.png');
|
|
background-size: 100% 100%;
|
|
.scenic-item__value {
|
|
color: #f15a25;
|
|
}
|
|
}
|
|
&:nth-child(4) {
|
|
// background-image: url('/src/assets/images/four-t-3.png');
|
|
background-image: url('/src/assets/images/four-t-1.png');
|
|
background-size: 100% 100%;
|
|
.scenic-item__value {
|
|
// color: #f15a25;
|
|
color: #02f9fa;
|
|
}
|
|
}
|
|
&:nth-child(5) {
|
|
background-image: url('/src/assets/images/four-t-4.png');
|
|
background-size: 100% 100%;
|
|
.scenic-item__value {
|
|
color: #12b5fd;
|
|
}
|
|
}
|
|
}
|
|
&-item__label {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: #fff;
|
|
}
|
|
&-item__value {
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
margin-top: vh(10);
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
color: #02f9fa;
|
|
font-size: vw(14);
|
|
margin-bottom: vh(4);
|
|
}
|
|
|
|
.box {
|
|
flex: 1;
|
|
height: vh(220);
|
|
background-image: url('@/assets/images/bg-3.png');
|
|
background-size: 100% 100%;
|
|
|
|
// .title-2 {
|
|
// width: vw(253);
|
|
// height: vh(28);
|
|
// display: flex;
|
|
// align-items: center;
|
|
// background-image: url('@/assets/images/title-5.png');
|
|
// background-size: 100% 100%;
|
|
// & > span {
|
|
// padding-left: vw(22);
|
|
// font-weight: bold;
|
|
// font-size: vw(15);
|
|
// background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
|
// -webkit-background-clip: text;
|
|
// background-clip: text;
|
|
// -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
|
// color: transparent; /* 兼容其他浏览器 */
|
|
// }
|
|
// }
|
|
.statistic {
|
|
display: flex;
|
|
margin-top: vh(12);
|
|
width: 100%;
|
|
height: vh(88);
|
|
background-image: url('@/assets/images/bg-4.png');
|
|
background-size: 100% 100%;
|
|
&-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
&-title {
|
|
font-size: vw(14);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
&-value {
|
|
margin-top: vh(10);
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #02f9fa;
|
|
}
|
|
.count {
|
|
font-weight: bold;
|
|
font-size: vw(28);
|
|
color: #ff4400 !important;
|
|
}
|
|
.prefix,
|
|
.suffix {
|
|
color: #ff4400;
|
|
font-size: vw(12);
|
|
}
|
|
}
|
|
.title-3 {
|
|
position: relative;
|
|
width: vw(344);
|
|
height: vh(12);
|
|
margin-top: vh(20);
|
|
background-image: url('@/assets/images/title-6.png');
|
|
background-size: 100% 100%;
|
|
|
|
& > span {
|
|
position: absolute;
|
|
bottom: vh(4);
|
|
left: vw(20);
|
|
font-size: vw(15);
|
|
font-weight: bold;
|
|
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
|
color: transparent; /* 兼容其他浏览器 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|