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

Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev

Browse Source
This commit is contained in:
huangchenhao 2026-04-09 16:12:50 +08:00
commit cae5a32bb3
16 changed files with 1460 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/screen/src/assets/RiskWarning_img/弹窗背景@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

47
packages/screen/src/component/BlockItem.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div class="block-item">
<slot v-if="title" name="header">
<div class="header">
<div class="header-title">{{ title }}</div>
<div class="header-extra" v-if="$slots.headerExtra">
<slot name="headerExtra"></slot>
</div>
</div>
</slot>
<slot />
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
})
</script>
<style scoped lang="scss">
.block-item {
position: relative;
width: 100%;
& + .block-item {
margin-top: 10px;
}
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.header-title {
font-weight: 500;
font-size: 15px;
color: #4a4a4a;
line-height: 16px;
}
</style>

58
packages/screen/src/component/FileUpload/FileUpload.vue Normal file
View File

@ -0,0 +1,58 @@
<!-- FileUpload.vue -->
<template>
<div class="file-upload">
<UploadBlock v-model="modelValue" :type="type" :multiple="multiple" :limit="limit" :placeholder="placeholder" />
<PreviewBlock v-model:file-list="modelValue" :type="type" />
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
import UploadBlock from './UploadBlock.vue'
import PreviewBlock from './PreviewBlock.vue'
const modelValue = defineModel('modelValue', {
type: Array,
default: () => []
})
const props = defineProps({
// 文件类型: 'image' 或其他
type: {
type: String,
default: 'image'
},
// 上传接口地址
action: {
type: String
},
// 上传请求头
headers: {
type: Object,
default: () => ({})
},
// 是否支持多选
multiple: {
type: Boolean,
default: true
},
// 最大上传数量
limit: {
type: Number,
default: 9
},
// 占位提示文字
placeholder: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:modelValue', 'upload-success', 'upload-error', 'remove'])
</script>
<style scoped>
.file-upload {
width: 100%;
}
</style>

237
packages/screen/src/component/FileUpload/PreviewBlock.vue Normal file
View File

@ -0,0 +1,237 @@
<!-- PreviewBlock.vue - 预览模块 -->
<template>
<div class="preview-block">
<div v-if="showFileList && showFileList.length" class="preview-list">
<div
v-for="file in showFileList"
:key="file.uid"
class="preview-item"
>
<!-- 图片类型且为图片文件时显示预览图 -->
<div v-if="type === 'image' && isImageFile(file)" class="preview-image">
<el-image
:src="file.fileUrl"
:preview-src-list="getImageUrlList()"
fit="cover"
:initial-index="getImageIndex(file)"
>
<template #error>
<div class="image-slot">
<el-icon><Picture /></el-icon>
</div>
</template>
</el-image>
</div>
<!-- 非图片或非图片类型显示图标 -->
<div v-else class="preview-icon">
<el-icon :size="40">
<component :is="getFileIcon(file)" />
</el-icon>
</div>
<div class="preview-info">
<span class="file-name" :title="file.fileName">{{ file.fileName }}</span>
<span class="file-size">{{ formatFileSize(file.fileSize) }}</span>
</div>
<div class="preview-actions">
<el-button
type="danger"
:icon="Delete"
circle
size="small"
@click="handleRemove(file)"
/>
</div>
</div>
</div>
<!-- <div v-else class="preview-empty">
<el-empty description="暂无文件" :image-size="80" />
</div> -->
</div>
</template>
<script setup>
import { computed } from 'vue'
import { Picture, Document, VideoCamera, Delete } from '@element-plus/icons-vue'
const props = defineProps({
fileList: {
type: Array,
default: () => []
},
type: {
type: String,
default: 'image'
}
})
const showFileList = computed(() => {
if(props.type == 'image') return props.fileList.filter(file => isImageFile(file))
if(props.type == 'video') return props.fileList.filter(file => isVideoFile(file))
})
const emit = defineEmits(['update:fileList'])
// 判断是否为图片文件
const isImageFile = (file) => {
// 根据url后缀判断
const imageExtensions = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i
if (file.fileUrl && imageExtensions.test(file.fileUrl)) return true
// 根据文件类型判断
if (file.type && file.type.startsWith('image/')) return true
return false
}
const isVideoFile = (file) => {
// 根据url后缀判断
const videoExtensions = /\.(mp4|avi|mov|wmv|flv|mkv)$/i
if (file.fileUrl && videoExtensions.test(file.fileUrl)) return true
}
// 获取所有图片的URL列表（用于预览）
const getImageUrlList = () => {
return props.fileList
.filter(file => isImageFile(file))
.map(file => file.fileUrl)
}
// 获取当前图片在预览列表中的索引
const getImageIndex = (currentFile) => {
const imageUrls = getImageUrlList()
return imageUrls.findIndex(url => url === currentFile.fileUrl)
}
// 根据文件类型获取对应图标
const getFileIcon = (file) => {
const ext = file.fileName?.split('.').pop()?.toLowerCase() || ''
// 视频文件
if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(ext)) {
return VideoCamera
}
// 音频文件
if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(ext)) {
return VideoCamera
}
// 默认文档图标
return Document
}
// 格式化文件大小
const formatFileSize = (size) => {
if (!size) return ''
if (size < 1024) return size + ' B'
if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB'
return (size / (1024 * 1024)).toFixed(2) + ' MB'
}
// 删除文件
const handleRemove = (file) => {
const index = props.fileList.findIndex(item => item.fileUrl === file.fileUrl)
emit('update:fileList', [...props.fileList.slice(0, index), ...props.fileList.slice(index + 1)] )
}
</script>
<style scoped>
.preview-block {
width: 100%;
}
.preview-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 16px;
}
.preview-item {
position: relative;
width: 120px;
border: 1px solid #ebebeb;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s;
background: #fafafa;
}
.preview-item:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.preview-image {
width: 120px;
height: 120px;
overflow: hidden;
}
.preview-image :deep(.el-image) {
width: 100%;
height: 100%;
}
.preview-image :deep(.el-image__inner) {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-slot {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
color: #909399;
}
.preview-icon {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
color: #409eff;
}
.preview-info {
padding: 8px;
text-align: center;
border-top: 1px solid #ebebeb;
background: white;
}
.file-name {
display: block;
font-size: 12px;
color: #606266;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
display: block;
font-size: 10px;
color: #909399;
margin-top: 4px;
}
.preview-actions {
position: absolute;
top: 4px;
right: 4px;
opacity: 0;
transition: opacity 0.3s;
}
.preview-item:hover .preview-actions {
opacity: 1;
}
.preview-empty {
padding: 40px 0;
}
</style>

141
packages/screen/src/component/FileUpload/UploadBlock.vue Normal file
View File

@ -0,0 +1,141 @@
<!-- UploadBlock.vue -->
<template>
<div class="upload-block">
<el-button type="primary" @click="showFileInput">
<el-icon><Upload /></el-icon>选择文件</el-button
>
<input class="inner-file" ref="fileRef" type="file" @change="uploadFiles" :accept="getAccept()" />
</div>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { request } from '@/utils/request'
const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
type: {
type: String,
default: 'image'
},
headers: {
type: Object,
default: () => ({})
},
multiple: {
type: Boolean,
default: true
},
limit: {
type: Number,
default: 9
},
// 占位提示文字
placeholder: {
type: String,
default: ''
}
})
const fileRef = ref(null)
const emit = defineEmits(['update:modelValue'])
// 按钮文字
const buttonText = computed(() => {
return props.placeholder || '点击上传'
})
// 默认提示文字
const defaultTip = computed(() => {
if (props.type === 'image') {
return '支持图片格式，单个文件不超过 10MB'
}
return '支持文件格式，单个文件不超过 10MB'
})
const showFileInput = () => {
fileRef.value.click()
}
// 上传前校验
const beforeUpload = (file) => {
const isLt10M = file.size / 1024 / 1024 < 10
if (!isLt10M) {
ElMessage.error('文件大小不能超过 10MB!')
return false
}
if (props.type === 'image') {
const isImage = file.type.startsWith('image/')
if (!isImage) {
ElMessage.error('只能上传图片文件!')
return false
}
}
return true
}
const getAccept = () => {
if (props.type === 'image') {
return 'image/*'
}
if (props.type == 'video') {
return 'video/*'
}
return '*/*'
}
const uploadFiles = async (event) => {
const file = event.target.files[0]
const name = file.name
try {
const formData = new FormData()
formData.append('file', file)
const res = await request({
url: '/snow-ops-platform/file/upload',
method: 'post',
data: formData
})
if (res.code === '00000') {
let fileType = 3
if(props.type == 'image') fileType = 1
if(props.type == 'video') fileType = 2
const url = res.data
const fileData = {
fileName: name,
fileUrl: url,
fileType,
fileSize: file.size
}
emit('update:modelValue', [...props.modelValue, fileData])
} else {
throw new Error(res.message)
}
} catch (error) {
console.log(error)
}
fileRef.value.value = null
}
</script>
<style scoped>
.upload-block {
position: relative;
margin-bottom: 20px;
}
.inner-file {
z-index: 0;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
</style>

6
packages/screen/src/views/DisasterManagement/DisasterDetail/ContinueReport.vue
View File

@ -78,9 +78,7 @@
</el-form-item>
<!-- 损失列表组件 -->
<el-form-item label="灾毁损失">
<loss-list v-model="formData.lossList" />
</el-form-item>
<loss-list :col-span="24" v-model="formData.lossList" />
<!-- 处理情况 -->
<el-form-item label="处理情况">
@ -140,7 +138,7 @@
import { ref, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { request } from '@shared/utils/request'
// import LossList from './LossList.vue'
import LossList from '../DisasterReport/LossList.vue'
// Props 定义
const props = defineProps({

14
packages/screen/src/views/DisasterManagement/DisasterManagement.vue
View File

@ -90,9 +90,9 @@
<el-table-column prop="routeNo" label="所属区县" min-width="120" />
<el-table-column prop="routeNo" label="路线编号" min-width="120" />
<el-table-column prop="routeName" label="路线名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="startPile" label="起点桩号" min-width="110" />
<el-table-column prop="endPile" label="终点桩号" min-width="110" />
<el-table-column prop="occurLocation" label="发生地点" min-width="180" show-overflow-tooltip />
<el-table-column prop="startPile" label="起点桩号" min-width="110" show-overflow-tooltip />
<el-table-column prop="endPile" label="终点桩号" min-width="110" show-overflow-tooltip />
<el-table-column prop="roadConditionLocation" label="路况位置" min-width="150" show-overflow-tooltip />
<el-table-column prop="isBlocked" label="是否阻断" width="90" align="center">
<template #default="{ row }">
<el-tag :type="row.isBlocked === '是' ? 'danger' : 'success'" size="small">
@ -100,8 +100,8 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="disasterType" label="灾害类型" min-width="120" />
<el-table-column prop="roadConditionType" label="路线类别" min-width="110" />
<el-table-column prop="disasterType" label="事件类型" min-width="120" show-overflow-tooltip />
<el-table-column prop="roadConditionType" label="路况类别" min-width="110" show-overflow-tooltip />
<el-table-column prop="eventStatus" label="事件状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="row.eventStatus === 1 ? 'success' : 'danger'" size="small">
@ -109,8 +109,8 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="measure" label="处理措施" min-width="120" show-overflow-tooltip />
<el-table-column prop="occurTime" label="发生时间" width="170" />
<el-table-column prop="measure" label="处理措施" min-width="150" show-overflow-tooltip />
<el-table-column prop="occurTime" label="发现时间" width="170" />
<el-table-column prop="expectRecoverTime" label="预计恢复时间" width="170" />
<el-table-column prop="contactPerson" label="联系人" width="110" />
<el-table-column prop="contactPhone" label="联系电话" width="120" />

148
packages/screen/src/views/DisasterManagement/DisasterReport/LossList.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<el-row class="loss-list-pc" :gutter="24">
<el-col :span="colSpan" v-for="(item, index) in configs" :key="index">
<el-form-item :label="item.lossTypeName">
<el-input :modelValue="getValue(item)" @update:modelValue="(event) => changeValue(item, event)">
<template #suffix>
<span>{{ item.unit }}</span>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete, Plus } from '@element-plus/icons-vue'
import { request } from '@shared/utils/request'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
colSpan: {
type: Number,
default: 8
}
})
const getValue = (config) => {
const value = props.modelValue.find((v) => v.lossTypeId === config.lossTypeId)
if (value == null) props.modelValue.push({ ...config })
return value?.totalAmount || 0
}
const configs = ref([])
// 获取损失类型字典
const getLossDict = async () => {
try {
const res = await request({
url: '/snow-ops-platform/water-damage/loss/typeAndInfo',
method: 'get'
})
configs.value = res.data?.records
} catch (error) {
console.error('获取损失类型失败:', error)
ElMessage.error('获取损失类型失败')
}
}
onMounted(async () => {
await getLossDict()
})
</script>
<style scoped lang="scss">
.loss-list-pc {
width: 100%;
.loss-table {
margin-bottom: 16px;
:deep(.el-table) {
.amount-cell {
display: flex;
align-items: center;
gap: 8px;
.unit-text {
color: #909399;
font-size: 14px;
white-space: nowrap;
}
}
}
}
.add-button-wrapper {
display: flex;
justify-content: flex-start;
}
.calculate-form {
padding: 8px 0;
:deep(.el-form-item) {
margin-bottom: 20px;
}
}
.calculation-preview {
background-color: #f5f7fa;
border-radius: 8px;
padding: 16px;
margin-top: 16px;
.preview-item {
display: flex;
justify-content: space-between;
align-items: center;
.preview-label {
color: #606266;
font-size: 14px;
}
.preview-value {
color: #f56c6c;
font-size: 16px;
font-weight: 500;
}
}
}
.loss-picker-content {
max-height: 400px;
overflow-y: auto;
padding: 8px 0;
.loss-radio-group {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
.loss-radio-item {
margin: 0;
padding: 10px 12px;
border-radius: 6px;
width: 100%;
box-sizing: border-box;
:deep(.el-radio__label) {
width: calc(100% - 22px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>

810
packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReport.vue
View File

@ -9,405 +9,345 @@
</div>
</template>
<el-row :gutter="24">
<!-- 路况类别 -->
<el-col :span="8">
<el-form-item label="路况类别" prop="roadConditionType">
<el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
<el-option label="高速公路" value="高速公路" />
<el-option label="国道" value="国道" />
<el-option label="省道" value="省道" />
<el-option label="县道" value="县道" />
<el-option label="乡道" value="乡道" />
<el-option label="村道" value="村道" />
</el-select>
</el-form-item>
</el-col>
<BlockItem title="填报人员信息">
<el-row :gutter="24">
<!-- 填报单位 -->
<el-col :span="8">
<el-form-item label="填报单位" prop="event.reporterUnit">
<el-input v-model="formData.event.reporterUnit" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 联系人 -->
<el-col :span="8">
<el-form-item label="联系人员" prop="event.contactPerson">
<el-input v-model="formData.event.contactPerson" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 联系电话 -->
<el-col :span="8">
<el-form-item label="联系电话" prop="event.contactPhone">
<el-input v-model="formData.event.contactPhone" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
<!-- 是否阻断 -->
<el-col :span="8">
<el-form-item label="是否阻断" prop="event.isBlocked">
<el-select v-model="formData.event.isBlocked" placeholder="请选择" style="width: 100%">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
</el-col>
<BlockItem title="路况事件信息">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="事件类型">
<el-select v-model="eventType" placeholder="请选择" style="width: 100%">
<el-option label="水毁事件" value="水毁事件" />
<el-option label="冰雪事件" value="冰雪事件" />
</el-select>
</el-form-item>
</el-col>
<!-- 路况类别 -->
<el-col :span="8">
<el-form-item label="路况类别" prop="roadConditionType">
<el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
<el-option label="高速公路" value="高速公路" />
<el-option label="国道" value="国道" />
<el-option label="省道" value="省道" />
<el-option label="县道" value="县道" />
<el-option label="乡道" value="乡道" />
<el-option label="村道" value="村道" />
</el-select>
</el-form-item>
</el-col>
<!-- 是否阻断 -->
<el-col :span="8">
<el-form-item label="是否阻断" prop="event.isBlocked">
<el-select v-model="formData.event.isBlocked" placeholder="请选择" style="width: 100%">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 抢险进度 -->
<el-col :span="8">
<el-form-item label="抢险进度" prop="event.repairProgress">
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
<el-option label="未抢险" value="未抢险" />
<el-option label="抢险中" value="抢险中" />
</el-select>
</el-form-item>
</el-col>
<!-- 处理措施-->
<el-col :span="8">
<el-form-item label="处理措施" prop="event.repairProgress">
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
<el-option label="全幅封闭" value="全幅封闭" />
<el-option label="半幅封闭" value="半幅封闭" />
<el-option label="正常通行" value="正常通行" />
<el-option label="限制通行" value="限制通行" />
</el-select>
</el-form-item>
</el-col>
<!-- 水毁处数 -->
<el-col :span="8">
<el-form-item label="水毁处数" prop="event.damageCount">
<el-input-number v-model="formData.event.damageCount" :min="0" :step="1" style="width: 100%" placeholder="请填写">
<template #suffix>
<span class="unit-text">处</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 阻断里程 -->
<el-col :span="8">
<el-form-item label="阻断里程" prop="event.blockedMileage">
<el-input-number v-model="formData.event.blockedMileage" :min="0" :precision="3" style="width: 100%" placeholder="请填写">
<template #suffix>
<span class="unit-text">公里</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 发生时间 -->
<el-col :span="8">
<el-form-item label="发生时间" prop="occurTime">
<el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<!-- 预计恢复时间 -->
<el-col :span="8">
<el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
<el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 现场描述 -->
<el-col :span="16">
<el-form-item label="现场描述" prop="report.siteDescription">
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
<!-- 抢修进度 -->
<el-col :span="8">
<el-form-item label="抢修进度" prop="event.repairProgress">
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
<el-option label="未抢修" value="未抢修" />
<el-option label="抢修中" value="抢修中" />
<el-option label="已完成" value="已完成" />
</el-select>
</el-form-item>
</el-col>
<BlockItem title="位置信息">
<el-row :gutter="24">
<!-- 线路编号 -->
<el-col :span="8">
<el-form-item label="路线类型" prop="routeNo">
<el-input v-model="formData.routeNo" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 所属区县 -->
<el-col :span="8">
<el-form-item label="所属区县" prop="event.district">
<el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%">
<el-option label="万州区" value="万州区" />
<el-option label="开州区" value="开州区" />
<el-option label="黔江区" value="黔江区" />
<el-option label="涪陵区" value="涪陵区" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="地点路线" prop="routeNo">
<el-input v-model="formData.routeNo" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 起点桩号 -->
<el-col :span="8">
<el-form-item label="起点桩号(K)" prop="event.startStakeNo">
<el-input v-model="formData.event.startStakeNo" placeholder="请填写">
<template #append>K</template>
</el-input>
</el-form-item>
</el-col>
<!-- 止点桩号 -->
<el-col :span="8">
<el-form-item label="止点桩号(K)" prop="event.endStakeNo">
<el-input v-model="formData.event.endStakeNo" placeholder="请填写">
<template #append>K</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 路况位置 -->
<el-col :span="8">
<el-form-item label="路况位置" prop="occurLocation">
<el-input v-model="formData.occurLocation" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 阻断点小地名 -->
<el-col :span="8">
<el-form-item label="阻断点小地名" prop="event.blockedPointName">
<el-input v-model="formData.event.blockedPointName" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 经度 -->
<el-col :span="8">
<el-form-item label="经度" prop="event.startStakeLng">
<el-input v-model="formData.event.startStakeLng" placeholder="经度"> </el-input>
</el-form-item>
</el-col>
<!-- 水毁处数 -->
<el-col :span="8">
<el-form-item label="水毁处数" prop="event.damageCount">
<el-input-number v-model="formData.event.damageCount" :min="0" :step="1" style="width: 100%" placeholder="请填写" />
<span class="unit-suffix">处</span>
</el-form-item>
</el-col>
<!-- 阻断里程 -->
<el-col :span="8">
<el-form-item label="阻断里程" prop="event.blockedMileage">
<el-input-number v-model="formData.event.blockedMileage" :min="0" :precision="3" style="width: 100%" placeholder="请填写" />
<span class="unit-suffix">公里</span>
</el-form-item>
</el-col>
<!-- 发生时间 -->
<el-col :span="8">
<el-form-item label="发生时间" prop="occurTime">
<el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<!-- 线路编号 -->
<el-col :span="8">
<el-form-item label="线路编号" prop="routeNo">
<el-input v-model="formData.routeNo" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 填报单位（新增字段） -->
<el-col :span="8">
<el-form-item label="填报单位" prop="event.reporterUnit">
<el-input v-model="formData.event.reporterUnit" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 联系人 -->
<el-col :span="8">
<el-form-item label="联系人" prop="event.contactPerson">
<el-input v-model="formData.event.contactPerson" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 联系电话 -->
<el-col :span="8">
<el-form-item label="联系电话" prop="event.contactPhone">
<el-input v-model="formData.event.contactPhone" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 所属区县 -->
<el-col :span="8">
<el-form-item label="所属区县" prop="event.district">
<el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%">
<el-option label="万州区" value="万州区" />
<el-option label="开州区" value="开州区" />
<el-option label="黔江区" value="黔江区" />
<el-option label="涪陵区" value="涪陵区" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- 纬度 -->
<el-col :span="8">
<el-form-item label="纬度" prop="event.startStakeLat">
<el-input v-model="formData.event.startStakeLat" placeholder="纬度"> </el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="图片上传" prop="fileList">
<FileUpload type="image" :limit="9" v-model="formData.fileList" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="视频上传" prop="fileList">
<FileUpload type="video" :limit="9" v-model="formData.fileList" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
</el-card>
<!-- 位置信息区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">位置信息</span>
</div>
</template>
<el-card title="灾毁损失">
<BlockItem title="路况事件信息">
<el-row :gutter="24">
<!-- 受伤人员 -->
<el-col :span="8">
<el-form-item label="受伤人员" prop="report.injuredCount">
<el-input-number v-model="formData.report.injuredCount" :min="0" :step="1" style="width: 100%">
<template #suffix>
<span class="unit-text">人</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<el-row :gutter="24">
<!-- 起点桩号 -->
<el-col :span="8">
<el-form-item label="起点桩号(K)" prop="event.startStakeNo">
<el-input v-model="formData.event.startStakeNo" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 死亡人员 -->
<el-col :span="8">
<el-form-item label="死亡人员" prop="report.deadCount">
<el-input-number v-model="formData.report.deadCount" :min="0" :step="1" style="width: 100%">
<template #suffix>
<span class="unit-text">人</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<!-- 起点经度 -->
<el-col :span="8">
<el-form-item label="起点经度" prop="event.startStakeLng">
<el-input v-model="formData.event.startStakeLng" placeholder="经度" />
</el-form-item>
</el-col>
<!-- 滞留人员 -->
<el-col :span="8">
<el-form-item label="滞留人员" prop="report.strandedPersonCount">
<el-input-number v-model="formData.report.strandedPersonCount" :min="0" :step="1" style="width: 100%">
<template #suffix>
<span class="unit-text">人</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<!-- 起点纬度 -->
<el-col :span="8">
<el-form-item label="起点纬度" prop="event.startStakeLat">
<el-input v-model="formData.event.startStakeLat" placeholder="纬度" />
</el-form-item>
</el-col>
<!-- 损坏车辆 -->
<el-col :span="8">
<el-form-item label="损坏车辆" prop="report.damagedVehicleCount">
<el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :step="1" style="width: 100%">
<template #suffix>
<span class="unit-text">辆</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<!-- 止点桩号 -->
<el-col :span="8">
<el-form-item label="止点桩号(K)" prop="event.endStakeNo">
<el-input v-model="formData.event.endStakeNo" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 滞留车辆 -->
<el-col :span="8">
<el-form-item label="滞留车辆" prop="report.strandedVehicleCount">
<el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :step="1" style="width: 100%">
<template #suffix>
<span class="unit-text">辆</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
</el-row>
</BlockItem>
<BlockItem title="道路损失及其他">
<LossList v-model:model-value="formData.report.lossList" />
<!-- 止点经度 -->
<el-col :span="8">
<el-form-item label="止点经度" prop="event.endStakeLng">
<el-input v-model="formData.event.endStakeLng" placeholder="经度" />
</el-form-item>
</el-col>
<el-row :gutter="24">
<!-- 已投入机械 -->
<el-col :span="8">
<el-form-item label="已投入机械" prop="report.investedMachinery">
<el-input-number v-model="formData.report.investedMachinery" :min="0" :precision="1" style="width: 100%" placeholder="请填写">
<template #suffix>
<span class="unit-text">台/班</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<!-- 止点纬度 -->
<el-col :span="8">
<el-form-item label="止点纬度" prop="event.endStakeLat">
<el-input v-model="formData.event.endStakeLat" placeholder="纬度" />
</el-form-item>
</el-col>
<!-- 已投入人力 -->
<el-col :span="8">
<el-form-item label="投入人力" prop="report.investedManpower">
<el-input-number v-model="formData.report.investedManpower" :min="0" :step="1" style="width: 100%" placeholder="请填写">
<template #suffix>
<span class="unit-text">人次</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<!-- 路况位置 -->
<el-col :span="8">
<el-form-item label="路况位置" prop="occurLocation">
<el-input v-model="formData.occurLocation" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 已投入资金 -->
<el-col :span="8">
<el-form-item label="已投入资金" prop="report.investedFunds">
<el-input-number v-model="formData.report.investedFunds" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
<template #suffix>
<span class="unit-text">万元</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<!-- 阻断点小地名 -->
<el-col :span="8">
<el-form-item label="阻断点小地名" prop="event.blockedPointName">
<el-input v-model="formData.event.blockedPointName" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 其他损失描述 -->
<el-col :span="24">
<el-form-item label="其他损失描述" prop="report.siteDescription">
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
<BlockItem title="恢复重建预估费用">
<el-row :gutter="24">
<!-- 是否需要恢复重建 -->
<el-col :span="8">
<el-form-item label="是否需要恢复重建" prop="event.needsRecovery">
<el-select v-model="formData.event.needsRecovery" placeholder="请选择" style="width: 100%">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
</el-col>
<!-- 处置情况区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">处置情况</span>
</div>
</template>
<el-row :gutter="24">
<!-- 处置措施（多选） -->
<el-col :span="24">
<el-form-item label="处置措施" prop="report.disposalMeasures">
<el-checkbox-group v-model="disposalMeasuresArray">
<el-checkbox label="halfClose">半幅封闭</el-checkbox>
<el-checkbox label="fullClose">全副封闭</el-checkbox>
<el-checkbox label="bypass">便道通行</el-checkbox>
<el-checkbox label="normal">正常通行</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
<!-- 预计恢复时间 -->
<el-col :span="8">
<el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
<el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<!-- 实际恢复时间 -->
<el-col :span="8">
<el-form-item label="实际恢复时间" prop="report.actualRecoverTime">
<el-date-picker v-model="formData.report.actualRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 人员车辆区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">人员车辆</span>
</div>
</template>
<el-row :gutter="24">
<!-- 受伤人员 -->
<el-col :span="8">
<el-form-item label="受伤人员" prop="report.injuredCount">
<el-input-number v-model="formData.report.injuredCount" :min="0" :step="1" style="width: 100%" />
<span class="unit-suffix">人</span>
</el-form-item>
</el-col>
<!-- 死亡人员 -->
<el-col :span="8">
<el-form-item label="死亡人员" prop="report.deadCount">
<el-input-number v-model="formData.report.deadCount" :min="0" :step="1" style="width: 100%" />
<span class="unit-suffix">人</span>
</el-form-item>
</el-col>
<!-- 滞留人员 -->
<el-col :span="8">
<el-form-item label="滞留人员" prop="report.strandedPersonCount">
<el-input-number v-model="formData.report.strandedPersonCount" :min="0" :step="1" style="width: 100%" />
<span class="unit-suffix">人</span>
</el-form-item>
</el-col>
<!-- 损坏车辆 -->
<el-col :span="8">
<el-form-item label="损坏车辆" prop="report.damagedVehicleCount">
<el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :step="1" style="width: 100%" />
<span class="unit-suffix">辆</span>
</el-form-item>
</el-col>
<!-- 滞留车辆 -->
<el-col :span="8">
<el-form-item label="滞留车辆" prop="report.strandedVehicleCount">
<el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :step="1" style="width: 100%" />
<span class="unit-suffix">辆</span>
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 灾毁损失区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">灾毁损失</span>
</div>
</template>
<!-- 灾毁损失列表组件（需要根据实际业务实现） -->
<el-row :gutter="24">
<el-col :span="24">
<LossList v-model="formData.lossList" />
</el-col>
<!-- 处理情况 -->
<el-col :span="12">
<el-form-item label="处理情况" prop="report.remark">
<el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" />
</el-form-item>
</el-col>
<!-- 损失总金额 -->
<el-col :span="12">
<el-form-item label="损失总金额" prop="report.totalLossAmount">
<el-input-number v-model="formData.report.totalLossAmount" :min="0" :precision="2" style="width: 100%" placeholder="请填写（选填）" />
<span class="unit-suffix">万元</span>
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 投入资源区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">投入资源</span>
</div>
</template>
<el-row :gutter="24">
<!-- 已投机械 -->
<el-col :span="8">
<el-form-item label="已投机械" prop="report.investedMachinery">
<el-input-number v-model="formData.report.investedMachinery" :min="0" :precision="1" style="width: 100%" />
<span class="unit-suffix">台/班</span>
</el-form-item>
</el-col>
<!-- 已投入力 -->
<el-col :span="8">
<el-form-item label="已投入力" prop="report.investedManpower">
<el-input-number v-model="formData.report.investedManpower" :min="0" :step="1" style="width: 100%" />
<span class="unit-suffix">人次</span>
</el-form-item>
</el-col>
<!-- 已投资金 -->
<el-col :span="8">
<el-form-item label="已投资金" prop="report.investedFunds">
<el-input-number v-model="formData.report.investedFunds" :min="0" :precision="2" style="width: 100%" />
<span class="unit-suffix">万元</span>
</el-form-item>
</el-col>
<!-- 现场描述 -->
<el-col :span="24">
<el-form-item label="现场描述" prop="report.siteDescription">
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 附件上传区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">附件上传</span>
</div>
</template>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="图片上传" prop="fileList">
<el-upload
v-model:file-list="imageFileList"
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="9"
:on-preview="handlePicturePreview"
:on-remove="handlePictureRemove"
:before-upload="beforeImageUpload"
accept="image/jpeg,image/png"
>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="upload-tip">只能上传jpg/png格式，且不超过500kb</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="视频上传" prop="fileList">
<el-upload v-model:file-list="videoFileList" action="#" :auto-upload="false" :limit="1" :before-upload="beforeVideoUpload" accept="video/*">
<el-button type="primary"
><el-icon><Upload /></el-icon> 选择文件</el-button
>
</el-upload>
<div class="upload-tip">仅支持20s内的视频，不超过20MB</div>
<div v-if="videoFileList.length > 0 && videoFileList[0].url" class="video-preview">
<video :src="videoFileList[0].url" controls style="width: 100%; max-height: 200px"></video>
</div>
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 恢复重建区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">恢复重建</span>
</div>
</template>
<el-row :gutter="24">
<!-- 是否需要恢复重建 -->
<el-col :span="8">
<el-form-item label="是否需要恢复重建" prop="event.needsRecovery">
<el-select v-model="formData.event.needsRecovery" placeholder="请选择" style="width: 100%">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
</el-col>
<!-- 恢复重建预估费用 -->
<el-col :span="8" v-if="!isContinue">
<el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
<el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%" />
<span class="unit-suffix">万元</span>
</el-form-item>
</el-col>
</el-row>
<!-- 恢复重建预估费用 -->
<el-col :span="8" v-if="!isContinue">
<el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
<el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
<template #suffix>
<span class="unit-text">万元</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
</el-row>
</BlockItem>
</el-card>
<!-- 提交按钮 -->
@ -431,7 +371,9 @@ import { ElMessage } from 'element-plus'
import { Plus, Upload } from '@element-plus/icons-vue'
import mockData from './waterMockJson.json'
import { request } from '@/utils/request'
// import LossList from './LossList.vue'
import LossList from './LossList.vue'
import BlockItem from '@/component/BlockItem.vue'
import FileUpload from '@/component/FileUpload/FileUpload.vue'
const router = useRouter()
const route = useRoute()
@ -448,52 +390,53 @@ const disposalMeasuresArray = ref([])
const imageFileList = ref([])
const videoFileList = ref([])
// 表单数据 - 按 H5 Request 接口结构定义
const eventType = ref('水毁事件')
const formData = reactive({
// 顶层字段
occurLocation: '', // 发生地点/路况位置
occurTime: '', // 发生时间
roadConditionType: '', // 路况类别
routeNo: '', // 线路编号
occurLocation: null, // 发生地点/路况位置
occurTime: null, // 发生时间
roadConditionType: null, // 路况类别
routeNo: null, // 线路编号
// event 对象
event: {
blockedMileage: '', // 阻断里程
blockedPointName: '', // 阻断点小地名
contactPerson: '', // 联系人
contactPhone: '', // 联系电话
damageCount: '', // 水毁处数
district: '', // 上报区县
endStakeLat: '', // 止点纬度
endStakeLng: '', // 止点经度
endStakeNo: '', // 止点桩号
estimatedRecoveryCost: '', // 恢复重建预估费用
inspectionMileage: '', // 巡查里程
isBlocked: '', // 是否阻断
needsRecovery: '', // 是否需要恢复重建
repairProgress: '', // 抢修进度
reporterUnit: '', // 填报单位
startStakeLat: '', // 起点纬度
startStakeLng: '', // 起点经度
startStakeNo: '' // 起点桩号
blockedMileage: null, // 阻断里程
blockedPointName: null, // 阻断点小地名
contactPerson: null, // 联系人
contactPhone: null, // 联系电话
damageCount: null, // 水毁处数
district: null, // 上报区县
endStakeLat: null, // 止点纬度
endStakeLng: null, // 止点经度
endStakeNo: null, // 止点桩号
estimatedRecoveryCost: null, // 恢复重建预估费用
inspectionMileage: null, // 巡查里程
isBlocked: null, // 是否阻断
needsRecovery: null, // 是否需要恢复重建
repairProgress: null, // 抢修进度
reporterUnit: null, // 填报单位
startStakeLat: null, // 起点纬度
startStakeLng: null, // 起点经度
startStakeNo: null // 起点桩号
},
// report 对象
report: {
actualRecoverTime: '', // 实际恢复时间
damagedVehicleCount: '', // 损坏车辆
deadCount: '', // 死亡人员
disposalMeasures: '', // 处置措施（逗号分隔）
expectRecoverTime: '', // 预计恢复时间
injuredCount: '', // 受伤人员
investedFunds: '', // 已投资金
investedMachinery: '', // 已投机械
investedManpower: '', // 已投人力
remark: '', // 处理情况/备注
siteDescription: '', // 现场描述
strandedPersonCount: '', // 滞留人员
strandedVehicleCount: '', // 滞留车辆
totalLossAmount: '' // 损失总金额
actualRecoverTime: null, // 实际恢复时间
damagedVehicleCount: null, // 损坏车辆
deadCount: null, // 死亡人员
disposalMeasures: null, // 处置措施（逗号分隔）
expectRecoverTime: null, // 预计恢复时间
injuredCount: null, // 受伤人员
investedFunds: null, // 已投资金
investedMachinery: null, // 已投机械
investedManpower: null, // 已投人力
remark: null, // 处理情况/备注
siteDescription: null, // 现场描述
strandedPersonCount: null, // 滞留人员
strandedVehicleCount: null, // 滞留车辆
totalLossAmount: null // 损失总金额
},
// lossList 数组
@ -507,7 +450,7 @@ const formData = reactive({
watch(
disposalMeasuresArray,
(newVal) => {
formData.report.disposalMeasures = newVal.join(',')
formData.report.disposalMeasures = newVal.length ? newVal.join(',') : null
},
{ deep: true }
)
@ -515,7 +458,7 @@ watch(
// 监听图片附件变化，同步到 fileList
watch(
imageFileList,
(newVal) => {
() => {
syncFileList()
},
{ deep: true }
@ -524,7 +467,7 @@ watch(
// 监听视频附件变化，同步到 fileList
watch(
videoFileList,
(newVal) => {
() => {
syncFileList()
},
{ deep: true }
@ -554,6 +497,8 @@ watch(
(newVal) => {
if (newVal && typeof newVal === 'string') {
disposalMeasuresArray.value = newVal.split(',').filter(Boolean)
} else {
disposalMeasuresArray.value = []
}
},
{ immediate: true }
@ -640,7 +585,7 @@ const validate = async () => {
// 提交表单
const handleSubmit = async () => {
// 验证表单
if (!validate()) {
if (!(await validate())) {
return
}
@ -680,7 +625,12 @@ const handleSubmit = async () => {
// 加载编辑数据
const loadEditData = async () => {
initFormData(mockData)
if(route.query.mock) {
initFormData(mockData)
} else {
initFormData({})
}
}
onMounted(() => {
@ -697,7 +647,6 @@ defineExpose({
<style scoped lang="scss">
.disaster-form-page {
padding: 20px;
background-color: #f5f7fa;
.disaster-form {
@ -746,8 +695,7 @@ defineExpose({
border-left: 3px solid #409eff;
}
.unit-suffix {
margin-left: 8px;
.unit-text {
color: #909399;
font-size: 12px;
}

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

@ -1,34 +1,32 @@
<template>
<base-dialog
v-model:visible="props.visible"
:title="dialogTitle"
:table-data="[]"
:table-columns="[]"
:table-height="0"
:total="0"
:current-page="1"
:page-size="10"
:z-index="1000"
:max-width="400"
:show-filter="false"
:show-pagination="false"
@close="handleClose"
<div
v-if="props.visible"
class="map-info-dialog"
:style="{ backgroundImage: `url(${iconProject})` }"
>
<!-- 标题栏下方自定义插槽 -->
<template #header>
<div class="dialog-content">
<div class="info-item" v-for="(item, index) in dialogItems" :key="index">
<label class="info-label">{{ item.label }}：</label>
<span class="info-value">{{ item.value }}</span>
</div>
<!-- 关闭按钮 -->
<div class="dialog-close" @click="handleClose">×</div>
<!-- 标题栏 -->
<div class="dialog-header" @click="handleClose">
<span class="header-title">{{ dialogTitle }}</span>
<img class="header-icon" :src="iconTunnel" alt="" />
</div>
<!-- 内容区域 -->
<div class="dialog-content">
<div class="info-row" v-for="(item, index) in dialogItems" :key="index">
<span class="info-label">{{ item.label }}：</span>
<span class="info-value">{{ item.value }}</span>
</div>
</template>
</base-dialog>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits, computed } from "vue";
import baseDialog from "../component/baseDialog.vue";
import iconProject from "../../../assets/RiskWarning_img/弹窗背景@2x.png";
import iconTunnel from "../../../assets/RiskWarning_img/图标_media_dvr@2x.png";
const props = defineProps({
visible: {
@ -58,6 +56,8 @@ const dialogTitle = computed(() => {
tunnel: "隧道信息",
bridge: "桥梁信息",
road: "路段信息",
emergency: "抢险队伍",
slope: "边坡信息",
};
return titleMap[props.type] || "详细信息";
});
@ -69,50 +69,196 @@ const dialogItems = computed(() => {
switch (type) {
case "project":
return [
{ label: "项目名称", value: data.NAME || data.name || "-" },
{ label: "所属区县", value: data.COUNTY || data.county || "-" },
{ label: "路线编号", value: data.ROUTE_CODE || data.routeCode || "-" },
{ label: "路线名称", value: data.ROUTE_NAME || data.routeName || "-" },
{ label: "项目类型", value: data.TYPE || data.type || "-" },
{ label: "建设状态", value: data.STATUS || data.status || "-" },
{ label: "开始时间", value: data.START_TIME || data.startTime || "-" },
{ label: "预计完成", value: data.END_TIME || data.endTime || "-" },
{ label: "项目名称", value: data.PROJECT_NAME || "-" },
{ label: "子项目名称", value: data.SUB_PROJECT_NAME || "-" },
{ label: "行政区域", value: data.ADMINISTRATIVE_REGION || "-" },
{ label: "驻地名称", value: data.SITE_NAME || "-" },
{ label: "驻地地址", value: data.SITE_ADDRESS || data.COUNTY || "-" },
{ label: "驻地人数", value: data.SITE_POPULATION || "-" },
{ label: "驻地类型", value: data.SITE_TYPE || "-" },
{ label: "驻地风险等级", value: data.RISK_LEVEL || "-" },
{ label: "搬迁状态", value: data.RELOCATION_STATUS || "-" },
{ label: "项目类型", value: data.PROJECT_TYPE || "-" },
{ label: "房建类型", value: data.BUILDING_TYPE || "-" },
{ label: "建设单位", value: data.CONSTRUCTION_UNIT || "-" },
{ label: "业主责任人", value: data.OWNER_RESPONSIBLE_PERSON || "-" },
{ label: "业主责任人电话", value: data.OWNER_RESPONSIBLE_PHONE || "-" },
{ label: "施工责任人", value: data.CONSTRUCTOR_RESPONSIBLE_PERSON || "-" },
{ label: "施工责任人电话", value: data.CONSTRUCTOR_RESPONSIBLE_PHONE || "-" },
{ label: "驻地责任人", value: data.SITE_RESPONSIBLE_PERSON || "-" },
{ label: "驻地责任人电话", value: data.SITE_RESPONSIBLE_PHONE || "-" },
{ label: "市级责任人", value: data.CITY_RESPONSIBLE_PERSON || "-" },
{ label: "市级责任人电话", value: data.CITY_RESPONSIBLE_PHONE || "-" },
{ label: "区县责任人", value: data.DISTRICT_RESPONSIBLE_PERSON || "-" },
{ label: "区县责任人电话", value: data.DISTRICT_RESPONSIBLE_PHONE || "-" },
{ label: "吹哨人", value: data.WHISTLEBLOWER_NAME || "-" },
{ label: "吹哨人电话", value: data.WHISTLEBLOWER_PHONE || "-" },
{ label: "备注", value: data.REMARKS || "-" },
];
case "tunnel":
return [
{ label: "隧道名称", value: data.NAME || data.name || data.GL1_SDMC || "-" },
{ label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
{ label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
{ label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
{ label: "隧道长度", value: data.LENGTH || data.GL1_SDCD ? `${data.LENGTH || data.GL1_SDCD}(米)` : "-" },
{ label: "隧道净宽", value: data.WIDTH || data.GL1_SDKD ? `${data.WIDTH || data.GL1_SDKD}(米)` : "-" },
{ label: "隧道净高", value: data.HEIGHT || data.GL1_SDGD ? `${data.HEIGHT || data.GL1_SDGD}(米)` : "-" },
{ label: "建成时间", value: data.BUILD_TIME || data.buildTime || data.GL1_JCSJ || "-" },
{ label: "评定等级", value: data.GRADE || data.grade || data.GL1_PDDJ || "-" },
{
label: "隧道名称",
value: data.GL1_SDMC || "-",
},
{
label: "建成时间",
value:
data.HEIGHT || data.GL1_SDGD
? `${data.HEIGHT || data.GL1_SDGD}(米)`
: "-",
},
{
label: "编号",
value: data.GL1_ZJ || "-",
},
{
label: "入口桩号",
value: data.GL1_RKZH || "-",
},
{
label: "所属区县",
value: data.GL1_QXMC || "-",
},
{
label: "隧道净宽",
value: data.GL1_SDJG || "-",
},
{
label: "隧道净高",
value: data.GL1_SDJK || "-",
},
{
label: "隧道长度",
value: data.GL1_SDC || "-",
},
{
label: "路线编号",
value: data.GL1_LXBH || "-",
},
{
label: "长度分类",
value: data.GL1_SDLX || "-",
},
{
label: "路线名称",
value: data.GL1_LXMC || "-",
},
{
label: "评定等级",
value: data.GL1_PDDJ || "-",
},
];
case "bridge":
return [
{ label: "桥梁名称", value: data.NAME || data.name || data.GL1_QLMC || "-" },
{ label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
{ label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
{ label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
{ label: "桥梁长度", value: data.LENGTH || data.GL1_QLCD ? `${data.LENGTH || data.GL1_QLCD}(米)` : "-" },
{ label: "桥梁宽度", value: data.WIDTH || data.GL1_QLKD ? `${data.WIDTH || data.GL1_QLKD}(米)` : "-" },
{ label: "桥梁类型", value: data.TYPE || data.type || data.GL1_QLXZ || "-" },
{ label: "建成时间", value: data.BUILD_TIME || data.buildTime || data.GL1_JCSJ || "-" },
{ label: "评定等级", value: data.GRADE || data.grade || data.GL1_PDDJ || "-" },
{
label: "桥梁名称",
value: data.GL1_QLMC || "-",
},
{
label: "编号",
value: data.GL1_QLDM || "-",
},
{
label: "所属区县",
value: data.GL1_QXMC || "-",
},
{
label: "桥梁长度",
value: data.GL1_QLQC || "-",
},
{
label: "路线编号",
value: data.GL1_QLDM || "-",
},
{
label: "路线名称",
value: data.GL1_LXMC || "-",
},
{
label: "建成时间",
value: data.TYPE || "-",
},
{
label: "中心桩号",
value: data.GL1_ZXZH || "-",
},
{
label: "跨径总长",
value: data.GL1_AKJFLDM || "-",
},
{
label: "跨径分类",
value: data.GL1_AKJFLLX || "-",
},
{
label: "技术状况",
value: data.GL1_PDDJ || "-",
},
];
case "road":
return [
{ label: "路段名称", value: data.NAME || data.name || data.GL1_LDMC || "-" },
{ label: "所属区县", value: data.COUNTY || data.county || data.GL1_QXMC || "-" },
{ label: "路线编号", value: data.ROUTE_CODE || data.routeCode || data.GL1_LXBM || "-" },
{ label: "路线名称", value: data.ROUTE_NAME || data.routeName || data.GL1_LXMC || "-" },
{ label: "路段长度", value: data.LENGTH || data.GL1_LDCD ? `${data.LENGTH || data.GL1_LDCD}(公里)` : "-" },
{ label: "路面类型", value: data.PAVEMENT_TYPE || data.pavementType || data.GL1_LMLX || "-" },
{ label: "车道数量", value: data.LANE_COUNT || data.laneCount || data.GL1_CDSL || "-" },
{ label: "设计时速", value: data.SPEED_LIMIT || data.speedLimit ? `${data.SPEED_LIMIT || data.speedLimit}(km/h)` : "-" },
{
label: "区县名称",
value: data.GL1_QXMC || "-",
},
{
label: "风险等级",
value: data.GL1_JSDJ || "-",
},
{
label: "公路编号",
value: data.GL1_LXBH || "-",
},
{
label: "位置",
value: data.GL1_QDMC + '-' + data.GL1_ZDMC || "-",
},
{
label: "风险描述",
value:
data.LENGTH || data.GL1_LDCD
? `${data.LENGTH || data.GL1_LDCD}(公里)`
: "-",
},
{
label: "采取措施",
value:
data.PAVEMENT_TYPE || data.pavementType || data.GL1_LMLX || "-",
},
{
label: "照片",
value: data.photos || data.photos || "-",
},
];
case "emergency":
return [
{ label: "队伍名称", value: data.gl1Yjllmc || "-" },
{ label: "防范状态", value: data.COUNTY || data.county || "-" },
{ label: "人数", value: data.gl1Rysl || "-" },
{ label: "联系人", value: data.gl1Lxr || "-" },
{ label: "地址", value: data.gl1Xxdz || "-" },
{ label: "物资装备", value: data.COUNTY || data.county || "-" },
{ label: "照片", value: data.photos || data.photos || '-' },
];
case "slope":
return [
{ label: "边坡坡长(km)", value: data.NAME || data.name || "-" },
{ label: "边坡最大高度(m)", value: data.COUNTY || data.county || "-" },
{ label: "边坡构成", value: data.COUNTY || data.county || "-" },
{ label: "风险等级", value: data.COUNTY || data.county || "-" },
{ label: "支护形式", value: data.COUNTY || data.county || "-" },
{ label: "监测设施设置", value: data.COUNTY || data.county || "-" },
{ label: "起点桩号", value: data.photos || data.photos || [] },
{ label: "止点桩号", value: data.photos || data.photos || [] },
];
default:
return [
{ label: "名称", value: data.NAME || data.name || "-" },
@ -127,29 +273,87 @@ const dialogItems = computed(() => {
@return calc($px / 1920 * 100vw);
}
.dialog-content {
padding: vw(10) vw(15);
max-height: vw(300);
overflow-y: auto;
.map-info-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: vw(400);
// min-height: vw(200);
background-size: 100% 100%;
padding-bottom: vw(20);
background-repeat: no-repeat;
background-position: center;
z-index: 1000;
padding: vw(20);
box-sizing: border-box;
.info-item {
.dialog-close {
position: absolute;
top: vw(22);
right: vw(15);
width: vw(24);
height: vw(24);
line-height: vw(24);
text-align: center;
font-size: vw(30);
color: #3e9ff0;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s;
&:hover {
opacity: 1;
}
}
.dialog-header {
display: flex;
align-items: flex-start;
margin-bottom: vw(10);
line-height: 1.5;
align-items: center;
margin-bottom: vw(15);
padding-bottom: vw(10);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
.info-label {
color: rgba(255, 255, 255, 0.7);
font-size: vw(13);
min-width: vw(80);
flex-shrink: 0;
.header-icon {
width: vw(24);
height: vw(24);
margin-left: vw(10);
}
.info-value {
.header-title {
font-size: vw(16);
font-weight: bold;
color: #fff;
font-size: vw(13);
flex: 1;
word-break: break-all;
}
}
.dialog-content {
max-height: vw(350);
padding-bottom: vw(20);
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
}
.info-row {
display: flex;
align-items: flex-start;
margin-bottom: vw(8);
line-height: 1.5;
.info-label {
color: rgba(255, 255, 255, 0.7);
font-size: vw(13);
// min-width: vw(100);
flex-shrink: 0;
}
.info-value {
color: #fff;
font-size: vw(13);
flex: 1;
word-break: break-all;
}
}
}
}

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

@ -257,6 +257,7 @@ const clearFilters = () => {
orange: false,
yellow: false,
};
activeIndex.value = -1;
// 触发清除地图标记事件
emit("clearMapMarkers");
};

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

@ -55,6 +55,10 @@ const props = defineProps({
type: Number,
default: -1,
},
dateRange: {
type: Array,
default: () => [],
},
});
// 定义 emits
@ -85,6 +89,42 @@ const openTunnelDialog = (data) => {
openMapInfoDialog("tunnel", data);
};
// 格式化日期时间为接口所需格式
const formatDateTime = (date) => {
if (!date) return "";
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
const hours = String(d.getHours()).padStart(2, "0");
const minutes = String(d.getMinutes()).padStart(2, "0");
const seconds = String(d.getSeconds()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 获取时间参数
const getTimeParams = () => {
if (props.dateRange && props.dateRange.length === 2) {
return {
start: formatDateTime(props.dateRange[0]),
end: formatDateTime(props.dateRange[1]),
};
}
// 默认时间范围：当月1号到当前时间
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
return {
start: `${year}-${month}-01 00:00:00`,
end: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
};
};
// 受影响对象数据
const affectedCountyData = ref({
byName: {},
@ -94,13 +134,11 @@ const affectedCountyData = ref({
// 获取受影响对象数据
const getAffectedCountyData = async () => {
try {
const timeParams = getTimeParams();
const res = await request({
url: "snow-ops-platform/weather-warning/affected-county",
url: "/snow-ops-platform/weather-warning/affected-county",
method: "GET",
params: {
start: "2025-03-03 12:33:00",
end: "2025-07-30 12:33:00",
},
params: timeParams,
});
console.log("受影响对象数据:", res);
if (res.code === "00000" && res.data) {
@ -108,6 +146,13 @@ const getAffectedCountyData = async () => {
const warningStats = countWarningsByCounty(res.data);
console.log("区县预警统计:", warningStats);
affectedCountyData.value = warningStats;
getAffectedProjectData();
getAffectedTunnelData();
getAffectedBridgeData();
getAffectedRoadSectionData();
getEmergencyForceData();
loadMapData();
}
} catch (error) {
@ -119,13 +164,11 @@ const affectedBridgeData = ref([]);
// 获取受影响桥梁数据
const getAffectedBridgeData = async () => {
try {
const timeParams = getTimeParams();
const res = await request({
url: "snow-ops-platform/weather-warning/affected-object/bridge",
url: "/snow-ops-platform/weather-warning/affected-object/bridge",
method: "GET",
params: {
start: "2025-03-03 12:33:00",
end: "2025-07-30 12:33:00",
},
params: timeParams,
});
if (res.code === "00000" && res.data) {
res.data.forEach((item) => {
@ -147,13 +190,11 @@ const tunnelInfoDialogRef = ref(null);
// 获取受影响隧道数据
const getAffectedTunnelData = async () => {
try {
const timeParams = getTimeParams();
const res = await request({
url: "snow-ops-platform/weather-warning/affected-object/tunnel",
url: "/snow-ops-platform/weather-warning/affected-object/tunnel",
method: "GET",
params: {
start: "2025-03-03 12:33:00",
end: "2025-07-30 12:33:00",
},
params: timeParams,
});
console.log("受影响隧道数据:", res);
if (res.code === "00000" && res.data) {
@ -180,13 +221,11 @@ const affectedProjectData = ref([]);
// 获取受影响项目数据
const getAffectedProjectData = async () => {
try {
const timeParams = getTimeParams();
const res = await request({
url: "snow-ops-platform/weather-warning/affected-object/project",
url: "/snow-ops-platform/weather-warning/affected-object/project",
method: "GET",
params: {
start: "2025-03-03 12:33:00",
end: "2025-07-30 12:33:00",
},
params: timeParams,
});
console.log("受影响项目数据:", res);
if (res.code === "00000" && res.data) {
@ -224,13 +263,11 @@ const affectedRoadSectionData = ref([]);
// 获取受影响路段数据
const getAffectedRoadSectionData = async () => {
try {
const timeParams = getTimeParams();
const res = await request({
url: "snow-ops-platform/weather-warning/affected-object/road-section",
url: "/snow-ops-platform/weather-warning/affected-object/road-section",
method: "GET",
params: {
start: "2025-03-03 12:33:00",
end: "2025-07-30 12:33:00",
},
params: timeParams,
});
console.log("受影响路段数据:", res);
if (res.code === "00000" && res.data) {
@ -254,31 +291,26 @@ const emergencyForceData = ref([]);
// 获取应急力量数据
const getEmergencyForceData = async () => {
try {
const timeParams = getTimeParams();
const res = await request({
url: "/snow-ops-platform/yhYjll/list",
method: "GET",
params: {
start: "2025-03-03 12:33:00",
end: "2025-07-30 12:33:00",
},
params: timeParams,
});
console.log("应急力量数据:", res);
if (
res.code === "00000" &&
res.data
) {
if (res.code === "00000" && res.data) {
// 解析坐标数据
const parsedData = res.data.map((item) => {
const newItem = { ...item };
newItem.COORDINATE_POINT = [item.gl1Lng, item.gl1Lat];
console.log("解析后坐标:", newItem.COORDINATE_POINT);
return newItem;
res.data.forEach((item) => {
if (item.gl1Lx == 1 || item.gl1Lx == 2) {
item.COORDINATE_POINT = [item.gl1Lng, item.gl1Lat];
console.log("解析后坐标:", item.COORDINATE_POINT);
}
});
emergencyForceData.value = parsedData;
emergencyForceData.value = res.data;
// 在地图上添加应急力量标记
console.log("开始添加应急力量标记...", parsedData);
addProjectMarkers(parsedData, tunnelIcon, "tunnel");
console.log("开始添加应急力量标记...", res.data);
addProjectMarkers(res.data, rescueTeamIcon, "emergency");
} else {
console.warn("没有获取到应急力量数据或返回码错误:", res);
}
@ -326,7 +358,7 @@ const addProjectMarkers = (data, iconUrl, type = "project") => {
// 创建自定义图标
const projectIconObj = window.L.icon({
iconUrl: iconUrl,
iconSize: [30, 30],
iconSize: [35, 35],
iconAnchor: [10, 10],
popupAnchor: [0, -10],
});
@ -623,10 +655,10 @@ const simplifyDistrictName = (name) => {
// 根据预警等级获取颜色
const getColorByLevel = (level) => {
const colorMap = {
红色预警: "#FF4D4F",
橙色预警: "#EC7345",
黄色预警: "#705D42",
蓝色预警: "#3799FC",
红色预警: "#912210",
橙色预警: "#BA6527",
黄色预警: "#A47109",
蓝色预警: "#185A91",
未知: "#1890ff",
};
return colorMap[level] || "#1890ff";
@ -644,7 +676,7 @@ const initMap = (geoJsonData) => {
// 创建地图实例
mapInstance = new window.L.Map(mapContainer.value, {
center: [29.563, 106.551], // 重庆中心坐标
zoom: 6,
zoom: 8,
minZoom: 6,
maxZoom: 18,
zoomControl: false,
@ -668,7 +700,8 @@ const initMap = (geoJsonData) => {
style: (feature) => {
// const districtName = feature.properties.name;
const districtName = simplifyDistrictName(feature.properties.name);
let fillColor = "#132C44"; // 默认
let fillColor = "#132C44"; // 默认深蓝色背景
let fillOpacity = 0.4; // 默认透明度更高（更透明）
// 如果有预警统计数据，应用主要预警颜色
if (
affectedCountyData.value &&
@ -678,14 +711,15 @@ const initMap = (geoJsonData) => {
const districtData = affectedCountyData.value.byName[districtName];
console.log(districtData.levels);
fillColor = getMainWarningColor(districtData.levels);
fillOpacity = 1; // 有预警时稍微不透明一些
}
return {
fillColor: fillColor,
weight: 1.5,
opacity: 0.5,
color: "#40a9ff",
fillOpacity: 0.5,
weight: 0.5,
opacity: 0.6,
color: "#00d4ff",
fillOpacity: fillOpacity,
};
},
onEachFeature: (feature, layer) => {
@ -836,6 +870,9 @@ watch(
case 4:
await getAffectedRoadSectionData();
break;
case 5:
await getEmergencyForceData();
break;
default:
break;
}
@ -843,6 +880,37 @@ watch(
{ immediate: false },
);
// 监听 dateRange 变化，重新加载数据
watch(
() => props.dateRange,
async (newVal) => {
console.log("dateRange 变化:", newVal);
if (newVal && newVal.length === 2) {
// 先重新加载受影响区县数据
await getAffectedCountyData();
// 根据当前 activeIndex 重新加载对应数据
switch (props.activeIndex) {
case 0:
await getAffectedProjectData();
break;
case 1:
await getAffectedTunnelData();
break;
case 3:
await getAffectedBridgeData();
break;
case 4:
await getEmergencyForceData();
break;
default:
break;
}
}
},
{ deep: true },
);
// 组件挂载时加载地图
onMounted(() => {
// 获取受影响对象数据
@ -930,7 +998,6 @@ defineExpose({
.map-container {
width: 100%;
height: 100%;
background: #0f1c2e;
}
.loading-overlay,

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

@ -102,7 +102,7 @@
<div class="center">
<!-- 地图底层 -->
<div class="map-layer">
<ChongqingMap ref="chongqingMapRef" :activeIndex="activeIndex" />
<ChongqingMap ref="chongqingMapRef" :activeIndex="activeIndex" :dateRange="dateRange" />
</div>
<!-- 地图遮罩层 -->
@ -111,7 +111,7 @@
<div class="bottom">
<bottom @changeActiveIndex="changeActiveIndex" @clearMapMarkers="clearMapMarkers"></bottom>
</div>
<top class="top" @openAIResult="openDialog('aiWarningResult')"></top>
<top class="top" @openAIResult="openDialog('aiWarningResult')" @dateRangeChange="handleDateRangeChange"></top>
<!-- 响应情况对话框 -->
<responseSituationDiaLog
@ -309,6 +309,15 @@ const dialogVisible = ref({
});
const activeIndex = ref(0);
// 日期范围
const dateRange = ref([]);
// 处理日期范围变化
const handleDateRangeChange = (val) => {
console.log("日期范围变化:", val);
dateRange.value = val;
};
// 地图组件引用
const chongqingMapRef = ref(null);

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

@ -287,7 +287,7 @@ const weatherWarningData = ref([
// 影响点数据
const impactData = ref([
{ name: "路段", count: 0 },
{ name: "路段", count: 11 },
{ name: "桥梁", count: 312 },
{ name: "隧道", count: 405 },
{ name: "边坡", count: 634 },
@ -492,6 +492,13 @@ const loadBarChartData = async () => {
return { ...item, name };
});
// 将路段放到数组第一个
const roadIndex = convertedData.findIndex((item) => item.name === "路段");
if (roadIndex > 0) {
const roadItem = convertedData.splice(roadIndex, 1)[0];
convertedData.unshift(roadItem);
}
impactData.value = convertedData;
}
}

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

@ -245,7 +245,9 @@ const getYhYjllList = async () => {
let gl1Rysls = 0; // 人员数
let gl1Yjllmcs = 0; // 队伍数
res.data.forEach((item) => {
gl1Yjllmcs = gl1Yjllmcs + 1;
if (item.gl1Lx == 1 || item.gl1Lx == 2) {
gl1Yjllmcs = gl1Yjllmcs + 1;
}
gl1Rysls = Number(item.gl1Rysl) + gl1Rysls;
});
if (gl1Rysls > 10000) {
@ -256,7 +258,6 @@ const getYhYjllList = async () => {
resourceData.value[1].unit = "人";
}
resourceData.value[0].value = gl1Yjllmcs;
}
} catch (error) {
console.error("获取应急力量列表失败:", error);

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

@ -23,22 +23,38 @@
import { ref, watch, inject } from "vue";
import { Calendar } from "@element-plus/icons-vue";
const emit = defineEmits(["openAIResult"]);
const emit = defineEmits(["openAIResult", "dateRangeChange"]);
// 注入兄弟组件通信机制
const triggerRefreshLeftData = inject('triggerRefreshLeftData');
const dateRange = ref([]);
// 设置日期时间为当天的23:59:59
const setEndOfDay = (date) => {
if (!date) return date;
const d = new Date(date);
d.setHours(23, 59, 59, 999);
return d;
};
// 监听 dateRange 变化
watch(dateRange, (newVal, oldVal) => {
// 只有当值真正发生变化时才触发
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
console.log('dateRange 发生变化:', newVal);
// 如果有结束日期，将其设置为当天的23:59:59
if (newVal && newVal.length === 2 && newVal[1]) {
newVal[1] = setEndOfDay(newVal[1]);
}
// 触发兄弟组件刷新
if (triggerRefreshLeftData) {
triggerRefreshLeftData();
}
// 向父组件传递时间范围
emit("dateRangeChange", newVal);
}
}, { deep: true });
@ -103,7 +119,7 @@ const handleAIClick = () => {
height: 2.6em !important;
}
:deep(.el-date-editor) {
width: 180px;
width: 200px;
max-width: vw(350);
background: #183c67;
box-shadow: inset 0px 0px 8px 0px #4fecff;