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

修改ai弹窗页面，叫应数和回应数弹窗完成接口调试。

Browse Source
This commit is contained in:
fanjia 2026-04-20 10:22:34 +08:00
parent 4e7d16f67f
commit 674ec26d38
26 changed files with 1999 additions and 1135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/screen/src/assets/RiskWarning_img/AI.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
packages/screen/src/assets/RiskWarning_img/一线icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
packages/screen/src/assets/RiskWarning_img/区县icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
packages/screen/src/assets/RiskWarning_img/市级icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

2
packages/screen/src/views/ConstructionDepartment/ConstructionDepartment.vue
View File

@ -146,7 +146,7 @@
<el-table-column prop="constructionUnit" label="建设单位" min-width="150" show-overflow-tooltip />
<el-table-column prop="builderUnit" label="施工单位" min-width="150" show-overflow-tooltip />
<el-table-column prop="stationAddress" label="驻地地址" min-width="200" show-overflow-tooltip />
<el-table-column prop="adminArea" label="行政区域" width="100" align="center" />
<el-table-column prop="adminArea" label="影响区域" width="100" align="center" />
<el-table-column prop="stationPeople" label="驻地人数" width="90" align="center" />
<el-table-column prop="riskLevel" label="驻地风险等级" width="110" align="center" />
<el-table-column prop="buildingType" label="房建类型" width="100" align="center" />

2
packages/screen/src/views/LedgerManagement/index.js
View File

@ -85,7 +85,7 @@ const columns = [
},
{
prop: "administrativeRegion",
label: "行政区域",
label: "影响区域",
},
{
prop: "sitePopulation",

1023
packages/screen/src/views/RiskWarning/Dialog/aiWarningResultDialog.vue
View File

File diff suppressed because it is too large Load Diff

7
packages/screen/src/views/RiskWarning/Dialog/clearanceSituationDialog.vue
View File

@ -16,7 +16,7 @@
<template #filter>
<div class="filter-row">
<div class="filter-item">
<span class="filter-label">行政区域</span>
<span class="filter-label">影响区域</span>
<el-select
:teleported="false"
v-model="filterForm.district"
@ -112,7 +112,7 @@ const props = defineProps({
},
});
const emit = defineEmits(['update:visible', 'close', 'detail']);
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']);
// 筛选表单
const filterForm = ref({
@ -136,7 +136,7 @@ const tableHeight = ref(300);
// 表格列配置
const tableColumns = ref([
{ prop: 'id', label: '序号', width: '' },
{ prop: 'district', label: '行政区域', width: '' },
{ prop: 'district', label: '影响区域', width: '' },
{ prop: 'routeNo', label: '线路编号', width: '' },
{ prop: 'stakeNo', label: '起止桩号', width: '', slot: 'stakeNo' },
{ prop: 'location', label: '路况位置', width: '', slot: 'location' },
@ -198,6 +198,7 @@ const handleClose = () => {
// 查看详情
const handleDetail = item => {
emit('detail', item);
emit('itemdata', item);
};
// 分页操作

16
packages/screen/src/views/RiskWarning/Dialog/controlSituationDialog.vue
View File

@ -17,7 +17,7 @@
<template #filter>
<div class="filter-row">
<div class="filter-item">
<span class="filter-label">行政区域</span>
<span class="filter-label">影响区域</span>
<el-select :teleported="false" v-model="filterForm.region" placeholder="请选择" class="filter-select" clearable>
<el-option
v-for="item in regionOptions"
@ -83,7 +83,7 @@ const filterForm = ref({
riskLevel: "",
});
// 行政区域选项
// 影响区域选项
// 已从 index.js 导入
// 风险等级选项
@ -94,12 +94,12 @@ const tableHeight = ref(300);
// 表格列配置
const tableColumns = ref([
{ prop: 'id', label: '序号', width: '60' },
{ prop: 'region', label: '行政区域', width: '100' },
{ prop: 'stationName', label: '驻地名称', width: '200', slot: 'stationName' },
{ prop: 'project', label: '所属项目', width: '200', slot: 'project' },
{ prop: 'peopleCount', label: '驻地人数', width: '80' },
{ prop: 'riskLevel', label: '驻地风险等级', width: '100', slot: 'riskLevel' },
{ prop: 'id', label: '序号', width: '' },
{ prop: 'region', label: '影响区域', width: '' },
{ prop: 'stationName', label: '驻地名称', width: '', slot: 'stationName' },
{ prop: 'project', label: '所属项目', width: '', slot: 'project' },
{ prop: 'peopleCount', label: '驻地人数', width: '' },
{ prop: 'riskLevel', label: '驻地风险等级', width: '', slot: 'riskLevel' },
]);
// 表格数据

4
packages/screen/src/views/RiskWarning/Dialog/dispatchDetailDialog.vue
View File

@ -17,7 +17,7 @@
<template #filter>
<div class="filter-row">
<div class="filter-item">
<span class="filter-label">行政区域</span>
<span class="filter-label">影响区域</span>
<el-select :teleported="false"
v-model="filterForm.region"
placeholder="请选择"
@ -76,7 +76,7 @@ const filterForm = ref({
type: "",
});
// 行政区域选项
// 影响区域选项
// 已从 index.js 导入
// 类型选项

6
packages/screen/src/views/RiskWarning/Dialog/dispatchDistrictDialog.vue
View File

@ -17,7 +17,7 @@
<template #filter>
<div class="filter-row">
<div class="filter-item">
<span class="filter-label">行政区域</span>
<span class="filter-label">影响区域</span>
<el-select :teleported="false"
v-model="filterForm.region"
placeholder="请选择"
@ -68,7 +68,7 @@ const filterForm = ref({
region: "",
});
// 行政区域选项
// 影响区域选项
// 已从 index.js 导入
// 表格高度
@ -77,7 +77,7 @@ const tableHeight = ref(300);
// 表格列配置
const tableColumns = ref([
{ prop: "id", label: "序号", width: "" },
{ prop: "region", label: "行政区域", width: "" },
{ prop: "region", label: "影响区域", width: "" },
{ prop: "dispatchCount", label: "调度数", width: "", slot: "dispatchCount" },
{ prop: "lastDispatchTime", label: "最近调度时间", width: "" },
]);

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

@ -79,7 +79,7 @@
:teleported="false"
v-model="filterForm.region"
size="small"
placeholder="行政区域"
placeholder="影响区域"
class="filter-select"
>
<el-option
@ -91,18 +91,14 @@
</el-select>
</div>
<div class="filter-item">
<el-button type="primary" class="search-btn" @click="handleSearch">
查询
</el-button>
<el-button type="primary" class="search-btn" @click="handleSearch">查询</el-button>
</div>
</div>
</template>
<!-- 影响点等级列插槽 -->
<template #pointLevel="{ row }">
<span class="level-tag" :class="row.levelClass">{{
row.pointLevel
}}</span>
<span class="level-tag" :class="row.levelClass">{{ row.pointLevel }}</span>
</template>
<!-- 交通主管部门负责人列插槽 -->
@ -149,60 +145,48 @@
<!-- 吹哨人列插槽 -->
<template #whistleblower="{ row }">
<div class="person-info">
<span class="person-name">{{ row.whistleblower?.name || "-" }}</span>
<span class="person-phone">{{ row.whistleblower?.phone || "-" }}</span>
<span class="person-name">{{ row.whistleblower?.name || '-' }}</span>
<span class="person-phone">{{ row.whistleblower?.phone || '-' }}</span>
</div>
</template>
<!-- 建设单位包保责任人列插槽 -->
<template #constructionUnit="{ row }">
<div class="person-info">
<span class="person-name">{{ row.constructionUnit?.name || "-" }}</span>
<span class="person-phone">{{
row.constructionUnit?.phone || "-"
}}</span>
<span class="person-name">{{ row.constructionUnit?.name || '-' }}</span>
<span class="person-phone">{{ row.constructionUnit?.phone || '-' }}</span>
</div>
</template>
<!-- 施工单位包保责任人列插槽 -->
<template #constructionDept="{ row }">
<div class="person-info">
<span class="person-name">{{ row.constructionDept?.name || "-" }}</span>
<span class="person-phone">{{
row.constructionDept?.phone || "-"
}}</span>
<span class="person-name">{{ row.constructionDept?.name || '-' }}</span>
<span class="person-phone">{{ row.constructionDept?.phone || '-' }}</span>
</div>
</template>
<!-- 驻地包保责任人列插槽 -->
<template #siteResponsible="{ row }">
<div class="person-info">
<span class="person-name">{{ row.siteResponsible?.name || "-" }}</span>
<span class="person-phone">{{
row.siteResponsible?.phone || "-"
}}</span>
<span class="person-name">{{ row.siteResponsible?.name || '-' }}</span>
<span class="person-phone">{{ row.siteResponsible?.phone || '-' }}</span>
</div>
</template>
<!-- 区县级包保责任人列插槽 -->
<template #countyResponsible="{ row }">
<div class="person-info">
<span class="person-name">{{
row.countyResponsible?.name || "-"
}}</span>
<span class="person-phone">{{
row.countyResponsible?.phone || "-"
}}</span>
<span class="person-name">{{ row.countyResponsible?.name || '-' }}</span>
<span class="person-phone">{{ row.countyResponsible?.phone || '-' }}</span>
</div>
</template>
<!-- 市级包保责任人列插槽 -->
<template #cityResponsible="{ row }">
<div class="person-info">
<span class="person-name">{{ row.cityResponsible?.name || "-" }}</span>
<span class="person-phone">{{
row.cityResponsible?.phone || "-"
}}</span>
<span class="person-name">{{ row.cityResponsible?.name || '-' }}</span>
<span class="person-phone">{{ row.cityResponsible?.phone || '-' }}</span>
</div>
</template>
@ -214,28 +198,24 @@
</template>
<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { request } from "@/utils/request";
import {
pointTypeOptions,
pointLevelOptions,
regionOptionsWithAll,
} from "../component/index.js";
import baseDialog from "../component/baseDialog.vue";
import { ref, computed, watch, onMounted } from 'vue';
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { request } from '@/utils/request';
import { pointTypeOptions, pointLevelOptions, regionOptionsWithAll } from '../component/index.js';
import baseDialog from '../component/baseDialog.vue';
import respondedIcon from "../../../assets/xiangying/有回应@2x.png";
import notRespondedIcon from "../../../assets/xiangying/无回应@2x.png";
import selectedIcon from "../../../assets/xiangying/选中bg@2x.png";
import unselectedIcon from "../../../assets/xiangying/未选中bg@2x.png";
import respondedIcon from '../../../assets/xiangying/有回应@2x.png';
import notRespondedIcon from '../../../assets/xiangying/无回应@2x.png';
import selectedIcon from '../../../assets/xiangying/选中bg@2x.png';
import unselectedIcon from '../../../assets/xiangying/未选中bg@2x.png';
import Icon0 from "../../../assets/xiangying/选中@2x.png";
import Icon1 from "../../../assets/xiangying/未选中1@2x.png";
import Icon2 from "../../../assets/xiangying/未选中2@2x.png";
import Icon3 from "../../../assets/xiangying/未选中3@2x.png";
import Icon4 from "../../../assets/xiangying/未选中4@2x.png";
import Icon0 from '../../../assets/xiangying/选中@2x.png';
import Icon1 from '../../../assets/xiangying/未选中1@2x.png';
import Icon2 from '../../../assets/xiangying/未选中2@2x.png';
import Icon3 from '../../../assets/xiangying/未选中3@2x.png';
import Icon4 from '../../../assets/xiangying/未选中4@2x.png';
import { formatDateTime } from "../component/index.js";
import { formatDateTime } from '../component/index.js';
const props = defineProps({
visible: {
@ -248,92 +228,92 @@ const props = defineProps({
},
});
const emit = defineEmits(["update:visible", "close", "detail", "itemClick"]);
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemClick']);
// 筛选表单
const filterForm = ref({
pointType: "",
pointLevel: "",
region: "",
pointType: '',
pointLevel: '',
region: '',
});
// 统一的表格列配置（桥梁、边坡、隧道、路段使用）
const unifiedColumns = [
{ prop: "id", label: "序号", width: "" },
{ prop: "region", label: "行政区域", width: "" },
{ prop: "pointType", label: "影响点类型", width: "" },
{ prop: "pointLocation", label: "影响点位置", width: "" },
{ prop: "pointLevel", label: "影响点等级", width: "", slot: "pointLevel" },
{ prop: 'id', label: '序号', width: '' },
{ prop: 'region', label: '影响区域', width: '' },
{ prop: 'pointType', label: '影响点类型', width: '' },
{ prop: 'pointLocation', label: '影响点位置', width: '' },
{ prop: 'pointLevel', label: '影响点等级', width: '', slot: 'pointLevel' },
{
prop: "trafficDept",
label: "交通主管部门负责人",
width: "",
slot: "trafficDept",
prop: 'trafficDept',
label: '交通主管部门负责人',
width: '',
slot: 'trafficDept',
},
{ prop: "roadOrg", label: "公路机构责任人", width: "", slot: "roadOrg" },
{ prop: 'roadOrg', label: '公路机构责任人', width: '', slot: 'roadOrg' },
{
prop: "maintenance",
label: "养护站负责人",
width: "",
slot: "maintenance",
prop: 'maintenance',
label: '养护站负责人',
width: '',
slot: 'maintenance',
},
{ prop: "roadKeeper", label: "护路员", width: "", slot: "roadKeeper" },
{ prop: 'roadKeeper', label: '护路员', width: '', slot: 'roadKeeper' },
{
prop: "generalStaff",
label: "一般人员(路长履职)",
width: "",
slot: "generalStaff",
prop: 'generalStaff',
label: '一般人员(路长履职)',
width: '',
slot: 'generalStaff',
},
{
prop: "operation",
label: "操作",
width: "80",
slot: "operation",
fixed: "right",
prop: 'operation',
label: '操作',
width: '80',
slot: 'operation',
fixed: 'right',
},
];
// 项目类型专用表格列配置
const projectColumns = [
{ prop: "id", label: "序号", width: "60" },
{ prop: "region", label: "行政区域", width: "" },
{ prop: "pointType", label: "影响点类型", width: "" },
{ prop: "siteName", label: "驻地名称", width: "" },
{ prop: 'id', label: '序号', width: '60' },
{ prop: 'region', label: '影响区域', width: '' },
{ prop: 'pointType', label: '影响点类型', width: '' },
{ prop: 'siteName', label: '驻地名称', width: '' },
{
prop: "whistleblower",
label: "吹哨人",
width: "",
slot: "whistleblower",
prop: 'whistleblower',
label: '吹哨人',
width: '',
slot: 'whistleblower',
},
{
prop: "constructionUnit",
label: "建设单位包保责任人",
width: "",
slot: "constructionUnit",
prop: 'constructionUnit',
label: '建设单位包保责任人',
width: '',
slot: 'constructionUnit',
},
{
prop: "constructionDept",
label: "施工单位包保责任人",
width: "",
slot: "constructionDept",
prop: 'constructionDept',
label: '施工单位包保责任人',
width: '',
slot: 'constructionDept',
},
{
prop: "siteResponsible",
label: "驻地包保责任人",
width: "",
slot: "siteResponsible",
prop: 'siteResponsible',
label: '驻地包保责任人',
width: '',
slot: 'siteResponsible',
},
{
prop: "countyResponsible",
label: "区县级包保责任人",
width: "",
slot: "countyResponsible",
prop: 'countyResponsible',
label: '区县级包保责任人',
width: '',
slot: 'countyResponsible',
},
{
prop: "cityResponsible",
label: "市级包保责任人",
width: "",
slot: "cityResponsible",
prop: 'cityResponsible',
label: '市级包保责任人',
width: '',
slot: 'cityResponsible',
},
];
@ -350,44 +330,44 @@ const tableColumns = ref(bridgeColumns);
const tableData = ref([]);
// 影响点数据
const impactData = ref([
{ name: "影响路段", count: 0, icon: Icon4, type: "路段" },
{ name: "影响桥梁", count: 0, icon: Icon0, type: "桥梁" },
{ name: "影响隧道", count: 0, icon: Icon2, type: "隧道" },
{ name: "影响边坡", count: 0, icon: Icon1, type: "边坡" },
{ name: "影响项目", count: 0, icon: Icon3, type: "项目" },
{ name: '影响路段', count: 0, icon: Icon4, type: '路段' },
{ name: '影响桥梁', count: 0, icon: Icon0, type: '桥梁' },
{ name: '影响隧道', count: 0, icon: Icon2, type: '隧道' },
{ name: '影响边坡', count: 0, icon: Icon1, type: '边坡' },
{ name: '影响项目', count: 0, icon: Icon3, type: '项目' },
]);
// 顶部卡片数据
const loadBarChartData = async () => {
try {
const res = await request({
url: "/snow-ops-platform/weather-warning/affected-count",
method: "GET",
url: '/snow-ops-platform/weather-warning/affected-count',
method: 'GET',
});
if (res.code == "00000") {
if (res.code == '00000') {
const data = res.data;
if (data && Array.isArray(data)) {
// 英文转中文映射
const nameMap = {
"road-section": "路段",
bridge: "桥梁",
tunnel: "隧道",
slope: "边坡",
project: "项目",
Road: "路段",
Bridge: "桥梁",
Tunnel: "隧道",
Slope: "边坡",
Project: "项目",
'road-section': '路段',
bridge: '桥梁',
tunnel: '隧道',
slope: '边坡',
project: '项目',
Road: '路段',
Bridge: '桥梁',
Tunnel: '隧道',
Slope: '边坡',
Project: '项目',
};
// 转换英文name为中文
const convertedData = data.map((item) => {
const convertedData = data.map(item => {
const name = nameMap[item.name] || item.name;
return { ...item, name };
});
convertedData.forEach((item) => {
impactData.value.forEach((stat) => {
convertedData.forEach(item => {
impactData.value.forEach(stat => {
if (stat.name.includes(item.extension)) {
stat.count = item.count || 0;
}
@ -396,15 +376,15 @@ const loadBarChartData = async () => {
}
}
} catch (error) {
console.error("加载柱状图数据失败:", error);
console.error('加载柱状图数据失败:', error);
}
};
const cardType = ref("0");
const cardTypeVal = ref("路段");
const cardType = ref('0');
const cardTypeVal = ref('路段');
// 根据 cardType 获取对应的表格列配置
const getColumnsByType = (type) => {
const getColumnsByType = type => {
const typeMap = {
0: bridgeColumns,
1: slopeColumns,
@ -416,23 +396,21 @@ const getColumnsByType = (type) => {
};
// 根据 cardType 获取对应的 API 路径
const getApiUrlByType = (type) => {
const getApiUrlByType = type => {
const urlMap = {
桥梁: "/snow-ops-platform/weather-warning/affected-object/bridge",
边坡: "/snow-ops-platform/weather-warning/affected-object/slope",
隧道: "/snow-ops-platform/weather-warning/affected-object/tunnel",
项目: "/snow-ops-platform/weather-warning/affected-object/project",
路段: "/snow-ops-platform/weather-warning/affected-object/road-section",
桥梁: '/snow-ops-platform/weather-warning/affected-object/bridge',
边坡: '/snow-ops-platform/weather-warning/affected-object/slope',
隧道: '/snow-ops-platform/weather-warning/affected-object/tunnel',
项目: '/snow-ops-platform/weather-warning/affected-object/project',
路段: '/snow-ops-platform/weather-warning/affected-object/road-section',
};
return (
urlMap[type] || "/snow-ops-platform/weather-warning/affected-object/bridge"
);
return urlMap[type] || '/snow-ops-platform/weather-warning/affected-object/bridge';
};
// 点击卡片切换
const handleClick = (index, item) => {
tableData.value = [];
cardType.value = index + "";
cardType.value = index + '';
cardTypeVal.value = item.type;
// 切换表格列配置
tableColumns.value = getColumnsByType(cardType.value);
@ -466,43 +444,43 @@ const visiblePages = computed(() => {
// 关闭对话框
const handleClose = () => {
emit("update:visible", false);
emit("close");
emit('update:visible', false);
emit('close');
};
// 点击遮罩关闭已由base-dialog组件处理
// 查询
const handleSearch = () => {
console.log("查询条件:", filterForm.value);
console.log('查询条件:', filterForm.value);
currentPage.value = 1;
fetchData();
};
// 查看详情
const handleDetail = (item) => {
emit("detail", item);
emit("itemClick", item);
const handleDetail = item => {
emit('detail', item);
emit('itemClick', item);
};
// 分页操作
const handleSizeChange = (val) => {
const handleSizeChange = val => {
pageSize.value = val;
fetchData();
};
const handleCurrentChange = (val) => {
const handleCurrentChange = val => {
currentPage.value = val;
fetchData();
};
// 获取时间参数
const getTimeParams = () => {
console.log("原始时间范围:", props.handleImpactItem);
console.log('原始时间范围:', props.handleImpactItem);
return {
// start: `${year}-${month}-01 00:00:00`,
// end: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
start: formatDateTime(props.handleImpactItem.dateRange?.[0] || ""),
end: formatDateTime(props.handleImpactItem.dateRange?.[1] || ""),
start: formatDateTime(props.handleImpactItem.dateRange?.[0] || ''),
end: formatDateTime(props.handleImpactItem.dateRange?.[1] || ''),
limit: pageSize.value,
offset: (currentPage.value - 1) * pageSize.value,
};
@ -510,41 +488,36 @@ const getTimeParams = () => {
// 处理数据为统一格式
const processUnifiedData = (item, type) => {
// 获取等级样式类
const getLevelClass = (level) => {
const getLevelClass = level => {
const levelMap = {
红色预警: "level-red",
橙色预警: "level-orange",
黄色预警: "level-yellow",
蓝色预警: "level-blue",
高风险: "level-red",
中风险: "level-orange",
低风险: "level-blue",
红色预警: 'level-red',
橙色预警: 'level-orange',
黄色预警: 'level-yellow',
蓝色预警: 'level-blue',
高风险: 'level-red',
中风险: 'level-orange',
低风险: 'level-blue',
};
return levelMap[level] || "";
return levelMap[level] || '';
};
// 获取影响点等级
const pointLevel =
item.riskLevel ||
item.warningLevel ||
item.level ||
item.GL1_PDDJ ||
item.GL1_JSDJ ||
"-";
item.riskLevel || item.warningLevel || item.level || item.GL1_PDDJ || item.GL1_JSDJ || '-';
// 基础数据
const baseData = {
id: item.id,
// 行政区域
// 影响区域
region:
item.GL1_QXMC ||
item.COUNTY ||
item.county ||
item.region ||
item.ADMINISTRATIVE_REGION ||
"-",
'-',
// 影响点类型
pointType: impactData.value[type].type || "-",
pointType: impactData.value[type].type || '-',
// 影响点位置（根据类型取不同字段）
pointLocation:
item.GL1_QLMC ||
@ -553,62 +526,60 @@ const processUnifiedData = (item, type) => {
item.PROJECT_NAME ||
item.GL1_LXBH ||
item.name ||
"-",
'-',
// 影响点等级
pointLevel: pointLevel,
levelClass: getLevelClass(pointLevel),
// 交通主管部门负责人
trafficDept: {
// name: item.trafficDeptName || item.trafficManager || "-",
phone: item.trafficDeptPhone || item.trafficManagerPhone || "-",
name: "-",
phone: "-",
phone: item.trafficDeptPhone || item.trafficManagerPhone || '-',
name: '-',
phone: '-',
},
// 公路机构责任人
roadOrg: {
// name: item.roadOrgName || item.roadManager || "-",
// phone: item.roadOrgPhone || item.roadManagerPhone || "-",
name: "-",
phone: "-",
name: '-',
phone: '-',
},
// 养护站负责人
maintenance: {
// name: item.maintenanceName || item.maintenanceManager || "-",
// phone: item.maintenancePhone || item.maintenanceManagerPhone || "-",
name: "-",
phone: "-",
name: '-',
phone: '-',
},
// 护路员
roadKeeper: {
// name: item.roadKeeperName || item.roadKeeper || "-",
// phone: item.roadKeeperPhone || item.roadKeeperPhone || "-",
name: "-",
phone: "-",
name: '-',
phone: '-',
},
// 一般人员（路长履职）
generalStaff: {
// name: item.generalStaffName || item.roadChief || "-",
// phone: item.generalStaffPhone || item.roadChiefPhone || "-",
name: "-",
phone: "-",
name: '-',
phone: '-',
},
// 保留原始数据供详情使用
rawData: item,
};
// 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典）
if (cardTypeVal.value === "桥梁") {
if (cardTypeVal.value === '桥梁') {
return {
...baseData,
// 行政区域 - 使用区县名称
region: item.GL1_QXMC || "-",
// 影响区域 - 使用区县名称
region: item.GL1_QXMC || '-',
// 影响点位置 - 使用桥梁名称
pointLocation: item.GL1_QLMC || "-",
pointLocation: item.GL1_QLMC || '-',
// 影响点等级 - 使用技术状况评级等级
pointLevel: item.GL1_JSZKPJDJ || item.GL1_PDDJ || item.GL1_CSFXDJ || "-",
levelClass: getLevelClass(
item.GL1_JSZKPJDJ || item.GL1_PDDJ || item.GL1_CSFXDJ,
),
pointLevel: item.GL1_JSZKPJDJ || item.GL1_PDDJ || item.GL1_CSFXDJ || '-',
levelClass: getLevelClass(item.GL1_JSZKPJDJ || item.GL1_PDDJ || item.GL1_CSFXDJ),
// // 交通主管部门负责人 - 管理单位负责人（GL1_DWFZR）
// trafficDept: {
// name: item.GL1_DWFZR || "-",
@ -638,18 +609,16 @@ const processUnifiedData = (item, type) => {
}
// 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典）
if (cardTypeVal.value === "隧道") {
if (cardTypeVal.value === '隧道') {
return {
...baseData,
// 行政区域 - 使用区县名称
region: item.GL1_QXMC || item.GL1_QXBM || "-",
// 影响区域 - 使用区县名称
region: item.GL1_QXMC || item.GL1_QXBM || '-',
// 影响点位置 - 使用隧道名称
pointLocation: item.GL1_SDMC || "-",
pointLocation: item.GL1_SDMC || '-',
// 影响点等级 - 使用评定等级
pointLevel: item.GL1_PDDJ || item.GL1_TJJGPDDJ || item.GL1_SDYHDJ || "-",
levelClass: getLevelClass(
item.GL1_PDDJ || item.GL1_TJJGPDDJ || item.GL1_SDYHDJ,
),
pointLevel: item.GL1_PDDJ || item.GL1_TJJGPDDJ || item.GL1_SDYHDJ || '-',
levelClass: getLevelClass(item.GL1_PDDJ || item.GL1_TJJGPDDJ || item.GL1_SDYHDJ),
// // 交通主管部门负责人 - 管养单位行政领导（GL1_GYDWXZLD）
// trafficDept: {
// name: item.GL1_GYDWXZLD || "-",
@ -679,102 +648,83 @@ const processUnifiedData = (item, type) => {
}
// 路段类型特殊处理（根据BASE_XJLD路线信息表字典）
if (cardTypeVal.value === "路段") {
if (cardTypeVal.value === '路段') {
return {
...baseData,
// 行政区域 - 使用区县名称
region: item.GL1_ZDMC || "-",
// 影响区域 - 使用区县名称
region: item.GL1_ZDMC || '-',
// 影响点位置 - 使用路线名称+起终点桩号
pointLocation: `${item.GL1_GLMC || item.GL1_GLBH || "-"} (${item.GL1_QDZH || "-"} - ${item.GL1_ZDZH || "-"})`,
pointLocation: item.GL1_LXMC + item.GL1_LXBH,
// 影响点等级 - 使用风险等级
pointLevel: item.GL1_FXDJ || "-",
pointLevel: item.GL1_FXDJ || '',
levelClass: getLevelClass(item.GL1_FXDJ),
// 交通主管部门负责人 - 使用GL1_JTXM和GL1_JTDH
trafficDept: {
name: item.GL1_JTXM || "-",
phone: item.GL1_JTDH || "-",
name: item.GL1_JTXM || '-',
phone: item.GL1_JTDH || '-',
},
// 公路机构责任人 - 使用GL1_JGXM和GL1_JGDH
roadOrg: {
name: item.GL1_JGXM || "-",
phone: item.GL1_JGDH || "-",
name: item.GL1_JGXM || '-',
phone: item.GL1_JGDH || '-',
},
// 养护站负责人 - 使用GL1_YHXM和GL1_YHDH
maintenance: {
name: item.GL1_YHXM || "-",
phone: item.GL1_YHDH || "-",
name: item.GL1_YHXM || '-',
phone: item.GL1_YHDH || '-',
},
// 护路员 - 使用GL1_HLXM和GL1_HLDH
roadKeeper: {
name: item.GL1_HLXM || "-",
phone: item.GL1_HLDH || "-",
name: item.GL1_HLXM || '-',
phone: item.GL1_HLDH || '-',
},
// 一般人员（路长履职）- 使用风险类型和风险描述
generalStaff: {
name: item.GL1_FXLX || "-",
phone: item.GL1_FXMS || "-",
name: item.GL1_FXLX || '-',
phone: item.GL1_FXMS || '-',
},
};
}
// 项目类型特殊处理（根据SQL字段映射）
if (cardTypeVal.value === "项目") {
if (cardTypeVal.value === '项目') {
return {
...baseData,
// 行政区域 - 使用COUNTY字段
region: item.COUNTY || item.county || item.county_name || "-",
// 影响区域 - 使用COUNTY字段
region: item.COUNTY || item.county || item.county_name || '-',
// 影响点位置 - 使用项目名称
pointLocation: item.PROJECT_NAME || item.projectName || item.name || "-",
pointLocation: item.PROJECT_NAME || item.projectName || item.name || '-',
// 驻地名称
siteName:
item.SITE_NAME ||
item.siteName ||
item.PROJECT_NAME ||
item.projectName ||
"-",
siteName: item.SITE_NAME || item.siteName || item.PROJECT_NAME || item.projectName || '-',
// 吹哨人 - WHISTLEBLOWER_NAME / WHISTLEBLOWER_PHONE
whistleblower: {
name: item.WHISTLEBLOWER_NAME || item.whistleblowerName || "-",
phone: item.WHISTLEBLOWER_PHONE || item.whistleblowerPhone || "-",
name: item.WHISTLEBLOWER_NAME || item.whistleblowerName || '-',
phone: item.WHISTLEBLOWER_PHONE || item.whistleblowerPhone || '-',
},
// 建设单位包保责任人 - OWNER_RESPONSIBLE_PERSON / OWNER_RESPONSIBLE_PHONE
constructionUnit: {
name:
item.OWNER_RESPONSIBLE_PERSON || item.ownerResponsiblePerson || "-",
phone:
item.OWNER_RESPONSIBLE_PHONE || item.ownerResponsiblePhone || "-",
name: item.OWNER_RESPONSIBLE_PERSON || item.ownerResponsiblePerson || '-',
phone: item.OWNER_RESPONSIBLE_PHONE || item.ownerResponsiblePhone || '-',
},
// 施工单位包保责任人 - CONSTRUCTOR_RESPONSIBLE_PERSON / CONSTRUCTOR_RESPONSIBLE_PHONE
constructionDept: {
name:
item.CONSTRUCTOR_RESPONSIBLE_PERSON ||
item.constructorResponsiblePerson ||
"-",
phone:
item.CONSTRUCTOR_RESPONSIBLE_PHONE ||
item.constructorResponsiblePhone ||
"-",
name: item.CONSTRUCTOR_RESPONSIBLE_PERSON || item.constructorResponsiblePerson || '-',
phone: item.CONSTRUCTOR_RESPONSIBLE_PHONE || item.constructorResponsiblePhone || '-',
},
// 驻地包保责任人 - SITE_RESPONSIBLE_PERSON / SITE_RESPONSIBLE_PHONE
siteResponsible: {
name: item.SITE_RESPONSIBLE_PERSON || item.siteResponsiblePerson || "-",
phone: item.SITE_RESPONSIBLE_PHONE || item.siteResponsiblePhone || "-",
name: item.SITE_RESPONSIBLE_PERSON || item.siteResponsiblePerson || '-',
phone: item.SITE_RESPONSIBLE_PHONE || item.siteResponsiblePhone || '-',
},
// 区县级包保责任人 - DISTRICT_RESPONSIBLE_PERSON / DISTRICT_RESPONSIBLE_PHONE
countyResponsible: {
name:
item.DISTRICT_RESPONSIBLE_PERSON ||
item.districtResponsiblePerson ||
"-",
phone:
item.DISTRICT_RESPONSIBLE_PHONE ||
item.districtResponsiblePhone ||
"-",
name: item.DISTRICT_RESPONSIBLE_PERSON || item.districtResponsiblePerson || '-',
phone: item.DISTRICT_RESPONSIBLE_PHONE || item.districtResponsiblePhone || '-',
},
// 市级包保责任人 - CITY_RESPONSIBLE_PERSON / CITY_RESPONSIBLE_PHONE
cityResponsible: {
name: item.CITY_RESPONSIBLE_PERSON || item.cityResponsiblePerson || "-",
phone: item.CITY_RESPONSIBLE_PHONE || item.cityResponsiblePhone || "-",
name: item.CITY_RESPONSIBLE_PERSON || item.cityResponsiblePerson || '-',
phone: item.CITY_RESPONSIBLE_PHONE || item.cityResponsiblePhone || '-',
},
};
}
@ -789,7 +739,7 @@ const processDataByType = (item, type) => {
// 获取数据
const fetchData = async () => {
console.log("获取第", currentPage.value, "页数据, 类型:", cardType.value);
console.log('获取第', currentPage.value, '页数据, 类型:', cardType.value);
try {
const timeParams = getTimeParams();
@ -798,11 +748,11 @@ const fetchData = async () => {
const res = await request({
url: apiUrl,
method: "GET",
method: 'GET',
params: timeParams,
});
// 路段存在分页功能了，需要处理返回数据
if (cardTypeVal.value == "路段") {
if (cardTypeVal.value == '路段') {
if (res.data) {
tableData.value = res.data.map((item, index) => ({
...processDataByType(item, cardType.value),
@ -811,7 +761,7 @@ const fetchData = async () => {
total.value = res.total || 0;
}
} else {
if (res.code === "00000" && res.data) {
if (res.code === '00000' && res.data) {
// 处理返回数据
const allData = res.data;
total.value = allData.length || 0;
@ -831,7 +781,7 @@ const fetchData = async () => {
}
}
} catch (error) {
console.error("获取影响点数据失败:", error);
console.error('获取影响点数据失败:', error);
tableData.value = [];
total.value = 0;
}
@ -840,19 +790,19 @@ const fetchData = async () => {
// 监听visible变化
watch(
() => props.visible,
(newVal) => {
newVal => {
if (newVal) {
filterForm.value = {
pointType: "",
pointLevel: "",
region: "",
pointType: '',
pointLevel: '',
region: '',
};
cardType.value = "0";
cardType.value = '0';
loadBarChartData();
currentPage.value = 1;
fetchData();
}
},
}
);
</script>
@ -869,11 +819,7 @@ watch(
gap: vw(16);
.stat-card {
background: linear-gradient(
135deg,
rgba(30, 70, 120, 0.6) 0%,
rgba(20, 50, 90, 0.8) 100%
);
background: linear-gradient(135deg, rgba(30, 70, 120, 0.6) 0%, rgba(20, 50, 90, 0.8) 100%);
border: vw(2) solid rgba(64, 169, 255, 0.4);
text-align: center;
transition: all 0.3s;

249
packages/screen/src/views/RiskWarning/Dialog/mapInfoDialog.vue
View File

@ -24,9 +24,9 @@
</template>
<script setup>
import { defineProps, defineEmits, computed } from "vue";
import iconProject from "../../../assets/RiskWarning_img/弹窗背景@2x.png";
import iconTunnel from "../../../assets/RiskWarning_img/图标_media_dvr@2x.png";
import { defineProps, defineEmits, computed } from 'vue';
import iconProject from '../../../assets/RiskWarning_img/弹窗背景@2x.png';
import iconTunnel from '../../../assets/RiskWarning_img/图标_media_dvr@2x.png';
const props = defineProps({
visible: {
@ -35,7 +35,7 @@ const props = defineProps({
},
type: {
type: String,
default: "project", // project, tunnel, bridge, road
default: 'project', // project, tunnel, bridge, road
},
data: {
type: Object,
@ -43,23 +43,23 @@ const props = defineProps({
},
});
const emit = defineEmits(["update:visible"]);
const emit = defineEmits(['update:visible']);
const handleClose = () => {
emit("update:visible", false);
emit('update:visible', false);
};
// 根据类型和数据显示不同的标题和内容
const dialogTitle = computed(() => {
const titleMap = {
project: "项目信息",
tunnel: "隧道信息",
bridge: "桥梁信息",
road: "路段信息",
emergency: "抢险队伍",
slope: "边坡信息",
project: '项目信息',
tunnel: '隧道信息',
bridge: '桥梁信息',
road: '路段信息',
emergency: '抢险队伍',
slope: '边坡信息',
};
return titleMap[props.type] || "详细信息";
return titleMap[props.type] || '详细信息';
});
const dialogItems = computed(() => {
@ -67,202 +67,195 @@ const dialogItems = computed(() => {
const type = props.type;
switch (type) {
case "project":
case 'project':
return [
{ label: "项目名称", value: data.PROJECT_NAME || "-" },
{ label: "子项目名称", value: data.SUB_PROJECT_NAME || "-" },
{ label: "行政区域", value: data.ADMINISTRATIVE_REGION || "-" },
{ label: "驻地名称", value: data.SITE_NAME || "-" },
{ label: "驻地地址", value: data.SITE_ADDRESS || data.COUNTY || "-" },
{ label: "驻地人数", value: data.SITE_POPULATION || "-" },
{ label: "驻地类型", value: data.SITE_TYPE || "-" },
{ label: "驻地风险等级", value: data.RISK_LEVEL || "-" },
{ label: "搬迁状态", value: data.RELOCATION_STATUS || "-" },
{ label: "项目类型", value: data.PROJECT_TYPE || "-" },
{ label: "房建类型", value: data.BUILDING_TYPE || "-" },
{ label: "建设单位", value: data.CONSTRUCTION_UNIT || "-" },
{ label: "业主责任人", value: data.OWNER_RESPONSIBLE_PERSON || "-" },
{ label: "业主责任人电话", value: data.OWNER_RESPONSIBLE_PHONE || "-" },
{ label: "施工责任人", value: data.CONSTRUCTOR_RESPONSIBLE_PERSON || "-" },
{ label: "施工责任人电话", value: data.CONSTRUCTOR_RESPONSIBLE_PHONE || "-" },
{ label: "驻地责任人", value: data.SITE_RESPONSIBLE_PERSON || "-" },
{ label: "驻地责任人电话", value: data.SITE_RESPONSIBLE_PHONE || "-" },
{ label: "市级责任人", value: data.CITY_RESPONSIBLE_PERSON || "-" },
{ label: "市级责任人电话", value: data.CITY_RESPONSIBLE_PHONE || "-" },
{ label: "区县责任人", value: data.DISTRICT_RESPONSIBLE_PERSON || "-" },
{ label: "区县责任人电话", value: data.DISTRICT_RESPONSIBLE_PHONE || "-" },
{ label: "吹哨人", value: data.WHISTLEBLOWER_NAME || "-" },
{ label: "吹哨人电话", value: data.WHISTLEBLOWER_PHONE || "-" },
{ label: "备注", value: data.REMARKS || "-" },
{ label: '项目名称', value: data.PROJECT_NAME || '-' },
{ label: '子项目名称', value: data.SUB_PROJECT_NAME || '-' },
{ label: '影响区域', value: data.ADMINISTRATIVE_REGION || '-' },
{ label: '驻地名称', value: data.SITE_NAME || '-' },
{ label: '驻地地址', value: data.SITE_ADDRESS || data.COUNTY || '-' },
{ label: '驻地人数', value: data.SITE_POPULATION || '-' },
{ label: '驻地类型', value: data.SITE_TYPE || '-' },
{ label: '驻地风险等级', value: data.RISK_LEVEL || '-' },
{ label: '搬迁状态', value: data.RELOCATION_STATUS || '-' },
{ label: '项目类型', value: data.PROJECT_TYPE || '-' },
{ label: '房建类型', value: data.BUILDING_TYPE || '-' },
{ label: '建设单位', value: data.CONSTRUCTION_UNIT || '-' },
{ label: '业主责任人', value: data.OWNER_RESPONSIBLE_PERSON || '-' },
{ label: '业主责任人电话', value: data.OWNER_RESPONSIBLE_PHONE || '-' },
{ label: '施工责任人', value: data.CONSTRUCTOR_RESPONSIBLE_PERSON || '-' },
{ label: '施工责任人电话', value: data.CONSTRUCTOR_RESPONSIBLE_PHONE || '-' },
{ label: '驻地责任人', value: data.SITE_RESPONSIBLE_PERSON || '-' },
{ label: '驻地责任人电话', value: data.SITE_RESPONSIBLE_PHONE || '-' },
{ label: '市级责任人', value: data.CITY_RESPONSIBLE_PERSON || '-' },
{ label: '市级责任人电话', value: data.CITY_RESPONSIBLE_PHONE || '-' },
{ label: '区县责任人', value: data.DISTRICT_RESPONSIBLE_PERSON || '-' },
{ label: '区县责任人电话', value: data.DISTRICT_RESPONSIBLE_PHONE || '-' },
{ label: '吹哨人', value: data.WHISTLEBLOWER_NAME || '-' },
{ label: '吹哨人电话', value: data.WHISTLEBLOWER_PHONE || '-' },
{ label: '备注', value: data.REMARKS || '-' },
];
case "tunnel":
case 'tunnel':
return [
{
label: "隧道名称",
value: data.GL1_SDMC || "-",
label: '隧道名称',
value: data.GL1_SDMC || '-',
},
{
label: "建成时间",
value:
data.HEIGHT || data.GL1_SDGD
? `${data.HEIGHT || data.GL1_SDGD}(米)`
: "-",
label: '建成时间',
value: data.HEIGHT || data.GL1_SDGD ? `${data.HEIGHT || data.GL1_SDGD}(米)` : '-',
},
{
label: "编号",
value: data.GL1_ZJ || "-",
label: '编号',
value: data.GL1_ZJ || '-',
},
{
label: "入口桩号",
value: data.GL1_RKZH || "-",
label: '入口桩号',
value: data.GL1_RKZH || '-',
},
{
label: "所属区县",
value: data.GL1_QXMC || "-",
label: '所属区县',
value: data.GL1_QXMC || '-',
},
{
label: "隧道净宽",
value: data.GL1_SDJG || "-",
label: '隧道净宽',
value: data.GL1_SDJG || '-',
},
{
label: "隧道净高",
value: data.GL1_SDJK || "-",
label: '隧道净高',
value: data.GL1_SDJK || '-',
},
{
label: "隧道长度",
value: data.GL1_SDC || "-",
label: '隧道长度',
value: data.GL1_SDC || '-',
},
{
label: "路线编号",
value: data.GL1_LXBH || "-",
label: '路线编号',
value: data.GL1_LXBH || '-',
},
{
label: "长度分类",
value: data.GL1_SDLX || "-",
label: '长度分类',
value: data.GL1_SDLX || '-',
},
{
label: "路线名称",
value: data.GL1_LXMC || "-",
label: '路线名称',
value: data.GL1_LXMC || '-',
},
{
label: "评定等级",
value: data.GL1_PDDJ || "-",
label: '评定等级',
value: data.GL1_PDDJ || '-',
},
];
case "bridge":
case 'bridge':
return [
{
label: "桥梁名称",
value: data.GL1_QLMC || "-",
label: '桥梁名称',
value: data.GL1_QLMC || '-',
},
{
label: "编号",
value: data.GL1_QLDM || "-",
label: '编号',
value: data.GL1_QLDM || '-',
},
{
label: "所属区县",
value: data.GL1_QXMC || "-",
label: '所属区县',
value: data.GL1_QXMC || '-',
},
{
label: "桥梁长度",
value: data.GL1_QLQC || "-",
label: '桥梁长度',
value: data.GL1_QLQC || '-',
},
{
label: "路线编号",
value: data.GL1_QLDM || "-",
label: '路线编号',
value: data.GL1_QLDM || '-',
},
{
label: "路线名称",
value: data.GL1_LXMC || "-",
label: '路线名称',
value: data.GL1_LXMC || '-',
},
{
label: "建成时间",
value: data.TYPE || "-",
label: '建成时间',
value: data.GL1_GXSJ,
},
{
label: "中心桩号",
value: data.GL1_ZXZH || "-",
label: '中心桩号',
value: data.GL1_ZXZH || '-',
},
{
label: "跨径总长",
value: data.GL1_AKJFLDM || "-",
label: '跨径总长',
value: data.GL1_AKJFLDM || '-',
},
{
label: "跨径分类",
value: data.GL1_AKJFLLX || "-",
label: '跨径分类',
value: data.GL1_AKJFLLX || '-',
},
{
label: "技术状况",
value: data.GL1_PDDJ || "-",
label: '技术状况',
value: data.GL1_JSZKPJDJ || '-',
},
];
case "road":
case 'road':
return [
{
label: "区县名称",
value: data.GL1_QXMC || "-",
label: '区县名称',
value: data.GL1_QXMC || '-',
},
{
label: "风险等级",
value: data.GL1_JSDJ || "-",
label: '风险等级',
value: data.GL1_FXDJ || '',
},
{
label: "公路编号",
value: data.GL1_LXBH || "-",
label: '公路编号',
value: data.GL1_GLBH,
},
{
label: "位置",
value: data.GL1_QDMC + '-' + data.GL1_ZDMC || "-",
label: '位置',
value: data.GL1_GLMC ,
},
{
label: "风险描述",
value:
data.LENGTH || data.GL1_LDCD
? `${data.LENGTH || data.GL1_LDCD}(公里)`
: "-",
label: '风险描述',
value: data.GL1_FXMS || '-',
},
{
label: "采取措施",
value:
data.PAVEMENT_TYPE || data.pavementType || data.GL1_LMLX || "-",
label: '采取措施',
value: data.GL1_CQCS || '-',
},
{
label: "照片",
value: data.photos || data.photos || "-",
label: '照片',
value: data.photos || data.photos || '-',
},
];
case "emergency":
case 'emergency':
return [
{ label: "队伍名称", value: data.gl1Yjllmc || "-" },
{ label: "防范状态", value: data.COUNTY || data.county || "-" },
{ label: "人数", value: data.gl1Rysl || "-" },
{ label: "联系人", value: data.gl1Lxr || "-" },
{ label: "地址", value: data.gl1Xxdz || "-" },
{ label: "物资装备", value: data.COUNTY || data.county || "-" },
{ label: "照片", value: data.photos || data.photos || '-' },
{ label: '队伍名称', value: data.gl1Yjllmc || '-' },
{ label: '防范状态', value: data.preventionStatus || '-' },
{ label: '人数', value: data.gl1Rysl || '-' },
{ label: '联系人', value: data.gl1Lxr || '-' },
{ label: '地址', value: data.gl1Xxdz || '-' },
{ label: '物资装备', value: data.materialsAndEquipments || '-' },
{ label: '照片', value: data.photos || data.photos || '-' },
];
case "slope":
case 'slope':
return [
{ label: "边坡坡长(km)", value: data.NAME || data.name || "-" },
{ label: "边坡最大高度(m)", value: data.COUNTY || data.county || "-" },
{ label: "边坡构成", value: data.COUNTY || data.county || "-" },
{ label: "风险等级", value: data.COUNTY || data.county || "-" },
{ label: "支护形式", value: data.COUNTY || data.county || "-" },
{ label: "监测设施设置", value: data.COUNTY || data.county || "-" },
{ label: "起点桩号", value: data.photos || data.photos || [] },
{ label: "止点桩号", value: data.photos || data.photos || [] },
{ label: '边坡坡长(km)', value: data.NAME || data.name || '-' },
{ label: '边坡最大高度(m)', value: data.COUNTY || data.county || '-' },
{ label: '边坡构成', value: data.COUNTY || data.county || '-' },
{ label: '风险等级', value: data.COUNTY || data.county || '-' },
{ label: '支护形式', value: data.COUNTY || data.county || '-' },
{ label: '监测设施设置', value: data.COUNTY || data.county || '-' },
{ label: '起点桩号', value: data.photos || data.photos || [] },
{ label: '止点桩号', value: data.photos || data.photos || [] },
];
default:
return [
{ label: "名称", value: data.NAME || data.name || "-" },
{ label: "所属区县", value: data.COUNTY || data.county || "-" },
{ label: '名称', value: data.NAME || data.name || '-' },
{ label: '所属区县', value: data.COUNTY || data.county || '-' },
];
}
});

278
packages/screen/src/views/RiskWarning/Dialog/offlineHelpDialog.vue Normal file
View File

@ -0,0 +1,278 @@
<template>
<base-dialog
v-model:visible="props.visible"
title="线下帮扶"
:table-data="tableData"
:table-columns="tableColumns"
:table-height="350"
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:z-index="1000"
:max-width="1100"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@close="handleClose"
>
<!-- 筛选区域插槽 -->
<template #filter>
<div class="filter-row">
<div class="filter-item">
<span class="filter-label">帮扶区县</span>
<el-select
:teleported="false"
v-model="filterForm.county"
placeholder="请选择"
class="filter-select"
clearable
>
<el-option
v-for="option in countyOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</div>
<div class="filter-item">
<el-button type="primary" class="search-btn" @click="handleSearch">
<el-icon><Search /></el-icon>
查询
</el-button>
</div>
</div>
</template>
<!-- 附件列插槽 -->
<template #attachment="{ row }">
<span class="clickable-cell" @click="handleAttachmentClick(row)">
{{ row.attachment }}
</span>
</template>
</base-dialog>
</template>
<script setup>
import { ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import baseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request';
import { regionOptions } from '../component/index.js';
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['update:visible', 'close']);
// 筛选表单
const filterForm = ref({
county: '',
});
// 区县选项（可从接口获取或本地配置）
const countyOptions = ref(regionOptions);
// 表格列配置
const tableColumns = ref([
{ prop: 'id', label: '序号', width: '' },
{ prop: 'helpTime', label: '帮扶时间', width: '' },
{ prop: 'county', label: '帮扶区县', width: '' },
{ prop: 'helper', label: '帮扶人员', width: '' },
{ prop: 'helpPoint', label: '帮扶点位', width: '' },
{ prop: 'helpSituation', label: '帮扶情况', width: '' },
{ prop: 'attachment', label: '附件', width: '', slot: 'attachment' },
{ prop: 'uploadTime', label: '上传时间', width: '' },
{ prop: 'remark', label: '备注', width: '' },
]);
// 表格数据
const tableData = ref([]);
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
// 关闭对话框
const handleClose = () => {
emit('update:visible', false);
emit('close');
};
// 查询
const handleSearch = () => {
currentPage.value = 1;
fetchData();
};
// 分页操作
const handleSizeChange = (val) => {
pageSize.value = val;
fetchData();
};
const handleCurrentChange = (val) => {
currentPage.value = val;
fetchData();
};
// 点击附件
const handleAttachmentClick = (row) => {
console.log('点击附件:', row);
// 实际项目中实现附件查看或下载
};
// 获取线下帮扶数据
const fetchData = async () => {
try {
const params = {
county: filterForm.value.county,
offset: (currentPage.value - 1) * pageSize.value,
limit: pageSize.value,
};
// TODO: 替换为实际接口地址
const res = await request({
url: '/snow-ops-platform/offline-help/list',
method: 'GET',
params,
});
if (res && res.data) {
tableData.value = res.data.map((item, index) => ({
id: (currentPage.value - 1) * pageSize.value + index + 1,
helpTime: item.helpTime || '-',
county: item.county || '-',
helper: item.helper || '-',
helpPoint: item.helpPoint || '-',
helpSituation: item.helpSituation || '-',
attachment: item.attachment || '查看',
uploadTime: item.uploadTime || '-',
remark: item.remark || '-',
}));
total.value = res.total || res.data.length;
}
} catch (error) {
console.error('获取线下帮扶数据失败:', error);
}
};
// 监听visible变化
watch(
() => props.visible,
(newVal) => {
if (newVal) {
currentPage.value = 1;
fetchData();
}
}
);
</script>
<style lang="scss" scoped>
// 筛选区域样式
.filter-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.filter-item {
display: flex;
align-items: center;
gap: 8px;
.filter-label {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
white-space: nowrap;
}
.filter-select {
width: 140px;
:deep(.el-input__wrapper) {
background-color: rgba(30, 70, 120, 0.4);
border: 1px solid rgba(64, 169, 255, 0.3);
box-shadow: none;
border-radius: 4px;
.el-input__inner {
color: #fff;
font-size: 13px;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
.el-input__suffix {
.el-icon {
color: rgba(255, 255, 255, 0.6);
}
}
}
}
.search-btn {
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
border: none;
border-radius: 4px;
padding: 0 20px;
height: 32px;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
&:hover {
background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
}
.el-icon {
font-size: 14px;
}
}
}
// 可点击单元格样式
.clickable-cell {
cursor: pointer;
color: #40a9ff;
font-weight: 500;
transition: all 0.3s;
&:hover {
color: #69c0ff;
text-shadow: 0 0 8px rgba(105, 192, 255, 0.6);
}
}
// 下拉菜单样式
:deep(.el-select-dropdown) {
background-color: rgba(20, 50, 90, 0.98);
border: 1px solid rgba(64, 169, 255, 0.3);
.el-select-dropdown__item {
color: rgba(255, 255, 255, 0.85);
&:hover {
background-color: rgba(64, 169, 255, 0.2);
}
&.selected {
background-color: rgba(64, 169, 255, 0.3);
color: #40a9ff;
}
}
}
</style>

199
packages/screen/src/views/RiskWarning/Dialog/responseStatusDialog.vue
View File

@ -9,7 +9,7 @@
:current-page="currentPage"
:page-size="pageSize"
:z-index="1000"
:max-width="1150"
:max-width="1300"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@close="handleClose"
@ -113,7 +113,10 @@
<!-- 公路机构责任人列插槽 -->
<template #roadOrg="{ row }">
<div class="person-info">
<span class="person-name">{{ row.roadOrg.name }}</span>
<div class="person-name center">
<span style="margin-right: 5px">{{ row.roadOrg.name }}</span>
<img :src="row.roadOrg.img" class="response-icon" alt="" />
</div>
<span class="person-phone">{{ row.roadOrg.phone }}</span>
</div>
</template>
@ -121,7 +124,10 @@
<!-- 养护站负责人列插槽 -->
<template #maintenance="{ row }">
<div class="person-info">
<span class="person-name">{{ row.maintenance.name }}</span>
<div class="person-name center">
<span style="margin-right: 5px">{{ row.maintenance.name }}</span>
<img :src="row.maintenance.img" class="response-icon" alt="" />
</div>
<span class="person-phone">{{ row.maintenance.phone }}</span>
</div>
</template>
@ -129,7 +135,10 @@
<!-- 护路员列插槽 -->
<template #roadKeeper="{ row }">
<div class="person-info">
<span class="person-name">{{ row.roadKeeper.name }}</span>
<div class="person-name center">
<span style="margin-right: 5px">{{ row.roadKeeper.name }}</span>
<img :src="row.roadKeeper.img" class="response-icon" alt="" />
</div>
<span class="person-phone">{{ row.roadKeeper.phone }}</span>
</div>
</template>
@ -159,7 +168,7 @@
<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { pointTypeOptions, pointLevelOptions, isRespondedOptions } from '../component/index.js';
import { pointTypeOptions, pointLevelOptions, isRespondedOptions, formatDateTime } from '../component/index.js';
import baseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request.js';
@ -179,6 +188,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
dispatchDateRange: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['update:visible', 'close', 'detail']);
@ -194,8 +207,8 @@ const cardType = ref('0');
// 统计卡片数据
const statsCardsData = ref([
{ type: '桥梁', label: '影响桥梁', value: 0, icon: Icon0 },
{ type: '路段', label: '影响路段', value: 0, icon: Icon4 },
{ type: '桥梁', label: '影响桥梁', value: 0, icon: Icon0 },
{ type: '隧道', label: '影响隧道', value: 0, icon: Icon2 },
{ type: '边坡', label: '影响边坡', value: 0, icon: Icon1 },
{ type: '项目', label: '影响项目', value: 0, icon: Icon3 },
@ -207,68 +220,17 @@ const tableColumns = ref([
{ 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: 'checkCount', label: '巡查次数', width: '' },
{ prop: 'trafficDept', label: '交通主管部门负责人', width: '100px', slot: 'trafficDept' },
{ prop: 'roadOrg', label: '公路机构责任人', width: '100px', slot: 'roadOrg' },
{ prop: 'maintenance', label: '养护站负责人', width: '100px', slot: 'maintenance' },
{ prop: 'roadKeeper', label: '护路员', width: '100px', slot: 'roadKeeper' },
{ prop: 'urgeTime', label: '最新催告时间', width: '', slot: 'urgeTime' },
{ prop: 'operation', label: '操作', width: '', slot: 'operation' },
]);
// 表格数据
const tableData = ref([
{
id: 1,
pointType: '边坡',
pointLocation: '武汉-大理(K1452+951至K1462+209)',
pointLevel: '一般隐患',
levelClass: 'level-normal',
checkCount: 2,
trafficDept: {
name: '罗宸',
phone: '17623865172',
img: respondedIcon,
isResponded: true,
},
roadOrg: {
name: '李海平',
phone: '1372386532',
img: notRespondedIcon,
isResponded: false,
},
maintenance: {
name: '苏祖兵',
phone: '13594331090',
img: notRespondedIcon,
isResponded: false,
},
roadKeeper: {
name: '凌承礼',
phone: '1592393704',
img: respondedIcon,
isResponded: true,
},
responseStatus: '已回应',
responseClass: 'status-responded',
urgeTime: { date: '2026-03-28', time: '12:30:00' },
},
{
id: 12,
pointType: '边坡',
pointLocation: '武汉-大理(K1452+951至K1462+209)',
pointLevel: '一般隐患',
levelClass: 'level-normal',
checkCount: 2,
trafficDept: { name: '罗宸', phone: '17623865172' },
roadOrg: { name: '李海平', phone: '1372386532' },
maintenance: { name: '苏祖兵', phone: '13594331090' },
roadKeeper: { name: '凌承礼', phone: '1592393704' },
responseStatus: '已回应',
responseClass: 'status-responded',
urgeTime: { date: '2026-03-28', time: '12:30:00' },
},
]);
const tableData = ref([]);
// 分页
const currentPage = ref(1);
@ -341,10 +303,100 @@ const handleCurrentChange = val => {
fetchData();
};
// 获取数据
const fetchData = () => {
console.log('获取第', currentPage.value, '页数据');
// 实际项目中调用API获取数据
// 获取通知实体数据
const fetchData = async () => {
try {
const params = {
start: '',
end: '',
};
if (props.dispatchDateRange && props.dispatchDateRange.length > 0) {
params.start = formatDateTime(props.dispatchDateRange[0]) || '';
params.end = formatDateTime(props.dispatchDateRange[1]) || '';
}
const res = await request({
url: '/snow-ops-platform/weather-warning/notice-entity',
method: 'GET',
params,
});
if (res && res.data) {
tableData.value = res.data.map((item, index) => {
// 从 events 中提取不同角色的人员信息
const trafficDeptEvent = item.events?.find(e => e.noticeRoles?.includes('交通主管')) || {};
const roadKeeperEvent = item.events?.find(e => e.noticeRoles?.includes('护路员')) || {};
const roadOrgEvent = item.events?.find(e => e.noticeRoles?.includes('公路机构')) || {};
const maintenanceEvent = item.events?.find(e => e.noticeRoles?.includes('养护站')) || {};
// 获取最新的催告时间
const lastNoticeTime = item.events?.[0]?.lastNoticeTime || '';
const urgeTimeParts = lastNoticeTime ? lastNoticeTime.split('T') : ['', ''];
return {
id: index + 1,
pointType: getTypeLabel(item.type),
pointLocation: item.address || '-',
pointLevel: item.riskLevel || '-',
levelClass: getLevelClass(item.riskLevel),
checkCount: item.inspectedCount || 0,
trafficDept: {
name: trafficDeptEvent.noticeName || '-',
phone: trafficDeptEvent.noticePhone || '-',
img: trafficDeptEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
isResponded: trafficDeptEvent.replyState === 'read',
},
roadOrg: {
name: roadOrgEvent.noticeName || '-',
phone: roadOrgEvent.noticePhone || '-',
img: roadOrgEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
isResponded: roadOrgEvent.replyState === 'read',
},
maintenance: {
name: maintenanceEvent.noticeName || '-',
phone: maintenanceEvent.noticePhone || '-',
img: maintenanceEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
isResponded: maintenanceEvent.replyState === 'read',
},
roadKeeper: {
name: roadKeeperEvent.noticeName || '-',
phone: roadKeeperEvent.noticePhone || '-',
img: roadKeeperEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
isResponded: roadKeeperEvent.replyState === 'read',
},
urgeTime: {
date: urgeTimeParts[0] || '-',
time: urgeTimeParts[1] ? urgeTimeParts[1].substring(0, 8) : '-',
},
};
});
total.value = res.data.length;
}
} catch (error) {
console.error('获取通知实体数据失败:', error);
}
};
// 类型映射
const getTypeLabel = (type) => {
const typeMap = {
'road-section': '路段',
'road_section': '路段',
'roadSection': '路段',
bridge: '桥梁',
tunnel: '隧道',
slope: '边坡',
project: '项目',
};
return typeMap[type] || type || '-';
};
// 根据风险等级获取样式类
const getLevelClass = (riskLevel) => {
if (!riskLevel) return '';
if (riskLevel.includes('高')) return 'level-serious';
if (riskLevel.includes('一般')) return 'level-normal';
return '';
};
// 监听visible变化
@ -357,6 +409,19 @@ watch(
}
}
);
// 监听日期范围变化
watch(
() => props.dispatchDateRange,
() => {
if (props.visible) {
currentPage.value = 1;
fetchData();
}
},
{ deep: true }
);
onMounted(() => {
// 初始化加载顶部卡片数据
loadBarChartData();

10
packages/screen/src/views/RiskWarning/Dialog/tongnanInfoDialog.vue
View File

@ -67,11 +67,11 @@ const emit = defineEmits(['update:visible', 'close', 'video', 'voice', 'call', '
// 表格列配置
const tableColumns = ref([
{ prop: 'id', label: '序号', width: '60px' },
{ prop: 'region', label: '区县/镇街', width: '140px' },
{ prop: 'name', label: '姓名', width: '100px' },
{ prop: 'phone', label: '电话', width: '120px' },
{ prop: 'stationName', label: '驻地名称', width: '180px', slot: 'stationName' },
{ prop: 'id', label: '序号', width: '' },
{ prop: 'region', label: '区县/镇街', width: '' },
{ prop: 'name', label: '姓名', width: '' },
{ prop: 'phone', label: '电话', width: '' },
// { prop: 'stationName', label: '驻地名称', width: '180px', slot: 'stationName' },
{ prop: 'type', label: '类型', width: 'auto' },
{ prop: 'operation', label: '调度', width: '140px', slot: 'operation' },
]);

186
packages/screen/src/views/RiskWarning/Dialog/warningInfoDialog.vue
View File

@ -18,7 +18,8 @@
<template #filter>
<div class="filter-row">
<div class="filter-item">
<el-select :teleported="false"
<el-select
:teleported="false"
v-model="filterForm.warningLevel"
placeholder="预警等级"
class="filter-select"
@ -32,13 +33,14 @@
</el-select>
</div>
<div class="filter-item">
<el-select :teleported="false"
<el-select
:teleported="false"
v-model="filterForm.region"
placeholder="行政区域"
placeholder="影响区域"
class="filter-select"
>
<el-option
v-for="option in regionOptionsWithAll"
v-for="option in regionOptions"
:key="option.value"
:label="option.label"
:value="option.value"
@ -46,7 +48,8 @@
</el-select>
</div>
<div class="filter-item">
<el-select :teleported="false"
<el-select
:teleported="false"
v-model="filterForm.isEnded"
placeholder="是否结束"
class="filter-select"
@ -60,11 +63,11 @@
</el-select>
</div>
<div class="filter-item">
<el-select :teleported="false"
<el-select
:teleported="false"
v-model="filterForm.isResponded"
placeholder="是否回应"
class="filter-select"
>
<el-option
v-for="option in isRespondedOptions"
@ -96,82 +99,56 @@
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import baseDialog from "../component/baseDialog.vue";
import { ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import baseDialog from '../component/baseDialog.vue';
import { formatDateTime } from '../component/index.js';
import { request } from '@/utils/request';
import {
warningLevelOptions,
regionOptionsWithAll,
regionOptions,
isEndedOptions,
isRespondedOptions,
} from "../component/index.js";
} from '../component/index.js';
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
dispatchDateRange: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(["update:visible", "close", "openImpactPoint"]);
const emit = defineEmits(['update:visible', 'close', 'openImpactPoint']);
// 筛选表单
const filterForm = ref({
warningLevel: "",
region: "",
isEnded: "",
isResponded: "",
warningLevel: '',
region: '',
isEnded: '',
isResponded: '',
});
// 表格列配置
const tableColumns = ref([
{ prop: "id", label: "序号", width: "" },
{ prop: "weatherSource", label: "气象来源", width: "" },
{ prop: "warningLevel", label: "预警等级", width: "", slot: "warningLevel" },
{ prop: "region", label: "行政区域", width: "" },
{ prop: "warningTime", label: "预警时间", width: "" },
{ prop: "endTime", label: "结束时间", width: "" },
{ prop: "impactPoints", label: "影响点数量", width: "" },
{ prop: "called", label: "已叫应", width: "", slot: "called" },
{ prop: "responded", label: "已回应", width: "" },
{ prop: "notResponded", label: "未回应", width: "" },
{ prop: "urged", label: "已催告", width: "" },
{ prop: 'id', label: '序号', width: '' },
{ prop: 'weatherSource', label: '气象来源', width: '' },
{ prop: 'warningLevel', label: '预警等级', width: '', slot: 'warningLevel' },
{ prop: 'region', label: '影响区域', width: '' },
{ prop: 'warningTime', label: '预警时间', width: '' },
{ prop: 'endTime', label: '结束时间', width: '' },
{ prop: 'impactPoints', label: '影响点数量', width: '' },
{ prop: 'called', label: '已叫应', width: '', slot: 'called' },
{ prop: 'responded', label: '已回应', width: '' },
{ prop: 'notResponded', label: '未回应', width: '' },
{ prop: 'urged', label: '已催告', width: '' },
]);
// 表格数据
const tableData = ref([
{
id: 1,
weatherSource: "气象局",
warningLevel: "红色预警",
levelClass: "level-red",
region: "万州区",
warningTime: "2025-08-11 04:53:42",
endTime: "2025-08-11 04:53:42",
impactPoints: 4,
called: 2,
responded: 2,
notResponded: 2,
urged: 22,
},
{
id: 2,
weatherSource: "气象局",
warningLevel: "橙色预警",
levelClass: "level-orange",
region: "涪陵区",
warningTime: "2025-08-11 04:53:42",
endTime: "2025-08-11 04:53:42",
impactPoints: 0,
called: 0,
responded: 0,
notResponded: 0,
urged: 18,
},
]);
tableData.value.push(...tableData.value);
tableData.value.push(...tableData.value);
tableData.value.push(...tableData.value);
const tableData = ref([]);
// 分页
const currentPage = ref(1);
@ -190,7 +167,7 @@ const headerCellStyle = () => {
fontWeight: '500',
textAlign: 'center',
padding: '12px 16px',
border: 'none'
border: 'none',
};
};
@ -201,56 +178,117 @@ const cellStyle = () => {
fontSize: '13px',
textAlign: 'center',
padding: '12px 16px',
border: 'none'
border: 'none',
};
};
// 关闭对话框
const handleClose = () => {
emit("update:visible", false);
emit("close");
emit('update:visible', false);
emit('close');
};
// 点击遮罩关闭已由base-dialog组件处理
// 点击已叫应
const handleCalledClick = () => {
emit("responseStatus");
emit('responseStatus');
};
// 查询
const handleSearch = () => {
console.log("查询条件:", filterForm.value);
console.log('查询条件:', filterForm.value);
currentPage.value = 1;
fetchData();
};
// 分页操作
const handleSizeChange = (val) => {
const handleSizeChange = val => {
pageSize.value = val;
fetchData();
};
const handleCurrentChange = (val) => {
const handleCurrentChange = val => {
currentPage.value = val;
fetchData();
};
// 获取数据
const fetchData = () => {
console.log("获取第", currentPage.value, "页数据");
// 实际项目中调用API获取数据
// 获取预警通知统计
const fetchData = async () => {
try {
console.log(props.dispatchDateRange);
const params = {
start: '',
end: '',
offset: (currentPage.value - 1) * pageSize.value,
limit: pageSize.value,
};
if (props.dispatchDateRange.length > 0) {
params.start = formatDateTime(props.dispatchDateRange[0]) || '';
params.end = formatDateTime(props.dispatchDateRange[1]) || '';
}
const res = await request({
url: '/snow-ops-platform/weather-warning/notice-count',
method: 'GET',
params,
});
console.log(res);
if (res) {
// 映射数据到表格格式
tableData.value = res.data.map((item, index) => ({
id: (currentPage.value - 1) * pageSize.value + index + 1,
weatherSource: item.source || '-',
warningLevel: item.riskLevel || '-',
levelClass: getLevelClass(item.riskLevel),
region: item.countyName || '-',
warningTime: item.onset || '-',
endTime: item.expire || '-',
impactPoints: item.affectedCount || 0,
called: item.notifyCount || 0,
responded: item.replyCount || 0,
notResponded: (item.notifyCount || 0) - (item.replyCount || 0),
urged: item.retryCount || 0,
}));
total.value = res.total || res.data.length;
}
} catch (error) {
console.error('获取预警通知统计失败:', error);
}
};
// 根据预警等级获取样式类
const getLevelClass = riskLevel => {
if (!riskLevel) return '';
if (riskLevel.includes('红')) return 'level-red';
if (riskLevel.includes('橙')) return 'level-orange';
if (riskLevel.includes('黄')) return 'level-yellow';
if (riskLevel.includes('蓝')) return 'level-blue';
return '';
};
// 监听visible变化
watch(
() => props.visible,
(newVal) => {
newVal => {
if (newVal) {
currentPage.value = 1;
fetchData();
}
}
);
// 监听日期范围变化
watch(
() => props.dispatchDateRange,
() => {
if (props.visible) {
currentPage.value = 1;
fetchData();
}
},
{ deep: true }
);
</script>

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

@ -34,7 +34,7 @@
</el-select>
</div>
<div class="filter-item">
<span class="filter-label">行政区域</span>
<span class="filter-label">影响区域</span>
<el-select
v-model="filterForm.countyName"
placeholder="请选择"

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

@ -557,7 +557,7 @@ const getEmergencyForceData = async () => {
try {
const timeParams = getTimeParams();
const res = await request({
url: '/snow-ops-platform/yhYjll/list',
url: '/snow-ops-platform/yhYjll/listForcesAndMaterials',
method: 'GET',
params: timeParams,
});
@ -565,10 +565,8 @@ const getEmergencyForceData = async () => {
if (res.code === '00000' && res.data) {
// 解析坐标数据
res.data.forEach(item => {
if (item.gl1Lx == 1 || item.gl1Lx == 2) {
item.COORDINATE_POINT = [item.gl1Lng, item.gl1Lat];
item.COORDINATE_POINT = [item.lng, item.lat];
console.log('解析后坐标:', item.COORDINATE_POINT);
}
});
emergencyForceData.value = res.data;

82
packages/screen/src/views/RiskWarning/component/baseDialog.vue
View File

@ -37,9 +37,8 @@
<slot name="filter"></slot>
</div>
<!-- 数据表格 -->
<div class="table-section" v-if="props.tableShow">
<div class="table-section" v-if="props.tableColumns.length > 0">
<el-table
v-if="props.tableData.length > 0"
:data="props.tableData"
:height="props.tableHeight"
style="width: 100%; min-height: 300px"
@ -80,11 +79,11 @@
</template>
<script setup>
import { ref, watch } from "vue";
import { Close } from "@element-plus/icons-vue";
import { ref, watch } from 'vue';
import { Close } from '@element-plus/icons-vue';
const props = defineProps({
tableShow: {
tableShow: {
// 是否显示表格
type: Boolean,
default: true,
@ -97,7 +96,7 @@ const props = defineProps({
title: {
// 弹窗标题
type: String,
default: "弹窗标题",
default: '弹窗标题',
},
zIndex: {
// 弹窗z-index
@ -162,18 +161,18 @@ const props = defineProps({
});
const emit = defineEmits([
"update:visible",
"close",
"size-change",
"current-change",
"update:current-page",
"update:page-size",
'update:visible',
'close',
'size-change',
'current-change',
'update:current-page',
'update:page-size',
]);
// 关闭对话框
const handleClose = () => {
emit("update:visible", false);
emit("close");
emit('update:visible', false);
emit('close');
};
// 点击遮罩关闭
@ -184,45 +183,45 @@ const handleOverlayClick = () => {
// 监听visible变化
watch(
() => props.visible,
(newVal) => {
newVal => {
if (newVal) {
// 弹窗打开时的逻辑
}
},
}
);
// 分页操作
const handleSizeChange = (val) => {
emit("update:page-size", val);
emit("size-change", val);
const handleSizeChange = val => {
emit('update:page-size', val);
emit('size-change', val);
};
const handleCurrentChange = (val) => {
emit("update:current-page", val);
emit("current-change", val);
const handleCurrentChange = val => {
emit('update:current-page', val);
emit('current-change', val);
};
// 表格样式
const headerCellStyle = () => {
return {
backgroundColor: "#1D5194",
color: "#fff",
fontSize: "14px",
fontWeight: "500",
textAlign: "center",
padding: "5px 0px",
border: "none",
backgroundColor: '#1D5194',
color: '#fff',
fontSize: '14px',
fontWeight: '500',
textAlign: 'center',
padding: '5px 0px',
border: 'none',
};
};
const cellStyle = () => {
return {
backgroundColor: "#16334E",
color: "rgba(255, 255, 255, 0.85)",
fontSize: "13px",
textAlign: "center",
padding: "5px 0px",
border: "none",
backgroundColor: '#16334E',
color: 'rgba(255, 255, 255, 0.85)',
fontSize: '13px',
textAlign: 'center',
padding: '5px 0px',
border: 'none',
};
};
</script>
@ -244,7 +243,7 @@ const cellStyle = () => {
}
.base-dialog {
width: 80vw;
// width: 80vw;
max-height: 80vh;
position: relative;
background: #16334e;
@ -299,7 +298,7 @@ const cellStyle = () => {
width: 100%;
.header-title {
background-image: url("../../../assets/RiskWarning_img/标题@2x.png");
background-image: url('../../../assets/RiskWarning_img/标题@2x.png');
background-size: 100% 100%;
background-position: right;
font-size: 18px;
@ -332,12 +331,13 @@ const cellStyle = () => {
// 标题栏下方自定义插槽
.header-slot {
margin-bottom: 20px;
padding: 0 24px;
// margin-bottom: 20px;
padding: 0 24px 20px 24px;
// overflow-y: auto;
max-height: 70vh;
scrollbar-width: none;
-ms-overflow-style: none;
overflow: hidden;
&::-webkit-scrollbar {
display: none;
@ -481,11 +481,11 @@ const cellStyle = () => {
background-color: #122c46 !important;
}
:deep(.el-popper[data-popper-placement^="bottom"]) {
:deep(.el-popper[data-popper-placement^='bottom']) {
border: 1px solid #122c46 !important;
}
:deep(.el-popper[data-popper-placement^="top"]) {
:deep(.el-popper[data-popper-placement^='top']) {
border: 1px solid #122c46 !important;
}

8
packages/screen/src/views/RiskWarning/component/index.js
View File

@ -2,7 +2,7 @@
import { ref } from 'vue';
import { request } from '@/utils/request';
// 行政区域选项
// 影响区域选项
export const regionOptions = ref([
// { label: "重庆市", value: "重庆市" },
// { label: "万州区", value: "万州区" },
@ -18,7 +18,7 @@ export const regionOptions = ref([
// { label: "江北区", value: "江北区" },
]);
// 获取行政区域选项
// 获取影响区域选项
export const fetchDistrictOptions = async () => {
try {
const res = await request({
@ -39,7 +39,7 @@ export const fetchDistrictOptions = async () => {
return options;
}
} catch (error) {
console.error('获取行政区域选项失败:', error);
console.error('获取影响区域选项失败:', error);
}
return regionOptions.value;
};
@ -125,7 +125,7 @@ export const isEndedOptions = [
{ label: "否", value: false },
];
// 行政区域选项（带全部）
// 影响区域选项（带全部）
export const regionOptionsWithAll = ref([
]);

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

@ -30,12 +30,14 @@
@warningClick="handleWarningClick"
@openImpactDetail="openDialog('impactPoint')"
@openWarningInfo="openDialog('warningInfo')"
@dispatchDateRange="handleDispatchDateRange"
@openImpactPoint="openDialog('impactPoint')"
@openAIResult="openDialog('aiWarningResult')"
@openWarningSituation="openDialog('warningSituation')"
@openResponseStatus="openDialog('responseStatus')"
@openDispatchDistrict="openDialog('dispatchDistrict')"
@showCenterCard="item => handleCenterCardClick(item)"
@openOfflineHelp="openDialog('offlineHelp')"
></left>
</div>
<div class="right">
@ -96,6 +98,7 @@
<!-- 预警信息对话框 -->
<warningInfoDialog
:dispatchDateRange="dispatchDateRange"
v-model:visible="dialogVisible.warningInfo"
@close="closeDialog('warningInfo')"
@responseStatus="openDialog('responseStatus')"
@ -103,6 +106,7 @@
<!-- 事件详情对话框 -->
<eventDetailDialog
:eventData="clearanceSituationDialogItemData"
v-model:visible="dialogVisible.eventDetail"
@close="closeDialog('eventDetail')"
/>
@ -154,6 +158,7 @@
<!-- 响应状态对话框 -->
<responseStatusDialog
:dispatchDateRange="dispatchDateRange"
v-model:visible="dialogVisible.responseStatus"
@close="closeDialog('responseStatus')"
@detail="openDialog('responsePointDetail')"
@ -193,6 +198,7 @@
v-model:visible="dialogVisible.clearanceSituation"
@close="closeDialog('clearanceSituation')"
@detail="openDialog('eventDetail')"
@itemdata="handleItemData"
/>
<!-- 管控情况对话框 -->
@ -243,6 +249,12 @@
:data="hazardPointData"
@close="closeDialog('hazardPointSituation')"
/>
<offlineHelpDialog
v-model:visible="dialogVisible.offlineHelp"
@close="closeDialog('offlineHelp')"
/>
</div>
</div>
</template>
@ -282,6 +294,7 @@ import tunnelInfoDialog from './Dialog/tunnelInfoDialog.vue';
import centerInfoCard from './Dialog/centerInfoCard.vue';
import tongnanProjectPersonDialog from './Dialog/tongnanProjectPersonDialog.vue';
import hazardPointSituationDialog from './Dialog/hazardPointSituationDialog.vue';
import offlineHelpDialog from './Dialog/offlineHelpDialog.vue';
import './component/el-select.scss';
import './component/date-picker-theme.scss';
@ -310,6 +323,7 @@ const dialogVisible = ref({
tunnelInfo: false,
tongnanProjectPerson: false,
hazardPointSituation: false,
offlineHelp: false,
});
const activeitem = ref({});
@ -465,6 +479,17 @@ const handleWarningClick = item => {
warningitem.value = item;
};
const clearanceSituationDialogItemData = ref({});
const handleItemData = item => {
console.log('点击详情:', item);
clearanceSituationDialogItemData.value = item;
};
const dispatchDateRange = ref([]);
const handleDispatchDateRange = range => {
dispatchDateRange.value = range;
};
// 确认对话框配置
const confirmConfig = ref({
title: '提示',

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

@ -26,11 +26,7 @@
:class="item.class"
@click="handleWarningCardClick(item)"
>
<img
class="card-icon"
src="../../assets/RiskWarning_img/气象预警图标@2x.png"
alt=""
/>
<img class="card-icon" src="../../assets/RiskWarning_img/气象预警图标@2x.png" alt="" />
<div class="card-info">
<div class="card-num mt_5">{{ item.value }}</div>
<div class="card-label mb_5">{{ item.label }}</div>
@ -43,22 +39,13 @@
<div class="impact-section">
<div class="impact-header">
<div class="impact-title">影响点概况</div>
<div class="impact-detail clickable" @click="handleImpactDetailClick">
一键清单(影响点)
</div>
<div class="impact-detail clickable" @click="handleImpactDetailClick">一键清单(影响点)</div>
</div>
<div class="chart-container">
<div class="chart-y-label">数量</div>
<div class="bar-chart f1">
<div
v-for="(item, index) in impactData"
:key="index"
class="bar-item"
>
<div
class="bar"
:style="{ height: getBarHeight(item) + '%' }"
></div>
<div v-for="(item, index) in impactData" :key="index" class="bar-item">
<div class="bar" :style="{ height: getBarHeight(item) + '%' }"></div>
<div class="bar-value">{{ item.count }}</div>
<div class="bar-label">{{ item.name }}</div>
</div>
@ -71,11 +58,7 @@
<div class="road-type-section">
<div class="section-title">影响公路类型情况</div>
<div class="road-type-cards">
<div
class="road-card"
v-for="(item, index) in roadTypeData"
:key="index"
>
<div class="road-card" v-for="(item, index) in roadTypeData" :key="index">
<span class="card-label">{{ item.extension }}：</span>
<span class="card-value">{{ item.count }}</span>
</div>
@ -86,12 +69,7 @@
<div class="district-table-section">
<el-table
:data="districtData"
style="
width: 100%;
background: transparent;
font-size: 12px;
height: 150px;
"
style="width: 100%; background: transparent; font-size: 12px; height: 150px"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
size="small"
@ -99,11 +77,7 @@
:scroll="{ y: true }"
>
<el-table-column prop="name" label="区县名称" :min-width="vw(80)" />
<el-table-column
prop="roadSectionCount"
label="路段"
:min-width="vw(50)"
/>
<el-table-column prop="roadSectionCount" label="路段" :min-width="vw(50)" />
<el-table-column prop="bridgeCount" label="桥梁" :min-width="vw(50)" />
<el-table-column prop="tunnelCount" label="隧道" :min-width="vw(50)" />
<el-table-column prop="slopeCount" label="边坡" :min-width="vw(50)" />
@ -116,9 +90,7 @@
<SectionHeader title="响应调度">
<template #right>
<div class="header-filters">
<span class="filter-item active" @click="handleDateRangeClick()"
>本轮</span
>
<span class="filter-item active" @click="handleDateRangeClick()">本轮</span>
<div class="date-range-wrapper">
<el-date-picker
v-model="dateRange"
@ -146,7 +118,8 @@
clickable:
item.label === '叫应总数' ||
item.label === '已回应数' ||
item.label === '调度区县数',
item.label === '调度区县数' ||
item.label === '线下帮扶数',
}"
@click="handleStatClick(item)"
>
@ -168,7 +141,8 @@
@click="handleDispatchCardClick(item)"
>
<div class="card-num">
{{ item.value }}<span class="unit">人</span>
{{ item.value }}
<span class="unit">人</span>
</div>
<div class="card-label">{{ item.label }}</div>
</div>
@ -178,30 +152,30 @@
</template>
<script setup>
import { ref, computed, onMounted, watch, inject } from "vue";
import { request } from "@/utils/request";
import SectionHeader from "./component/sectionHeader.vue";
import { ref, computed, onMounted, watch, inject } from 'vue';
import { request } from '@/utils/request';
import SectionHeader from './component/sectionHeader.vue';
// 导入图片资源
import imgCall from "../../assets/RiskWarning_img/回应icon@2x.png";
import imgReply from "../../assets/RiskWarning_img/已回应icon@2x.png";
import imgRate from "../../assets/RiskWarning_img/回应率icon@2x.png";
import imgDistrict from "../../assets/RiskWarning_img/区县icon@2x.png";
import imgHelp from "../../assets/RiskWarning_img/响应图标5@2x.png";
import imgCheck from "../../assets/RiskWarning_img/抽查人数icon@2x.png";
import imgCall from '../../assets/RiskWarning_img/回应icon@2x.png';
import imgReply from '../../assets/RiskWarning_img/已回应icon@2x.png';
import imgRate from '../../assets/RiskWarning_img/回应率icon@2x.png';
import imgDistrict from '../../assets/RiskWarning_img/区县icon@2x.png';
import imgHelp from '../../assets/RiskWarning_img/响应图标5@2x.png';
import imgCheck from '../../assets/RiskWarning_img/抽查人数icon@2x.png';
// 注入兄弟组件通信机制
const setRefreshLeftData = inject("setRefreshLeftData");
const setRefreshLeftData = inject('setRefreshLeftData');
// 注入日期范围
const getdateRange = inject("getdateRange", ref([]));
const getdateRange = inject('getdateRange', ref([]));
// 监听日期范围变化，当获取到数据时重新加载
watch(
() => getdateRange.value,
(newVal) => {
console.log("left.vue 日期范围变化:", newVal);
newVal => {
console.log('left.vue 日期范围变化:', newVal);
init();
},
{ deep: true },
{ deep: true }
);
onMounted(() => {
@ -222,57 +196,63 @@ const init = () => {
};
const emit = defineEmits([
"openWarningInfo",
"openImpactPoint",
"openWarningSituation",
"openResponseStatus",
"openDispatchDistrict",
"openImpactDetail",
"showCenterCard",
"warningClick",
'openWarningInfo',
'openImpactPoint',
'openWarningSituation',
'openResponseStatus',
'openDispatchDistrict',
'openImpactDetail',
'showCenterCard',
'warningClick',
'dispatchDateRange',
'openOfflineHelp',
]);
// 点击统计项
const handleStatClick = (item) => {
if (item.label === "叫应总数") {
emit("openWarningInfo");
} else if (item.label === "已回应数") {
emit("openResponseStatus");
} else if (item.label === "调度区县数") {
emit("openDispatchDistrict");
const handleStatClick = item => {
if (item.label === '叫应总数') {
emit('openWarningInfo');
emit('dispatchDateRange', dateRange.value);
} else if (item.label === '已回应数') {
emit('openResponseStatus');
emit('dispatchDateRange', dateRange.value);
} else if (item.label === '调度区县数') {
emit('openDispatchDistrict');
} else if (item.label === '线下帮扶数') {
emit('openOfflineHelp');
}
};
// 点击气象预警卡片
const handleWarningCardClick = (item) => {
console.log("item:", item);
emit("openWarningSituation", item);
const handleWarningCardClick = item => {
console.log('item:', item);
emit('openWarningSituation', item);
// 传递日期范围
emit("warningClick", item);
emit('warningClick', item);
};
// 点击影响点明细
const handleImpactDetailClick = () => {
emit("openImpactDetail");
emit('openImpactDetail');
};
// 点击调度清单卡片
const handleDispatchCardClick = (item) => {
const handleDispatchCardClick = item => {
if (item.label === dispatchList.value[0].label) {
emit("showCenterCard", {
type: "second",
emit('showCenterCard', {
type: 'second',
value: item.value,
data: nationalarr.value,
});
} else if (item.label === dispatchList.value[1].label) {
emit("showCenterCard", {
type: "third",
emit('showCenterCard', {
type: 'third',
value: item.value,
data: ruralarr.value,
});
} else if (item.label === dispatchList.value[2].label) {
emit("showCenterCard", {
type: "first",
emit('showCenterCard', {
type: 'first',
value: item.value,
data: projectarr.value,
});
@ -281,24 +261,24 @@ const handleDispatchCardClick = (item) => {
// 气象预警数据
const weatherWarningData = ref([
{ label: "红色预警", value: "0", class: "red" },
{ label: "橙色预警", value: "0", class: "orange" },
{ label: "黄色预警", value: "0", class: "yellow" },
{ label: "蓝色预警", value: "0", class: "blue" },
{ label: '红色预警', value: '0', class: 'red' },
{ label: '橙色预警', value: '0', class: 'orange' },
{ label: '黄色预警', value: '0', class: 'yellow' },
{ label: '蓝色预警', value: '0', class: 'blue' },
]);
// 影响点数据
const impactData = ref([
{ name: "路段", count: 0 },
{ name: "桥梁", count: 0 },
{ name: "隧道", count: 0 },
{ name: "边坡", count: 0 },
{ name: "项目", count: 0 },
{ name: '路段', count: 0 },
{ name: '桥梁', count: 0 },
{ name: '隧道', count: 0 },
{ name: '边坡', count: 0 },
{ name: '项目', count: 0 },
]);
const dateRange = ref([]);
// 点击日期范围器
const handleDateRangeClick = (val) => {
const handleDateRangeClick = val => {
dateRange.value = val;
dispatchLoadLoad();
};
@ -306,8 +286,8 @@ const handleDateRangeClick = (val) => {
const dispatchLoadLoad = async () => {
try {
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
let start = "";
let end = "";
let start = '';
let end = '';
if (dateRange.value && dateRange.value.length === 2) {
start = formatDateTime(dateRange.value[0]);
@ -315,73 +295,80 @@ const dispatchLoadLoad = async () => {
}
const res = await request({
url: "/snow-ops-platform/weather-warning/schedule-statistics",
method: "GET",
url: '/snow-ops-platform/weather-warning/schedule-statistics',
method: 'GET',
params: {
start: start,
end: end,
},
});
console.log(res);
if (res.code == "00000") {
if (res.code == '00000') {
const data = res.data;
if (data) {
responseStats.value.forEach((item) => {
if (item.label == "叫应总数") {
item.value = data["noticeCount"] || 0;
} else if (item.label == "已回应数") {
item.value = data["replyCount"] || 0;
} else if (item.label == "回应率") {
item.value =
data["replyPrecent"] >= 0 ? data["replyPrecent"] + "%" : 0;
} else if (item.label == "调度区县数") {
item.value = data["countyCount"] || 0;
} else if (item.label == "线下帮扶数") {
item.value = data["supportCount"] || 0;
} else if (item.label == "抽查人次") {
item.value = data["inspectionCount"] || 0;
responseStats.value.forEach(item => {
if (item.label == '叫应总数') {
item.value = data['noticeCount'] || 0;
} else if (item.label == '已回应数') {
item.value = data['replyCount'] || 0;
} else if (item.label == '回应率') {
item.value = data['replyPrecent'] >= 0 ? data['replyPrecent'] + '%' : 0;
} else if (item.label == '调度区县数') {
item.value = data['countyCount'] || 0;
} else if (item.label == '线下帮扶数') {
item.value = data['supportCount'] || 0;
} else if (item.label == '抽查人次') {
item.value = data['inspectionCount'] || 0;
}
});
dispatchList.value.forEach((item) => {
if (item.label == "国省道调度") {
item.value = data["nationalRoadCount"] || 0;
} else if (item.label == "农村公路调度") {
item.value = data["ruralRoadCount"] || 0;
} else if (item.label == "建设工程调度") {
item.value = data["projectCount"] || 0;
dispatchList.value.forEach(item => {
if (item.label == '国省道调度') {
item.value = data['nationalRoadCount'] || 0;
} else if (item.label == '农村公路调度') {
item.value = data['ruralRoadCount'] || 0;
} else if (item.label == '建设工程调度') {
item.value = data['projectCount'] || 0;
}
});
// responseStats.value = data;
// dispatchList.value = data;
} else {
responseStats.value.forEach((item) => {
responseStats.value.forEach(item => {
item.value = 0;
});
dispatchList.value.forEach((item) => {
dispatchList.value.forEach(item => {
item.value = 0;
});
}
}
} catch (error) {
console.error("加载数据失败:", error);
console.error('加载数据失败:', error);
}
};
watch(
() => dateRange.value,
newVal => {
console.log('left.vue 调度响应变化:', newVal);
dispatchLoadLoad();
},
{ deep: true }
);
// 格式化日期时间为接口所需格式
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 getdateRangeTime = () => {
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
let start = "";
let end = "";
let start = '';
let end = '';
if (getdateRange.value && getdateRange.value.length === 2) {
start = formatDateTime(getdateRange.value[0]);
end = formatDateTime(getdateRange.value[1]);
@ -393,29 +380,29 @@ const getdateRangeTime = () => {
};
// 区县数据
const districtLoadLoad = async () => {
console.log("区县数据:", getdateRangeTime());
console.log('区县数据:', getdateRangeTime());
try {
const res = await request({
url: "/snow-ops-platform/weather-warning/affected-count/_by_county",
method: "GET",
url: '/snow-ops-platform/weather-warning/affected-count/_by_county',
method: 'GET',
params: getdateRangeTime(),
});
console.log(res);
if (res.code == "00000") {
if (res.code == '00000') {
const data = res.data;
if (data) {
// 简化区县名称
const simplifyDistrictName = (name) => {
const simplifyDistrictName = name => {
if (!name) return name;
return name
.replace("彭水苗族土家族自治县", "彭水县")
.replace("石柱土家族自治县", "石柱县")
.replace("秀山土家族苗族自治县", "秀山县")
.replace("酉阳土家族苗族自治县", "酉阳县");
.replace('彭水苗族土家族自治县', '彭水县')
.replace('石柱土家族自治县', '石柱县')
.replace('秀山土家族苗族自治县', '秀山县')
.replace('酉阳土家族苗族自治县', '酉阳县');
};
// 处理数据，简化区县名称
const processedData = data.map((item) => ({
const processedData = data.map(item => ({
...item,
name: simplifyDistrictName(item.name),
}));
@ -442,7 +429,7 @@ const districtLoadLoad = async () => {
}
}
} catch (error) {
console.error("加载数据失败:", error);
console.error('加载数据失败:', error);
}
};
const roadTypeData = ref([]);
@ -454,21 +441,21 @@ const ruralarr = ref([]);
const scheduleStatisticsByCountyLoad = async () => {
try {
const res = await request({
url: "/snow-ops-platform/weather-warning/schedule-statistics/_by_county",
method: "GET",
url: '/snow-ops-platform/weather-warning/schedule-statistics/_by_county',
method: 'GET',
params: getdateRangeTime(),
});
console.log("调度统计区县数据:", res);
if (res.code == "00000") {
console.log('调度统计区县数据:', res);
if (res.code == '00000') {
const data = res.data;
if (data) {
data.forEach((item) => {
if (item.countyName != "测试区县") {
if (item.type == "project") {
data.forEach(item => {
if (item.countyName != '测试区县') {
if (item.type == 'project') {
projectarr.value.push(item);
} else if (item.roadType == "national") {
} else if (item.roadType == 'national') {
nationalarr.value.push(item);
} else if (item.roadType == "rural") {
} else if (item.roadType == 'rural') {
ruralarr.value.push(item);
}
}
@ -478,21 +465,17 @@ const scheduleStatisticsByCountyLoad = async () => {
console.log(ruralarr.value);
// 合并渝北区和江北区为两江新区
const mergeLiangjiangNewArea = (arr) => {
const yubeiItems = arr.filter((item) => item.countyName === "渝北区");
const jiangbeiItems = arr.filter(
(item) => item.countyName === "江北区",
);
const mergeLiangjiangNewArea = arr => {
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 || "",
type: yubeiItems[0]?.type || jiangbeiItems[0]?.type || "",
roadType:
yubeiItems[0]?.roadType || jiangbeiItems[0]?.roadType || "",
countyName: '两江新区',
countyId: yubeiItems[0]?.countyId || jiangbeiItems[0]?.countyId || '',
type: yubeiItems[0]?.type || jiangbeiItems[0]?.type || '',
roadType: yubeiItems[0]?.roadType || jiangbeiItems[0]?.roadType || '',
// 数值字段累加
noticeCount: 0,
replyCount: 0,
@ -501,7 +484,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;
@ -509,7 +492,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;
@ -518,8 +501,7 @@ const scheduleStatisticsByCountyLoad = async () => {
// 移除渝北区和江北区的数据，添加合并后的两江新区数据
const filteredArr = arr.filter(
(item) =>
item.countyName !== "渝北区" && item.countyName !== "江北区",
item => item.countyName !== '渝北区' && item.countyName !== '江北区'
);
filteredArr.push(mergedItem);
return filteredArr;
@ -546,7 +528,7 @@ const scheduleStatisticsByCountyLoad = async () => {
}
}
} catch (error) {
console.error("加载调度统计区县数据失败:", error);
console.error('加载调度统计区县数据失败:', error);
}
};
@ -554,77 +536,69 @@ const scheduleStatisticsByCountyLoad = async () => {
const roadTypeLoad = async () => {
try {
const res = await request({
url: "/snow-ops-platform/weather-warning/affected-count/_by_road",
method: "GET",
url: '/snow-ops-platform/weather-warning/affected-count/_by_road',
method: 'GET',
params: getdateRangeTime(),
});
console.log(res);
if (res.code == "00000") {
if (res.code == '00000') {
const data = res.data;
if (data) {
roadTypeData.value = data.reverse();
} else {
roadTypeData.value.forEach((item) => {
roadTypeData.value.forEach(item => {
item.count = 0;
});
}
}
} catch (error) {
console.error("加载数据失败:", error);
console.error('加载数据失败:', error);
}
};
// 加载气象预警和影响点数据
const loadData = async () => {
try {
const res = await request({
url: "/snow-ops-platform/weather-warning/warning-count",
method: "GET",
url: '/snow-ops-platform/weather-warning/warning-count',
method: 'GET',
params: getdateRangeTime(),
});
if (res.code == "00000") {
if (res.code == '00000') {
const data = res.data;
if (data) {
let obj = {};
data.forEach((item) => {
data.forEach(item => {
obj[item.name] = item.count || 0;
});
console.log(obj);
weatherWarningData.value.forEach((item) => {
if (item.label == "红色预警") {
item.value =
obj["warning-red-count"] + "/" + obj["warning-red-total"] ||
"0/0";
} else if (item.label == "橙色预警") {
item.value =
obj["warning-orange-count"] + "/" + obj["warning-orange-total"] ||
"0/0";
} else if (item.label == "黄色预警") {
item.value =
obj["warning-yellow-count"] + "/" + obj["warning-yellow-total"] ||
"0/0";
} else if (item.label == "蓝色预警") {
item.value =
obj["warning-blue-count"] + "/" + obj["warning-blue-total"] ||
"0/0";
weatherWarningData.value.forEach(item => {
if (item.label == '红色预警') {
item.value = obj['warning-red-count'] + '/' + obj['warning-red-total'] || '0/0';
} else if (item.label == '橙色预警') {
item.value = obj['warning-orange-count'] + '/' + obj['warning-orange-total'] || '0/0';
} else if (item.label == '黄色预警') {
item.value = obj['warning-yellow-count'] + '/' + obj['warning-yellow-total'] || '0/0';
} else if (item.label == '蓝色预警') {
item.value = obj['warning-blue-count'] + '/' + obj['warning-blue-total'] || '0/0';
}
});
} else {
weatherWarningData.value.forEach((item) => {
if (item.label == "红色预警") {
item.value = "0/0";
} else if (item.label == "橙色预警") {
item.value = "0/0";
} else if (item.label == "黄色预警") {
item.value = "0/0";
} else if (item.label == "蓝色预警") {
item.value = "0/0";
weatherWarningData.value.forEach(item => {
if (item.label == '红色预警') {
item.value = '0/0';
} else if (item.label == '橙色预警') {
item.value = '0/0';
} else if (item.label == '黄色预警') {
item.value = '0/0';
} else if (item.label == '蓝色预警') {
item.value = '0/0';
}
});
}
}
} catch (error) {
console.error("加载数据失败:", error);
console.error('加载数据失败:', error);
}
};
@ -632,43 +606,43 @@ const loadData = async () => {
const loadBarChartData = async () => {
try {
const res = await request({
url: "/snow-ops-platform/weather-warning/affected-count",
method: "GET",
url: '/snow-ops-platform/weather-warning/affected-count',
method: 'GET',
params: getdateRangeTime(),
});
if (res.code == "00000") {
if (res.code == '00000') {
const data = res.data;
if (data.length > 0) {
// 英文转中文映射
const nameMap = {
"road-section": "路段",
bridge: "桥梁",
tunnel: "隧道",
slope: "边坡",
project: "项目",
Road: "路段",
Bridge: "桥梁",
Tunnel: "隧道",
Slope: "边坡",
Project: "项目",
'road-section': '路段',
bridge: '桥梁',
tunnel: '隧道',
slope: '边坡',
project: '项目',
Road: '路段',
Bridge: '桥梁',
Tunnel: '隧道',
Slope: '边坡',
Project: '项目',
};
// 转换英文name为中文
const convertedData = data.map((item) => {
const convertedData = data.map(item => {
const name = nameMap[item.name] || item.name;
return { ...item, name };
});
convertedData.forEach((item) => {
if (item.name == "路段") {
convertedData.forEach(item => {
if (item.name == '路段') {
impactData.value[0].count = item.count || 0;
} else if (item.name == "桥梁") {
} else if (item.name == '桥梁') {
impactData.value[1].count = item.count || 0;
} else if (item.name == "隧道") {
} else if (item.name == '隧道') {
impactData.value[2].count = item.count || 0;
} else if (item.name == "边坡") {
} else if (item.name == '边坡') {
impactData.value[3].count = item.count || 0;
} else if (item.name == "项目") {
} else if (item.name == '项目') {
impactData.value[4].count = item.count || 0;
}
});
@ -677,17 +651,17 @@ const loadBarChartData = async () => {
impactData.value = JSON.parse(
JSON.stringify([
{ name: "路段", count: 0 },
{ name: "桥梁", count: 0 },
{ name: "隧道", count: 0 },
{ name: "边坡", count: 0 },
{ name: "项目", count: 0 },
]),
{ name: '路段', count: 0 },
{ name: '桥梁', count: 0 },
{ name: '隧道', count: 0 },
{ name: '边坡', count: 0 },
{ name: '项目', count: 0 },
])
);
}
}
} catch (error) {
console.error("加载柱状图数据失败:", error);
console.error('加载柱状图数据失败:', error);
}
};
@ -695,27 +669,27 @@ const loadBarChartData = async () => {
// 计算所有影响点的总和
const totalValue = computed(() => {
let total = 0;
impactData.value.forEach((item) => {
impactData.value.forEach(item => {
total += item.count || 0;
});
return total;
});
// 计算每个柱子的高度百分比
const getBarHeight = (value) => {
const getBarHeight = value => {
const actualValue = value.count || value.value;
if (!actualValue || actualValue == 0) return "0";
if (!actualValue || actualValue == 0) return '0';
// 确保最小高度为10%，最大高度为100%
const height = (actualValue / totalValue.value) * 200;
// 确保高度差异明显，至少有5%的差异
return Math.min(100, Math.max(10, Math.round(height)));
};
const handleAIClick = () => {
emit("openAIResult");
emit('openAIResult');
};
// 响应式单位转换函数（基于1920px设计稿）
const vw = (px) => {
const vw = px => {
return Math.round((px / 1920) * window.innerWidth);
};
@ -730,67 +704,69 @@ const districtData = ref([]);
// 响应调度统计数据
const responseStats = ref([
{
label: "叫应总数",
value: "15",
iconClass: "icon-call",
label: '叫应总数',
value: '15',
iconClass: 'icon-call',
img: imgCall,
},
{
label: "已回应数",
value: "9",
iconClass: "icon-reply",
label: '已回应数',
value: '9',
iconClass: 'icon-reply',
img: imgReply,
},
{
label: "回应率",
value: "100%",
iconClass: "icon-rate",
label: '回应率',
value: '100%',
iconClass: 'icon-rate',
img: imgRate,
},
{
label: "调度区县数",
value: "21",
iconClass: "icon-district",
label: '调度区县数',
value: '21',
iconClass: 'icon-district',
img: imgDistrict,
},
{
label: "线下帮扶数",
value: "12",
iconClass: "icon-help",
label: '线下帮扶数',
value: '12',
iconClass: 'icon-help',
img: imgHelp,
},
{
label: "抽查人次",
value: "23",
iconClass: "icon-check",
label: '抽查人次',
value: '23',
iconClass: 'icon-check',
img: imgCheck,
},
]);
// 调度清单数据
const dispatchList = ref([
{ label: "国省道调度", value: "341" },
{ label: "农村公路调度", value: "210" },
{ label: "建设工程调度", value: "120" },
{ label: '国省道调度', value: '341' },
{ label: '农村公路调度', value: '210' },
{ label: '建设工程调度', value: '120' },
]);
const headerCellStyle = () => ({
background: "rgba(64, 169, 255, 0.1)",
color: "rgba(255, 255, 255, 0.9)",
fontWeight: "normal",
borderBottom: "1px solid rgba(64, 169, 255, 0.2)",
padding: " 2px",
textAlign: "center",
lineHeight: "1.2",
background: 'rgba(64, 169, 255, 0.1)',
color: 'rgba(255, 255, 255, 0.9)',
fontWeight: 'normal',
borderBottom: '1px solid rgba(64, 169, 255, 0.2)',
padding: ' 2px',
fontSize: '14px',
textAlign: 'center',
lineHeight: '1.2',
});
const cellStyle = () => ({
background: "transparent",
color: "rgba(255, 255, 255, 0.8)",
borderBottom: "1px solid rgba(64, 169, 255, 0.1)",
padding: " 2px",
textAlign: "center",
lineHeight: "1.2",
background: 'transparent',
color: 'rgba(255, 255, 255, 0.8)',
borderBottom: '1px solid rgba(64, 169, 255, 0.1)',
fontSize: '14px',
padding: ' 2px',
textAlign: 'center',
lineHeight: '1.2',
});
</script>
@ -845,7 +821,7 @@ const cellStyle = () => ({
justify-content: space-between;
align-items: center;
margin-bottom: vw(20);
background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
background-image: url('../../assets/RiskWarning_img/标题bg@2x.png');
background-size: cover;
background-position: left;
@ -869,7 +845,7 @@ const cellStyle = () => ({
justify-content: center;
&::before {
content: "←";
content: '←';
color: #fff;
}
}
@ -1005,7 +981,7 @@ const cellStyle = () => ({
// 背景网格线
&::before {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@ -1013,11 +989,7 @@ const cellStyle = () => ({
bottom: 0;
background-image:
linear-gradient(to right, transparent 0%, transparent 100%),
linear-gradient(
to bottom,
rgba(64, 169, 255, 0.1) 1px,
transparent 1px
);
linear-gradient(to bottom, rgba(64, 169, 255, 0.1) 1px, transparent 1px);
background-size: 100% 25%;
pointer-events: none;
}
@ -1042,11 +1014,7 @@ const cellStyle = () => ({
}
.bar {
background: linear-gradient(
180deg,
#69c0ff 0%,
rgba(105, 192, 255, 0.5) 100%
);
background: linear-gradient(180deg, #69c0ff 0%, rgba(105, 192, 255, 0.5) 100%);
box-shadow: 0 0 15px rgba(64, 169, 255, 0.6);
}
@ -1066,11 +1034,7 @@ const cellStyle = () => ({
.bar {
width: vw(30);
min-width: 16px;
background: linear-gradient(
180deg,
#18f2f9 0%,
rgba(64, 169, 255, 0.3) 100%
);
background: linear-gradient(180deg, #18f2f9 0%, rgba(64, 169, 255, 0.3) 100%);
border-radius: 2px 2px 0 0;
// min-height: 20px;
transition: all 0.3s ease;
@ -1211,8 +1175,7 @@ const cellStyle = () => ({
justify-content: space-between;
align-items: center;
margin-bottom: vw(15);
background-image: url("../../assets/RiskWarning_img/标题bg@2x.png")
no-repeat;
background-image: url('../../assets/RiskWarning_img/标题bg@2x.png') no-repeat;
background-size: cover;
background-position: left;
@ -1233,7 +1196,7 @@ const cellStyle = () => ({
justify-content: center;
&::before {
content: "←";
content: '←';
color: #fff;
font-size: vw(14);
}
@ -1287,22 +1250,22 @@ const cellStyle = () => ({
font-size: vw(18);
&.icon-call::before {
content: "💬";
content: '💬';
}
&.icon-reply::before {
content: "✉️";
content: '✉️';
}
&.icon-rate::before {
content: "⏱️";
content: '⏱️';
}
&.icon-district::before {
content: "📍";
content: '📍';
}
&.icon-help::before {
content: "🤝";
content: '🤝';
}
&.icon-check::before {
content: "👥";
content: '👥';
}
}

2
packages/screen/src/views/WarningManagement/construction/addDialog.vue
View File

@ -80,7 +80,7 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="行政区域:">
<el-form-item label="影响区域:">
<el-select ></el-select>
</el-form-item>
</el-col>

2
packages/screen/src/views/WarningManagement/district/addDialog.vue
View File

@ -81,7 +81,7 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="行政区域:">
<el-form-item label="影响区域:">
<el-select></el-select>
</el-form-item>
</el-col>

2
packages/screen/src/views/warningCounty/warningCounty.vue
View File

@ -299,7 +299,7 @@
<el-form-item label="施工单位" class="form-item-1-3">
<el-input v-model="reportForm.builderUnit" placeholder="" />
</el-form-item>
<el-form-item label="行政区域" class="form-item-1-3">
<el-form-item label="影响区域" class="form-item-1-3">
<el-select v-model="reportForm.adminArea" placeholder="请选择" style="width: 100%">
<el-option label="区域1" value="area1" />
<el-option label="区域2" value="area2" />