1031 lines
28 KiB
Vue
1031 lines
28 KiB
Vue
<template>
|
||
<base-dialog
|
||
v-model:visible="props.visible"
|
||
title="影响点情况"
|
||
:table-data="tableData"
|
||
:table-columns="tableColumns"
|
||
:table-height="320"
|
||
:total="total"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
showFilter="true"
|
||
:z-index="2000"
|
||
:max-width="1200"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
@close="handleClose"
|
||
>
|
||
<!-- 标题栏下方自定义插槽 -->
|
||
<template #header>
|
||
<!-- 统计卡片 -->
|
||
<div class="stats-cards">
|
||
<div
|
||
v-for="(item, index) in impactData"
|
||
:key="index"
|
||
@click="handleClick(index)"
|
||
class="stat-card"
|
||
:style="{
|
||
backgroundImage: `url(${cardType == index ? selectedIcon : unselectedIcon})`,
|
||
backgroundSize: '100% 100%',
|
||
backgroundPosition: 'center',
|
||
}"
|
||
>
|
||
<div class="stat-icon"><img :src="item.icon" alt="" /></div>
|
||
<div class="stat-content">
|
||
<span class="stat-label">{{ item.name }}</span>
|
||
<span class="stat-value">{{ item.count }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 筛选区域 -->
|
||
<template #filter>
|
||
<div class="filter-row">
|
||
<div class="filter-item">
|
||
<el-select
|
||
:teleported="false"
|
||
v-model="filterForm.pointType"
|
||
size="small"
|
||
placeholder="影响点类型"
|
||
class="filter-select"
|
||
>
|
||
<el-option
|
||
v-for="option in pointTypeOptions"
|
||
:key="option.value"
|
||
:label="option.label"
|
||
:value="option.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<el-select
|
||
:teleported="false"
|
||
v-model="filterForm.pointLevel"
|
||
size="small"
|
||
placeholder="影响点等级"
|
||
class="filter-select"
|
||
>
|
||
<el-option
|
||
v-for="option in pointLevelOptions"
|
||
:key="option.value"
|
||
:label="option.label"
|
||
:value="option.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<el-select
|
||
:teleported="false"
|
||
v-model="filterForm.region"
|
||
size="small"
|
||
placeholder="影响区域"
|
||
class="filter-select"
|
||
>
|
||
<el-option
|
||
v-for="option in regionOptionsWithAll"
|
||
: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-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 影响点等级列插槽 -->
|
||
<template #pointLevel="{ row }">
|
||
<span class="level-tag" :class="row.levelClass">{{
|
||
row.pointLevel
|
||
}}</span>
|
||
</template>
|
||
|
||
<!-- 交通主管部门负责人列插槽 -->
|
||
<template #trafficDept="{ row }">
|
||
<div class="person-info">
|
||
<span class="person-name">{{ row.trafficDept.name }}</span>
|
||
<span class="person-phone">{{ row.trafficDept.phone }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 公路机构责任人列插槽 -->
|
||
<template #roadOrg="{ row }">
|
||
<div class="person-info">
|
||
<span class="person-name">{{ row.roadOrg.name }}</span>
|
||
<span class="person-phone">{{ row.roadOrg.phone }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 养护站负责人列插槽 -->
|
||
<template #maintenance="{ row }">
|
||
<div class="person-info">
|
||
<span class="person-name">{{ row.maintenance.name }}</span>
|
||
<span class="person-phone">{{ row.maintenance.phone }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 护路员列插槽 -->
|
||
<template #roadKeeper="{ row }">
|
||
<div class="person-info">
|
||
<span class="person-name">{{ row.roadKeeper.name }}</span>
|
||
<span class="person-phone">{{ row.roadKeeper.phone }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 一般人员（路长履职）列插槽 -->
|
||
<template #generalStaff="{ row }">
|
||
<div class="person-info">
|
||
<span class="person-name">{{ row.generalStaff.name }}</span>
|
||
<span class="person-phone">{{ row.generalStaff.phone }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 项目类型专用插槽 -->
|
||
<!-- 吹哨人列插槽 -->
|
||
<template #whistleblower="{ row }">
|
||
<div class="person-info">
|
||
<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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 操作列插槽 -->
|
||
<template #operation="{ row }" fixed="right">
|
||
<span class="detail-link" @click="handleDetail(row)">详情</span>
|
||
</template>
|
||
</base-dialog>
|
||
</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 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 { formatDateTime } from "../component/index.js";
|
||
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
handleImpactItem: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(["update:visible", "close", "detail", "itemClick"]);
|
||
|
||
// 筛选表单
|
||
const filterForm = ref({
|
||
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: "trafficDept",
|
||
label: "交通主管部门负责人",
|
||
width: "",
|
||
slot: "trafficDept",
|
||
},
|
||
{ prop: "roadOrg", label: "公路机构责任人", width: "", slot: "roadOrg" },
|
||
{
|
||
prop: "maintenance",
|
||
label: "养护站负责人",
|
||
width: "",
|
||
slot: "maintenance",
|
||
},
|
||
{ prop: "roadKeeper", label: "护路员", width: "", slot: "roadKeeper" },
|
||
{
|
||
prop: "generalStaff",
|
||
label: "一般人员(路长履职)",
|
||
width: "",
|
||
slot: "generalStaff",
|
||
},
|
||
{
|
||
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: "whistleblower",
|
||
label: "吹哨人",
|
||
width: "",
|
||
slot: "whistleblower",
|
||
},
|
||
{
|
||
prop: "constructionUnit",
|
||
label: "建设单位包保责任人",
|
||
width: "",
|
||
slot: "constructionUnit",
|
||
},
|
||
{
|
||
prop: "constructionDept",
|
||
label: "施工单位包保责任人",
|
||
width: "",
|
||
slot: "constructionDept",
|
||
},
|
||
{
|
||
prop: "siteResponsible",
|
||
label: "驻地包保责任人",
|
||
width: "",
|
||
slot: "siteResponsible",
|
||
},
|
||
{
|
||
prop: "countyResponsible",
|
||
label: "区县级包保责任人",
|
||
width: "",
|
||
slot: "countyResponsible",
|
||
},
|
||
{
|
||
prop: "cityResponsible",
|
||
label: "市级包保责任人",
|
||
width: "",
|
||
slot: "cityResponsible",
|
||
},
|
||
];
|
||
|
||
// 为兼容旧代码，保留变量名引用
|
||
const bridgeColumns = unifiedColumns;
|
||
const slopeColumns = unifiedColumns;
|
||
const tunnelColumns = unifiedColumns;
|
||
const roadColumns = unifiedColumns;
|
||
|
||
// 当前表格列配置
|
||
const tableColumns = ref(bridgeColumns);
|
||
|
||
// 表格数据
|
||
const tableData = ref([]);
|
||
// 影响点数据
|
||
const impactData = ref([
|
||
{ name: "影响桥梁", count: 0, icon: Icon0 },
|
||
{ name: "影响边坡", count: 0, icon: Icon1 },
|
||
{ name: "影响隧道", count: 0, icon: Icon2 },
|
||
{ name: "影响项目", count: 0, icon: Icon3 },
|
||
{ name: "影响路段", count: 0, icon: Icon4 },
|
||
]);
|
||
// 顶部卡片数据
|
||
const loadBarChartData = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: "/snow-ops-platform/weather-warning/affected-count",
|
||
method: "GET",
|
||
});
|
||
|
||
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: "项目",
|
||
};
|
||
|
||
// 转换英文name为中文
|
||
const convertedData = data.map((item) => {
|
||
const name = nameMap[item.name] || item.name;
|
||
return { ...item, name };
|
||
});
|
||
convertedData.forEach((item) => {
|
||
impactData.value.forEach((stat) => {
|
||
if (stat.name.includes(item.extension)) {
|
||
stat.count = item.count || 0;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("加载柱状图数据失败:", error);
|
||
}
|
||
};
|
||
|
||
const cardType = ref("0");
|
||
|
||
// 根据 cardType 获取对应的表格列配置
|
||
const getColumnsByType = (type) => {
|
||
const typeMap = {
|
||
0: bridgeColumns,
|
||
1: slopeColumns,
|
||
2: tunnelColumns,
|
||
3: projectColumns,
|
||
4: roadColumns,
|
||
};
|
||
return typeMap[type] || bridgeColumns;
|
||
};
|
||
|
||
// 根据 cardType 获取对应的 API 路径
|
||
const getApiUrlByType = (type) => {
|
||
const urlMap = {
|
||
0: "/snow-ops-platform/weather-warning/affected-object/bridge",
|
||
1: "/snow-ops-platform/weather-warning/affected-object/slope",
|
||
2: "/snow-ops-platform/weather-warning/affected-object/tunnel",
|
||
3: "/snow-ops-platform/weather-warning/affected-object/project",
|
||
4: "/snow-ops-platform/weather-warning/affected-object/road-section",
|
||
};
|
||
return (
|
||
urlMap[type] || "/snow-ops-platform/weather-warning/affected-object/bridge"
|
||
);
|
||
};
|
||
|
||
// 点击卡片切换
|
||
const handleClick = (type) => {
|
||
tableData.value = [];
|
||
cardType.value = type + "";
|
||
// 切换表格列配置
|
||
tableColumns.value = getColumnsByType(cardType.value);
|
||
// 重置分页并获取数据
|
||
currentPage.value = 1;
|
||
fetchData();
|
||
};
|
||
|
||
// 分页
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(10);
|
||
const total = ref(0);
|
||
|
||
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
|
||
|
||
const visiblePages = computed(() => {
|
||
const pages = [];
|
||
const maxVisible = 4;
|
||
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
|
||
let end = Math.min(totalPages.value, start + maxVisible - 1);
|
||
|
||
if (end - start + 1 < maxVisible) {
|
||
start = Math.max(1, end - maxVisible + 1);
|
||
}
|
||
|
||
for (let i = start; i <= end; i++) {
|
||
pages.push(i);
|
||
}
|
||
return pages;
|
||
});
|
||
|
||
// 关闭对话框
|
||
const handleClose = () => {
|
||
emit("update:visible", false);
|
||
emit("close");
|
||
};
|
||
|
||
// 点击遮罩关闭已由base-dialog组件处理
|
||
|
||
// 查询
|
||
const handleSearch = () => {
|
||
console.log("查询条件:", filterForm.value);
|
||
currentPage.value = 1;
|
||
fetchData();
|
||
};
|
||
|
||
// 查看详情
|
||
const handleDetail = (item) => {
|
||
emit("detail", item);
|
||
emit("itemClick", item);
|
||
};
|
||
|
||
// 分页操作
|
||
const handleSizeChange = (val) => {
|
||
pageSize.value = val;
|
||
fetchData();
|
||
};
|
||
|
||
const handleCurrentChange = (val) => {
|
||
currentPage.value = val;
|
||
fetchData();
|
||
};
|
||
// 获取时间参数
|
||
const getTimeParams = () => {
|
||
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] || ""),
|
||
limit: pageSize.value,
|
||
offset: (currentPage.value - 1) * pageSize.value,
|
||
};
|
||
};
|
||
// 处理数据为统一格式
|
||
const processUnifiedData = (item, type) => {
|
||
// 根据类型获取影响点类型名称
|
||
const typeMap = {
|
||
0: "桥梁",
|
||
1: "边坡",
|
||
2: "隧道",
|
||
3: "项目",
|
||
4: "路段",
|
||
};
|
||
|
||
// 获取等级样式类
|
||
const getLevelClass = (level) => {
|
||
const levelMap = {
|
||
红色预警: "level-red",
|
||
橙色预警: "level-orange",
|
||
黄色预警: "level-yellow",
|
||
蓝色预警: "level-blue",
|
||
高风险: "level-red",
|
||
中风险: "level-orange",
|
||
低风险: "level-blue",
|
||
};
|
||
return levelMap[level] || "";
|
||
};
|
||
|
||
// 获取影响点等级
|
||
const pointLevel =
|
||
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: typeMap[type] || "-",
|
||
// 影响点位置（根据类型取不同字段）
|
||
pointLocation:
|
||
item.GL1_QLMC ||
|
||
item.NAME ||
|
||
item.GL1_SDMC ||
|
||
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: "-",
|
||
},
|
||
// 公路机构责任人
|
||
roadOrg: {
|
||
// name: item.roadOrgName || item.roadManager || "-",
|
||
// phone: item.roadOrgPhone || item.roadManagerPhone || "-",
|
||
name: "-",
|
||
phone: "-",
|
||
},
|
||
// 养护站负责人
|
||
maintenance: {
|
||
// name: item.maintenanceName || item.maintenanceManager || "-",
|
||
// phone: item.maintenancePhone || item.maintenanceManagerPhone || "-",
|
||
name: "-",
|
||
phone: "-",
|
||
},
|
||
// 护路员
|
||
roadKeeper: {
|
||
// name: item.roadKeeperName || item.roadKeeper || "-",
|
||
// phone: item.roadKeeperPhone || item.roadKeeperPhone || "-",
|
||
name: "-",
|
||
phone: "-",
|
||
},
|
||
// 一般人员（路长履职）
|
||
generalStaff: {
|
||
// name: item.generalStaffName || item.roadChief || "-",
|
||
// phone: item.generalStaffPhone || item.roadChiefPhone || "-",
|
||
name: "-",
|
||
phone: "-",
|
||
},
|
||
// 保留原始数据供详情使用
|
||
rawData: item,
|
||
};
|
||
|
||
// 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典）
|
||
if (type === "0") {
|
||
return {
|
||
...baseData,
|
||
// 影响区域 - 使用区县名称
|
||
region: item.GL1_QXMC || "-",
|
||
// 影响点位置 - 使用桥梁名称
|
||
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,
|
||
),
|
||
// // 交通主管部门负责人 - 管理单位负责人（GL1_DWFZR）
|
||
// trafficDept: {
|
||
// name: item.GL1_DWFZR || "-",
|
||
// phone: item.GL1_GLDWDH || "-",
|
||
// },
|
||
// // 公路机构责任人 - 统计负责人（GL1_TJFZR）
|
||
// roadOrg: {
|
||
// name: item.GL1_TJFZR || "-",
|
||
// phone: item.GL1_TJFZRDH || "-",
|
||
// },
|
||
// // 养护站负责人 - 养护单位责任人（GL1_YHDWDH）
|
||
// maintenance: {
|
||
// name: item.GL1_GLDWMC || "-",
|
||
// phone: item.GL1_YHDWDH || "-",
|
||
// },
|
||
// // 护路员 - 填报人
|
||
// roadKeeper: {
|
||
// name: item.GL1_TBRXM || "-",
|
||
// phone: item.GL1_TBRDH || "-",
|
||
// },
|
||
// // 一般人员（路长履职）- 桥梁工程师（GL1_QLGCS）
|
||
// generalStaff: {
|
||
// name: item.GL1_QLGCS || "-",
|
||
// phone: item.GL1_QLGCSDH || "-",
|
||
// },
|
||
};
|
||
}
|
||
|
||
// 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典）
|
||
if (type === "2") {
|
||
return {
|
||
...baseData,
|
||
// 影响区域 - 使用区县名称
|
||
region: item.GL1_QXMC || item.GL1_QXBM || "-",
|
||
// 影响点位置 - 使用隧道名称
|
||
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,
|
||
),
|
||
// // 交通主管部门负责人 - 管养单位行政领导（GL1_GYDWXZLD）
|
||
// trafficDept: {
|
||
// name: item.GL1_GYDWXZLD || "-",
|
||
// phone: item.GL1_GYDWXZLDDH || "-",
|
||
// },
|
||
// // 公路机构责任人 - 隧道路政员（GL1_SDLZY）
|
||
// roadOrg: {
|
||
// name: item.GL1_SDLZY || "-",
|
||
// phone: item.GL1_SDLZYDH || "-",
|
||
// },
|
||
// // 养护站负责人 - 隧道养护工（GL1_SDYHG）
|
||
// maintenance: {
|
||
// name: item.GL1_SDYHG || "-",
|
||
// phone: item.GL1_SDYHGDH || "-",
|
||
// },
|
||
// // 护路员 - 隧道信息填报人（GL1_SDXXTBR）
|
||
// roadKeeper: {
|
||
// name: item.GL1_SDXXTBR || "-",
|
||
// phone: item.GL1_SDXXTBRDH || "-",
|
||
// },
|
||
// // 一般人员（路长履职）- 管养单位养护工程师（GL1_GYDWYHGCS）
|
||
// generalStaff: {
|
||
// name: item.GL1_GYDWYHGCS || "-",
|
||
// phone: item.GL1_GYDWYHGSCSDH || "-",
|
||
// },
|
||
};
|
||
}
|
||
|
||
// 路段类型特殊处理（根据BASE_XJLD路线信息表字典）
|
||
if (type === "4") {
|
||
return {
|
||
...baseData,
|
||
// 影响区域 - 使用区县名称
|
||
region: item.GL1_QXMC || "-",
|
||
// 影响点位置 - 使用路线名称+起终点桩号
|
||
pointLocation: `${item.GL1_GLMC || item.GL1_GLBH || "-"} (${item.GL1_QDZH || "-"} - ${item.GL1_ZDZH || "-"})`,
|
||
// 影响点等级 - 使用风险等级
|
||
pointLevel: item.GL1_FXDJ || "-",
|
||
levelClass: getLevelClass(item.GL1_FXDJ),
|
||
// 交通主管部门负责人 - 使用GL1_JTXM和GL1_JTDH
|
||
trafficDept: {
|
||
name: item.GL1_JTXM || "-",
|
||
phone: item.GL1_JTDH || "-",
|
||
},
|
||
// 公路机构责任人 - 使用GL1_JGXM和GL1_JGDH
|
||
roadOrg: {
|
||
name: item.GL1_JGXM || "-",
|
||
phone: item.GL1_JGDH || "-",
|
||
},
|
||
// 养护站负责人 - 使用GL1_YHXM和GL1_YHDH
|
||
maintenance: {
|
||
name: item.GL1_YHXM || "-",
|
||
phone: item.GL1_YHDH || "-",
|
||
},
|
||
// 护路员 - 使用GL1_HLXM和GL1_HLDH
|
||
roadKeeper: {
|
||
name: item.GL1_HLXM || "-",
|
||
phone: item.GL1_HLDH || "-",
|
||
},
|
||
// 一般人员（路长履职）- 使用风险类型和风险描述
|
||
generalStaff: {
|
||
name: item.GL1_FXLX || "-",
|
||
phone: item.GL1_FXMS || "-",
|
||
},
|
||
};
|
||
}
|
||
|
||
// 项目类型特殊处理（根据SQL字段映射）
|
||
if (type === "3") {
|
||
return {
|
||
...baseData,
|
||
// 影响区域 - 使用COUNTY字段
|
||
region: item.COUNTY || item.county || item.county_name || "-",
|
||
// 影响点位置 - 使用项目名称
|
||
pointLocation: item.PROJECT_NAME || item.projectName || item.name || "-",
|
||
// 驻地名称
|
||
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 || "-",
|
||
},
|
||
// 建设单位包保责任人 - OWNER_RESPONSIBLE_PERSON / OWNER_RESPONSIBLE_PHONE
|
||
constructionUnit: {
|
||
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 ||
|
||
"-",
|
||
},
|
||
// 驻地包保责任人 - SITE_RESPONSIBLE_PERSON / SITE_RESPONSIBLE_PHONE
|
||
siteResponsible: {
|
||
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 ||
|
||
"-",
|
||
},
|
||
// 市级包保责任人 - CITY_RESPONSIBLE_PERSON / CITY_RESPONSIBLE_PHONE
|
||
cityResponsible: {
|
||
name: item.CITY_RESPONSIBLE_PERSON || item.cityResponsiblePerson || "-",
|
||
phone: item.CITY_RESPONSIBLE_PHONE || item.cityResponsiblePhone || "-",
|
||
},
|
||
};
|
||
}
|
||
|
||
return baseData;
|
||
};
|
||
|
||
// 根据类型处理数据（统一格式）
|
||
const processDataByType = (item, type) => {
|
||
return processUnifiedData(item, type);
|
||
};
|
||
|
||
// 获取数据
|
||
const fetchData = async () => {
|
||
console.log("获取第", currentPage.value, "页数据, 类型:", cardType.value);
|
||
try {
|
||
const timeParams = getTimeParams();
|
||
|
||
// 根据 cardType 获取对应的 API URL
|
||
const apiUrl = getApiUrlByType(cardType.value);
|
||
|
||
const res = await request({
|
||
url: apiUrl,
|
||
method: "GET",
|
||
params: timeParams,
|
||
});
|
||
|
||
if (res.code === "00000" && res.data) {
|
||
// 处理返回数据
|
||
const allData = res.data;
|
||
total.value = allData.length || 0;
|
||
|
||
// 客户端分页：计算当前页的数据范围
|
||
const startIndex = (currentPage.value - 1) * pageSize.value;
|
||
const endIndex = startIndex + pageSize.value;
|
||
const currentPageData = allData.slice(startIndex, endIndex);
|
||
|
||
tableData.value = currentPageData.map((item, index) => ({
|
||
...processDataByType(item, cardType.value),
|
||
id: startIndex + index + 1,
|
||
}));
|
||
} else {
|
||
tableData.value = [];
|
||
total.value = 0;
|
||
}
|
||
} catch (error) {
|
||
console.error("获取影响点数据失败:", error);
|
||
tableData.value = [];
|
||
total.value = 0;
|
||
}
|
||
};
|
||
|
||
// 监听visible变化
|
||
watch(
|
||
() => props.visible,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
filterForm.value = {
|
||
pointType: "",
|
||
pointLevel: "",
|
||
region: "",
|
||
};
|
||
cardType.value = "0";
|
||
loadBarChartData();
|
||
currentPage.value = 1;
|
||
fetchData();
|
||
}
|
||
},
|
||
);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||
@function vw($px) {
|
||
@return calc($px / 1920 * 100vw);
|
||
}
|
||
|
||
// 统计卡片
|
||
.stats-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: vw(16);
|
||
|
||
.stat-card {
|
||
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;
|
||
cursor: pointer;
|
||
|
||
.stat-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: vw(28);
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 筛选区域
|
||
.filter-section {
|
||
margin-bottom: vw(20);
|
||
|
||
.filter-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.filter-item {
|
||
.filter-select {
|
||
width: vw(150);
|
||
|
||
: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: vw(4);
|
||
|
||
.el-input__inner {
|
||
color: #fff;
|
||
font-size: vw(13);
|
||
|
||
&::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: vw(4);
|
||
padding: 0 vw(24);
|
||
height: vw(32);
|
||
font-size: vw(13);
|
||
|
||
&:hover {
|
||
background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-link {
|
||
color: #40a9ff;
|
||
cursor: pointer;
|
||
font-size: vw(12);
|
||
|
||
&:hover {
|
||
color: #69c0ff;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
// 下拉菜单样式
|
||
: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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 统计卡片
|
||
.stats-cards {
|
||
display: flex;
|
||
gap: 12px;
|
||
|
||
.stat-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
flex: 1;
|
||
|
||
&:hover {
|
||
background: rgba(30, 70, 120, 0.9);
|
||
border-color: rgba(64, 169, 255, 0.6);
|
||
box-shadow: 0 0 15px rgba(64, 169, 255, 0.3);
|
||
}
|
||
|
||
.stat-icon {
|
||
font-size: 18px;
|
||
color: #40a9ff;
|
||
width: 34px;
|
||
height: 34px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.stat-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|