新增接口大屏管控

This commit is contained in:
fanjia 2026-04-17 17:23:51 +08:00
parent 9b9c852c52
commit 4e7d16f67f
9 changed files with 167 additions and 171 deletions

View File

@ -203,38 +203,17 @@ const statsCardsData = ref([
//
const tableColumns = ref([
{ prop: 'id', label: '序号', width: '50px' },
{ prop: 'pointType', label: '影响点类型', width: '80px' },
{ prop: 'pointLocation', label: '影响点位置', width: '150px' },
{
prop: 'pointLevel',
label: '影响点等级',
width: '90px',
slot: 'pointLevel',
},
{ prop: 'checkCount', label: '查次数', width: '60px' },
{
prop: 'trafficDept',
label: '交通主管部门负责人',
width: '120px',
slot: 'trafficDept',
},
{ prop: 'roadOrg', label: '公路机构责任人', width: '110px', slot: 'roadOrg' },
{
prop: 'maintenance',
label: '养护站负责人',
width: '110px',
slot: 'maintenance',
},
{ prop: 'roadKeeper', label: '护路员', width: '80px', slot: 'roadKeeper' },
// {
// prop: "responseStatus",
// label: "",
// width: "70px",
// slot: "responseStatus",
// },
{ prop: 'urgeTime', label: '最新催告时间', width: '110px', slot: 'urgeTime' },
{ prop: 'operation', label: '操作', width: '50px', slot: 'operation' },
{ prop: 'id', label: '序号', width: '' },
{ prop: 'pointType', label: '影响点类型', width: '' },
{ prop: 'pointLocation', label: '影响点位置', width: '' },
{ prop: 'pointLevel', label: '影响点等级', width: '', slot: 'pointLevel' },
{ prop: 'checkCount', label: '查次数', width: '' },
{ prop: 'trafficDept', label: '交通主管部门负责人', width: '', slot: 'trafficDept' },
{ prop: 'roadOrg', label: '公路机构责任人', width: '', slot: 'roadOrg' },
{ prop: 'maintenance', label: '养护站负责人', width: '', slot: 'maintenance' },
{ prop: 'roadKeeper', label: '护路员', width: '', slot: 'roadKeeper' },
{ prop: 'urgeTime', label: '最新催告时间', width: '', slot: 'urgeTime' },
{ prop: 'operation', label: '操作', width: '', slot: 'operation' },
]);
//
@ -290,8 +269,6 @@ const tableData = ref([
urgeTime: { date: '2026-03-28', time: '12:30:00' },
},
]);
tableData.value.push(...tableData.value);
tableData.value.push(...tableData.value);
//
const currentPage = ref(1);

View File

@ -90,33 +90,25 @@
<!-- 预警等级列插槽 -->
<template #riskLeve="{ row }">
<span :class="['warning-level-tag', getWarningClass(row.riskLeve)]">{{
row.riskLeve
}}</span>
<span :class="['warning-level-tag', getWarningClass(row.riskLeve)]">{{ row.riskLeve }}</span>
</template>
<!-- 影响点数量列插槽 -->
<template #impactCount="{ row }">
<span class="impact-count" @click="handleImpactClick(row)">{{
row.impactCount
}}</span>
<span class="impact-count" @click="handleImpactClick(row)">{{ row.impactCount }}</span>
</template>
</base-dialog>
</template>
<script setup>
import { ref, computed, watch, onMounted, inject } from "vue";
import { Close, Calendar } from "@element-plus/icons-vue";
import {
warningLevelOptions,
regionOptions,
isEndedOptions,
} from "../component/index.js";
import baseDialog from "../component/baseDialog.vue";
import { request } from "@/utils/request";
import { ref, computed, watch, onMounted, inject } from 'vue';
import { Close, Calendar } from '@element-plus/icons-vue';
import { warningLevelOptions, regionOptions, isEndedOptions } from '../component/index.js';
import baseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request';
//
const getdateRange = inject("getdateRange", ref([]));
const getdateRange = inject('getdateRange', ref([]));
const props = defineProps({
visible: {
@ -129,7 +121,7 @@ const props = defineProps({
},
});
const emit = defineEmits(["update:visible", "close", "impactClick"]);
const emit = defineEmits(['update:visible', 'close', 'impactClick']);
//
const dateRange = ref([]);
@ -143,39 +135,39 @@ onMounted(() => {
// warningitem
watch(
() => props.warningitem,
(newVal) => {
console.log("warningitem 变化:", newVal);
newVal => {
console.log('warningitem 变化:', newVal);
if (newVal && Object.keys(newVal).length > 0) {
filterForm.value.riskLeve = newVal.label || "";
filterForm.value.riskLeve = newVal.label || '';
currentPage.value = 1;
}
},
{ deep: true },
{ deep: true }
);
//
watch(
() => getdateRange.value,
(newVal) => {
console.log("warningSituationDialog.vue 日期范围变化:", newVal);
newVal => {
console.log('warningSituationDialog.vue 日期范围变化:', newVal);
if (newVal && newVal.length === 2) {
dateRange.value = newVal;
filterForm.value.dateRange = newVal;
}
},
{ deep: true },
{ deep: true }
);
//
const filterForm = ref({
riskLeve: "",
countyName: "",
isEnded: "",
riskLeve: '',
countyName: '',
isEnded: '',
dateRange: dateRange.value,
});
//
const handleDateChange = (val) => {
const handleDateChange = val => {
filterForm.value.dateRange = val;
};
@ -193,28 +185,14 @@ const tableHeight = ref(300);
//
const tableColumns = ref([
{ prop: "index", label: "序号", width: "" },
{
prop: "riskLeve",
label: "预警等级",
width: "",
slot: "riskLeve",
},
{
label: "来源",
prop: "source",
width: "",
},
{ prop: "weatherType", label: "气象类型", width: "" },
{ prop: "countyName", label: "行政区域", width: "" },
{ prop: "warningTime", label: "生效时间", width: "" },
{ prop: "endTime", label: "失效时间", width: "" },
{
prop: "impactCount",
label: "影响点数量",
width: "",
slot: "impactCount",
},
{ prop: 'index', label: '序号', width: '' },
{ prop: 'riskLeve', label: '预警等级', width: '', slot: 'riskLeve' },
{ label: '来源', prop: 'source', width: '' },
{ prop: 'weatherType', label: '气象类型', width: '' },
{ prop: 'countyName', label: '影响区域', width: '' },
{ prop: 'warningTime', label: '生效时间', width: '' },
{ prop: 'endTime', label: '失效时间', width: '' },
{ prop: 'impactCount', label: '影响点数量', width: '', slot: 'impactCount' },
]);
//
@ -235,12 +213,12 @@ const fetchWarningData = async () => {
const params = {
offset: (currentPage.value - 1) * pageSize.value,
limit: pageSize.value,
start: "",
end: "",
riskLevel: "",
weatherType: "",
isExpire: "",
countyName: "",
start: '',
end: '',
riskLevel: '',
weatherType: '',
isExpire: '',
countyName: '',
};
//
@ -250,10 +228,7 @@ const fetchWarningData = async () => {
if (filterForm.value.countyName) {
params.countyName = filterForm.value.countyName;
}
if (
filterForm.value.isEnded !== undefined &&
filterForm.value.isEnded !== ""
) {
if (filterForm.value.isEnded !== undefined && filterForm.value.isEnded !== '') {
params.isExpire = filterForm.value.isEnded;
}
if (filterForm.value.dateRange && filterForm.value.dateRange.length === 2) {
@ -262,24 +237,24 @@ const fetchWarningData = async () => {
}
const res = await request({
url: "/snow-ops-platform/weather-warning/affected-count/_by_weather",
method: "GET",
url: '/snow-ops-platform/weather-warning/affected-count/_by_weather',
method: 'GET',
params,
});
if (res.code === "00000" && res.data) {
if (res.code === '00000' && res.data) {
//
const list = res.data.data || res.data.records || [];
total.value = res.data.total || 0;
tableData.value = list.map((item, index) => ({
index: index + 1,
riskLeve: item.riskLeve || "-",
weatherType: item.weatherType || "-",
countyName: item.countyName || "-",
source: item.source || "-",
warningTime: item.startTime || "-",
endTime: item.endTime || "-",
riskLeve: item.riskLeve || '-',
weatherType: item.weatherType || '-',
countyName: item.countyName || '-',
source: item.source || '-',
warningTime: item.startTime || '-',
endTime: item.endTime || '-',
impactCount: item.affectedCount || 0,
}));
} else {
@ -287,7 +262,7 @@ const fetchWarningData = async () => {
total.value = 0;
}
} catch (error) {
console.error("获取预警数据失败:", error);
console.error('获取预警数据失败:', error);
tableData.value = [];
total.value = 0;
} finally {
@ -296,55 +271,55 @@ const fetchWarningData = async () => {
};
//
const formatDateTime = (date) => {
if (!date) return "";
const formatDateTime = date => {
if (!date) return '';
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
const hours = String(d.getHours()).padStart(2, "0");
const minutes = String(d.getMinutes()).padStart(2, "0");
const seconds = String(d.getSeconds()).padStart(2, "0");
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const hours = String(d.getHours()).padStart(2, '0');
const minutes = String(d.getMinutes()).padStart(2, '0');
const seconds = String(d.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
//
const getWarningClass = (level) => {
const getWarningClass = level => {
const classMap = {
红色预警: "warning-red",
橙色预警: "warning-orange",
黄色预警: "warning-yellow",
蓝色预警: "warning-blue",
红色预警: 'warning-red',
橙色预警: 'warning-orange',
黄色预警: 'warning-yellow',
蓝色预警: 'warning-blue',
};
return classMap[level] || "";
return classMap[level] || '';
};
//
const handleClose = () => {
emit("update:visible", false);
emit("close");
emit('update:visible', false);
emit('close');
};
//
const handleImpactClick = (item) => {
emit("impactClick", item);
emit("impactClickItem", {
const handleImpactClick = item => {
emit('impactClick', item);
emit('impactClickItem', {
...item,
dateRange: filterForm.value.dateRange || [],
riskLeve: filterForm.value.riskLeve || "",
riskLeve: filterForm.value.riskLeve || '',
});
};
//
const handleSizeChange = (val) => {
const handleSizeChange = val => {
pageSize.value = val;
console.log("分页大小变化:", val);
console.log('分页大小变化:', val);
currentPage.value = 1;
fetchWarningData();
};
const handleCurrentChange = (val) => {
console.log("当前页码变化:", val);
const handleCurrentChange = val => {
console.log('当前页码变化:', val);
currentPage.value = val;
fetchWarningData();
};
@ -359,23 +334,23 @@ const initDialogData = () => {
// warningitem
if (props.warningitem && Object.keys(props.warningitem).length > 0) {
filterForm.value = {
riskLeve: props.warningitem.label || "",
countyName: props.warningitem.countyName || "",
isEnded: "",
riskLeve: props.warningitem.label || '',
countyName: props.warningitem.countyName || '',
isEnded: '',
dateRange: dateRange.value,
};
} else {
filterForm.value = {
riskLeve: "",
countyName: "",
isEnded: "",
riskLeve: '',
countyName: '',
isEnded: '',
dateRange: dateRange.value,
};
}
//
currentPage.value = 1;
console.log("初始化筛选条件:", filterForm.value);
console.log('初始化筛选条件:', filterForm.value);
fetchWarningData();
};
@ -387,9 +362,9 @@ const resetData = () => {
currentPage.value = 1;
//
filterForm.value = {
riskLeve: "",
countyName: "",
isEnded: "",
riskLeve: '',
countyName: '',
isEnded: '',
dateRange: [],
};
//
@ -399,7 +374,7 @@ const resetData = () => {
// visible
watch(
() => props.visible,
(newVal) => {
newVal => {
if (newVal) {
//
initDialogData();
@ -407,38 +382,38 @@ watch(
//
resetData();
}
},
}
);
//
watch(
() => filterForm.value,
(newVal, oldVal) => {
console.log("筛选条件变化:===========", newVal, oldVal);
console.log('筛选条件变化:===========', newVal, oldVal);
//
if (oldVal && Object.keys(oldVal).length > 0) {
currentPage.value = 1;
fetchWarningData();
}
},
{ deep: true },
{ deep: true }
);
// dateRange filterForm.dateRange
watch(
() => dateRange.value,
(newVal) => {
newVal => {
filterForm.value.dateRange = newVal;
},
{ deep: true },
{ deep: true }
);
watch(
() => filterForm.value.dateRange,
(newVal) => {
newVal => {
dateRange.value = newVal;
},
{ deep: true },
{ deep: true }
);
</script>

View File

@ -226,6 +226,8 @@ const handleClick = (item, index) => {
showHazardPopup.value = false;
showRoadPopup.value = false;
emit('showHazardPopupfn', false);
//
emit('hideRoadStats');
}
activeIndex.value = index;

View File

@ -9,13 +9,13 @@
<span class="error-text">{{ error }}</span>
<button class="retry-btn" @click="loadMapData">重试</button>
</div>
<TongnanCenterCardDialog
<!-- <TongnanCenterCardDialog
ref="tongnanCenterCardDialog"
:visible.sync="visible"
:value="value"
:z-index="zIndex"
:width="width"
></TongnanCenterCardDialog>
></TongnanCenterCardDialog> -->
<mapInfoDialog
v-model:visible="mapInfoDialogVisible"
:type="mapInfoDialogType"

View File

@ -364,7 +364,7 @@ defineExpose({
}
.table-container {
height: vw(200);
height: vw(130);
overflow: hidden;
:deep(.el-table) {
@ -440,6 +440,7 @@ defineExpose({
}
:deep(.el-table:not(.el-table--border) .el-table__cell) {
font-size: vw(14);
padding: 0;
}
:deep(.el-table .cell) {
font-size: vw(16);

View File

@ -73,6 +73,7 @@
@hazardItemClick="handleHazardItemClick"
@clearMapMarkers="clearMapMarkers"
@showHazardPopupfn="showHazardPopupfn"
@hideRoadStats="handleHideRoadStats"
></bottom>
</div>
<top
@ -350,6 +351,12 @@ const roadItemClick = item => {
showRoadStats.value = true;
};
//
const handleHideRoadStats = () => {
console.log('隐藏路段统计');
showRoadStats.value = false;
};
//
const handleHazardItemClick = item => {
console.log('点击隐患点:', item);

View File

@ -404,8 +404,24 @@ const districtLoadLoad = async () => {
if (res.code == "00000") {
const data = res.data;
if (data) {
//
const simplifyDistrictName = (name) => {
if (!name) return name;
return name
.replace("彭水苗族土家族自治县", "彭水县")
.replace("石柱土家族自治县", "石柱县")
.replace("秀山土家族苗族自治县", "秀山县")
.replace("酉阳土家族苗族自治县", "酉阳县");
};
//
const processedData = data.map((item) => ({
...item,
name: simplifyDistrictName(item.name),
}));
//
const sortedData = data.sort((a, b) => {
const sortedData = processedData.sort((a, b) => {
const totalA =
(a.roadSectionCount || 0) +
(a.bridgeCount || 0) +

View File

@ -548,11 +548,34 @@ const controlData1 = ref([
{ label: '限速(限车型)数', value: '24' },
{ label: '告警阻拦处数', value: '32' },
]);
const controlData2 = [
{ label: '停工项目数', value: '30' },
{ label: '关闭驻地数', value: '42' },
{ label: '转移撤离人员数', value: '58' },
];
const controlData2 = ref([
{ label: '停工项目数', value: '0', key: 'stoped_project_count' },
{ label: '关闭驻地数', value: '0', key: 'closed_site_count' },
{ label: '转移撤离人员数', value: '0', key: 'displaced_population' },
]);
//
const getAffectedCountByProject = async () => {
try {
const res = await request({
url: '/snow-ops-platform/weather-warning/affected-count/_by_project',
method: 'GET',
});
console.log('气象预警受影响统计:', res);
if (res.code === '00000' && res.data) {
const data = res.data;
// controlData2
controlData2.value.forEach(item => {
const matchedData = data.find(d => d.name === item.key);
if (matchedData) {
item.value = String(matchedData.count);
}
});
}
} catch (error) {
console.error('获取气象预警受影响统计失败:', error);
}
};
//
const patrolData = [
@ -618,6 +641,7 @@ const init = () => {
getControlStats();
getRescueInputStats();
getDisasterStats();
getAffectedCountByProject();
};
//

View File

@ -39,7 +39,6 @@
</span>
</div>
</div>
<!-- <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" @click="handleAIClick" /> -->
</div>
</template>
@ -70,14 +69,6 @@ const props = defineProps({
default: false,
},
});
watch(
() => props.roadItem,
newVal => {
console.log('top.vue 收到路段信息:', newVal);
// roadvalArr.value = newVal;
}
);
watch(
() => props.showHazardPopup,
newShow => {
@ -198,19 +189,22 @@ const fetchRiskLevelCount = async () => {
});
console.log('风险等级统计数据:', res);
if (res.code === '00000' && res.data) {
//
//
const data = res.data;
let roadTotal = 0;
roadStats.value.forEach(item => {
data.forEach(d => {
if (item.label.includes(d.level)) {
roadTotal += Number(d.count);
item.value = Number(d.count);
// 0
item.value = 0;
//
const matchedData = data.find(d => item.label.includes(d.level));
if (matchedData) {
item.value = Number(matchedData.count);
roadTotal += Number(matchedData.count);
}
});
});
//
roadStats.value[4].value = roadTotal;
console.log(roadStats.value);
console.log('更新后的roadStats:', roadStats.value);
}
} catch (error) {
console.error('获取风险等级统计数据失败:', error);