lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善功能

Browse Source
This commit is contained in:
zjc
2025-01-20 04:09:56 +08:00
parent 46c737fb93
commit 65244492b4
40 changed files with 2303 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
src/views/monitor/components/box-1.vue
View File

@@ -1,149 +1,117 @@
<template>
<div class="box-1">
<Title1 title="交通信息" />
<div class="traffic">
<div class="traffic-item">
<span class="traffic-item__title">总核心监控点位</span>
<countup class="traffic-item__value--primary" end-val="895" />
<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>
<div class="traffic-item">
<span class="traffic-item__title">总核心监控点位</span>
<countup class="traffic-item__value--success" end-val="895" />
<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="traffic-item">
<span class="traffic-item__title">总核心监控点位</span>
<countup class="traffic-item__value--error" end-val="895" />
<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>
</div>
<Title1 title="景区信息" />
<div class="scenic">
<div class="scenic-item">
<span class="scenic-item__label">核心路段监控点位</span>
<countup class="scenic-item__value" end-val="895" />
<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="scenic-item">
<span class="scenic-item__label">核心景区分析点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">异常点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">异常告警</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">已处理</span>
<countup class="scenic-item__value" end-val="895" />
</div>
</div>
<div class="flex pt-20">
<div class="box">
<Title3 title="异常告警" />
<Line
:width="370"
:height="180"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
<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>
<div class="box">
<Title3 title="异常告警占比" />
<div class="flex">
<alarmRate :dataList="dataList" />
<alarmList />
<template v-if="scenicSpotId">
<div class="detection-top">
<img class="map-img" src="@/assets/images/map-img-1.jpg" />
</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>
</div>
<Title1 title="交通信息" />
<div class="scenic">
<div class="scenic-item">
<span class="scenic-item__label">核心路段监控点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">核心景区分析点位</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">拥堵路段</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">拥堵告警</span>
<countup class="scenic-item__value" end-val="895" />
</div>
<div class="scenic-item">
<span class="scenic-item__label">已处理</span>
<countup class="scenic-item__value" end-val="895" />
</div>
</div>
<div class="flex pt-20">
<div class="box">
<Title3 title="异常告警" />
<Line
:width="370"
:height="180"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
/>
</div>
<div class="box">
<Title3 title="异常告警占比" />
<div class="flex">
<alarmRate :dataList="dataList" />
<alarmList />
</div>
</div>
</div>
</template>
</div>
</template>
@@ -151,24 +119,239 @@
import countup from 'vue-countup-v3'
import alarmRate from './alarmRate'
import alarmList from './alarmList'
import alarmToday from './alarmToday'
const dataList = ref([
{
name: '云阳',
value: 20
},
{
name: '奉节',
value: 10
},
{
name: '巫山',
value: 70
}
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;