bxztApp/packages/screen/src/views/RiskWarning/top.vue

<template>
  <div class="filter-header">
    <div class="filter-container">
      <span class="filter-item active">本轮</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>
    <!-- <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" @click="handleAIClick" /> -->
  </div>
</template>

<script setup>
import { ref, watch, inject } from "vue";
import { Calendar } from "@element-plus/icons-vue";

const emit = defineEmits(["openAIResult", "dateRangeChange"]);

// 注入兄弟组件通信机制
const triggerRefreshLeftData = inject("triggerRefreshLeftData");

const dateRange = ref([]);

// 设置日期时间为当天的23:59:59
const setEndOfDay = (date) => {
  if (!date) return date;
  const d = new Date(date);
  d.setHours(23, 59, 59, 999);
  return d;
};

// 监听 dateRange 变化
watch(
  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");
};
</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);

  .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;
}
</style>