bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面参数细节

Browse Source
This commit is contained in:
fanjia 2026-04-16 14:03:39 +08:00
parent 09693b4a80
commit d458969592
5 changed files with 169 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
packages/screen/src/views/RiskWarning/Dialog/impactPointDialog.vue
View File

@ -22,7 +22,7 @@
<div <div
v-for="(item, index) in impactData" v-for="(item, index) in impactData"
:key="index" :key="index"
@click="handleClick(index)" @click="handleClick(index, item)"
class="stat-card" class="stat-card"
:style="{ :style="{
backgroundImage: `url(${cardType == index ? selectedIcon : unselectedIcon})`, backgroundImage: `url(${cardType == index ? selectedIcon : unselectedIcon})`,
@ -350,11 +350,11 @@ const tableColumns = ref(bridgeColumns);
const tableData = ref([]); const tableData = ref([]);
// 影响点数据 // 影响点数据
const impactData = ref([ const impactData = ref([
{ name: "影响桥梁", count: 0, icon: Icon0 }, { name: "影响路段", count: 0, icon: Icon4, type: "路段" },
{ name: "影响边坡", count: 0, icon: Icon1 }, { name: "影响桥梁", count: 0, icon: Icon0, type: "桥梁" },
{ name: "影响隧道", count: 0, icon: Icon2 }, { name: "影响隧道", count: 0, icon: Icon2, type: "隧道" },
{ name: "影响项目", count: 0, icon: Icon3 }, { name: "影响边坡", count: 0, icon: Icon1, type: "边坡" },
{ name: "影响路段", count: 0, icon: Icon4 }, { name: "影响项目", count: 0, icon: Icon3, type: "项目" },
]); ]);
// 顶部卡片数据 // 顶部卡片数据
const loadBarChartData = async () => { const loadBarChartData = async () => {
@ -401,6 +401,7 @@ const loadBarChartData = async () => {
}; };
const cardType = ref("0"); const cardType = ref("0");
const cardTypeVal = ref("路段");
// 根据 cardType 获取对应的表格列配置 // 根据 cardType 获取对应的表格列配置
const getColumnsByType = (type) => { const getColumnsByType = (type) => {
@ -417,11 +418,11 @@ const getColumnsByType = (type) => {
// 根据 cardType 获取对应的 API 路径 // 根据 cardType 获取对应的 API 路径
const getApiUrlByType = (type) => { const getApiUrlByType = (type) => {
const urlMap = { const urlMap = {
0: "/snow-ops-platform/weather-warning/affected-object/bridge", 桥梁: "/snow-ops-platform/weather-warning/affected-object/bridge",
1: "/snow-ops-platform/weather-warning/affected-object/slope", 边坡: "/snow-ops-platform/weather-warning/affected-object/slope",
2: "/snow-ops-platform/weather-warning/affected-object/tunnel", 隧道: "/snow-ops-platform/weather-warning/affected-object/tunnel",
3: "/snow-ops-platform/weather-warning/affected-object/project", 项目: "/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/road-section",
}; };
return ( return (
urlMap[type] || "/snow-ops-platform/weather-warning/affected-object/bridge" 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 = []; tableData.value = [];
cardType.value = type + ""; cardType.value = index + "";
cardTypeVal.value = item.type;
// 切换表格列配置 // 切换表格列配置
tableColumns.value = getColumnsByType(cardType.value); tableColumns.value = getColumnsByType(cardType.value);
// 重置分页并获取数据 // 重置分页并获取数据
@ -507,15 +509,6 @@ const getTimeParams = () => {
}; };
// 处理数据为统一格式 // 处理数据为统一格式
const processUnifiedData = (item, type) => { const processUnifiedData = (item, type) => {
// 根据类型获取影响点类型名称
const typeMap = {
0: "桥梁",
1: "边坡",
2: "隧道",
3: "项目",
4: "路段",
};
// 获取等级样式类 // 获取等级样式类
const getLevelClass = (level) => { const getLevelClass = (level) => {
const levelMap = { const levelMap = {
@ -551,7 +544,7 @@ const processUnifiedData = (item, type) => {
item.ADMINISTRATIVE_REGION || item.ADMINISTRATIVE_REGION ||
"-", "-",
// 影响点类型 // 影响点类型
pointType: typeMap[type] || "-", pointType: impactData.value[type].type || "-",
// 影响点位置（根据类型取不同字段） // 影响点位置（根据类型取不同字段）
pointLocation: pointLocation:
item.GL1_QLMC || item.GL1_QLMC ||
@ -604,7 +597,7 @@ const processUnifiedData = (item, type) => {
}; };
// 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典） // 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典）
if (type === "0") { if (cardTypeVal.value === "桥梁") {
return { return {
...baseData, ...baseData,
// 影响区域 - 使用区县名称 // 影响区域 - 使用区县名称
@ -645,7 +638,7 @@ const processUnifiedData = (item, type) => {
} }
// 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典） // 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典）
if (type === "2") { if (cardTypeVal.value === "隧道") {
return { return {
...baseData, ...baseData,
// 影响区域 - 使用区县名称 // 影响区域 - 使用区县名称
@ -686,7 +679,7 @@ const processUnifiedData = (item, type) => {
} }
// 路段类型特殊处理（根据BASE_XJLD路线信息表字典） // 路段类型特殊处理（根据BASE_XJLD路线信息表字典）
if (type === "4") { if (cardTypeVal.value === "路段") {
return { return {
...baseData, ...baseData,
// 影响区域 - 使用区县名称 // 影响区域 - 使用区县名称
@ -725,7 +718,7 @@ const processUnifiedData = (item, type) => {
} }
// 项目类型特殊处理（根据SQL字段映射） // 项目类型特殊处理（根据SQL字段映射）
if (type === "3") { if (cardTypeVal.value === "项目") {
return { return {
...baseData, ...baseData,
// 影响区域 - 使用COUNTY字段 // 影响区域 - 使用COUNTY字段
@ -801,31 +794,41 @@ const fetchData = async () => {
const timeParams = getTimeParams(); const timeParams = getTimeParams();
// 根据 cardType 获取对应的 API URL // 根据 cardType 获取对应的 API URL
const apiUrl = getApiUrlByType(cardType.value); const apiUrl = getApiUrlByType(cardTypeVal.value);
const res = await request({ const res = await request({
url: apiUrl, url: apiUrl,
method: "GET", method: "GET",
params: timeParams, params: timeParams,
}); });
// 路段存在分页功能了，需要处理返回数据
if (res.code === "00000" && res.data) { if (cardTypeVal.value == "路段") {
// 处理返回数据 if (res.data) {
const allData = res.data; tableData.value = res.data.map((item, index) => ({
total.value = allData.length || 0; ...processDataByType(item, cardType.value),
id: index + 1,
// 客户端分页：计算当前页的数据范围 }));
const startIndex = (currentPage.value - 1) * pageSize.value; total.value = res.total || 0;
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 { } else {
tableData.value = []; if (res.code === "00000" && res.data) {
total.value = 0; // 处理返回数据
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) { } catch (error) {
console.error("获取影响点数据失败:", error); console.error("获取影响点数据失败:", error);

114
packages/screen/src/views/RiskWarning/Dialog/warningSituationDialog.vue
View File

@ -123,31 +123,36 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
warningitem: {
type: Object,
default: () => ({}),
},
}); });
const emit = defineEmits(["update:visible", "close", "impactClick"]); 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(() => { onMounted(() => {
filterForm.value = { // 如果弹窗初始就是打开状态，则初始化数据
riskLeve: "", if (props.visible) {
countyName: "", initDialogData();
isEnded: "", }
dateRange: dateRange.value,
};
fetchWarningData();
}); });
// 监听 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( watch(
() => getdateRange.value, () => getdateRange.value,
@ -156,11 +161,9 @@ watch(
if (newVal && newVal.length === 2) { if (newVal && newVal.length === 2) {
dateRange.value = newVal; dateRange.value = newVal;
filterForm.value.dateRange = newVal; filterForm.value.dateRange = newVal;
// 重新获取数据
fetchWarningData();
} }
}, },
{ deep: true, immediate: true }, { deep: true },
); );
// 筛选表单 // 筛选表单
@ -230,7 +233,7 @@ const fetchWarningData = async () => {
loading.value = true; loading.value = true;
try { try {
const params = { const params = {
offset: currentPage.value, offset: (currentPage.value - 1) * pageSize.value,
limit: pageSize.value, limit: pageSize.value,
start: "", start: "",
end: "", end: "",
@ -335,31 +338,88 @@ const handleImpactClick = (item) => {
// 分页操作 // 分页操作
const handleSizeChange = (val) => { const handleSizeChange = (val) => {
pageSize.value = val; pageSize.value = val;
console.log("分页大小变化:", val);
currentPage.value = 1;
fetchWarningData(); fetchWarningData();
}; };
const handleCurrentChange = (val) => { const handleCurrentChange = (val) => {
console.log("当前页码变化:", val);
currentPage.value = val; currentPage.value = val;
fetchWarningData(); 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变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { (newVal) => {
if (newVal) { if (newVal) {
currentPage.value = 1; // 弹窗打开时，初始化数据
fetchWarningData(); initDialogData();
} else {
// 弹窗关闭时，清空页面数据
resetData();
} }
}, },
); );
// 监听筛选条件变化 // 监听筛选条件变化（手动修改时触发，初始化时不触发）
watch( watch(
() => filterForm.value, () => filterForm.value,
() => { (newVal, oldVal) => {
currentPage.value = 1; console.log("筛选条件变化:===========", newVal, oldVal);
fetchWarningData(); // 只在旧值存在且不为空对象时触发（排除初始化情况）
if (oldVal && Object.keys(oldVal).length > 0) {
currentPage.value = 1;
fetchWarningData();
}
}, },
{ deep: true }, { deep: true },
); );

50
packages/screen/src/views/RiskWarning/component/ChongqingMap.vue
View File

@ -230,7 +230,7 @@ const showCountyCardsOnMap = (dataList) => {
// 调用处理函数 // 调用处理函数
handleCenterCardItemClick(item); handleCenterCardItemClick(item);
// 移动地图到该位置 // 移动地图到该位置
mapInstance.setView(center, 10); // mapInstance.setView(center, 10);
// 触发点击事件 // 触发点击事件
emit("districtClick", { emit("districtClick", {
name: countyName, name: countyName,
@ -248,10 +248,10 @@ const showCountyCardsOnMap = (dataList) => {
}); });
// 调整地图视角以显示所有卡片 // 调整地图视角以显示所有卡片
if (countyCardMarkers.length > 0) { // if (countyCardMarkers.length > 0) {
const group = new window.L.featureGroup(countyCardMarkers); // const group = new window.L.featureGroup(countyCardMarkers);
mapInstance.fitBounds(group.getBounds().pad(0.2)); // mapInstance.fitBounds(group.getBounds().pad(0.2));
} // }
}; };
// 获取公路类型文本 // 获取公路类型文本
@ -312,13 +312,13 @@ const getTimeParams = (type) => {
let start = ""; let start = "";
let end = ""; let end = "";
if (props.dateRange && props.dateRange.length === 2) { if (props.dateRange && props.dateRange.length === 2) {
start = formatDateTime(props.dateRange[0]) || ""; start = formatDateTime(props.dateRange[0]) || "";
end = formatDateTime(props.dateRange[1]) || ""; end = formatDateTime(props.dateRange[1]) || "";
} }
// 添加路段等级参数 // 添加路段等级参数
if(props.roadItem && type === "road"){ // if(props.roadItem && type === "road"){
// end = props.roadItem.endTime || ""; // // end = props.roadItem.endTime || "";
} // }
return { return {
start: start, start: start,
end: end, end: end,
@ -370,7 +370,7 @@ const getAffectedBridgeData = async () => {
method: "GET", method: "GET",
params: timeParams, params: timeParams,
}); });
if (res.code === "00000" && res.data) { if (res.data) {
res.data.forEach((item) => { res.data.forEach((item) => {
item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD]; item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD];
if ( if (
@ -382,8 +382,7 @@ const getAffectedBridgeData = async () => {
} }
}); });
} }
// affectedBridgeData.value = res.data; console.log("受影响桥梁数据:", affectedBridgeData.value);
addProjectMarkers(affectedBridgeData.value, bridgeIcon, "bridge"); addProjectMarkers(affectedBridgeData.value, bridgeIcon, "bridge");
} catch (error) { } catch (error) {
console.error("获取受影响桥梁数据失败:", error); console.error("获取受影响桥梁数据失败:", error);
@ -391,8 +390,6 @@ const getAffectedBridgeData = async () => {
} }
}; };
const affectedTunnelData = ref([]);
const tunnelInfoDialogRef = ref(null); const tunnelInfoDialogRef = ref(null);
// 获取受影响隧道数据 // 获取受影响隧道数据
const getAffectedTunnelData = async () => { const getAffectedTunnelData = async () => {
@ -403,7 +400,6 @@ const getAffectedTunnelData = async () => {
method: "GET", method: "GET",
params: timeParams, params: timeParams,
}); });
console.log("受影响隧道数据:", res);
if (res.code === "00000" && res.data) { if (res.code === "00000" && res.data) {
res.data.forEach((item) => { res.data.forEach((item) => {
item.COORDINATE_POINT = [ item.COORDINATE_POINT = [
@ -414,9 +410,7 @@ const getAffectedTunnelData = async () => {
tunnelInfoDialogRef.value.push(item); tunnelInfoDialogRef.value.push(item);
} }
}); });
// tunnelInfoDialogRef.value = res.data; console.log("受影响隧道数据:", tunnelInfoDialogRef.value);
console.log("受影响隧道数据:", res.data);
addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, "tunnel"); addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, "tunnel");
} }
return []; return [];
@ -426,9 +420,8 @@ const getAffectedTunnelData = async () => {
} }
}; };
const affectedProjectData = ref([]);
// 获取受影响项目数据 // 获取受影响项目数据
const affectedProjectData = ref([]);
const getAffectedProjectData = async () => { const getAffectedProjectData = async () => {
try { try {
const timeParams = getTimeParams(); const timeParams = getTimeParams();
@ -469,25 +462,24 @@ const getAffectedProjectData = async () => {
} }
}; };
const affectedRoadSectionData = ref([]);
// 获取受影响路段数据 // 获取受影响路段数据
const affectedRoadSectionData = ref([]);
const getAffectedRoadSectionData = async () => { const getAffectedRoadSectionData = async () => {
try { try {
const timeParams = getTimeParams(road); const timeParams = getTimeParams();
const res = await request({ const res = await request({
url: "/snow-ops-platform/weather-warning/affected-object/road-section", url: "/snow-ops-platform/weather-warning/affected-object/road-section",
method: "GET", method: "GET",
params: timeParams, params: timeParams,
}); });
console.log("受影响路段数据:", res); console.log("受影响路段数据:", res);
if (res.code === "00000" && res.data) { if (res.data) {
res.data.forEach((item) => { res.data.forEach((item) => {
item.COORDINATE_POINT = JSON.parse(item.STARTPOINT); item.COORDINATE_POINT = JSON.parse(item.STARTPOINT);
}); });
affectedRoadSectionData.value = res.data; affectedRoadSectionData.value = res.data;
// 在地图上添加项目标记 // 在地图上添加项目标记
console.log("开始添加项目标记..."); console.log("受影响路段数据:", affectedRoadSectionData.value);
addProjectMarkers(affectedRoadSectionData.value, tunnelLineIcon, "road"); addProjectMarkers(affectedRoadSectionData.value, tunnelLineIcon, "road");
} }
return []; return [];
@ -568,8 +560,8 @@ const addProjectMarkers = (data, iconUrl, type = "project") => {
return; return;
} }
// // 清除之前的标记 // 清除之前的标记
// clearProjectMarkers(); clearProjectMarkers();
// 创建自定义图标 // 创建自定义图标
const projectIconObj = window.L.icon({ const projectIconObj = window.L.icon({
@ -1171,7 +1163,7 @@ const locateToDistrict = (countyName) => {
const center = bounds.getCenter(); const center = bounds.getCenter();
// 移动地图到该中心点并放大 // 移动地图到该中心点并放大
mapInstance.setView(center, 10); // mapInstance.setView(center, 10);
// 高亮显示该区县 // 高亮显示该区县
if (selectedLayer) { if (selectedLayer) {

10
packages/screen/src/views/RiskWarning/index.vue
View File

@ -35,6 +35,7 @@
<div class="left"> <div class="left">
<left <left
:dateRange="getdateRange" :dateRange="getdateRange"
@warningClick="handleWarningClick"
@openImpactDetail="openDialog('impactPoint')" @openImpactDetail="openDialog('impactPoint')"
@openWarningInfo="openDialog('warningInfo')" @openWarningInfo="openDialog('warningInfo')"
@openImpactPoint="openDialog('impactPoint')" @openImpactPoint="openDialog('impactPoint')"
@ -61,7 +62,7 @@
ref="chongqingMapRef" ref="chongqingMapRef"
:activeitem="activeitem" :activeitem="activeitem"
:dateRange="getdateRange" :dateRange="getdateRange"
:roadItem="roadItem" :roadItem="roadItem"
@districtClick="handleDistrictClick" @districtClick="handleDistrictClick"
/> />
</div> </div>
@ -212,6 +213,7 @@
<!-- 预警情况对话框 --> <!-- 预警情况对话框 -->
<warningSituationDialog <warningSituationDialog
v-model:visible="dialogVisible.warningSituation" v-model:visible="dialogVisible.warningSituation"
:warningitem="warningitem"
@close="closeDialog('warningSituation')" @close="closeDialog('warningSituation')"
@impactClick="openDialog('impactPoint')" @impactClick="openDialog('impactPoint')"
@impactClickItem="handleImpactClickItem" @impactClickItem="handleImpactClickItem"
@ -356,6 +358,12 @@ const closeDialog = (dialogName) => {
console.log("关闭弹窗", dialogName); console.log("关闭弹窗", dialogName);
dialogVisible.value[dialogName] = false; dialogVisible.value[dialogName] = false;
}; };
// 处理气象预警点击
const warningitem = ref({});
const handleWarningClick = (item) => {
console.log("气象预警点击:", item);
warningitem.value = item;
};
// 确认对话框配置 // 确认对话框配置
const confirmConfig = ref({ const confirmConfig = ref({

4
packages/screen/src/views/RiskWarning/left.vue
View File

@ -229,6 +229,7 @@ const emit = defineEmits([
"openDispatchDistrict", "openDispatchDistrict",
"openImpactDetail", "openImpactDetail",
"showCenterCard", "showCenterCard",
"warningClick",
]); ]);
// 点击统计项 // 点击统计项
@ -244,7 +245,10 @@ const handleStatClick = (item) => {
// 点击气象预警卡片 // 点击气象预警卡片
const handleWarningCardClick = (item) => { const handleWarningCardClick = (item) => {
console.log("item:", item);
emit("openWarningSituation", item); emit("openWarningSituation", item);
// 传递日期范围
emit("warningClick", item);
}; };
// 点击影响点明细 // 点击影响点明细