新增接口大屏管控
This commit is contained in:
parent
9b9c852c52
commit
4e7d16f67f
@ -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);
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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) +
|
||||||
|
|||||||
@ -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();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 组件挂载时获取数据并注册刷新函数
|
// 组件挂载时获取数据并注册刷新函数
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user