新增接口大屏管控

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -404,8 +404,24 @@ const districtLoadLoad = async () => {
if (res.code == "00000") { if (res.code == "00000") {
const data = res.data; const data = res.data;
if (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 = const totalA =
(a.roadSectionCount || 0) + (a.roadSectionCount || 0) +
(a.bridgeCount || 0) + (a.bridgeCount || 0) +

View File

@ -548,11 +548,34 @@ const controlData1 = ref([
{ label: '限速(限车型)数', value: '24' }, { label: '限速(限车型)数', value: '24' },
{ label: '告警阻拦处数', value: '32' }, { label: '告警阻拦处数', value: '32' },
]); ]);
const controlData2 = [ const controlData2 = ref([
{ label: '停工项目数', value: '30' }, { label: '停工项目数', value: '0', key: 'stoped_project_count' },
{ label: '关闭驻地数', value: '42' }, { label: '关闭驻地数', value: '0', key: 'closed_site_count' },
{ label: '转移撤离人员数', value: '58' }, { 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 = [ const patrolData = [
@ -618,6 +641,7 @@ const init = () => {
getControlStats(); getControlStats();
getRescueInputStats(); getRescueInputStats();
getDisasterStats(); getDisasterStats();
getAffectedCountByProject();
}; };
// //

View File

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