This commit is contained in:
huangchenhao 2026-04-14 13:46:09 +08:00
commit 891d52b186
13 changed files with 276 additions and 81 deletions

View File

@ -51,7 +51,7 @@ const props = defineProps({
//
title: {
type: String,
default: "潼南",
default: "",
},
//
dataList: {

View File

@ -145,7 +145,7 @@ const tableColumns = ref([
{ prop: "stakeNo", label: "起止桩号", width: "", slot: "stakeNo" },
{ prop: "location", label: "路况位置", width: "", slot: "location" },
{ prop: "occurrenceTime", label: "发生时间", width: "" },
{ prop: "routeNo2", label: "线路编号", width: "" },
// { prop: "routeNo2", label: "线", width: "" },
{ prop: "type", label: "类型", width: "" },
{
prop: "roadConditionType",
@ -255,7 +255,7 @@ const fetchData = async () => {
stakeNo: `${item.startStakeNo}-${item.endStakeNo}` || "-",
location: item.occurLocation || "-",
occurrenceTime: item.occurTime || "-",
routeNo2: item.routeNo || "-",
// routeNo2: item.routeNo || "-",
type: item.roadConditionType || "-",
roadConditionType: item.roadConditionType || "-",
expectRecoverTime: item.expectRecoverTime || "-",

View File

@ -1,4 +1,4 @@
<template>
<template>
<base-dialog
v-model:visible="props.visible"
title="详情"
@ -37,7 +37,11 @@
</div>
<div class="info-item">
<span class="info-label">事件等级</span>
<span class="info-value level-tag" :class="eventInfo.levelClass">{{ eventInfo.eventLevel }}</span>
<span
class="info-value level-tag"
:class="eventInfo.levelClass"
>{{ eventInfo.eventLevel }}</span
>
</div>
</div>
<div class="info-row">
@ -76,7 +80,11 @@
处置反馈信息
</div>
<div class="feedback-list">
<div v-for="(item, index) in feedbackList" :key="item.id" class="feedback-item">
<div
v-for="(item, index) in feedbackList"
:key="item.id"
class="feedback-item"
>
<div class="feedback-header">
<div class="feedback-num">{{ index + 1 }}</div>
<div class="feedback-info">
@ -97,19 +105,25 @@
<div class="detail-row">
<span class="detail-label">预计开始时间</span>
<span class="detail-value">{{ item.estimatedStartTime }}</span>
<span class="detail-label" style="margin-left: 40px">预计结束时间</span>
<span class="detail-label" style="margin-left: 40px"
>预计结束时间</span
>
<span class="detail-value">{{ item.estimatedEndTime }}</span>
</div>
<div class="detail-row">
<span class="detail-label">实际开始时间</span>
<span class="detail-value">{{ item.actualStartTime }}</span>
<span class="detail-label" style="margin-left: 40px">实际结束时间</span>
<span class="detail-label" style="margin-left: 40px"
>实际结束时间</span
>
<span class="detail-value">{{ item.actualEndTime }}</span>
</div>
<div class="detail-row">
<span class="detail-label">处置人</span>
<span class="detail-value">{{ item.handlerName }}</span>
<span class="detail-label" style="margin-left: 40px">联系电话</span>
<span class="detail-label" style="margin-left: 40px"
>联系电话</span
>
<span class="detail-value">{{ item.contactPhone }}</span>
</div>
<div class="detail-row">
@ -124,7 +138,11 @@
</base-dialog>
<!-- 图片预览弹窗 -->
<div v-if="previewVisible" class="image-preview-overlay" @click="closePreview">
<div
v-if="previewVisible"
class="image-preview-overlay"
@click="closePreview"
>
<div class="image-preview-container" @click.stop>
<img :src="previewImageUrl" alt="预览" />
<div class="close-preview-btn" @click="closePreview">
@ -163,7 +181,8 @@ const eventInfo = ref({
reporter: "张三",
address: "万州区太白路123号附近",
reportTime: "2023-10-12 14:35:00",
description: "路面出现塌陷面积约2平方米深度约0.5米,已设置警示标志,请尽快处理。",
description:
"路面出现塌陷面积约2平方米深度约0.5米,已设置警示标志,请尽快处理。",
});
//
@ -226,7 +245,7 @@ watch(
//
Object.assign(eventInfo.value, props.eventData);
}
}
},
);
</script>
@ -327,6 +346,7 @@ watch(
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 10px;
}
.feedback-item {

View File

@ -379,6 +379,7 @@ watch(
.timeline-list {
display: flex;
flex-direction: column;
margin-bottom: 10px;
gap: 16px;
}

View File

@ -1,7 +1,7 @@
<template>
<base-dialog
v-model:visible="props.visible"
title="潼南三级路长明细"
:title="props.allCountyData.name + '三级路长明细'"
:table-data="tableData"
:table-columns="tableColumns"
:table-height="300"
@ -76,7 +76,17 @@
<script setup>
import { ref, computed, watch } from "vue";
import { Close, VideoCamera, Microphone, Phone, ArrowLeft, ArrowRight, User, OfficeBuilding, MapLocation } from "@element-plus/icons-vue";
import {
Close,
VideoCamera,
Microphone,
Phone,
ArrowLeft,
ArrowRight,
User,
OfficeBuilding,
MapLocation,
} from "@element-plus/icons-vue";
import baseDialog from "../component/baseDialog.vue";
const props = defineProps({
@ -84,6 +94,12 @@ const props = defineProps({
type: Boolean,
default: false,
},
allCountyData: {
type: Object,
default: () => ({
name: "",
}),
},
});
const emit = defineEmits(["update:visible", "close"]);
@ -108,18 +124,102 @@ const tableColumns = ref([
//
const tableData = ref([
{ id: 1, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员(路长履职)", position: "其他" },
{ id: 2, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员(路长履职)", position: "其他" },
{ id: 3, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员(路长履职)", position: "其他" },
{ id: 4, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员(路长履职)", position: "其他" },
{ id: 5, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员(路长履职)", position: "其他" },
{ id: 6, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员(路长履职)", position: "其他" },
{ id: 7, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员(路长履职)", position: "其他" },
{ id: 8, district: "万州区李河镇", name: "王建国", phone: "1398324567", role: "一般人员(路长履职)", position: "其他" },
{ id: 9, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员(路长履职)", position: "其他" },
{ id: 10, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员(路长履职)", position: "其他" },
{ id: 11, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员(路长履职)", position: "其他" },
{ id: 12, district: "万州区分水镇", name: "刘志强", phone: "1387654321", role: "一般人员(路长履职)", position: "其他" },
{
id: 1,
district: "万州区柏梓镇",
name: "赵海浪",
phone: "1862352068",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 2,
district: "万州区柏梓镇",
name: "赵海浪",
phone: "1862352068",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 3,
district: "万州区柏梓镇",
name: "赵海浪",
phone: "1862352068",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 4,
district: "万州区柏梓镇",
name: "赵海浪",
phone: "1862352068",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 5,
district: "万州区李河镇",
name: "王建国",
phone: "1398324567",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 6,
district: "万州区李河镇",
name: "王建国",
phone: "1398324567",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 7,
district: "万州区李河镇",
name: "王建国",
phone: "1398324567",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 8,
district: "万州区李河镇",
name: "王建国",
phone: "1398324567",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 9,
district: "万州区分水镇",
name: "刘志强",
phone: "1387654321",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 10,
district: "万州区分水镇",
name: "刘志强",
phone: "1387654321",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 11,
district: "万州区分水镇",
name: "刘志强",
phone: "1387654321",
role: "一般人员(路长履职)",
position: "其他",
},
{
id: 12,
district: "万州区分水镇",
name: "刘志强",
phone: "1387654321",
role: "一般人员(路长履职)",
position: "其他",
},
]);
//
@ -171,13 +271,11 @@ watch(
currentPage.value = 1;
fetchData();
}
}
},
);
</script>
<style lang="scss" scoped>
//
.stats-cards {
display: flex;
@ -189,7 +287,11 @@ watch(
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(30, 80, 140, 0.6) 0%, rgba(20, 60, 110, 0.8) 100%);
background: linear-gradient(
135deg,
rgba(30, 80, 140, 0.6) 0%,
rgba(20, 60, 110, 0.8) 100%
);
border: 1px solid rgba(64, 169, 255, 0.2);
border-radius: 4px;
padding: 10px 12px;

View File

@ -1,7 +1,7 @@
<template>
<base-dialog
v-model:visible="props.visible"
title="潼南建设项目责任人明细"
:title="props.allCountyData.name + '建设责任人明细'"
:table-data="tableData"
:table-columns="tableColumns"
:table-height="400"
@ -30,6 +30,12 @@ const props = defineProps({
type: Boolean,
default: false,
},
allCountyData: {
type: Object,
default: () => ({
name: "",
}),
},
});
const emit = defineEmits(["update:visible", "close", "detail"]);
@ -136,7 +142,7 @@ watch(
currentPage.value = 1;
fetchData();
}
}
},
);
</script>

View File

@ -1,7 +1,7 @@
<template>
<base-dialog
v-model:visible="props.visible"
title="潼南护路团队成员"
:title="props.allCountyData.name + '护路团队成员明细'"
:table-data="tableData"
:table-columns="tableColumns"
:table-height="400"
@ -30,6 +30,12 @@ const props = defineProps({
type: Boolean,
default: false,
},
allCountyData: {
type: Object,
default: () => ({
name: "",
}),
},
});
const emit = defineEmits(["update:visible", "close", "view"]);
@ -148,7 +154,7 @@ watch(
currentPage.value = 1;
fetchData();
}
}
},
);
</script>

View File

@ -176,7 +176,7 @@ const showCountyCardsOnMap = (dataList) => {
// Vue
const container = document.createElement("div");
container.className = "county-card-wrapper";
console.log(item);
// 使 Vue h
const vnode = h(centerInfoCard, {
visible: true,
@ -1069,29 +1069,27 @@ watch(
// dateRange
watch(
() => props.dateRange,
async (newVal) => {
console.log("dateRange 变化:", newVal);
if (newVal && newVal.length === 2) {
//
await getAffectedCountyData();
async (newVal, oldVal) => {
console.log("dateRange 变化:", newVal, oldVal);
//
await getAffectedCountyData();
// activeIndex
switch (props.activeIndex) {
case 0:
await getAffectedProjectData();
break;
case 1:
await getAffectedTunnelData();
break;
case 3:
await getAffectedBridgeData();
break;
case 4:
await getEmergencyForceData();
break;
default:
break;
}
// activeIndex
switch (props.activeIndex) {
case 0:
await getAffectedProjectData();
break;
case 1:
await getAffectedTunnelData();
break;
case 3:
await getAffectedBridgeData();
break;
case 4:
await getEmergencyForceData();
break;
default:
break;
}
},
{ deep: true },

View File

@ -34,8 +34,9 @@
<slot name="filter"></slot>
</div>
<!-- 数据表格 -->
<div class="table-section" v-if="props.tableData.length > 0">
<div class="table-section">
<el-table
v-if="props.tableData.length > 0"
:data="props.tableData"
:height="props.tableHeight"
style="width: 100%; min-height: 300px"
@ -59,11 +60,9 @@
</div>
<!-- 分页 -->
<div
class="pagination"
v-if="props.tableData.length > 0 && props.showPagination"
>
<div class="pagination">
<el-pagination
v-if="props.tableData.length > 0 && props.showPagination"
:current-page="props.currentPage"
:page-size="props.pageSize"
:page-sizes="props.pageSizes"

View File

@ -81,6 +81,7 @@
<!-- 农村公路对话框 -->
<responseSituationDiaLog
v-model:visible="dialogVisible.responseSituation"
:allCountyData="allCountyData"
@close="closeDialog('responseSituation')"
/>
@ -162,6 +163,7 @@
<!-- 项目对话框 -->
<tongnanResponsibleDialog
v-model:visible="dialogVisible.tongnanResponsible"
:allCountyData="allCountyData"
@close="closeDialog('tongnanResponsible')"
@detail="openDialog('tongnanInfo')"
/>
@ -195,6 +197,7 @@
<!-- 国省道对话框 -->
<tongnanTeamDialog
v-model:visible="dialogVisible.tongnanTeam"
:allCountyData="allCountyData"
@close="closeDialog('tongnanTeam')"
@view="openDialog('tongnanInfo')"
/>
@ -345,10 +348,11 @@ const openConfirm = (config) => {
};
//
const showCenterCard = ref(false);
const allCountyData = ref({});
//
const handleDistrictClick = (item) => {
console.log("区县点击:", item.data);
console.log("区县点击:", item);
allCountyData.value = item;
if (item.data.roadType == "national") {
//
openDialog("tongnanTeam");
@ -406,21 +410,32 @@ const handleCenterCardClickType = (item) => {
//
const refreshLeftData = ref(null);
const refreshRightData = ref(null);
//
const setRefreshLeftData = (callback) => {
refreshLeftData.value = callback;
};
// right.vue
const setRefreshRightData = (callback) => {
refreshRightData.value = callback;
};
//
const triggerRefreshLeftData = () => {
if (refreshLeftData.value) {
refreshLeftData.value();
}
// right.vue
if (refreshRightData.value) {
refreshRightData.value();
}
};
//
provide("setRefreshLeftData", setRefreshLeftData);
provide("setRefreshRightData", setRefreshRightData);
provide("triggerRefreshLeftData", triggerRefreshLeftData);
// ==================== ====================

View File

@ -116,7 +116,9 @@
<SectionHeader title="响应调度">
<template #right>
<div class="header-filters">
<span class="filter-item active">本轮</span>
<span class="filter-item active" @click="handleDateRangeClick()"
>本轮</span
>
<div class="date-range-wrapper">
<el-date-picker
v-model="dateRange"
@ -304,6 +306,11 @@ const handleDateChange = (val) => {
dateRange.value = val;
dispatchLoadLoad();
};
//
const handleDateRangeClick = (val) => {
dateRange.value = [];
dispatchLoadLoad();
};
//
const dateRange = ref([]);
//
@ -438,16 +445,20 @@ const scheduleStatisticsByCountyLoad = async () => {
//
const mergeLiangjiangNewArea = (arr) => {
const yubeiItems = arr.filter(item => item.countyName === "渝北区");
const jiangbeiItems = arr.filter(item => item.countyName === "江北区");
const yubeiItems = arr.filter((item) => item.countyName === "渝北区");
const jiangbeiItems = arr.filter(
(item) => item.countyName === "江北区",
);
if (yubeiItems.length > 0 || jiangbeiItems.length > 0) {
//
const mergedItem = {
countyName: "两江新区",
countyId: yubeiItems[0]?.countyId || jiangbeiItems[0]?.countyId || "",
countyId:
yubeiItems[0]?.countyId || jiangbeiItems[0]?.countyId || "",
type: yubeiItems[0]?.type || jiangbeiItems[0]?.type || "",
roadType: yubeiItems[0]?.roadType || jiangbeiItems[0]?.roadType || "",
roadType:
yubeiItems[0]?.roadType || jiangbeiItems[0]?.roadType || "",
//
noticeCount: 0,
replyCount: 0,
@ -456,7 +467,7 @@ const scheduleStatisticsByCountyLoad = async () => {
};
//
yubeiItems.forEach(item => {
yubeiItems.forEach((item) => {
mergedItem.noticeCount += item.noticeCount || 0;
mergedItem.replyCount += item.replyCount || 0;
mergedItem.population += item.population || 0;
@ -464,7 +475,7 @@ const scheduleStatisticsByCountyLoad = async () => {
});
//
jiangbeiItems.forEach(item => {
jiangbeiItems.forEach((item) => {
mergedItem.noticeCount += item.noticeCount || 0;
mergedItem.replyCount += item.replyCount || 0;
mergedItem.population += item.population || 0;
@ -472,8 +483,9 @@ const scheduleStatisticsByCountyLoad = async () => {
});
//
const filteredArr = arr.filter(item =>
item.countyName !== "渝北区" && item.countyName !== "江北区"
const filteredArr = arr.filter(
(item) =>
item.countyName !== "渝北区" && item.countyName !== "江北区",
);
filteredArr.push(mergedItem);
return filteredArr;
@ -1193,7 +1205,7 @@ const cellStyle = () => ({
display: flex;
align-items: center;
// gap: vw(8);
padding: vw(10);
padding: vw(12) vw(10);
// background: rgba(64, 169, 255, 0.08);
.stat-icon {

View File

@ -116,7 +116,9 @@
<SectionHeader title="受灾情况">
<template #right>
<div class="header-filters">
<span class="filter-item active">本轮</span>
<span class="filter-item active" @click="handleDateRangeClick()"
>本轮</span
>
<div class="date-range-wrapper">
<el-date-picker
v-model="dateRange"
@ -128,6 +130,7 @@
popper-class="custom-date-picker"
:teleported="false"
:prefix-icon="Calendar"
@change="handleDateChange"
/>
</div>
</div>
@ -194,7 +197,7 @@
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { ref, computed, onMounted, inject } from "vue";
import { request } from "@/utils/request";
import SectionHeader from "./component/sectionHeader.vue";
@ -223,14 +226,37 @@ const emit = defineEmits([
"openResourceDetail",
]);
//
onMounted(() => {
//
const setRefreshRightData = inject("setRefreshRightData");
//
const refreshData = () => {
console.log("right.vue 刷新数据");
getYhYjllList();
getYhYjllListMaterials();
getControlStats();
getRescueInputStats();
getDisasterStats();
};
//
onMounted(() => {
refreshData();
//
if (setRefreshRightData) {
setRefreshRightData(refreshData);
}
});
//
const handleDateChange = (val) => {
dateRange.value = val;
getDisasterStats();
};
//
const handleDateRangeClick = (val) => {
dateRange.value = [];
getDisasterStats();
};
//
const getYhYjllList = async () => {
@ -706,6 +732,8 @@ const majorEvent = "0";
.resource-item {
display: flex;
align-items: center;
box-sizing: border-box;
height: 42px;
gap: vw(6);
padding: vw(4) vw(8);
background: linear-gradient(270deg, rgba(18, 52, 97, 0) 0%, #203555 100%);
@ -1072,7 +1100,7 @@ const majorEvent = "0";
.damage-item {
text-align: center;
padding: vw(8);
padding: vw(4) 0;
// background: rgba(64, 169, 255, 0.1);
// border-radius: 6px;
background-image: url("../../assets/RiskWarning_img/路径62@2x.png");

View File

@ -1,7 +1,9 @@
<template>
<div class="filter-header">
<div class="filter-container">
<span class="filter-item active">本轮</span>
<span class="filter-item active" @click="handleDateRangeClick()"
>本轮</span
>
<div class="date-range-wrapper">
<el-date-picker
v-model="dateRange"
@ -38,12 +40,18 @@ const setEndOfDay = (date) => {
d.setHours(23, 59, 59, 999);
return d;
};
//
const handleDateRangeClick = () => {
dateRange.value = [];
triggerRefreshLeftData();
emit("dateRangeChange", []);
};
// dateRange
watch(
dateRange,
(newVal, oldVal) => {
//
console.log("dateRange 变化:", newVal, oldVal);
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
console.log("dateRange 发生变化:", newVal);