bxztApp/packages/screen/src/views/RiskWarning/top.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>