169 lines
3.9 KiB
Vue
169 lines
3.9 KiB
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>
|
||
<!-- <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;
|
||
};
|
||
// 点击本轮
|
||
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");
|
||
};
|
||
</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>
|