diff --git a/packages/screen/src/assets/RiskWarning_img/区县弹窗背景@2x.png b/packages/screen/src/assets/RiskWarning_img/区县弹窗背景@2x.png new file mode 100644 index 0000000..2e8a618 Binary files /dev/null and b/packages/screen/src/assets/RiskWarning_img/区县弹窗背景@2x.png differ diff --git a/packages/screen/src/views/RiskWarning/Dialog/centerInfoCard.vue b/packages/screen/src/views/RiskWarning/Dialog/centerInfoCard.vue new file mode 100644 index 0000000..c3c18cc --- /dev/null +++ b/packages/screen/src/views/RiskWarning/Dialog/centerInfoCard.vue @@ -0,0 +1,232 @@ + + + + + diff --git a/packages/screen/src/views/RiskWarning/Dialog/clearanceSituationDialog.vue b/packages/screen/src/views/RiskWarning/Dialog/clearanceSituationDialog.vue index e7d8415..80a8d92 100644 --- a/packages/screen/src/views/RiskWarning/Dialog/clearanceSituationDialog.vue +++ b/packages/screen/src/views/RiskWarning/Dialog/clearanceSituationDialog.vue @@ -17,7 +17,13 @@
影响区域 - +
类型 - +
管控措施 - + - @@ -1110,4 +1352,27 @@ defineExpose({ padding: 15px; font-weight: 500; } + +// 区县卡片样式 +:deep(.county-card-icon) { + background: transparent !important; + border: none !important; + + .center-info-card-container { + width: 100%; + min-width: 150px; + } + + .center-info-card { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); + cursor: pointer; + transition: all 0.3s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(24, 144, 255, 0.5); + filter: brightness(1.1); + } + } +} diff --git a/packages/screen/src/views/RiskWarning/component/baseDialog.vue b/packages/screen/src/views/RiskWarning/component/baseDialog.vue index aad3c3c..8aa6c34 100644 --- a/packages/screen/src/views/RiskWarning/component/baseDialog.vue +++ b/packages/screen/src/views/RiskWarning/component/baseDialog.vue @@ -34,11 +34,11 @@
-
+
- @@ -26,7 +27,7 @@ import { Calendar } from "@element-plus/icons-vue"; const emit = defineEmits(["openAIResult", "dateRangeChange"]); // 注入兄弟组件通信机制 -const triggerRefreshLeftData = inject('triggerRefreshLeftData'); +const triggerRefreshLeftData = inject("triggerRefreshLeftData"); const dateRange = ref([]); @@ -39,24 +40,28 @@ const setEndOfDay = (date) => { }; // 监听 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]); +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); } - - // 触发兄弟组件刷新 - if (triggerRefreshLeftData) { - triggerRefreshLeftData(); - } - // 向父组件传递时间范围 - emit("dateRangeChange", newVal); - } -}, { deep: true }); + }, + { deep: true }, +); const handleAIClick = () => { emit("openAIResult"); @@ -89,6 +94,7 @@ const handleAIClick = () => { .filter-container { display: flex; align-items: center; + width: 100%; height: vw(20); min-height: 18px; gap: vw(8); @@ -154,65 +160,4 @@ const handleAIClick = () => { min-height: 48px; cursor: pointer; } -// 日期选择器下拉面板样式 -.dark-date-picker { - background: rgba(21, 41, 59, 0.95) !important; - border: 1px solid rgba(64, 169, 255, 0.3) !important; - - .el-picker-panel__content { - background: transparent; - } - - .el-date-table { - th { - color: rgba(255, 255, 255, 0.7); - } - - td { - color: rgba(255, 255, 255, 0.9); - - &.prev-month, - &.next-month { - color: rgba(255, 255, 255, 0.4); - } - - &:hover { - color: #40a9ff; - } - - &.current:not(.disabled) { - span { - background: #40a9ff; - } - } - - &.start-date, - &.end-date { - span { - background: #40a9ff; - } - } - - &.in-range { - background: rgba(64, 169, 255, 0.2); - } - } - } - - .el-picker-panel__icon-btn { - color: rgba(255, 255, 255, 0.7); - - &:hover { - color: #40a9ff; - } - } - - .el-date-picker__header-label { - color: rgba(255, 255, 255, 0.9); - - &:hover { - color: #40a9ff; - } - } -}