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>
      <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="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>
    <!-- <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" @click="handleAIClick" /> -->
  </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: () => ({}),
  },
});

watch(
  () => props.roadItem,
  newVal => {
    console.log('top.vue 收到路段信息:', newVal);
    // roadvalArr.value = newVal;
  }
);
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 = () => {
  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 => {
        data.forEach(d => {
          debugger;
          console.log(item.label, d.level);
          console.log(item.label.includes(d.level));
          if (item.label.includes(d.level)) {
            roadTotal += Number(d.count);
            item.value = Number(d.count);
          }
        });
      });
      roadStats.value[4].value = roadTotal;
      console.log(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>