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

抢通情况详情弹窗接口调用，地图图标层级提高，修改页面细节，线下帮扶数弹窗，涉灾隐患点情况弹窗

Browse Source
This commit is contained in:
fanjia 2026-04-21 15:34:43 +08:00
parent d2722b0824
commit 07b5f24adf
33 changed files with 2270 additions and 1307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.eslintrc.cjs
View File

@ -1,22 +0,0 @@
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended'
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['vue'],
rules: {
'vue/multi-word-component-names': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/no-v-html': 'off'
}
}

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

@ -141,6 +141,18 @@
> >
{{ currentWarningInfo.whistle }} {{ currentWarningInfo.whistle }}
</div> </div>
<div
class="suggestion-content"
v-else-if="'frontline-contractor' == activeHierarchyTab"
>
{{ currentWarningInfo.contractor }}
</div>
<div
class="suggestion-content"
v-else-if="'frontline-person' == activeHierarchyTab"
>
{{ currentWarningInfo.person }}
</div>
</div> </div>
<!-- 影响范围 --> <!-- 影响范围 -->
@ -268,7 +280,7 @@ const emit = defineEmits(['update:visible', 'close']);
const warningData = ref({ const warningData = ref({
publishOrg: '', publishOrg: '',
warningContent: warningContent:
'潼南区气象台2025年11月13日0时40分发布“暴雨蓝色预警tt信号”，预计23日0:40-6:40，龙形、宝龙、上和、大佛、桂林、玉溪、米心、花岩、双江、古溪、群力、柏梓、崇龛、梓潼、太安等15个乡镇（街道）强降水趋于减弱，未来6小时累计雨量将达50～100毫米，最大小时雨强将达20～40毫米，局地伴有雷电、阵性大风，请各地注意防范。', '黔江区气象台2026年4月16日01时00分发布“暴雨红色预警信号”，过去1小时，双槐雨量已达90毫米，预计6日1:00-7:00，濯水镇街强降水仍将持续，未来6小时累计雨量将达90～160毫米，最大小时雨强将达80～100毫米，局地伴有雷电、阵性大风，地质灾害、中小河流洪水、山洪、城乡积涝等灾害风险高，请注意防范。',
effectiveTime: '', effectiveTime: '',
expireTime: '', expireTime: '',
}); });
@ -297,17 +309,19 @@ const hierarchyLevels = ref([
// 右侧选项卡数据 // 右侧选项卡数据
const hierarchyTabs = ref([ const hierarchyTabs = ref([
{ key: 'city-leader', label: '公路中心领导', parentKey: 'city' }, { key: 'city-leader', label: '中心领导', parentKey: 'city' },
{ key: 'city-dept', label: '处室负责人', parentKey: 'city' }, { key: 'city-dept', label: '处室负责人', parentKey: 'city' },
{ key: 'city-emergency', label: '中心应急办', parentKey: 'city' }, { key: 'city-emergency', label: '中心应急办', parentKey: 'city' },
]); ]);
const districtTabsMap = ref([ const districtTabsMap = ref([
{ key: 'district-leader', label: '公路交通部门领导', parentKey: 'district' }, { key: 'district-leader', label: '公路交通部门领导', parentKey: 'district' },
{ key: 'district-person', label: '公路交通部门包保人', parentKey: 'district' }, { key: 'district-person', label: '养护站长/路长办', parentKey: 'district' },
]); ]);
const frontlineTabsMap = ref([ const frontlineTabsMap = ref([
{ key: 'frontline-guard', label: '护路员', parentKey: 'frontline' }, { key: 'frontline-guard', label: '护路员', parentKey: 'frontline' },
{ key: 'frontline-whistle', label: '项目吹哨人', parentKey: 'frontline' }, { key: 'frontline-whistle', label: '建设单位包保责任人', parentKey: 'frontline' },
{ key: 'frontline-contractor', label: '施工单位包保责任人', parentKey: 'frontline' },
{ key: 'frontline-person', label: '吹哨人', parentKey: 'frontline' },
]); ]);
const activeHierarchyTab = ref('city-leader'); const activeHierarchyTab = ref('city-leader');
@ -584,7 +598,7 @@ watch(
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 50px; // margin-top: -40px;
gap: 8px; gap: 8px;
.ai-icon-img { .ai-icon-img {
width: 80px; width: 80px;
@ -606,7 +620,7 @@ watch(
gap: 20px; gap: 20px;
align-items: center; align-items: center;
margin-left: 20px; margin-left: 20px;
margin-top: 50px; // margin-top: -40px;
margin-right: 10px; margin-right: 10px;
.hierarchy-left { .hierarchy-left {

41
packages/screen/src/views/RiskWarning/Dialog/centerInfoCard.vue
View File

@ -1,9 +1,6 @@
<template> <template>
<div class="center-info-card-container" v-if="visible" @click="handleClick"> <div class="center-info-card-container" v-if="visible" @click="handleClick">
<div <div class="center-info-card" :style="{ backgroundImage: `url(${districtIcon})` }">
class="center-info-card"
:style="{ backgroundImage: `url(${districtIcon})` }"
>
<!-- 标题栏 --> <!-- 标题栏 -->
<div class="card-header"> <div class="card-header">
<div class="header-left"> <div class="header-left">
@ -17,11 +14,11 @@
<!-- 内容区域 --> <!-- 内容区域 -->
<div class="card-content"> <div class="card-content">
<div class="info-row"> <div class="info-row">
<span class="info-text">人数：{{ item?.population || "-" }}人</span> <span class="info-text">人数：{{ item?.population || '-' }}人</span>
<span class="info-text"> <span class="info-text">
<span v-if="item?.type == 'project'">项目：</span> <span v-if="item?.type == 'project'">项目：</span>
<span v-else>路段：</span> <span v-else>路段：</span>
<span>{{ item?.entityCount || "-" }}</span> <span>{{ item?.entityCount || '-' }}</span>
<span v-if="item?.type == 'project'">个</span> <span v-if="item?.type == 'project'">个</span>
<span v-else>条</span> <span v-else>条</span>
</span> </span>
@ -32,10 +29,10 @@
</template> </template>
<script setup> <script setup>
import { computed } from "vue"; import { computed } from 'vue';
import { ArrowRight, Close } from "@element-plus/icons-vue"; import { ArrowRight, Close } from '@element-plus/icons-vue';
import districtIcon from "../../../assets/MaMap_img/区县弹窗背景@2x.png"; import districtIcon from '../../../assets/MaMap_img/区县弹窗背景@2x.png';
import locationIcon from "../../../assets/MaMap_img/区县icon@2x.png"; import locationIcon from '../../../assets/MaMap_img/区县icon@2x.png';
const props = defineProps({ const props = defineProps({
// 是否显示卡片 // 是否显示卡片
@ -51,7 +48,7 @@ const props = defineProps({
// 标题 // 标题
title: { title: {
type: String, type: String,
default: "", default: '',
}, },
// 数据列表 // 数据列表
dataList: { dataList: {
@ -80,7 +77,7 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["click", "close", "itemClick", "onClick"]); const emit = defineEmits(['click', 'close', 'itemClick', 'onClick']);
// 是否显示卡片（兼容旧版本） // 是否显示卡片（兼容旧版本）
const showCard = computed(() => { const showCard = computed(() => {
@ -89,35 +86,35 @@ const showCard = computed(() => {
return props.visible; return props.visible;
} }
// 否则使用旧版本的类型判断 // 否则使用旧版本的类型判断
return props.type === "second" || props.type === "third"; return props.type === 'second' || props.type === 'third';
}); });
// 获取公路类型文本 // 获取公路类型文本
const getRoadTypeText = (roadType) => { const getRoadTypeText = roadType => {
const roadTypeMap = { const roadTypeMap = {
national: "国省道", national: '国省道',
rural: "农村公路", rural: '农村公路',
}; };
return roadTypeMap[roadType] || roadType; return roadTypeMap[roadType] || roadType;
}; };
// 点击事件（兼容旧版本） // 点击事件（兼容旧版本）
const handleClick = () => { const handleClick = () => {
console.log("centerInfoCard clicked, type:", props.type); console.log('centerInfoCard clicked, type:', props.type);
// 触发 onClick 事件 // 触发 onClick 事件
emit("onClick"); emit('onClick');
// 同时触发旧版本的 click 事件 // 同时触发旧版本的 click 事件
emit("click", props.type); emit('click', props.type);
}; };
// 关闭事件 // 关闭事件
const handleClose = () => { const handleClose = () => {
emit("close"); emit('close');
}; };
// 数据项点击事件 // 数据项点击事件
const handleItemClick = (item) => { const handleItemClick = item => {
emit("itemClick", item); emit('itemClick', item);
}; };
</script> </script>

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

@ -23,6 +23,7 @@
placeholder="请选择" placeholder="请选择"
class="filter-select" class="filter-select"
clearable clearable
@change="handleFilterChange"
> >
<el-option <el-option
v-for="item in regionOptions" v-for="item in regionOptions"
@ -40,6 +41,7 @@
placeholder="请选择" placeholder="请选择"
class="filter-select" class="filter-select"
clearable clearable
@change="handleFilterChange"
> >
<el-option <el-option
v-for="item in typeOptions" v-for="item in typeOptions"
@ -99,17 +101,24 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from 'vue'; import { ref, computed, watch, inject } from 'vue';
import { Close } from '@element-plus/icons-vue'; import { Close } from '@element-plus/icons-vue';
import { regionOptions, typeOptions, controlMeasureOptions } from '../component/index.js'; import { regionOptions, typeOptions, controlMeasureOptions } from '../component/index.js';
import BaseDialog from '../component/baseDialog.vue'; import BaseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request'; import { request } from '@/utils/request';
import { formatDateTime } from '../component/index.js';
0;
// 注入日期范围
// const dateRange = inject('dateRange', ref([]));
const props = defineProps({ const props = defineProps({
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
dateRange: {
type: Array,
default: () => [],
},
}); });
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']); const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']);
@ -185,6 +194,11 @@ const getControlClass = measure => {
半幅封闭: 'control-half', 半幅封闭: 'control-half',
正常通行: 'control-normal', 正常通行: 'control-normal',
限制通行: 'control-limit', 限制通行: 'control-limit',
限速限车: 'control-limit',
告警阻拦: 'control-limit',
半幅通行: 'control-half',
限速: 'control-limit',
告警阻拦: 'control-limit',
}; };
return classMap[measure] || ''; return classMap[measure] || '';
}; };
@ -219,25 +233,27 @@ const handleFilterChange = () => {
// 获取数据 // 获取数据
const fetchData = async () => { const fetchData = async () => {
try { try {
// 转换管控措施类型 let params = {
let measureType = 0; start: '',
if (filterForm.value.roadConditionType === '全幅封闭') { end: '',
measureType = 1; };
} else if (filterForm.value.roadConditionType === '半幅封闭') { if (props.dateRange && props.dateRange.length === 2) {
measureType = 2; params.start = formatDateTime(props.dateRange[0]);
} else if (filterForm.value.roadConditionType === '限速') { params.end = formatDateTime(props.dateRange[1]);
measureType = 3;
} else if (filterForm.value.roadConditionType === '告警阻拦') {
measureType = 4;
} }
const res = await request({ const res = await request({
url: '/snow-ops-platform/sm-event/dashboard/control-list', url: '/snow-ops-platform/sm-event/dashboard/control-list',
method: 'GET', method: 'GET',
params: { params: {
start: params.start,
end: params.end,
pageNum: currentPage.value, pageNum: currentPage.value,
pageSize: pageSize.value, pageSize: pageSize.value,
measureType: measureType, // measureType: measureType,
districtCode: filterForm.value.district, // 影响区域
roadConditionType: filterForm.value.type, // 类型
processingMeasure: filterForm.value.roadConditionType, // 管控措施
}, },
}); });
@ -246,6 +262,7 @@ const fetchData = async () => {
// 转换数据格式 // 转换数据格式
tableData.value = data.records.map((item, index) => { tableData.value = data.records.map((item, index) => {
return { return {
gl1SjId: item.sjId || '-',
id: currentPage.value * pageSize.value - (pageSize.value - index - 1), id: currentPage.value * pageSize.value - (pageSize.value - index - 1),
district: item.affectedArea || '-', district: item.affectedArea || '-',
routeNo: item.routeNo || '-', routeNo: item.routeNo || '-',
@ -276,6 +293,16 @@ watch(
} }
} }
); );
watch(
() => filterForm.value,
newVal => {
console.log('filterForm.value变化:', newVal);
if (newVal) {
currentPage.value = 1;
fetchData();
}
}
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

38
packages/screen/src/views/RiskWarning/Dialog/confirmDialog.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div <div v-if="visible" class="confirm-dialog-overlay" @click="handleOverlayClick">
v-if="visible"
class="confirm-dialog-overlay"
@click="handleOverlayClick"
>
<div class="confirm-dialog" @click.stop> <div class="confirm-dialog" @click.stop>
<!-- 四个角的装饰 --> <!-- 四个角的装饰 -->
<div class="corner corner-top-left"></div> <div class="corner corner-top-left"></div>
@ -37,7 +33,7 @@
</template> </template>
<script setup> <script setup>
import { Close } from "@element-plus/icons-vue"; import { Close } from '@element-plus/icons-vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -46,34 +42,34 @@ const props = defineProps({
}, },
title: { title: {
type: String, type: String,
default: "提示", default: '提示',
}, },
message: { message: {
type: String, type: String,
default: "", default: '',
}, },
confirmText: { confirmText: {
type: String, type: String,
default: "已拨打", default: '已拨打',
}, },
cancelText: { cancelText: {
type: String, type: String,
default: "未拨打", default: '未拨打',
}, },
}); });
const emit = defineEmits(["update:visible", "confirm", "cancel"]); const emit = defineEmits(['update:visible', 'confirm', 'cancel']);
// 确认 // 确认
const handleConfirm = () => { const handleConfirm = () => {
emit("confirm"); emit('confirm');
emit("update:visible", false); emit('update:visible', false);
}; };
// 取消 // 取消
const handleCancel = () => { const handleCancel = () => {
emit("cancel"); emit('cancel');
emit("update:visible", false); emit('update:visible', false);
}; };
// 点击遮罩关闭 // 点击遮罩关闭
@ -99,11 +95,7 @@ const handleOverlayClick = () => {
.confirm-dialog { .confirm-dialog {
width: 80vw; width: 80vw;
max-width: 300px; max-width: 300px;
background: linear-gradient( background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
135deg,
rgba(20, 50, 90, 0.95) 0%,
rgba(10, 30, 60, 0.98) 100%
);
border: 1px solid rgba(64, 169, 255, 0.3); border: 1px solid rgba(64, 169, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
overflow: hidden; overflow: hidden;
@ -170,11 +162,7 @@ const handleOverlayClick = () => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
background: linear-gradient( background: linear-gradient(90deg, rgba(64, 169, 255, 0.15) 0%, rgba(64, 169, 255, 0.05) 100%);
90deg,
rgba(64, 169, 255, 0.15) 0%,
rgba(64, 169, 255, 0.05) 100%
);
border-bottom: 1px solid rgba(64, 169, 255, 0.2); border-bottom: 1px solid rgba(64, 169, 255, 0.2);
.header-title { .header-title {

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

@ -18,7 +18,13 @@
<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"
:key="item.value" :key="item.value"
@ -29,7 +35,13 @@
</div> </div>
<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.riskLevel" placeholder="请选择" class="filter-select" clearable> <el-select
:teleported="false"
v-model="filterForm.riskLevel"
placeholder="请选择"
class="filter-select"
clearable
>
<el-option <el-option
v-for="item in riskLevelOptions" v-for="item in riskLevelOptions"
:key="item.value" :key="item.value"
@ -63,10 +75,10 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from 'vue';
import { Close } from "@element-plus/icons-vue"; import { Close } from '@element-plus/icons-vue';
import { regionOptions, riskLevelOptions } from "../component/index.js"; import { regionOptions, riskLevelOptions } from '../component/index.js';
import BaseDialog from "../component/baseDialog.vue"; import BaseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -75,12 +87,12 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["update:visible", "close"]); const emit = defineEmits(['update:visible', 'close']);
// 筛选表单 // 筛选表单
const filterForm = ref({ const filterForm = ref({
region: "", region: '',
riskLevel: "", riskLevel: '',
}); });
// 影响区域选项 // 影响区域选项
@ -106,35 +118,35 @@ const tableColumns = ref([
const tableData = ref([ const tableData = ref([
{ {
id: 1, id: 1,
region: "沙坪坝区", region: '沙坪坝区',
stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部", stationName: '沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部',
project: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）", project: '沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）',
peopleCount: 21, peopleCount: 21,
riskLevel: "Ⅳ级", riskLevel: 'Ⅳ级',
}, },
{ {
id: 2, id: 2,
region: "万州区", region: '万州区',
stationName: "万州区项目经理部", stationName: '万州区项目经理部',
project: "万州区公路改造项目", project: '万州区公路改造项目',
peopleCount: 15, peopleCount: 15,
riskLevel: "Ⅲ级", riskLevel: 'Ⅲ级',
}, },
{ {
id: 3, id: 3,
region: "渝中区", region: '渝中区',
stationName: "渝中区桥梁维护项目部", stationName: '渝中区桥梁维护项目部',
project: "渝中区桥梁维护工程", project: '渝中区桥梁维护工程',
peopleCount: 8, peopleCount: 8,
riskLevel: "Ⅱ级", riskLevel: 'Ⅱ级',
}, },
{ {
id: 4, id: 4,
region: "江北区", region: '江北区',
stationName: "江北区道路施工项目部", stationName: '江北区道路施工项目部',
project: "江北区道路施工项目", project: '江北区道路施工项目',
peopleCount: 32, peopleCount: 32,
riskLevel: "Ⅰ级", riskLevel: 'Ⅰ级',
}, },
]); ]);
@ -162,43 +174,43 @@ const visiblePages = computed(() => {
}); });
// 获取风险等级样式类 // 获取风险等级样式类
const getRiskClass = (level) => { const getRiskClass = level => {
const classMap = { const classMap = {
"Ⅰ级": "risk-level-1", Ⅰ级: 'risk-level-1',
"Ⅱ级": "risk-level-2", Ⅱ级: 'risk-level-2',
"Ⅲ级": "risk-level-3", Ⅲ级: 'risk-level-3',
"Ⅳ级": "risk-level-4", Ⅳ级: 'risk-level-4',
}; };
return classMap[level] || ""; return classMap[level] || '';
}; };
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 分页操作 // 分页操作
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 = () => { const fetchData = () => {
console.log("获取第", currentPage.value, "页数据"); console.log('获取第', currentPage.value, '页数据');
// 实际项目中调用API获取数据 // 实际项目中调用API获取数据
}; };
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal) { if (newVal) {
currentPage.value = 1; currentPage.value = 1;
fetchData(); fetchData();

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

@ -18,7 +18,8 @@
<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="请选择"
popper-class="custom-select-popper" popper-class="custom-select-popper"
@ -36,7 +37,8 @@
</div> </div>
<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.type" v-model="filterForm.type"
placeholder="请选择" placeholder="请选择"
class="filter-select" class="filter-select"
@ -56,10 +58,10 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from 'vue';
import { Close } from "@element-plus/icons-vue"; import { Close } from '@element-plus/icons-vue';
import { regionOptions, typeOptions } from "../component/index.js"; import { regionOptions, typeOptions } from '../component/index.js';
import BaseDialog from "../component/baseDialog.vue"; import BaseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -68,12 +70,12 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["update:visible", "close"]); const emit = defineEmits(['update:visible', 'close']);
// 筛选表单 // 筛选表单
const filterForm = ref({ const filterForm = ref({
region: "", region: '',
type: "", type: '',
}); });
// 影响区域选项 // 影响区域选项
@ -87,52 +89,52 @@ const tableHeight = ref(300);
// 表格列配置 // 表格列配置
const tableColumns = ref([ const tableColumns = ref([
{ prop: "id", label: "序号", width: "60px" }, { prop: 'id', label: '序号', width: '60px' },
{ prop: "district", label: "区县/镇街", width: "120px" }, { prop: 'district', label: '区县/镇街', width: '120px' },
{ prop: "name", label: "姓名", width: "80px" }, { prop: 'name', label: '姓名', width: '80px' },
{ prop: "phone", label: "电话", width: "120px" }, { prop: 'phone', label: '电话', width: '120px' },
{ prop: "type", label: "类型", width: "120px" }, { prop: 'type', label: '类型', width: '120px' },
{ prop: "role", label: "角色", width: "120px" }, { prop: 'role', label: '角色', width: '120px' },
{ prop: "dispatchTime", label: "调度时间", width: "160px" }, { prop: 'dispatchTime', label: '调度时间', width: '160px' },
]); ]);
// 表格数据 // 表格数据
const tableData = ref([ const tableData = ref([
{ {
id: 1, id: 1,
district: "柏梓镇", district: '柏梓镇',
name: "赵海浪", name: '赵海浪',
phone: "18623520681", phone: '18623520681',
type: "交通主管部门", type: '交通主管部门',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
dispatchTime: "2025-08-11 04:53:42", dispatchTime: '2025-08-11 04:53:42',
}, },
{ {
id: 2, id: 2,
district: "柏梓镇", district: '柏梓镇',
name: "赵海浪", name: '赵海浪',
phone: "18623520681", phone: '18623520681',
type: "公路机构", type: '公路机构',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
dispatchTime: "2025-08-11 04:53:42", dispatchTime: '2025-08-11 04:53:42',
}, },
{ {
id: 3, id: 3,
district: "万州区", district: '万州区',
name: "王鑫", name: '王鑫',
phone: "18623520682", phone: '18623520682',
type: "养护站", type: '养护站',
role: "站长", role: '站长',
dispatchTime: "2025-08-10 14:30:00", dispatchTime: '2025-08-10 14:30:00',
}, },
{ {
id: 4, id: 4,
district: "沙坪坝区", district: '沙坪坝区',
name: "李华", name: '李华',
phone: "18623520683", phone: '18623520683',
type: "护路员", type: '护路员',
role: "一般人员", role: '一般人员',
dispatchTime: "2025-08-09 09:15:30", dispatchTime: '2025-08-09 09:15:30',
}, },
]); ]);
@ -161,36 +163,36 @@ const visiblePages = computed(() => {
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 分页操作 // 分页操作
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 = () => { const fetchData = () => {
console.log("获取第", currentPage.value, "页数据"); console.log('获取第', currentPage.value, '页数据');
// 实际项目中调用API获取数据 // 实际项目中调用API获取数据
}; };
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal) { if (newVal) {
currentPage.value = 1; currentPage.value = 1;
fetchData(); fetchData();
} }
}, }
); );
</script> </script>

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

@ -18,7 +18,8 @@
<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="请选择"
class="filter-select" class="filter-select"
@ -37,18 +38,16 @@
<!-- 调度数列插槽 --> <!-- 调度数列插槽 -->
<template #dispatchCount="{ row }"> <template #dispatchCount="{ row }">
<span class="dispatch-count" @click="handleDispatchClick(row)">{{ <span class="dispatch-count" @click="handleDispatchClick(row)">{{ row.dispatchCount }}</span>
row.dispatchCount
}}</span>
</template> </template>
</base-dialog> </base-dialog>
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from 'vue';
import { Close } from "@element-plus/icons-vue"; import { Close } from '@element-plus/icons-vue';
import { regionOptions } from "../component/index.js"; import { regionOptions } from '../component/index.js';
import BaseDialog from "../component/baseDialog.vue"; import BaseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -58,14 +57,14 @@ const props = defineProps({
}); });
const emit = defineEmits({ const emit = defineEmits({
"update:visible": (value) => typeof value === "boolean", 'update:visible': value => typeof value === 'boolean',
close: () => true, close: () => true,
dispatchClick: (item) => item !== undefined, dispatchClick: item => item !== undefined,
}); });
// 筛选表单 // 筛选表单
const filterForm = ref({ const filterForm = ref({
region: "", region: '',
}); });
// 影响区域选项 // 影响区域选项
@ -76,37 +75,37 @@ 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: '' },
]); ]);
// 表格数据 // 表格数据
const tableData = ref([ const tableData = ref([
{ {
id: 1, id: 1,
region: "重庆市", region: '重庆市',
dispatchCount: 1, dispatchCount: 1,
lastDispatchTime: "2025-08-11 04:53:42", lastDispatchTime: '2025-08-11 04:53:42',
}, },
{ {
id: 2, id: 2,
region: "万州区", region: '万州区',
dispatchCount: 1, dispatchCount: 1,
lastDispatchTime: "2025-08-11 04:53:42", lastDispatchTime: '2025-08-11 04:53:42',
}, },
{ {
id: 3, id: 3,
region: "沙坪坝区", region: '沙坪坝区',
dispatchCount: 3, dispatchCount: 3,
lastDispatchTime: "2025-08-10 16:20:15", lastDispatchTime: '2025-08-10 16:20:15',
}, },
{ {
id: 4, id: 4,
region: "渝中区", region: '渝中区',
dispatchCount: 2, dispatchCount: 2,
lastDispatchTime: "2025-08-09 11:45:30", lastDispatchTime: '2025-08-09 11:45:30',
}, },
]); ]);
@ -135,43 +134,43 @@ const visiblePages = computed(() => {
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 点击调度数 // 点击调度数
const handleDispatchClick = (item) => { const handleDispatchClick = item => {
emit("dispatchClick", item); emit('dispatchClick', 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 fetchData = () => { const fetchData = () => {
console.log("获取第", currentPage.value, "页数据"); console.log('获取第', currentPage.value, '页数据');
// 实际项目中调用API获取数据 // 实际项目中调用API获取数据
}; };
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal) { if (newVal) {
currentPage.value = 1; currentPage.value = 1;
// 重置筛选表单 // 重置筛选表单
filterForm.value.region = ""; filterForm.value.region = '';
fetchData(); fetchData();
} }
}, }
); );
</script> </script>

625
packages/screen/src/views/RiskWarning/Dialog/eventDetailDialog.vue
View File

@ -21,118 +21,132 @@
<span class="title-icon">▍</span> <span class="title-icon">▍</span>
事件基本信息 事件基本信息
</div> </div>
<div class="info-grid"> <!-- 事件类型标签 -->
<div class="info-row"> <div class="event-type-tag">{{ eventInfo.eventType }}</div>
<div class="info-item"> <!-- 三列信息网格 -->
<span class="info-label">事件编号：</span> <div class="info-grid-three">
<span class="info-value">{{ eventInfo.eventNo }}</span> <div class="info-item-three">
</div> <span class="info-dot">○</span>
<div class="info-item"> <div>
<span class="info-label">发生时间：</span> <div style="margin-bottom: 5px" class="info-label">路况类型</div>
<span class="info-value">{{ eventInfo.occurTime }}</span> <div class="info-value">{{ eventInfo.roadConditionType }}</div>
</div> </div>
</div> </div>
<div class="info-row"> <div class="info-item-three">
<div class="info-item"> <span class="info-dot">○</span>
<span class="info-label">事件类型：</span> <div>
<span class="info-value">{{ eventInfo.eventType }}</span> <div style="margin-bottom: 5px" class="info-label">是否阻断</div>
</div> <div class="info-value">{{ eventInfo.isBlocked }}</div>
<div class="info-item">
<span class="info-label">事件等级：</span>
<span
class="info-value level-tag"
:class="eventInfo.levelClass"
>{{ eventInfo.eventLevel }}</span
>
</div> </div>
</div> </div>
<div class="info-row"> <div class="info-item-three">
<div class="info-item"> <span class="info-dot">○</span>
<span class="info-label">所属区域：</span> <div>
<span class="info-value">{{ eventInfo.region }}</span> <div style="margin-bottom: 5px" class="info-label">上报区县</div>
</div> <div class="info-value">{{ eventInfo.reportCounty }}</div>
<div class="info-item">
<span class="info-label">上报人：</span>
<span class="info-value">{{ eventInfo.reporter }}</span>
</div> </div>
</div> </div>
<div class="info-row"> <div class="info-item-three">
<div class="info-item"> <span class="info-dot">○</span>
<span class="info-label">详细地址：</span> <div>
<span class="info-value">{{ eventInfo.address }}</span> <div style="margin-bottom: 5px" class="info-label">阻断点小地名</div>
</div> <div class="info-value">{{ eventInfo.blockLocation }}</div>
<div class="info-item">
<span class="info-label">上报时间：</span>
<span class="info-value">{{ eventInfo.reportTime }}</span>
</div> </div>
</div> </div>
<div class="info-row"> <div class="info-item-three">
<div class="info-item full-width"> <span class="info-dot">○</span>
<span class="info-label">事件描述：</span> <div>
<span class="info-value">{{ eventInfo.description }}</span> <div style="margin-bottom: 5px" class="info-label">线路编码</div>
<div class="info-value">{{ eventInfo.routeCode }}</div>
</div>
</div>
<div class="info-item-three">
<span class="info-dot">○</span>
<div>
<div style="margin-bottom: 5px" class="info-label">处理措施</div>
<div class="info-value">{{ eventInfo.handleMeasure }}</div>
</div>
</div>
<div class="info-item-three full-row">
<span class="info-dot">○</span>
<div>
<div style="margin-bottom: 5px" class="info-label">路况位置</div>
<div class="info-value">{{ eventInfo.roadPosition }}</div>
</div>
</div>
<div class="info-item-three">
<span class="info-dot">○</span>
<div>
<div style="margin-bottom: 5px" class="info-label">起点桩号-止点桩号</div>
<div class="info-value">{{ eventInfo.stakeRange }}</div>
</div>
</div>
<div class="info-item-three">
<span class="info-dot">○</span>
<div>
<div style="margin-bottom: 5px" class="info-label">发现时间</div>
<div class="info-value">{{ eventInfo.discoverTime }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 处置反馈信息 --> <!-- 填报动态信息 -->
<div class="section"> <div class="section">
<div class="section-title"> <div class="section-title">
<span class="title-icon">▍</span> <span class="title-icon">▍</span>
处置反馈信息 填报动态信息
</div> </div>
<div class="feedback-list"> <div class="timeline-list">
<div v-for="(item, index) in feedbackList" :key="item.id" class="timeline-item">
<div class="timeline-left">
<div class="timeline-badge" :class="{ 'first-report': item.isFirst }">
{{ item.reportType }}
</div>
<div class="timeline-number">{{ index + 1 }}</div>
</div>
<div class="timeline-content">
<div class="timeline-row">
<span class="timeline-label">报送时间：</span>
<span class="timeline-value">{{ item.reportTime }}</span>
</div>
<div class="timeline-row">
<span class="timeline-label">处置措施：</span>
<span class="timeline-value highlight">{{ item.handleMeasure }}</span>
</div>
<div class="timeline-row two-col">
<div class="col-item">
<span class="timeline-label">预计恢复时间：</span>
<span class="timeline-value">{{ item.estimatedRecoverTime }}</span>
</div>
<div class="col-item">
<span class="timeline-label">实际恢复时间：</span>
<span class="timeline-value">{{ item.actualRecoverTime }}</span>
</div>
</div>
<div class="timeline-row two-col">
<div class="col-item">
<span class="timeline-label">填报人：</span>
<span class="timeline-value">{{ item.reporter }}</span>
</div>
<div class="col-item">
<span class="timeline-label">联系电话：</span>
<span class="timeline-value">{{ item.contactPhone }}</span>
</div>
</div>
<div class="timeline-row">
<span class="timeline-label">现场情况描述：</span>
<span class="timeline-value highlight">{{ item.sceneDesc }}</span>
</div>
<div class="timeline-images" v-if="item.images && item.images.length > 0">
<div <div
v-for="(item, index) in feedbackList" v-for="(img, imgIndex) in item.images"
:key="item.id" :key="imgIndex"
class="feedback-item" class="timeline-image"
@click="previewImage(img)"
> >
<div class="feedback-header"> <img :src="img" alt="现场图片" />
<div class="feedback-num">{{ index + 1 }}</div>
<div class="feedback-info">
<div class="feedback-row">
<span class="feedback-label">处置时间：</span>
<span class="feedback-value">{{ item.handleTime }}</span>
</div> </div>
<div class="feedback-row">
<span class="feedback-label">处置人：</span>
<span class="feedback-value">{{ item.handler }}</span>
</div>
</div>
<div class="feedback-image" @click="previewImage(item.image)">
<img :src="item.image" alt="处置图片" />
</div>
</div>
<div class="feedback-detail">
<div class="detail-row">
<span class="detail-label">预计开始时间：</span>
<span class="detail-value">{{
item.estimatedStartTime
}}</span>
<span class="detail-label" style="margin-left: 40px"
>预计结束时间：</span
>
<span class="detail-value">{{ item.estimatedEndTime }}</span>
</div>
<div class="detail-row">
<span class="detail-label">实际开始时间：</span>
<span class="detail-value">{{ item.actualStartTime }}</span>
<span class="detail-label" style="margin-left: 40px"
>实际结束时间：</span
>
<span class="detail-value">{{ item.actualEndTime }}</span>
</div>
<div class="detail-row">
<span class="detail-label">处置人：</span>
<span class="detail-value">{{ item.handlerName }}</span>
<span class="detail-label" style="margin-left: 40px"
>联系电话：</span
>
<span class="detail-value">{{ item.contactPhone }}</span>
</div>
<div class="detail-row">
<span class="detail-label">处置情况描述：</span>
<span class="detail-value">{{ item.handleDesc }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -143,11 +157,7 @@
</base-dialog> </base-dialog>
<!-- 图片预览弹窗 --> <!-- 图片预览弹窗 -->
<div <div v-if="previewVisible" class="image-preview-overlay" @click="closePreview">
v-if="previewVisible"
class="image-preview-overlay"
@click="closePreview"
>
<div class="image-preview-container" @click.stop> <div class="image-preview-container" @click.stop>
<img :src="previewImageUrl" alt="预览" /> <img :src="previewImageUrl" alt="预览" />
<div class="close-preview-btn" @click="closePreview"> <div class="close-preview-btn" @click="closePreview">
@ -158,9 +168,11 @@
</template> </template>
<script setup> <script setup>
import { ref, watch } from "vue"; import { ref, watch, onMounted } from 'vue';
import { Close } from "@element-plus/icons-vue"; import { Close } from '@element-plus/icons-vue';
import baseDialog from "../component/baseDialog.vue"; import baseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request';
import { formatDateTime } from '../component/index.js';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -172,91 +184,163 @@ const props = defineProps({
default: () => ({}), default: () => ({}),
}, },
}); });
onMounted(() => {
const emit = defineEmits(["update:visible", "close"]); console.log('props.eventData', props.eventData);
});
const emit = defineEmits(['update:visible', 'close']);
// 事件基本信息 // 事件基本信息
const eventInfo = ref({ const eventInfo = ref({
eventNo: "202310120001", eventType: '',
occurTime: "2023-10-12 14:30:00", roadConditionType: '',
eventType: "路面塌陷", isBlocked: '',
eventLevel: "一般事件", reportCounty: '',
levelClass: "level-normal", blockLocation: '',
region: "万州区", routeCode: '',
reporter: "张三", handleMeasure: '',
address: "万州区太白路123号附近", roadPosition: '',
reportTime: "2023-10-12 14:35:00", stakeRange: '',
description: discoverTime: '',
"路面出现塌陷，面积约2平方米，深度约0.5米，已设置警示标志，请尽快处理。",
}); });
// 处置反馈信息 // 填报动态信息
const feedbackList = ref([ const feedbackList = ref([]);
{
id: 1, // 获取事件详情
handleTime: "2023-10-12 14:45:26", const fetchEventDetail = async () => {
handler: "李四", try {
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=图片1", const gl1SjId = props.eventData?.gl1SjId;
estimatedStartTime: "2023-10-12 14:30:00", if (!gl1SjId) {
estimatedEndTime: "2023-10-12 16:30:00", console.warn('gl1SjId 不存在');
actualStartTime: "2023-10-12 14:45:00", return;
actualEndTime: "2023-10-12 16:20:00", }
handlerName: "王五",
contactPhone: "13800138000", const res = await request({
handleDesc: "已到达现场，正在设置围挡，准备进行修复作业。", url: '/snow-ops-platform/sm-event/detail-by-sjid',
method: 'GET',
params: {
sjid: gl1SjId + '',
// sjid: '00092c5f0c054c67b0ad00071dd94630',
}, },
{ });
id: 2,
handleTime: "2023-10-12 16:20:45", if (res && res.code === '00000') {
handler: "李四", // 映射事件基本信息 - 根据API文档字段映射
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=图片2", const data = res.data || {};
estimatedStartTime: "2023-10-12 14:30:00", eventInfo.value = {
estimatedEndTime: "2023-10-12 16:30:00", // eventType: 事件类型
actualStartTime: "2023-10-12 14:45:00", eventType: data.eventType || '-',
actualEndTime: "2023-10-12 16:20:00", // eventLevel: 事件等级 -> 路况类型
handlerName: "王五", roadConditionType: data.eventLevel || '-',
contactPhone: "13800138000", // isBlocked: 根据eventDesc或其他字段判断是否阻断
handleDesc: "修复作业已完成，路面已恢复平整，围挡已拆除，交通恢复正常。", isBlocked: data.eventDesc?.includes('阻断') ? '是' : '否',
}, // district: 所属区域 -> 上报区县
]); reportCounty: data.district || '-',
// detailAddress: 详细地址 -> 阻断点小地名
blockLocation: data.detailAddress || '-',
// eventNo: 事件编号 -> 线路编码
routeCode: data.eventNo || '-',
// eventDesc: 事件描述 -> 处理措施
handleMeasure: data.eventDesc || '-',
// detailAddress: 详细地址 -> 路况位置
roadPosition: data.detailAddress || '-',
// stakeRange 需要单独处理
stakeRange: formatStakeRangeFromData(data),
// occurTime: 发生时间 -> 发现时间
discoverTime: formatDateTime(data.occurTime) || '-',
};
console.log('eventInfo', eventInfo.value);
// 映射填报动态信息 - 根据API文档字段映射
if (data.handleList && Array.isArray(data.handleList)) {
feedbackList.value = data.handleList.map((item, index) => ({
id: index + 1,
isFirst: index === 0,
reportType: index === 0 ? '首报' : '续报',
// disposeTime: 处置时间
reportTime: formatDateTime(item.disposeTime) || '-',
// handleMeasure: 需要额外字段，暂用disposeDesc替代
handleMeasure: item.disposeDesc?.substring(0, 10) || '-',
// expectStartTime: 预计开始时间
estimatedRecoverTime: formatDateTime(item.expectStartTime) || '-',
// actualStartTime: 实际开始时间
actualRecoverTime: formatDateTime(item.actualStartTime) || '-',
// disposer: 处置人
reporter: item.disposer || '-',
// contactPhone: 联系电话
contactPhone: item.contactPhone || '-',
// disposeDesc: 处置情况描述
sceneDesc: item.disposeDesc || '-',
}));
} else {
feedbackList.value = [];
}
}
} catch (error) {
console.error('获取事件详情失败:', error);
}
};
// 格式化路况位置
const formatRoadPosition = data => {
const parts = [];
if (data.gl1Qxmc) parts.push(data.gl1Qxmc);
if (data.gl1Zddxdm) parts.push(data.gl1Zddxdm);
if (data.gl1Lxbh) parts.push(data.gl1Lxbh);
return parts.length > 0 ? parts.join('') : '-';
};
// 格式化桩号范围（旧版字段）
const formatStakeRange = data => {
const start = data.gl1Qdzh || '';
const end = data.gl1Zdzh || '';
if (start && end) return `${start}-${end}`;
if (start) return start;
if (end) return end;
return '-';
};
// 格式化桩号范围（API文档字段）- API文档中暂无桩号字段，从detailAddress中尝试解析或返回'-'
const formatStakeRangeFromData = data => {
// API文档中未提供桩号字段，暂从detailAddress解析或返回'-'
// 如果后续API提供了桩号字段，可以在这里更新
return '-';
};
// 图片预览 // 图片预览
const previewVisible = ref(false); const previewVisible = ref(false);
const previewImageUrl = ref(""); const previewImageUrl = ref('');
const previewImage = (url) => { const previewImage = url => {
previewImageUrl.value = url; previewImageUrl.value = url;
previewVisible.value = true; previewVisible.value = true;
}; };
const closePreview = () => { const closePreview = () => {
previewVisible.value = false; previewVisible.value = false;
previewImageUrl.value = ""; previewImageUrl.value = '';
}; };
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 点击遮罩关闭已由base-dialog组件处理 // 监听eventData变化
// 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal && props.eventData) { if (newVal) {
// 如果有传入数据，更新显示 fetchEventDetail();
Object.assign(eventInfo.value, props.eventData); }
} }
},
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper{ .content-wrapper {
height: 500px; width: 700px;
height: 70vh;
overflow-y: auto; overflow-y: auto;
// 自定义滚动条样式 // 自定义滚动条样式
@ -270,7 +354,7 @@ watch(
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #142E49; background: #142e49;
border-radius: 3px; border-radius: 3px;
&:hover { &:hover {
@ -280,8 +364,9 @@ watch(
// Firefox 滚动条样式 // Firefox 滚动条样式
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #142E49 rgba(20, 46, 73, 0.3); scrollbar-color: #142e49 rgba(20, 46, 73, 0.3);
} }
// 区块 // 区块
.section { .section {
margin-bottom: 24px; margin-bottom: 24px;
@ -306,132 +391,165 @@ watch(
} }
} }
// 信息网格 // 事件类型标签
.info-grid { .event-type-tag {
background-color: rgba(30, 70, 120, 0.3); display: inline-block;
border-radius: 8px; background-color: #40a9ff;
padding: 16px 20px; color: #fff;
padding: 4px 16px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
} }
.info-row { // 三列信息网格
.info-grid-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 20px;
}
.info-item-three {
display: flex; display: flex;
margin-bottom: 12px; // align-items: center;
gap: 8px;
.info-dot {
color: #40a9ff;
font-size: 10px;
flex-shrink: 0;
}
.info-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
flex-shrink: 0;
}
.info-value {
font-size: 13px;
color: #40a9ff;
word-break: break-all;
}
}
// 时间轴列表
.timeline-list {
position: relative;
padding-left: 20px;
// &::before {
// content: '';
// position: absolute;
// left: 34px;
// top: 0;
// bottom: 0;
// width: 2px;
// background: linear-gradient(to bottom, #40a9ff, rgba(64, 169, 255, 0.3));
// }
}
.timeline-item {
display: flex;
margin-bottom: 20px;
position: relative;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.info-item { .timeline-left {
flex: 1;
display: flex; display: flex;
align-items: flex-start; // flex-direction: column;
// align-items: center;
&.full-width { margin-right: 16px;
flex: none; position: relative;
width: 100%; z-index: 1;
}
} }
.info-label { .timeline-badge {
font-size: 13px; background-color: #52c41a;
color: rgba(255, 255, 255, 0.6); color: #fff;
white-space: nowrap;
min-width: 70px;
}
.info-value {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
flex: 1;
word-break: break-all;
&.level-tag {
display: inline-block;
padding: 2px 10px;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
font-weight: 500; white-space: nowrap;
height: 28px;
&.level-urgent { width: 50px;
background-color: rgba(255, 77, 79, 0.2);
color: #ff4d4f;
border: 1px solid rgba(255, 77, 79, 0.4);
}
&.level-normal {
background-color: rgba(64, 169, 255, 0.2);
color: #40a9ff;
border: 1px solid rgba(64, 169, 255, 0.4);
}
&.level-low {
background-color: rgba(82, 196, 26, 0.2);
color: #52c41a;
border: 1px solid rgba(82, 196, 26, 0.4);
}
}
}
// 反馈列表
.feedback-list {
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: 16px; justify-content: center;
margin-bottom: 10px; margin-right: 10px;
&.first-report {
background-color: #40a9ff;
}
} }
.feedback-item { .timeline-number {
background-color: rgba(30, 70, 120, 0.3); width: 28px;
border-radius: 8px; height: 28px;
padding: 16px 20px;
border-left: 3px solid #40a9ff;
}
.feedback-header {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
}
.feedback-num {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%); background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 12px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
margin-right: 12px; border: 2px solid rgba(255, 255, 255, 0.2);
flex-shrink: 0;
} }
.feedback-info { .timeline-content {
flex: 1; flex: 1;
background-color: rgba(30, 70, 120, 0.3);
border-radius: 8px;
padding: 12px 16px;
margin-left: 8px;
} }
.feedback-row { .timeline-row {
margin-bottom: 6px; margin-bottom: 8px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&.two-col {
display: flex;
gap: 40px;
.col-item {
display: flex;
align-items: center;
gap: 8px;
}
}
} }
.feedback-label { .timeline-label {
font-size: 13px; font-size: 13px;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
} }
.feedback-value { .timeline-value {
font-size: 13px; font-size: 13px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
&.highlight {
color: #40a9ff;
}
} }
.feedback-image { .timeline-images {
display: flex;
gap: 8px;
margin-top: 8px;
}
.timeline-image {
width: 80px; width: 80px;
height: 60px; height: 60px;
border-radius: 4px; border-radius: 4px;
@ -452,31 +570,6 @@ watch(
} }
} }
// 反馈详情
.feedback-detail {
padding-left: 36px;
padding-top: 12px;
border-top: 1px solid rgba(64, 169, 255, 0.1);
}
.detail-row {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.detail-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.detail-value {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
}
// 图片预览 // 图片预览
.image-preview-overlay { .image-preview-overlay {
position: fixed; position: fixed;

1
packages/screen/src/views/RiskWarning/Dialog/hazardPointSituationDialog.vue
View File

@ -296,6 +296,7 @@ watch(
<style lang="scss" scoped> <style lang="scss" scoped>
.hazard-info-panel { .hazard-info-panel {
height: 500px; height: 500px;
width: 600px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
overflow-y: auto; overflow-y: auto;
// 自定义滚动条样式 // 自定义滚动条样式

254
packages/screen/src/views/RiskWarning/Dialog/impactPointDetailDialog.vue
View File

@ -32,11 +32,9 @@
<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 <span class="info-value level-tag" :class="basicInfo.levelClass">
class="info-value level-tag" {{ basicInfo.level }}
:class="basicInfo.levelClass" </span>
>{{ basicInfo.level }}</span
>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-dot"></span> <span class="info-dot"></span>
@ -53,11 +51,9 @@
<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 <span class="info-value" :class="getStatusClass(basicInfo.riskDesc)">
class="info-value" {{ basicInfo.riskDesc }}
:class="getStatusClass(basicInfo.riskDesc)" </span>
>{{ basicInfo.riskDesc }}</span
>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-dot"></span> <span class="info-dot"></span>
@ -93,11 +89,7 @@
填报动态信息 填报动态信息
</div> </div>
<div class="timeline-list"> <div class="timeline-list">
<div <div v-for="(record, index) in dynamicRecords" :key="index" class="timeline-item">
v-for="(record, index) in dynamicRecords"
:key="index"
class="timeline-item"
>
<div class="timeline-marker">{{ index + 1 }}</div> <div class="timeline-marker">{{ index + 1 }}</div>
<div class="timeline-content"> <div class="timeline-content">
<div class="timeline-header"> <div class="timeline-header">
@ -128,8 +120,9 @@
<span <span
class="detail-value" class="detail-value"
:class="record.hasProblem ? 'status-yes' : 'status-no'" :class="record.hasProblem ? 'status-yes' : 'status-no'"
>{{ record.hasProblem ? "是" : "否" }}</span
> >
{{ record.hasProblem ? '是' : '否' }}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -141,11 +134,7 @@
</base-dialog> </base-dialog>
<!-- 图片预览弹窗 --> <!-- 图片预览弹窗 -->
<div <div v-if="previewVisible" class="image-preview-overlay" @click="closePreview">
v-if="previewVisible"
class="image-preview-overlay"
@click="closePreview"
>
<div class="image-preview-container" @click.stop> <div class="image-preview-container" @click.stop>
<img :src="previewImageUrl" alt="预览" /> <img :src="previewImageUrl" alt="预览" />
<div class="close-preview-btn" @click="closePreview"> <div class="close-preview-btn" @click="closePreview">
@ -156,10 +145,10 @@
</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';
import baseDialog from "../component/baseDialog.vue"; import baseDialog from '../component/baseDialog.vue';
import { request } from "@/utils/request"; import { request } from '@/utils/request';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -176,18 +165,17 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["update:visible", "close"]); const emit = defineEmits(['update:visible', 'close']);
// 基本信息 // 基本信息
const basicInfo = ref({ const basicInfo = ref({
district: "合川区", district: '合川区',
level: "一般隐患", level: '一般隐患',
levelClass: "level-normal", levelClass: 'level-normal',
roadCode: "G348", roadCode: 'G348',
location: "丁吴路(K116+656至K116+739)", location: '丁吴路(K116+656至K116+739)',
riskDesc: "未回应", riskDesc: '未回应',
discoverTime: discoverTime: '立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备',
"立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备",
}); });
// 照片列表 // 照片列表
@ -196,61 +184,61 @@ const photoList = ref([]);
// 动态记录 // 动态记录
const dynamicRecords = ref([ const dynamicRecords = ref([
{ {
type: "首报", type: '首报',
patrolTime: "2026-03-28 14:30:00", patrolTime: '2026-03-28 14:30:00',
patrolPerson: "刘伟", patrolPerson: '刘伟',
description: "设置警示标识，半幅通行", description: '设置警示标识，半幅通行',
hasProblem: true, hasProblem: true,
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场", image: 'https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场',
}, },
{ {
type: "续报", type: '续报',
patrolTime: "2026-03-28 14:30:00", patrolTime: '2026-03-28 14:30:00',
patrolPerson: "刘伟", patrolPerson: '刘伟',
description: "设置警示标识，半幅通行", description: '设置警示标识，半幅通行',
hasProblem: false, hasProblem: false,
image: null, image: null,
}, },
]); ]);
// 状态样式 // 状态样式
const getStatusClass = (status) => { const getStatusClass = status => {
if (status === "未回应") return "status-unresponse"; if (status === '未回应') return 'status-unresponse';
if (status === "已回应") return "status-response"; if (status === '已回应') return 'status-response';
return ""; return '';
}; };
// 图片预览 // 图片预览
const previewVisible = ref(false); const previewVisible = ref(false);
const previewImageUrl = ref(""); const previewImageUrl = ref('');
const previewImage = (url) => { const previewImage = url => {
previewImageUrl.value = url; previewImageUrl.value = url;
previewVisible.value = true; previewVisible.value = true;
}; };
const closePreview = () => { const closePreview = () => {
previewVisible.value = false; previewVisible.value = false;
previewImageUrl.value = ""; previewImageUrl.value = '';
}; };
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
const leveltext = (level) => { const leveltext = level => {
if (level.includes("一") || level.includes("1")) return "一类"; if (level.includes('一') || level.includes('1')) return '一类';
if (level.includes("二") || level.includes("2")) return "二类"; if (level.includes('二') || level.includes('2')) return '二类';
if (level.includes("三") || level.includes("3")) return "三类"; if (level.includes('三') || level.includes('3')) return '三类';
if (level.includes("四") || level.includes("4")) return "四类"; if (level.includes('四') || level.includes('4')) return '四类';
if (level.includes("五") || level.includes("5")) return "五类"; if (level.includes('五') || level.includes('5')) return '五类';
if (level.includes("9")) return "未评定"; if (level.includes('9')) return '未评定';
return "未评定"; return '未评定';
}; };
// 点击遮罩关闭已由base-dialog组件处理 // 点击遮罩关闭已由base-dialog组件处理
// 处理影响点类型数据 // 处理影响点类型数据
const getAffectedObjectTypeId = (data) => { const getAffectedObjectTypeId = data => {
let pointType = props.item.pointType; let pointType = props.item.pointType;
if (!data) { if (!data) {
basicInfo.value = {}; basicInfo.value = {};
@ -258,19 +246,19 @@ const getAffectedObjectTypeId = (data) => {
dynamicRecords.value = []; dynamicRecords.value = [];
return; return;
} }
if (pointType === "桥梁") { if (pointType === '桥梁') {
// 更新基本信息 - 根据数据库字段映射 // 更新基本信息 - 根据数据库字段映射
basicInfo.value = { basicInfo.value = {
district: data.GL1_QXMC || "-", // 区县名称 district: data.GL1_QXMC || '-', // 区县名称
level: leveltext(data.GL1_JSZKPJDJ) || "未评定", // 技术状况评级等级 level: leveltext(data.GL1_JSZKPJDJ) || '未评定', // 技术状况评级等级
levelClass: levelClass:
data.GL1_JSZKPJDJ === "一类" || data.GL1_JSZKPJDJ === "二类" data.GL1_JSZKPJDJ === '一类' || data.GL1_JSZKPJDJ === '二类'
? "level-normal" ? 'level-normal'
: "level-serious", // 一二类为一般，三四五类为重大 : 'level-serious', // 一二类为一般，三四五类为重大
roadCode: data.GL1_LXBH || "-", // 路线编号 roadCode: data.GL1_LXBH || '-', // 路线编号
location: data.GL1_QLMC || "-", // 桥梁名称作为位置 location: data.GL1_QLMC || '-', // 桥梁名称作为位置
riskDesc: data.GL1_DQBH || "-", // 当前病害 riskDesc: data.GL1_DQBH || '-', // 当前病害
discoverTime: data.GL1_JSZKPDRQ || "-", // 技术状况评定日期 discoverTime: data.GL1_JSZKPDRQ || '-', // 技术状况评定日期
}; };
// 更新照片列表 - 使用桥梁照片字段 // 更新照片列表 - 使用桥梁照片字段
const photos = []; const photos = [];
@ -291,29 +279,29 @@ const getAffectedObjectTypeId = (data) => {
// 更新动态记录 - 桥梁信息没有巡查记录，使用基础信息展示 // 更新动态记录 - 桥梁信息没有巡查记录，使用基础信息展示
dynamicRecords.value = [ dynamicRecords.value = [
{ {
type: "桥梁信息", type: '桥梁信息',
patrolTime: data.GL1_JCTCRQ || "-", // 建成通车日期 patrolTime: data.GL1_JCTCRQ || '-', // 建成通车日期
patrolPerson: data.GL1_QLZRR || "-", // 桥梁责任人 patrolPerson: data.GL1_QLZRR || '-', // 桥梁责任人
description: `桥梁全长：${data.GL1_QLQC || "-"}m，跨径总长：${data.GL1_KJZC || "-"}m，上部结构：${data.GL1_SBJGLXMC || "-"}`, description: `桥梁全长：${data.GL1_QLQC || '-'}m，跨径总长：${data.GL1_KJZC || '-'}m，上部结构：${data.GL1_SBJGLXMC || '-'}`,
hasProblem: false, hasProblem: false,
image: null, image: null,
}, },
]; ];
} else if (pointType === "边坡") { } else if (pointType === '边坡') {
// 边坡数据处理 // 边坡数据处理
const data = resData || {}; const data = resData || {};
// 更新基本信息 - 根据边坡接口返回数据映射 // 更新基本信息 - 根据边坡接口返回数据映射
basicInfo.value = { basicInfo.value = {
district: data.GL1_QXMC || "-", // 区县名称 district: data.GL1_QXMC || '-', // 区县名称
level: leveltext(data.GL1_FXDJ) || "未评定", // 风险等级 level: leveltext(data.GL1_FXDJ) || '未评定', // 风险等级
levelClass: levelClass:
data.GL1_FXDJ?.includes("一级") || data.GL1_FXDJ?.includes("二级") data.GL1_FXDJ?.includes('一级') || data.GL1_FXDJ?.includes('二级')
? "level-normal" ? 'level-normal'
: "level-serious", // 一二级为一般，三四五级为重大 : 'level-serious', // 一二级为一般，三四五级为重大
roadCode: data.GL1_LXBM || "-", // 路线编码 roadCode: data.GL1_LXBM || '-', // 路线编码
location: data.GL1_BPGC || "-", // 边坡概况 location: data.GL1_BPGC || '-', // 边坡概况
riskDesc: data.GL1_JCSSSZ || "-", // 监测设施设置 riskDesc: data.GL1_JCSSSZ || '-', // 监测设施设置
discoverTime: data.GL1_ZRRXM || "-", // 责任人姓名 discoverTime: data.GL1_ZRRXM || '-', // 责任人姓名
}; };
// 更新照片列表 - 边坡照片字段 // 更新照片列表 - 边坡照片字段
@ -326,27 +314,25 @@ const getAffectedObjectTypeId = (data) => {
// 更新动态记录 - 边坡信息展示 // 更新动态记录 - 边坡信息展示
dynamicRecords.value = [ dynamicRecords.value = [
{ {
type: "边坡信息", type: '边坡信息',
patrolTime: data.GL1_BPPGC || "-", // 边坡坡高 patrolTime: data.GL1_BPPGC || '-', // 边坡坡高
patrolPerson: data.GL1_ZRRXM || "-", // 责任人姓名 patrolPerson: data.GL1_ZRRXM || '-', // 责任人姓名
description: `起点桩号：${data.GL1_QDZH || "-"}，终点桩号：${data.GL1_ZDZH || "-"}，起点经度：${data.GL1_QDJD || "-"}，起点纬度：${data.GL1_QDWD || "-"}，监测设施：${data.GL1_JCSSSZ || "-"}，综合措施：${data.GL1_ZHXS || "-"}`, description: `起点桩号：${data.GL1_QDZH || '-'}，终点桩号：${data.GL1_ZDZH || '-'}，起点经度：${data.GL1_QDJD || '-'}，起点纬度：${data.GL1_QDWD || '-'}，监测设施：${data.GL1_JCSSSZ || '-'}，综合措施：${data.GL1_ZHXS || '-'}`,
hasProblem: data.GL1_JCSSSZ !== "无" && data.GL1_JCSSSZ !== null, hasProblem: data.GL1_JCSSSZ !== '无' && data.GL1_JCSSSZ !== null,
image: null, image: null,
}, },
]; ];
} else if (pointType === "隧道") { } else if (pointType === '隧道') {
// 更新基本信息 - 根据隧道数据库字段映射 // 更新基本信息 - 根据隧道数据库字段映射
basicInfo.value = { basicInfo.value = {
district: data.GL1_QXMC || "-", // 区县名称 district: data.GL1_QXMC || '-', // 区县名称
level: leveltext(data.GL1_PDDJ) || "未评定", // 评定等级 level: leveltext(data.GL1_PDDJ) || '未评定', // 评定等级
levelClass: levelClass:
data.GL1_PDDJ === "一级" || data.GL1_PDDJ === "二级" data.GL1_PDDJ === '一级' || data.GL1_PDDJ === '二级' ? 'level-normal' : 'level-serious', // 一二级为一般，三四五级为重大
? "level-normal" roadCode: data.GL1_LXBH || '-', // 路线编号
: "level-serious", // 一二级为一般，三四五级为重大 location: data.GL1_SDMC || '-', // 隧道名称作为位置
roadCode: data.GL1_LXBH || "-", // 路线编号 riskDesc: data.GL1_BHMS || '-', // 病害描述
location: data.GL1_SDMC || "-", // 隧道名称作为位置 discoverTime: data.GL1_PDRQ || '-', // 评定日期
riskDesc: data.GL1_BHMS || "-", // 病害描述
discoverTime: data.GL1_PDRQ || "-", // 评定日期
}; };
// 更新照片列表 - 使用隧道照片字段 // 更新照片列表 - 使用隧道照片字段
@ -368,29 +354,27 @@ const getAffectedObjectTypeId = (data) => {
// 更新动态记录 - 隧道信息展示 // 更新动态记录 - 隧道信息展示
dynamicRecords.value = [ dynamicRecords.value = [
{ {
type: "隧道信息", type: '隧道信息',
patrolTime: data.GL1_XCTCSJ || "-", // 修成通车时间 patrolTime: data.GL1_XCTCSJ || '-', // 修成通车时间
patrolPerson: data.GL1_GLDW || "-", // 管理单位 patrolPerson: data.GL1_GLDW || '-', // 管理单位
description: `隧道全长：${data.GL1_SDC || "-"}m，隧道净宽：${data.GL1_SDJK || "-"}m，围岩等级：${data.GL1_WYDJ || "-"}，衬砌类型：${data.GL1_CQLXMC || "-"}`, description: `隧道全长：${data.GL1_SDC || '-'}m，隧道净宽：${data.GL1_SDJK || '-'}m，围岩等级：${data.GL1_WYDJ || '-'}，衬砌类型：${data.GL1_CQLXMC || '-'}`,
hasProblem: false, hasProblem: false,
image: null, image: null,
}, },
]; ];
} else if (pointType === "路段") { } else if (pointType === '路段') {
// 路段数据处理 // 路段数据处理
const data = resData || {}; const data = resData || {};
// 更新基本信息 - 根据路段数据库字段映射 // 更新基本信息 - 根据路段数据库字段映射
basicInfo.value = { basicInfo.value = {
district: data.GL1_QDMC || "-", // 起点名称（区县） district: data.GL1_QDMC || '-', // 起点名称（区县）
level: leveltext(data.GL1_JSDJ) || "未评定", // 技术等级 level: leveltext(data.GL1_JSDJ) || '未评定', // 技术等级
levelClass: levelClass:
data.GL1_JSDJ === "一级" || data.GL1_JSDJ === "二级" data.GL1_JSDJ === '一级' || data.GL1_JSDJ === '二级' ? 'level-normal' : 'level-serious', // 一二级为一般，三四五级为重大
? "level-normal" roadCode: data.GL1_LXBH || '-', // 路线编号
: "level-serious", // 一二级为一般，三四五级为重大 location: `${data.GL1_QDMC || '-'} - ${data.GL1_ZDMC || '-'}`, // 起点到终点
roadCode: data.GL1_LXBH || "-", // 路线编号 riskDesc: data.GL1_TZSJ || '-', // 特征数据/特殊数据
location: `${data.GL1_QDMC || "-"} - ${data.GL1_ZDMC || "-"}`, // 起点到终点 discoverTime: data.GL1_XZDJ || '-', // 行政等级
riskDesc: data.GL1_TZSJ || "-", // 特征数据/特殊数据
discoverTime: data.GL1_XZDJ || "-", // 行政等级
}; };
// 更新照片列表 - 路段一般没有照片 // 更新照片列表 - 路段一般没有照片
@ -399,10 +383,10 @@ const getAffectedObjectTypeId = (data) => {
// 更新动态记录 - 路段信息展示 // 更新动态记录 - 路段信息展示
dynamicRecords.value = [ dynamicRecords.value = [
{ {
type: "路段信息", type: '路段信息',
patrolTime: data.GL1_TZSJ || "-", // 特征数据 patrolTime: data.GL1_TZSJ || '-', // 特征数据
patrolPerson: data.GL1_XZDJ || "-", // 行政等级 patrolPerson: data.GL1_XZDJ || '-', // 行政等级
description: `路段长度：${data.GL1_LDLC || "-"}km，路面宽度：${data.GL1_LMKD || "-"}m，路面类型：${data.GL1_LMLX || "-"}，车道数量：${data.GL1_CDSL || "-"}`, description: `路段长度：${data.GL1_LDLC || '-'}km，路面宽度：${data.GL1_LMKD || '-'}m，路面类型：${data.GL1_LMLX || '-'}，车道数量：${data.GL1_CDSL || '-'}`,
hasProblem: false, hasProblem: false,
image: null, image: null,
}, },
@ -413,52 +397,52 @@ const getAffectedObjectTypeId = (data) => {
// 获取影响点详情数据 // 获取影响点详情数据
const getAffectedObjectDetail = async () => { const getAffectedObjectDetail = async () => {
try { try {
let id = ""; let id = '';
let apiUrl = ""; let apiUrl = '';
const pointType = props.item?.pointType; const pointType = props.item?.pointType;
if (pointType === "桥梁") { if (pointType === '桥梁') {
id = props.item?.rawData?.GL1_ZJ || ""; id = props.item?.rawData?.GL1_ZJ || '';
apiUrl = `/snow-ops-platform/weather-warning/affected-object/bridge/${id}`; apiUrl = `/snow-ops-platform/weather-warning/affected-object/bridge/${id}`;
} else if (pointType === "边坡") { } else if (pointType === '边坡') {
id = props.item?.rawData?.GL1_ID || ""; id = props.item?.rawData?.GL1_ID || '';
apiUrl = `/snow-ops-platform/weather-warning/affected-object/slope/${id}`; apiUrl = `/snow-ops-platform/weather-warning/affected-object/slope/${id}`;
} else if (pointType === "隧道") { } else if (pointType === '隧道') {
id = props.item?.rawData?.GL1_ZJ || ""; id = props.item?.rawData?.GL1_ZJ || '';
apiUrl = `/snow-ops-platform/weather-warning/affected-object/tunnel/${id}`; apiUrl = `/snow-ops-platform/weather-warning/affected-object/tunnel/${id}`;
} else if (pointType === "路段") { } else if (pointType === '路段') {
id = props.item?.rawData?.GL1ZJ || ""; id = props.item?.rawData?.GL1ZJ || '';
apiUrl = `/snow-ops-platform/weather-warning/affected-object/road-section/${id}`; apiUrl = `/snow-ops-platform/weather-warning/affected-object/road-section/${id}`;
} }
if (!id || !apiUrl) { if (!id || !apiUrl) {
console.warn("未找到影响点ID或API地址"); console.warn('未找到影响点ID或API地址');
return; return;
} }
const res = await request({ const res = await request({
url: apiUrl, url: apiUrl,
method: "GET", method: 'GET',
}); });
console.log("影响点详情数据:", res); console.log('影响点详情数据:', res);
if (res.code === "00000") { if (res.code === '00000') {
getAffectedObjectTypeId(res.data || {}); getAffectedObjectTypeId(res.data || {});
} }
} catch (error) { } catch (error) {
console.error("获取影响点详情数据失败:", error); console.error('获取影响点详情数据失败:', error);
} }
}; };
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal) { if (newVal) {
// 当弹窗打开时获取数据 // 当弹窗打开时获取数据
getAffectedObjectDetail(); getAffectedObjectDetail();
} }
}, }
); );
</script> </script>

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

@ -216,7 +216,7 @@ 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';
onMounted(() => {});
const props = defineProps({ const props = defineProps({
visible: { visible: {
type: Boolean, type: Boolean,
@ -386,12 +386,17 @@ const cardTypeVal = ref('路段');
// 根据 cardType 获取对应的表格列配置 // 根据 cardType 获取对应的表格列配置
const getColumnsByType = type => { const getColumnsByType = type => {
const typeMap = { const typeMap = {
0: bridgeColumns, 路段: bridgeColumns,
1: slopeColumns, 桥梁: slopeColumns,
2: tunnelColumns, 隧道: tunnelColumns,
3: projectColumns, 边坡: roadColumns,
4: roadColumns, 项目: projectColumns,
}; };
// { name: '影响路段', count: 0, icon: Icon4, type: '路段' },
// { name: '影响桥梁', count: 0, icon: Icon0, type: '桥梁' },
// { name: '影响隧道', count: 0, icon: Icon2, type: '隧道' },
// { name: '影响边坡', count: 0, icon: Icon1, type: '边坡' },
// { name: '影响项目', count: 0, icon: Icon3, type: '项目' },
return typeMap[type] || bridgeColumns; return typeMap[type] || bridgeColumns;
}; };
@ -413,7 +418,7 @@ const handleClick = (index, item) => {
cardType.value = index + ''; cardType.value = index + '';
cardTypeVal.value = item.type; cardTypeVal.value = item.type;
// 切换表格列配置 // 切换表格列配置
tableColumns.value = getColumnsByType(cardType.value); tableColumns.value = getColumnsByType(item.type);
// 重置分页并获取数据 // 重置分页并获取数据
currentPage.value = 1; currentPage.value = 1;
fetchData(); fetchData();
@ -797,6 +802,7 @@ watch(
pointLevel: '', pointLevel: '',
region: '', region: '',
}; };
tableData.value = [];
cardType.value = '0'; cardType.value = '0';
loadBarChartData(); loadBarChartData();
currentPage.value = 1; currentPage.value = 1;

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

@ -215,7 +215,7 @@ const dialogItems = computed(() => {
}, },
{ {
label: '位置', label: '位置',
value: data.GL1_GLMC , value: data.GL1_GLMC,
}, },
{ {
label: '风险描述', label: '风险描述',

12
packages/screen/src/views/RiskWarning/Dialog/offlineHelpDialog.vue
View File

@ -59,9 +59,6 @@ import baseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request'; import { request } from '@/utils/request';
import { regionOptions } from '../component/index.js'; import { regionOptions } from '../component/index.js';
const props = defineProps({ const props = defineProps({
visible: { visible: {
type: Boolean, type: Boolean,
@ -79,7 +76,6 @@ const filterForm = ref({
// 区县选项（可从接口获取或本地配置） // 区县选项（可从接口获取或本地配置）
const countyOptions = ref(regionOptions); const countyOptions = ref(regionOptions);
// 表格列配置 // 表格列配置
const tableColumns = ref([ const tableColumns = ref([
{ prop: 'id', label: '序号', width: '' }, { prop: 'id', label: '序号', width: '' },
@ -114,18 +110,18 @@ const handleSearch = () => {
}; };
// 分页操作 // 分页操作
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 handleAttachmentClick = (row) => { const handleAttachmentClick = row => {
console.log('点击附件:', row); console.log('点击附件:', row);
// 实际项目中实现附件查看或下载 // 实际项目中实现附件查看或下载
}; };
@ -168,7 +164,7 @@ const fetchData = async () => {
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal) { if (newVal) {
currentPage.value = 1; currentPage.value = 1;
fetchData(); fetchData();

99
packages/screen/src/views/RiskWarning/Dialog/responsePointDetailDialog.vue
View File

@ -31,11 +31,9 @@
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">影响点等级</span> <span class="info-label">影响点等级</span>
<span <span class="info-value level-tag" :class="basicInfo.levelClass">
class="info-value level-tag" {{ basicInfo.level }}
:class="basicInfo.levelClass" </span>
>{{ basicInfo.level }}</span
>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">公路编号</span> <span class="info-label">公路编号</span>
@ -85,11 +83,7 @@
</div> </div>
<div class="patrol-list"> <div class="patrol-list">
<!-- 巡查记录列表 --> <!-- 巡查记录列表 -->
<div <div v-for="(record, index) in patrolRecords" :key="index" class="patrol-record-item">
v-for="(record, index) in patrolRecords"
:key="index"
class="patrol-record-item"
>
<div class="patrol-number">{{ index + 1 }}</div> <div class="patrol-number">{{ index + 1 }}</div>
<div class="patrol-content"> <div class="patrol-content">
<div class="patrol-row"> <div class="patrol-row">
@ -111,11 +105,7 @@
<span class="patrol-value">{{ record.hasIssue }}</span> <span class="patrol-value">{{ record.hasIssue }}</span>
</div> </div>
</div> </div>
<div <div v-if="record.image" class="patrol-image" @click="previewImage(record.image)">
v-if="record.image"
class="patrol-image"
@click="previewImage(record.image)"
>
<img :src="record.image" alt="现场照片" /> <img :src="record.image" alt="现场照片" />
</div> </div>
</div> </div>
@ -126,11 +116,7 @@
</base-dialog> </base-dialog>
<!-- 图片预览弹窗 --> <!-- 图片预览弹窗 -->
<div <div v-if="previewVisible" class="image-preview-overlay" @click="closePreview">
v-if="previewVisible"
class="image-preview-overlay"
@click="closePreview"
>
<div class="image-preview-container" @click.stop> <div class="image-preview-container" @click.stop>
<img :src="previewImageUrl" alt="预览" /> <img :src="previewImageUrl" alt="预览" />
<div class="close-preview-btn" @click="closePreview"> <div class="close-preview-btn" @click="closePreview">
@ -141,9 +127,9 @@
</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';
import baseDialog from "../component/baseDialog.vue"; import baseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -156,75 +142,74 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["update:visible", "close", "viewTrack"]); const emit = defineEmits(['update:visible', 'close', 'viewTrack']);
// 基本信息 // 基本信息
const basicInfo = ref({ const basicInfo = ref({
district: "合川区", district: '合川区',
level: "一般隐患", level: '一般隐患',
levelClass: "level-normal", levelClass: 'level-normal',
roadCode: "G348", roadCode: 'G348',
location: "丁吴路(K116+656至K116+739)", location: '丁吴路(K116+656至K116+739)',
riskDesc: riskDesc:
"泥岩风化严重，受雨水冲刷影响，常有强风化岩体散落于边沟或塌散于路面(路面处落石已清理)，影响道路正常使用。[类型:路内风险点-边坡]", '泥岩风化严重，受雨水冲刷影响，常有强风化岩体散落于边沟或塌散于路面(路面处落石已清理)，影响道路正常使用。[类型:路内风险点-边坡]',
measures: measures: '拟对开裂边坡进行清方处理后，采取挂网喷射混凝土处理，部分路段增设挡土墙',
"拟对开裂边坡进行清方处理后，采取挂网喷射混凝土处理，部分路段增设挡土墙",
}); });
// 照片列表 // 照片列表
const photoList = ref([ const photoList = ref([
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片1", 'https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片1',
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片2", 'https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片2',
]); ]);
// 巡查记录列表 // 巡查记录列表
const patrolRecords = ref([ const patrolRecords = ref([
{ {
time: "2026-03-28 14:30:00", time: '2026-03-28 14:30:00',
person: "刘伟", person: '刘伟',
situation: "现场通行正常、无异常情况发生。", situation: '现场通行正常、无异常情况发生。',
hasIssue: "否", hasIssue: '否',
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场1", image: 'https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场1',
}, },
{ {
time: "2026-03-28 14:30:00", time: '2026-03-28 14:30:00',
person: "刘伟", person: '刘伟',
situation: "现场通行正常、无异常情况发生。", situation: '现场通行正常、无异常情况发生。',
hasIssue: "否", hasIssue: '否',
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场2", image: 'https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场2',
}, },
]); ]);
// 状态样式 // 状态样式
const getStatusClass = (status) => { const getStatusClass = status => {
if (status === "未回应") return "status-unresponse"; if (status === '未回应') return 'status-unresponse';
if (status === "已回应") return "status-response"; if (status === '已回应') return 'status-response';
return ""; return '';
}; };
// 图片预览 // 图片预览
const previewVisible = ref(false); const previewVisible = ref(false);
const previewImageUrl = ref(""); const previewImageUrl = ref('');
const previewImage = (url) => { const previewImage = url => {
previewImageUrl.value = url; previewImageUrl.value = url;
previewVisible.value = true; previewVisible.value = true;
}; };
const closePreview = () => { const closePreview = () => {
previewVisible.value = false; previewVisible.value = false;
previewImageUrl.value = ""; previewImageUrl.value = '';
}; };
// 查看轨迹 // 查看轨迹
const viewTrack = () => { const viewTrack = () => {
emit("viewTrack", patrolRecord.value); emit('viewTrack', patrolRecord.value);
}; };
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 点击遮罩关闭已由base-dialog组件处理 // 点击遮罩关闭已由base-dialog组件处理
@ -232,11 +217,11 @@ const handleClose = () => {
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal && props.pointData) { if (newVal && props.pointData) {
Object.assign(basicInfo.value, props.pointData); Object.assign(basicInfo.value, props.pointData);
} }
}, }
); );
</script> </script>
@ -502,7 +487,7 @@ watch(
position: relative; position: relative;
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 50%; left: 50%;

152
packages/screen/src/views/RiskWarning/Dialog/responsePointInfoDialog.vue
View File

@ -47,12 +47,16 @@
<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" :class="getStatusClass(basicInfo.responseStatus)">{{ basicInfo.responseStatus }}</span> <span class="info-value" :class="getStatusClass(basicInfo.responseStatus)">
{{ basicInfo.responseStatus }}
</span>
</div> </div>
<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" :class="getAuditClass(basicInfo.auditStatus)">{{ basicInfo.auditStatus }}</span> <span class="info-value" :class="getAuditClass(basicInfo.auditStatus)">
{{ basicInfo.auditStatus }}
</span>
</div> </div>
</div> </div>
<div class="info-row"> <div class="info-row">
@ -117,7 +121,11 @@
<div class="detail-row"> <div class="detail-row">
<span class="detail-label">现场情况：</span> <span class="detail-label">现场情况：</span>
<span class="detail-text">{{ patrolRecord.situation }}</span> <span class="detail-text">{{ patrolRecord.situation }}</span>
<div v-if="patrolRecord.image" class="detail-image" @click="previewImage(patrolRecord.image)"> <div
v-if="patrolRecord.image"
class="detail-image"
@click="previewImage(patrolRecord.image)"
>
<img :src="patrolRecord.image" alt="现场照片" /> <img :src="patrolRecord.image" alt="现场照片" />
</div> </div>
</div> </div>
@ -133,9 +141,13 @@
<span class="timeline-type">{{ record.typeName }}：</span> <span class="timeline-type">{{ record.typeName }}：</span>
<span class="timeline-person">{{ record.person }}</span> <span class="timeline-person">{{ record.person }}</span>
<span class="timeline-time">{{ record.time }}</span> <span class="timeline-time">{{ record.time }}</span>
<span v-if="record.status" class="timeline-status" :class="record.statusClass">{{ record.status }}</span> <span v-if="record.status" class="timeline-status" :class="record.statusClass">
{{ record.status }}
</span>
<span v-if="record.target" class="timeline-target"> <span v-if="record.target" class="timeline-target">
到 <span class="target-name">{{ record.target }}</span> {{ record.targetPhone }} 到
<span class="target-name">{{ record.target }}</span>
{{ record.targetPhone }}
</span> </span>
</div> </div>
</div> </div>
@ -157,9 +169,9 @@
</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';
import baseDialog from "../component/baseDialog.vue"; import baseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -172,112 +184,112 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["update:visible", "close", "viewTrack"]); const emit = defineEmits(['update:visible', 'close', 'viewTrack']);
// 基本信息 // 基本信息
const basicInfo = ref({ const basicInfo = ref({
district: "合川区", district: '合川区',
roadCode: "G542", roadCode: 'G542',
riskType: "风险路段", riskType: '风险路段',
riskLocation: "丁吴路(K116+656至K116+739)", riskLocation: '丁吴路(K116+656至K116+739)',
responseStatus: "未回应", responseStatus: '未回应',
auditStatus: "未审核", auditStatus: '未审核',
warningLevel: "红色预警", warningLevel: '红色预警',
stakeRange: "三级治理中心发布发布暴雨红色预警信号", stakeRange: '三级治理中心发布发布暴雨红色预警信号',
discoverTime: "立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备", discoverTime: '立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备',
}); });
// 照片列表 // 照片列表
const photoList = ref([ const photoList = ref([
"https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片1", 'https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片1',
"https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片2", 'https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片2',
"https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片3", 'https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片3',
"https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片4", 'https://via.placeholder.com/100x70/40a9ff/ffffff?text=照片4',
]); ]);
// 巡查记录 // 巡查记录
const patrolRecord = ref({ const patrolRecord = ref({
person: "蒋汉成 18702307964", person: '蒋汉成 18702307964',
time: "2025-10-14 15:43:24", time: '2025-10-14 15:43:24',
situation: "收到暴雨黄色预警信息，开展公路夜间巡查排查，道路滑坡涉灾点，无明显变化", situation: '收到暴雨黄色预警信息，开展公路夜间巡查排查，道路滑坡涉灾点，无明显变化',
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场", image: 'https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场',
}); });
// 动态记录 // 动态记录
const dynamicRecords = ref([ const dynamicRecords = ref([
{ {
type: "dispatch", type: 'dispatch',
typeName: "调度记录", typeName: '调度记录',
person: "蒋汉成", person: '蒋汉成',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "【已接通语音】", status: '【已接通语音】',
statusClass: "status-success", statusClass: 'status-success',
target: "养护站负责人", target: '养护站负责人',
targetPhone: "刘孝万（13609403931）", targetPhone: '刘孝万（13609403931）',
}, },
{ {
type: "warning", type: 'warning',
typeName: "预警记录", typeName: '预警记录',
person: "蒋汉成（18702307964）", person: '蒋汉成（18702307964）',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "审核驳回", status: '审核驳回',
statusClass: "status-reject", statusClass: 'status-reject',
}, },
{ {
type: "warning", type: 'warning',
typeName: "预警记录", typeName: '预警记录',
person: "蒋汉成（18702307964）", person: '蒋汉成（18702307964）',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "审核通过", status: '审核通过',
statusClass: "status-success", statusClass: 'status-success',
}, },
{ {
type: "warning", type: 'warning',
typeName: "预警记录", typeName: '预警记录',
person: "蒋汉成（18702307964）", person: '蒋汉成（18702307964）',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "响应预警", status: '响应预警',
statusClass: "status-success", statusClass: 'status-success',
}, },
]); ]);
// 状态样式 // 状态样式
const getStatusClass = (status) => { const getStatusClass = status => {
if (status === "未回应") return "status-unresponse"; if (status === '未回应') return 'status-unresponse';
if (status === "已回应") return "status-response"; if (status === '已回应') return 'status-response';
return ""; return '';
}; };
const getAuditClass = (status) => { const getAuditClass = status => {
if (status === "未审核") return "status-unaudit"; if (status === '未审核') return 'status-unaudit';
if (status === "审核通过") return "status-pass"; if (status === '审核通过') return 'status-pass';
if (status === "审核驳回") return "status-reject"; if (status === '审核驳回') return 'status-reject';
return ""; return '';
}; };
// 图片预览 // 图片预览
const previewVisible = ref(false); const previewVisible = ref(false);
const previewImageUrl = ref(""); const previewImageUrl = ref('');
const previewImage = (url) => { const previewImage = url => {
previewImageUrl.value = url; previewImageUrl.value = url;
previewVisible.value = true; previewVisible.value = true;
}; };
const closePreview = () => { const closePreview = () => {
previewVisible.value = false; previewVisible.value = false;
previewImageUrl.value = ""; previewImageUrl.value = '';
}; };
// 查看轨迹 // 查看轨迹
const viewTrack = () => { const viewTrack = () => {
emit("viewTrack", patrolRecord.value); emit('viewTrack', patrolRecord.value);
}; };
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 点击遮罩关闭已由base-dialog组件处理 // 点击遮罩关闭已由base-dialog组件处理
@ -285,7 +297,7 @@ const handleClose = () => {
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal && props.pointData) { if (newVal && props.pointData) {
Object.assign(basicInfo.value, props.pointData); Object.assign(basicInfo.value, props.pointData);
} }
@ -294,8 +306,6 @@ watch(
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 区块 // 区块
.section { .section {
margin-bottom: 20px; margin-bottom: 20px;
@ -636,6 +646,4 @@ watch(
color: #fff; color: #fff;
} }
} }
</style> </style>

176
packages/screen/src/views/RiskWarning/Dialog/responseSituationDiaLog.vue
View File

@ -75,7 +75,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from 'vue';
import { import {
Close, Close,
VideoCamera, VideoCamera,
@ -86,8 +86,8 @@ import {
User, User,
OfficeBuilding, OfficeBuilding,
MapLocation, MapLocation,
} from "@element-plus/icons-vue"; } from '@element-plus/icons-vue';
import baseDialog from "../component/baseDialog.vue"; import baseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -97,12 +97,12 @@ const props = defineProps({
allCountyData: { allCountyData: {
type: Object, type: Object,
default: () => ({ default: () => ({
name: "", name: '',
}), }),
}, },
}); });
const emit = defineEmits(["update:visible", "close"]); const emit = defineEmits(['update:visible', 'close']);
// 统计数据 // 统计数据
const stats = ref({ const stats = ref({
@ -113,112 +113,112 @@ const stats = ref({
// 表格列配置 // 表格列配置
const tableColumns = ref([ const tableColumns = ref([
{ prop: "id", label: "序号", width: "" }, { prop: 'id', label: '序号', width: '' },
{ prop: "district", label: "区县/镇街", width: "" }, { prop: 'district', label: '区县/镇街', width: '' },
{ prop: "name", label: "姓名", width: "" }, { prop: 'name', label: '姓名', width: '' },
{ prop: "phone", label: "电话", width: "" }, { prop: 'phone', label: '电话', width: '' },
{ prop: "role", label: "角色", width: "" }, { prop: 'role', label: '角色', width: '' },
{ prop: "position", label: "职务", width: "" }, { prop: 'position', label: '职务', width: '' },
{ prop: "operation", label: "操作", width: "120px", slot: "operation" }, { prop: 'operation', label: '操作', width: '120px', slot: 'operation' },
]); ]);
// 表格数据 // 表格数据
const tableData = ref([ const tableData = ref([
{ {
id: 1, id: 1,
district: "万州区柏梓镇", district: '万州区柏梓镇',
name: "赵海浪", name: '赵海浪',
phone: "1862352068", phone: '1862352068',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 2, id: 2,
district: "万州区柏梓镇", district: '万州区柏梓镇',
name: "赵海浪", name: '赵海浪',
phone: "1862352068", phone: '1862352068',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 3, id: 3,
district: "万州区柏梓镇", district: '万州区柏梓镇',
name: "赵海浪", name: '赵海浪',
phone: "1862352068", phone: '1862352068',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 4, id: 4,
district: "万州区柏梓镇", district: '万州区柏梓镇',
name: "赵海浪", name: '赵海浪',
phone: "1862352068", phone: '1862352068',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 5, id: 5,
district: "万州区李河镇", district: '万州区李河镇',
name: "王建国", name: '王建国',
phone: "1398324567", phone: '1398324567',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 6, id: 6,
district: "万州区李河镇", district: '万州区李河镇',
name: "王建国", name: '王建国',
phone: "1398324567", phone: '1398324567',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 7, id: 7,
district: "万州区李河镇", district: '万州区李河镇',
name: "王建国", name: '王建国',
phone: "1398324567", phone: '1398324567',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 8, id: 8,
district: "万州区李河镇", district: '万州区李河镇',
name: "王建国", name: '王建国',
phone: "1398324567", phone: '1398324567',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 9, id: 9,
district: "万州区分水镇", district: '万州区分水镇',
name: "刘志强", name: '刘志强',
phone: "1387654321", phone: '1387654321',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 10, id: 10,
district: "万州区分水镇", district: '万州区分水镇',
name: "刘志强", name: '刘志强',
phone: "1387654321", phone: '1387654321',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 11, id: 11,
district: "万州区分水镇", district: '万州区分水镇',
name: "刘志强", name: '刘志强',
phone: "1387654321", phone: '1387654321',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
{ {
id: 12, id: 12,
district: "万州区分水镇", district: '万州区分水镇',
name: "刘志强", name: '刘志强',
phone: "1387654321", phone: '1387654321',
role: "一般人员（路长履职）", role: '一般人员（路长履职）',
position: "其他", position: '其他',
}, },
]); ]);
@ -229,49 +229,49 @@ const total = ref(36);
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 分页操作 // 分页操作
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 = () => { const fetchData = () => {
console.log("获取第", currentPage.value, "页数据"); console.log('获取第', currentPage.value, '页数据');
// 实际项目中调用API获取数据 // 实际项目中调用API获取数据
}; };
// 操作按钮 // 操作按钮
const handleView = (item) => { const handleView = item => {
console.log("查看视频:", item); console.log('查看视频:', item);
}; };
const handleVoice = (item) => { const handleVoice = item => {
console.log("语音通话:", item); console.log('语音通话:', item);
}; };
const handleCall = (item) => { const handleCall = item => {
console.log("拨打电话:", item); console.log('拨打电话:', item);
}; };
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal) { if (newVal) {
currentPage.value = 1; currentPage.value = 1;
fetchData(); fetchData();
} }
}, }
); );
</script> </script>
@ -287,11 +287,7 @@ watch(
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: linear-gradient( background: linear-gradient(135deg, rgba(30, 80, 140, 0.6) 0%, rgba(20, 60, 110, 0.8) 100%);
135deg,
rgba(30, 80, 140, 0.6) 0%,
rgba(20, 60, 110, 0.8) 100%
);
border: 1px solid rgba(64, 169, 255, 0.2); border: 1px solid rgba(64, 169, 255, 0.2);
border-radius: 4px; border-radius: 4px;
padding: 10px 12px; padding: 10px 12px;

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

@ -168,7 +168,12 @@
<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,
formatDateTime,
} 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';
@ -203,7 +208,7 @@ const filterForm = ref({
isResponded: '', isResponded: '',
}); });
const cardType = ref('0'); const cardType = ref('路段');
// 统计卡片数据 // 统计卡片数据
const statsCardsData = ref([ const statsCardsData = ref([
@ -246,6 +251,7 @@ const handleClose = () => {
// 点击卡片切换 // 点击卡片切换
const handleClick = type => { const handleClick = type => {
cardType.value = type; cardType.value = type;
fetchData();
}; };
// 顶部卡片数据 // 顶部卡片数据
const loadBarChartData = async () => { const loadBarChartData = async () => {
@ -378,11 +384,11 @@ const fetchData = async () => {
}; };
// 类型映射 // 类型映射
const getTypeLabel = (type) => { const getTypeLabel = type => {
const typeMap = { const typeMap = {
'road-section': '路段', 'road-section': '路段',
'road_section': '路段', road_section: '路段',
'roadSection': '路段', roadSection: '路段',
bridge: '桥梁', bridge: '桥梁',
tunnel: '隧道', tunnel: '隧道',
slope: '边坡', slope: '边坡',
@ -392,7 +398,7 @@ const getTypeLabel = (type) => {
}; };
// 根据风险等级获取样式类 // 根据风险等级获取样式类
const getLevelClass = (riskLevel) => { const getLevelClass = riskLevel => {
if (!riskLevel) return ''; if (!riskLevel) return '';
if (riskLevel.includes('高')) return 'level-serious'; if (riskLevel.includes('高')) return 'level-serious';
if (riskLevel.includes('一般')) return 'level-normal'; if (riskLevel.includes('一般')) return 'level-normal';

220
packages/screen/src/views/RiskWarning/Dialog/riskPointDetailDialog.vue
View File

@ -43,27 +43,21 @@
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">回应状态</span> <span class="info-label">回应状态</span>
<span <span class="info-value" :class="getStatusClass(basicInfo.responseStatus)">
class="info-value" {{ basicInfo.responseStatus }}
:class="getStatusClass(basicInfo.responseStatus)" </span>
>{{ basicInfo.responseStatus }}</span
>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">审核状态</span> <span class="info-label">审核状态</span>
<span <span class="info-value" :class="getAuditClass(basicInfo.auditStatus)">
class="info-value" {{ basicInfo.auditStatus }}
:class="getAuditClass(basicInfo.auditStatus)" </span>
>{{ basicInfo.auditStatus }}</span
>
</div> </div>
</div> </div>
<div class="info-row three-col"> <div class="info-row three-col">
<div class="info-item"> <div class="info-item">
<span class="info-label">预警等级</span> <span class="info-label">预警等级</span>
<span class="info-value level-red">{{ <span class="info-value level-red">{{ basicInfo.warningLevel }}</span>
basicInfo.warningLevel
}}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">起点桩号-止点桩号</span> <span class="info-label">起点桩号-止点桩号</span>
@ -126,9 +120,7 @@
:class="{ 'row-even': index % 2 === 1 }" :class="{ 'row-even': index % 2 === 1 }"
> >
<div class="td" style="width: 30%">{{ item.type }}</div> <div class="td" style="width: 30%">{{ item.type }}</div>
<div class="td" style="width: 40%"> <div class="td" style="width: 40%">{{ item.name }} {{ item.phone }}</div>
{{ item.name }} {{ item.phone }}
</div>
<div class="td" style="width: 30%">{{ item.frequency }}</div> <div class="td" style="width: 30%">{{ item.frequency }}</div>
</div> </div>
</div> </div>
@ -172,25 +164,19 @@
</div> </div>
<!-- 动态记录列表 --> <!-- 动态记录列表 -->
<div <div v-for="(record, index) in dynamicRecords" :key="index" class="timeline-item">
v-for="(record, index) in dynamicRecords"
:key="index"
class="timeline-item"
>
<div class="timeline-marker" :class="record.type"></div> <div class="timeline-marker" :class="record.type"></div>
<div class="timeline-content"> <div class="timeline-content">
<div class="timeline-header"> <div class="timeline-header">
<span class="timeline-type">{{ record.typeName }}：</span> <span class="timeline-type">{{ record.typeName }}：</span>
<span class="timeline-person">{{ record.person }}</span> <span class="timeline-person">{{ record.person }}</span>
<span class="timeline-time">{{ record.time }}</span> <span class="timeline-time">{{ record.time }}</span>
<span <span v-if="record.status" class="timeline-status" :class="record.statusClass">
v-if="record.status" {{ record.status }}
class="timeline-status" </span>
:class="record.statusClass"
>{{ record.status }}</span
>
<span v-if="record.target" class="timeline-target"> <span v-if="record.target" class="timeline-target">
到 <span class="target-name">{{ record.target }}</span> 到
<span class="target-name">{{ record.target }}</span>
{{ record.targetPhone }} {{ record.targetPhone }}
</span> </span>
</div> </div>
@ -202,11 +188,7 @@
</base-dialog> </base-dialog>
<!-- 图片预览弹窗 --> <!-- 图片预览弹窗 -->
<div <div v-if="previewVisible" class="image-preview-overlay" @click="closePreview">
v-if="previewVisible"
class="image-preview-overlay"
@click="closePreview"
>
<div class="image-preview-container" @click.stop> <div class="image-preview-container" @click.stop>
<img :src="previewImageUrl" alt="预览" /> <img :src="previewImageUrl" alt="预览" />
<div class="close-preview-btn" @click="closePreview"> <div class="close-preview-btn" @click="closePreview">
@ -217,9 +199,9 @@
</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';
import baseDialog from "../component/baseDialog.vue"; import baseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -232,150 +214,148 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["update:visible", "close", "viewTrack"]); const emit = defineEmits(['update:visible', 'close', 'viewTrack']);
// 表格列配置 // 表格列配置
const tableColumns = ref([ const tableColumns = ref([
{ label: "责任人类型", width: "30%" }, { label: '责任人类型', width: '30%' },
{ label: "责任人", width: "40%" }, { label: '责任人', width: '40%' },
{ label: "巡查频率", width: "30%" }, { label: '巡查频率', width: '30%' },
]); ]);
// 基本信息 // 基本信息
const basicInfo = ref({ const basicInfo = ref({
district: "合川区", district: '合川区',
roadCode: "G542", roadCode: 'G542',
riskType: "风险路段", riskType: '风险路段',
riskLocation: "丁吴路(K116+656至K116+739)", riskLocation: '丁吴路(K116+656至K116+739)',
responseStatus: "未回应", responseStatus: '未回应',
auditStatus: "未审核", auditStatus: '未审核',
warningLevel: "红色预警", warningLevel: '红色预警',
stakeRange: "三级治理中心发布发布暴雨红色预警信号", stakeRange: '三级治理中心发布发布暴雨红色预警信号',
discoverTime: discoverTime: '立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备',
"立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备", warningContent: '',
warningContent: "",
}); });
// 照片列表 // 照片列表
const photoList = ref([ const photoList = ref([
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片1", 'https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片1',
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片2", 'https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片2',
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片3", 'https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片3',
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片4", 'https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片4',
]); ]);
// 三级包保责任人 // 三级包保责任人
const responsibleList = ref([ const responsibleList = ref([
{ {
type: "交通主管部门负责人", type: '交通主管部门负责人',
name: "胡雷", name: '胡雷',
phone: "18983923577", phone: '18983923577',
frequency: "半年巡查一次", frequency: '半年巡查一次',
}, },
{ {
type: "公路机构负责人", type: '公路机构负责人',
name: "刘孝万", name: '刘孝万',
phone: "13609403931", phone: '13609403931',
frequency: "每月巡查一次", frequency: '每月巡查一次',
}, },
{ {
type: "养护站负责人", type: '养护站负责人',
name: "彭应成", name: '彭应成',
phone: "18323031454", phone: '18323031454',
frequency: "每周巡查一次", frequency: '每周巡查一次',
}, },
{ {
type: "护路员", type: '护路员',
name: "蒋汉成", name: '蒋汉成',
phone: "1870230796", phone: '1870230796',
frequency: "每周巡查两次", frequency: '每周巡查两次',
}, },
]); ]);
// 巡查记录 // 巡查记录
const patrolRecord = ref({ const patrolRecord = ref({
person: "蒋汉成 18702307964", person: '蒋汉成 18702307964',
time: "2025-10-14 15:43:24", time: '2025-10-14 15:43:24',
situation: situation: '收到暴雨黄色预警信息，开展公路夜间巡查排查，道路滑坡涉灾点，无明显变化',
"收到暴雨黄色预警信息，开展公路夜间巡查排查，道路滑坡涉灾点，无明显变化", image: 'https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场',
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场",
}); });
// 动态记录 // 动态记录
const dynamicRecords = ref([ const dynamicRecords = ref([
{ {
type: "dispatch", type: 'dispatch',
typeName: "调度记录", typeName: '调度记录',
person: "蒋汉成", person: '蒋汉成',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "【已接通语音】", status: '【已接通语音】',
statusClass: "status-success", statusClass: 'status-success',
target: "养护站负责人", target: '养护站负责人',
targetPhone: "刘孝万（13609403931）", targetPhone: '刘孝万（13609403931）',
}, },
{ {
type: "warning", type: 'warning',
typeName: "预警记录", typeName: '预警记录',
person: "蒋汉成（18702307964）", person: '蒋汉成（18702307964）',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "审核驳回", status: '审核驳回',
statusClass: "status-reject", statusClass: 'status-reject',
}, },
{ {
type: "warning", type: 'warning',
typeName: "预警记录", typeName: '预警记录',
person: "蒋汉成（18702307964）", person: '蒋汉成（18702307964）',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "审核通过", status: '审核通过',
statusClass: "status-success", statusClass: 'status-success',
}, },
{ {
type: "warning", type: 'warning',
typeName: "预警记录", typeName: '预警记录',
person: "蒋汉成（18702307964）", person: '蒋汉成（18702307964）',
time: "2025-10-13 15:43:24", time: '2025-10-13 15:43:24',
status: "响应预警", status: '响应预警',
statusClass: "status-success", statusClass: 'status-success',
}, },
]); ]);
// 状态样式 // 状态样式
const getStatusClass = (status) => { const getStatusClass = status => {
if (status === "未回应") return "status-unresponse"; if (status === '未回应') return 'status-unresponse';
if (status === "已回应") return "status-response"; if (status === '已回应') return 'status-response';
return ""; return '';
}; };
const getAuditClass = (status) => { const getAuditClass = status => {
if (status === "未审核") return "status-unaudit"; if (status === '未审核') return 'status-unaudit';
if (status === "审核通过") return "status-pass"; if (status === '审核通过') return 'status-pass';
if (status === "审核驳回") return "status-reject"; if (status === '审核驳回') return 'status-reject';
return ""; return '';
}; };
// 图片预览 // 图片预览
const previewVisible = ref(false); const previewVisible = ref(false);
const previewImageUrl = ref(""); const previewImageUrl = ref('');
const previewImage = (url) => { const previewImage = url => {
previewImageUrl.value = url; previewImageUrl.value = url;
previewVisible.value = true; previewVisible.value = true;
}; };
const closePreview = () => { const closePreview = () => {
previewVisible.value = false; previewVisible.value = false;
previewImageUrl.value = ""; previewImageUrl.value = '';
}; };
// 查看轨迹 // 查看轨迹
const viewTrack = () => { const viewTrack = () => {
emit("viewTrack", patrolRecord.value); emit('viewTrack', patrolRecord.value);
}; };
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 点击遮罩关闭已由base-dialog组件处理 // 点击遮罩关闭已由base-dialog组件处理
@ -383,11 +363,11 @@ const handleClose = () => {
// 监听visible变化 // 监听visible变化
watch( watch(
() => props.visible, () => props.visible,
(newVal) => { newVal => {
if (newVal && props.riskData) { if (newVal && props.riskData) {
Object.assign(basicInfo.value, props.riskData); Object.assign(basicInfo.value, props.riskData);
} }
}, }
); );
</script> </script>
@ -580,7 +560,7 @@ watch(
position: relative; position: relative;
&::after { &::after {
content: ""; content: '';
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 50%; left: 50%;

20
packages/screen/src/views/RiskWarning/Dialog/tongnanCenterCardDialog.vue
View File

@ -35,8 +35,8 @@
</template> </template>
<script setup> <script setup>
import { computed } from "vue"; import { computed } from 'vue';
import { ArrowRight, Location } from "@element-plus/icons-vue"; import { ArrowRight, Location } from '@element-plus/icons-vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -45,11 +45,11 @@ const props = defineProps({
}, },
value: { value: {
type: [String, Number], type: [String, Number],
default: "", default: '',
}, },
roadCount: { roadCount: {
type: [String, Number], type: [String, Number],
default: "128", default: '128',
}, },
zIndex: { zIndex: {
type: Number, type: Number,
@ -57,11 +57,11 @@ const props = defineProps({
}, },
width: { width: {
type: String, type: String,
default: "200px", default: '200px',
}, },
}); });
const emit = defineEmits(["update:visible", "close", "detail"]); const emit = defineEmits(['update:visible', 'close', 'detail']);
const dialogStyle = computed(() => ({ const dialogStyle = computed(() => ({
width: props.width, width: props.width,
@ -69,13 +69,13 @@ const dialogStyle = computed(() => ({
// 关闭对话框 // 关闭对话框
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
// 点击详情 // 点击详情
const handleDetail = () => { const handleDetail = () => {
emit("detail"); emit('detail');
}; };
</script> </script>
@ -98,7 +98,7 @@ const handleDetail = () => {
.center-card-dialog { .center-card-dialog {
position: relative; position: relative;
background-image: url("../../../assets/MaMap_img/区县弹窗背景@2x.png"); background-image: url('../../../assets/MaMap_img/区县弹窗背景@2x.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
min-width: vw(200); min-width: vw(200);

122
packages/screen/src/views/RiskWarning/Dialog/tunnelInfoDialog.vue
View File

@ -36,8 +36,8 @@
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits } from "vue"; import { defineProps, defineEmits } from 'vue';
import baseDialog from "../component/baseDialog.vue"; import baseDialog from '../component/baseDialog.vue';
const props = defineProps({ const props = defineProps({
visible: { visible: {
@ -47,20 +47,20 @@ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: () => ({ default: () => ({
title: "项目信息", title: '项目信息',
items: [ items: [
{ label: "项目名称", value: "蔺市隧道右线" }, { label: '项目名称', value: '蔺市隧道右线' },
{ label: "编号", value: "G212线" }, { label: '编号', value: 'G212线' },
{ label: "所属区县", value: "涪陵" }, { label: '所属区县', value: '涪陵' },
{ label: "隧道长度", value: "1782(米)" }, { label: '隧道长度', value: '1782(米)' },
{ label: "路线编号", value: "G50351" }, { label: '路线编号', value: 'G50351' },
{ label: "路线名称", value: "石柱-重庆" }, { label: '路线名称', value: '石柱-重庆' },
{ label: "建成时间", value: "2023年" }, { label: '建成时间', value: '2023年' },
{ label: "入口桩号", value: "159.079" }, { label: '入口桩号', value: '159.079' },
{ label: "隧道净宽", value: "22(米)" }, { label: '隧道净宽', value: '22(米)' },
{ label: "隧道净高", value: "5(米)" }, { label: '隧道净高', value: '5(米)' },
{ label: "长度分类", value: "长隧道" }, { label: '长度分类', value: '长隧道' },
{ label: "评定等级", value: "2类" }, { label: '评定等级', value: '2类' },
], ],
}), }),
}, },
@ -68,69 +68,69 @@ const props = defineProps({
// 边坡信息数据 // 边坡信息数据
const slopeData = { const slopeData = {
title: "边坡信息", title: '边坡信息',
items: [ items: [
{ label: "边坡坡长", value: "0.1(km)" }, { label: '边坡坡长', value: '0.1(km)' },
{ label: "边坡最大高度", value: "46(m)" }, { label: '边坡最大高度', value: '46(m)' },
{ label: "边坡构成", value: "土石混合边坡 (坡高>=25m)" }, { label: '边坡构成', value: '土石混合边坡 (坡高>=25m)' },
{ label: "风险等级", value: "三级 (一般)" }, { label: '风险等级', value: '三级 (一般)' },
{ label: "变形形式", value: "框架梁" }, { label: '变形形式', value: '框架梁' },
{ label: "监测设施设置", value: "无" }, { label: '监测设施设置', value: '无' },
{ label: "起点桩号", value: "1447.7" }, { label: '起点桩号', value: '1447.7' },
{ label: "止点桩号", value: "1447.8" }, { label: '止点桩号', value: '1447.8' },
], ],
}; };
// 隧道信息数据 // 隧道信息数据
const tunnelData = { const tunnelData = {
title: "隧道信息", title: '隧道信息',
items: [ items: [
{ label: "隧道名称", value: "蔺市隧道右线" }, { label: '隧道名称', value: '蔺市隧道右线' },
{ label: "编号", value: "G212 线" }, { label: '编号', value: 'G212 线' },
{ label: "所属区县", value: "涪陵" }, { label: '所属区县', value: '涪陵' },
{ label: "隧道长度", value: "1782(米)" }, { label: '隧道长度', value: '1782(米)' },
{ label: "路线编号", value: "G50351" }, { label: '路线编号', value: 'G50351' },
{ label: "路线名称", value: "石柱 - 重庆" }, { label: '路线名称', value: '石柱 - 重庆' },
{ label: "建成时间", value: "2023 年" }, { label: '建成时间', value: '2023 年' },
{ label: "入口桩号", value: "159.079" }, { label: '入口桩号', value: '159.079' },
{ label: "隧道净宽", value: "22(米)" }, { label: '隧道净宽', value: '22(米)' },
{ label: "隧道净高", value: "5(米)" }, { label: '隧道净高', value: '5(米)' },
{ label: "长度分类", value: "长隧道" }, { label: '长度分类', value: '长隧道' },
{ label: "评定等级", value: "2 类" }, { label: '评定等级', value: '2 类' },
], ],
}; };
// 桥梁信息数据 // 桥梁信息数据
const bridgeData = { const bridgeData = {
title: "桥梁信息", title: '桥梁信息',
items: [ items: [
{ label: "桥梁名称", value: "蔺市隧道右线" }, { label: '桥梁名称', value: '蔺市隧道右线' },
{ label: "编号", value: "K212 线" }, { label: '编号', value: 'K212 线' },
{ label: "所属区县", value: "涪陵" }, { label: '所属区县', value: '涪陵' },
{ label: "桥梁长度", value: "46(米)" }, { label: '桥梁长度', value: '46(米)' },
{ label: "路线编号", value: "G50351" }, { label: '路线编号', value: 'G50351' },
{ label: "路线名称", value: "银川 - 重庆" }, { label: '路线名称', value: '银川 - 重庆' },
{ label: "建成时间", value: "2013" }, { label: '建成时间', value: '2013' },
{ label: "中心桩号", value: "1278.994" }, { label: '中心桩号', value: '1278.994' },
{ label: "桥梁长度", value: "46 米" }, { label: '桥梁长度', value: '46 米' },
{ label: "跨径总长", value: "40 米" }, { label: '跨径总长', value: '40 米' },
{ label: "跨径分类", value: "长隧道" }, { label: '跨径分类', value: '长隧道' },
{ label: "技术状况", value: "一类" }, { label: '技术状况', value: '一类' },
], ],
}; };
// 抢险队伍数据 // 抢险队伍数据
const rescueTeamData = { const rescueTeamData = {
title: "抢险队伍", title: '抢险队伍',
items: [ items: [
{ label: "队伍名称", value: "重庆公路应急抢险指挥及物资储备中心" }, { label: '队伍名称', value: '重庆公路应急抢险指挥及物资储备中心' },
{ label: "防范状态", value: "已出动" }, { label: '防范状态', value: '已出动' },
{ label: "人数", value: "50" }, { label: '人数', value: '50' },
{ label: "联系人", value: "18602981928" }, { label: '联系人', value: '18602981928' },
{ label: "地址", value: "重庆市江津区双福工业园区赵坪路 157 号" }, { label: '地址', value: '重庆市江津区双福工业园区赵坪路 157 号' },
{ label: "物资装备", value: "应急物资:8100 件;应急装备:33 台" }, { label: '物资装备', value: '应急物资:8100 件;应急装备:33 台' },
], ],
imgs: ["", "", "", "", ""], imgs: ['', '', '', '', ''],
}; };
defineExpose({ defineExpose({
@ -140,11 +140,11 @@ defineExpose({
rescueTeamData, rescueTeamData,
}); });
const emit = defineEmits(["update:visible", "close"]); const emit = defineEmits(['update:visible', 'close']);
const handleClose = () => { const handleClose = () => {
emit("update:visible", false); emit('update:visible', false);
emit("close"); emit('close');
}; };
</script> </script>

2
packages/screen/src/views/RiskWarning/bottom.vue
View File

@ -231,9 +231,11 @@ const handleClick = (item, index) => {
} }
activeIndex.value = index; activeIndex.value = index;
if (item.label !== '路段') {
emit('changeActiveIndex', { emit('changeActiveIndex', {
...item, ...item,
}); });
}
}; };
// 点击隐患点项 // 点击隐患点项

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

@ -1,4 +1,5 @@
<template> <template>
<!-- 检查URL参数中是否有Map=dev，如果有，则使用本地地图数据，否则使用阿里云地图数据 -->
<div class="chongqing-map-container"> <div class="chongqing-map-container">
<div ref="mapContainer" class="map-container"></div> <div ref="mapContainer" class="map-container"></div>
<div v-if="loading" class="loading-overlay"> <div v-if="loading" class="loading-overlay">
@ -9,13 +10,6 @@
<span class="error-text">{{ error }}</span> <span class="error-text">{{ error }}</span>
<button class="retry-btn" @click="loadMapData">重试</button> <button class="retry-btn" @click="loadMapData">重试</button>
</div> </div>
<!-- <TongnanCenterCardDialog
ref="tongnanCenterCardDialog"
:visible.sync="visible"
:value="value"
:z-index="zIndex"
:width="width"
></TongnanCenterCardDialog> -->
<mapInfoDialog <mapInfoDialog
v-model:visible="mapInfoDialogVisible" v-model:visible="mapInfoDialogVisible"
:type="mapInfoDialogType" :type="mapInfoDialogType"
@ -33,7 +27,6 @@
<hazardPointSituationDialog <hazardPointSituationDialog
v-model:visible="hazardPointSituationDialogVisible" v-model:visible="hazardPointSituationDialogVisible"
:data="{}" :data="{}"
:visible="true"
@close="closeHazardPointSituationDialog" @close="closeHazardPointSituationDialog"
/> />
</div> </div>
@ -43,7 +36,6 @@
import { ref, onMounted, onUnmounted, watch, defineExpose, h, render } from 'vue'; import { ref, onMounted, onUnmounted, watch, defineExpose, h, render } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { request } from '@/utils/request'; import { request } from '@/utils/request';
import TongnanCenterCardDialog from '../Dialog/tongnanCenterCardDialog.vue';
import projectIcon from '../../../assets/MaMap_img/项目@2x.png'; import projectIcon from '../../../assets/MaMap_img/项目@2x.png';
import bridgeIcon from '../../../assets/MaMap_img/桥梁icon@2x.png'; import bridgeIcon from '../../../assets/MaMap_img/桥梁icon@2x.png';
@ -66,6 +58,7 @@ import tunnelLineIcon from '../../../assets/MaMap_img/线路icon定位@2x.png';
import mapInfoDialog from '../Dialog/mapInfoDialog.vue'; import mapInfoDialog from '../Dialog/mapInfoDialog.vue';
import centerInfoCard from '../Dialog/centerInfoCard.vue'; import centerInfoCard from '../Dialog/centerInfoCard.vue';
import hazardPointSituationDialog from '../Dialog/hazardPointSituationDialog.vue'; import hazardPointSituationDialog from '../Dialog/hazardPointSituationDialog.vue';
import I from '../../../../dist/cesium/Workers/upsampleVerticesFromCesium3DTilesTerrain';
const mapContainer = ref(null); const mapContainer = ref(null);
const loading = ref(false); const loading = ref(false);
@ -97,7 +90,7 @@ watch(
() => props.roadItem, () => props.roadItem,
async (newVal, oldVal) => { async (newVal, oldVal) => {
if (newVal !== oldVal) { if (newVal !== oldVal) {
await getAffectedRoadSectionData(); await getAffectedRoadSectionData(false);
} }
}, },
{ immediate: true } { immediate: true }
@ -117,10 +110,6 @@ const emit = defineEmits([
const selectedDistrict = ref(null); const selectedDistrict = ref(null);
let selectedLayer = null; let selectedLayer = null;
// 隧道信息弹窗
const tunnelDialogVisible = ref(false);
const tunnelDialogData = ref({});
// 地图信息弹窗 // 地图信息弹窗
const mapInfoDialogVisible = ref(false); const mapInfoDialogVisible = ref(false);
const mapInfoDialogType = ref('project'); const mapInfoDialogType = ref('project');
@ -181,6 +170,9 @@ const showCountyCardsOnMap = dataList => {
// 遍历数据列表，为每个区县创建卡片 // 遍历数据列表，为每个区县创建卡片
dataList.forEach(item => { dataList.forEach(item => {
// if (j.countyName === item.countyName) {
// item = j;
// }
const countyName = item.countyName || item.name; const countyName = item.countyName || item.name;
if (!countyName) return; if (!countyName) return;
@ -203,7 +195,6 @@ const showCountyCardsOnMap = dataList => {
// 创建一个容器元素用于挂载 Vue 组件 // 创建一个容器元素用于挂载 Vue 组件
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'county-card-wrapper'; container.className = 'county-card-wrapper';
console.log(item);
// 使用 Vue 的 h 函数创建组件虚拟节点 // 使用 Vue 的 h 函数创建组件虚拟节点
const vnode = h(centerInfoCard, { const vnode = h(centerInfoCard, {
visible: true, visible: true,
@ -233,11 +224,11 @@ const showCountyCardsOnMap = dataList => {
const marker = window.L.marker(center, { const marker = window.L.marker(center, {
icon: customIcon, icon: customIcon,
interactive: true, interactive: true,
zIndexOffset: 2000, // 提升区县卡片层级，确保在最上层
}); });
// 添加点击事件到 marker // 添加点击事件到 marker
marker.on('click', () => { marker.on('click', () => {
console.log('centerInfoCard clicked, county:', countyName);
// 调用处理函数 // 调用处理函数
handleCenterCardItemClick(item); handleCenterCardItemClick(item);
// 移动地图到该位置 // 移动地图到该位置
@ -279,9 +270,21 @@ const openCenterCard = data => {
centerCardDataList.value = data.dataList || []; centerCardDataList.value = data.dataList || [];
centerCardTitle.value = data.title || '调度统计'; centerCardTitle.value = data.title || '调度统计';
centerCardVisible.value = true; centerCardVisible.value = true;
let affectedItems = [];
// 遍历数据列表，只有影响区域的区县才添加到受影响列表中
data.dataList.forEach(item => {
if (item.countyName && (item.countyName.includes('渝北') || item.countyName.includes('江北'))) {
item.countyName = '两江新区';
}
affectedCountyData.value.sortedList.forEach(j => {
if (item.countyName.includes(j.name)) {
affectedItems.push(item);
}
});
});
// 在地图上显示区县卡片 // 在地图上显示区县卡片
showCountyCardsOnMap(data.dataList); showCountyCardsOnMap(affectedItems);
}; };
// 关闭中心信息卡片弹窗 // 关闭中心信息卡片弹窗
@ -354,10 +357,26 @@ const getAffectedCountyData = async () => {
console.log('区县预警统计:', warningStats); console.log('区县预警统计:', warningStats);
affectedCountyData.value = warningStats; affectedCountyData.value = warningStats;
// getAffectedProjectData(); getAffectedProjectData(true);
// getAffectedTunnelData(); getAffectedTunnelData(true);
// getAffectedBridgeData(); getAffectedBridgeData(true);
// getAffectedRoadSectionData(); for (let index = 0; index < 5; index++) {
console.log(index);
if (index == 0) {
props.roadItem.label = '高风险路段';
} else if (index == 1) {
props.roadItem.label = '较高风险路段';
} else if (index == 2) {
props.roadItem.label = '中风险路段';
} else if (index == 3) {
props.roadItem.label = '低风险路段';
} else if (index == 4) {
props.roadItem.label = '';
}
if (props.roadItem.label) {
getAffectedRoadSectionData(true);
}
}
// getEmergencyForceData(); // getEmergencyForceData();
@ -370,7 +389,7 @@ const getAffectedCountyData = async () => {
const affectedBridgeData = ref([]); const affectedBridgeData = ref([]);
// 获取受影响桥梁数据 // 获取受影响桥梁数据
const getAffectedBridgeData = async () => { const getAffectedBridgeData = async flag => {
try { try {
const timeParams = getTimeParams(); const timeParams = getTimeParams();
const res = await request({ const res = await request({
@ -380,14 +399,19 @@ const getAffectedBridgeData = async () => {
}); });
if (res.data) { if (res.data) {
res.data.forEach(item => { res.data.forEach(item => {
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
item.COUNTY = '两江新区';
}
affectedCountyData.value.sortedList.forEach(j => {
// 判断是否是影响区域
if (flag && item.GL1_QXMC && j.name && item.GL1_QXMC.includes(j.name)) {
item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD]; item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD];
// if (
// Number(item.GL1_JSZKPJDM) > 3 ||
// item.GL1_AKJFLLX == '大桥' ||
// item.GL1_AKJFLLX == '特大桥'
// ) {
// }
affectedBridgeData.value.push(item); affectedBridgeData.value.push(item);
} else if (!flag) {
item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD];
affectedBridgeData.value.push(item);
}
});
}); });
} }
console.log('受影响桥梁数据:', affectedBridgeData.value); console.log('受影响桥梁数据:', affectedBridgeData.value);
@ -400,7 +424,7 @@ const getAffectedBridgeData = async () => {
const tunnelInfoDialogRef = ref([]); const tunnelInfoDialogRef = ref([]);
// 获取受影响隧道数据 // 获取受影响隧道数据
const getAffectedTunnelData = async () => { const getAffectedTunnelData = async flag => {
try { try {
const timeParams = getTimeParams(); const timeParams = getTimeParams();
const res = await request({ const res = await request({
@ -410,10 +434,19 @@ const getAffectedTunnelData = async () => {
}); });
if (res.code === '00000' && res.data) { if (res.code === '00000' && res.data) {
res.data.forEach(item => { res.data.forEach(item => {
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
item.COUNTY = '两江新区';
}
affectedCountyData.value.sortedList.forEach(j => {
if (flag && j.name && item.GL1_QXMC && item.GL1_QXMC.includes(j.name)) {
item.COORDINATE_POINT = [Number(item.GL1_SDJD2), Number(item.GL1_SDWD2)]; item.COORDINATE_POINT = [Number(item.GL1_SDJD2), Number(item.GL1_SDWD2)];
// if (Number(item.GL1_PDDJ) > 3 || item.GL1_SDLX == '特长隧道') {
// }
tunnelInfoDialogRef.value.push(item); tunnelInfoDialogRef.value.push(item);
} else if (!flag) {
item.COORDINATE_POINT = [Number(item.GL1_SDJD2), Number(item.GL1_SDWD2)];
tunnelInfoDialogRef.value.push(item);
}
});
}); });
console.log('受影响隧道数据:', tunnelInfoDialogRef.value); console.log('受影响隧道数据:', tunnelInfoDialogRef.value);
addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, 'tunnel'); addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, 'tunnel');
@ -427,7 +460,7 @@ const getAffectedTunnelData = async () => {
// 获取受影响项目数据 // 获取受影响项目数据
const affectedProjectData = ref([]); const affectedProjectData = ref([]);
const getAffectedProjectData = async () => { const getAffectedProjectData = async flag => {
try { try {
const timeParams = getTimeParams(); const timeParams = getTimeParams();
const res = await request({ const res = await request({
@ -440,8 +473,29 @@ const getAffectedProjectData = async () => {
console.log('项目数据条数:', res.data.length); console.log('项目数据条数:', res.data.length);
// 解析坐标数据 // 解析坐标数据
const parsedData = res.data.map(item => { const parsedData = res.data.map(item => {
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
item.COUNTY = '两江新区';
}
affectedCountyData.value.sortedList.forEach(j => {
const newItem = { ...item }; const newItem = { ...item };
if (item.COORDINATE_POINT) { // 判断 flag = true 是页面第一次进入
if (
flag &&
item.COORDINATE_POINT &&
j.name &&
item.COUNTY &&
item.COUNTY.includes(j.name)
) {
console.log('原始坐标:', item.COORDINATE_POINT);
newItem.COORDINATE_POINT = item.COORDINATE_POINT.substring(
6,
item.COORDINATE_POINT.length - 1
)
.split(' ')
.reverse();
console.log('解析后坐标:', newItem.COORDINATE_POINT);
} else if (!flag && item.COORDINATE_POINT) {
console.log('原始坐标:', item.COORDINATE_POINT); console.log('原始坐标:', item.COORDINATE_POINT);
newItem.COORDINATE_POINT = item.COORDINATE_POINT.substring( newItem.COORDINATE_POINT = item.COORDINATE_POINT.substring(
6, 6,
@ -453,6 +507,8 @@ const getAffectedProjectData = async () => {
} }
return newItem; return newItem;
}); });
});
affectedProjectData.value = parsedData; affectedProjectData.value = parsedData;
// 在地图上添加项目标记 // 在地图上添加项目标记
console.log('开始添加项目标记...'); console.log('开始添加项目标记...');
@ -475,7 +531,7 @@ const roadvalArr = ref([
{ label: '中风险', value: 0, show: false }, { label: '中风险', value: 0, show: false },
{ label: '低风险', value: 0, show: false }, { label: '低风险', value: 0, show: false },
]); ]);
const getAffectedRoadSectionData = async () => { const getAffectedRoadSectionData = async flag => {
try { try {
console.log('受影响路段数据:', props.roadItem); console.log('受影响路段数据:', props.roadItem);
const { start, end } = getTimeParams(); const { start, end } = getTimeParams();
@ -503,8 +559,17 @@ const getAffectedRoadSectionData = async () => {
console.log('受影响路段数据:', res); console.log('受影响路段数据:', res);
if (res.code === '00000' && res.data) { if (res.code === '00000' && res.data) {
res.data.forEach(item => { res.data.forEach(item => {
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
item.COUNTY = '两江新区';
}
affectedCountyData.value.sortedList.forEach(j => {
if (flag && item.GL1_QXMC && j.name && item.GL1_QXMC.includes(j.name)) {
// item.COORDINATE_POINT = JSON.parse(item.STARTPOINT); // item.COORDINATE_POINT = JSON.parse(item.STARTPOINT);
item.COORDINATE_POINT = [item.GL1_LON, item.GL1_LAT]; item.COORDINATE_POINT = [item.GL1_LON, item.GL1_LAT];
} else if (!flag) {
item.COORDINATE_POINT = [item.GL1_LON, item.GL1_LAT];
}
});
}); });
affectedRoadSectionData.value = res.data; affectedRoadSectionData.value = res.data;
// 在地图上添加项目标记 // 在地图上添加项目标记
@ -665,7 +730,6 @@ const clearProjectMarkers = () => {
projectMarkers = []; projectMarkers = [];
// 关闭所有弹窗 // 关闭所有弹窗
tunnelDialogVisible.value = false;
mapInfoDialogVisible.value = false; mapInfoDialogVisible.value = false;
centerCardVisible.value = false; centerCardVisible.value = false;
}; };
@ -706,14 +770,6 @@ const getIconByType = (item, type) => {
// 在地图上添加项目标记 // 在地图上添加项目标记
const addProjectMarkers = (data, iconUrl, type = 'project') => { const addProjectMarkers = (data, iconUrl, type = 'project') => {
console.log(
'addProjectMarkers 被调用, mapInstance:',
!!mapInstance,
'数据条数:',
data?.length,
'类型:',
type
);
if (!mapInstance) { if (!mapInstance) {
console.warn('mapInstance 未初始化，无法添加标记'); console.warn('mapInstance 未初始化，无法添加标记');
return; return;
@ -728,7 +784,7 @@ const addProjectMarkers = (data, iconUrl, type = 'project') => {
// 遍历数据添加标记 // 遍历数据添加标记
data.forEach(item => { data.forEach(item => {
if (item.COORDINATE_POINT && item.COORDINATE_POINT.length === 2) { if (item && item.COORDINATE_POINT && item.COORDINATE_POINT.length == 2) {
// COORDINATE_POINT 格式: [经度, 纬度] // COORDINATE_POINT 格式: [经度, 纬度]
// Leaflet 需要: [纬度, 经度] // Leaflet 需要: [纬度, 经度]
const lng = item.COORDINATE_POINT[0]; const lng = item.COORDINATE_POINT[0];
@ -751,6 +807,7 @@ const addProjectMarkers = (data, iconUrl, type = 'project') => {
const marker = window.L.marker([latNum, lngNum], { const marker = window.L.marker([latNum, lngNum], {
icon: projectIconObj, icon: projectIconObj,
zIndexOffset: 1000, // 提升图标层级，确保在地图其他元素之上
}); });
// 点击 marker 打开对应类型的信息弹窗 // 点击 marker 打开对应类型的信息弹窗
@ -877,7 +934,7 @@ const countWarningsByCounty = data => {
// 转换为数组格式并按总数排序（数量从大到小） // 转换为数组格式并按总数排序（数量从大到小）
const sortedList = Object.entries(stats) const sortedList = Object.entries(stats)
.map(([name, data]) => ({ .map(([name, data]) => ({
name, name: name.substring(0, 2),
total: data.total, total: data.total,
levels: data.levels, levels: data.levels,
})) }))
@ -981,8 +1038,6 @@ const processDistrictMerge = geoJsonData => {
// 添加合并后的两江新区 // 添加合并后的两江新区
geoJsonData.features.push(liangjiangFeature); geoJsonData.features.push(liangjiangFeature);
console.log('已合并渝北区和江北区为两江新区');
} }
}; };
@ -1168,7 +1223,10 @@ const initMap = geoJsonData => {
iconAnchor: [40, 15], iconAnchor: [40, 15],
}); });
const marker = window.L.marker(centroid, { icon: label }); const marker = window.L.marker(centroid, {
icon: label,
zIndexOffset: 500, // 提升标签层级
});
// marker.on("click", (e) => { // marker.on("click", (e) => {
// // 清除之前选中的样式 // // 清除之前选中的样式
// if (selectedLayer) { // if (selectedLayer) {
@ -1230,18 +1288,18 @@ watch(
await getRiskPointData(); await getRiskPointData();
break; break;
case '项目': case '项目':
await getAffectedProjectData(); await getAffectedProjectData(false);
break; break;
case '隧道': case '隧道':
await getAffectedTunnelData(); await getAffectedTunnelData(false);
break; break;
case '边坡': case '边坡':
break; break;
case '桥梁': case '桥梁':
await getAffectedBridgeData(); await getAffectedBridgeData(false);
break; break;
case '路段': case '路段':
await getAffectedRoadSectionData(); await getAffectedRoadSectionData(false);
break; break;
case '队伍': case '队伍':
await getEmergencyForceData(); await getEmergencyForceData();
@ -1332,7 +1390,6 @@ const locateToDistrict = countyName => {
}; };
const targetName = simplifyName(countyName); const targetName = simplifyName(countyName);
console.log('定位到区县:', countyName, '简化后:', targetName);
// 查找对应的区县图层 // 查找对应的区县图层
let targetLayer = null; let targetLayer = null;
@ -1362,8 +1419,6 @@ const locateToDistrict = countyName => {
// color: "#ff4d4f", // color: "#ff4d4f",
// }); // });
selectedLayer = targetLayer; selectedLayer = targetLayer;
console.log('已定位到区县:', countyName, '中心点:', center);
} else { } else {
console.warn('未找到区县:', countyName); console.warn('未找到区县:', countyName);
} }

90
packages/screen/src/views/RiskWarning/component/date-picker-theme.scss
View File

@ -25,92 +25,92 @@
/* 防止样式被覆盖，提高优先级 */ /* 防止样式被覆盖，提高优先级 */
.custom-date-picker { .custom-date-picker {
/* 弹出框整体背景色 */ /* 弹出框整体背景色 */
background-color: #122C45 !important; background-color: #122c45 !important;
/* 弹出框边框（主题色） */ /* 弹出框边框（主题色） */
border: 1px solid #289DFF !important; border: 1px solid #289dff !important;
/* 可选：阴影效果 */ /* 可选：阴影效果 */
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3) !important; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3) !important;
} }
.el-date-editor .el-range-input { .el-date-editor .el-range-input {
color: #289DFF !important; color: #289dff !important;
} }
/* ========== 1. 顶部栏（年月切换区域） ========== */ /* ========== 1. 顶部栏（年月切换区域） ========== */
.custom-date-picker .el-date-picker__header, .custom-date-picker .el-date-picker__header,
.custom-date-picker .el-picker-panel__header { .custom-date-picker .el-picker-panel__header {
background-color: #122C45 !important; background-color: #122c45 !important;
border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important; border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important;
} }
.custom-date-picker .el-date-picker__header-label, .custom-date-picker .el-date-picker__header-label,
.custom-date-picker .el-picker-panel__header-label { .custom-date-picker .el-picker-panel__header-label {
color: #FFFFFF !important; color: #ffffff !important;
} }
.custom-date-picker .el-picker-panel__icon-btn { .custom-date-picker .el-picker-panel__icon-btn {
color: #FFFFFF !important; color: #ffffff !important;
} }
.custom-date-picker .el-picker-panel__icon-btn:hover { .custom-date-picker .el-picker-panel__icon-btn:hover {
color: #289DFF !important; color: #289dff !important;
} }
/* 年份/月份快速选择面板 */ /* 年份/月份快速选择面板 */
.custom-date-picker .el-year-table td .el-year-table__cell__text, .custom-date-picker .el-year-table td .el-year-table__cell__text,
.custom-date-picker .el-month-table td .el-month-table__cell__text { .custom-date-picker .el-month-table td .el-month-table__cell__text {
color: #FFFFFF !important; color: #ffffff !important;
background-color: transparent !important; background-color: transparent !important;
} }
.custom-date-picker .el-year-table td .el-year-table__cell__text:hover, .custom-date-picker .el-year-table td .el-year-table__cell__text:hover,
.custom-date-picker .el-month-table td .el-month-table__cell__text:hover { .custom-date-picker .el-month-table td .el-month-table__cell__text:hover {
color: #289DFF !important; color: #289dff !important;
background-color: rgba(40, 157, 255, 0.2) !important; background-color: rgba(40, 157, 255, 0.2) !important;
} }
.custom-date-picker .el-year-table td.current .el-year-table__cell__text, .custom-date-picker .el-year-table td.current .el-year-table__cell__text,
.custom-date-picker .el-month-table td.current .el-month-table__cell__text { .custom-date-picker .el-month-table td.current .el-month-table__cell__text {
background-color: #289DFF !important; background-color: #289dff !important;
color: #FFFFFF !important; color: #ffffff !important;
} }
/* ========== 2. 星期栏 ========== */ /* ========== 2. 星期栏 ========== */
.custom-date-picker .el-date-table th, .custom-date-picker .el-date-table th,
.custom-date-picker .el-date-table__header th { .custom-date-picker .el-date-table__header th {
color: #289DFF !important; color: #289dff !important;
background-color: #122C45 !important; background-color: #122c45 !important;
border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important; border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important;
} }
/* ========== 3. 日期单元格（默认状态） ========== */ /* ========== 3. 日期单元格（默认状态） ========== */
.custom-date-picker .el-date-table td .el-date-table-cell__text { .custom-date-picker .el-date-table td .el-date-table-cell__text {
color: #FFFFFF !important; color: #ffffff !important;
background-color: transparent !important; background-color: transparent !important;
border-radius: 4px; border-radius: 4px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.custom-date-picker .el-date-table td .el-date-table-cell__text:hover { .custom-date-picker .el-date-table td .el-date-table-cell__text:hover {
color: #289DFF !important; color: #289dff !important;
background-color: rgba(40, 157, 255, 0.2) !important; background-color: rgba(40, 157, 255, 0.2) !important;
} }
/* ========== 4. 选中状态（核心样式） ========== */ /* ========== 4. 选中状态（核心样式） ========== */
.custom-date-picker .el-date-table td.current .el-date-table-cell__text { .custom-date-picker .el-date-table td.current .el-date-table-cell__text {
background-color: #289DFF !important; background-color: #289dff !important;
color: #FFFFFF !important; color: #ffffff !important;
} }
/* ========== 5. 今天按钮样式 ========== */ /* ========== 5. 今天按钮样式 ========== */
.custom-date-picker .el-date-table td.today .el-date-table-cell__text { .custom-date-picker .el-date-table td.today .el-date-table-cell__text {
color: #289DFF !important; color: #289dff !important;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
} }
.custom-date-picker .el-date-table td.today.current .el-date-table-cell__text { .custom-date-picker .el-date-table td.today.current .el-date-table-cell__text {
color: #FFFFFF !important; color: #ffffff !important;
} }
/* ========== 6. 其他月份日期（灰色显示） ========== */ /* ========== 6. 其他月份日期（灰色显示） ========== */
@ -128,12 +128,12 @@
/* ========== 8. 底部按钮区域 ========== */ /* ========== 8. 底部按钮区域 ========== */
.custom-date-picker .el-picker-panel__footer { .custom-date-picker .el-picker-panel__footer {
background-color: #122C45 !important; background-color: #122c45 !important;
border-top: 1px solid rgba(40, 157, 255, 0.3) !important; border-top: 1px solid rgba(40, 157, 255, 0.3) !important;
} }
.custom-date-picker .el-button--text { .custom-date-picker .el-button--text {
color: #289DFF !important; color: #289dff !important;
background-color: transparent !important; background-color: transparent !important;
} }
@ -143,8 +143,8 @@
} }
.custom-date-picker .el-button--primary { .custom-date-picker .el-button--primary {
background-color: #289DFF !important; background-color: #289dff !important;
border-color: #289DFF !important; border-color: #289dff !important;
} }
.custom-date-picker .el-button--primary:hover { .custom-date-picker .el-button--primary:hover {
@ -155,53 +155,53 @@
/* ========== 9. 小三角箭头 ========== */ /* ========== 9. 小三角箭头 ========== */
/* Element Plus 版本 */ /* Element Plus 版本 */
.custom-date-picker .el-popper__arrow::before { .custom-date-picker .el-popper__arrow::before {
background-color: #122C45 !important; background-color: #122c45 !important;
border: 1px solid #289DFF !important; border: 1px solid #289dff !important;
} }
/* Element UI 版本 */ /* Element UI 版本 */
.custom-date-picker .popper__arrow { .custom-date-picker .popper__arrow {
border-bottom-color: #122C45 !important; border-bottom-color: #122c45 !important;
} }
.custom-date-picker .popper__arrow::after { .custom-date-picker .popper__arrow::after {
border-bottom-color: #122C45 !important; border-bottom-color: #122c45 !important;
} }
/* ========== 10. 范围选择器样式 ========== */ /* ========== 10. 范围选择器样式 ========== */
/* 范围选择器整体背景 */ /* 范围选择器整体背景 */
.custom-date-picker.el-picker-panel--date-range { .custom-date-picker.el-picker-panel--date-range {
background-color: #122C45 !important; background-color: #122c45 !important;
} }
/* 范围选择左右面板 */ /* 范围选择左右面板 */
.custom-date-picker .el-date-range-picker__content { .custom-date-picker .el-date-range-picker__content {
background-color: #152D47 !important; background-color: #152d47 !important;
} }
/* 范围选择头部 */ /* 范围选择头部 */
.custom-date-picker .el-date-range-picker__header { .custom-date-picker .el-date-range-picker__header {
color: #FFFFFF !important; color: #ffffff !important;
background-color: #122C45 !important; background-color: #122c45 !important;
} }
/* 范围选择 - 起始日期 */ /* 范围选择 - 起始日期 */
.custom-date-picker .el-date-table td.start-date .el-date-table-cell__text, .custom-date-picker .el-date-table td.start-date .el-date-table-cell__text,
.custom-date-picker .el-date-table td.end-date .el-date-table-cell__text { .custom-date-picker .el-date-table td.end-date .el-date-table-cell__text {
background-color: #289DFF !important; background-color: #289dff !important;
color: #FFFFFF !important; color: #ffffff !important;
border-radius: 4px; border-radius: 4px;
} }
.el-date-table td.in-range .el-date-table-cell { .el-date-table td.in-range .el-date-table-cell {
background-color: #27374A !important; background-color: #27374a !important;
border-radius: 0; border-radius: 0;
} }
/* 范围选择 - 中间区间 */ /* 范围选择 - 中间区间 */
.custom-date-picker .el-date-table td.in-range .el-date-table-cell__text { .custom-date-picker .el-date-table td.in-range .el-date-table-cell__text {
background-color: #3E91BC !important; background-color: #3e91bc !important;
color: #FFFFFF !important; color: #ffffff !important;
border-radius: 0; border-radius: 0;
} }
@ -216,13 +216,13 @@
} }
.custom-date-picker .el-scrollbar__thumb { .custom-date-picker .el-scrollbar__thumb {
background-color: #289DFF !important; background-color: #289dff !important;
} }
/* ========== 12. 时间选择器样式（如有） ========== */ /* ========== 12. 时间选择器样式（如有） ========== */
.custom-date-picker .el-time-spinner__item { .custom-date-picker .el-time-spinner__item {
color: #FFFFFF !important; color: #ffffff !important;
background-color: #122C45 !important; background-color: #122c45 !important;
} }
.custom-date-picker .el-time-spinner__item:hover { .custom-date-picker .el-time-spinner__item:hover {
@ -230,21 +230,21 @@
} }
.custom-date-picker .el-time-spinner__item.active { .custom-date-picker .el-time-spinner__item.active {
background-color: #289DFF !important; background-color: #289dff !important;
color: #FFFFFF !important; color: #ffffff !important;
} }
/* ========== 13. 快捷选项样式 ========== */ /* ========== 13. 快捷选项样式 ========== */
.custom-date-picker .el-picker-panel__shortcut { .custom-date-picker .el-picker-panel__shortcut {
color: #FFFFFF !important; color: #ffffff !important;
background-color: #122C45 !important; background-color: #122c45 !important;
} }
.custom-date-picker .el-picker-panel__shortcut:hover { .custom-date-picker .el-picker-panel__shortcut:hover {
background-color: rgba(40, 157, 255, 0.2) !important; background-color: rgba(40, 157, 255, 0.2) !important;
color: #289DFF !important; color: #289dff !important;
} }
.el-range__icon { .el-range__icon {
color: #289DFF !important; color: #289dff !important;
} }

7
packages/screen/src/views/RiskWarning/component/el-select.scss
View File

@ -13,11 +13,10 @@
box-shadow: none; box-shadow: none;
outline: none; outline: none;
color: #fff !important; color: #fff !important;
} }
.el-select__placeholder { .el-select__placeholder {
color: #16D9E0; color: #16d9e0;
font-weight: 400; font-weight: 400;
} }
@ -46,8 +45,8 @@
align-items: center; align-items: center;
color: #fff; color: #fff;
background-color: #122c46; background-color: #122c46;
text-stroke: 0px #16D9E0; text-stroke: 0px #16d9e0;
-webkit-text-stroke: 0px #16D9E0; -webkit-text-stroke: 0px #16d9e0;
height: 40px; height: 40px;
&.is-hovering { &.is-hovering {

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

@ -3,20 +3,7 @@ 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: "渝中区" },
// { label: "巫溪县", value: "巫溪县" },
// { label: "涪陵区", value: "涪陵区" },
// { label: "合川区", value: "合川区" },
// { label: "万盛区", value: "万盛区" },
// { label: "长寿区", value: "长寿区" },
// { label: "城口区", value: "城口区" },
// { label: "柏梓镇", value: "柏梓镇" },
// { label: "江北区", value: "江北区" },
]);
// 获取影响区域选项 // 获取影响区域选项
export const fetchDistrictOptions = async () => { export const fetchDistrictOptions = async () => {
@ -32,10 +19,7 @@ export const fetchDistrictOptions = async () => {
value: item.xzdm, value: item.xzdm,
})); }));
// 保留"全部"选项，并添加接口返回的数据 // 保留"全部"选项，并添加接口返回的数据
regionOptions.value = [ regionOptions.value = [{ label: '全部', value: '' }, ...options];
{ label: "全部", value: "" },
...options,
];
return options; return options;
} }
} catch (error) { } catch (error) {
@ -45,14 +29,23 @@ export const fetchDistrictOptions = async () => {
}; };
// 路况类型选项（默认数据，会被API数据替换） // 路况类型选项（默认数据，会被API数据替换）
export const typeOptions = ref([ export const typeOptions = ref([]);
// 管控措施选项（默认数据，会被API数据替换）
export const controlMeasureOptions = ref([
// { label: "正常通行", value: "正常通行" },
// { label: "全幅封闭", value: "全幅封闭" },
// { label: "半幅封闭", value: "半幅封闭" },
// { label: "限速限车", value: "限速限车" },
// { label: "限速", value: "限速" },
// { label: "告警阻拦", value: "告警阻拦" },
]); ]);
// 获取路况类型选项 // 获取路况类型选项
export const fetchRoadConditionOptions = async () => { export const fetchRoadConditionOptions = async () => {
try { try {
const res = await request({ const res = await request({
url: '/snow-ops-platform/sm-event/dashboard/road-condition-options', url: '/snow-ops-platform/sm-event/dashboard/processing-measure-options',
method: 'GET', method: 'GET',
}); });
if (res && res.code === '00000' && Array.isArray(res.data)) { if (res && res.code === '00000' && Array.isArray(res.data)) {
@ -70,76 +63,101 @@ export const fetchRoadConditionOptions = async () => {
return typeOptions.value; return typeOptions.value;
}; };
// 管控措施选项 // 获取管控措施选项
export const controlMeasureOptions = [ export const fetchControlMeasureOptions = async () => {
{ label: "全幅封闭", value: "全幅封闭" }, try {
{ label: "半幅通行", value: "半幅通行" }, const res = await request({
{ label: "限速", value: "限速" }, url: '/snow-ops-platform/sm-event/dashboard/processing-measure-options',
{ label: "告警阻拦", value: "告警阻拦" }, method: 'GET',
]; });
if (res && res.code === '00000' && Array.isArray(res.data)) {
const options = res.data
.map(item => {
if (typeof item === 'string') {
return { label: item, value: item };
}
if (item && typeof item === 'object') {
const label = item.label ?? item.name ?? item.text ?? item.value ?? item.val;
const value = item.value ?? item.val ?? item.code ?? label;
if (label == null || value == null) return null;
return { label: String(label), value: String(value) };
}
return null;
})
.filter(Boolean);
if (options.length > 0) {
controlMeasureOptions.value = options;
return options;
}
}
} catch (error) {
console.error('获取管控措施选项失败:', error);
}
return controlMeasureOptions.value;
};
// 风险等级选项 // 风险等级选项
export const riskLevelOptions = [ export const riskLevelOptions = [
{ label: "一级", value: "一级" }, { label: '一级', value: '一级' },
{ label: "二级", value: "二级" }, { label: '二级', value: '二级' },
{ label: "三级", value: "三级" }, { label: '三级', value: '三级' },
{ label: "四级", value: "四级" }, { label: '四级', value: '四级' },
]; ];
// 影响点类型选项 // 影响点类型选项
export const pointTypeOptions = [ export const pointTypeOptions = [
{ label: "全部", value: "" }, { label: '全部', value: '' },
{ label: "边坡", value: "slope" }, { label: '边坡', value: 'slope' },
{ label: "桥梁", value: "bridge" }, { label: '桥梁', value: 'bridge' },
{ label: "隧道", value: "tunnel" }, { label: '隧道', value: 'tunnel' },
{ label: "路面", value: "road" }, { label: '路面', value: 'road' },
]; ];
// 影响点等级选项 // 影响点等级选项
export const pointLevelOptions = [ export const pointLevelOptions = [
{ label: "全部", value: "" }, { label: '全部', value: '' },
{ label: "一般隐患", value: "normal" }, { label: '一般隐患', value: 'normal' },
{ label: "重大隐患", value: "serious" }, { label: '重大隐患', value: 'serious' },
]; ];
// 是否回应选项 // 是否回应选项
export const isRespondedOptions = [ export const isRespondedOptions = [
{ label: "全部", value: "" }, { label: '全部', value: '' },
{ label: "是", value: "yes" }, { label: '是', value: 'yes' },
{ label: "否", value: "no" }, { label: '否', value: 'no' },
]; ];
// 预警等级选项 // 预警等级选项
export const warningLevelOptions = [ export const warningLevelOptions = [
{ label: "全部", value: "" }, { label: '全部', value: '' },
{ label: "红色预警", value: "红色预警" }, { label: '红色预警', value: '红色预警' },
{ label: "橙色预警", value: "橙色预警" }, { label: '橙色预警', value: '橙色预警' },
{ label: "黄色预警", value: "黄色预警" }, { label: '黄色预警', value: '黄色预警' },
{ label: "蓝色预警", value: "蓝色预警" }, { label: '蓝色预警', value: '蓝色预警' },
]; ];
// 是否结束选项 // 是否结束选项
export const isEndedOptions = [ export const isEndedOptions = [
{ label: "全部", value: "" }, { label: '全部', value: '' },
{ label: "是", value: true }, { label: '是', value: true },
{ label: "否", value: false }, { label: '否', value: false },
]; ];
// 影响区域选项（带全部） // 影响区域选项（带全部）
export const regionOptionsWithAll = ref([ export const regionOptionsWithAll = ref([]);
]);
// 格式化日期时间为接口所需格式 // 格式化日期时间为接口所需格式
export const formatDateTime = (date) => { export 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}`;
}; };
@ -158,4 +176,5 @@ export default {
formatDateTime, formatDateTime,
fetchRoadConditionOptions, fetchRoadConditionOptions,
fetchDistrictOptions, fetchDistrictOptions,
fetchControlMeasureOptions,
}; };

106
packages/screen/src/views/RiskWarning/component/ringChart.vue
View File

@ -3,8 +3,8 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue' import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts' import * as echarts from 'echarts';
const props = defineProps({ const props = defineProps({
chartData: { chartData: {
@ -13,28 +13,28 @@ const props = defineProps({
{ name: '蓝色', value: 13, color: '#40a9ff' }, { name: '蓝色', value: 13, color: '#40a9ff' },
{ name: '橙色', value: 40.2, color: '#ff7a45' }, { name: '橙色', value: 40.2, color: '#ff7a45' },
{ name: '黄色', value: 22, color: '#ffc53d' }, { name: '黄色', value: 22, color: '#ffc53d' },
{ name: '红色', value: 8, color: '#ff4d4f' } { name: '红色', value: 8, color: '#ff4d4f' },
] ],
}, },
centerText: { centerText: {
type: String, type: String,
default: '风险\n状况' default: '风险\n状况',
} },
}) });
const chartRef = ref(null) const chartRef = ref(null);
let chartInstance = null let chartInstance = null;
const initChart = () => { const initChart = () => {
if (!chartRef.value) return if (!chartRef.value) return;
chartInstance = echarts.init(chartRef.value) chartInstance = echarts.init(chartRef.value);
const option = { const option = {
backgroundColor: 'transparent', backgroundColor: 'transparent',
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c}%' formatter: '{b}: {c}%',
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
@ -44,12 +44,12 @@ const initChart = () => {
itemHeight: 10, itemHeight: 10,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12,
}, },
data: props.chartData.map(item => ({ data: props.chartData.map(item => ({
name: item.name, name: item.name,
icon: 'circle' icon: 'circle',
})) })),
}, },
series: [ series: [
{ {
@ -63,30 +63,30 @@ const initChart = () => {
position: 'outside', position: 'outside',
formatter: '{c}%', formatter: '{c}%',
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12,
}, },
labelLine: { labelLine: {
show: true, show: true,
length: 15, length: 15,
length2: 10, length2: 10,
lineStyle: { lineStyle: {
color: 'rgba(255, 255, 255, 0.3)' color: 'rgba(255, 255, 255, 0.3)',
} },
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 14,
fontWeight: 'bold' fontWeight: 'bold',
} },
}, },
data: props.chartData.map(item => ({ data: props.chartData.map(item => ({
value: item.value, value: item.value,
name: item.name, name: item.name,
itemStyle: { itemStyle: {
color: item.color color: item.color,
} },
})) })),
}, },
{ {
type: 'pie', type: 'pie',
@ -100,25 +100,25 @@ const initChart = () => {
color: '#fff', color: '#fff',
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
lineHeight: 24 lineHeight: 24,
}, },
data: [{ value: 1, name: '', itemStyle: { color: 'transparent' } }] data: [{ value: 1, name: '', itemStyle: { color: 'transparent' } }],
} },
] ],
} };
chartInstance.setOption(option) chartInstance.setOption(option);
} };
const updateChart = () => { const updateChart = () => {
if (!chartInstance) return if (!chartInstance) return;
const option = { const option = {
legend: { legend: {
data: props.chartData.map(item => ({ data: props.chartData.map(item => ({
name: item.name, name: item.name,
icon: 'circle' icon: 'circle',
})) })),
}, },
series: [ series: [
{ {
@ -126,37 +126,37 @@ const updateChart = () => {
value: item.value, value: item.value,
name: item.name, name: item.name,
itemStyle: { itemStyle: {
color: item.color color: item.color,
} },
})) })),
}, },
{ {
label: { label: {
formatter: props.centerText formatter: props.centerText,
} },
} },
] ],
} };
chartInstance.setOption(option) chartInstance.setOption(option);
} };
const handleResize = () => { const handleResize = () => {
chartInstance?.resize() chartInstance?.resize();
} };
onMounted(() => { onMounted(() => {
initChart() initChart();
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize) window.removeEventListener('resize', handleResize);
chartInstance?.dispose() chartInstance?.dispose();
}) });
watch(() => props.chartData, updateChart, { deep: true }) watch(() => props.chartData, updateChart, { deep: true });
watch(() => props.centerText, updateChart) watch(() => props.centerText, updateChart);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

4
packages/screen/src/views/RiskWarning/component/sectionHeader.vue
View File

@ -12,12 +12,12 @@
</template> </template>
<script setup> <script setup>
import bgImg from "@/assets/RiskWarning_img/标题bg@2x.png"; import bgImg from '@/assets/RiskWarning_img/标题bg@2x.png';
defineProps({ defineProps({
title: { title: {
type: String, type: String,
default: "", default: '',
}, },
}); });
</script> </script>

8
packages/screen/src/views/RiskWarning/component/table.vue
View File

@ -35,10 +35,10 @@ defineProps({
{ type: '隧道', red: 0, orange: 0, yellow: 6, blue: 12 }, { type: '隧道', red: 0, orange: 0, yellow: 6, blue: 12 },
{ type: '边坡', red: 0, orange: 1, yellow: 9, blue: 9 }, { type: '边坡', red: 0, orange: 1, yellow: 9, blue: 9 },
{ type: '路段', red: 0, orange: 2, yellow: 11, blue: 7 }, { type: '路段', red: 0, orange: 2, yellow: 11, blue: 7 },
{ type: '项目', red: 0, orange: 2, yellow: 11, blue: 7 } { type: '项目', red: 0, orange: 2, yellow: 11, blue: 7 },
] ],
} },
}) });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -42,10 +42,11 @@
</div> </div>
<div class="right"> <div class="right">
<right <right
:dateRange="getdateRange" :getdateRange="getdateRange"
@openResourceDetail="openResourceDetail" @openResourceDetail="openResourceDetail"
@openClearanceSituation="openDialog('clearanceSituation')" @openClearanceSituation="openDialog('clearanceSituation')"
@openControlSituation="openDialog('controlSituation')" @openControlSituation="openDialog('controlSituation')"
@update:dateRange="updateDateRange"
></right> ></right>
</div> </div>
<!-- 地图中心 --> <!-- 地图中心 -->
@ -195,6 +196,7 @@
<!-- 抢通情况对话框 --> <!-- 抢通情况对话框 -->
<clearanceSituationDialog <clearanceSituationDialog
:dateRange="rightDateRange"
v-model:visible="dialogVisible.clearanceSituation" v-model:visible="dialogVisible.clearanceSituation"
@close="closeDialog('clearanceSituation')" @close="closeDialog('clearanceSituation')"
@detail="openDialog('eventDetail')" @detail="openDialog('eventDetail')"
@ -254,7 +256,6 @@
v-model:visible="dialogVisible.offlineHelp" v-model:visible="dialogVisible.offlineHelp"
@close="closeDialog('offlineHelp')" @close="closeDialog('offlineHelp')"
/> />
</div> </div>
</div> </div>
</template> </template>
@ -268,7 +269,11 @@ import right from './right.vue';
import bottom from './bottom.vue'; import bottom from './bottom.vue';
import top from './top.vue'; import top from './top.vue';
import ChongqingMap from './component/ChongqingMap.vue'; import ChongqingMap from './component/ChongqingMap.vue';
import { fetchRoadConditionOptions, fetchDistrictOptions } from './component/index.js'; import {
fetchRoadConditionOptions,
fetchDistrictOptions,
fetchControlMeasureOptions,
} from './component/index.js';
// 引入所有弹窗组件 // 引入所有弹窗组件
import responseSituationDiaLog from './Dialog/responseSituationDiaLog.vue'; import responseSituationDiaLog from './Dialog/responseSituationDiaLog.vue';
@ -489,6 +494,11 @@ const dispatchDateRange = ref([]);
const handleDispatchDateRange = range => { const handleDispatchDateRange = range => {
dispatchDateRange.value = range; dispatchDateRange.value = range;
}; };
const rightDateRange = ref([]);
const updateDateRange = range => {
console.log('更新日期范围:', range);
rightDateRange.value = range;
};
// 确认对话框配置 // 确认对话框配置
const confirmConfig = ref({ const confirmConfig = ref({
@ -612,6 +622,7 @@ onMounted(() => {
mapBase.loadBaseData(); mapBase.loadBaseData();
fetchRoadConditionOptions(); // 获取路况类型选项 fetchRoadConditionOptions(); // 获取路况类型选项
fetchDistrictOptions(); // 获取区县选项 fetchDistrictOptions(); // 获取区县选项
fetchControlMeasureOptions(); // 获取管控措施选项
}); });
</script> </script>
@ -711,10 +722,7 @@ onMounted(() => {
position: absolute; position: absolute;
top: vw(100); top: vw(100);
left: 25%; left: 25%;
width: 50%;
z-index: 4; z-index: 4;
// height: 15%;
// background-color: #15293B;
} }
.center { .center {

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

@ -39,7 +39,7 @@
<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>
@ -173,7 +173,7 @@ watch(
() => getdateRange.value, () => getdateRange.value,
newVal => { newVal => {
console.log('left.vue 日期范围变化:', newVal); console.log('left.vue 日期范围变化:', newVal);
init(); // init();
}, },
{ deep: true } { deep: true }
); );

64
packages/screen/src/views/RiskWarning/right.vue
View File

@ -212,13 +212,21 @@ import icon55 from '../../assets/RiskWarning_img/路径55@2x.png';
import icon62 from '../../assets/RiskWarning_img/路径62@2x.png'; import icon62 from '../../assets/RiskWarning_img/路径62@2x.png';
import icon621 from '../../assets/RiskWarning_img/路径62@2x (1).png'; import icon621 from '../../assets/RiskWarning_img/路径62@2x (1).png';
import icon622 from '../../assets/RiskWarning_img/路径62@2x (2).png'; import icon622 from '../../assets/RiskWarning_img/路径62@2x (2).png';
import { formatDateTime } from './component/index.js';
const emit = defineEmits(['openClearanceSituation', 'openControlSituation', 'openResourceDetail']); const emit = defineEmits([
'openClearanceSituation',
'openControlSituation',
'openResourceDetail',
'update:dateRange',
]);
// 注入兄弟组件通信机制 // 注入兄弟组件通信机制
const setRefreshRightData = inject('setRefreshRightData'); const setRefreshRightData = inject('setRefreshRightData');
const getdateRange = inject('getdateRange', ref([])); const getdateRange = inject('getdateRange', ref([]));
const props = defineProps({});
// 日期选择器变化事件 // 日期选择器变化事件
const handleDateChange = val => { const handleDateChange = val => {
dateRange.value = val; dateRange.value = val;
@ -317,9 +325,18 @@ const getYhYjllListMaterials = async () => {
// 获取管控统计数据 // 获取管控统计数据
const getControlStats = async () => { const getControlStats = async () => {
try { 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({ const res = await request({
url: '/snow-ops-platform/sm-event/dashboard/control-stats', url: '/snow-ops-platform/sm-event/dashboard/control-stats',
method: 'GET', method: 'GET',
params: params,
}); });
console.log('管控统计数据:', res); console.log('管控统计数据:', res);
if (res.code == '00000' && res.data) { if (res.code == '00000' && res.data) {
@ -345,9 +362,18 @@ const getControlStats = async () => {
// 获取抢险投入统计数据 // 获取抢险投入统计数据
const getRescueInputStats = async () => { const getRescueInputStats = async () => {
try { 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({ const res = await request({
url: '/snow-ops-platform/sm-event/dashboard/rescue-input-stats', url: '/snow-ops-platform/sm-event/dashboard/rescue-input-stats',
method: 'GET', method: 'GET',
params: params,
}); });
console.log('抢险投入统计数据:', res); console.log('抢险投入统计数据:', res);
if (res.code == '00000' && res.data) { if (res.code == '00000' && res.data) {
@ -387,9 +413,18 @@ const getRescueInputStats = async () => {
// 获取灾害统计数据 // 获取灾害统计数据
const getDisasterStats = async () => { const getDisasterStats = async () => {
try { try {
let params = {
start: '',
end: '',
};
if (dateRange.value && dateRange.value.length === 2) {
params.start = formatDateTime(dateRange.value[0]);
params.end = formatDateTime(dateRange.value[1]);
}
const res = await request({ const res = await request({
url: '/snow-ops-platform/sm-event/dashboard/disaster-stats', url: '/snow-ops-platform/sm-event/dashboard/disaster-stats',
method: 'GET', method: 'GET',
params: params,
}); });
console.log('灾害统计数据:', res); console.log('灾害统计数据:', res);
if (res.code == '00000' && res.data) { if (res.code == '00000' && res.data) {
@ -491,6 +526,7 @@ const extractAndSumNumbers = value => {
const handleControlClick = item => { const handleControlClick = item => {
if (item.label === '封闭管控数') { if (item.label === '封闭管控数') {
emit('openClearanceSituation'); emit('openClearanceSituation');
emit('update:dateRange', getdateRange.value || []);
} else if (item.label === '关闭驻地数') { } else if (item.label === '关闭驻地数') {
emit('openControlSituation'); emit('openControlSituation');
} }
@ -499,6 +535,7 @@ const handleControlClick = item => {
// 点击阻断情况 // 点击阻断情况
const handleBlockClick = () => { const handleBlockClick = () => {
emit('openClearanceSituation'); emit('openClearanceSituation');
emit('update:dateRange', dateRange.value);
}; };
// 日期范围选择器 // 日期范围选择器
@ -557,9 +594,18 @@ const controlData2 = ref([
// 获取气象预警受影响统计（按项目） // 获取气象预警受影响统计（按项目）
const getAffectedCountByProject = async () => { const getAffectedCountByProject = async () => {
try { 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({ const res = await request({
url: '/snow-ops-platform/weather-warning/affected-count/_by_project', url: '/snow-ops-platform/weather-warning/affected-count/_by_project',
method: 'GET', method: 'GET',
params: params,
}); });
console.log('气象预警受影响统计:', res); console.log('气象预警受影响统计:', res);
if (res.code === '00000' && res.data) { if (res.code === '00000' && res.data) {
@ -636,12 +682,14 @@ const majorEvent = '0';
// 刷新数据的函数（提前定义，避免watch中调用时未初始化） // 刷新数据的函数（提前定义，避免watch中调用时未初始化）
const init = () => { const init = () => {
console.log('right.vue 刷新数据'); console.log('right.vue 刷新数据');
getYhYjllList(); getYhYjllList(); // 获取应急力量列表数据
getYhYjllListMaterials(); getYhYjllListMaterials(); // 获取物资列表数据
getControlStats();
getRescueInputStats(); getControlStats(); // 获取管控统计数据
getDisasterStats(); getAffectedCountByProject(); // 获取气象预警受影响统计数据
getAffectedCountByProject(); getRescueInputStats(); // 获取抢险投入统计数据
getDisasterStats(); // 获取灾害统计数据
}; };
// 组件挂载时获取数据并注册刷新函数 // 组件挂载时获取数据并注册刷新函数
@ -658,8 +706,8 @@ watch(
newVal => { newVal => {
console.log('right.vue 日期范围变化:', newVal); console.log('right.vue 日期范围变化:', newVal);
if (newVal && newVal.length === 2) { if (newVal && newVal.length === 2) {
}
init(); init();
}
}, },
{ deep: true, immediate: true } { deep: true, immediate: true }
); );

760
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff