587 lines
16 KiB
Vue
587 lines
16 KiB
Vue
<template>
|
|
<div class="box-1">
|
|
<template v-if="!scenicSpotId">
|
|
<Title1 title="交通信息" />
|
|
<div class="traffic">
|
|
<div class="traffic-item" v-for="(item, index) in trafficData" :key="index">
|
|
<span class="traffic-item__title">{{ item.name }}</span>
|
|
<countup
|
|
:class="{
|
|
'traffic-item__value--primary': item.type == 0,
|
|
'traffic-item__value--success': item.type == 1,
|
|
'traffic-item__value--error': item.type == 2
|
|
}"
|
|
:end-val="item.value"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Title1 title="景区信息" />
|
|
<div class="scenic">
|
|
<div class="scenic-item" v-for="(item, index) in scenicSpotData.headList" :key="index">
|
|
<span class="scenic-item__label">{{ item.name }}</span>
|
|
<countup class="scenic-item__value" :end-val="item.value" />
|
|
</div>
|
|
</div>
|
|
<div class="flex pt-20">
|
|
<div class="box">
|
|
<Title3 title="异常告警" />
|
|
<Line :width="370" :height="180" :data="abnormalData" :xAxisData="abnormalXAxisData" />
|
|
</div>
|
|
<div class="box">
|
|
<Title3 title="异常告警占比" />
|
|
<div class="flex">
|
|
<alarmRate :dataList="scenicSpotData.dataLists" />
|
|
<!-- <alarmList /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Title1 title="交通信息" />
|
|
<div class="scenic">
|
|
<div
|
|
class="scenic-item"
|
|
v-for="(item, index) in trafficAbnormalityData.headList"
|
|
:key="index"
|
|
>
|
|
<span class="scenic-item__label">{{ item.name }}</span>
|
|
<countup class="scenic-item__value" :end-val="item.value" />
|
|
</div>
|
|
</div>
|
|
<div class="flex pt-20">
|
|
<div class="box">
|
|
<Title3 title="拥堵告警" />
|
|
<Line :width="370" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
|
|
</div>
|
|
<div class="box">
|
|
<Title3 title="拥堵告警占比" />
|
|
<div class="flex">
|
|
<alarmRate :dataList="trafficAbnormalityData.dataLists" />
|
|
<!-- <alarmList /> -->
|
|
</div>
|
|
</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 == '三峡之巅'"
|
|
class="map-img"
|
|
src="@/assets/images/sxzd.png"
|
|
alt=""
|
|
/>
|
|
</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"
|
|
v-for="(item, index) in monitoringPointData.headList"
|
|
:key="index"
|
|
>
|
|
<span class="monitor-statistics-item__label">{{ item.name }}</span>
|
|
<countup class="monitor-statistics-item__value" :end-val="item.value" />
|
|
</div>
|
|
</div>
|
|
<div class="bg">
|
|
<Title3 title="今日安全告警" />
|
|
<alarm-today :list="monitoringPointData.dataList" />
|
|
</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"
|
|
v-for="(item, index) in abnormalAlarmData.headList"
|
|
:key="index"
|
|
>
|
|
<span class="traffic-alarm-statistics-item__label">{{ item.name }}</span>
|
|
<countup class="traffic-alarm-statistics-item__value" :end-val="item.value" />
|
|
</div>
|
|
</div>
|
|
<div class="bg">
|
|
<Title3 title="异常告警占比" />
|
|
<div class="flex">
|
|
<!-- <alarmRate :dataList="[]" /> -->
|
|
<div class="none">无异常</div>
|
|
<!-- <alarmList /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</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'
|
|
|
|
const { isConnected, dataRes, sendMessage } = useWebSocket(
|
|
`${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/monitor`
|
|
)
|
|
|
|
// 景区id
|
|
let scenicSpotId = ref('')
|
|
// 交通信息
|
|
let trafficData = ref([
|
|
{ name: '总核心监控点位', type: 0, value: 0 },
|
|
{ name: '总核心分析点位', type: 1, value: 0 },
|
|
{ name: '总异常点位', type: 2, value: 0 }
|
|
])
|
|
// 景区信息
|
|
let scenicSpotData = ref({
|
|
dataList: [],
|
|
dataLists: []
|
|
})
|
|
// 交通告警信息
|
|
let trafficAbnormalityData = ref({
|
|
dataList: [],
|
|
dataLists: [],
|
|
headList: []
|
|
})
|
|
// 监控点位统计
|
|
let monitoringPointData = ref({
|
|
dataList: [],
|
|
headList: [
|
|
{ name: '监控点位', type: 0, value: 0 },
|
|
{ name: '核心点位', type: 0, value: 0 },
|
|
{ name: '异常点位', type: 1, value: 0 }
|
|
]
|
|
})
|
|
// 监控点位统计
|
|
let abnormalAlarmData = ref({
|
|
dataList: [],
|
|
headList: [
|
|
{ name: '当前告警总数', type: 0, value: 0 },
|
|
{ name: '安全告警总数', type: 0, value: 0 },
|
|
{ name: '已解除告警数', type: 1, value: 0 }
|
|
]
|
|
})
|
|
|
|
// 异常告警
|
|
let abnormalData = computed(() => {
|
|
return [{ data: scenicSpotData.value.dataList.map((item) => item.value) }]
|
|
})
|
|
let abnormalXAxisData = computed(() => {
|
|
return scenicSpotData.value.dataList.map((item) => item.name)
|
|
})
|
|
|
|
// 拥堵告警
|
|
let jamlData = computed(() => {
|
|
return [{ data: trafficAbnormalityData.value.dataList.map((item) => item.value) }]
|
|
})
|
|
let jamXAxisData = computed(() => {
|
|
return trafficAbnormalityData.value.dataList.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 'trafficData':
|
|
trafficData.value = val.headList
|
|
break
|
|
case 'scenicSpotData':
|
|
scenicSpotData.value = val
|
|
break
|
|
case 'trafficAbnormalityData':
|
|
trafficAbnormalityData.value = val
|
|
break
|
|
case 'monitoringPointLocation':
|
|
monitoringPointData.value = val
|
|
break
|
|
case 'abnormalAlarmData':
|
|
abnormalAlarmData.value = val
|
|
break
|
|
}
|
|
}
|
|
}
|
|
)
|
|
|
|
let monitorChange = null
|
|
|
|
onMounted(() => {
|
|
monitorChange = PubSub.subscribe('monitorChange', (msg, data) => {
|
|
scenicSpotId.value = data.scenicSpotId
|
|
sendMessage(
|
|
JSON.stringify({
|
|
action: 'start',
|
|
type: 'index',
|
|
scenicSpotId: data.scenicSpotId
|
|
})
|
|
)
|
|
})
|
|
})
|
|
onUnmounted(() => {
|
|
PubSub.unsubscribe(monitorChange)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.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(580);
|
|
background-color: #fff;
|
|
.map-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.monitor {
|
|
width: vw(405);
|
|
margin-right: vw(8);
|
|
&-statistics {
|
|
height: vh(70);
|
|
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(70);
|
|
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(142);
|
|
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-size: 100% 100%;
|
|
.scenic-item__value {
|
|
color: #f15a25;
|
|
}
|
|
}
|
|
&: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 {
|
|
width: vw(394);
|
|
height: vh(220);
|
|
background-image: url('@/assets/images/bg-3.png');
|
|
background-size: 100% 100%;
|
|
&:nth-child(1) {
|
|
margin-right: vw(10);
|
|
}
|
|
.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>
|