影响点情况弹窗增加筛选功能,增加巡查路段接口,
This commit is contained in:
parent
97e421cf24
commit
a3ff5082a6
BIN
packages/screen/src/assets/xiangying/农村公路icon.png
Normal file
BIN
packages/screen/src/assets/xiangying/农村公路icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
packages/screen/src/assets/xiangying/国省道icon.png
Normal file
BIN
packages/screen/src/assets/xiangying/国省道icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 798 B |
@ -119,6 +119,10 @@ const props = defineProps({
|
|||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
|
itemFilterForm: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']);
|
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']);
|
||||||
@ -129,6 +133,15 @@ const filterForm = ref({
|
|||||||
type: '',
|
type: '',
|
||||||
roadConditionType: '',
|
roadConditionType: '',
|
||||||
});
|
});
|
||||||
|
watch(
|
||||||
|
() => props.itemFilterForm,
|
||||||
|
newVal => {
|
||||||
|
console.log('newVal', newVal);
|
||||||
|
filterForm.value.roadConditionType = newVal.label.substring(0, newVal.label.length - 1) || '';
|
||||||
|
currentPage.value = 1;
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// 影响区域选项
|
// 影响区域选项
|
||||||
// 已从 index.js 导入
|
// 已从 index.js 导入
|
||||||
@ -283,16 +296,6 @@ const fetchData = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 监听visible变化
|
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
newVal => {
|
|
||||||
if (newVal) {
|
|
||||||
currentPage.value = 1;
|
|
||||||
fetchData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
watch(
|
watch(
|
||||||
() => filterForm.value,
|
() => filterForm.value,
|
||||||
newVal => {
|
newVal => {
|
||||||
|
|||||||
@ -180,6 +180,7 @@ watch(
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
.filter-row {
|
.filter-row {
|
||||||
|
width: 700px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|||||||
@ -58,7 +58,7 @@
|
|||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<span class="info-dot"></span>
|
<span class="info-dot"></span>
|
||||||
<span class="info-label">发现时间</span>
|
<span class="info-label">发现时间</span>
|
||||||
<span class="info-value">{{ basicInfo.discoverTime }}</span>
|
<span class="info-value">{{ basicInfo.findTime }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -177,7 +177,17 @@ const basicInfo = ref({
|
|||||||
riskDesc: '',
|
riskDesc: '',
|
||||||
discoverTime: '',
|
discoverTime: '',
|
||||||
});
|
});
|
||||||
|
watch(
|
||||||
|
() => props.item,
|
||||||
|
newVal => {
|
||||||
|
if (newVal) {
|
||||||
|
// 当弹窗打开时获取数据
|
||||||
|
getAffectedObjectTypeId(props.item);
|
||||||
|
console.log(basicInfo.value);
|
||||||
|
console.log(props.item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
// 照片列表
|
// 照片列表
|
||||||
const photoList = ref([]);
|
const photoList = ref([]);
|
||||||
|
|
||||||
@ -363,13 +373,13 @@ const getAffectedObjectTypeId = data => {
|
|||||||
} else if (pointType === '路段') {
|
} else if (pointType === '路段') {
|
||||||
// 更新基本信息 - 根据路段数据库字段映射
|
// 更新基本信息 - 根据路段数据库字段映射
|
||||||
basicInfo.value = {
|
basicInfo.value = {
|
||||||
district: data.GL1_QDMC || '-', // 起点名称(区县)
|
district: data.rawData.GL1_QXMC || '-', // 起点名称(区县)
|
||||||
level: data.GL1_JSDJ || '未评定', // 技术等级
|
level: data.rawData.GL1_FXDJ || '未评定', // 技术等级
|
||||||
levelClass: data.GL1_JSDJ, // 一二级为一般,三四五级为重大
|
levelClass: data.rawData.GL1_FXDJ, // 一二级为一般,三四五级为重大
|
||||||
roadCode: data.GL1_LXBH || '-', // 路线编号
|
roadCode: data.rawData.GL1_LXBH || '-', // 路线编号
|
||||||
location: `${data.GL1_QDMC || '-'} - ${data.GL1_ZDMC || '-'}`, // 起点到终点
|
location: data.pointLocation, // 起点到终点
|
||||||
riskDesc: '-', // 风险点
|
riskDesc: data.rawData.GL1_FXMS || '-', // 风险点
|
||||||
discoverTime: '-', // 发现时间
|
discoverTime: data.rawData.GL1_SBSJ || '-', // 发现时间
|
||||||
};
|
};
|
||||||
|
|
||||||
// 更新照片列表 - 路段一般没有照片
|
// 更新照片列表 - 路段一般没有照片
|
||||||
@ -435,7 +445,7 @@ watch(
|
|||||||
newVal => {
|
newVal => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
// 当弹窗打开时获取数据
|
// 当弹窗打开时获取数据
|
||||||
getAffectedObjectDetail();
|
// getAffectedObjectDetail();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
@ -42,22 +42,6 @@
|
|||||||
<!-- 筛选区域 -->
|
<!-- 筛选区域 -->
|
||||||
<template #filter>
|
<template #filter>
|
||||||
<div class="filter-row">
|
<div class="filter-row">
|
||||||
<div class="filter-item">
|
|
||||||
<el-select
|
|
||||||
:teleported="false"
|
|
||||||
v-model="filterForm.pointType"
|
|
||||||
size="small"
|
|
||||||
placeholder="影响点类型"
|
|
||||||
class="filter-select"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="option in pointTypeOptions"
|
|
||||||
:key="option.value"
|
|
||||||
:label="option.label"
|
|
||||||
:value="option.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<div class="filter-item">
|
<div class="filter-item">
|
||||||
<el-select
|
<el-select
|
||||||
:teleported="false"
|
:teleported="false"
|
||||||
@ -65,6 +49,8 @@
|
|||||||
size="small"
|
size="small"
|
||||||
placeholder="影响点等级"
|
placeholder="影响点等级"
|
||||||
class="filter-select"
|
class="filter-select"
|
||||||
|
clearable
|
||||||
|
@change="handleFilterChange"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="option in pointLevelOptions"
|
v-for="option in pointLevelOptions"
|
||||||
@ -81,9 +67,11 @@
|
|||||||
size="small"
|
size="small"
|
||||||
placeholder="影响区域"
|
placeholder="影响区域"
|
||||||
class="filter-select"
|
class="filter-select"
|
||||||
|
clearable
|
||||||
|
@change="handleFilterChange"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="option in regionOptionsWithAll"
|
v-for="option in regionOptions"
|
||||||
:key="option.value"
|
:key="option.value"
|
||||||
:label="option.label"
|
:label="option.label"
|
||||||
:value="option.value"
|
:value="option.value"
|
||||||
@ -201,7 +189,7 @@
|
|||||||
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 { pointTypeOptions, pointLevelOptions, regionOptions } from '../component/index.js';
|
||||||
import baseDialog from '../component/baseDialog.vue';
|
import baseDialog from '../component/baseDialog.vue';
|
||||||
|
|
||||||
import respondedIcon from '../../../assets/xiangying/有回应@2x.png';
|
import respondedIcon from '../../../assets/xiangying/有回应@2x.png';
|
||||||
@ -478,9 +466,16 @@ const handleCurrentChange = val => {
|
|||||||
currentPage.value = val;
|
currentPage.value = val;
|
||||||
fetchData();
|
fetchData();
|
||||||
};
|
};
|
||||||
|
// 筛选条件改变时触发
|
||||||
|
const handleFilterChange = () => {
|
||||||
|
currentPage.value = 1;
|
||||||
|
fetchData();
|
||||||
|
};
|
||||||
// 获取时间参数
|
// 获取时间参数
|
||||||
const getTimeParams = () => {
|
const getTimeParams = () => {
|
||||||
console.log('原始时间范围:', props.handleImpactItem);
|
console.log('原始时间范围:', props.handleImpactItem);
|
||||||
|
const roadConditionType =
|
||||||
|
regionOptions.value.find(item => item.value === filterForm.value.region)?.label || '';
|
||||||
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}`,
|
||||||
@ -488,6 +483,8 @@ const getTimeParams = () => {
|
|||||||
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,
|
||||||
|
roadConditionType: roadConditionType || '',
|
||||||
|
riskLevel: filterForm.value.pointLevel || '',
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
// 处理数据为统一格式
|
// 处理数据为统一格式
|
||||||
@ -512,6 +509,7 @@ const processUnifiedData = (item, type) => {
|
|||||||
|
|
||||||
// 基础数据
|
// 基础数据
|
||||||
const baseData = {
|
const baseData = {
|
||||||
|
item,
|
||||||
id: item.id,
|
id: item.id,
|
||||||
// 影响区域
|
// 影响区域
|
||||||
region:
|
region:
|
||||||
@ -659,7 +657,15 @@ const processUnifiedData = (item, type) => {
|
|||||||
// 影响区域 - 使用区县名称
|
// 影响区域 - 使用区县名称
|
||||||
region: item.GL1_ZDMC || '-',
|
region: item.GL1_ZDMC || '-',
|
||||||
// 影响点位置 - 使用路线名称+起终点桩号
|
// 影响点位置 - 使用路线名称+起终点桩号
|
||||||
pointLocation: item.GL1_LXMC + item.GL1_LXBH,
|
pointLocation:
|
||||||
|
item.GL1_QDZH && item.GL1_ZDZH
|
||||||
|
? item.GL1_LXMC +
|
||||||
|
'(k' +
|
||||||
|
(item.GL1_QDZH + '').replace('.', '+') +
|
||||||
|
'至k' +
|
||||||
|
(item.GL1_ZDZH + '').replace('.', '+') +
|
||||||
|
')'
|
||||||
|
: item.GL1_LXMC,
|
||||||
// 影响点等级 - 使用风险等级
|
// 影响点等级 - 使用风险等级
|
||||||
pointLevel: item.GL1_FXDJ || '',
|
pointLevel: item.GL1_FXDJ || '',
|
||||||
levelClass: getLevelClass(item.GL1_FXDJ),
|
levelClass: getLevelClass(item.GL1_FXDJ),
|
||||||
@ -825,8 +831,7 @@ 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%);
|
width: 1200px;
|
||||||
border: vw(2) solid rgba(64, 169, 255, 0.4);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -15,15 +15,22 @@
|
|||||||
<!-- 统计卡片区域 -->
|
<!-- 统计卡片区域 -->
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="stats-cards">
|
<div class="stats-cards">
|
||||||
<div class="stats-card">
|
<div
|
||||||
<span class="stats-icon road-icon"></span>
|
v-for="(item, index) in mileageData"
|
||||||
<span class="stats-label">国省道:</span>
|
:key="index"
|
||||||
<span class="stats-value">{{ nationalRoadMileage }}km</span>
|
@click="handleClick(index, item)"
|
||||||
|
class="stat-card"
|
||||||
|
:style="{
|
||||||
|
backgroundImage: `url(${cardType == index ? selectedIcon : unselectedIcon})`,
|
||||||
|
backgroundSize: '100% 100%',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="stat-icon"><img :src="item.icon" alt="" /></div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<span class="stat-label">{{ item.name }}</span>
|
||||||
|
<span class="stat-value">{{ item.value }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stats-card">
|
|
||||||
<span class="stats-icon rural-icon"></span>
|
|
||||||
<span class="stats-label">农村公路:</span>
|
|
||||||
<span class="stats-value">{{ ruralRoadMileage }}km</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -58,6 +65,12 @@
|
|||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
import BaseDialog from '../component/baseDialog.vue';
|
import BaseDialog from '../component/baseDialog.vue';
|
||||||
import { request } from '@/utils/request';
|
import { request } from '@/utils/request';
|
||||||
|
import selectedIcon from '../../../assets/xiangying/选中bg@2x.png';
|
||||||
|
import unselectedIcon from '../../../assets/xiangying/未选中bg@2x.png';
|
||||||
|
|
||||||
|
// 引入图标
|
||||||
|
import IconNational from '../../../assets/xiangying/国省道icon.png';
|
||||||
|
import IconRuralRoad from '../../../assets/xiangying/农村公路icon.png';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
visible: {
|
visible: {
|
||||||
@ -72,6 +85,23 @@ const emit = defineEmits(['update:visible', 'close']);
|
|||||||
const nationalRoadMileage = ref(345);
|
const nationalRoadMileage = ref(345);
|
||||||
const ruralRoadMileage = ref(4333);
|
const ruralRoadMileage = ref(4333);
|
||||||
|
|
||||||
|
// 里程数据
|
||||||
|
const mileageData = ref([
|
||||||
|
{ name: '国省道', value: 345, icon: IconNational, type: 'national' },
|
||||||
|
{ name: '农村公路', value: 4333, icon: IconRuralRoad, type: 'rural' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 当前选中卡片类型
|
||||||
|
const cardType = ref('0');
|
||||||
|
|
||||||
|
// 点击卡片
|
||||||
|
const handleClick = (index, item) => {
|
||||||
|
cardType.value = index + '';
|
||||||
|
// 可以在这里添加筛选逻辑
|
||||||
|
currentPage.value = 1;
|
||||||
|
fetchData();
|
||||||
|
};
|
||||||
|
|
||||||
// 筛选表单
|
// 筛选表单
|
||||||
const filterForm = ref({
|
const filterForm = ref({
|
||||||
district: '',
|
district: '',
|
||||||
@ -157,8 +187,13 @@ const fetchStatsData = async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (res.code === '00000' && res.data) {
|
if (res.code === '00000' && res.data) {
|
||||||
nationalRoadMileage.value = res.data.nationalRoadMileage || 345;
|
const nationalVal = res.data.nationalRoadMileage || 345;
|
||||||
ruralRoadMileage.value = res.data.ruralRoadMileage || 4333;
|
const ruralVal = res.data.ruralRoadMileage || 4333;
|
||||||
|
nationalRoadMileage.value = nationalVal;
|
||||||
|
ruralRoadMileage.value = ruralVal;
|
||||||
|
// 同步更新 mileageData
|
||||||
|
mileageData.value[0].value = nationalVal;
|
||||||
|
mileageData.value[1].value = ruralVal;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取巡查里程统计数据失败:', error);
|
console.error('获取巡查里程统计数据失败:', error);
|
||||||
@ -212,46 +247,50 @@ watch(
|
|||||||
.stats-cards {
|
.stats-cards {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
width: 700px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
|
|
||||||
.stats-card {
|
|
||||||
|
.stat-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
background: linear-gradient(135deg, rgba(64, 169, 255, 0.15) 0%, rgba(24, 144, 255, 0.1) 100%);
|
cursor: pointer;
|
||||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
transition: all 0.3s ease;
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
.stats-icon {
|
.stat-icon {
|
||||||
width: 20px;
|
width: 32px;
|
||||||
height: 20px;
|
height: 32px;
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
|
|
||||||
&.road-icon {
|
img {
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2340a9ff"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>');
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
&.rural-icon {
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2340a9ff"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-label {
|
.stat-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
margin-right: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-value {
|
.stat-value {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #40a9ff;
|
color: #40a9ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 筛选区域
|
// 筛选区域
|
||||||
.filter-section {
|
.filter-section {
|
||||||
|
|||||||
@ -216,8 +216,9 @@ const headerCellStyle = () => {
|
|||||||
|
|
||||||
const cellStyle = () => {
|
const cellStyle = () => {
|
||||||
return {
|
return {
|
||||||
backgroundColor: '#16334E',
|
backgroundColor: '#17375E',
|
||||||
color: 'rgba(255, 255, 255, 0.85)',
|
color: 'rgba(255, 255, 255, 0.85)',
|
||||||
|
borderBottom: '2px solid #142D47',
|
||||||
fontSize: '13px',
|
fontSize: '13px',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
padding: '5px 0px',
|
padding: '5px 0px',
|
||||||
@ -243,7 +244,7 @@ const cellStyle = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.base-dialog {
|
.base-dialog {
|
||||||
// width: 80vw;
|
min-width: 600px;
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #16334e;
|
background: #16334e;
|
||||||
|
|||||||
@ -120,8 +120,10 @@ export const pointTypeOptions = [
|
|||||||
// 影响点等级选项
|
// 影响点等级选项
|
||||||
export const pointLevelOptions = [
|
export const pointLevelOptions = [
|
||||||
{ label: '全部', value: '' },
|
{ label: '全部', value: '' },
|
||||||
{ label: '一般隐患', value: 'normal' },
|
{ label: '低风险', value: '低风险' },
|
||||||
{ label: '重大隐患', value: 'serious' },
|
{ label: '中风险', value: '中风险' },
|
||||||
|
{ label: '较高风险', value: '较高风险' },
|
||||||
|
{ label: '高风险', value: '高风险' },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 是否回应选项
|
// 是否回应选项
|
||||||
|
|||||||
@ -48,6 +48,9 @@
|
|||||||
@openClearanceSituation="openDialog('clearanceSituation')"
|
@openClearanceSituation="openDialog('clearanceSituation')"
|
||||||
@openControlSituation="openDialog('controlSituation')"
|
@openControlSituation="openDialog('controlSituation')"
|
||||||
@update:dateRange="updateDateRange"
|
@update:dateRange="updateDateRange"
|
||||||
|
@openPatrolMileage="openDialog('patrolMileage')"
|
||||||
|
@openPatrolSituation="openDialog('patrolSituation')"
|
||||||
|
@update:filterForm="updateFilterForm"
|
||||||
></right>
|
></right>
|
||||||
</div>
|
</div>
|
||||||
<!-- 地图中心 -->
|
<!-- 地图中心 -->
|
||||||
@ -197,6 +200,7 @@
|
|||||||
|
|
||||||
<!-- 管控情况对话框 -->
|
<!-- 管控情况对话框 -->
|
||||||
<clearanceSituationDialog
|
<clearanceSituationDialog
|
||||||
|
:itemFilterForm="filterForm"
|
||||||
:dateRange="rightDateRange"
|
:dateRange="rightDateRange"
|
||||||
v-model:visible="dialogVisible.clearanceSituation"
|
v-model:visible="dialogVisible.clearanceSituation"
|
||||||
@close="closeDialog('clearanceSituation')"
|
@close="closeDialog('clearanceSituation')"
|
||||||
@ -263,6 +267,18 @@
|
|||||||
v-model:visible="dialogVisible.imageInspection"
|
v-model:visible="dialogVisible.imageInspection"
|
||||||
@close="closeDialog('imageInspection')"
|
@close="closeDialog('imageInspection')"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- 巡查里程对话框 -->
|
||||||
|
<patrolMileageDialog
|
||||||
|
v-model:visible="dialogVisible.patrolMileage"
|
||||||
|
@close="closeDialog('patrolMileage')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 巡查情况对话框 -->
|
||||||
|
<patrolSituationDialog
|
||||||
|
v-model:visible="dialogVisible.patrolSituation"
|
||||||
|
@close="closeDialog('patrolSituation')"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -308,6 +324,8 @@ 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 offlineHelpDialog from './Dialog/offlineHelpDialog.vue';
|
||||||
import imageInspectionDialog from './Dialog/imageInspectionDialog.vue';
|
import imageInspectionDialog from './Dialog/imageInspectionDialog.vue';
|
||||||
|
import patrolMileageDialog from './Dialog/patrolMileageDialog.vue';
|
||||||
|
import patrolSituationDialog from './Dialog/patrolSituationDialog.vue';
|
||||||
|
|
||||||
import './component/el-select.scss';
|
import './component/el-select.scss';
|
||||||
import './component/date-picker-theme.scss';
|
import './component/date-picker-theme.scss';
|
||||||
@ -338,6 +356,8 @@ const dialogVisible = ref({
|
|||||||
hazardPointSituation: false,
|
hazardPointSituation: false,
|
||||||
offlineHelp: false,
|
offlineHelp: false,
|
||||||
imageInspection: false,
|
imageInspection: false,
|
||||||
|
patrolMileage: false,
|
||||||
|
patrolSituation: false,
|
||||||
});
|
});
|
||||||
const activeitem = ref({});
|
const activeitem = ref({});
|
||||||
|
|
||||||
@ -508,6 +528,11 @@ const updateDateRange = range => {
|
|||||||
console.log('更新日期范围:', range);
|
console.log('更新日期范围:', range);
|
||||||
rightDateRange.value = range;
|
rightDateRange.value = range;
|
||||||
};
|
};
|
||||||
|
const filterForm = ref({});
|
||||||
|
const updateFilterForm = item => {
|
||||||
|
console.log('更新筛选表单:', item);
|
||||||
|
filterForm.value = item;
|
||||||
|
};
|
||||||
|
|
||||||
// 确认对话框配置
|
// 确认对话框配置
|
||||||
const confirmConfig = ref({
|
const confirmConfig = ref({
|
||||||
|
|||||||
@ -680,8 +680,9 @@ const getBarHeight = 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%的差异
|
// 确保高度差异明显,至少有3%的最小差异
|
||||||
return Math.min(100, Math.max(10, Math.round(height)));
|
// 最大高度为100% 最新高度为3%的最小差异
|
||||||
|
return Math.min(100, Math.max(3, Math.round(height)));
|
||||||
};
|
};
|
||||||
const handleAIClick = () => {
|
const handleAIClick = () => {
|
||||||
emit('openAIResult');
|
emit('openAIResult');
|
||||||
|
|||||||
@ -48,6 +48,7 @@
|
|||||||
<div class="control-label">{{ item.label }}</div>
|
<div class="control-label">{{ item.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="width: 10px"></div>
|
<div style="width: 10px"></div>
|
||||||
|
|
||||||
<div class="control-grid">
|
<div class="control-grid">
|
||||||
@ -68,18 +69,18 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 巡查公路里程 -->
|
<!-- 巡查公路里程 -->
|
||||||
<div class="patrol-section">
|
<div class="patrol-section clickable">
|
||||||
<div class="patrol-header display jc_sb ai_center">
|
<div class="patrol-header display jc_sb ai_center">
|
||||||
<div>
|
<div @click="handlePatrolClick" style="cursor: pointer;">
|
||||||
<span class="patrol-title">巡查公路里程</span>
|
<span class="patrol-title">巡查公路里程</span>
|
||||||
<span class="patrol-mileage ml_10">234882km</span>
|
<span class="patrol-mileage ml_10">{{ roadInspectionMileage }}km</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="patrol-title">巡查项目数</span>
|
<span class="patrol-title">巡查项目数</span>
|
||||||
<span class="patrol-mileage ml_10">6处</span>
|
<span class="patrol-mileage ml_10">0处</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="patrol-grid">
|
<div class="patrol-grid" style="cursor: pointer;" @click="handlePatrolSituationClick">
|
||||||
<div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
|
<div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
|
||||||
<div class="patrol-value">{{ item.value }}</div>
|
<div class="patrol-value">{{ item.value }}</div>
|
||||||
<div class="patrol-label">{{ item.label }}</div>
|
<div class="patrol-label">{{ item.label }}</div>
|
||||||
@ -220,6 +221,9 @@ const emit = defineEmits([
|
|||||||
'openControlSituation',
|
'openControlSituation',
|
||||||
'openResourceDetail',
|
'openResourceDetail',
|
||||||
'update:dateRange',
|
'update:dateRange',
|
||||||
|
'openPatrolMileage',
|
||||||
|
'openPatrolSituation',
|
||||||
|
'update:filterForm',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 注入兄弟组件通信机制
|
// 注入兄弟组件通信机制
|
||||||
@ -533,6 +537,7 @@ const handleControlClick = item => {
|
|||||||
) {
|
) {
|
||||||
emit('openClearanceSituation');
|
emit('openClearanceSituation');
|
||||||
emit('update:dateRange', getdateRange.value || []);
|
emit('update:dateRange', getdateRange.value || []);
|
||||||
|
emit('update:filterForm', item || {});
|
||||||
} else if (item.label === '停工项目数' || item.label === '关闭驻地数') {
|
} else if (item.label === '停工项目数' || item.label === '关闭驻地数') {
|
||||||
emit('openControlSituation');
|
emit('openControlSituation');
|
||||||
}
|
}
|
||||||
@ -544,6 +549,16 @@ const handleBlockClick = () => {
|
|||||||
emit('update:dateRange', dateRange.value);
|
emit('update:dateRange', dateRange.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 点击巡查公路里程
|
||||||
|
const handlePatrolClick = () => {
|
||||||
|
emit('openPatrolMileage');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 点击巡查情况
|
||||||
|
const handlePatrolSituationClick = () => {
|
||||||
|
emit('openPatrolSituation');
|
||||||
|
};
|
||||||
|
|
||||||
// 日期范围选择器
|
// 日期范围选择器
|
||||||
const dateRange = ref([]);
|
const dateRange = ref([]);
|
||||||
|
|
||||||
@ -630,13 +645,57 @@ const getAffectedCountByProject = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 巡查数据
|
// 巡查数据
|
||||||
const patrolData = [
|
const patrolData = ref([
|
||||||
{ label: '巡查路段数', value: '2' },
|
{ label: '巡查路段数', value: '0', key: 'roadSectionInspectionCount' },
|
||||||
{ label: '巡查桥梁数', value: '1' },
|
{ label: '巡查桥梁数', value: '0', key: 'bridgeInspectionCount' },
|
||||||
{ label: '巡查边坡数', value: '6' },
|
{ label: '巡查边坡数', value: '0', key: 'slopeInspectionCount' },
|
||||||
{ label: '巡查隧道数', value: '10' },
|
{ label: '巡查隧道数', value: '0', key: 'tunnelInspectionCount' },
|
||||||
{ label: '发现隐患数', value: '6' },
|
{ label: '发现隐患数', value: '0', key: 'hiddenDangerCount' },
|
||||||
];
|
]);
|
||||||
|
|
||||||
|
// 巡查公路里程
|
||||||
|
const roadInspectionMileage = ref('0');
|
||||||
|
|
||||||
|
// 获取巡查统计数据
|
||||||
|
const getInspectionStats = async () => {
|
||||||
|
try {
|
||||||
|
let params = {
|
||||||
|
start: '',
|
||||||
|
end: '',
|
||||||
|
};
|
||||||
|
if (getdateRange.value && getdateRange.value.length === 2) {
|
||||||
|
params.start = formatDateTime(getdateRange.value[0]);
|
||||||
|
params.end = formatDateTime(getdateRange.value[1]);
|
||||||
|
}
|
||||||
|
const res = await request({
|
||||||
|
url: '/snow-ops-platform/yhWgxc/weather-warning/inspection-stats',
|
||||||
|
method: 'GET',
|
||||||
|
params: params,
|
||||||
|
});
|
||||||
|
console.log('巡查统计数据:', res);
|
||||||
|
if (res.code == '00000' && res.data) {
|
||||||
|
const data = res.data;
|
||||||
|
// 更新巡查公路里程
|
||||||
|
roadInspectionMileage.value = data.roadInspectionMileage || '0';
|
||||||
|
// 更新patrolData数组的value值
|
||||||
|
patrolData.value.forEach(item => {
|
||||||
|
if (item.key === 'roadSectionInspectionCount') {
|
||||||
|
item.value = data.roadSectionInspectionCount || '0';
|
||||||
|
} else if (item.key === 'bridgeInspectionCount') {
|
||||||
|
item.value = data.bridgeInspectionCount || '0';
|
||||||
|
} else if (item.key === 'slopeInspectionCount') {
|
||||||
|
item.value = data.slopeInspectionCount || '0';
|
||||||
|
} else if (item.key === 'tunnelInspectionCount') {
|
||||||
|
item.value = data.tunnelInspectionCount || '0';
|
||||||
|
} else if (item.key === 'hiddenDangerCount') {
|
||||||
|
item.value = data.hiddenDangerCount || '0';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取巡查统计数据失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 抢险投入数据
|
// 抢险投入数据
|
||||||
const rescueData = ref([
|
const rescueData = ref([
|
||||||
@ -696,6 +755,7 @@ const init = () => {
|
|||||||
getRescueInputStats(); // 获取抢险投入统计数据
|
getRescueInputStats(); // 获取抢险投入统计数据
|
||||||
|
|
||||||
getDisasterStats(); // 获取灾害统计数据
|
getDisasterStats(); // 获取灾害统计数据
|
||||||
|
getInspectionStats(); // 获取巡查统计数据
|
||||||
};
|
};
|
||||||
|
|
||||||
// 组件挂载时获取数据并注册刷新函数
|
// 组件挂载时获取数据并注册刷新函数
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user