<script setup>
|
import videoContent from "@/assets/images/video-content.jpeg";
|
import FlexBox from "@/components/FlexBox.vue";
|
import ChartBox from "@/components/chartBox.vue";
|
import {onMounted, ref} from "vue";
|
import HdwChart from "@/components/echarts/hdwChart.vue";
|
import getRosePieOption from "@/components/echarts/options/rosePie";
|
import DangerActBox from "@/components/dangerActBox.vue";
|
const rosePie = ref(null);
|
import dangerActModule from "@/views/user/js/dangerActModule";
|
const {dangerList, setLastAlarm} = dangerActModule();
|
|
import cameraAlarm from "@/views/user/js/cameraAlarm";
|
import getGradientLineOption from "@/components/echarts/options/gradientLine";
|
const alarmLine = ref(null);
|
const {
|
searchDriveAlarm,
|
searchLastAlarmList,
|
} = cameraAlarm();
|
|
const setAlarmLine = async ()=>{
|
let data = await searchDriveAlarm();
|
const alarmLineOption = getGradientLineOption();
|
alarmLineOption.series[0].name = "";
|
alarmLineOption.series[0].data = data.map(item=>{
|
return [item.date, item.num];
|
});
|
alarmLine.value.setOption(alarmLineOption);
|
}
|
|
const photo = ref(videoContent);
|
const dangerBoxClick = (data)=>{
|
photo.value = data.photo;
|
}
|
|
onMounted(()=>{
|
setAlarmLine();
|
setLastAlarm();
|
const rosePieOption = getRosePieOption();
|
rosePie.value.setOption(rosePieOption);
|
});
|
</script>
|
|
<template>
|
<div class="driving-box-wrapper">
|
<div class="content-wrapper left">
|
<div class="alarm-bar-wrapper">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box title="最新消息">
|
<div class="danger-act-container">
|
<div class="danger-act-container-absolute">
|
<danger-act-box
|
v-for="(item, key) in dangerList" :key="'key'+key"
|
@click="dangerBoxClick(item)"
|
:name="item.name" :time="item.time"
|
:icon="item.icon" :type="item.type"></danger-act-box>
|
</div>
|
</div>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
</div>
|
<div class="content-wrapper middle">
|
<div class="video-wrapper">
|
<flex-box>
|
<div class="position-relative">
|
<div class="position-absolute">
|
<img class="video-img" :src="photo" alt="">
|
</div>
|
</div>
|
</flex-box>
|
</div>
|
<div class="alarm-line-wrapper">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box title="近7天预警趋势">
|
<hdw-chart ref="alarmLine"></hdw-chart>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
</div>
|
<div class="content-wrapper right">
|
<div class="alarm-pie-wrapper">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box title="近7天违规行为统计">
|
<hdw-chart ref="rosePie"></hdw-chart>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
<div class="alarm-bar-wrapper">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box title="告警统计">
|
<div class="risk-act-wrapper">
|
<div class="risk-act-list">
|
<div class="risk-act-item">
|
<div class="risk-act-title">H</div>
|
<div class="risk-act-content">高风险行为<span class="risk-act-number danger">0</span></div>
|
</div>
|
<div class="risk-act-item">
|
<div class="risk-act-title">M</div>
|
<div class="risk-act-content">中风险行为<span class="risk-act-number warning">0</span></div>
|
</div>
|
<div class="risk-act-item">
|
<div class="risk-act-title">L</div>
|
<div class="risk-act-content">低风险行为<span class="risk-act-number">0</span></div>
|
</div>
|
</div>
|
</div>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
@warning-color: #fafa5c;
|
@danger-color: #ea4444;
|
.driving-box-wrapper {
|
display: flex;
|
height: 100%;
|
background: url("@/assets/images/dw_bg.jpg") no-repeat;
|
background-size: 100% 100%;
|
.content-wrapper {
|
height: 100%;
|
&.left {
|
width: 25%;
|
.alarm-bar-wrapper {
|
padding: 8px;
|
height: 100%;
|
}
|
.car-wrapper {
|
padding: 8px;
|
height: 30%;
|
}
|
}
|
&.middle {
|
flex: 1;
|
.video-wrapper {
|
padding: 8px;
|
height: 70%;
|
}
|
.alarm-line-wrapper {
|
padding: 8px;
|
height: 30%;
|
}
|
}
|
&.right {
|
width: 25%;
|
.alarm-pie-wrapper {
|
padding: 8px;
|
height: 50%;
|
}
|
.alarm-bar-wrapper {
|
padding: 8px;
|
height: 50%;
|
}
|
}
|
}
|
}
|
.flex-box-content {
|
height: 100%;
|
padding: 8px;
|
}
|
.car-content {
|
display: flex;
|
height: 100%;
|
.car-content-item {
|
height: 100%;
|
flex: 1;
|
}
|
}
|
.content-details-wrapper {
|
display: flex;
|
height: 100%;
|
justify-content: center;
|
align-items: center;
|
.content-details-content {
|
text-align: center;
|
color: #FFFFFF;
|
font-size: 24px;
|
font-weight: bold;
|
.car-number {
|
margin-bottom: 8px;
|
}
|
.car-grade {
|
color: #00FEFF;
|
}
|
}
|
}
|
.danger-act-container {
|
position: relative;
|
height: 100%;
|
.danger-act-container-absolute {
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
}
|
}
|
|
.risk-act-wrapper {
|
display: flex;
|
height: 100%;
|
justify-content: center;
|
align-items: center;
|
.risk-act-list {
|
.risk-act-item {
|
padding: 16px;
|
.risk-act-title {
|
position: relative;
|
display: inline-block;
|
font-size: 32px;
|
color: #FFFFFF;
|
width: 50px;
|
height: 50px;
|
line-height: 50px;
|
text-align: center;
|
background-color: #00FEFF;
|
border-radius: 50%;
|
.iconfont {
|
font-size: 32px;
|
}
|
}
|
.risk-act-content {
|
margin-left: 16px;
|
color: #FFFFFF;
|
letter-spacing: 4px;
|
display: inline-block;
|
.risk-act-number {
|
font-size: 24px;
|
margin-left: 8px;
|
&.danger {
|
color: @danger-color;
|
}
|
&.warning {
|
color: @warning-color;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.position-relative {
|
position: relative;
|
height: 100%;
|
.position-absolute {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
.video-img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
