407 lines
11 KiB
Vue
407 lines
11 KiB
Vue
<template>
|
||
<div class="filter-header">
|
||
<div class="filter-container">
|
||
<!-- <span class="filter-item active" @click="handleDateRangeClick()">本轮</span> -->
|
||
<span class="filter-item active" @click="handleDateRangeClick('total')">累计</span>
|
||
<span class="filter-item active" @click="handleDateRangeClick('today')">今日</span>
|
||
<div class="date-range-wrapper">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
size="small"
|
||
popper-class="custom-date-picker"
|
||
:teleported="false"
|
||
:prefix-icon="Calendar"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="hazard-stats" v-if="showHazardPopup">
|
||
<div v-for="(item, index) in hazardStatsShowArr" :key="index" class="stat-item" :class="item.class">
|
||
<span class="stat-label">{{ item.label }}</span>
|
||
<span class="stat-value-container display ai_center">
|
||
<span class="stat-value">{{ item.value }}</span>
|
||
<span class="stat-unit">个</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="road-stats" v-if="showRoadStats && roadStats.length > 0">
|
||
<div v-for="(item, index) in roadStats" :key="index" class="stat-item">
|
||
<span class="stat-label">{{ item.label }}</span>
|
||
<span class="stat-value-container display ai_center">
|
||
<span class="stat-value">{{ item.value }}</span>
|
||
<span class="stat-unit">个</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, inject, defineProps, nextTick, provide, onMounted } from 'vue'
|
||
import { Calendar } from '@element-plus/icons-vue'
|
||
import { request } from '@/utils/request'
|
||
|
||
const props = defineProps({
|
||
riskPointStats: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
showHazardPopup: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
roadvalArrtrue: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
roadItem: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
showRoadStats: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
})
|
||
watch(
|
||
() => props.showHazardPopup,
|
||
(newShow) => {
|
||
hazardStatsShowArr.value = JSON.parse(JSON.stringify([]))
|
||
hazardStats.value.forEach((item) => {
|
||
item.value = 0
|
||
item.show = false
|
||
})
|
||
},
|
||
)
|
||
|
||
const emit = defineEmits(['openAIResult', 'dateRangeChange'])
|
||
|
||
// 注入兄弟组件通信机制
|
||
const triggerRefreshLeftData = inject('triggerRefreshLeftData')
|
||
const dateRange = ref([])
|
||
|
||
// 隐患点统计数据
|
||
const hazardStatsShowArr = ref([])
|
||
const hazardStats = ref([
|
||
{ label: '重大路内隐患点', value: 0, show: false, type: '重大路内隐患点', isWithinRedLine: '是' },
|
||
{ label: '重大路外隐患点', value: 0, show: false, type: '重大路外隐患点', isWithinRedLine: '否' },
|
||
{ label: '较大路内隐患点', value: 0, show: false, type: '较大路内隐患点', isWithinRedLine: '是' },
|
||
{ label: '较大路外隐患点', value: 0, show: false, type: '较大路外隐患点', isWithinRedLine: '否' },
|
||
{ label: '一般路内隐患点', value: 0, show: false, type: '一般路内隐患点', isWithinRedLine: '是' },
|
||
{ label: '一般路外隐患点', value: 0, show: false, type: '一般路外隐患点', isWithinRedLine: '否' },
|
||
{ label: '风险点总数', value: 0, show: false, type: '风险点总数', isWithinRedLine: '' },
|
||
])
|
||
|
||
// 路段统计数据
|
||
const roadStats = ref([
|
||
{ label: '高风险路段', value: 0, type: '高风险路段' },
|
||
{ label: '较高风险路段', value: 0, type: '较高风险路段' },
|
||
{ label: '中风险路段', value: 0, type: '中风险路段' },
|
||
{ label: '低风险路段', value: 0, type: '低风险路段' },
|
||
{ label: '风险点总数', value: 0, type: '风险点总数' },
|
||
])
|
||
|
||
watch(
|
||
() => props.riskPointStats,
|
||
(newStats) => {
|
||
console.log('top.vue 收到风险点统计数据:', newStats)
|
||
if (newStats) {
|
||
hazardStatsShowArr.value = []
|
||
hazardStats.value.forEach((item) => {
|
||
if (item.label.includes(newStats.riskLevel) && newStats.isWithinRedLine == item.isWithinRedLine && newStats.value >= 0) {
|
||
item.value = newStats.value
|
||
item.show = true
|
||
}
|
||
if (item.show) {
|
||
hazardStatsShowArr.value.push(item)
|
||
hazardStats.value[6].show = true
|
||
}
|
||
})
|
||
|
||
hazardStats.value[6].value =
|
||
hazardStats.value[0].value +
|
||
hazardStats.value[1].value +
|
||
hazardStats.value[2].value +
|
||
hazardStats.value[3].value +
|
||
hazardStats.value[4].value +
|
||
hazardStats.value[5].value
|
||
}
|
||
},
|
||
{ immediate: true, deep: true },
|
||
)
|
||
|
||
// 设置日期时间为当天的23:59:59
|
||
const setEndOfDay = (date) => {
|
||
if (!date) return date
|
||
const d = new Date(date)
|
||
d.setHours(23, 59, 59, 999)
|
||
return d
|
||
}
|
||
// 点击本轮
|
||
const handleDateRangeClick = (type) => {
|
||
const now = new Date()
|
||
if (type === 'total') {
|
||
// 今年1月1号 00:00:00 到今年年底 23:59:59
|
||
const startOfYear = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0)
|
||
const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999)
|
||
dateRange.value = [startOfYear, endOfYear]
|
||
} else if (type === 'today') {
|
||
// 今天 00:00:00 到 23:59:59
|
||
const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0)
|
||
const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999)
|
||
dateRange.value = [startOfDay, endOfDay]
|
||
} else {
|
||
dateRange.value = []
|
||
}
|
||
// triggerRefreshLeftData();
|
||
// 不需要手动 emit，watch 会监听 dateRange 变化并自动 emit
|
||
}
|
||
// 监听 dateRange 变化
|
||
watch(
|
||
dateRange,
|
||
(newVal, oldVal) => {
|
||
// 只有当值真正发生变化时才触发
|
||
console.log('dateRange 变化:', newVal, oldVal)
|
||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||
console.log('dateRange 发生变化:', newVal)
|
||
// 如果有结束日期，将其设置为当天的23:59:59
|
||
if (newVal && newVal.length === 2 && newVal[1]) {
|
||
newVal[1] = setEndOfDay(newVal[1])
|
||
}
|
||
// 触发兄弟组件刷新
|
||
// if (triggerRefreshLeftData) {
|
||
// triggerRefreshLeftData();
|
||
// }
|
||
// 向父组件传递时间范围
|
||
emit('dateRangeChange', newVal)
|
||
}
|
||
},
|
||
{ deep: true },
|
||
)
|
||
|
||
const handleAIClick = () => {
|
||
emit('openAIResult')
|
||
}
|
||
|
||
// 获取风险等级统计数据
|
||
const fetchRiskLevelCount = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: '/snow-ops-platform/risk-point/risk-level-count',
|
||
method: 'GET',
|
||
})
|
||
console.log('风险等级统计数据:', res)
|
||
if (res.code === '00000' && res.data) {
|
||
// 更新路段统计数据
|
||
const data = res.data
|
||
let roadTotal = 0
|
||
roadStats.value.forEach((item) => {
|
||
// 重置值为0
|
||
item.value = 0
|
||
// 查找匹配的数据
|
||
const matchedData = data.find((d) => item.label.includes(d.level))
|
||
if (matchedData) {
|
||
item.value = Number(matchedData.count)
|
||
roadTotal += Number(matchedData.count)
|
||
}
|
||
})
|
||
// 更新风险点总数
|
||
roadStats.value[4].value = roadTotal
|
||
console.log('更新后的roadStats:', roadStats.value)
|
||
}
|
||
} catch (error) {
|
||
console.error('获取风险等级统计数据失败:', error)
|
||
}
|
||
}
|
||
|
||
// 组件挂载时获取数据
|
||
onMounted(() => {
|
||
fetchRiskLevelCount()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||
// 基准宽度 1920px，使用 vw 单位实现自适应
|
||
@function vw($px) {
|
||
@return calc($px / 1920 * 100vw);
|
||
}
|
||
|
||
.filter-header {
|
||
padding: vw(10);
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
|
||
// 小屏幕适配
|
||
@media (max-width: 1366px) {
|
||
padding: 8px;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
padding: 6px;
|
||
}
|
||
}
|
||
|
||
.filter-container {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: vw(20);
|
||
min-height: 18px;
|
||
gap: vw(8);
|
||
font-size: vw(13);
|
||
margin-bottom: vw(20);
|
||
|
||
.filter-item {
|
||
color: #fff;
|
||
padding: vw(8) vw(8);
|
||
background: #183c67;
|
||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||
cursor: pointer;
|
||
|
||
// &:hover {
|
||
// border-color: rgba(64, 169, 255, 0.5);
|
||
// color: rgba(255, 255, 255, 0.8);
|
||
// }
|
||
|
||
// &.active {
|
||
// background: rgba(64, 169, 255, 0.2);
|
||
// color: #40a9ff;
|
||
// border-color: rgba(64, 169, 255, 0.5);
|
||
// }
|
||
}
|
||
|
||
.date-range-wrapper {
|
||
:deep(.el-date-editor) {
|
||
border-radius: 0px !important;
|
||
height: 2.6em !important;
|
||
}
|
||
:deep(.el-date-editor) {
|
||
width: 200px;
|
||
max-width: vw(350);
|
||
background: #183c67;
|
||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||
|
||
.el-range-input {
|
||
background: transparent;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
|
||
&::placeholder {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
}
|
||
|
||
.el-range-separator {
|
||
color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.el-icon {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
// &:hover {
|
||
// border-color: rgba(64, 169, 255, 0.5);
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
.filter-icon-ai {
|
||
width: vw(67);
|
||
height: vw(67);
|
||
min-width: 48px;
|
||
min-height: 48px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
// 隐患点统计样式
|
||
.hazard-stats {
|
||
width: min-content;
|
||
display: grid;
|
||
background: url('@/assets/RiskWarning_img/隐患点弹窗背景@2x.png') no-repeat top left;
|
||
background-size: 100% 100%;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
margin-bottom: vw(20);
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
// gap: vw(4);
|
||
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: vw(14);
|
||
padding: vw(8) vw(15);
|
||
// background: #0e365d;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
white-space: nowrap;
|
||
}
|
||
.stat-value-container {
|
||
padding: vw(4) vw(10);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #ff4d4f;
|
||
}
|
||
.stat-unit {
|
||
font-size: vw(14);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 路段统计样式
|
||
.road-stats {
|
||
padding: vw(10);
|
||
width: min-content;
|
||
display: grid;
|
||
background: url('@/assets/RiskWarning_img/隐患点弹窗背景@2x.png') no-repeat top left;
|
||
background-size: 100% 100%;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
margin-bottom: vw(20);
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: vw(4);
|
||
padding: 0 vw(10);
|
||
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.stat-value-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(2);
|
||
|
||
.stat-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.stat-unit {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|