From d4589695926808151b8f7ead12580f7130f0c742 Mon Sep 17 00:00:00 2001 From: fanjia <3278303149@qq.com> Date: Thu, 16 Apr 2026 14:03:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RiskWarning/Dialog/impactPointDialog.vue | 93 +++++++------- .../Dialog/warningSituationDialog.vue | 114 +++++++++++++----- .../RiskWarning/component/ChongqingMap.vue | 50 ++++---- .../screen/src/views/RiskWarning/index.vue | 10 +- .../screen/src/views/RiskWarning/left.vue | 4 + 5 files changed, 169 insertions(+), 102 deletions(-) diff --git a/packages/screen/src/views/RiskWarning/Dialog/impactPointDialog.vue b/packages/screen/src/views/RiskWarning/Dialog/impactPointDialog.vue index 9906e33..0014b13 100644 --- a/packages/screen/src/views/RiskWarning/Dialog/impactPointDialog.vue +++ b/packages/screen/src/views/RiskWarning/Dialog/impactPointDialog.vue @@ -22,7 +22,7 @@
{ @@ -401,6 +401,7 @@ const loadBarChartData = async () => { }; const cardType = ref("0"); +const cardTypeVal = ref("路段"); // 根据 cardType 获取对应的表格列配置 const getColumnsByType = (type) => { @@ -417,11 +418,11 @@ const getColumnsByType = (type) => { // 根据 cardType 获取对应的 API 路径 const getApiUrlByType = (type) => { const urlMap = { - 0: "/snow-ops-platform/weather-warning/affected-object/bridge", - 1: "/snow-ops-platform/weather-warning/affected-object/slope", - 2: "/snow-ops-platform/weather-warning/affected-object/tunnel", - 3: "/snow-ops-platform/weather-warning/affected-object/project", - 4: "/snow-ops-platform/weather-warning/affected-object/road-section", + 桥梁: "/snow-ops-platform/weather-warning/affected-object/bridge", + 边坡: "/snow-ops-platform/weather-warning/affected-object/slope", + 隧道: "/snow-ops-platform/weather-warning/affected-object/tunnel", + 项目: "/snow-ops-platform/weather-warning/affected-object/project", + 路段: "/snow-ops-platform/weather-warning/affected-object/road-section", }; return ( urlMap[type] || "/snow-ops-platform/weather-warning/affected-object/bridge" @@ -429,9 +430,10 @@ const getApiUrlByType = (type) => { }; // 点击卡片切换 -const handleClick = (type) => { +const handleClick = (index, item) => { tableData.value = []; - cardType.value = type + ""; + cardType.value = index + ""; + cardTypeVal.value = item.type; // 切换表格列配置 tableColumns.value = getColumnsByType(cardType.value); // 重置分页并获取数据 @@ -507,15 +509,6 @@ const getTimeParams = () => { }; // 处理数据为统一格式 const processUnifiedData = (item, type) => { - // 根据类型获取影响点类型名称 - const typeMap = { - 0: "桥梁", - 1: "边坡", - 2: "隧道", - 3: "项目", - 4: "路段", - }; - // 获取等级样式类 const getLevelClass = (level) => { const levelMap = { @@ -551,7 +544,7 @@ const processUnifiedData = (item, type) => { item.ADMINISTRATIVE_REGION || "-", // 影响点类型 - pointType: typeMap[type] || "-", + pointType: impactData.value[type].type || "-", // 影响点位置（根据类型取不同字段） pointLocation: item.GL1_QLMC || @@ -604,7 +597,7 @@ const processUnifiedData = (item, type) => { }; // 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典） - if (type === "0") { + if (cardTypeVal.value === "桥梁") { return { ...baseData, // 影响区域 - 使用区县名称 @@ -645,7 +638,7 @@ const processUnifiedData = (item, type) => { } // 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典） - if (type === "2") { + if (cardTypeVal.value === "隧道") { return { ...baseData, // 影响区域 - 使用区县名称 @@ -686,7 +679,7 @@ const processUnifiedData = (item, type) => { } // 路段类型特殊处理（根据BASE_XJLD路线信息表字典） - if (type === "4") { + if (cardTypeVal.value === "路段") { return { ...baseData, // 影响区域 - 使用区县名称 @@ -725,7 +718,7 @@ const processUnifiedData = (item, type) => { } // 项目类型特殊处理（根据SQL字段映射） - if (type === "3") { + if (cardTypeVal.value === "项目") { return { ...baseData, // 影响区域 - 使用COUNTY字段 @@ -801,31 +794,41 @@ const fetchData = async () => { const timeParams = getTimeParams(); // 根据 cardType 获取对应的 API URL - const apiUrl = getApiUrlByType(cardType.value); + const apiUrl = getApiUrlByType(cardTypeVal.value); const res = await request({ url: apiUrl, method: "GET", params: timeParams, }); - - if (res.code === "00000" && res.data) { - // 处理返回数据 - const allData = res.data; - total.value = allData.length || 0; - - // 客户端分页：计算当前页的数据范围 - const startIndex = (currentPage.value - 1) * pageSize.value; - const endIndex = startIndex + pageSize.value; - const currentPageData = allData.slice(startIndex, endIndex); - - tableData.value = currentPageData.map((item, index) => ({ - ...processDataByType(item, cardType.value), - id: startIndex + index + 1, - })); + // 路段存在分页功能了，需要处理返回数据 + if (cardTypeVal.value == "路段") { + if (res.data) { + tableData.value = res.data.map((item, index) => ({ + ...processDataByType(item, cardType.value), + id: index + 1, + })); + total.value = res.total || 0; + } } else { - tableData.value = []; - total.value = 0; + if (res.code === "00000" && res.data) { + // 处理返回数据 + const allData = res.data; + total.value = allData.length || 0; + + // 客户端分页：计算当前页的数据范围 + const startIndex = (currentPage.value - 1) * pageSize.value; + const endIndex = startIndex + pageSize.value; + const currentPageData = allData.slice(startIndex, endIndex); + + tableData.value = currentPageData.map((item, index) => ({ + ...processDataByType(item, cardType.value), + id: startIndex + index + 1, + })); + } else { + tableData.value = []; + total.value = 0; + } } } catch (error) { console.error("获取影响点数据失败:", error); diff --git a/packages/screen/src/views/RiskWarning/Dialog/warningSituationDialog.vue b/packages/screen/src/views/RiskWarning/Dialog/warningSituationDialog.vue index c57fbe1..8454682 100644 --- a/packages/screen/src/views/RiskWarning/Dialog/warningSituationDialog.vue +++ b/packages/screen/src/views/RiskWarning/Dialog/warningSituationDialog.vue @@ -123,31 +123,36 @@ const props = defineProps({ type: Boolean, default: false, }, + warningitem: { + type: Object, + default: () => ({}), + }, }); const emit = defineEmits(["update:visible", "close", "impactClick"]); -// 初始化日期范围（当月） -const getDefaultDateRange = () => { - const now = new Date(); - const start = new Date(now.getFullYear(), now.getMonth(), 1); - const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); - return [start, end]; -}; - // 日期范围器 -const dateRange = ref(getDefaultDateRange()); - +const dateRange = ref([]); onMounted(() => { - filterForm.value = { - riskLeve: "", - countyName: "", - isEnded: "", - dateRange: dateRange.value, - }; - fetchWarningData(); + // 如果弹窗初始就是打开状态，则初始化数据 + if (props.visible) { + initDialogData(); + } }); +// 监听 warningitem 变化，当弹窗重新打开时更新筛选条件 +watch( + () => props.warningitem, + (newVal) => { + console.log("warningitem 变化:", newVal); + if (newVal && Object.keys(newVal).length > 0) { + filterForm.value.riskLeve = newVal.label || ""; + currentPage.value = 1; + } + }, + { deep: true }, +); + // 监听注入的日期范围变化 watch( () => getdateRange.value, @@ -156,11 +161,9 @@ watch( if (newVal && newVal.length === 2) { dateRange.value = newVal; filterForm.value.dateRange = newVal; - // 重新获取数据 - fetchWarningData(); } }, - { deep: true, immediate: true }, + { deep: true }, ); // 筛选表单 @@ -230,7 +233,7 @@ const fetchWarningData = async () => { loading.value = true; try { const params = { - offset: currentPage.value, + offset: (currentPage.value - 1) * pageSize.value, limit: pageSize.value, start: "", end: "", @@ -335,31 +338,88 @@ const handleImpactClick = (item) => { // 分页操作 const handleSizeChange = (val) => { pageSize.value = val; + console.log("分页大小变化:", val); + currentPage.value = 1; fetchWarningData(); }; const handleCurrentChange = (val) => { + console.log("当前页码变化:", val); currentPage.value = val; fetchWarningData(); }; +// 初始化弹窗数据 +const initDialogData = () => { + // 设置日期范围 + if (getdateRange.value && getdateRange.value.length === 2) { + dateRange.value = getdateRange.value; + } + + // 如果有 warningitem 则设置筛选条件 + if (props.warningitem && Object.keys(props.warningitem).length > 0) { + filterForm.value = { + riskLeve: props.warningitem.label || "", + countyName: props.warningitem.countyName || "", + isEnded: "", + dateRange: dateRange.value, + }; + } else { + filterForm.value = { + riskLeve: "", + countyName: "", + isEnded: "", + dateRange: dateRange.value, + }; + } + + // 重置页码并获取数据 + currentPage.value = 1; + console.log("初始化筛选条件:", filterForm.value); + fetchWarningData(); +}; + +// 重置数据 +const resetData = () => { + // 清空表格数据 + tableData.value = []; + total.value = 0; + currentPage.value = 1; + // 清空筛选条件 + filterForm.value = { + riskLeve: "", + countyName: "", + isEnded: "", + dateRange: [], + }; + // 清空日期范围 + dateRange.value = []; +}; + // 监听visible变化 watch( () => props.visible, (newVal) => { if (newVal) { - currentPage.value = 1; - fetchWarningData(); + // 弹窗打开时，初始化数据 + initDialogData(); + } else { + // 弹窗关闭时，清空页面数据 + resetData(); } }, ); -// 监听筛选条件变化 +// 监听筛选条件变化（手动修改时触发，初始化时不触发） watch( () => filterForm.value, - () => { - currentPage.value = 1; - fetchWarningData(); + (newVal, oldVal) => { + console.log("筛选条件变化:===========", newVal, oldVal); + // 只在旧值存在且不为空对象时触发（排除初始化情况） + if (oldVal && Object.keys(oldVal).length > 0) { + currentPage.value = 1; + fetchWarningData(); + } }, { deep: true }, ); diff --git a/packages/screen/src/views/RiskWarning/component/ChongqingMap.vue b/packages/screen/src/views/RiskWarning/component/ChongqingMap.vue index bd6f4cd..f4f29f0 100644 --- a/packages/screen/src/views/RiskWarning/component/ChongqingMap.vue +++ b/packages/screen/src/views/RiskWarning/component/ChongqingMap.vue @@ -230,7 +230,7 @@ const showCountyCardsOnMap = (dataList) => { // 调用处理函数 handleCenterCardItemClick(item); // 移动地图到该位置 - mapInstance.setView(center, 10); + // mapInstance.setView(center, 10); // 触发点击事件 emit("districtClick", { name: countyName, @@ -248,10 +248,10 @@ const showCountyCardsOnMap = (dataList) => { }); // 调整地图视角以显示所有卡片 - if (countyCardMarkers.length > 0) { - const group = new window.L.featureGroup(countyCardMarkers); - mapInstance.fitBounds(group.getBounds().pad(0.2)); - } + // if (countyCardMarkers.length > 0) { + // const group = new window.L.featureGroup(countyCardMarkers); + // mapInstance.fitBounds(group.getBounds().pad(0.2)); + // } }; // 获取公路类型文本 @@ -312,13 +312,13 @@ const getTimeParams = (type) => { let start = ""; let end = ""; if (props.dateRange && props.dateRange.length === 2) { - start = formatDateTime(props.dateRange[0]) || ""; - end = formatDateTime(props.dateRange[1]) || ""; + start = formatDateTime(props.dateRange[0]) || ""; + end = formatDateTime(props.dateRange[1]) || ""; } // 添加路段等级参数 - if(props.roadItem && type === "road"){ - // end = props.roadItem.endTime || ""; - } + // if(props.roadItem && type === "road"){ + // // end = props.roadItem.endTime || ""; + // } return { start: start, end: end, @@ -370,7 +370,7 @@ const getAffectedBridgeData = async () => { method: "GET", params: timeParams, }); - if (res.code === "00000" && res.data) { + if (res.data) { res.data.forEach((item) => { item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD]; if ( @@ -382,8 +382,7 @@ const getAffectedBridgeData = async () => { } }); } - // affectedBridgeData.value = res.data; - + console.log("受影响桥梁数据:", affectedBridgeData.value); addProjectMarkers(affectedBridgeData.value, bridgeIcon, "bridge"); } catch (error) { console.error("获取受影响桥梁数据失败:", error); @@ -391,8 +390,6 @@ const getAffectedBridgeData = async () => { } }; -const affectedTunnelData = ref([]); - const tunnelInfoDialogRef = ref(null); // 获取受影响隧道数据 const getAffectedTunnelData = async () => { @@ -403,7 +400,6 @@ const getAffectedTunnelData = async () => { method: "GET", params: timeParams, }); - console.log("受影响隧道数据:", res); if (res.code === "00000" && res.data) { res.data.forEach((item) => { item.COORDINATE_POINT = [ @@ -414,9 +410,7 @@ const getAffectedTunnelData = async () => { tunnelInfoDialogRef.value.push(item); } }); - // tunnelInfoDialogRef.value = res.data; - console.log("受影响隧道数据:", res.data); - + console.log("受影响隧道数据:", tunnelInfoDialogRef.value); addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, "tunnel"); } return []; @@ -426,9 +420,8 @@ const getAffectedTunnelData = async () => { } }; -const affectedProjectData = ref([]); - // 获取受影响项目数据 +const affectedProjectData = ref([]); const getAffectedProjectData = async () => { try { const timeParams = getTimeParams(); @@ -469,25 +462,24 @@ const getAffectedProjectData = async () => { } }; -const affectedRoadSectionData = ref([]); // 获取受影响路段数据 +const affectedRoadSectionData = ref([]); const getAffectedRoadSectionData = async () => { try { - const timeParams = getTimeParams(road); + const timeParams = getTimeParams(); const res = await request({ url: "/snow-ops-platform/weather-warning/affected-object/road-section", method: "GET", params: timeParams, }); console.log("受影响路段数据:", res); - if (res.code === "00000" && res.data) { + if (res.data) { res.data.forEach((item) => { item.COORDINATE_POINT = JSON.parse(item.STARTPOINT); }); affectedRoadSectionData.value = res.data; // 在地图上添加项目标记 - console.log("开始添加项目标记..."); - + console.log("受影响路段数据:", affectedRoadSectionData.value); addProjectMarkers(affectedRoadSectionData.value, tunnelLineIcon, "road"); } return []; @@ -568,8 +560,8 @@ const addProjectMarkers = (data, iconUrl, type = "project") => { return; } - // // 清除之前的标记 - // clearProjectMarkers(); + // 清除之前的标记 + clearProjectMarkers(); // 创建自定义图标 const projectIconObj = window.L.icon({ @@ -1171,7 +1163,7 @@ const locateToDistrict = (countyName) => { const center = bounds.getCenter(); // 移动地图到该中心点并放大 - mapInstance.setView(center, 10); + // mapInstance.setView(center, 10); // 高亮显示该区县 if (selectedLayer) { diff --git a/packages/screen/src/views/RiskWarning/index.vue b/packages/screen/src/views/RiskWarning/index.vue index 1d05b2b..1967cdf 100644 --- a/packages/screen/src/views/RiskWarning/index.vue +++ b/packages/screen/src/views/RiskWarning/index.vue @@ -35,6 +35,7 @@
@@ -212,6 +213,7 @@ { console.log("关闭弹窗", dialogName); dialogVisible.value[dialogName] = false; }; +// 处理气象预警点击 +const warningitem = ref({}); +const handleWarningClick = (item) => { + console.log("气象预警点击:", item); + warningitem.value = item; +}; // 确认对话框配置 const confirmConfig = ref({ diff --git a/packages/screen/src/views/RiskWarning/left.vue b/packages/screen/src/views/RiskWarning/left.vue index 4fc18cc..924e2ef 100644 --- a/packages/screen/src/views/RiskWarning/left.vue +++ b/packages/screen/src/views/RiskWarning/left.vue @@ -229,6 +229,7 @@ const emit = defineEmits([ "openDispatchDistrict", "openImpactDetail", "showCenterCard", + "warningClick", ]); // 点击统计项 @@ -244,7 +245,10 @@ const handleStatClick = (item) => { // 点击气象预警卡片 const handleWarningCardClick = (item) => { + console.log("item:", item); emit("openWarningSituation", item); + // 传递日期范围 + emit("warningClick", item); }; // 点击影响点明细