Compare commits
No commits in common. "0badc69fa26e59cd2638c771e2f5635ea0668a36" and "7f09acbb44c06ffa365c268f502685522dc89603" have entirely different histories.
0badc69fa2
...
7f09acbb44
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
@ -146,7 +146,7 @@
|
|||||||
<el-table-column prop="constructionUnit" label="建设单位" min-width="150" show-overflow-tooltip />
|
<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="builderUnit" label="施工单位" min-width="150" show-overflow-tooltip />
|
||||||
<el-table-column prop="stationAddress" label="驻地地址" min-width="200" 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="stationPeople" label="驻地人数" width="90" align="center" />
|
||||||
<el-table-column prop="riskLevel" label="驻地风险等级" width="110" align="center" />
|
<el-table-column prop="riskLevel" label="驻地风险等级" width="110" align="center" />
|
||||||
<el-table-column prop="buildingType" label="房建类型" width="100" align="center" />
|
<el-table-column prop="buildingType" label="房建类型" width="100" align="center" />
|
||||||
|
|||||||
@ -85,7 +85,7 @@ const columns = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "administrativeRegion",
|
prop: "administrativeRegion",
|
||||||
label: "影响区域",
|
label: "行政区域",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "sitePopulation",
|
prop: "sitePopulation",
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -16,7 +16,7 @@
|
|||||||
<template #filter>
|
<template #filter>
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<span class="filter-label">影响区域</span>
|
<span class="filter-label">行政区域</span>
|
||||||
<el-select
|
<el-select
|
||||||
:teleported="false"
|
:teleported="false"
|
||||||
v-model="filterForm.district"
|
v-model="filterForm.district"
|
||||||
@ -112,7 +112,7 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']);
|
const emit = defineEmits(['update:visible', 'close', 'detail']);
|
||||||
|
|
||||||
// 筛选表单
|
// 筛选表单
|
||||||
const filterForm = ref({
|
const filterForm = ref({
|
||||||
@ -136,7 +136,7 @@ const tableHeight = ref(300);
|
|||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableColumns = ref([
|
const tableColumns = ref([
|
||||||
{ prop: 'id', label: '序号', width: '' },
|
{ prop: 'id', label: '序号', width: '' },
|
||||||
{ prop: 'district', label: '影响区域', width: '' },
|
{ prop: 'district', label: '行政区域', width: '' },
|
||||||
{ prop: 'routeNo', label: '线路编号', width: '' },
|
{ prop: 'routeNo', label: '线路编号', width: '' },
|
||||||
{ prop: 'stakeNo', label: '起止桩号', width: '', slot: 'stakeNo' },
|
{ prop: 'stakeNo', label: '起止桩号', width: '', slot: 'stakeNo' },
|
||||||
{ prop: 'location', label: '路况位置', width: '', slot: 'location' },
|
{ prop: 'location', label: '路况位置', width: '', slot: 'location' },
|
||||||
@ -198,7 +198,6 @@ const handleClose = () => {
|
|||||||
// 查看详情
|
// 查看详情
|
||||||
const handleDetail = item => {
|
const handleDetail = item => {
|
||||||
emit('detail', item);
|
emit('detail', item);
|
||||||
emit('itemdata', item);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 分页操作
|
// 分页操作
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
<template #filter>
|
<template #filter>
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
<div class="filter-item">
|
<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-select :teleported="false" v-model="filterForm.region" placeholder="请选择" class="filter-select" clearable>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in regionOptions"
|
v-for="item in regionOptions"
|
||||||
@ -83,7 +83,7 @@ const filterForm = ref({
|
|||||||
riskLevel: "",
|
riskLevel: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// 影响区域选项
|
// 行政区域选项
|
||||||
// 已从 index.js 导入
|
// 已从 index.js 导入
|
||||||
|
|
||||||
// 风险等级选项
|
// 风险等级选项
|
||||||
@ -94,12 +94,12 @@ const tableHeight = ref(300);
|
|||||||
|
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableColumns = ref([
|
const tableColumns = ref([
|
||||||
{ prop: 'id', label: '序号', width: '' },
|
{ prop: 'id', label: '序号', width: '60' },
|
||||||
{ prop: 'region', label: '影响区域', width: '' },
|
{ prop: 'region', label: '行政区域', width: '100' },
|
||||||
{ prop: 'stationName', label: '驻地名称', width: '', slot: 'stationName' },
|
{ prop: 'stationName', label: '驻地名称', width: '200', slot: 'stationName' },
|
||||||
{ prop: 'project', label: '所属项目', width: '', slot: 'project' },
|
{ prop: 'project', label: '所属项目', width: '200', slot: 'project' },
|
||||||
{ prop: 'peopleCount', label: '驻地人数', width: '' },
|
{ prop: 'peopleCount', label: '驻地人数', width: '80' },
|
||||||
{ prop: 'riskLevel', label: '驻地风险等级', width: '', slot: 'riskLevel' },
|
{ prop: 'riskLevel', label: '驻地风险等级', width: '100', slot: 'riskLevel' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 表格数据
|
// 表格数据
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
<template #filter>
|
<template #filter>
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<span class="filter-label">影响区域</span>
|
<span class="filter-label">行政区域</span>
|
||||||
<el-select :teleported="false"
|
<el-select :teleported="false"
|
||||||
v-model="filterForm.region"
|
v-model="filterForm.region"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
@ -76,7 +76,7 @@ const filterForm = ref({
|
|||||||
type: "",
|
type: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// 影响区域选项
|
// 行政区域选项
|
||||||
// 已从 index.js 导入
|
// 已从 index.js 导入
|
||||||
|
|
||||||
// 类型选项
|
// 类型选项
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
<template #filter>
|
<template #filter>
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<span class="filter-label">影响区域</span>
|
<span class="filter-label">行政区域</span>
|
||||||
<el-select :teleported="false"
|
<el-select :teleported="false"
|
||||||
v-model="filterForm.region"
|
v-model="filterForm.region"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
@ -68,7 +68,7 @@ const filterForm = ref({
|
|||||||
region: "",
|
region: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// 影响区域选项
|
// 行政区域选项
|
||||||
// 已从 index.js 导入
|
// 已从 index.js 导入
|
||||||
|
|
||||||
// 表格高度
|
// 表格高度
|
||||||
@ -77,7 +77,7 @@ const tableHeight = ref(300);
|
|||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableColumns = ref([
|
const tableColumns = ref([
|
||||||
{ prop: "id", label: "序号", width: "" },
|
{ prop: "id", label: "序号", width: "" },
|
||||||
{ prop: "region", label: "影响区域", width: "" },
|
{ prop: "region", label: "行政区域", width: "" },
|
||||||
{ prop: "dispatchCount", label: "调度数", width: "", slot: "dispatchCount" },
|
{ prop: "dispatchCount", label: "调度数", width: "", slot: "dispatchCount" },
|
||||||
{ prop: "lastDispatchTime", label: "最近调度时间", width: "" },
|
{ prop: "lastDispatchTime", label: "最近调度时间", width: "" },
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -79,7 +79,7 @@
|
|||||||
:teleported="false"
|
:teleported="false"
|
||||||
v-model="filterForm.region"
|
v-model="filterForm.region"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="影响区域"
|
placeholder="行政区域"
|
||||||
class="filter-select"
|
class="filter-select"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
@ -91,14 +91,18 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-item">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 影响点等级列插槽 -->
|
<!-- 影响点等级列插槽 -->
|
||||||
<template #pointLevel="{ row }">
|
<template #pointLevel="{ row }">
|
||||||
<span class="level-tag" :class="row.levelClass">{{ row.pointLevel }}</span>
|
<span class="level-tag" :class="row.levelClass">{{
|
||||||
|
row.pointLevel
|
||||||
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 交通主管部门负责人列插槽 -->
|
<!-- 交通主管部门负责人列插槽 -->
|
||||||
@ -145,48 +149,60 @@
|
|||||||
<!-- 吹哨人列插槽 -->
|
<!-- 吹哨人列插槽 -->
|
||||||
<template #whistleblower="{ row }">
|
<template #whistleblower="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<span class="person-name">{{ row.whistleblower?.name || '-' }}</span>
|
<span class="person-name">{{ row.whistleblower?.name || "-" }}</span>
|
||||||
<span class="person-phone">{{ row.whistleblower?.phone || '-' }}</span>
|
<span class="person-phone">{{ row.whistleblower?.phone || "-" }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 建设单位包保责任人列插槽 -->
|
<!-- 建设单位包保责任人列插槽 -->
|
||||||
<template #constructionUnit="{ row }">
|
<template #constructionUnit="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<span class="person-name">{{ row.constructionUnit?.name || '-' }}</span>
|
<span class="person-name">{{ row.constructionUnit?.name || "-" }}</span>
|
||||||
<span class="person-phone">{{ row.constructionUnit?.phone || '-' }}</span>
|
<span class="person-phone">{{
|
||||||
|
row.constructionUnit?.phone || "-"
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 施工单位包保责任人列插槽 -->
|
<!-- 施工单位包保责任人列插槽 -->
|
||||||
<template #constructionDept="{ row }">
|
<template #constructionDept="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<span class="person-name">{{ row.constructionDept?.name || '-' }}</span>
|
<span class="person-name">{{ row.constructionDept?.name || "-" }}</span>
|
||||||
<span class="person-phone">{{ row.constructionDept?.phone || '-' }}</span>
|
<span class="person-phone">{{
|
||||||
|
row.constructionDept?.phone || "-"
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 驻地包保责任人列插槽 -->
|
<!-- 驻地包保责任人列插槽 -->
|
||||||
<template #siteResponsible="{ row }">
|
<template #siteResponsible="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<span class="person-name">{{ row.siteResponsible?.name || '-' }}</span>
|
<span class="person-name">{{ row.siteResponsible?.name || "-" }}</span>
|
||||||
<span class="person-phone">{{ row.siteResponsible?.phone || '-' }}</span>
|
<span class="person-phone">{{
|
||||||
|
row.siteResponsible?.phone || "-"
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 区县级包保责任人列插槽 -->
|
<!-- 区县级包保责任人列插槽 -->
|
||||||
<template #countyResponsible="{ row }">
|
<template #countyResponsible="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<span class="person-name">{{ row.countyResponsible?.name || '-' }}</span>
|
<span class="person-name">{{
|
||||||
<span class="person-phone">{{ row.countyResponsible?.phone || '-' }}</span>
|
row.countyResponsible?.name || "-"
|
||||||
|
}}</span>
|
||||||
|
<span class="person-phone">{{
|
||||||
|
row.countyResponsible?.phone || "-"
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 市级包保责任人列插槽 -->
|
<!-- 市级包保责任人列插槽 -->
|
||||||
<template #cityResponsible="{ row }">
|
<template #cityResponsible="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<span class="person-name">{{ row.cityResponsible?.name || '-' }}</span>
|
<span class="person-name">{{ row.cityResponsible?.name || "-" }}</span>
|
||||||
<span class="person-phone">{{ row.cityResponsible?.phone || '-' }}</span>
|
<span class="person-phone">{{
|
||||||
|
row.cityResponsible?.phone || "-"
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -198,24 +214,28 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch, onMounted } from 'vue';
|
import { ref, computed, watch, onMounted } from "vue";
|
||||||
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
|
import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
|
||||||
import { request } from '@/utils/request';
|
import { request } from "@/utils/request";
|
||||||
import { pointTypeOptions, pointLevelOptions, regionOptionsWithAll } from '../component/index.js';
|
import {
|
||||||
import baseDialog from '../component/baseDialog.vue';
|
pointTypeOptions,
|
||||||
|
pointLevelOptions,
|
||||||
|
regionOptionsWithAll,
|
||||||
|
} from "../component/index.js";
|
||||||
|
import baseDialog from "../component/baseDialog.vue";
|
||||||
|
|
||||||
import respondedIcon from '../../../assets/xiangying/有回应@2x.png';
|
import respondedIcon from "../../../assets/xiangying/有回应@2x.png";
|
||||||
import notRespondedIcon from '../../../assets/xiangying/无回应@2x.png';
|
import notRespondedIcon from "../../../assets/xiangying/无回应@2x.png";
|
||||||
import selectedIcon from '../../../assets/xiangying/选中bg@2x.png';
|
import selectedIcon from "../../../assets/xiangying/选中bg@2x.png";
|
||||||
import unselectedIcon from '../../../assets/xiangying/未选中bg@2x.png';
|
import unselectedIcon from "../../../assets/xiangying/未选中bg@2x.png";
|
||||||
|
|
||||||
import Icon0 from '../../../assets/xiangying/选中@2x.png';
|
import Icon0 from "../../../assets/xiangying/选中@2x.png";
|
||||||
import Icon1 from '../../../assets/xiangying/未选中1@2x.png';
|
import Icon1 from "../../../assets/xiangying/未选中1@2x.png";
|
||||||
import Icon2 from '../../../assets/xiangying/未选中2@2x.png';
|
import Icon2 from "../../../assets/xiangying/未选中2@2x.png";
|
||||||
import Icon3 from '../../../assets/xiangying/未选中3@2x.png';
|
import Icon3 from "../../../assets/xiangying/未选中3@2x.png";
|
||||||
import Icon4 from '../../../assets/xiangying/未选中4@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({
|
const props = defineProps({
|
||||||
visible: {
|
visible: {
|
||||||
@ -228,92 +248,92 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemClick']);
|
const emit = defineEmits(["update:visible", "close", "detail", "itemClick"]);
|
||||||
|
|
||||||
// 筛选表单
|
// 筛选表单
|
||||||
const filterForm = ref({
|
const filterForm = ref({
|
||||||
pointType: '',
|
pointType: "",
|
||||||
pointLevel: '',
|
pointLevel: "",
|
||||||
region: '',
|
region: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// 统一的表格列配置（桥梁、边坡、隧道、路段使用）
|
// 统一的表格列配置（桥梁、边坡、隧道、路段使用）
|
||||||
const unifiedColumns = [
|
const unifiedColumns = [
|
||||||
{ prop: 'id', label: '序号', width: '' },
|
{ prop: "id", label: "序号", width: "" },
|
||||||
{ prop: 'region', label: '影响区域', width: '' },
|
{ prop: "region", label: "行政区域", width: "" },
|
||||||
{ prop: 'pointType', label: '影响点类型', width: '' },
|
{ prop: "pointType", label: "影响点类型", width: "" },
|
||||||
{ prop: 'pointLocation', label: '影响点位置', width: '' },
|
{ prop: "pointLocation", label: "影响点位置", width: "" },
|
||||||
{ prop: 'pointLevel', label: '影响点等级', width: '', slot: 'pointLevel' },
|
{ prop: "pointLevel", label: "影响点等级", width: "", slot: "pointLevel" },
|
||||||
{
|
{
|
||||||
prop: 'trafficDept',
|
prop: "trafficDept",
|
||||||
label: '交通主管部门负责人',
|
label: "交通主管部门负责人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'trafficDept',
|
slot: "trafficDept",
|
||||||
},
|
},
|
||||||
{ prop: 'roadOrg', label: '公路机构责任人', width: '', slot: 'roadOrg' },
|
{ prop: "roadOrg", label: "公路机构责任人", width: "", slot: "roadOrg" },
|
||||||
{
|
{
|
||||||
prop: 'maintenance',
|
prop: "maintenance",
|
||||||
label: '养护站负责人',
|
label: "养护站负责人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'maintenance',
|
slot: "maintenance",
|
||||||
},
|
},
|
||||||
{ prop: 'roadKeeper', label: '护路员', width: '', slot: 'roadKeeper' },
|
{ prop: "roadKeeper", label: "护路员", width: "", slot: "roadKeeper" },
|
||||||
{
|
{
|
||||||
prop: 'generalStaff',
|
prop: "generalStaff",
|
||||||
label: '一般人员(路长履职)',
|
label: "一般人员(路长履职)",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'generalStaff',
|
slot: "generalStaff",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'operation',
|
prop: "operation",
|
||||||
label: '操作',
|
label: "操作",
|
||||||
width: '80',
|
width: "80",
|
||||||
slot: 'operation',
|
slot: "operation",
|
||||||
fixed: 'right',
|
fixed: "right",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// 项目类型专用表格列配置
|
// 项目类型专用表格列配置
|
||||||
const projectColumns = [
|
const projectColumns = [
|
||||||
{ prop: 'id', label: '序号', width: '60' },
|
{ prop: "id", label: "序号", width: "60" },
|
||||||
{ prop: 'region', label: '影响区域', width: '' },
|
{ prop: "region", label: "行政区域", width: "" },
|
||||||
{ prop: 'pointType', label: '影响点类型', width: '' },
|
{ prop: "pointType", label: "影响点类型", width: "" },
|
||||||
{ prop: 'siteName', label: '驻地名称', width: '' },
|
{ prop: "siteName", label: "驻地名称", width: "" },
|
||||||
{
|
{
|
||||||
prop: 'whistleblower',
|
prop: "whistleblower",
|
||||||
label: '吹哨人',
|
label: "吹哨人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'whistleblower',
|
slot: "whistleblower",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'constructionUnit',
|
prop: "constructionUnit",
|
||||||
label: '建设单位包保责任人',
|
label: "建设单位包保责任人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'constructionUnit',
|
slot: "constructionUnit",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'constructionDept',
|
prop: "constructionDept",
|
||||||
label: '施工单位包保责任人',
|
label: "施工单位包保责任人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'constructionDept',
|
slot: "constructionDept",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'siteResponsible',
|
prop: "siteResponsible",
|
||||||
label: '驻地包保责任人',
|
label: "驻地包保责任人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'siteResponsible',
|
slot: "siteResponsible",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'countyResponsible',
|
prop: "countyResponsible",
|
||||||
label: '区县级包保责任人',
|
label: "区县级包保责任人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'countyResponsible',
|
slot: "countyResponsible",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'cityResponsible',
|
prop: "cityResponsible",
|
||||||
label: '市级包保责任人',
|
label: "市级包保责任人",
|
||||||
width: '',
|
width: "",
|
||||||
slot: 'cityResponsible',
|
slot: "cityResponsible",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -330,44 +350,44 @@ const tableColumns = ref(bridgeColumns);
|
|||||||
const tableData = ref([]);
|
const tableData = ref([]);
|
||||||
// 影响点数据
|
// 影响点数据
|
||||||
const impactData = ref([
|
const impactData = ref([
|
||||||
{ name: '影响路段', count: 0, icon: Icon4, type: '路段' },
|
{ name: "影响路段", count: 0, icon: Icon4, type: "路段" },
|
||||||
{ name: '影响桥梁', count: 0, icon: Icon0, type: '桥梁' },
|
{ name: "影响桥梁", count: 0, icon: Icon0, type: "桥梁" },
|
||||||
{ name: '影响隧道', count: 0, icon: Icon2, type: '隧道' },
|
{ name: "影响隧道", count: 0, icon: Icon2, type: "隧道" },
|
||||||
{ name: '影响边坡', count: 0, icon: Icon1, type: '边坡' },
|
{ name: "影响边坡", count: 0, icon: Icon1, type: "边坡" },
|
||||||
{ name: '影响项目', count: 0, icon: Icon3, type: '项目' },
|
{ name: "影响项目", count: 0, icon: Icon3, type: "项目" },
|
||||||
]);
|
]);
|
||||||
// 顶部卡片数据
|
// 顶部卡片数据
|
||||||
const loadBarChartData = async () => {
|
const loadBarChartData = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/weather-warning/affected-count',
|
url: "/snow-ops-platform/weather-warning/affected-count",
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res.code == '00000') {
|
if (res.code == "00000") {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data && Array.isArray(data)) {
|
if (data && Array.isArray(data)) {
|
||||||
// 英文转中文映射
|
// 英文转中文映射
|
||||||
const nameMap = {
|
const nameMap = {
|
||||||
'road-section': '路段',
|
"road-section": "路段",
|
||||||
bridge: '桥梁',
|
bridge: "桥梁",
|
||||||
tunnel: '隧道',
|
tunnel: "隧道",
|
||||||
slope: '边坡',
|
slope: "边坡",
|
||||||
project: '项目',
|
project: "项目",
|
||||||
Road: '路段',
|
Road: "路段",
|
||||||
Bridge: '桥梁',
|
Bridge: "桥梁",
|
||||||
Tunnel: '隧道',
|
Tunnel: "隧道",
|
||||||
Slope: '边坡',
|
Slope: "边坡",
|
||||||
Project: '项目',
|
Project: "项目",
|
||||||
};
|
};
|
||||||
|
|
||||||
// 转换英文name为中文
|
// 转换英文name为中文
|
||||||
const convertedData = data.map(item => {
|
const convertedData = data.map((item) => {
|
||||||
const name = nameMap[item.name] || item.name;
|
const name = nameMap[item.name] || item.name;
|
||||||
return { ...item, name };
|
return { ...item, name };
|
||||||
});
|
});
|
||||||
convertedData.forEach(item => {
|
convertedData.forEach((item) => {
|
||||||
impactData.value.forEach(stat => {
|
impactData.value.forEach((stat) => {
|
||||||
if (stat.name.includes(item.extension)) {
|
if (stat.name.includes(item.extension)) {
|
||||||
stat.count = item.count || 0;
|
stat.count = item.count || 0;
|
||||||
}
|
}
|
||||||
@ -376,15 +396,15 @@ const loadBarChartData = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载柱状图数据失败:', error);
|
console.error("加载柱状图数据失败:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const cardType = ref('0');
|
const cardType = ref("0");
|
||||||
const cardTypeVal = ref('路段');
|
const cardTypeVal = ref("路段");
|
||||||
|
|
||||||
// 根据 cardType 获取对应的表格列配置
|
// 根据 cardType 获取对应的表格列配置
|
||||||
const getColumnsByType = type => {
|
const getColumnsByType = (type) => {
|
||||||
const typeMap = {
|
const typeMap = {
|
||||||
0: bridgeColumns,
|
0: bridgeColumns,
|
||||||
1: slopeColumns,
|
1: slopeColumns,
|
||||||
@ -396,21 +416,23 @@ const getColumnsByType = type => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 根据 cardType 获取对应的 API 路径
|
// 根据 cardType 获取对应的 API 路径
|
||||||
const getApiUrlByType = type => {
|
const getApiUrlByType = (type) => {
|
||||||
const urlMap = {
|
const urlMap = {
|
||||||
桥梁: '/snow-ops-platform/weather-warning/affected-object/bridge',
|
桥梁: "/snow-ops-platform/weather-warning/affected-object/bridge",
|
||||||
边坡: '/snow-ops-platform/weather-warning/affected-object/slope',
|
边坡: "/snow-ops-platform/weather-warning/affected-object/slope",
|
||||||
隧道: '/snow-ops-platform/weather-warning/affected-object/tunnel',
|
隧道: "/snow-ops-platform/weather-warning/affected-object/tunnel",
|
||||||
项目: '/snow-ops-platform/weather-warning/affected-object/project',
|
项目: "/snow-ops-platform/weather-warning/affected-object/project",
|
||||||
路段: '/snow-ops-platform/weather-warning/affected-object/road-section',
|
路段: "/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) => {
|
const handleClick = (index, item) => {
|
||||||
tableData.value = [];
|
tableData.value = [];
|
||||||
cardType.value = index + '';
|
cardType.value = index + "";
|
||||||
cardTypeVal.value = item.type;
|
cardTypeVal.value = item.type;
|
||||||
// 切换表格列配置
|
// 切换表格列配置
|
||||||
tableColumns.value = getColumnsByType(cardType.value);
|
tableColumns.value = getColumnsByType(cardType.value);
|
||||||
@ -444,43 +466,43 @@ const visiblePages = computed(() => {
|
|||||||
|
|
||||||
// 关闭对话框
|
// 关闭对话框
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
emit('update:visible', false);
|
emit("update:visible", false);
|
||||||
emit('close');
|
emit("close");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 点击遮罩关闭已由base-dialog组件处理
|
// 点击遮罩关闭已由base-dialog组件处理
|
||||||
|
|
||||||
// 查询
|
// 查询
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
console.log('查询条件:', filterForm.value);
|
console.log("查询条件:", filterForm.value);
|
||||||
currentPage.value = 1;
|
currentPage.value = 1;
|
||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 查看详情
|
// 查看详情
|
||||||
const handleDetail = item => {
|
const handleDetail = (item) => {
|
||||||
emit('detail', item);
|
emit("detail", item);
|
||||||
emit('itemClick', item);
|
emit("itemClick", item);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 分页操作
|
// 分页操作
|
||||||
const handleSizeChange = val => {
|
const handleSizeChange = (val) => {
|
||||||
pageSize.value = val;
|
pageSize.value = val;
|
||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCurrentChange = val => {
|
const handleCurrentChange = (val) => {
|
||||||
currentPage.value = val;
|
currentPage.value = val;
|
||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
// 获取时间参数
|
// 获取时间参数
|
||||||
const getTimeParams = () => {
|
const getTimeParams = () => {
|
||||||
console.log('原始时间范围:', props.handleImpactItem);
|
console.log("原始时间范围:", props.handleImpactItem);
|
||||||
return {
|
return {
|
||||||
// start: `${year}-${month}-01 00:00:00`,
|
// start: `${year}-${month}-01 00:00:00`,
|
||||||
// end: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
|
// end: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
|
||||||
start: formatDateTime(props.handleImpactItem.dateRange?.[0] || ''),
|
start: formatDateTime(props.handleImpactItem.dateRange?.[0] || ""),
|
||||||
end: formatDateTime(props.handleImpactItem.dateRange?.[1] || ''),
|
end: formatDateTime(props.handleImpactItem.dateRange?.[1] || ""),
|
||||||
limit: pageSize.value,
|
limit: pageSize.value,
|
||||||
offset: (currentPage.value - 1) * pageSize.value,
|
offset: (currentPage.value - 1) * pageSize.value,
|
||||||
};
|
};
|
||||||
@ -488,36 +510,41 @@ const getTimeParams = () => {
|
|||||||
// 处理数据为统一格式
|
// 处理数据为统一格式
|
||||||
const processUnifiedData = (item, type) => {
|
const processUnifiedData = (item, type) => {
|
||||||
// 获取等级样式类
|
// 获取等级样式类
|
||||||
const getLevelClass = level => {
|
const getLevelClass = (level) => {
|
||||||
const levelMap = {
|
const levelMap = {
|
||||||
红色预警: 'level-red',
|
红色预警: "level-red",
|
||||||
橙色预警: 'level-orange',
|
橙色预警: "level-orange",
|
||||||
黄色预警: 'level-yellow',
|
黄色预警: "level-yellow",
|
||||||
蓝色预警: 'level-blue',
|
蓝色预警: "level-blue",
|
||||||
高风险: 'level-red',
|
高风险: "level-red",
|
||||||
中风险: 'level-orange',
|
中风险: "level-orange",
|
||||||
低风险: 'level-blue',
|
低风险: "level-blue",
|
||||||
};
|
};
|
||||||
return levelMap[level] || '';
|
return levelMap[level] || "";
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取影响点等级
|
// 获取影响点等级
|
||||||
const pointLevel =
|
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 = {
|
const baseData = {
|
||||||
id: item.id,
|
id: item.id,
|
||||||
// 影响区域
|
// 行政区域
|
||||||
region:
|
region:
|
||||||
item.GL1_QXMC ||
|
item.GL1_QXMC ||
|
||||||
item.COUNTY ||
|
item.COUNTY ||
|
||||||
item.county ||
|
item.county ||
|
||||||
item.region ||
|
item.region ||
|
||||||
item.ADMINISTRATIVE_REGION ||
|
item.ADMINISTRATIVE_REGION ||
|
||||||
'-',
|
"-",
|
||||||
// 影响点类型
|
// 影响点类型
|
||||||
pointType: impactData.value[type].type || '-',
|
pointType: impactData.value[type].type || "-",
|
||||||
// 影响点位置（根据类型取不同字段）
|
// 影响点位置（根据类型取不同字段）
|
||||||
pointLocation:
|
pointLocation:
|
||||||
item.GL1_QLMC ||
|
item.GL1_QLMC ||
|
||||||
@ -526,60 +553,62 @@ const processUnifiedData = (item, type) => {
|
|||||||
item.PROJECT_NAME ||
|
item.PROJECT_NAME ||
|
||||||
item.GL1_LXBH ||
|
item.GL1_LXBH ||
|
||||||
item.name ||
|
item.name ||
|
||||||
'-',
|
"-",
|
||||||
// 影响点等级
|
// 影响点等级
|
||||||
pointLevel: pointLevel,
|
pointLevel: pointLevel,
|
||||||
levelClass: getLevelClass(pointLevel),
|
levelClass: getLevelClass(pointLevel),
|
||||||
// 交通主管部门负责人
|
// 交通主管部门负责人
|
||||||
trafficDept: {
|
trafficDept: {
|
||||||
// name: item.trafficDeptName || item.trafficManager || "-",
|
// name: item.trafficDeptName || item.trafficManager || "-",
|
||||||
phone: item.trafficDeptPhone || item.trafficManagerPhone || '-',
|
phone: item.trafficDeptPhone || item.trafficManagerPhone || "-",
|
||||||
name: '-',
|
name: "-",
|
||||||
phone: '-',
|
phone: "-",
|
||||||
},
|
},
|
||||||
// 公路机构责任人
|
// 公路机构责任人
|
||||||
roadOrg: {
|
roadOrg: {
|
||||||
// name: item.roadOrgName || item.roadManager || "-",
|
// name: item.roadOrgName || item.roadManager || "-",
|
||||||
// phone: item.roadOrgPhone || item.roadManagerPhone || "-",
|
// phone: item.roadOrgPhone || item.roadManagerPhone || "-",
|
||||||
name: '-',
|
name: "-",
|
||||||
phone: '-',
|
phone: "-",
|
||||||
},
|
},
|
||||||
// 养护站负责人
|
// 养护站负责人
|
||||||
maintenance: {
|
maintenance: {
|
||||||
// name: item.maintenanceName || item.maintenanceManager || "-",
|
// name: item.maintenanceName || item.maintenanceManager || "-",
|
||||||
// phone: item.maintenancePhone || item.maintenanceManagerPhone || "-",
|
// phone: item.maintenancePhone || item.maintenanceManagerPhone || "-",
|
||||||
name: '-',
|
name: "-",
|
||||||
phone: '-',
|
phone: "-",
|
||||||
},
|
},
|
||||||
// 护路员
|
// 护路员
|
||||||
roadKeeper: {
|
roadKeeper: {
|
||||||
// name: item.roadKeeperName || item.roadKeeper || "-",
|
// name: item.roadKeeperName || item.roadKeeper || "-",
|
||||||
// phone: item.roadKeeperPhone || item.roadKeeperPhone || "-",
|
// phone: item.roadKeeperPhone || item.roadKeeperPhone || "-",
|
||||||
name: '-',
|
name: "-",
|
||||||
phone: '-',
|
phone: "-",
|
||||||
},
|
},
|
||||||
// 一般人员（路长履职）
|
// 一般人员（路长履职）
|
||||||
generalStaff: {
|
generalStaff: {
|
||||||
// name: item.generalStaffName || item.roadChief || "-",
|
// name: item.generalStaffName || item.roadChief || "-",
|
||||||
// phone: item.generalStaffPhone || item.roadChiefPhone || "-",
|
// phone: item.generalStaffPhone || item.roadChiefPhone || "-",
|
||||||
name: '-',
|
name: "-",
|
||||||
phone: '-',
|
phone: "-",
|
||||||
},
|
},
|
||||||
// 保留原始数据供详情使用
|
// 保留原始数据供详情使用
|
||||||
rawData: item,
|
rawData: item,
|
||||||
};
|
};
|
||||||
|
|
||||||
// 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典）
|
// 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典）
|
||||||
if (cardTypeVal.value === '桥梁') {
|
if (cardTypeVal.value === "桥梁") {
|
||||||
return {
|
return {
|
||||||
...baseData,
|
...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 || '-',
|
pointLevel: item.GL1_JSZKPJDJ || item.GL1_PDDJ || item.GL1_CSFXDJ || "-",
|
||||||
levelClass: getLevelClass(item.GL1_JSZKPJDJ || item.GL1_PDDJ || item.GL1_CSFXDJ),
|
levelClass: getLevelClass(
|
||||||
|
item.GL1_JSZKPJDJ || item.GL1_PDDJ || item.GL1_CSFXDJ,
|
||||||
|
),
|
||||||
// // 交通主管部门负责人 - 管理单位负责人（GL1_DWFZR）
|
// // 交通主管部门负责人 - 管理单位负责人（GL1_DWFZR）
|
||||||
// trafficDept: {
|
// trafficDept: {
|
||||||
// name: item.GL1_DWFZR || "-",
|
// name: item.GL1_DWFZR || "-",
|
||||||
@ -609,16 +638,18 @@ const processUnifiedData = (item, type) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典）
|
// 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典）
|
||||||
if (cardTypeVal.value === '隧道') {
|
if (cardTypeVal.value === "隧道") {
|
||||||
return {
|
return {
|
||||||
...baseData,
|
...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 || '-',
|
pointLevel: item.GL1_PDDJ || item.GL1_TJJGPDDJ || item.GL1_SDYHDJ || "-",
|
||||||
levelClass: getLevelClass(item.GL1_PDDJ || item.GL1_TJJGPDDJ || item.GL1_SDYHDJ),
|
levelClass: getLevelClass(
|
||||||
|
item.GL1_PDDJ || item.GL1_TJJGPDDJ || item.GL1_SDYHDJ,
|
||||||
|
),
|
||||||
// // 交通主管部门负责人 - 管养单位行政领导（GL1_GYDWXZLD）
|
// // 交通主管部门负责人 - 管养单位行政领导（GL1_GYDWXZLD）
|
||||||
// trafficDept: {
|
// trafficDept: {
|
||||||
// name: item.GL1_GYDWXZLD || "-",
|
// name: item.GL1_GYDWXZLD || "-",
|
||||||
@ -648,83 +679,102 @@ const processUnifiedData = (item, type) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 路段类型特殊处理（根据BASE_XJLD路线信息表字典）
|
// 路段类型特殊处理（根据BASE_XJLD路线信息表字典）
|
||||||
if (cardTypeVal.value === '路段') {
|
if (cardTypeVal.value === "路段") {
|
||||||
return {
|
return {
|
||||||
...baseData,
|
...baseData,
|
||||||
// 影响区域 - 使用区县名称
|
// 行政区域 - 使用区县名称
|
||||||
region: item.GL1_ZDMC || '-',
|
region: item.GL1_ZDMC || "-",
|
||||||
// 影响点位置 - 使用路线名称+起终点桩号
|
// 影响点位置 - 使用路线名称+起终点桩号
|
||||||
pointLocation: item.GL1_LXMC + item.GL1_LXBH,
|
pointLocation: `${item.GL1_GLMC || item.GL1_GLBH || "-"} (${item.GL1_QDZH || "-"} - ${item.GL1_ZDZH || "-"})`,
|
||||||
// 影响点等级 - 使用风险等级
|
// 影响点等级 - 使用风险等级
|
||||||
pointLevel: item.GL1_FXDJ || '',
|
pointLevel: item.GL1_FXDJ || "-",
|
||||||
levelClass: getLevelClass(item.GL1_FXDJ),
|
levelClass: getLevelClass(item.GL1_FXDJ),
|
||||||
// 交通主管部门负责人 - 使用GL1_JTXM和GL1_JTDH
|
// 交通主管部门负责人 - 使用GL1_JTXM和GL1_JTDH
|
||||||
trafficDept: {
|
trafficDept: {
|
||||||
name: item.GL1_JTXM || '-',
|
name: item.GL1_JTXM || "-",
|
||||||
phone: item.GL1_JTDH || '-',
|
phone: item.GL1_JTDH || "-",
|
||||||
},
|
},
|
||||||
// 公路机构责任人 - 使用GL1_JGXM和GL1_JGDH
|
// 公路机构责任人 - 使用GL1_JGXM和GL1_JGDH
|
||||||
roadOrg: {
|
roadOrg: {
|
||||||
name: item.GL1_JGXM || '-',
|
name: item.GL1_JGXM || "-",
|
||||||
phone: item.GL1_JGDH || '-',
|
phone: item.GL1_JGDH || "-",
|
||||||
},
|
},
|
||||||
// 养护站负责人 - 使用GL1_YHXM和GL1_YHDH
|
// 养护站负责人 - 使用GL1_YHXM和GL1_YHDH
|
||||||
maintenance: {
|
maintenance: {
|
||||||
name: item.GL1_YHXM || '-',
|
name: item.GL1_YHXM || "-",
|
||||||
phone: item.GL1_YHDH || '-',
|
phone: item.GL1_YHDH || "-",
|
||||||
},
|
},
|
||||||
// 护路员 - 使用GL1_HLXM和GL1_HLDH
|
// 护路员 - 使用GL1_HLXM和GL1_HLDH
|
||||||
roadKeeper: {
|
roadKeeper: {
|
||||||
name: item.GL1_HLXM || '-',
|
name: item.GL1_HLXM || "-",
|
||||||
phone: item.GL1_HLDH || '-',
|
phone: item.GL1_HLDH || "-",
|
||||||
},
|
},
|
||||||
// 一般人员（路长履职）- 使用风险类型和风险描述
|
// 一般人员（路长履职）- 使用风险类型和风险描述
|
||||||
generalStaff: {
|
generalStaff: {
|
||||||
name: item.GL1_FXLX || '-',
|
name: item.GL1_FXLX || "-",
|
||||||
phone: item.GL1_FXMS || '-',
|
phone: item.GL1_FXMS || "-",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 项目类型特殊处理（根据SQL字段映射）
|
// 项目类型特殊处理（根据SQL字段映射）
|
||||||
if (cardTypeVal.value === '项目') {
|
if (cardTypeVal.value === "项目") {
|
||||||
return {
|
return {
|
||||||
...baseData,
|
...baseData,
|
||||||
// 影响区域 - 使用COUNTY字段
|
// 行政区域 - 使用COUNTY字段
|
||||||
region: item.COUNTY || item.county || item.county_name || '-',
|
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 / WHISTLEBLOWER_PHONE
|
||||||
whistleblower: {
|
whistleblower: {
|
||||||
name: item.WHISTLEBLOWER_NAME || item.whistleblowerName || '-',
|
name: item.WHISTLEBLOWER_NAME || item.whistleblowerName || "-",
|
||||||
phone: item.WHISTLEBLOWER_PHONE || item.whistleblowerPhone || '-',
|
phone: item.WHISTLEBLOWER_PHONE || item.whistleblowerPhone || "-",
|
||||||
},
|
},
|
||||||
// 建设单位包保责任人 - OWNER_RESPONSIBLE_PERSON / OWNER_RESPONSIBLE_PHONE
|
// 建设单位包保责任人 - OWNER_RESPONSIBLE_PERSON / OWNER_RESPONSIBLE_PHONE
|
||||||
constructionUnit: {
|
constructionUnit: {
|
||||||
name: item.OWNER_RESPONSIBLE_PERSON || item.ownerResponsiblePerson || '-',
|
name:
|
||||||
phone: item.OWNER_RESPONSIBLE_PHONE || item.ownerResponsiblePhone || '-',
|
item.OWNER_RESPONSIBLE_PERSON || item.ownerResponsiblePerson || "-",
|
||||||
|
phone:
|
||||||
|
item.OWNER_RESPONSIBLE_PHONE || item.ownerResponsiblePhone || "-",
|
||||||
},
|
},
|
||||||
// 施工单位包保责任人 - CONSTRUCTOR_RESPONSIBLE_PERSON / CONSTRUCTOR_RESPONSIBLE_PHONE
|
// 施工单位包保责任人 - CONSTRUCTOR_RESPONSIBLE_PERSON / CONSTRUCTOR_RESPONSIBLE_PHONE
|
||||||
constructionDept: {
|
constructionDept: {
|
||||||
name: item.CONSTRUCTOR_RESPONSIBLE_PERSON || item.constructorResponsiblePerson || '-',
|
name:
|
||||||
phone: item.CONSTRUCTOR_RESPONSIBLE_PHONE || item.constructorResponsiblePhone || '-',
|
item.CONSTRUCTOR_RESPONSIBLE_PERSON ||
|
||||||
|
item.constructorResponsiblePerson ||
|
||||||
|
"-",
|
||||||
|
phone:
|
||||||
|
item.CONSTRUCTOR_RESPONSIBLE_PHONE ||
|
||||||
|
item.constructorResponsiblePhone ||
|
||||||
|
"-",
|
||||||
},
|
},
|
||||||
// 驻地包保责任人 - SITE_RESPONSIBLE_PERSON / SITE_RESPONSIBLE_PHONE
|
// 驻地包保责任人 - SITE_RESPONSIBLE_PERSON / SITE_RESPONSIBLE_PHONE
|
||||||
siteResponsible: {
|
siteResponsible: {
|
||||||
name: item.SITE_RESPONSIBLE_PERSON || item.siteResponsiblePerson || '-',
|
name: item.SITE_RESPONSIBLE_PERSON || item.siteResponsiblePerson || "-",
|
||||||
phone: item.SITE_RESPONSIBLE_PHONE || item.siteResponsiblePhone || '-',
|
phone: item.SITE_RESPONSIBLE_PHONE || item.siteResponsiblePhone || "-",
|
||||||
},
|
},
|
||||||
// 区县级包保责任人 - DISTRICT_RESPONSIBLE_PERSON / DISTRICT_RESPONSIBLE_PHONE
|
// 区县级包保责任人 - DISTRICT_RESPONSIBLE_PERSON / DISTRICT_RESPONSIBLE_PHONE
|
||||||
countyResponsible: {
|
countyResponsible: {
|
||||||
name: item.DISTRICT_RESPONSIBLE_PERSON || item.districtResponsiblePerson || '-',
|
name:
|
||||||
phone: item.DISTRICT_RESPONSIBLE_PHONE || item.districtResponsiblePhone || '-',
|
item.DISTRICT_RESPONSIBLE_PERSON ||
|
||||||
|
item.districtResponsiblePerson ||
|
||||||
|
"-",
|
||||||
|
phone:
|
||||||
|
item.DISTRICT_RESPONSIBLE_PHONE ||
|
||||||
|
item.districtResponsiblePhone ||
|
||||||
|
"-",
|
||||||
},
|
},
|
||||||
// 市级包保责任人 - CITY_RESPONSIBLE_PERSON / CITY_RESPONSIBLE_PHONE
|
// 市级包保责任人 - CITY_RESPONSIBLE_PERSON / CITY_RESPONSIBLE_PHONE
|
||||||
cityResponsible: {
|
cityResponsible: {
|
||||||
name: item.CITY_RESPONSIBLE_PERSON || item.cityResponsiblePerson || '-',
|
name: item.CITY_RESPONSIBLE_PERSON || item.cityResponsiblePerson || "-",
|
||||||
phone: item.CITY_RESPONSIBLE_PHONE || item.cityResponsiblePhone || '-',
|
phone: item.CITY_RESPONSIBLE_PHONE || item.cityResponsiblePhone || "-",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -739,7 +789,7 @@ const processDataByType = (item, type) => {
|
|||||||
|
|
||||||
// 获取数据
|
// 获取数据
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
console.log('获取第', currentPage.value, '页数据, 类型:', cardType.value);
|
console.log("获取第", currentPage.value, "页数据, 类型:", cardType.value);
|
||||||
try {
|
try {
|
||||||
const timeParams = getTimeParams();
|
const timeParams = getTimeParams();
|
||||||
|
|
||||||
@ -748,11 +798,11 @@ const fetchData = async () => {
|
|||||||
|
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: apiUrl,
|
url: apiUrl,
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
params: timeParams,
|
params: timeParams,
|
||||||
});
|
});
|
||||||
// 路段存在分页功能了，需要处理返回数据
|
// 路段存在分页功能了，需要处理返回数据
|
||||||
if (cardTypeVal.value == '路段') {
|
if (cardTypeVal.value == "路段") {
|
||||||
if (res.data) {
|
if (res.data) {
|
||||||
tableData.value = res.data.map((item, index) => ({
|
tableData.value = res.data.map((item, index) => ({
|
||||||
...processDataByType(item, cardType.value),
|
...processDataByType(item, cardType.value),
|
||||||
@ -761,7 +811,7 @@ const fetchData = async () => {
|
|||||||
total.value = res.total || 0;
|
total.value = res.total || 0;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (res.code === '00000' && res.data) {
|
if (res.code === "00000" && res.data) {
|
||||||
// 处理返回数据
|
// 处理返回数据
|
||||||
const allData = res.data;
|
const allData = res.data;
|
||||||
total.value = allData.length || 0;
|
total.value = allData.length || 0;
|
||||||
@ -781,7 +831,7 @@ const fetchData = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取影响点数据失败:', error);
|
console.error("获取影响点数据失败:", error);
|
||||||
tableData.value = [];
|
tableData.value = [];
|
||||||
total.value = 0;
|
total.value = 0;
|
||||||
}
|
}
|
||||||
@ -790,19 +840,19 @@ const fetchData = async () => {
|
|||||||
// 监听visible变化
|
// 监听visible变化
|
||||||
watch(
|
watch(
|
||||||
() => props.visible,
|
() => props.visible,
|
||||||
newVal => {
|
(newVal) => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
filterForm.value = {
|
filterForm.value = {
|
||||||
pointType: '',
|
pointType: "",
|
||||||
pointLevel: '',
|
pointLevel: "",
|
||||||
region: '',
|
region: "",
|
||||||
};
|
};
|
||||||
cardType.value = '0';
|
cardType.value = "0";
|
||||||
loadBarChartData();
|
loadBarChartData();
|
||||||
currentPage.value = 1;
|
currentPage.value = 1;
|
||||||
fetchData();
|
fetchData();
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -819,7 +869,11 @@ watch(
|
|||||||
gap: vw(16);
|
gap: vw(16);
|
||||||
|
|
||||||
.stat-card {
|
.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);
|
border: vw(2) solid rgba(64, 169, 255, 0.4);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
|||||||
@ -24,9 +24,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, defineEmits, computed } from 'vue';
|
import { defineProps, defineEmits, computed } from "vue";
|
||||||
import iconProject from '../../../assets/RiskWarning_img/弹窗背景@2x.png';
|
import iconProject from "../../../assets/RiskWarning_img/弹窗背景@2x.png";
|
||||||
import iconTunnel from '../../../assets/RiskWarning_img/图标_media_dvr@2x.png';
|
import iconTunnel from "../../../assets/RiskWarning_img/图标_media_dvr@2x.png";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
visible: {
|
visible: {
|
||||||
@ -35,7 +35,7 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'project', // project, tunnel, bridge, road
|
default: "project", // project, tunnel, bridge, road
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@ -43,23 +43,23 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:visible']);
|
const emit = defineEmits(["update:visible"]);
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
emit('update:visible', false);
|
emit("update:visible", false);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 根据类型和数据显示不同的标题和内容
|
// 根据类型和数据显示不同的标题和内容
|
||||||
const dialogTitle = computed(() => {
|
const dialogTitle = computed(() => {
|
||||||
const titleMap = {
|
const titleMap = {
|
||||||
project: '项目信息',
|
project: "项目信息",
|
||||||
tunnel: '隧道信息',
|
tunnel: "隧道信息",
|
||||||
bridge: '桥梁信息',
|
bridge: "桥梁信息",
|
||||||
road: '路段信息',
|
road: "路段信息",
|
||||||
emergency: '抢险队伍',
|
emergency: "抢险队伍",
|
||||||
slope: '边坡信息',
|
slope: "边坡信息",
|
||||||
};
|
};
|
||||||
return titleMap[props.type] || '详细信息';
|
return titleMap[props.type] || "详细信息";
|
||||||
});
|
});
|
||||||
|
|
||||||
const dialogItems = computed(() => {
|
const dialogItems = computed(() => {
|
||||||
@ -67,195 +67,202 @@ const dialogItems = computed(() => {
|
|||||||
const type = props.type;
|
const type = props.type;
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'project':
|
case "project":
|
||||||
return [
|
return [
|
||||||
{ label: '项目名称', value: data.PROJECT_NAME || '-' },
|
{ label: "项目名称", value: data.PROJECT_NAME || "-" },
|
||||||
{ label: '子项目名称', value: data.SUB_PROJECT_NAME || '-' },
|
{ label: "子项目名称", value: data.SUB_PROJECT_NAME || "-" },
|
||||||
{ label: '影响区域', value: data.ADMINISTRATIVE_REGION || '-' },
|
{ label: "行政区域", value: data.ADMINISTRATIVE_REGION || "-" },
|
||||||
{ label: '驻地名称', value: data.SITE_NAME || '-' },
|
{ label: "驻地名称", value: data.SITE_NAME || "-" },
|
||||||
{ label: '驻地地址', value: data.SITE_ADDRESS || data.COUNTY || '-' },
|
{ label: "驻地地址", value: data.SITE_ADDRESS || data.COUNTY || "-" },
|
||||||
{ label: '驻地人数', value: data.SITE_POPULATION || '-' },
|
{ label: "驻地人数", value: data.SITE_POPULATION || "-" },
|
||||||
{ label: '驻地类型', value: data.SITE_TYPE || '-' },
|
{ label: "驻地类型", value: data.SITE_TYPE || "-" },
|
||||||
{ label: '驻地风险等级', value: data.RISK_LEVEL || '-' },
|
{ label: "驻地风险等级", value: data.RISK_LEVEL || "-" },
|
||||||
{ label: '搬迁状态', value: data.RELOCATION_STATUS || '-' },
|
{ label: "搬迁状态", value: data.RELOCATION_STATUS || "-" },
|
||||||
{ label: '项目类型', value: data.PROJECT_TYPE || '-' },
|
{ label: "项目类型", value: data.PROJECT_TYPE || "-" },
|
||||||
{ label: '房建类型', value: data.BUILDING_TYPE || '-' },
|
{ label: "房建类型", value: data.BUILDING_TYPE || "-" },
|
||||||
{ label: '建设单位', value: data.CONSTRUCTION_UNIT || '-' },
|
{ label: "建设单位", value: data.CONSTRUCTION_UNIT || "-" },
|
||||||
{ label: '业主责任人', value: data.OWNER_RESPONSIBLE_PERSON || '-' },
|
{ label: "业主责任人", value: data.OWNER_RESPONSIBLE_PERSON || "-" },
|
||||||
{ label: '业主责任人电话', value: data.OWNER_RESPONSIBLE_PHONE || '-' },
|
{ label: "业主责任人电话", value: data.OWNER_RESPONSIBLE_PHONE || "-" },
|
||||||
{ label: '施工责任人', value: data.CONSTRUCTOR_RESPONSIBLE_PERSON || '-' },
|
{ label: "施工责任人", value: data.CONSTRUCTOR_RESPONSIBLE_PERSON || "-" },
|
||||||
{ label: '施工责任人电话', value: data.CONSTRUCTOR_RESPONSIBLE_PHONE || '-' },
|
{ label: "施工责任人电话", value: data.CONSTRUCTOR_RESPONSIBLE_PHONE || "-" },
|
||||||
{ label: '驻地责任人', value: data.SITE_RESPONSIBLE_PERSON || '-' },
|
{ label: "驻地责任人", value: data.SITE_RESPONSIBLE_PERSON || "-" },
|
||||||
{ label: '驻地责任人电话', value: data.SITE_RESPONSIBLE_PHONE || '-' },
|
{ label: "驻地责任人电话", value: data.SITE_RESPONSIBLE_PHONE || "-" },
|
||||||
{ label: '市级责任人', value: data.CITY_RESPONSIBLE_PERSON || '-' },
|
{ label: "市级责任人", value: data.CITY_RESPONSIBLE_PERSON || "-" },
|
||||||
{ label: '市级责任人电话', value: data.CITY_RESPONSIBLE_PHONE || '-' },
|
{ label: "市级责任人电话", value: data.CITY_RESPONSIBLE_PHONE || "-" },
|
||||||
{ label: '区县责任人', value: data.DISTRICT_RESPONSIBLE_PERSON || '-' },
|
{ label: "区县责任人", value: data.DISTRICT_RESPONSIBLE_PERSON || "-" },
|
||||||
{ label: '区县责任人电话', value: data.DISTRICT_RESPONSIBLE_PHONE || '-' },
|
{ label: "区县责任人电话", value: data.DISTRICT_RESPONSIBLE_PHONE || "-" },
|
||||||
{ label: '吹哨人', value: data.WHISTLEBLOWER_NAME || '-' },
|
{ label: "吹哨人", value: data.WHISTLEBLOWER_NAME || "-" },
|
||||||
{ label: '吹哨人电话', value: data.WHISTLEBLOWER_PHONE || '-' },
|
{ label: "吹哨人电话", value: data.WHISTLEBLOWER_PHONE || "-" },
|
||||||
{ label: '备注', value: data.REMARKS || '-' },
|
{ label: "备注", value: data.REMARKS || "-" },
|
||||||
];
|
];
|
||||||
case 'tunnel':
|
case "tunnel":
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
label: '隧道名称',
|
label: "隧道名称",
|
||||||
value: data.GL1_SDMC || '-',
|
value: data.GL1_SDMC || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '建成时间',
|
label: "建成时间",
|
||||||
value: data.HEIGHT || data.GL1_SDGD ? `${data.HEIGHT || data.GL1_SDGD}(米)` : '-',
|
value:
|
||||||
|
data.HEIGHT || data.GL1_SDGD
|
||||||
|
? `${data.HEIGHT || data.GL1_SDGD}(米)`
|
||||||
|
: "-",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: '编号',
|
label: "编号",
|
||||||
value: data.GL1_ZJ || '-',
|
value: data.GL1_ZJ || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '入口桩号',
|
label: "入口桩号",
|
||||||
value: data.GL1_RKZH || '-',
|
value: data.GL1_RKZH || "-",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: '所属区县',
|
label: "所属区县",
|
||||||
value: data.GL1_QXMC || '-',
|
value: data.GL1_QXMC || "-",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: '隧道净宽',
|
label: "隧道净宽",
|
||||||
value: data.GL1_SDJG || '-',
|
value: data.GL1_SDJG || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '隧道净高',
|
label: "隧道净高",
|
||||||
value: data.GL1_SDJK || '-',
|
value: data.GL1_SDJK || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '隧道长度',
|
label: "隧道长度",
|
||||||
value: data.GL1_SDC || '-',
|
value: data.GL1_SDC || "-",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: '路线编号',
|
label: "路线编号",
|
||||||
value: data.GL1_LXBH || '-',
|
value: data.GL1_LXBH || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '长度分类',
|
label: "长度分类",
|
||||||
value: data.GL1_SDLX || '-',
|
value: data.GL1_SDLX || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '路线名称',
|
label: "路线名称",
|
||||||
value: data.GL1_LXMC || '-',
|
value: data.GL1_LXMC || "-",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: '评定等级',
|
label: "评定等级",
|
||||||
value: data.GL1_PDDJ || '-',
|
value: data.GL1_PDDJ || "-",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
case 'bridge':
|
case "bridge":
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
label: '桥梁名称',
|
label: "桥梁名称",
|
||||||
value: data.GL1_QLMC || '-',
|
value: data.GL1_QLMC || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '编号',
|
label: "编号",
|
||||||
value: data.GL1_QLDM || '-',
|
value: data.GL1_QLDM || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '所属区县',
|
label: "所属区县",
|
||||||
value: data.GL1_QXMC || '-',
|
value: data.GL1_QXMC || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '桥梁长度',
|
label: "桥梁长度",
|
||||||
value: data.GL1_QLQC || '-',
|
value: data.GL1_QLQC || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '路线编号',
|
label: "路线编号",
|
||||||
value: data.GL1_QLDM || '-',
|
value: data.GL1_QLDM || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '路线名称',
|
label: "路线名称",
|
||||||
value: data.GL1_LXMC || '-',
|
value: data.GL1_LXMC || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '建成时间',
|
label: "建成时间",
|
||||||
value: data.GL1_GXSJ,
|
value: data.TYPE || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '中心桩号',
|
label: "中心桩号",
|
||||||
value: data.GL1_ZXZH || '-',
|
value: data.GL1_ZXZH || "-",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: '跨径总长',
|
label: "跨径总长",
|
||||||
value: data.GL1_AKJFLDM || '-',
|
value: data.GL1_AKJFLDM || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '跨径分类',
|
label: "跨径分类",
|
||||||
value: data.GL1_AKJFLLX || '-',
|
value: data.GL1_AKJFLLX || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '技术状况',
|
label: "技术状况",
|
||||||
value: data.GL1_JSZKPJDJ || '-',
|
value: data.GL1_PDDJ || "-",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
case 'road':
|
case "road":
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
label: '区县名称',
|
label: "区县名称",
|
||||||
value: data.GL1_QXMC || '-',
|
value: data.GL1_QXMC || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '风险等级',
|
label: "风险等级",
|
||||||
value: data.GL1_FXDJ || '',
|
value: data.GL1_JSDJ || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '公路编号',
|
label: "公路编号",
|
||||||
value: data.GL1_GLBH,
|
value: data.GL1_LXBH || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '位置',
|
label: "位置",
|
||||||
value: data.GL1_GLMC ,
|
value: data.GL1_QDMC + '-' + data.GL1_ZDMC || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '风险描述',
|
label: "风险描述",
|
||||||
value: data.GL1_FXMS || '-',
|
value:
|
||||||
|
data.LENGTH || data.GL1_LDCD
|
||||||
|
? `${data.LENGTH || data.GL1_LDCD}(公里)`
|
||||||
|
: "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '采取措施',
|
label: "采取措施",
|
||||||
value: data.GL1_CQCS || '-',
|
value:
|
||||||
|
data.PAVEMENT_TYPE || data.pavementType || data.GL1_LMLX || "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '照片',
|
label: "照片",
|
||||||
value: data.photos || data.photos || '-',
|
value: data.photos || data.photos || "-",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
case 'emergency':
|
case "emergency":
|
||||||
return [
|
return [
|
||||||
{ label: '队伍名称', value: data.gl1Yjllmc || '-' },
|
{ label: "队伍名称", value: data.gl1Yjllmc || "-" },
|
||||||
{ label: '防范状态', value: data.preventionStatus || '-' },
|
{ label: "防范状态", value: data.COUNTY || data.county || "-" },
|
||||||
{ label: '人数', value: data.gl1Rysl || '-' },
|
{ label: "人数", value: data.gl1Rysl || "-" },
|
||||||
{ label: '联系人', value: data.gl1Lxr || '-' },
|
{ label: "联系人", value: data.gl1Lxr || "-" },
|
||||||
{ label: '地址', value: data.gl1Xxdz || '-' },
|
{ label: "地址", value: data.gl1Xxdz || "-" },
|
||||||
{ label: '物资装备', value: data.materialsAndEquipments || '-' },
|
{ label: "物资装备", value: data.COUNTY || data.county || "-" },
|
||||||
{ label: '照片', value: data.photos || data.photos || '-' },
|
{ label: "照片", value: data.photos || data.photos || '-' },
|
||||||
];
|
];
|
||||||
case 'slope':
|
case "slope":
|
||||||
return [
|
return [
|
||||||
{ label: '边坡坡长(km)', value: data.NAME || data.name || '-' },
|
{ label: "边坡坡长(km)", value: data.NAME || data.name || "-" },
|
||||||
{ label: '边坡最大高度(m)', value: data.COUNTY || data.county || '-' },
|
{ 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.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: '止点桩号', value: data.photos || data.photos || [] },
|
{ label: "止点桩号", value: data.photos || data.photos || [] },
|
||||||
];
|
];
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return [
|
return [
|
||||||
{ label: '名称', value: data.NAME || data.name || '-' },
|
{ label: "名称", value: data.NAME || data.name || "-" },
|
||||||
{ label: '所属区县', value: data.COUNTY || data.county || '-' },
|
{ label: "所属区县", value: data.COUNTY || data.county || "-" },
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,278 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -9,7 +9,7 @@
|
|||||||
:current-page="currentPage"
|
:current-page="currentPage"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:z-index="1000"
|
:z-index="1000"
|
||||||
:max-width="1300"
|
:max-width="1150"
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
@close="handleClose"
|
@close="handleClose"
|
||||||
@ -113,10 +113,7 @@
|
|||||||
<!-- 公路机构责任人列插槽 -->
|
<!-- 公路机构责任人列插槽 -->
|
||||||
<template #roadOrg="{ row }">
|
<template #roadOrg="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<div class="person-name center">
|
<span class="person-name">{{ row.roadOrg.name }}</span>
|
||||||
<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>
|
<span class="person-phone">{{ row.roadOrg.phone }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -124,10 +121,7 @@
|
|||||||
<!-- 养护站负责人列插槽 -->
|
<!-- 养护站负责人列插槽 -->
|
||||||
<template #maintenance="{ row }">
|
<template #maintenance="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<div class="person-name center">
|
<span class="person-name">{{ row.maintenance.name }}</span>
|
||||||
<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>
|
<span class="person-phone">{{ row.maintenance.phone }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -135,10 +129,7 @@
|
|||||||
<!-- 护路员列插槽 -->
|
<!-- 护路员列插槽 -->
|
||||||
<template #roadKeeper="{ row }">
|
<template #roadKeeper="{ row }">
|
||||||
<div class="person-info">
|
<div class="person-info">
|
||||||
<div class="person-name center">
|
<span class="person-name">{{ row.roadKeeper.name }}</span>
|
||||||
<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>
|
<span class="person-phone">{{ row.roadKeeper.phone }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -168,7 +159,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, watch, onMounted } from 'vue';
|
import { ref, computed, watch, onMounted } from 'vue';
|
||||||
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
|
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
|
||||||
import { pointTypeOptions, pointLevelOptions, isRespondedOptions, formatDateTime } from '../component/index.js';
|
import { pointTypeOptions, pointLevelOptions, isRespondedOptions } from '../component/index.js';
|
||||||
import baseDialog from '../component/baseDialog.vue';
|
import baseDialog from '../component/baseDialog.vue';
|
||||||
import { request } from '@/utils/request.js';
|
import { request } from '@/utils/request.js';
|
||||||
|
|
||||||
@ -188,10 +179,6 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
dispatchDateRange: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:visible', 'close', 'detail']);
|
const emit = defineEmits(['update:visible', 'close', 'detail']);
|
||||||
@ -207,8 +194,8 @@ const cardType = ref('0');
|
|||||||
|
|
||||||
// 统计卡片数据
|
// 统计卡片数据
|
||||||
const statsCardsData = ref([
|
const statsCardsData = ref([
|
||||||
{ type: '路段', label: '影响路段', value: 0, icon: Icon4 },
|
|
||||||
{ type: '桥梁', label: '影响桥梁', value: 0, icon: Icon0 },
|
{ type: '桥梁', label: '影响桥梁', value: 0, icon: Icon0 },
|
||||||
|
{ type: '路段', label: '影响路段', value: 0, icon: Icon4 },
|
||||||
{ type: '隧道', label: '影响隧道', value: 0, icon: Icon2 },
|
{ type: '隧道', label: '影响隧道', value: 0, icon: Icon2 },
|
||||||
{ type: '边坡', label: '影响边坡', value: 0, icon: Icon1 },
|
{ type: '边坡', label: '影响边坡', value: 0, icon: Icon1 },
|
||||||
{ type: '项目', label: '影响项目', value: 0, icon: Icon3 },
|
{ type: '项目', label: '影响项目', value: 0, icon: Icon3 },
|
||||||
@ -220,17 +207,68 @@ const tableColumns = ref([
|
|||||||
{ prop: 'pointType', label: '影响点类型', width: '' },
|
{ prop: 'pointType', label: '影响点类型', width: '' },
|
||||||
{ prop: 'pointLocation', label: '影响点位置', width: '' },
|
{ prop: 'pointLocation', label: '影响点位置', width: '' },
|
||||||
{ prop: 'pointLevel', label: '影响点等级', width: '', slot: 'pointLevel' },
|
{ prop: 'pointLevel', label: '影响点等级', width: '', slot: 'pointLevel' },
|
||||||
{ prop: 'checkCount', label: '巡查次数', width: '' },
|
{ prop: 'checkCount', label: '查次数', width: '' },
|
||||||
{ prop: 'trafficDept', label: '交通主管部门负责人', width: '100px', slot: 'trafficDept' },
|
{ prop: 'trafficDept', label: '交通主管部门负责人', width: '', slot: 'trafficDept' },
|
||||||
{ prop: 'roadOrg', label: '公路机构责任人', width: '100px', slot: 'roadOrg' },
|
{ prop: 'roadOrg', label: '公路机构责任人', width: '', slot: 'roadOrg' },
|
||||||
{ prop: 'maintenance', label: '养护站负责人', width: '100px', slot: 'maintenance' },
|
{ prop: 'maintenance', label: '养护站负责人', width: '', slot: 'maintenance' },
|
||||||
{ prop: 'roadKeeper', label: '护路员', width: '100px', slot: 'roadKeeper' },
|
{ prop: 'roadKeeper', label: '护路员', width: '', slot: 'roadKeeper' },
|
||||||
{ prop: 'urgeTime', label: '最新催告时间', width: '', slot: 'urgeTime' },
|
{ prop: 'urgeTime', label: '最新催告时间', width: '', slot: 'urgeTime' },
|
||||||
{ prop: 'operation', label: '操作', width: '', slot: 'operation' },
|
{ prop: 'operation', label: '操作', width: '', slot: 'operation' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 表格数据
|
// 表格数据
|
||||||
const tableData = ref([]);
|
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 currentPage = ref(1);
|
const currentPage = ref(1);
|
||||||
@ -303,100 +341,10 @@ const handleCurrentChange = val => {
|
|||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取通知实体数据
|
// 获取数据
|
||||||
const fetchData = async () => {
|
const fetchData = () => {
|
||||||
try {
|
console.log('获取第', currentPage.value, '页数据');
|
||||||
const params = {
|
// 实际项目中调用API获取数据
|
||||||
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变化
|
// 监听visible变化
|
||||||
@ -409,19 +357,6 @@ watch(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// 监听日期范围变化
|
|
||||||
watch(
|
|
||||||
() => props.dispatchDateRange,
|
|
||||||
() => {
|
|
||||||
if (props.visible) {
|
|
||||||
currentPage.value = 1;
|
|
||||||
fetchData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 初始化加载顶部卡片数据
|
// 初始化加载顶部卡片数据
|
||||||
loadBarChartData();
|
loadBarChartData();
|
||||||
|
|||||||
@ -67,11 +67,11 @@ const emit = defineEmits(['update:visible', 'close', 'video', 'voice', 'call', '
|
|||||||
|
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableColumns = ref([
|
const tableColumns = ref([
|
||||||
{ prop: 'id', label: '序号', width: '' },
|
{ prop: 'id', label: '序号', width: '60px' },
|
||||||
{ prop: 'region', label: '区县/镇街', width: '' },
|
{ prop: 'region', label: '区县/镇街', width: '140px' },
|
||||||
{ prop: 'name', label: '姓名', width: '' },
|
{ prop: 'name', label: '姓名', width: '100px' },
|
||||||
{ prop: 'phone', label: '电话', width: '' },
|
{ prop: 'phone', label: '电话', width: '120px' },
|
||||||
// { prop: 'stationName', label: '驻地名称', width: '180px', slot: 'stationName' },
|
{ prop: 'stationName', label: '驻地名称', width: '180px', slot: 'stationName' },
|
||||||
{ prop: 'type', label: '类型', width: 'auto' },
|
{ prop: 'type', label: '类型', width: 'auto' },
|
||||||
{ prop: 'operation', label: '调度', width: '140px', slot: 'operation' },
|
{ prop: 'operation', label: '调度', width: '140px', slot: 'operation' },
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -18,8 +18,7 @@
|
|||||||
<template #filter>
|
<template #filter>
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<el-select
|
<el-select :teleported="false"
|
||||||
:teleported="false"
|
|
||||||
v-model="filterForm.warningLevel"
|
v-model="filterForm.warningLevel"
|
||||||
placeholder="预警等级"
|
placeholder="预警等级"
|
||||||
class="filter-select"
|
class="filter-select"
|
||||||
@ -33,14 +32,13 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<el-select
|
<el-select :teleported="false"
|
||||||
:teleported="false"
|
|
||||||
v-model="filterForm.region"
|
v-model="filterForm.region"
|
||||||
placeholder="影响区域"
|
placeholder="行政区域"
|
||||||
class="filter-select"
|
class="filter-select"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="option in regionOptions"
|
v-for="option in regionOptionsWithAll"
|
||||||
:key="option.value"
|
:key="option.value"
|
||||||
:label="option.label"
|
:label="option.label"
|
||||||
:value="option.value"
|
:value="option.value"
|
||||||
@ -48,8 +46,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<el-select
|
<el-select :teleported="false"
|
||||||
:teleported="false"
|
|
||||||
v-model="filterForm.isEnded"
|
v-model="filterForm.isEnded"
|
||||||
placeholder="是否结束"
|
placeholder="是否结束"
|
||||||
class="filter-select"
|
class="filter-select"
|
||||||
@ -63,11 +60,11 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<el-select
|
<el-select :teleported="false"
|
||||||
:teleported="false"
|
|
||||||
v-model="filterForm.isResponded"
|
v-model="filterForm.isResponded"
|
||||||
placeholder="是否回应"
|
placeholder="是否回应"
|
||||||
class="filter-select"
|
class="filter-select"
|
||||||
|
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="option in isRespondedOptions"
|
v-for="option in isRespondedOptions"
|
||||||
@ -99,56 +96,82 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from 'vue';
|
import { ref, computed, watch } from "vue";
|
||||||
import { Search } from '@element-plus/icons-vue';
|
import { Search } from "@element-plus/icons-vue";
|
||||||
import baseDialog from '../component/baseDialog.vue';
|
import baseDialog from "../component/baseDialog.vue";
|
||||||
import { formatDateTime } from '../component/index.js';
|
|
||||||
import { request } from '@/utils/request';
|
|
||||||
import {
|
import {
|
||||||
warningLevelOptions,
|
warningLevelOptions,
|
||||||
regionOptions,
|
regionOptionsWithAll,
|
||||||
isEndedOptions,
|
isEndedOptions,
|
||||||
isRespondedOptions,
|
isRespondedOptions,
|
||||||
} from '../component/index.js';
|
} from "../component/index.js";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
visible: {
|
visible: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
dispatchDateRange: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:visible', 'close', 'openImpactPoint']);
|
const emit = defineEmits(["update:visible", "close", "openImpactPoint"]);
|
||||||
|
|
||||||
// 筛选表单
|
// 筛选表单
|
||||||
const filterForm = ref({
|
const filterForm = ref({
|
||||||
warningLevel: '',
|
warningLevel: "",
|
||||||
region: '',
|
region: "",
|
||||||
isEnded: '',
|
isEnded: "",
|
||||||
isResponded: '',
|
isResponded: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const tableColumns = ref([
|
const tableColumns = ref([
|
||||||
{ prop: 'id', label: '序号', width: '' },
|
{ prop: "id", label: "序号", width: "" },
|
||||||
{ prop: 'weatherSource', label: '气象来源', width: '' },
|
{ prop: "weatherSource", label: "气象来源", width: "" },
|
||||||
{ prop: 'warningLevel', label: '预警等级', width: '', slot: 'warningLevel' },
|
{ prop: "warningLevel", label: "预警等级", width: "", slot: "warningLevel" },
|
||||||
{ prop: 'region', label: '影响区域', width: '' },
|
{ prop: "region", label: "行政区域", width: "" },
|
||||||
{ prop: 'warningTime', label: '预警时间', width: '' },
|
{ prop: "warningTime", label: "预警时间", width: "" },
|
||||||
{ prop: 'endTime', label: '结束时间', width: '' },
|
{ prop: "endTime", label: "结束时间", width: "" },
|
||||||
{ prop: 'impactPoints', label: '影响点数量', width: '' },
|
{ prop: "impactPoints", label: "影响点数量", width: "" },
|
||||||
{ prop: 'called', label: '已叫应', width: '', slot: 'called' },
|
{ prop: "called", label: "已叫应", width: "", slot: "called" },
|
||||||
{ prop: 'responded', label: '已回应', width: '' },
|
{ prop: "responded", label: "已回应", width: "" },
|
||||||
{ prop: 'notResponded', label: '未回应', width: '' },
|
{ prop: "notResponded", label: "未回应", width: "" },
|
||||||
{ prop: 'urged', label: '已催告', width: '' },
|
{ prop: "urged", label: "已催告", width: "" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 表格数据
|
// 表格数据
|
||||||
const tableData = ref([]);
|
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 currentPage = ref(1);
|
const currentPage = ref(1);
|
||||||
@ -167,7 +190,7 @@ const headerCellStyle = () => {
|
|||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
padding: '12px 16px',
|
padding: '12px 16px',
|
||||||
border: 'none',
|
border: 'none'
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -178,117 +201,56 @@ const cellStyle = () => {
|
|||||||
fontSize: '13px',
|
fontSize: '13px',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
padding: '12px 16px',
|
padding: '12px 16px',
|
||||||
border: 'none',
|
border: 'none'
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// 关闭对话框
|
// 关闭对话框
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
emit('update:visible', false);
|
emit("update:visible", false);
|
||||||
emit('close');
|
emit("close");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 点击遮罩关闭已由base-dialog组件处理
|
// 点击遮罩关闭已由base-dialog组件处理
|
||||||
|
|
||||||
// 点击已叫应
|
// 点击已叫应
|
||||||
const handleCalledClick = () => {
|
const handleCalledClick = () => {
|
||||||
emit('responseStatus');
|
emit("responseStatus");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 查询
|
// 查询
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
console.log('查询条件:', filterForm.value);
|
console.log("查询条件:", filterForm.value);
|
||||||
currentPage.value = 1;
|
currentPage.value = 1;
|
||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 分页操作
|
// 分页操作
|
||||||
const handleSizeChange = val => {
|
const handleSizeChange = (val) => {
|
||||||
pageSize.value = val;
|
pageSize.value = val;
|
||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCurrentChange = val => {
|
const handleCurrentChange = (val) => {
|
||||||
currentPage.value = val;
|
currentPage.value = val;
|
||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取预警通知统计
|
// 获取数据
|
||||||
const fetchData = async () => {
|
const fetchData = () => {
|
||||||
try {
|
console.log("获取第", currentPage.value, "页数据");
|
||||||
console.log(props.dispatchDateRange);
|
// 实际项目中调用API获取数据
|
||||||
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变化
|
// 监听visible变化
|
||||||
watch(
|
watch(
|
||||||
() => props.visible,
|
() => props.visible,
|
||||||
newVal => {
|
(newVal) => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
currentPage.value = 1;
|
currentPage.value = 1;
|
||||||
fetchData();
|
fetchData();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// 监听日期范围变化
|
|
||||||
watch(
|
|
||||||
() => props.dispatchDateRange,
|
|
||||||
() => {
|
|
||||||
if (props.visible) {
|
|
||||||
currentPage.value = 1;
|
|
||||||
fetchData();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{ deep: true }
|
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<span class="filter-label">影响区域</span>
|
<span class="filter-label">行政区域</span>
|
||||||
<el-select
|
<el-select
|
||||||
v-model="filterForm.countyName"
|
v-model="filterForm.countyName"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
|
|||||||
@ -557,7 +557,7 @@ const getEmergencyForceData = async () => {
|
|||||||
try {
|
try {
|
||||||
const timeParams = getTimeParams();
|
const timeParams = getTimeParams();
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/yhYjll/listForcesAndMaterials',
|
url: '/snow-ops-platform/yhYjll/list',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: timeParams,
|
params: timeParams,
|
||||||
});
|
});
|
||||||
@ -565,8 +565,10 @@ const getEmergencyForceData = async () => {
|
|||||||
if (res.code === '00000' && res.data) {
|
if (res.code === '00000' && res.data) {
|
||||||
// 解析坐标数据
|
// 解析坐标数据
|
||||||
res.data.forEach(item => {
|
res.data.forEach(item => {
|
||||||
item.COORDINATE_POINT = [item.lng, item.lat];
|
if (item.gl1Lx == 1 || item.gl1Lx == 2) {
|
||||||
|
item.COORDINATE_POINT = [item.gl1Lng, item.gl1Lat];
|
||||||
console.log('解析后坐标:', item.COORDINATE_POINT);
|
console.log('解析后坐标:', item.COORDINATE_POINT);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
emergencyForceData.value = res.data;
|
emergencyForceData.value = res.data;
|
||||||
|
|
||||||
|
|||||||
@ -37,8 +37,9 @@
|
|||||||
<slot name="filter"></slot>
|
<slot name="filter"></slot>
|
||||||
</div>
|
</div>
|
||||||
<!-- 数据表格 -->
|
<!-- 数据表格 -->
|
||||||
<div class="table-section" v-if="props.tableColumns.length > 0">
|
<div class="table-section" v-if="props.tableShow">
|
||||||
<el-table
|
<el-table
|
||||||
|
v-if="props.tableData.length > 0"
|
||||||
:data="props.tableData"
|
:data="props.tableData"
|
||||||
:height="props.tableHeight"
|
:height="props.tableHeight"
|
||||||
style="width: 100%; min-height: 300px"
|
style="width: 100%; min-height: 300px"
|
||||||
@ -79,11 +80,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from "vue";
|
||||||
import { Close } from '@element-plus/icons-vue';
|
import { Close } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
tableShow: {
|
tableShow: {
|
||||||
// 是否显示表格
|
// 是否显示表格
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
@ -96,7 +97,7 @@ const props = defineProps({
|
|||||||
title: {
|
title: {
|
||||||
// 弹窗标题
|
// 弹窗标题
|
||||||
type: String,
|
type: String,
|
||||||
default: '弹窗标题',
|
default: "弹窗标题",
|
||||||
},
|
},
|
||||||
zIndex: {
|
zIndex: {
|
||||||
// 弹窗z-index
|
// 弹窗z-index
|
||||||
@ -161,18 +162,18 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
'update:visible',
|
"update:visible",
|
||||||
'close',
|
"close",
|
||||||
'size-change',
|
"size-change",
|
||||||
'current-change',
|
"current-change",
|
||||||
'update:current-page',
|
"update:current-page",
|
||||||
'update:page-size',
|
"update:page-size",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 关闭对话框
|
// 关闭对话框
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
emit('update:visible', false);
|
emit("update:visible", false);
|
||||||
emit('close');
|
emit("close");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 点击遮罩关闭
|
// 点击遮罩关闭
|
||||||
@ -183,45 +184,45 @@ const handleOverlayClick = () => {
|
|||||||
// 监听visible变化
|
// 监听visible变化
|
||||||
watch(
|
watch(
|
||||||
() => props.visible,
|
() => props.visible,
|
||||||
newVal => {
|
(newVal) => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
// 弹窗打开时的逻辑
|
// 弹窗打开时的逻辑
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
// 分页操作
|
// 分页操作
|
||||||
const handleSizeChange = val => {
|
const handleSizeChange = (val) => {
|
||||||
emit('update:page-size', val);
|
emit("update:page-size", val);
|
||||||
emit('size-change', val);
|
emit("size-change", val);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCurrentChange = val => {
|
const handleCurrentChange = (val) => {
|
||||||
emit('update:current-page', val);
|
emit("update:current-page", val);
|
||||||
emit('current-change', val);
|
emit("current-change", val);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 表格样式
|
// 表格样式
|
||||||
const headerCellStyle = () => {
|
const headerCellStyle = () => {
|
||||||
return {
|
return {
|
||||||
backgroundColor: '#1D5194',
|
backgroundColor: "#1D5194",
|
||||||
color: '#fff',
|
color: "#fff",
|
||||||
fontSize: '14px',
|
fontSize: "14px",
|
||||||
fontWeight: '500',
|
fontWeight: "500",
|
||||||
textAlign: 'center',
|
textAlign: "center",
|
||||||
padding: '5px 0px',
|
padding: "5px 0px",
|
||||||
border: 'none',
|
border: "none",
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const cellStyle = () => {
|
const cellStyle = () => {
|
||||||
return {
|
return {
|
||||||
backgroundColor: '#16334E',
|
backgroundColor: "#16334E",
|
||||||
color: 'rgba(255, 255, 255, 0.85)',
|
color: "rgba(255, 255, 255, 0.85)",
|
||||||
fontSize: '13px',
|
fontSize: "13px",
|
||||||
textAlign: 'center',
|
textAlign: "center",
|
||||||
padding: '5px 0px',
|
padding: "5px 0px",
|
||||||
border: 'none',
|
border: "none",
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -243,7 +244,7 @@ const cellStyle = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.base-dialog {
|
.base-dialog {
|
||||||
// width: 80vw;
|
width: 80vw;
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #16334e;
|
background: #16334e;
|
||||||
@ -298,7 +299,7 @@ const cellStyle = () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.header-title {
|
.header-title {
|
||||||
background-image: url('../../../assets/RiskWarning_img/标题@2x.png');
|
background-image: url("../../../assets/RiskWarning_img/标题@2x.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-position: right;
|
background-position: right;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@ -331,13 +332,12 @@ const cellStyle = () => {
|
|||||||
|
|
||||||
// 标题栏下方自定义插槽
|
// 标题栏下方自定义插槽
|
||||||
.header-slot {
|
.header-slot {
|
||||||
// margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 0 24px 20px 24px;
|
padding: 0 24px;
|
||||||
// overflow-y: auto;
|
// overflow-y: auto;
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
@ -481,11 +481,11 @@ const cellStyle = () => {
|
|||||||
background-color: #122c46 !important;
|
background-color: #122c46 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-popper[data-popper-placement^='bottom']) {
|
:deep(.el-popper[data-popper-placement^="bottom"]) {
|
||||||
border: 1px solid #122c46 !important;
|
border: 1px solid #122c46 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-popper[data-popper-placement^='top']) {
|
:deep(.el-popper[data-popper-placement^="top"]) {
|
||||||
border: 1px solid #122c46 !important;
|
border: 1px solid #122c46 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { request } from '@/utils/request';
|
import { request } from '@/utils/request';
|
||||||
|
|
||||||
// 影响区域选项
|
// 行政区域选项
|
||||||
export const regionOptions = ref([
|
export const regionOptions = ref([
|
||||||
// { label: "重庆市", value: "重庆市" },
|
// { label: "重庆市", value: "重庆市" },
|
||||||
// { label: "万州区", value: "万州区" },
|
// { label: "万州区", value: "万州区" },
|
||||||
@ -18,7 +18,7 @@ export const regionOptions = ref([
|
|||||||
// { label: "江北区", value: "江北区" },
|
// { label: "江北区", value: "江北区" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 获取影响区域选项
|
// 获取行政区域选项
|
||||||
export const fetchDistrictOptions = async () => {
|
export const fetchDistrictOptions = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
@ -39,7 +39,7 @@ export const fetchDistrictOptions = async () => {
|
|||||||
return options;
|
return options;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取影响区域选项失败:', error);
|
console.error('获取行政区域选项失败:', error);
|
||||||
}
|
}
|
||||||
return regionOptions.value;
|
return regionOptions.value;
|
||||||
};
|
};
|
||||||
@ -125,7 +125,7 @@ export const isEndedOptions = [
|
|||||||
{ label: "否", value: false },
|
{ label: "否", value: false },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 影响区域选项（带全部）
|
// 行政区域选项（带全部）
|
||||||
export const regionOptionsWithAll = ref([
|
export const regionOptionsWithAll = ref([
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@ -30,14 +30,12 @@
|
|||||||
@warningClick="handleWarningClick"
|
@warningClick="handleWarningClick"
|
||||||
@openImpactDetail="openDialog('impactPoint')"
|
@openImpactDetail="openDialog('impactPoint')"
|
||||||
@openWarningInfo="openDialog('warningInfo')"
|
@openWarningInfo="openDialog('warningInfo')"
|
||||||
@dispatchDateRange="handleDispatchDateRange"
|
|
||||||
@openImpactPoint="openDialog('impactPoint')"
|
@openImpactPoint="openDialog('impactPoint')"
|
||||||
@openAIResult="openDialog('aiWarningResult')"
|
@openAIResult="openDialog('aiWarningResult')"
|
||||||
@openWarningSituation="openDialog('warningSituation')"
|
@openWarningSituation="openDialog('warningSituation')"
|
||||||
@openResponseStatus="openDialog('responseStatus')"
|
@openResponseStatus="openDialog('responseStatus')"
|
||||||
@openDispatchDistrict="openDialog('dispatchDistrict')"
|
@openDispatchDistrict="openDialog('dispatchDistrict')"
|
||||||
@showCenterCard="item => handleCenterCardClick(item)"
|
@showCenterCard="item => handleCenterCardClick(item)"
|
||||||
@openOfflineHelp="openDialog('offlineHelp')"
|
|
||||||
></left>
|
></left>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
@ -98,7 +96,6 @@
|
|||||||
|
|
||||||
<!-- 预警信息对话框 -->
|
<!-- 预警信息对话框 -->
|
||||||
<warningInfoDialog
|
<warningInfoDialog
|
||||||
:dispatchDateRange="dispatchDateRange"
|
|
||||||
v-model:visible="dialogVisible.warningInfo"
|
v-model:visible="dialogVisible.warningInfo"
|
||||||
@close="closeDialog('warningInfo')"
|
@close="closeDialog('warningInfo')"
|
||||||
@responseStatus="openDialog('responseStatus')"
|
@responseStatus="openDialog('responseStatus')"
|
||||||
@ -106,7 +103,6 @@
|
|||||||
|
|
||||||
<!-- 事件详情对话框 -->
|
<!-- 事件详情对话框 -->
|
||||||
<eventDetailDialog
|
<eventDetailDialog
|
||||||
:eventData="clearanceSituationDialogItemData"
|
|
||||||
v-model:visible="dialogVisible.eventDetail"
|
v-model:visible="dialogVisible.eventDetail"
|
||||||
@close="closeDialog('eventDetail')"
|
@close="closeDialog('eventDetail')"
|
||||||
/>
|
/>
|
||||||
@ -158,7 +154,6 @@
|
|||||||
|
|
||||||
<!-- 响应状态对话框 -->
|
<!-- 响应状态对话框 -->
|
||||||
<responseStatusDialog
|
<responseStatusDialog
|
||||||
:dispatchDateRange="dispatchDateRange"
|
|
||||||
v-model:visible="dialogVisible.responseStatus"
|
v-model:visible="dialogVisible.responseStatus"
|
||||||
@close="closeDialog('responseStatus')"
|
@close="closeDialog('responseStatus')"
|
||||||
@detail="openDialog('responsePointDetail')"
|
@detail="openDialog('responsePointDetail')"
|
||||||
@ -198,7 +193,6 @@
|
|||||||
v-model:visible="dialogVisible.clearanceSituation"
|
v-model:visible="dialogVisible.clearanceSituation"
|
||||||
@close="closeDialog('clearanceSituation')"
|
@close="closeDialog('clearanceSituation')"
|
||||||
@detail="openDialog('eventDetail')"
|
@detail="openDialog('eventDetail')"
|
||||||
@itemdata="handleItemData"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 管控情况对话框 -->
|
<!-- 管控情况对话框 -->
|
||||||
@ -249,12 +243,6 @@
|
|||||||
:data="hazardPointData"
|
:data="hazardPointData"
|
||||||
@close="closeDialog('hazardPointSituation')"
|
@close="closeDialog('hazardPointSituation')"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<offlineHelpDialog
|
|
||||||
v-model:visible="dialogVisible.offlineHelp"
|
|
||||||
@close="closeDialog('offlineHelp')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -294,7 +282,6 @@ import tunnelInfoDialog from './Dialog/tunnelInfoDialog.vue';
|
|||||||
import centerInfoCard from './Dialog/centerInfoCard.vue';
|
import centerInfoCard from './Dialog/centerInfoCard.vue';
|
||||||
import tongnanProjectPersonDialog from './Dialog/tongnanProjectPersonDialog.vue';
|
import tongnanProjectPersonDialog from './Dialog/tongnanProjectPersonDialog.vue';
|
||||||
import hazardPointSituationDialog from './Dialog/hazardPointSituationDialog.vue';
|
import hazardPointSituationDialog from './Dialog/hazardPointSituationDialog.vue';
|
||||||
import offlineHelpDialog from './Dialog/offlineHelpDialog.vue';
|
|
||||||
|
|
||||||
import './component/el-select.scss';
|
import './component/el-select.scss';
|
||||||
import './component/date-picker-theme.scss';
|
import './component/date-picker-theme.scss';
|
||||||
@ -323,7 +310,6 @@ const dialogVisible = ref({
|
|||||||
tunnelInfo: false,
|
tunnelInfo: false,
|
||||||
tongnanProjectPerson: false,
|
tongnanProjectPerson: false,
|
||||||
hazardPointSituation: false,
|
hazardPointSituation: false,
|
||||||
offlineHelp: false,
|
|
||||||
});
|
});
|
||||||
const activeitem = ref({});
|
const activeitem = ref({});
|
||||||
|
|
||||||
@ -479,17 +465,6 @@ const handleWarningClick = item => {
|
|||||||
warningitem.value = 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({
|
const confirmConfig = ref({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
|
|||||||
@ -26,7 +26,11 @@
|
|||||||
:class="item.class"
|
:class="item.class"
|
||||||
@click="handleWarningCardClick(item)"
|
@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-info">
|
||||||
<div class="card-num mt_5">{{ item.value }}</div>
|
<div class="card-num mt_5">{{ item.value }}</div>
|
||||||
<div class="card-label mb_5">{{ item.label }}</div>
|
<div class="card-label mb_5">{{ item.label }}</div>
|
||||||
@ -39,13 +43,22 @@
|
|||||||
<div class="impact-section">
|
<div class="impact-section">
|
||||||
<div class="impact-header">
|
<div class="impact-header">
|
||||||
<div class="impact-title">影响点概况</div>
|
<div class="impact-title">影响点概况</div>
|
||||||
<div class="impact-detail clickable" @click="handleImpactDetailClick">一键清单(影响点)</div>
|
<div class="impact-detail clickable" @click="handleImpactDetailClick">
|
||||||
|
一键清单(影响点)
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<div class="chart-y-label">数量</div>
|
<div class="chart-y-label">数量</div>
|
||||||
<div class="bar-chart f1">
|
<div class="bar-chart f1">
|
||||||
<div v-for="(item, index) in impactData" :key="index" class="bar-item">
|
<div
|
||||||
<div class="bar" :style="{ height: getBarHeight(item) + '%' }"></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-value">{{ item.count }}</div>
|
||||||
<div class="bar-label">{{ item.name }}</div>
|
<div class="bar-label">{{ item.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -58,7 +71,11 @@
|
|||||||
<div class="road-type-section">
|
<div class="road-type-section">
|
||||||
<div class="section-title">影响公路类型情况</div>
|
<div class="section-title">影响公路类型情况</div>
|
||||||
<div class="road-type-cards">
|
<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-label">{{ item.extension }}：</span>
|
||||||
<span class="card-value">{{ item.count }}</span>
|
<span class="card-value">{{ item.count }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -69,7 +86,12 @@
|
|||||||
<div class="district-table-section">
|
<div class="district-table-section">
|
||||||
<el-table
|
<el-table
|
||||||
:data="districtData"
|
: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"
|
:header-cell-style="headerCellStyle"
|
||||||
:cell-style="cellStyle"
|
:cell-style="cellStyle"
|
||||||
size="small"
|
size="small"
|
||||||
@ -77,7 +99,11 @@
|
|||||||
:scroll="{ y: true }"
|
:scroll="{ y: true }"
|
||||||
>
|
>
|
||||||
<el-table-column prop="name" label="区县名称" :min-width="vw(80)" />
|
<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="bridgeCount" label="桥梁" :min-width="vw(50)" />
|
||||||
<el-table-column prop="tunnelCount" 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)" />
|
<el-table-column prop="slopeCount" label="边坡" :min-width="vw(50)" />
|
||||||
@ -90,7 +116,9 @@
|
|||||||
<SectionHeader title="响应调度">
|
<SectionHeader title="响应调度">
|
||||||
<template #right>
|
<template #right>
|
||||||
<div class="header-filters">
|
<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">
|
<div class="date-range-wrapper">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="dateRange"
|
v-model="dateRange"
|
||||||
@ -118,8 +146,7 @@
|
|||||||
clickable:
|
clickable:
|
||||||
item.label === '叫应总数' ||
|
item.label === '叫应总数' ||
|
||||||
item.label === '已回应数' ||
|
item.label === '已回应数' ||
|
||||||
item.label === '调度区县数' ||
|
item.label === '调度区县数',
|
||||||
item.label === '线下帮扶数',
|
|
||||||
}"
|
}"
|
||||||
@click="handleStatClick(item)"
|
@click="handleStatClick(item)"
|
||||||
>
|
>
|
||||||
@ -141,8 +168,7 @@
|
|||||||
@click="handleDispatchCardClick(item)"
|
@click="handleDispatchCardClick(item)"
|
||||||
>
|
>
|
||||||
<div class="card-num">
|
<div class="card-num">
|
||||||
{{ item.value }}
|
{{ item.value }}<span class="unit">人</span>
|
||||||
<span class="unit">人</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card-label">{{ item.label }}</div>
|
<div class="card-label">{{ item.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -152,30 +178,30 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, watch, inject } from 'vue';
|
import { ref, computed, onMounted, watch, inject } from "vue";
|
||||||
import { request } from '@/utils/request';
|
import { request } from "@/utils/request";
|
||||||
import SectionHeader from './component/sectionHeader.vue';
|
import SectionHeader from "./component/sectionHeader.vue";
|
||||||
// 导入图片资源
|
// 导入图片资源
|
||||||
import imgCall 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 imgReply from "../../assets/RiskWarning_img/已回应icon@2x.png";
|
||||||
import imgRate 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 imgDistrict from "../../assets/RiskWarning_img/区县icon@2x.png";
|
||||||
import imgHelp from '../../assets/RiskWarning_img/响应图标5@2x.png';
|
import imgHelp from "../../assets/RiskWarning_img/响应图标5@2x.png";
|
||||||
import imgCheck from '../../assets/RiskWarning_img/抽查人数icon@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(
|
watch(
|
||||||
() => getdateRange.value,
|
() => getdateRange.value,
|
||||||
newVal => {
|
(newVal) => {
|
||||||
console.log('left.vue 日期范围变化:', newVal);
|
console.log("left.vue 日期范围变化:", newVal);
|
||||||
init();
|
init();
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true },
|
||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -196,63 +222,57 @@ const init = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
'openWarningInfo',
|
"openWarningInfo",
|
||||||
'openImpactPoint',
|
"openImpactPoint",
|
||||||
'openWarningSituation',
|
"openWarningSituation",
|
||||||
'openResponseStatus',
|
"openResponseStatus",
|
||||||
'openDispatchDistrict',
|
"openDispatchDistrict",
|
||||||
'openImpactDetail',
|
"openImpactDetail",
|
||||||
'showCenterCard',
|
"showCenterCard",
|
||||||
'warningClick',
|
"warningClick",
|
||||||
'dispatchDateRange',
|
|
||||||
'openOfflineHelp',
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 点击统计项
|
// 点击统计项
|
||||||
const handleStatClick = item => {
|
const handleStatClick = (item) => {
|
||||||
if (item.label === '叫应总数') {
|
if (item.label === "叫应总数") {
|
||||||
emit('openWarningInfo');
|
emit("openWarningInfo");
|
||||||
emit('dispatchDateRange', dateRange.value);
|
} else if (item.label === "已回应数") {
|
||||||
} else if (item.label === '已回应数') {
|
emit("openResponseStatus");
|
||||||
emit('openResponseStatus');
|
} else if (item.label === "调度区县数") {
|
||||||
emit('dispatchDateRange', dateRange.value);
|
emit("openDispatchDistrict");
|
||||||
} else if (item.label === '调度区县数') {
|
|
||||||
emit('openDispatchDistrict');
|
|
||||||
} else if (item.label === '线下帮扶数') {
|
|
||||||
emit('openOfflineHelp');
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 点击气象预警卡片
|
// 点击气象预警卡片
|
||||||
const handleWarningCardClick = item => {
|
const handleWarningCardClick = (item) => {
|
||||||
console.log('item:', item);
|
console.log("item:", item);
|
||||||
emit('openWarningSituation', item);
|
emit("openWarningSituation", item);
|
||||||
// 传递日期范围
|
// 传递日期范围
|
||||||
emit('warningClick', item);
|
emit("warningClick", item);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 点击影响点明细
|
// 点击影响点明细
|
||||||
const handleImpactDetailClick = () => {
|
const handleImpactDetailClick = () => {
|
||||||
emit('openImpactDetail');
|
emit("openImpactDetail");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 点击调度清单卡片
|
// 点击调度清单卡片
|
||||||
const handleDispatchCardClick = item => {
|
const handleDispatchCardClick = (item) => {
|
||||||
if (item.label === dispatchList.value[0].label) {
|
if (item.label === dispatchList.value[0].label) {
|
||||||
emit('showCenterCard', {
|
emit("showCenterCard", {
|
||||||
type: 'second',
|
type: "second",
|
||||||
value: item.value,
|
value: item.value,
|
||||||
data: nationalarr.value,
|
data: nationalarr.value,
|
||||||
});
|
});
|
||||||
} else if (item.label === dispatchList.value[1].label) {
|
} else if (item.label === dispatchList.value[1].label) {
|
||||||
emit('showCenterCard', {
|
emit("showCenterCard", {
|
||||||
type: 'third',
|
type: "third",
|
||||||
value: item.value,
|
value: item.value,
|
||||||
data: ruralarr.value,
|
data: ruralarr.value,
|
||||||
});
|
});
|
||||||
} else if (item.label === dispatchList.value[2].label) {
|
} else if (item.label === dispatchList.value[2].label) {
|
||||||
emit('showCenterCard', {
|
emit("showCenterCard", {
|
||||||
type: 'first',
|
type: "first",
|
||||||
value: item.value,
|
value: item.value,
|
||||||
data: projectarr.value,
|
data: projectarr.value,
|
||||||
});
|
});
|
||||||
@ -261,24 +281,24 @@ const handleDispatchCardClick = item => {
|
|||||||
|
|
||||||
// 气象预警数据
|
// 气象预警数据
|
||||||
const weatherWarningData = ref([
|
const weatherWarningData = ref([
|
||||||
{ label: '红色预警', value: '0', class: 'red' },
|
{ label: "红色预警", value: "0", class: "red" },
|
||||||
{ label: '橙色预警', value: '0', class: 'orange' },
|
{ label: "橙色预警", value: "0", class: "orange" },
|
||||||
{ label: '黄色预警', value: '0', class: 'yellow' },
|
{ label: "黄色预警", value: "0", class: "yellow" },
|
||||||
{ label: '蓝色预警', value: '0', class: 'blue' },
|
{ label: "蓝色预警", value: "0", class: "blue" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 影响点数据
|
// 影响点数据
|
||||||
const impactData = ref([
|
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 dateRange = ref([]);
|
||||||
// 点击日期范围器
|
// 点击日期范围器
|
||||||
const handleDateRangeClick = val => {
|
const handleDateRangeClick = (val) => {
|
||||||
dateRange.value = val;
|
dateRange.value = val;
|
||||||
dispatchLoadLoad();
|
dispatchLoadLoad();
|
||||||
};
|
};
|
||||||
@ -286,8 +306,8 @@ const handleDateRangeClick = val => {
|
|||||||
const dispatchLoadLoad = async () => {
|
const dispatchLoadLoad = async () => {
|
||||||
try {
|
try {
|
||||||
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
|
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
|
||||||
let start = '';
|
let start = "";
|
||||||
let end = '';
|
let end = "";
|
||||||
|
|
||||||
if (dateRange.value && dateRange.value.length === 2) {
|
if (dateRange.value && dateRange.value.length === 2) {
|
||||||
start = formatDateTime(dateRange.value[0]);
|
start = formatDateTime(dateRange.value[0]);
|
||||||
@ -295,80 +315,73 @@ const dispatchLoadLoad = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/weather-warning/schedule-statistics',
|
url: "/snow-ops-platform/weather-warning/schedule-statistics",
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
params: {
|
params: {
|
||||||
start: start,
|
start: start,
|
||||||
end: end,
|
end: end,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.code == '00000') {
|
if (res.code == "00000") {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data) {
|
if (data) {
|
||||||
responseStats.value.forEach(item => {
|
responseStats.value.forEach((item) => {
|
||||||
if (item.label == '叫应总数') {
|
if (item.label == "叫应总数") {
|
||||||
item.value = data['noticeCount'] || 0;
|
item.value = data["noticeCount"] || 0;
|
||||||
} else if (item.label == '已回应数') {
|
} else if (item.label == "已回应数") {
|
||||||
item.value = data['replyCount'] || 0;
|
item.value = data["replyCount"] || 0;
|
||||||
} else if (item.label == '回应率') {
|
} else if (item.label == "回应率") {
|
||||||
item.value = data['replyPrecent'] >= 0 ? data['replyPrecent'] + '%' : 0;
|
item.value =
|
||||||
} else if (item.label == '调度区县数') {
|
data["replyPrecent"] >= 0 ? data["replyPrecent"] + "%" : 0;
|
||||||
item.value = data['countyCount'] || 0;
|
} else if (item.label == "调度区县数") {
|
||||||
} else if (item.label == '线下帮扶数') {
|
item.value = data["countyCount"] || 0;
|
||||||
item.value = data['supportCount'] || 0;
|
} else if (item.label == "线下帮扶数") {
|
||||||
} else if (item.label == '抽查人次') {
|
item.value = data["supportCount"] || 0;
|
||||||
item.value = data['inspectionCount'] || 0;
|
} else if (item.label == "抽查人次") {
|
||||||
|
item.value = data["inspectionCount"] || 0;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
dispatchList.value.forEach(item => {
|
dispatchList.value.forEach((item) => {
|
||||||
if (item.label == '国省道调度') {
|
if (item.label == "国省道调度") {
|
||||||
item.value = data['nationalRoadCount'] || 0;
|
item.value = data["nationalRoadCount"] || 0;
|
||||||
} else if (item.label == '农村公路调度') {
|
} else if (item.label == "农村公路调度") {
|
||||||
item.value = data['ruralRoadCount'] || 0;
|
item.value = data["ruralRoadCount"] || 0;
|
||||||
} else if (item.label == '建设工程调度') {
|
} else if (item.label == "建设工程调度") {
|
||||||
item.value = data['projectCount'] || 0;
|
item.value = data["projectCount"] || 0;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// responseStats.value = data;
|
// responseStats.value = data;
|
||||||
// dispatchList.value = data;
|
// dispatchList.value = data;
|
||||||
} else {
|
} else {
|
||||||
responseStats.value.forEach(item => {
|
responseStats.value.forEach((item) => {
|
||||||
item.value = 0;
|
item.value = 0;
|
||||||
});
|
});
|
||||||
dispatchList.value.forEach(item => {
|
dispatchList.value.forEach((item) => {
|
||||||
item.value = 0;
|
item.value = 0;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载数据失败:', error);
|
console.error("加载数据失败:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
watch(
|
|
||||||
() => dateRange.value,
|
|
||||||
newVal => {
|
|
||||||
console.log('left.vue 调度响应变化:', newVal);
|
|
||||||
dispatchLoadLoad();
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
// 格式化日期时间为接口所需格式
|
// 格式化日期时间为接口所需格式
|
||||||
const formatDateTime = date => {
|
const formatDateTime = (date) => {
|
||||||
if (!date) return '';
|
if (!date) return "";
|
||||||
const d = new Date(date);
|
const d = new Date(date);
|
||||||
const year = d.getFullYear();
|
const year = d.getFullYear();
|
||||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
const month = String(d.getMonth() + 1).padStart(2, "0");
|
||||||
const day = String(d.getDate()).padStart(2, '0');
|
const day = String(d.getDate()).padStart(2, "0");
|
||||||
const hours = String(d.getHours()).padStart(2, '0');
|
const hours = String(d.getHours()).padStart(2, "0");
|
||||||
const minutes = String(d.getMinutes()).padStart(2, '0');
|
const minutes = String(d.getMinutes()).padStart(2, "0");
|
||||||
const seconds = String(d.getSeconds()).padStart(2, '0');
|
const seconds = String(d.getSeconds()).padStart(2, "0");
|
||||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
};
|
};
|
||||||
const getdateRangeTime = () => {
|
const getdateRangeTime = () => {
|
||||||
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
|
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
|
||||||
let start = '';
|
let start = "";
|
||||||
let end = '';
|
let end = "";
|
||||||
if (getdateRange.value && getdateRange.value.length === 2) {
|
if (getdateRange.value && getdateRange.value.length === 2) {
|
||||||
start = formatDateTime(getdateRange.value[0]);
|
start = formatDateTime(getdateRange.value[0]);
|
||||||
end = formatDateTime(getdateRange.value[1]);
|
end = formatDateTime(getdateRange.value[1]);
|
||||||
@ -380,29 +393,29 @@ const getdateRangeTime = () => {
|
|||||||
};
|
};
|
||||||
// 区县数据
|
// 区县数据
|
||||||
const districtLoadLoad = async () => {
|
const districtLoadLoad = async () => {
|
||||||
console.log('区县数据:', getdateRangeTime());
|
console.log("区县数据:", getdateRangeTime());
|
||||||
try {
|
try {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/weather-warning/affected-count/_by_county',
|
url: "/snow-ops-platform/weather-warning/affected-count/_by_county",
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
params: getdateRangeTime(),
|
params: getdateRangeTime(),
|
||||||
});
|
});
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.code == '00000') {
|
if (res.code == "00000") {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data) {
|
if (data) {
|
||||||
// 简化区县名称
|
// 简化区县名称
|
||||||
const simplifyDistrictName = name => {
|
const simplifyDistrictName = (name) => {
|
||||||
if (!name) return name;
|
if (!name) return name;
|
||||||
return name
|
return name
|
||||||
.replace('彭水苗族土家族自治县', '彭水县')
|
.replace("彭水苗族土家族自治县", "彭水县")
|
||||||
.replace('石柱土家族自治县', '石柱县')
|
.replace("石柱土家族自治县", "石柱县")
|
||||||
.replace('秀山土家族苗族自治县', '秀山县')
|
.replace("秀山土家族苗族自治县", "秀山县")
|
||||||
.replace('酉阳土家族苗族自治县', '酉阳县');
|
.replace("酉阳土家族苗族自治县", "酉阳县");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理数据，简化区县名称
|
// 处理数据，简化区县名称
|
||||||
const processedData = data.map(item => ({
|
const processedData = data.map((item) => ({
|
||||||
...item,
|
...item,
|
||||||
name: simplifyDistrictName(item.name),
|
name: simplifyDistrictName(item.name),
|
||||||
}));
|
}));
|
||||||
@ -429,7 +442,7 @@ const districtLoadLoad = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载数据失败:', error);
|
console.error("加载数据失败:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const roadTypeData = ref([]);
|
const roadTypeData = ref([]);
|
||||||
@ -441,21 +454,21 @@ const ruralarr = ref([]);
|
|||||||
const scheduleStatisticsByCountyLoad = async () => {
|
const scheduleStatisticsByCountyLoad = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/weather-warning/schedule-statistics/_by_county',
|
url: "/snow-ops-platform/weather-warning/schedule-statistics/_by_county",
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
params: getdateRangeTime(),
|
params: getdateRangeTime(),
|
||||||
});
|
});
|
||||||
console.log('调度统计区县数据:', res);
|
console.log("调度统计区县数据:", res);
|
||||||
if (res.code == '00000') {
|
if (res.code == "00000") {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data) {
|
if (data) {
|
||||||
data.forEach(item => {
|
data.forEach((item) => {
|
||||||
if (item.countyName != '测试区县') {
|
if (item.countyName != "测试区县") {
|
||||||
if (item.type == 'project') {
|
if (item.type == "project") {
|
||||||
projectarr.value.push(item);
|
projectarr.value.push(item);
|
||||||
} else if (item.roadType == 'national') {
|
} else if (item.roadType == "national") {
|
||||||
nationalarr.value.push(item);
|
nationalarr.value.push(item);
|
||||||
} else if (item.roadType == 'rural') {
|
} else if (item.roadType == "rural") {
|
||||||
ruralarr.value.push(item);
|
ruralarr.value.push(item);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -465,17 +478,21 @@ const scheduleStatisticsByCountyLoad = async () => {
|
|||||||
console.log(ruralarr.value);
|
console.log(ruralarr.value);
|
||||||
|
|
||||||
// 合并渝北区和江北区为两江新区
|
// 合并渝北区和江北区为两江新区
|
||||||
const mergeLiangjiangNewArea = arr => {
|
const mergeLiangjiangNewArea = (arr) => {
|
||||||
const yubeiItems = arr.filter(item => item.countyName === '渝北区');
|
const yubeiItems = arr.filter((item) => item.countyName === "渝北区");
|
||||||
const jiangbeiItems = arr.filter(item => item.countyName === '江北区');
|
const jiangbeiItems = arr.filter(
|
||||||
|
(item) => item.countyName === "江北区",
|
||||||
|
);
|
||||||
|
|
||||||
if (yubeiItems.length > 0 || jiangbeiItems.length > 0) {
|
if (yubeiItems.length > 0 || jiangbeiItems.length > 0) {
|
||||||
// 计算合并后的数据
|
// 计算合并后的数据
|
||||||
const mergedItem = {
|
const mergedItem = {
|
||||||
countyName: '两江新区',
|
countyName: "两江新区",
|
||||||
countyId: yubeiItems[0]?.countyId || jiangbeiItems[0]?.countyId || '',
|
countyId:
|
||||||
type: yubeiItems[0]?.type || jiangbeiItems[0]?.type || '',
|
yubeiItems[0]?.countyId || jiangbeiItems[0]?.countyId || "",
|
||||||
roadType: yubeiItems[0]?.roadType || jiangbeiItems[0]?.roadType || '',
|
type: yubeiItems[0]?.type || jiangbeiItems[0]?.type || "",
|
||||||
|
roadType:
|
||||||
|
yubeiItems[0]?.roadType || jiangbeiItems[0]?.roadType || "",
|
||||||
// 数值字段累加
|
// 数值字段累加
|
||||||
noticeCount: 0,
|
noticeCount: 0,
|
||||||
replyCount: 0,
|
replyCount: 0,
|
||||||
@ -484,7 +501,7 @@ const scheduleStatisticsByCountyLoad = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 累加渝北区数据
|
// 累加渝北区数据
|
||||||
yubeiItems.forEach(item => {
|
yubeiItems.forEach((item) => {
|
||||||
mergedItem.noticeCount += item.noticeCount || 0;
|
mergedItem.noticeCount += item.noticeCount || 0;
|
||||||
mergedItem.replyCount += item.replyCount || 0;
|
mergedItem.replyCount += item.replyCount || 0;
|
||||||
mergedItem.population += item.population || 0;
|
mergedItem.population += item.population || 0;
|
||||||
@ -492,7 +509,7 @@ const scheduleStatisticsByCountyLoad = async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 累加江北区数据
|
// 累加江北区数据
|
||||||
jiangbeiItems.forEach(item => {
|
jiangbeiItems.forEach((item) => {
|
||||||
mergedItem.noticeCount += item.noticeCount || 0;
|
mergedItem.noticeCount += item.noticeCount || 0;
|
||||||
mergedItem.replyCount += item.replyCount || 0;
|
mergedItem.replyCount += item.replyCount || 0;
|
||||||
mergedItem.population += item.population || 0;
|
mergedItem.population += item.population || 0;
|
||||||
@ -501,7 +518,8 @@ const scheduleStatisticsByCountyLoad = async () => {
|
|||||||
|
|
||||||
// 移除渝北区和江北区的数据，添加合并后的两江新区数据
|
// 移除渝北区和江北区的数据，添加合并后的两江新区数据
|
||||||
const filteredArr = arr.filter(
|
const filteredArr = arr.filter(
|
||||||
item => item.countyName !== '渝北区' && item.countyName !== '江北区'
|
(item) =>
|
||||||
|
item.countyName !== "渝北区" && item.countyName !== "江北区",
|
||||||
);
|
);
|
||||||
filteredArr.push(mergedItem);
|
filteredArr.push(mergedItem);
|
||||||
return filteredArr;
|
return filteredArr;
|
||||||
@ -528,7 +546,7 @@ const scheduleStatisticsByCountyLoad = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载调度统计区县数据失败:', error);
|
console.error("加载调度统计区县数据失败:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -536,69 +554,77 @@ const scheduleStatisticsByCountyLoad = async () => {
|
|||||||
const roadTypeLoad = async () => {
|
const roadTypeLoad = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/weather-warning/affected-count/_by_road',
|
url: "/snow-ops-platform/weather-warning/affected-count/_by_road",
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
params: getdateRangeTime(),
|
params: getdateRangeTime(),
|
||||||
});
|
});
|
||||||
console.log(res);
|
console.log(res);
|
||||||
if (res.code == '00000') {
|
if (res.code == "00000") {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data) {
|
if (data) {
|
||||||
roadTypeData.value = data.reverse();
|
roadTypeData.value = data.reverse();
|
||||||
} else {
|
} else {
|
||||||
roadTypeData.value.forEach(item => {
|
roadTypeData.value.forEach((item) => {
|
||||||
item.count = 0;
|
item.count = 0;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载数据失败:', error);
|
console.error("加载数据失败:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// 加载气象预警和影响点数据
|
// 加载气象预警和影响点数据
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/weather-warning/warning-count',
|
url: "/snow-ops-platform/weather-warning/warning-count",
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
params: getdateRangeTime(),
|
params: getdateRangeTime(),
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res.code == '00000') {
|
if (res.code == "00000") {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data) {
|
if (data) {
|
||||||
let obj = {};
|
let obj = {};
|
||||||
data.forEach(item => {
|
data.forEach((item) => {
|
||||||
obj[item.name] = item.count || 0;
|
obj[item.name] = item.count || 0;
|
||||||
});
|
});
|
||||||
console.log(obj);
|
console.log(obj);
|
||||||
weatherWarningData.value.forEach(item => {
|
weatherWarningData.value.forEach((item) => {
|
||||||
if (item.label == '红色预警') {
|
if (item.label == "红色预警") {
|
||||||
item.value = obj['warning-red-count'] + '/' + obj['warning-red-total'] || '0/0';
|
item.value =
|
||||||
} else if (item.label == '橙色预警') {
|
obj["warning-red-count"] + "/" + obj["warning-red-total"] ||
|
||||||
item.value = obj['warning-orange-count'] + '/' + obj['warning-orange-total'] || '0/0';
|
"0/0";
|
||||||
} else if (item.label == '黄色预警') {
|
} else if (item.label == "橙色预警") {
|
||||||
item.value = obj['warning-yellow-count'] + '/' + obj['warning-yellow-total'] || '0/0';
|
item.value =
|
||||||
} else if (item.label == '蓝色预警') {
|
obj["warning-orange-count"] + "/" + obj["warning-orange-total"] ||
|
||||||
item.value = obj['warning-blue-count'] + '/' + obj['warning-blue-total'] || '0/0';
|
"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 {
|
} else {
|
||||||
weatherWarningData.value.forEach(item => {
|
weatherWarningData.value.forEach((item) => {
|
||||||
if (item.label == '红色预警') {
|
if (item.label == "红色预警") {
|
||||||
item.value = '0/0';
|
item.value = "0/0";
|
||||||
} else if (item.label == '橙色预警') {
|
} else if (item.label == "橙色预警") {
|
||||||
item.value = '0/0';
|
item.value = "0/0";
|
||||||
} else if (item.label == '黄色预警') {
|
} else if (item.label == "黄色预警") {
|
||||||
item.value = '0/0';
|
item.value = "0/0";
|
||||||
} else if (item.label == '蓝色预警') {
|
} else if (item.label == "蓝色预警") {
|
||||||
item.value = '0/0';
|
item.value = "0/0";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载数据失败:', error);
|
console.error("加载数据失败:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -606,43 +632,43 @@ const loadData = async () => {
|
|||||||
const loadBarChartData = async () => {
|
const loadBarChartData = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await request({
|
const res = await request({
|
||||||
url: '/snow-ops-platform/weather-warning/affected-count',
|
url: "/snow-ops-platform/weather-warning/affected-count",
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
params: getdateRangeTime(),
|
params: getdateRangeTime(),
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res.code == '00000') {
|
if (res.code == "00000") {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data.length > 0) {
|
if (data.length > 0) {
|
||||||
// 英文转中文映射
|
// 英文转中文映射
|
||||||
const nameMap = {
|
const nameMap = {
|
||||||
'road-section': '路段',
|
"road-section": "路段",
|
||||||
bridge: '桥梁',
|
bridge: "桥梁",
|
||||||
tunnel: '隧道',
|
tunnel: "隧道",
|
||||||
slope: '边坡',
|
slope: "边坡",
|
||||||
project: '项目',
|
project: "项目",
|
||||||
Road: '路段',
|
Road: "路段",
|
||||||
Bridge: '桥梁',
|
Bridge: "桥梁",
|
||||||
Tunnel: '隧道',
|
Tunnel: "隧道",
|
||||||
Slope: '边坡',
|
Slope: "边坡",
|
||||||
Project: '项目',
|
Project: "项目",
|
||||||
};
|
};
|
||||||
|
|
||||||
// 转换英文name为中文
|
// 转换英文name为中文
|
||||||
const convertedData = data.map(item => {
|
const convertedData = data.map((item) => {
|
||||||
const name = nameMap[item.name] || item.name;
|
const name = nameMap[item.name] || item.name;
|
||||||
return { ...item, name };
|
return { ...item, name };
|
||||||
});
|
});
|
||||||
convertedData.forEach(item => {
|
convertedData.forEach((item) => {
|
||||||
if (item.name == '路段') {
|
if (item.name == "路段") {
|
||||||
impactData.value[0].count = item.count || 0;
|
impactData.value[0].count = item.count || 0;
|
||||||
} else if (item.name == '桥梁') {
|
} else if (item.name == "桥梁") {
|
||||||
impactData.value[1].count = item.count || 0;
|
impactData.value[1].count = item.count || 0;
|
||||||
} else if (item.name == '隧道') {
|
} else if (item.name == "隧道") {
|
||||||
impactData.value[2].count = item.count || 0;
|
impactData.value[2].count = item.count || 0;
|
||||||
} else if (item.name == '边坡') {
|
} else if (item.name == "边坡") {
|
||||||
impactData.value[3].count = item.count || 0;
|
impactData.value[3].count = item.count || 0;
|
||||||
} else if (item.name == '项目') {
|
} else if (item.name == "项目") {
|
||||||
impactData.value[4].count = item.count || 0;
|
impactData.value[4].count = item.count || 0;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -651,17 +677,17 @@ const loadBarChartData = async () => {
|
|||||||
|
|
||||||
impactData.value = JSON.parse(
|
impactData.value = JSON.parse(
|
||||||
JSON.stringify([
|
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) {
|
} catch (error) {
|
||||||
console.error('加载柱状图数据失败:', error);
|
console.error("加载柱状图数据失败:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -669,27 +695,27 @@ const loadBarChartData = async () => {
|
|||||||
// 计算所有影响点的总和
|
// 计算所有影响点的总和
|
||||||
const totalValue = computed(() => {
|
const totalValue = computed(() => {
|
||||||
let total = 0;
|
let total = 0;
|
||||||
impactData.value.forEach(item => {
|
impactData.value.forEach((item) => {
|
||||||
total += item.count || 0;
|
total += item.count || 0;
|
||||||
});
|
});
|
||||||
return total;
|
return total;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 计算每个柱子的高度百分比
|
// 计算每个柱子的高度百分比
|
||||||
const getBarHeight = value => {
|
const getBarHeight = (value) => {
|
||||||
const actualValue = value.count || value.value;
|
const actualValue = value.count || value.value;
|
||||||
if (!actualValue || actualValue == 0) return '0';
|
if (!actualValue || actualValue == 0) return "0";
|
||||||
// 确保最小高度为10%，最大高度为100%
|
// 确保最小高度为10%，最大高度为100%
|
||||||
const height = (actualValue / totalValue.value) * 200;
|
const height = (actualValue / totalValue.value) * 200;
|
||||||
// 确保高度差异明显，至少有5%的差异
|
// 确保高度差异明显，至少有5%的差异
|
||||||
return Math.min(100, Math.max(10, Math.round(height)));
|
return Math.min(100, Math.max(10, Math.round(height)));
|
||||||
};
|
};
|
||||||
const handleAIClick = () => {
|
const handleAIClick = () => {
|
||||||
emit('openAIResult');
|
emit("openAIResult");
|
||||||
};
|
};
|
||||||
|
|
||||||
// 响应式单位转换函数（基于1920px设计稿）
|
// 响应式单位转换函数（基于1920px设计稿）
|
||||||
const vw = px => {
|
const vw = (px) => {
|
||||||
return Math.round((px / 1920) * window.innerWidth);
|
return Math.round((px / 1920) * window.innerWidth);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -704,69 +730,67 @@ const districtData = ref([]);
|
|||||||
// 响应调度统计数据
|
// 响应调度统计数据
|
||||||
const responseStats = ref([
|
const responseStats = ref([
|
||||||
{
|
{
|
||||||
label: '叫应总数',
|
label: "叫应总数",
|
||||||
value: '15',
|
value: "15",
|
||||||
iconClass: 'icon-call',
|
iconClass: "icon-call",
|
||||||
img: imgCall,
|
img: imgCall,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '已回应数',
|
label: "已回应数",
|
||||||
value: '9',
|
value: "9",
|
||||||
iconClass: 'icon-reply',
|
iconClass: "icon-reply",
|
||||||
img: imgReply,
|
img: imgReply,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '回应率',
|
label: "回应率",
|
||||||
value: '100%',
|
value: "100%",
|
||||||
iconClass: 'icon-rate',
|
iconClass: "icon-rate",
|
||||||
img: imgRate,
|
img: imgRate,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '调度区县数',
|
label: "调度区县数",
|
||||||
value: '21',
|
value: "21",
|
||||||
iconClass: 'icon-district',
|
iconClass: "icon-district",
|
||||||
img: imgDistrict,
|
img: imgDistrict,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '线下帮扶数',
|
label: "线下帮扶数",
|
||||||
value: '12',
|
value: "12",
|
||||||
iconClass: 'icon-help',
|
iconClass: "icon-help",
|
||||||
img: imgHelp,
|
img: imgHelp,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '抽查人次',
|
label: "抽查人次",
|
||||||
value: '23',
|
value: "23",
|
||||||
iconClass: 'icon-check',
|
iconClass: "icon-check",
|
||||||
img: imgCheck,
|
img: imgCheck,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 调度清单数据
|
// 调度清单数据
|
||||||
const dispatchList = ref([
|
const dispatchList = ref([
|
||||||
{ label: '国省道调度', value: '341' },
|
{ label: "国省道调度", value: "341" },
|
||||||
{ label: '农村公路调度', value: '210' },
|
{ label: "农村公路调度", value: "210" },
|
||||||
{ label: '建设工程调度', value: '120' },
|
{ label: "建设工程调度", value: "120" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const headerCellStyle = () => ({
|
const headerCellStyle = () => ({
|
||||||
background: 'rgba(64, 169, 255, 0.1)',
|
background: "rgba(64, 169, 255, 0.1)",
|
||||||
color: 'rgba(255, 255, 255, 0.9)',
|
color: "rgba(255, 255, 255, 0.9)",
|
||||||
fontWeight: 'normal',
|
fontWeight: "normal",
|
||||||
borderBottom: '1px solid rgba(64, 169, 255, 0.2)',
|
borderBottom: "1px solid rgba(64, 169, 255, 0.2)",
|
||||||
padding: ' 2px',
|
padding: " 2px",
|
||||||
fontSize: '14px',
|
textAlign: "center",
|
||||||
textAlign: 'center',
|
lineHeight: "1.2",
|
||||||
lineHeight: '1.2',
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const cellStyle = () => ({
|
const cellStyle = () => ({
|
||||||
background: 'transparent',
|
background: "transparent",
|
||||||
color: 'rgba(255, 255, 255, 0.8)',
|
color: "rgba(255, 255, 255, 0.8)",
|
||||||
borderBottom: '1px solid rgba(64, 169, 255, 0.1)',
|
borderBottom: "1px solid rgba(64, 169, 255, 0.1)",
|
||||||
fontSize: '14px',
|
padding: " 2px",
|
||||||
padding: ' 2px',
|
textAlign: "center",
|
||||||
textAlign: 'center',
|
lineHeight: "1.2",
|
||||||
lineHeight: '1.2',
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -821,7 +845,7 @@ const cellStyle = () => ({
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: vw(20);
|
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-size: cover;
|
||||||
background-position: left;
|
background-position: left;
|
||||||
|
|
||||||
@ -845,7 +869,7 @@ const cellStyle = () => ({
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '←';
|
content: "←";
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -981,7 +1005,7 @@ const cellStyle = () => ({
|
|||||||
|
|
||||||
// 背景网格线
|
// 背景网格线
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -989,7 +1013,11 @@ const cellStyle = () => ({
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(to right, transparent 0%, transparent 100%),
|
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%;
|
background-size: 100% 25%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@ -1014,7 +1042,11 @@ const cellStyle = () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
.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);
|
box-shadow: 0 0 15px rgba(64, 169, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1034,7 +1066,11 @@ const cellStyle = () => ({
|
|||||||
.bar {
|
.bar {
|
||||||
width: vw(30);
|
width: vw(30);
|
||||||
min-width: 16px;
|
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;
|
border-radius: 2px 2px 0 0;
|
||||||
// min-height: 20px;
|
// min-height: 20px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@ -1175,7 +1211,8 @@ const cellStyle = () => ({
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: vw(15);
|
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-size: cover;
|
||||||
background-position: left;
|
background-position: left;
|
||||||
|
|
||||||
@ -1196,7 +1233,7 @@ const cellStyle = () => ({
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '←';
|
content: "←";
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: vw(14);
|
font-size: vw(14);
|
||||||
}
|
}
|
||||||
@ -1250,22 +1287,22 @@ const cellStyle = () => ({
|
|||||||
font-size: vw(18);
|
font-size: vw(18);
|
||||||
|
|
||||||
&.icon-call::before {
|
&.icon-call::before {
|
||||||
content: '💬';
|
content: "💬";
|
||||||
}
|
}
|
||||||
&.icon-reply::before {
|
&.icon-reply::before {
|
||||||
content: '✉️';
|
content: "✉️";
|
||||||
}
|
}
|
||||||
&.icon-rate::before {
|
&.icon-rate::before {
|
||||||
content: '⏱️';
|
content: "⏱️";
|
||||||
}
|
}
|
||||||
&.icon-district::before {
|
&.icon-district::before {
|
||||||
content: '📍';
|
content: "📍";
|
||||||
}
|
}
|
||||||
&.icon-help::before {
|
&.icon-help::before {
|
||||||
content: '🤝';
|
content: "🤝";
|
||||||
}
|
}
|
||||||
&.icon-check::before {
|
&.icon-check::before {
|
||||||
content: '👥';
|
content: "👥";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -80,7 +80,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="影响区域:">
|
<el-form-item label="行政区域:">
|
||||||
<el-select ></el-select>
|
<el-select ></el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|||||||
@ -81,7 +81,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="影响区域:">
|
<el-form-item label="行政区域:">
|
||||||
<el-select></el-select>
|
<el-select></el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|||||||
@ -299,7 +299,7 @@
|
|||||||
<el-form-item label="施工单位" class="form-item-1-3">
|
<el-form-item label="施工单位" class="form-item-1-3">
|
||||||
<el-input v-model="reportForm.builderUnit" placeholder="" />
|
<el-input v-model="reportForm.builderUnit" placeholder="" />
|
||||||
</el-form-item>
|
</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-select v-model="reportForm.adminArea" placeholder="请选择" style="width: 100%">
|
||||||
<el-option label="区域1" value="area1" />
|
<el-option label="区域1" value="area1" />
|
||||||
<el-option label="区域2" value="area2" />
|
<el-option label="区域2" value="area2" />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user