Compare commits
No commits in common. "09693b4a80886573fb9767891535efa1328f5e5e" and "9bf98c53cdc504f30ff1681ef154d992654bbd5f" have entirely different histories.
09693b4a80
...
9bf98c53cd
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
@ -2,7 +2,7 @@ import axios from 'axios'
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: '',
|
||||
timeout: 120000
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
:current-page="1"
|
||||
:page-size="10"
|
||||
:z-index="2200"
|
||||
:tableShow="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- 标题栏下方自定义插槽 -->
|
||||
@ -19,7 +18,7 @@
|
||||
<!-- AI处理前预警 -->
|
||||
<div class="panel">
|
||||
<div class="center">
|
||||
<div class="panel-title" style="color: #18eff7">AI处理前预警</div>
|
||||
<div class="panel-title" style="color: #18EFF7">AI处理前预警</div>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<div class="info-container">
|
||||
@ -58,7 +57,7 @@
|
||||
<!-- AI处理后预警 -->
|
||||
<div class="panel after-panel panel1">
|
||||
<div class="center">
|
||||
<div class="panel-title" style="color: #18eff7">AI处理后预警</div>
|
||||
<div class="panel-title" style="color: #18EFF7">AI处理后预警</div>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<!-- 标签页 -->
|
||||
|
||||
@ -129,7 +129,7 @@ const handleItemClick = (item) => {
|
||||
.center-info-card-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 140px;
|
||||
min-width: 150px;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -143,6 +143,7 @@ const handleItemClick = (item) => {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
border-radius: vw(8);
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.1);
|
||||
|
||||
@ -7,133 +7,128 @@
|
||||
:table-height="0"
|
||||
:total="0"
|
||||
:current-page="1"
|
||||
:tableShow="false"
|
||||
:page-size="10"
|
||||
:z-index="2200"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- 标题栏下方自定义插槽 -->
|
||||
<template #header>
|
||||
<div class="content-wrapper">
|
||||
<!-- 事件基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
事件基本信息
|
||||
<!-- 事件基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
事件基本信息
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件编号：</span>
|
||||
<span class="info-value">{{ eventInfo.eventNo }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">发生时间：</span>
|
||||
<span class="info-value">{{ eventInfo.occurTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件编号：</span>
|
||||
<span class="info-value">{{ eventInfo.eventNo }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">发生时间：</span>
|
||||
<span class="info-value">{{ eventInfo.occurTime }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件类型：</span>
|
||||
<span class="info-value">{{ eventInfo.eventType }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件类型：</span>
|
||||
<span class="info-value">{{ eventInfo.eventType }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件等级：</span>
|
||||
<span
|
||||
class="info-value level-tag"
|
||||
:class="eventInfo.levelClass"
|
||||
>{{ eventInfo.eventLevel }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件等级：</span>
|
||||
<span
|
||||
class="info-value level-tag"
|
||||
:class="eventInfo.levelClass"
|
||||
>{{ eventInfo.eventLevel }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">所属区域：</span>
|
||||
<span class="info-value">{{ eventInfo.region }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">上报人：</span>
|
||||
<span class="info-value">{{ eventInfo.reporter }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">所属区域：</span>
|
||||
<span class="info-value">{{ eventInfo.region }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">详细地址：</span>
|
||||
<span class="info-value">{{ eventInfo.address }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">上报时间：</span>
|
||||
<span class="info-value">{{ eventInfo.reportTime }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">上报人：</span>
|
||||
<span class="info-value">{{ eventInfo.reporter }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item full-width">
|
||||
<span class="info-label">事件描述：</span>
|
||||
<span class="info-value">{{ eventInfo.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-label">详细地址：</span>
|
||||
<span class="info-value">{{ eventInfo.address }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">上报时间：</span>
|
||||
<span class="info-value">{{ eventInfo.reportTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item full-width">
|
||||
<span class="info-label">事件描述：</span>
|
||||
<span class="info-value">{{ eventInfo.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 处置反馈信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
处置反馈信息
|
||||
</div>
|
||||
<div class="feedback-list">
|
||||
<div
|
||||
v-for="(item, index) in feedbackList"
|
||||
:key="item.id"
|
||||
class="feedback-item"
|
||||
>
|
||||
<div class="feedback-header">
|
||||
<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 class="feedback-row">
|
||||
<span class="feedback-label">处置人：</span>
|
||||
<span class="feedback-value">{{ item.handler }}</span>
|
||||
</div>
|
||||
<!-- 处置反馈信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
处置反馈信息
|
||||
</div>
|
||||
<div class="feedback-list">
|
||||
<div
|
||||
v-for="(item, index) in feedbackList"
|
||||
:key="item.id"
|
||||
class="feedback-item"
|
||||
>
|
||||
<div class="feedback-header">
|
||||
<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 class="feedback-image" @click="previewImage(item.image)">
|
||||
<img :src="item.image" alt="处置图片" />
|
||||
<div class="feedback-row">
|
||||
<span class="feedback-label">处置人：</span>
|
||||
<span class="feedback-value">{{ item.handler }}</span>
|
||||
</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 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>
|
||||
@ -255,33 +250,6 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-wrapper{
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(20, 46, 73, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #142E49;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #1a3a5c;
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox 滚动条样式
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #142E49 rgba(20, 46, 73, 0.3);
|
||||
}
|
||||
// 区块
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
@ -10,128 +10,125 @@
|
||||
:page-size="10"
|
||||
:z-index="2500"
|
||||
:max-width="650"
|
||||
:tableShow="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- 标题栏下方自定义插槽 -->
|
||||
<template #header>
|
||||
<div class="content-wrapper">
|
||||
<!-- 隐患点基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
隐患点基本信息
|
||||
</div>
|
||||
<div class="basic-info">
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">所属区县</span>
|
||||
<span class="info-value">{{ basicInfo.district }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">影响点等级</span>
|
||||
<span
|
||||
class="info-value level-tag"
|
||||
:class="basicInfo.levelClass"
|
||||
>{{ basicInfo.level }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">公路编号</span>
|
||||
<span class="info-value">{{ basicInfo.roadCode }}</span>
|
||||
</div>
|
||||
<!-- 隐患点基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
隐患点基本信息
|
||||
</div>
|
||||
<div class="basic-info">
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">所属区县</span>
|
||||
<span class="info-value">{{ basicInfo.district }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">位置</span>
|
||||
<span class="info-value">{{ basicInfo.location }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">风险点描述</span>
|
||||
<span
|
||||
class="info-value"
|
||||
:class="getStatusClass(basicInfo.riskDesc)"
|
||||
>{{ basicInfo.riskDesc }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">发现时间</span>
|
||||
<span class="info-value">{{ basicInfo.discoverTime }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">影响点等级</span>
|
||||
<span
|
||||
class="info-value level-tag"
|
||||
:class="basicInfo.levelClass"
|
||||
>{{ basicInfo.level }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">公路编号</span>
|
||||
<span class="info-value">{{ basicInfo.roadCode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">位置</span>
|
||||
<span class="info-value">{{ basicInfo.location }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">风险点描述</span>
|
||||
<span
|
||||
class="info-value"
|
||||
:class="getStatusClass(basicInfo.riskDesc)"
|
||||
>{{ basicInfo.riskDesc }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-dot"></span>
|
||||
<span class="info-label">发现时间</span>
|
||||
<span class="info-value">{{ basicInfo.discoverTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 照片 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
照片
|
||||
</div>
|
||||
<div class="photo-list">
|
||||
<div
|
||||
v-for="(photo, index) in photoList"
|
||||
:key="index"
|
||||
class="photo-item"
|
||||
@click="previewImage(photo)"
|
||||
>
|
||||
<img :src="photo" alt="照片" />
|
||||
</div>
|
||||
<!-- 照片 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
照片
|
||||
</div>
|
||||
<div class="photo-list">
|
||||
<div
|
||||
v-for="(photo, index) in photoList"
|
||||
:key="index"
|
||||
class="photo-item"
|
||||
@click="previewImage(photo)"
|
||||
>
|
||||
<img :src="photo" alt="照片" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 填报动态信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
填报动态信息
|
||||
</div>
|
||||
<div class="timeline-list">
|
||||
<div
|
||||
v-for="(record, index) in dynamicRecords"
|
||||
:key="index"
|
||||
class="timeline-item"
|
||||
>
|
||||
<div class="timeline-marker">{{ index + 1 }}</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-type">{{ record.type }}</span>
|
||||
<!-- 填报动态信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
填报动态信息
|
||||
</div>
|
||||
<div class="timeline-list">
|
||||
<div
|
||||
v-for="(record, index) in dynamicRecords"
|
||||
:key="index"
|
||||
class="timeline-item"
|
||||
>
|
||||
<div class="timeline-marker">{{ index + 1 }}</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-type">{{ record.type }}</span>
|
||||
</div>
|
||||
<div class="timeline-detail">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">巡查时间：</span>
|
||||
<span class="detail-value">{{ record.patrolTime }}</span>
|
||||
</div>
|
||||
<div class="timeline-detail">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">巡查时间：</span>
|
||||
<span class="detail-value">{{ record.patrolTime }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">巡查人：</span>
|
||||
<span class="detail-value">{{ record.patrolPerson }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">现场情况描述：</span>
|
||||
<span class="detail-value">{{ record.description }}</span>
|
||||
<div
|
||||
v-if="record.image"
|
||||
class="detail-image"
|
||||
@click="previewImage(record.image)"
|
||||
>
|
||||
<img :src="record.image" alt="现场照片" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">是否发现问题：</span>
|
||||
<span
|
||||
class="detail-value"
|
||||
:class="record.hasProblem ? 'status-yes' : 'status-no'"
|
||||
>{{ record.hasProblem ? "是" : "否" }}</span
|
||||
>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">巡查人：</span>
|
||||
<span class="detail-value">{{ record.patrolPerson }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">现场情况描述：</span>
|
||||
<span class="detail-value">{{ record.description }}</span>
|
||||
<div
|
||||
v-if="record.image"
|
||||
class="detail-image"
|
||||
@click="previewImage(record.image)"
|
||||
>
|
||||
<img :src="record.image" alt="现场照片" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">是否发现问题：</span>
|
||||
<span
|
||||
class="detail-value"
|
||||
:class="record.hasProblem ? 'status-yes' : 'status-no'"
|
||||
>{{ record.hasProblem ? "是" : "否" }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -159,7 +156,6 @@
|
||||
import { ref, watch } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import baseDialog from "../component/baseDialog.vue";
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -170,10 +166,6 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:visible", "close"]);
|
||||
@ -191,7 +183,9 @@ const basicInfo = ref({
|
||||
});
|
||||
|
||||
// 照片列表
|
||||
const photoList = ref([]);
|
||||
const photoList = ref([
|
||||
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片",
|
||||
]);
|
||||
|
||||
// 动态记录
|
||||
const dynamicRecords = ref([
|
||||
@ -239,257 +233,21 @@ const handleClose = () => {
|
||||
emit("update:visible", false);
|
||||
emit("close");
|
||||
};
|
||||
const leveltext = (level) => {
|
||||
if (level.includes("一") || level.includes("1")) return "一类";
|
||||
if (level.includes("二") || level.includes("2")) return "二类";
|
||||
if (level.includes("三") || level.includes("3")) return "三类";
|
||||
if (level.includes("四") || level.includes("4")) return "四类";
|
||||
if (level.includes("五") || level.includes("5")) return "五类";
|
||||
if (level.includes("9")) return "未评定";
|
||||
return "未评定";
|
||||
};
|
||||
|
||||
// 点击遮罩关闭已由base-dialog组件处理
|
||||
// 处理影响点类型数据
|
||||
const getAffectedObjectTypeId = (data) => {
|
||||
let pointType = props.item.pointType;
|
||||
if (!data) {
|
||||
basicInfo.value = {};
|
||||
photoList.value = [];
|
||||
dynamicRecords.value = [];
|
||||
return;
|
||||
}
|
||||
if (pointType === "桥梁") {
|
||||
// 更新基本信息 - 根据数据库字段映射
|
||||
basicInfo.value = {
|
||||
district: data.GL1_QXMC || "-", // 区县名称
|
||||
level: leveltext(data.GL1_JSZKPJDJ) || "未评定", // 技术状况评级等级
|
||||
levelClass:
|
||||
data.GL1_JSZKPJDJ === "一类" || data.GL1_JSZKPJDJ === "二类"
|
||||
? "level-normal"
|
||||
: "level-serious", // 一二类为一般，三四五类为重大
|
||||
roadCode: data.GL1_LXBH || "-", // 路线编号
|
||||
location: data.GL1_QLMC || "-", // 桥梁名称作为位置
|
||||
riskDesc: data.GL1_DQBH || "-", // 当前病害
|
||||
discoverTime: data.GL1_JSZKPDRQ || "-", // 技术状况评定日期
|
||||
};
|
||||
// 更新照片列表 - 使用桥梁照片字段
|
||||
const photos = [];
|
||||
if (data.GL1_QLZMZFJ) {
|
||||
photos.push(data.GL1_QLZMZFJ); // 桥梁正面照附件
|
||||
}
|
||||
if (data.GL1_QLLMZFJ) {
|
||||
photos.push(data.GL1_QLLMZFJ); // 桥梁立面照附件
|
||||
}
|
||||
if (data.GL1_QLDXZFJ) {
|
||||
photos.push(data.GL1_QLDXZFJ); // 桥梁典型照附件
|
||||
}
|
||||
if (data.GL1_QLZP) {
|
||||
photos.push(data.GL1_QLZP); // 桥梁照片
|
||||
}
|
||||
photoList.value = photos.length > 0 ? photos : [];
|
||||
|
||||
// 更新动态记录 - 桥梁信息没有巡查记录，使用基础信息展示
|
||||
dynamicRecords.value = [
|
||||
{
|
||||
type: "桥梁信息",
|
||||
patrolTime: data.GL1_JCTCRQ || "-", // 建成通车日期
|
||||
patrolPerson: data.GL1_QLZRR || "-", // 桥梁责任人
|
||||
description: `桥梁全长：${data.GL1_QLQC || "-"}m，跨径总长：${data.GL1_KJZC || "-"}m，上部结构：${data.GL1_SBJGLXMC || "-"}`,
|
||||
hasProblem: false,
|
||||
image: null,
|
||||
},
|
||||
];
|
||||
} else if (pointType === "边坡") {
|
||||
// 边坡数据处理
|
||||
const data = resData || {};
|
||||
// 更新基本信息 - 根据边坡接口返回数据映射
|
||||
basicInfo.value = {
|
||||
district: data.GL1_QXMC || "-", // 区县名称
|
||||
level: leveltext(data.GL1_FXDJ) || "未评定", // 风险等级
|
||||
levelClass:
|
||||
data.GL1_FXDJ?.includes("一级") || data.GL1_FXDJ?.includes("二级")
|
||||
? "level-normal"
|
||||
: "level-serious", // 一二级为一般，三四五级为重大
|
||||
roadCode: data.GL1_LXBM || "-", // 路线编码
|
||||
location: data.GL1_BPGC || "-", // 边坡概况
|
||||
riskDesc: data.GL1_JCSSSZ || "-", // 监测设施设置
|
||||
discoverTime: data.GL1_ZRRXM || "-", // 责任人姓名
|
||||
};
|
||||
|
||||
// 更新照片列表 - 边坡照片字段
|
||||
const photos = [];
|
||||
if (data.GL1_ZRLXFS) {
|
||||
photos.push(data.GL1_ZRLXFS); // 责任人联系方式（可能包含图片URL）
|
||||
}
|
||||
photoList.value = photos.length > 0 ? photos : [];
|
||||
|
||||
// 更新动态记录 - 边坡信息展示
|
||||
dynamicRecords.value = [
|
||||
{
|
||||
type: "边坡信息",
|
||||
patrolTime: data.GL1_BPPGC || "-", // 边坡坡高
|
||||
patrolPerson: data.GL1_ZRRXM || "-", // 责任人姓名
|
||||
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,
|
||||
image: null,
|
||||
},
|
||||
];
|
||||
} else if (pointType === "隧道") {
|
||||
// 更新基本信息 - 根据隧道数据库字段映射
|
||||
basicInfo.value = {
|
||||
district: data.GL1_QXMC || "-", // 区县名称
|
||||
level: leveltext(data.GL1_PDDJ) || "未评定", // 评定等级
|
||||
levelClass:
|
||||
data.GL1_PDDJ === "一级" || data.GL1_PDDJ === "二级"
|
||||
? "level-normal"
|
||||
: "level-serious", // 一二级为一般，三四五级为重大
|
||||
roadCode: data.GL1_LXBH || "-", // 路线编号
|
||||
location: data.GL1_SDMC || "-", // 隧道名称作为位置
|
||||
riskDesc: data.GL1_BHMS || "-", // 病害描述
|
||||
discoverTime: data.GL1_PDRQ || "-", // 评定日期
|
||||
};
|
||||
|
||||
// 更新照片列表 - 使用隧道照片字段
|
||||
const photos = [];
|
||||
if (data.GL1_SDJDKFJS) {
|
||||
photos.push(data.GL1_SDJDKFJS); // 隧道进洞口照片
|
||||
}
|
||||
if (data.GL1_SDCDKFJS) {
|
||||
photos.push(data.GL1_SDCDKFJS); // 隧道出洞口照片
|
||||
}
|
||||
if (data.GL1_SDDXZP) {
|
||||
photos.push(data.GL1_SDDXZP); // 隧道典型照片
|
||||
}
|
||||
if (data.GL1_TP) {
|
||||
photos.push(data.GL1_TP); // 图片
|
||||
}
|
||||
photoList.value = photos.length > 0 ? photos : [];
|
||||
|
||||
// 更新动态记录 - 隧道信息展示
|
||||
dynamicRecords.value = [
|
||||
{
|
||||
type: "隧道信息",
|
||||
patrolTime: data.GL1_XCTCSJ || "-", // 修成通车时间
|
||||
patrolPerson: data.GL1_GLDW || "-", // 管理单位
|
||||
description: `隧道全长：${data.GL1_SDC || "-"}m，隧道净宽：${data.GL1_SDJK || "-"}m，围岩等级：${data.GL1_WYDJ || "-"}，衬砌类型：${data.GL1_CQLXMC || "-"}`,
|
||||
hasProblem: false,
|
||||
image: null,
|
||||
},
|
||||
];
|
||||
} else if (pointType === "路段") {
|
||||
// 路段数据处理
|
||||
const data = resData || {};
|
||||
// 更新基本信息 - 根据路段数据库字段映射
|
||||
basicInfo.value = {
|
||||
district: data.GL1_QDMC || "-", // 起点名称（区县）
|
||||
level: leveltext(data.GL1_JSDJ) || "未评定", // 技术等级
|
||||
levelClass:
|
||||
data.GL1_JSDJ === "一级" || data.GL1_JSDJ === "二级"
|
||||
? "level-normal"
|
||||
: "level-serious", // 一二级为一般，三四五级为重大
|
||||
roadCode: data.GL1_LXBH || "-", // 路线编号
|
||||
location: `${data.GL1_QDMC || "-"} - ${data.GL1_ZDMC || "-"}`, // 起点到终点
|
||||
riskDesc: data.GL1_TZSJ || "-", // 特征数据/特殊数据
|
||||
discoverTime: data.GL1_XZDJ || "-", // 行政等级
|
||||
};
|
||||
|
||||
// 更新照片列表 - 路段一般没有照片
|
||||
photoList.value = [];
|
||||
|
||||
// 更新动态记录 - 路段信息展示
|
||||
dynamicRecords.value = [
|
||||
{
|
||||
type: "路段信息",
|
||||
patrolTime: data.GL1_TZSJ || "-", // 特征数据
|
||||
patrolPerson: data.GL1_XZDJ || "-", // 行政等级
|
||||
description: `路段长度：${data.GL1_LDLC || "-"}km，路面宽度：${data.GL1_LMKD || "-"}m，路面类型：${data.GL1_LMLX || "-"}，车道数量：${data.GL1_CDSL || "-"}`,
|
||||
hasProblem: false,
|
||||
image: null,
|
||||
},
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
// 获取影响点详情数据
|
||||
const getAffectedObjectDetail = async () => {
|
||||
try {
|
||||
let id = "";
|
||||
let apiUrl = "";
|
||||
const pointType = props.item?.pointType;
|
||||
|
||||
if (pointType === "桥梁") {
|
||||
id = props.item?.rawData?.GL1_ZJ || "";
|
||||
apiUrl = `/snow-ops-platform/weather-warning/affected-object/bridge/${id}`;
|
||||
} else if (pointType === "边坡") {
|
||||
id = props.item?.rawData?.GL1_ID || "";
|
||||
apiUrl = `/snow-ops-platform/weather-warning/affected-object/slope/${id}`;
|
||||
} else if (pointType === "隧道") {
|
||||
id = props.item?.rawData?.GL1_ZJ || "";
|
||||
apiUrl = `/snow-ops-platform/weather-warning/affected-object/tunnel/${id}`;
|
||||
} else if (pointType === "路段") {
|
||||
id = props.item?.rawData?.GL1ZJ || "";
|
||||
apiUrl = `/snow-ops-platform/weather-warning/affected-object/road-section/${id}`;
|
||||
}
|
||||
|
||||
if (!id || !apiUrl) {
|
||||
console.warn("未找到影响点ID或API地址");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
url: apiUrl,
|
||||
method: "GET",
|
||||
});
|
||||
|
||||
console.log("影响点详情数据:", res);
|
||||
if (res.code === "00000") {
|
||||
getAffectedObjectTypeId(res.data || {});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取影响点详情数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听visible变化
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
// 当弹窗打开时获取数据
|
||||
getAffectedObjectDetail();
|
||||
if (newVal && props.pointData) {
|
||||
Object.assign(basicInfo.value, props.pointData);
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-wrapper {
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(20, 46, 73, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #142e49;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #1a3a5c;
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox 滚动条样式
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #142e49 rgba(20, 46, 73, 0.3);
|
||||
}
|
||||
// 区块
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
@ -567,17 +325,17 @@ watch(
|
||||
font-weight: 500;
|
||||
width: fit-content;
|
||||
|
||||
// &.level-normal {
|
||||
// background-color: rgba(250, 219, 95, 0.2);
|
||||
// color: #fadb5f;
|
||||
// border: 1px solid rgba(250, 219, 95, 0.4);
|
||||
// }
|
||||
&.level-normal {
|
||||
background-color: rgba(250, 219, 95, 0.2);
|
||||
color: #fadb5f;
|
||||
border: 1px solid rgba(250, 219, 95, 0.4);
|
||||
}
|
||||
|
||||
// &.level-serious {
|
||||
// background-color: rgba(255, 77, 79, 0.2);
|
||||
// color: #ff4d4f;
|
||||
// border: 1px solid rgba(255, 77, 79, 0.4);
|
||||
// }
|
||||
&.level-serious {
|
||||
background-color: rgba(255, 77, 79, 0.2);
|
||||
color: #ff4d4f;
|
||||
border: 1px solid rgba(255, 77, 79, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.status-unresponse {
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
:total="total"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
showFilter="true"
|
||||
:z-index="2000"
|
||||
:max-width="1200"
|
||||
@size-change="handleSizeChange"
|
||||
@ -235,20 +234,14 @@ import Icon2 from "../../../assets/xiangying/未选中2@2x.png";
|
||||
import Icon3 from "../../../assets/xiangying/未选中3@2x.png";
|
||||
import Icon4 from "../../../assets/xiangying/未选中4@2x.png";
|
||||
|
||||
import { formatDateTime } from "../component/index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
handleImpactItem: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:visible", "close", "detail", "itemClick"]);
|
||||
const emit = defineEmits(["update:visible", "close", "detail"]);
|
||||
|
||||
// 筛选表单
|
||||
const filterForm = ref({
|
||||
@ -480,7 +473,6 @@ const handleSearch = () => {
|
||||
// 查看详情
|
||||
const handleDetail = (item) => {
|
||||
emit("detail", item);
|
||||
emit("itemClick", item);
|
||||
};
|
||||
|
||||
// 分页操作
|
||||
@ -495,14 +487,22 @@ const handleCurrentChange = (val) => {
|
||||
};
|
||||
// 获取时间参数
|
||||
const getTimeParams = () => {
|
||||
console.log("原始时间范围:", props.handleImpactItem);
|
||||
// 默认时间范围：当月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}`,
|
||||
start: formatDateTime(props.handleImpactItem.dateRange?.[0] || ""),
|
||||
end: formatDateTime(props.handleImpactItem.dateRange?.[1] || ""),
|
||||
start: "2025-07-01 00:00:00",
|
||||
end: "2025-08-01 00:00:00",
|
||||
limit: pageSize.value,
|
||||
offset: (currentPage.value - 1) * pageSize.value,
|
||||
offset: currentPage.value,
|
||||
};
|
||||
};
|
||||
// 处理数据为统一格式
|
||||
@ -689,38 +689,38 @@ const processUnifiedData = (item, type) => {
|
||||
if (type === "4") {
|
||||
return {
|
||||
...baseData,
|
||||
// 影响区域 - 使用区县名称
|
||||
region: item.GL1_QXMC || "-",
|
||||
// 影响点位置 - 使用路线名称+起终点桩号
|
||||
pointLocation: `${item.GL1_GLMC || item.GL1_GLBH || "-"} (${item.GL1_QDZH || "-"} - ${item.GL1_ZDZH || "-"})`,
|
||||
// 影响点等级 - 使用风险等级
|
||||
pointLevel: item.GL1_FXDJ || "-",
|
||||
levelClass: getLevelClass(item.GL1_FXDJ),
|
||||
// 交通主管部门负责人 - 使用GL1_JTXM和GL1_JTDH
|
||||
trafficDept: {
|
||||
name: item.GL1_JTXM || "-",
|
||||
phone: item.GL1_JTDH || "-",
|
||||
},
|
||||
// 公路机构责任人 - 使用GL1_JGXM和GL1_JGDH
|
||||
roadOrg: {
|
||||
name: item.GL1_JGXM || "-",
|
||||
phone: item.GL1_JGDH || "-",
|
||||
},
|
||||
// 养护站负责人 - 使用GL1_YHXM和GL1_YHDH
|
||||
maintenance: {
|
||||
name: item.GL1_YHXM || "-",
|
||||
phone: item.GL1_YHDH || "-",
|
||||
},
|
||||
// 护路员 - 使用GL1_HLXM和GL1_HLDH
|
||||
roadKeeper: {
|
||||
name: item.GL1_HLXM || "-",
|
||||
phone: item.GL1_HLDH || "-",
|
||||
},
|
||||
// 一般人员（路长履职）- 使用风险类型和风险描述
|
||||
generalStaff: {
|
||||
name: item.GL1_FXLX || "-",
|
||||
phone: item.GL1_FXMS || "-",
|
||||
},
|
||||
// 影响区域 - 使用区县ID对应名称
|
||||
region: item.GL1_QXMC || item.GL1_QXID || "-",
|
||||
// 影响点位置 - 使用路线名称+起终点名称
|
||||
pointLocation: item.GL1_LXMC || item.GL1_LXBH || item.name || "-",
|
||||
// 影响点等级 - 使用技术等级
|
||||
pointLevel: item.GL1_JSDJ || item.GL1_XZDJ || "-",
|
||||
levelClass: getLevelClass(item.GL1_JSDJ || item.GL1_XZDJ),
|
||||
// // 交通主管部门负责人 - 管理单位（GL1_GLDW）
|
||||
// trafficDept: {
|
||||
// name: item.GL1_GLDW || "-",
|
||||
// phone: item.GL1_GLDWDH || "-",
|
||||
// },
|
||||
// // 公路机构责任人 - 起点名称作为路段责任人标识
|
||||
// roadOrg: {
|
||||
// name: item.GL1_QDMC || "-",
|
||||
// phone: item.GL1_QDZH ? String(item.GL1_QDZH) : "-",
|
||||
// },
|
||||
// // 养护站负责人 - 终点名称
|
||||
// maintenance: {
|
||||
// name: item.GL1_ZDMC || "-",
|
||||
// phone: item.GL1_ZDZH ? String(item.GL1_ZDZH) : "-",
|
||||
// },
|
||||
// // 护路员 - 路线编号
|
||||
// roadKeeper: {
|
||||
// name: item.GL1_LXBH || "-",
|
||||
// phone: item.GL1_LXBM || "-",
|
||||
// },
|
||||
// // 一般人员（路长履职）- 技术等级文本
|
||||
// generalStaff: {
|
||||
// name: item.GL1_JSDJTXT || item.GL1_JSDJ || "-",
|
||||
// phone: item.GL1_TZSJ || "-",
|
||||
// },
|
||||
};
|
||||
}
|
||||
|
||||
@ -813,12 +813,12 @@ const fetchData = async () => {
|
||||
// 处理返回数据
|
||||
const allData = res.data;
|
||||
total.value = allData.length || 0;
|
||||
|
||||
|
||||
// 客户端分页：计算当前页的数据范围
|
||||
const startIndex = (currentPage.value - 1) * pageSize.value;
|
||||
const endIndex = startIndex + pageSize.value;
|
||||
const currentPageData = allData.slice(startIndex, endIndex);
|
||||
|
||||
|
||||
tableData.value = currentPageData.map((item, index) => ({
|
||||
...processDataByType(item, cardType.value),
|
||||
id: startIndex + index + 1,
|
||||
|
||||
@ -1,122 +1,119 @@
|
||||
<template>
|
||||
<!-- 响应点详情对话框 标题是影响点详情 -->
|
||||
<base-dialog
|
||||
v-model:visible="props.visible"
|
||||
title="影响点详情"
|
||||
title="响应点详情"
|
||||
:table-data="[]"
|
||||
:table-columns="[]"
|
||||
:table-height="0"
|
||||
:total="0"
|
||||
:current-page="1"
|
||||
:page-size="10"
|
||||
:z-index="2300"
|
||||
:z-index="1000"
|
||||
:max-width="700"
|
||||
:tableShow="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- 标题栏下方自定义插槽 -->
|
||||
<template #header>
|
||||
<div class="content-wrapper">
|
||||
<!-- 隐患点基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
隐患点基本信息
|
||||
</div>
|
||||
<div class="basic-info">
|
||||
<div class="info-row three-col">
|
||||
<div class="info-item">
|
||||
<span class="info-label">所属区县</span>
|
||||
<span class="info-value">{{ basicInfo.district }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">影响点等级</span>
|
||||
<span
|
||||
class="info-value level-tag"
|
||||
:class="basicInfo.levelClass"
|
||||
>{{ basicInfo.level }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">公路编号</span>
|
||||
<span class="info-value">{{ basicInfo.roadCode }}</span>
|
||||
</div>
|
||||
<!-- 隐患点基本信息 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
隐患点基本信息
|
||||
</div>
|
||||
<div class="basic-info">
|
||||
<div class="info-row three-col">
|
||||
<div class="info-item">
|
||||
<span class="info-label">所属区县</span>
|
||||
<span class="info-value">{{ basicInfo.district }}</span>
|
||||
</div>
|
||||
<div class="info-row three-col">
|
||||
<div class="info-item">
|
||||
<span class="info-label">位置</span>
|
||||
<span class="info-value">{{ basicInfo.location }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">风险点描述</span>
|
||||
<span class="info-value">{{ basicInfo.riskDesc }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">采取措施</span>
|
||||
<span class="info-value">{{ basicInfo.measures }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">影响点等级</span>
|
||||
<span class="info-value level-tag" :class="basicInfo.levelClass">{{ basicInfo.level }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">公路编号</span>
|
||||
<span class="info-value">{{ basicInfo.roadCode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row three-col">
|
||||
<div class="info-item">
|
||||
<span class="info-label">位置</span>
|
||||
<span class="info-value">{{ basicInfo.location }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">风险点描述</span>
|
||||
<span class="info-value" :class="getStatusClass(basicInfo.riskDesc)">{{ basicInfo.riskDesc }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">发现时间</span>
|
||||
<span class="info-value">{{ basicInfo.discoverTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 照片 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
照片
|
||||
</div>
|
||||
<div class="photo-list">
|
||||
<div
|
||||
v-for="(photo, index) in photoList"
|
||||
:key="index"
|
||||
class="photo-item"
|
||||
@click="previewImage(photo)"
|
||||
>
|
||||
<img :src="photo" alt="照片" />
|
||||
</div>
|
||||
<!-- 照片 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
照片
|
||||
</div>
|
||||
<div class="photo-list">
|
||||
<div
|
||||
v-for="(photo, index) in photoList"
|
||||
:key="index"
|
||||
class="photo-item"
|
||||
@click="previewImage(photo)"
|
||||
>
|
||||
<img :src="photo" alt="照片" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 巡查记录 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
巡查记录
|
||||
</div>
|
||||
<div class="patrol-list">
|
||||
<!-- 巡查记录列表 -->
|
||||
<div
|
||||
v-for="(record, index) in patrolRecords"
|
||||
:key="index"
|
||||
class="patrol-record-item"
|
||||
>
|
||||
<div class="patrol-number">{{ index + 1 }}</div>
|
||||
<div class="patrol-content">
|
||||
<div class="patrol-row">
|
||||
<div class="patrol-info">
|
||||
<span class="patrol-label">巡查时间：</span>
|
||||
<span class="patrol-value">{{ record.time }}</span>
|
||||
</div>
|
||||
<div class="patrol-info">
|
||||
<span class="patrol-label">巡查人：</span>
|
||||
<span class="patrol-value">{{ record.person }}</span>
|
||||
</div>
|
||||
<!-- 巡查记录 -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="title-icon">▍</span>
|
||||
巡查记录
|
||||
</div>
|
||||
<div class="timeline-list">
|
||||
<!-- 巡查记录详情 -->
|
||||
<div class="timeline-item patrol-item">
|
||||
<div class="timeline-marker patrol"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-type">巡查记录：</span>
|
||||
<span class="timeline-person">{{ patrolRecord.person }}</span>
|
||||
<span class="timeline-time">{{ patrolRecord.time }}</span>
|
||||
</div>
|
||||
<div class="timeline-detail">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">巡查轨迹：</span>
|
||||
<span class="detail-link" @click="viewTrack">查看轨迹</span>
|
||||
</div>
|
||||
<div class="patrol-row">
|
||||
<span class="patrol-label">现场情况描述：</span>
|
||||
<span class="patrol-value">{{ record.situation }}</span>
|
||||
</div>
|
||||
<div class="patrol-row">
|
||||
<span class="patrol-label">是否发现问题：</span>
|
||||
<span class="patrol-value">{{ record.hasIssue }}</span>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">现场情况：</span>
|
||||
<span class="detail-text">{{ patrolRecord.situation }}</span>
|
||||
<div v-if="patrolRecord.image" class="detail-image" @click="previewImage(patrolRecord.image)">
|
||||
<img :src="patrolRecord.image" alt="现场照片" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="record.image"
|
||||
class="patrol-image"
|
||||
@click="previewImage(record.image)"
|
||||
>
|
||||
<img :src="record.image" alt="现场照片" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 动态记录列表 -->
|
||||
<div v-for="(record, index) in dynamicRecords" :key="index" class="timeline-item">
|
||||
<div class="timeline-marker" :class="record.type"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-type">{{ record.typeName }}：</span>
|
||||
<span class="timeline-person">{{ record.person }}</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.target" class="timeline-target">
|
||||
到 <span class="target-name">{{ record.target }}</span> {{ record.targetPhone }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,11 +123,7 @@
|
||||
</base-dialog>
|
||||
|
||||
<!-- 图片预览弹窗 -->
|
||||
<div
|
||||
v-if="previewVisible"
|
||||
class="image-preview-overlay"
|
||||
@click="closePreview"
|
||||
>
|
||||
<div v-if="previewVisible" class="image-preview-overlay" @click="closePreview">
|
||||
<div class="image-preview-container" @click.stop>
|
||||
<img :src="previewImageUrl" alt="预览" />
|
||||
<div class="close-preview-btn" @click="closePreview">
|
||||
@ -165,10 +158,8 @@ const basicInfo = ref({
|
||||
levelClass: "level-normal",
|
||||
roadCode: "G348",
|
||||
location: "丁吴路(K116+656至K116+739)",
|
||||
riskDesc:
|
||||
"泥岩风化严重，受雨水冲刷影响，常有强风化岩体散落于边沟或塌散于路面(路面处落石已清理)，影响道路正常使用。[类型:路内风险点-边坡]",
|
||||
measures:
|
||||
"拟对开裂边坡进行清方处理后，采取挂网喷射混凝土处理，部分路段增设挡土墙",
|
||||
riskDesc: "未回应",
|
||||
discoverTime: "立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备",
|
||||
});
|
||||
|
||||
// 照片列表
|
||||
@ -177,21 +168,49 @@ const photoList = ref([
|
||||
"https://via.placeholder.com/120x80/40a9ff/ffffff?text=照片2",
|
||||
]);
|
||||
|
||||
// 巡查记录列表
|
||||
const patrolRecords = ref([
|
||||
// 巡查记录
|
||||
const patrolRecord = ref({
|
||||
person: "蒋汉成 18702307964",
|
||||
time: "2025-10-14 15:43:24",
|
||||
situation: "收到暴雨黄色预警信息，开展公路夜间巡查排查，道路滑坡涉灾点，无明显变化",
|
||||
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场",
|
||||
});
|
||||
|
||||
// 动态记录
|
||||
const dynamicRecords = ref([
|
||||
{
|
||||
time: "2026-03-28 14:30:00",
|
||||
person: "刘伟",
|
||||
situation: "现场通行正常、无异常情况发生。",
|
||||
hasIssue: "否",
|
||||
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场1",
|
||||
type: "dispatch",
|
||||
typeName: "调度记录",
|
||||
person: "蒋汉成",
|
||||
time: "2025-10-13 15:43:24",
|
||||
status: "【已接通语音】",
|
||||
statusClass: "status-success",
|
||||
target: "养护站负责人",
|
||||
targetPhone: "刘孝万（13609403931）",
|
||||
},
|
||||
{
|
||||
time: "2026-03-28 14:30:00",
|
||||
person: "刘伟",
|
||||
situation: "现场通行正常、无异常情况发生。",
|
||||
hasIssue: "否",
|
||||
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场2",
|
||||
type: "warning",
|
||||
typeName: "预警记录",
|
||||
person: "蒋汉成（18702307964）",
|
||||
time: "2025-10-13 15:43:24",
|
||||
status: "审核驳回",
|
||||
statusClass: "status-reject",
|
||||
},
|
||||
{
|
||||
type: "warning",
|
||||
typeName: "预警记录",
|
||||
person: "蒋汉成（18702307964）",
|
||||
time: "2025-10-13 15:43:24",
|
||||
status: "审核通过",
|
||||
statusClass: "status-success",
|
||||
},
|
||||
{
|
||||
type: "warning",
|
||||
typeName: "预警记录",
|
||||
person: "蒋汉成（18702307964）",
|
||||
time: "2025-10-13 15:43:24",
|
||||
status: "响应预警",
|
||||
statusClass: "status-success",
|
||||
},
|
||||
]);
|
||||
|
||||
@ -236,38 +255,13 @@ watch(
|
||||
if (newVal && props.pointData) {
|
||||
Object.assign(basicInfo.value, props.pointData);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-wrapper {
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(20, 46, 73, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #142e49;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #1a3a5c;
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox 滚动条样式
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #142e49 rgba(20, 46, 73, 0.3);
|
||||
}
|
||||
// 区块
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
@ -388,89 +382,6 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
// 巡查记录列表
|
||||
.patrol-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.patrol-record-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background-color: rgba(30, 70, 120, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.patrol-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.patrol-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.patrol-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
&:first-child {
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.patrol-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.patrol-label {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.patrol-value {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.patrol-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// 时间轴列表
|
||||
.timeline-list {
|
||||
display: flex;
|
||||
@ -502,7 +413,7 @@ watch(
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
@ -688,4 +599,6 @@ watch(
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
:page-size="10"
|
||||
:z-index="1000"
|
||||
:max-width="800"
|
||||
:tableShow="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- 标题栏下方自定义插槽 -->
|
||||
@ -43,27 +42,17 @@
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<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 class="info-item">
|
||||
<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 class="info-row three-col">
|
||||
<div class="info-item">
|
||||
<span class="info-label">预警等级</span>
|
||||
<span class="info-value level-red">{{
|
||||
basicInfo.warningLevel
|
||||
}}</span>
|
||||
<span class="info-value level-red">{{ basicInfo.warningLevel }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">起点桩号-止点桩号</span>
|
||||
@ -126,9 +115,7 @@
|
||||
:class="{ 'row-even': index % 2 === 1 }"
|
||||
>
|
||||
<div class="td" style="width: 30%">{{ item.type }}</div>
|
||||
<div class="td" style="width: 40%">
|
||||
{{ item.name }} {{ item.phone }}
|
||||
</div>
|
||||
<div class="td" style="width: 40%">{{ item.name }} {{ item.phone }}</div>
|
||||
<div class="td" style="width: 30%">{{ item.frequency }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -159,11 +146,7 @@
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">现场情况：</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="现场照片" />
|
||||
</div>
|
||||
</div>
|
||||
@ -172,26 +155,16 @@
|
||||
</div>
|
||||
|
||||
<!-- 动态记录列表 -->
|
||||
<div
|
||||
v-for="(record, index) in dynamicRecords"
|
||||
:key="index"
|
||||
class="timeline-item"
|
||||
>
|
||||
<div v-for="(record, index) in dynamicRecords" :key="index" class="timeline-item">
|
||||
<div class="timeline-marker" :class="record.type"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-type">{{ record.typeName }}：</span>
|
||||
<span class="timeline-person">{{ record.person }}</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 class="target-name">{{ record.target }}</span>
|
||||
{{ record.targetPhone }}
|
||||
到 <span class="target-name">{{ record.target }}</span> {{ record.targetPhone }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -202,11 +175,7 @@
|
||||
</base-dialog>
|
||||
|
||||
<!-- 图片预览弹窗 -->
|
||||
<div
|
||||
v-if="previewVisible"
|
||||
class="image-preview-overlay"
|
||||
@click="closePreview"
|
||||
>
|
||||
<div v-if="previewVisible" class="image-preview-overlay" @click="closePreview">
|
||||
<div class="image-preview-container" @click.stop>
|
||||
<img :src="previewImageUrl" alt="预览" />
|
||||
<div class="close-preview-btn" @click="closePreview">
|
||||
@ -251,8 +220,7 @@ const basicInfo = ref({
|
||||
auditStatus: "未审核",
|
||||
warningLevel: "红色预警",
|
||||
stakeRange: "三级治理中心发布发布暴雨红色预警信号",
|
||||
discoverTime:
|
||||
"立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备",
|
||||
discoverTime: "立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备",
|
||||
warningContent: "",
|
||||
});
|
||||
|
||||
@ -266,38 +234,17 @@ const photoList = ref([
|
||||
|
||||
// 三级包保责任人
|
||||
const responsibleList = ref([
|
||||
{
|
||||
type: "交通主管部门负责人",
|
||||
name: "胡雷",
|
||||
phone: "18983923577",
|
||||
frequency: "半年巡查一次",
|
||||
},
|
||||
{
|
||||
type: "公路机构负责人",
|
||||
name: "刘孝万",
|
||||
phone: "13609403931",
|
||||
frequency: "每月巡查一次",
|
||||
},
|
||||
{
|
||||
type: "养护站负责人",
|
||||
name: "彭应成",
|
||||
phone: "18323031454",
|
||||
frequency: "每周巡查一次",
|
||||
},
|
||||
{
|
||||
type: "护路员",
|
||||
name: "蒋汉成",
|
||||
phone: "1870230796",
|
||||
frequency: "每周巡查两次",
|
||||
},
|
||||
{ type: "交通主管部门负责人", name: "胡雷", phone: "18983923577", frequency: "半年巡查一次" },
|
||||
{ type: "公路机构负责人", name: "刘孝万", phone: "13609403931", frequency: "每月巡查一次" },
|
||||
{ type: "养护站负责人", name: "彭应成", phone: "18323031454", frequency: "每周巡查一次" },
|
||||
{ type: "护路员", name: "蒋汉成", phone: "1870230796", frequency: "每周巡查两次" },
|
||||
]);
|
||||
|
||||
// 巡查记录
|
||||
const patrolRecord = ref({
|
||||
person: "蒋汉成 18702307964",
|
||||
time: "2025-10-14 15:43:24",
|
||||
situation:
|
||||
"收到暴雨黄色预警信息，开展公路夜间巡查排查，道路滑坡涉灾点，无明显变化",
|
||||
situation: "收到暴雨黄色预警信息，开展公路夜间巡查排查，道路滑坡涉灾点，无明显变化",
|
||||
image: "https://via.placeholder.com/80x60/40a9ff/ffffff?text=现场",
|
||||
});
|
||||
|
||||
@ -387,11 +334,13 @@ watch(
|
||||
if (newVal && props.riskData) {
|
||||
Object.assign(basicInfo.value, props.riskData);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
// 区块
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
@ -580,7 +529,7 @@ watch(
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
@ -769,4 +718,6 @@ watch(
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, inject } from "vue";
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { Close, Calendar } from "@element-plus/icons-vue";
|
||||
import {
|
||||
warningLevelOptions,
|
||||
@ -115,9 +115,6 @@ import {
|
||||
import baseDialog from "../component/baseDialog.vue";
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
// 注入日期范围
|
||||
const getdateRange = inject("getdateRange", ref([]));
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
@ -133,11 +130,8 @@ const getDefaultDateRange = () => {
|
||||
const start = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||
const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
|
||||
return [start, end];
|
||||
return ['', ''];
|
||||
};
|
||||
|
||||
// 日期范围器
|
||||
const dateRange = ref(getDefaultDateRange());
|
||||
|
||||
onMounted(() => {
|
||||
filterForm.value = {
|
||||
riskLeve: "",
|
||||
@ -148,20 +142,8 @@ onMounted(() => {
|
||||
fetchWarningData();
|
||||
});
|
||||
|
||||
// 监听注入的日期范围变化
|
||||
watch(
|
||||
() => getdateRange.value,
|
||||
(newVal) => {
|
||||
console.log("warningSituationDialog.vue 日期范围变化:", newVal);
|
||||
if (newVal && newVal.length === 2) {
|
||||
dateRange.value = newVal;
|
||||
filterForm.value.dateRange = newVal;
|
||||
// 重新获取数据
|
||||
fetchWarningData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
// 日期范围器
|
||||
const dateRange = ref(getDefaultDateRange());
|
||||
|
||||
// 筛选表单
|
||||
const filterForm = ref({
|
||||
@ -325,11 +307,6 @@ const handleClose = () => {
|
||||
// 点击影响点数量
|
||||
const handleImpactClick = (item) => {
|
||||
emit("impactClick", item);
|
||||
emit("impactClickItem", {
|
||||
...item,
|
||||
dateRange: filterForm.value.dateRange || [],
|
||||
riskLeve: filterForm.value.riskLeve || "",
|
||||
});
|
||||
};
|
||||
|
||||
// 分页操作
|
||||
|
||||
@ -6,47 +6,15 @@
|
||||
:key="index"
|
||||
class="nav-item"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@click="handleClick(item, index)"
|
||||
@click="handleClick(index)"
|
||||
>
|
||||
<div class="nav-icon-box" :ref="(el) => setNavIconRef(el, index)">
|
||||
<div class="nav-icon-box">
|
||||
<!-- <i :class="item.icon"></i> -->
|
||||
<img :src="activeIndex === index ? item.icon1 : item.icon" alt="" />
|
||||
</div>
|
||||
<div class="nav-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 涉灾隐患点图片弹窗 -->
|
||||
<div v-if="showHazardPopup" class="hazard-popup" :style="popupStyle">
|
||||
<div class="hazard-popup-content">
|
||||
<div
|
||||
v-for="(item, index) in hazardItems"
|
||||
:key="index"
|
||||
class="hazard-item"
|
||||
@click="handleHazardItemClick(item)"
|
||||
>
|
||||
<img :src="item.icon" :alt="item.label" />
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 路段图片弹窗 -->
|
||||
<div
|
||||
v-if="showRoadPopup"
|
||||
class="hazard-popup road-popup"
|
||||
:style="roadPopupStyle"
|
||||
>
|
||||
<div class="hazard-popup-content">
|
||||
<div
|
||||
v-for="(item, index) in roadItems"
|
||||
:key="index"
|
||||
class="hazard-item"
|
||||
@click="handleRoadItemClick(item)"
|
||||
>
|
||||
<img :src="item.icon" :alt="item.label" />
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 气象预警监测表格 -->
|
||||
<div class="weather-warning-wrapper">
|
||||
<div class="weather-warning-panel">
|
||||
@ -142,7 +110,6 @@ import slopeIconIcon from "../../assets/RiskWarning_img/边坡icon@2x.png";
|
||||
import bridgeIconIcon from "../../assets/RiskWarning_img/桥梁icon@2x.png";
|
||||
import roadIconIcon from "../../assets/RiskWarning_img/线路路段icon@2x.png";
|
||||
import teamIconIcon from "../../assets/RiskWarning_img/队伍icon@2x.png";
|
||||
import hazardIconIconIcon from "../../assets/RiskWarning_img/隐患点icon@2x.png";
|
||||
|
||||
import warningIconIcon1 from "../../assets/RiskWarning_img/风险预警icon1@2x.png";
|
||||
import tunnelIconIcon1 from "../../assets/RiskWarning_img/隧道icon1@2x.png";
|
||||
@ -150,37 +117,10 @@ import slopeIconIcon1 from "../../assets/RiskWarning_img/边坡icon1@2x.png";
|
||||
import bridgeIconIcon1 from "../../assets/RiskWarning_img/桥梁icon1@2x.png";
|
||||
import roadIconIcon1 from "../../assets/RiskWarning_img/线路路段icon1@2x.png";
|
||||
import teamIconIcon1 from "../../assets/RiskWarning_img/队伍icon1@2x.png";
|
||||
import hazardIconIcon from "../../assets/RiskWarning_img/隐患点icon1@2x.png";
|
||||
|
||||
import hazardIconIcon1 from "../../assets/MaMap_img/一般路内隐患点@2x.png";
|
||||
import hazardIconIcon2 from "../../assets/MaMap_img/一般路外隐患点@2x.png";
|
||||
import hazardIconIcon3 from "../../assets/MaMap_img/较大路内隐患点@2x.png";
|
||||
import hazardIconIcon4 from "../../assets/MaMap_img/较大路外隐患点@2x.png";
|
||||
import hazardIconIcon5 from "../../assets/MaMap_img/重大路内隐患点@2x.png";
|
||||
import hazardIconIcon6 from "../../assets/MaMap_img/重大路外隐患点@2x.png";
|
||||
|
||||
import tunnelLineIcon3 from "../../assets/MaMap_img/高风险路段@2x.png";
|
||||
import tunnelLineIcon2 from "../../assets/MaMap_img/较高风险路段@2x.png";
|
||||
import tunnelLineIcon1 from "../../assets/MaMap_img/中风险路段@2x.png";
|
||||
import tunnelLineIcon from "../../assets/MaMap_img/线路icon定位@2x.png";
|
||||
|
||||
const activeIndex = ref(-1);
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: "涉灾隐患点",
|
||||
icon: "icon-hazard",
|
||||
iconClass: "hazard",
|
||||
icon: hazardIconIconIcon,
|
||||
icon1: hazardIconIcon,
|
||||
},
|
||||
{
|
||||
label: "路段",
|
||||
icon: "icon-road",
|
||||
iconClass: "road",
|
||||
icon: roadIconIcon,
|
||||
icon1: roadIconIcon1,
|
||||
},
|
||||
{
|
||||
label: "项目",
|
||||
icon: "icon-warning",
|
||||
@ -209,6 +149,13 @@ const menuItems = [
|
||||
icon: bridgeIconIcon,
|
||||
icon1: bridgeIconIcon1,
|
||||
},
|
||||
{
|
||||
label: "路段",
|
||||
icon: "icon-road",
|
||||
iconClass: "road",
|
||||
icon: roadIconIcon,
|
||||
icon1: roadIconIcon1,
|
||||
},
|
||||
{
|
||||
label: "队伍",
|
||||
icon: "icon-team",
|
||||
@ -218,40 +165,6 @@ const menuItems = [
|
||||
},
|
||||
];
|
||||
|
||||
// 涉灾隐患点弹窗相关
|
||||
const showHazardPopup = ref(false);
|
||||
const popupStyle = ref({});
|
||||
const navIconRefs = ref([]);
|
||||
|
||||
// 隐患点数据
|
||||
const hazardItems = ref([
|
||||
{ icon: hazardIconIcon5, label: "重大路内隐患点" },
|
||||
{ icon: hazardIconIcon6, label: "重大路外隐患点" },
|
||||
{ icon: hazardIconIcon3, label: "较大路内隐患点" },
|
||||
{ icon: hazardIconIcon4, label: "较大路外隐患点" },
|
||||
{ icon: hazardIconIcon1, label: "一般路内隐患点" },
|
||||
{ icon: hazardIconIcon2, label: "一般路外隐患点" },
|
||||
]);
|
||||
|
||||
// 路段弹窗相关
|
||||
const showRoadPopup = ref(false);
|
||||
const roadPopupStyle = ref({});
|
||||
|
||||
// 路段数据
|
||||
const roadItems = ref([
|
||||
{ icon: tunnelLineIcon3, label: "高风险路段" },
|
||||
{ icon: tunnelLineIcon2, label: "较高风险路段" },
|
||||
{ icon: tunnelLineIcon1, label: "中风险路段" },
|
||||
{ icon: tunnelLineIcon, label: "低风险路段" },
|
||||
]);
|
||||
|
||||
// 设置nav-icon-box的ref
|
||||
const setNavIconRef = (el, index) => {
|
||||
if (el) {
|
||||
navIconRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
|
||||
// 筛选状态
|
||||
const filters = ref({
|
||||
red: false,
|
||||
@ -329,83 +242,11 @@ const cellStyle = () => ({
|
||||
const rowClassName = ({ rowIndex }) => {
|
||||
return rowIndex % 2 === 0 ? "even-row" : "odd-row";
|
||||
};
|
||||
const emit = defineEmits([
|
||||
"changeActiveIndex",
|
||||
"clearMapMarkers",
|
||||
"hazardItemClick",
|
||||
"roadItemClick",
|
||||
]);
|
||||
const emit = defineEmits(["changeActiveIndex", "clearMapMarkers"]);
|
||||
// 点击切换导航项
|
||||
const handleClick = (item, index) => {
|
||||
// 如果点击的是涉灾隐患点
|
||||
if (item.label === "涉灾隐患点") {
|
||||
// 切换弹窗显示状态
|
||||
showHazardPopup.value = !showHazardPopup.value;
|
||||
if (showHazardPopup.value) {
|
||||
showRoadPopup.value = false;
|
||||
}
|
||||
if (showHazardPopup.value) {
|
||||
// 计算弹窗位置
|
||||
const navIconBox = navIconRefs.value[index];
|
||||
if (navIconBox) {
|
||||
const rect = navIconBox.getBoundingClientRect();
|
||||
popupStyle.value = {
|
||||
position: "fixed",
|
||||
left: rect.right + 10 + "px",
|
||||
top: rect.top + "px",
|
||||
zIndex: 2,
|
||||
};
|
||||
}
|
||||
}
|
||||
} else if (item.label === "路段") {
|
||||
// 如果点击的是路段
|
||||
|
||||
// 切换弹窗显示状态
|
||||
showRoadPopup.value = !showRoadPopup.value;
|
||||
if (showRoadPopup.value) {
|
||||
showHazardPopup.value = false;
|
||||
}
|
||||
|
||||
if (showRoadPopup.value) {
|
||||
// 计算弹窗位置
|
||||
const navIconBox = navIconRefs.value[index];
|
||||
if (navIconBox) {
|
||||
const rect = navIconBox.getBoundingClientRect();
|
||||
roadPopupStyle.value = {
|
||||
position: "fixed",
|
||||
left: rect.right + 10 + "px",
|
||||
top: rect.top + "px",
|
||||
zIndex: 3,
|
||||
};
|
||||
}
|
||||
}
|
||||
} else {
|
||||
showHazardPopup.value = false;
|
||||
showRoadPopup.value = false;
|
||||
}
|
||||
|
||||
const handleClick = (index) => {
|
||||
activeIndex.value = index;
|
||||
emit("changeActiveIndex", {
|
||||
...item,
|
||||
});
|
||||
};
|
||||
|
||||
// 点击隐患点项
|
||||
const handleHazardItemClick = (item) => {
|
||||
console.log("点击隐患点:", item);
|
||||
emit("hazardItemClick", item);
|
||||
// 可以在这里添加其他逻辑，比如关闭弹窗
|
||||
// showHazardPopup.value = false;
|
||||
};
|
||||
|
||||
const roadItem = ref({});
|
||||
// 点击路段项
|
||||
const handleRoadItemClick = (item) => {
|
||||
console.log("点击路段:", item);
|
||||
roadItem.value = item;
|
||||
emit("roadItemClick", item);
|
||||
// 可以在这里添加其他逻辑，比如关闭弹窗
|
||||
// showRoadPopup.value = false;
|
||||
emit("changeActiveIndex", index);
|
||||
};
|
||||
|
||||
// 清除筛选条件
|
||||
@ -555,48 +396,9 @@ onUnmounted(() => {
|
||||
padding: vw(6);
|
||||
}
|
||||
}
|
||||
|
||||
// 涉灾隐患点弹窗样式
|
||||
.hazard-popup {
|
||||
background: rgba(20, 46, 73, 0.95);
|
||||
border: 1px solid rgba(64, 169, 255, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.hazard-popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: vw(8);
|
||||
|
||||
.hazard-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(8);
|
||||
padding: vw(5) vw(10);
|
||||
// border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(64, 169, 255, 0.2);
|
||||
}
|
||||
|
||||
img {
|
||||
width: vw(40);
|
||||
height: vw(40);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
span {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: vw(16);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-menu {
|
||||
width: vw(80);
|
||||
min-width: vw(80);
|
||||
width: vw(50);
|
||||
min-width: vw(40);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -634,7 +436,8 @@ onUnmounted(() => {
|
||||
min-height: vw(36);
|
||||
margin-bottom: vw(5);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
// border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: vw(8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -53,21 +53,10 @@ import TongnanCenterCardDialog from "../Dialog/tongnanCenterCardDialog.vue";
|
||||
import projectIcon from "../../../assets/MaMap_img/项目@2x.png";
|
||||
import bridgeIcon from "../../../assets/MaMap_img/桥梁icon@2x.png";
|
||||
import tunnelIcon from "../../../assets/MaMap_img/蓝色@2x1.png";
|
||||
import tunnelLineIcon from "../../../assets/MaMap_img/线路icon定位@2x.png";
|
||||
import tunnelIcon2 from "../../../assets/MaMap_img/隧洞icon@2x.png";
|
||||
import rescueTeamIcon from "../../../assets/MaMap_img/队伍icon@2x.png";
|
||||
|
||||
import hazardIconIcon1 from "../../../assets/MaMap_img/一般路内隐患点@2x.png";
|
||||
import hazardIconIcon2 from "../../../assets/MaMap_img/一般路外隐患点@2x.png";
|
||||
import hazardIconIcon3 from "../../../assets/MaMap_img/较大路内隐患点@2x.png";
|
||||
import hazardIconIcon4 from "../../../assets/MaMap_img/较大路外隐患点@2x.png";
|
||||
import hazardIconIcon5 from "../../../assets/MaMap_img/重大路内隐患点@2x.png";
|
||||
import hazardIconIcon6 from "../../../assets/MaMap_img/重大路外隐患点@2x.png";
|
||||
|
||||
import tunnelLineIcon3 from "../../../assets/MaMap_img/高风险路段@2x.png";
|
||||
import tunnelLineIcon2 from "../../../assets/MaMap_img/较高风险路段@2x.png";
|
||||
import tunnelLineIcon1 from "../../../assets/MaMap_img/中风险路段@2x.png";
|
||||
import tunnelLineIcon from "../../../assets/MaMap_img/线路icon定位@2x.png";
|
||||
|
||||
import tunnelInfoDialog from "../Dialog/tunnelInfoDialog.vue";
|
||||
import mapInfoDialog from "../Dialog/mapInfoDialog.vue";
|
||||
import centerInfoCard from "../Dialog/centerInfoCard.vue";
|
||||
@ -79,19 +68,14 @@ let mapInstance = null;
|
||||
let geoJsonLayer = null;
|
||||
|
||||
const props = defineProps({
|
||||
activeitem: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
dateRange: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
roadItem: {
|
||||
// 路段项 数据 主要是选中的路段等级
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
// 定义 emits
|
||||
@ -214,7 +198,7 @@ const showCountyCardsOnMap = (dataList) => {
|
||||
const customIcon = window.L.divIcon({
|
||||
className: "county-card-icon",
|
||||
html: container.innerHTML,
|
||||
iconSize: [140, 40],
|
||||
iconSize: [150, 40],
|
||||
iconAnchor: [110, 60],
|
||||
});
|
||||
|
||||
@ -308,20 +292,25 @@ const formatDateTime = (date) => {
|
||||
};
|
||||
|
||||
// 获取时间参数
|
||||
const getTimeParams = (type) => {
|
||||
let start = "";
|
||||
let end = "";
|
||||
const getTimeParams = () => {
|
||||
if (props.dateRange && props.dateRange.length === 2) {
|
||||
start = formatDateTime(props.dateRange[0]) || "";
|
||||
end = formatDateTime(props.dateRange[1]) || "";
|
||||
}
|
||||
// 添加路段等级参数
|
||||
if(props.roadItem && type === "road"){
|
||||
// end = props.roadItem.endTime || "";
|
||||
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: start,
|
||||
end: end,
|
||||
start: `${year}-${month}-01 00:00:00`,
|
||||
end: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
|
||||
};
|
||||
};
|
||||
|
||||
@ -373,18 +362,11 @@ const getAffectedBridgeData = async () => {
|
||||
if (res.code === "00000" && res.data) {
|
||||
res.data.forEach((item) => {
|
||||
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 = res.data;
|
||||
affectedBridgeData.value = res.data;
|
||||
|
||||
addProjectMarkers(affectedBridgeData.value, bridgeIcon, "bridge");
|
||||
addProjectMarkers(res.data, bridgeIcon, "bridge");
|
||||
} catch (error) {
|
||||
console.error("获取受影响桥梁数据失败:", error);
|
||||
return [];
|
||||
@ -410,14 +392,11 @@ const getAffectedTunnelData = async () => {
|
||||
Number(item.GL1_SDJD2),
|
||||
Number(item.GL1_SDWD2),
|
||||
];
|
||||
if (Number(item.GL1_PDDJ) > 3 || item.GL1_SDLX == "特长隧道") {
|
||||
tunnelInfoDialogRef.value.push(item);
|
||||
}
|
||||
});
|
||||
// tunnelInfoDialogRef.value = res.data;
|
||||
tunnelInfoDialogRef.value = res.data;
|
||||
console.log("受影响隧道数据:", res.data);
|
||||
|
||||
addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, "tunnel");
|
||||
addProjectMarkers(res.data, tunnelIcon2, "tunnel");
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
@ -473,7 +452,7 @@ const affectedRoadSectionData = ref([]);
|
||||
// 获取受影响路段数据
|
||||
const getAffectedRoadSectionData = async () => {
|
||||
try {
|
||||
const timeParams = getTimeParams(road);
|
||||
const timeParams = getTimeParams();
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/weather-warning/affected-object/road-section",
|
||||
method: "GET",
|
||||
@ -1059,29 +1038,25 @@ const initMap = (geoJsonData) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 监听 activeitem 变化
|
||||
// 监听 activeIndex 变化
|
||||
watch(
|
||||
() => props.activeitem,
|
||||
() => props.activeIndex,
|
||||
async (newVal) => {
|
||||
console.log("activeitem 变化:", newVal);
|
||||
switch (newVal.label) {
|
||||
case "涉灾隐患点":
|
||||
break;
|
||||
case "项目":
|
||||
console.log("activeIndex 变化:", newVal);
|
||||
switch (newVal) {
|
||||
case 0:
|
||||
await getAffectedProjectData();
|
||||
break;
|
||||
case "隧道":
|
||||
case 1:
|
||||
await getAffectedTunnelData();
|
||||
break;
|
||||
case "边坡":
|
||||
break;
|
||||
case "桥梁":
|
||||
case 3:
|
||||
await getAffectedBridgeData();
|
||||
break;
|
||||
case "路段":
|
||||
case 4:
|
||||
await getAffectedRoadSectionData();
|
||||
break;
|
||||
case "队伍":
|
||||
case 5:
|
||||
await getEmergencyForceData();
|
||||
break;
|
||||
default:
|
||||
@ -1098,6 +1073,24 @@ watch(
|
||||
console.log("dateRange 变化:", newVal, oldVal);
|
||||
// 先重新加载受影响区县数据
|
||||
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 },
|
||||
);
|
||||
@ -1364,10 +1357,10 @@ defineExpose({
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
|
||||
// .center-info-card-container {
|
||||
// width: 100%;
|
||||
// min-width: 120px;
|
||||
// }
|
||||
.center-info-card-container {
|
||||
width: 100%;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.center-info-card {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
|
||||
@ -8,10 +8,7 @@
|
||||
<div
|
||||
class="base-dialog"
|
||||
@click.stop
|
||||
:style="{
|
||||
maxWidth: `${props.maxWidth}px`,
|
||||
maxHeight: `${props.maxHeight}px`,
|
||||
}"
|
||||
:style="{ maxWidth: `${props.maxWidth}px` }"
|
||||
>
|
||||
<!-- 四个角的装饰 -->
|
||||
<div class="corner corner-top-left"></div>
|
||||
@ -37,7 +34,7 @@
|
||||
<slot name="filter"></slot>
|
||||
</div>
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section" v-if="props.tableShow">
|
||||
<div class="table-section">
|
||||
<el-table
|
||||
v-if="props.tableData.length > 0"
|
||||
:data="props.tableData"
|
||||
@ -63,7 +60,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination" v-if="props.tableShow">
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-if="props.tableData.length > 0 && props.showPagination"
|
||||
:current-page="props.currentPage"
|
||||
@ -84,78 +81,55 @@ import { ref, watch } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps({
|
||||
tableShow: {
|
||||
// 是否显示表格
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
visible: {
|
||||
// 是否显示弹窗
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
// 弹窗标题
|
||||
type: String,
|
||||
default: "弹窗标题",
|
||||
},
|
||||
zIndex: {
|
||||
// 弹窗z-index
|
||||
type: Number,
|
||||
default: 1000,
|
||||
},
|
||||
maxWidth: {
|
||||
// 弹窗最大宽度
|
||||
type: Number,
|
||||
default: 1000,
|
||||
},
|
||||
maxHeight: {
|
||||
// 弹窗最大高度
|
||||
type: Number,
|
||||
default: 800,
|
||||
},
|
||||
showFilter: {
|
||||
// 是否显示筛选区域
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showPagination: {
|
||||
// 是否显示分页
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
tableData: {
|
||||
// 表格数据
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableColumns: {
|
||||
// 表格列配置
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableHeight: {
|
||||
// 表格高度
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
currentPage: {
|
||||
// 当前页码
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
pageSize: {
|
||||
// 每页显示条数
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
pageSizes: {
|
||||
// 分页选项
|
||||
type: Array,
|
||||
default: () => [10, 20, 30, 40],
|
||||
},
|
||||
total: {
|
||||
// 总条数
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
@ -334,7 +308,7 @@ const cellStyle = () => {
|
||||
.header-slot {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 24px;
|
||||
// overflow-y: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 70vh;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
@ -357,7 +331,6 @@ const cellStyle = () => {
|
||||
.table-section {
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
min-height: 320px;
|
||||
background: #16334e;
|
||||
}
|
||||
|
||||
@ -371,8 +344,6 @@ const cellStyle = () => {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 24px;
|
||||
box-sizing: border-box;
|
||||
min-height: 56px;
|
||||
:deep(.btn-prev) {
|
||||
background: #19334b !important;
|
||||
color: #fff;
|
||||
|
||||
@ -4,26 +4,10 @@
|
||||
文字色: #FFFFFF
|
||||
主题色/选中背景色: #289DFF
|
||||
======================================== */
|
||||
.el-picker__popper {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* 全局样式中 */
|
||||
:root {
|
||||
--el-popper-z-index: 9999;
|
||||
}
|
||||
|
||||
/* 兼容部分版本的遮罩层/选择器容器 */
|
||||
.el-date-picker {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
:deep(.el-picker__popper) {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* 防止样式被覆盖，提高优先级 */
|
||||
.custom-date-picker {
|
||||
z-index: 10000 !important;
|
||||
/* 弹出框整体背景色 */
|
||||
background-color: #122C45 !important;
|
||||
/* 弹出框边框（主题色） */
|
||||
@ -192,12 +176,10 @@
|
||||
color: #FFFFFF !important;
|
||||
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;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 范围选择 - 中间区间 */
|
||||
.custom-date-picker .el-date-table td.in-range .el-date-table-cell__text {
|
||||
background-color: #3E91BC !important;
|
||||
|
||||
@ -70,10 +70,10 @@ export const isRespondedOptions = [
|
||||
// 预警等级选项
|
||||
export const warningLevelOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "红色预警", value: "红色预警" },
|
||||
{ label: "橙色预警", value: "橙色预警" },
|
||||
{ label: "黄色预警", value: "黄色预警" },
|
||||
{ label: "蓝色预警", value: "蓝色预警" },
|
||||
{ label: "红色预警", value: "red" },
|
||||
{ label: "橙色预警", value: "orange" },
|
||||
{ label: "黄色预警", value: "yellow" },
|
||||
{ label: "蓝色预警", value: "blue" },
|
||||
];
|
||||
|
||||
// 是否结束选项
|
||||
@ -94,19 +94,6 @@ export const regionOptionsWithAll = [
|
||||
{ label: "城口区", value: "chengkou" },
|
||||
];
|
||||
|
||||
// 格式化日期时间为接口所需格式
|
||||
export 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}`;
|
||||
};
|
||||
|
||||
// 默认导出所有选项
|
||||
export default {
|
||||
regionOptions,
|
||||
@ -119,5 +106,4 @@ export default {
|
||||
warningLevelOptions,
|
||||
isEndedOptions,
|
||||
regionOptionsWithAll,
|
||||
formatDateTime,
|
||||
};
|
||||
@ -34,7 +34,6 @@
|
||||
|
||||
<div class="left">
|
||||
<left
|
||||
:dateRange="getdateRange"
|
||||
@openImpactDetail="openDialog('impactPoint')"
|
||||
@openWarningInfo="openDialog('warningInfo')"
|
||||
@openImpactPoint="openDialog('impactPoint')"
|
||||
@ -47,7 +46,6 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<right
|
||||
:dateRange="getdateRange"
|
||||
@openResourceDetail="openResourceDetail"
|
||||
@openClearanceSituation="openDialog('clearanceSituation')"
|
||||
@openControlSituation="openDialog('controlSituation')"
|
||||
@ -59,9 +57,8 @@
|
||||
<div class="map-layer">
|
||||
<ChongqingMap
|
||||
ref="chongqingMapRef"
|
||||
:activeitem="activeitem"
|
||||
:dateRange="getdateRange"
|
||||
:roadItem="roadItem"
|
||||
:activeIndex="activeIndex"
|
||||
:dateRange="dateRange"
|
||||
@districtClick="handleDistrictClick"
|
||||
/>
|
||||
</div>
|
||||
@ -71,7 +68,6 @@
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<bottom
|
||||
@roadItemClick="roadItemClick"
|
||||
@changeActiveIndex="changeActiveIndex"
|
||||
@clearMapMarkers="clearMapMarkers"
|
||||
></bottom>
|
||||
@ -121,16 +117,13 @@
|
||||
|
||||
<!-- 影响点情况对话框 -->
|
||||
<impactPointDialog
|
||||
:handleImpactItem="handleImpactItem"
|
||||
v-model:visible="dialogVisible.impactPoint"
|
||||
@close="closeDialog('impactPoint')"
|
||||
@detail="openDialog('impactPointDetail')"
|
||||
@itemClick="handleImpactPointClick"
|
||||
/>
|
||||
|
||||
<!-- 影响点详情对话框 -->
|
||||
<impactPointDetailDialog
|
||||
:item="impactPointDetailItem"
|
||||
v-model:visible="dialogVisible.impactPointDetail"
|
||||
@close="closeDialog('impactPointDetail')"
|
||||
/>
|
||||
@ -151,7 +144,7 @@
|
||||
<responseStatusDialog
|
||||
v-model:visible="dialogVisible.responseStatus"
|
||||
@close="closeDialog('responseStatus')"
|
||||
@detail="openDialog('responsePointDetail')"
|
||||
@detail="openDialog('impactPointDetail')"
|
||||
/>
|
||||
|
||||
<!-- AI预警处理结果对话框 -->
|
||||
@ -214,7 +207,6 @@
|
||||
v-model:visible="dialogVisible.warningSituation"
|
||||
@close="closeDialog('warningSituation')"
|
||||
@impactClick="openDialog('impactPoint')"
|
||||
@impactClickItem="handleImpactClickItem"
|
||||
/>
|
||||
|
||||
<!-- 隧道信息对话框 -->
|
||||
@ -285,15 +277,15 @@ const dialogVisible = ref({
|
||||
warningSituation: false,
|
||||
tunnelInfo: false,
|
||||
});
|
||||
const activeitem = ref({});
|
||||
const activeIndex = ref(0);
|
||||
|
||||
// 日期范围
|
||||
const getdateRange = ref([]);
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 处理日期范围变化
|
||||
const handleDateRangeChange = (val) => {
|
||||
console.log("日期范围变化:", val);
|
||||
getdateRange.value = val;
|
||||
dateRange.value = val;
|
||||
};
|
||||
|
||||
// 地图组件引用
|
||||
@ -301,12 +293,7 @@ const chongqingMapRef = ref(null);
|
||||
|
||||
// 切换导航项时触发
|
||||
const changeActiveIndex = (index) => {
|
||||
activeitem.value = index;
|
||||
};
|
||||
const roadItem = ref({});
|
||||
const roadItemClick = (item) => {
|
||||
console.log("点击路段:", item);
|
||||
roadItem.value = item;
|
||||
activeIndex.value = index;
|
||||
};
|
||||
|
||||
// 打开资源详情（队伍、人员、装备、物资）
|
||||
@ -338,17 +325,6 @@ const clearMapMarkers = () => {
|
||||
const openDialog = (dialogName) => {
|
||||
dialogVisible.value[dialogName] = true;
|
||||
};
|
||||
const impactPointDetailItem = ref({});
|
||||
// 处理影响点点击
|
||||
const handleImpactPointClick = (item) => {
|
||||
console.log("影响点点击:", item);
|
||||
impactPointDetailItem.value = item;
|
||||
};
|
||||
const handleImpactItem = ref({});
|
||||
const handleImpactClickItem = (item) => {
|
||||
console.log("影响点点击详情:", item);
|
||||
handleImpactItem.value = item;
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = (dialogName) => {
|
||||
@ -459,9 +435,8 @@ const triggerRefreshLeftData = () => {
|
||||
|
||||
// 提供通信机制给子组件
|
||||
provide("setRefreshLeftData", setRefreshLeftData);
|
||||
provide("triggerRefreshLeftData", triggerRefreshLeftData);
|
||||
provide("setRefreshRightData", setRefreshRightData);
|
||||
provide("getdateRange", getdateRange);
|
||||
provide("triggerRefreshLeftData", triggerRefreshLeftData);
|
||||
|
||||
// ==================== 地图状态管理 ====================
|
||||
|
||||
|
||||
@ -130,6 +130,7 @@
|
||||
popper-class="custom-date-picker"
|
||||
:teleported="false"
|
||||
:prefix-icon="Calendar"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -191,21 +192,29 @@ import imgCheck from "../../assets/RiskWarning_img/抽查人数icon@2x.png";
|
||||
|
||||
// 注入兄弟组件通信机制
|
||||
const setRefreshLeftData = inject("setRefreshLeftData");
|
||||
// 注入日期范围
|
||||
const getdateRange = inject("getdateRange", ref([]));
|
||||
|
||||
// 监听日期范围变化，当获取到数据时重新加载
|
||||
watch(
|
||||
() => getdateRange.value,
|
||||
(newVal) => {
|
||||
console.log("left.vue 日期范围变化:", newVal);
|
||||
init();
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
// 监听visible变化
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
// loadData();
|
||||
// loadBarChartData();
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
if (props.visible) {
|
||||
init();
|
||||
}
|
||||
|
||||
// 注册刷新函数给父组件
|
||||
if (setRefreshLeftData) {
|
||||
@ -285,37 +294,51 @@ const weatherWarningData = ref([
|
||||
|
||||
// 影响点数据
|
||||
const impactData = ref([
|
||||
{ name: "路段", count: 0 },
|
||||
{ name: "桥梁", count: 0 },
|
||||
{ name: "隧道", count: 0 },
|
||||
{ name: "边坡", count: 0 },
|
||||
{ name: "项目", count: 0 },
|
||||
{ name: "路段", count: 11 },
|
||||
{ name: "桥梁", count: 312 },
|
||||
{ name: "隧道", count: 405 },
|
||||
{ name: "边坡", count: 634 },
|
||||
{ name: "项目", count: 523 },
|
||||
]);
|
||||
|
||||
const dateRange = ref([]);
|
||||
// 点击日期范围器
|
||||
const handleDateRangeClick = (val) => {
|
||||
// 日期选择器变化事件
|
||||
const handleDateChange = (val) => {
|
||||
dateRange.value = val;
|
||||
dispatchLoadLoad();
|
||||
};
|
||||
// 点击日期范围器
|
||||
const handleDateRangeClick = (val) => {
|
||||
dateRange.value = [];
|
||||
dispatchLoadLoad();
|
||||
};
|
||||
// 日期选择器数据
|
||||
const dateRange = ref([]);
|
||||
// 调度清单数据
|
||||
const dispatchLoadLoad = async () => {
|
||||
try {
|
||||
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
|
||||
let start = "";
|
||||
let end = "";
|
||||
let startTime = "";
|
||||
let endTime = "";
|
||||
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
start = formatDateTime(dateRange.value[0]);
|
||||
end = formatDateTime(dateRange.value[1]);
|
||||
const startDate = new Date(dateRange.value[0]);
|
||||
const endDate = new Date(dateRange.value[1]);
|
||||
|
||||
// 开始时间设置为当天00:00:00
|
||||
startDate.setHours(0, 0, 0, 0);
|
||||
startTime = startDate.getTime();
|
||||
|
||||
// 结束时间设置为当天23:59:59
|
||||
endDate.setHours(23, 59, 59, 999);
|
||||
endTime = endDate.getTime();
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/weather-warning/schedule-statistics",
|
||||
method: "GET",
|
||||
params: {
|
||||
start: start,
|
||||
end: end,
|
||||
start: startTime,
|
||||
end: endTime,
|
||||
},
|
||||
});
|
||||
console.log(res);
|
||||
@ -349,52 +372,18 @@ const dispatchLoadLoad = async () => {
|
||||
});
|
||||
// responseStats.value = data;
|
||||
// dispatchList.value = data;
|
||||
} else {
|
||||
responseStats.value.forEach((item) => {
|
||||
item.value = 0;
|
||||
});
|
||||
dispatchList.value.forEach((item) => {
|
||||
item.value = 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载数据失败:", error);
|
||||
}
|
||||
};
|
||||
// 格式化日期时间为接口所需格式
|
||||
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 getdateRangeTime = () => {
|
||||
// 处理日期参数，开始时间为当天00:00:00，结束时间为当天23:59:59
|
||||
let start = "";
|
||||
let end = "";
|
||||
if (getdateRange.value && getdateRange.value.length === 2) {
|
||||
start = formatDateTime(getdateRange.value[0]);
|
||||
end = formatDateTime(getdateRange.value[1]);
|
||||
}
|
||||
return {
|
||||
start: start,
|
||||
end: end,
|
||||
};
|
||||
};
|
||||
// 区县数据
|
||||
const districtLoadLoad = async () => {
|
||||
console.log("区县数据:", getdateRangeTime());
|
||||
try {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/weather-warning/affected-count/_by_county",
|
||||
method: "GET",
|
||||
params: getdateRangeTime(),
|
||||
});
|
||||
console.log(res);
|
||||
if (res.code == "00000") {
|
||||
@ -417,8 +406,6 @@ const districtLoadLoad = async () => {
|
||||
return totalB - totalA; // 降序排列，数值大的在前
|
||||
});
|
||||
districtData.value = sortedData;
|
||||
} else {
|
||||
districtData.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@ -436,7 +423,6 @@ const scheduleStatisticsByCountyLoad = async () => {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/weather-warning/schedule-statistics/_by_county",
|
||||
method: "GET",
|
||||
params: getdateRangeTime(),
|
||||
});
|
||||
console.log("调度统计区县数据:", res);
|
||||
if (res.code == "00000") {
|
||||
@ -514,15 +500,11 @@ const scheduleStatisticsByCountyLoad = async () => {
|
||||
ruralarr.value = mergeLiangjiangNewArea(ruralarr.value);
|
||||
|
||||
// 过滤出前15个项目、10个全国、5个农村
|
||||
// projectarr.value = projectarr.value.filter((item, index) => index < 15);
|
||||
// nationalarr.value = nationalarr.value.filter(
|
||||
// (item, index) => index < 10,
|
||||
// );
|
||||
// ruralarr.value = ruralarr.value.filter((item, index) => index < 5);
|
||||
} else {
|
||||
projectarr.value = [];
|
||||
nationalarr.value = [];
|
||||
ruralarr.value = [];
|
||||
projectarr.value = projectarr.value.filter((item, index) => index < 15);
|
||||
nationalarr.value = nationalarr.value.filter(
|
||||
(item, index) => index < 10,
|
||||
);
|
||||
ruralarr.value = ruralarr.value.filter((item, index) => index < 5);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@ -536,17 +518,12 @@ const roadTypeLoad = async () => {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/weather-warning/affected-count/_by_road",
|
||||
method: "GET",
|
||||
params: getdateRangeTime(),
|
||||
});
|
||||
console.log(res);
|
||||
if (res.code == "00000") {
|
||||
const data = res.data;
|
||||
if (data) {
|
||||
roadTypeData.value = data.reverse();
|
||||
} else {
|
||||
roadTypeData.value.forEach((item) => {
|
||||
item.count = 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@ -559,7 +536,6 @@ const loadData = async () => {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/weather-warning/warning-count",
|
||||
method: "GET",
|
||||
params: getdateRangeTime(),
|
||||
});
|
||||
|
||||
if (res.code == "00000") {
|
||||
@ -589,18 +565,6 @@ const loadData = async () => {
|
||||
"0/0";
|
||||
}
|
||||
});
|
||||
} else {
|
||||
weatherWarningData.value.forEach((item) => {
|
||||
if (item.label == "红色预警") {
|
||||
item.value = "0/0";
|
||||
} else if (item.label == "橙色预警") {
|
||||
item.value = "0/0";
|
||||
} else if (item.label == "黄色预警") {
|
||||
item.value = "0/0";
|
||||
} else if (item.label == "蓝色预警") {
|
||||
item.value = "0/0";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@ -614,12 +578,11 @@ const loadBarChartData = async () => {
|
||||
const res = await request({
|
||||
url: "/snow-ops-platform/weather-warning/affected-count",
|
||||
method: "GET",
|
||||
params: getdateRangeTime(),
|
||||
});
|
||||
|
||||
if (res.code == "00000") {
|
||||
const data = res.data;
|
||||
if (data.length > 0) {
|
||||
if (data && Array.isArray(data)) {
|
||||
// 英文转中文映射
|
||||
const nameMap = {
|
||||
"road-section": "路段",
|
||||
@ -652,18 +615,6 @@ const loadBarChartData = async () => {
|
||||
impactData.value[4].count = item.count || 0;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 影响点数据
|
||||
|
||||
impactData.value = JSON.parse(
|
||||
JSON.stringify([
|
||||
{ name: "路段", count: 0 },
|
||||
{ name: "桥梁", count: 0 },
|
||||
{ name: "隧道", count: 0 },
|
||||
{ name: "边坡", count: 0 },
|
||||
{ name: "项目", count: 0 },
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@ -197,7 +197,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, inject, watch } from "vue";
|
||||
import { ref, computed, onMounted, inject } from "vue";
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
import SectionHeader from "./component/sectionHeader.vue";
|
||||
@ -228,8 +228,25 @@ const emit = defineEmits([
|
||||
|
||||
// 注入兄弟组件通信机制
|
||||
const setRefreshRightData = inject("setRefreshRightData");
|
||||
const getdateRange = inject("getdateRange", ref([]));
|
||||
|
||||
// 刷新数据的函数
|
||||
const refreshData = () => {
|
||||
console.log("right.vue 刷新数据");
|
||||
getYhYjllList();
|
||||
getYhYjllListMaterials();
|
||||
getControlStats();
|
||||
getRescueInputStats();
|
||||
getDisasterStats();
|
||||
};
|
||||
|
||||
// 组件挂载时获取数据并注册刷新函数
|
||||
onMounted(() => {
|
||||
refreshData();
|
||||
// 注册刷新函数到父组件
|
||||
if (setRefreshRightData) {
|
||||
setRefreshRightData(refreshData);
|
||||
}
|
||||
});
|
||||
// 日期选择器变化事件
|
||||
const handleDateChange = (val) => {
|
||||
dateRange.value = val;
|
||||
@ -624,36 +641,6 @@ const damageData = ref([
|
||||
|
||||
// 重大事件数
|
||||
const majorEvent = "0";
|
||||
|
||||
// 刷新数据的函数（提前定义，避免watch中调用时未初始化）
|
||||
const init = () => {
|
||||
console.log("right.vue 刷新数据");
|
||||
getYhYjllList();
|
||||
getYhYjllListMaterials();
|
||||
getControlStats();
|
||||
getRescueInputStats();
|
||||
getDisasterStats();
|
||||
};
|
||||
|
||||
// 组件挂载时获取数据并注册刷新函数
|
||||
onMounted(() => {
|
||||
init();
|
||||
// 注册刷新函数到父组件
|
||||
if (setRefreshRightData) {
|
||||
setRefreshRightData(init);
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => getdateRange.value,
|
||||
(newVal) => {
|
||||
console.log("right.vue 日期范围变化:", newVal);
|
||||
if (newVal && newVal.length === 2) {
|
||||
}
|
||||
init();
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -30,6 +30,7 @@ const emit = defineEmits(["openAIResult", "dateRangeChange"]);
|
||||
|
||||
// 注入兄弟组件通信机制
|
||||
const triggerRefreshLeftData = inject("triggerRefreshLeftData");
|
||||
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 设置日期时间为当天的23:59:59
|
||||
@ -39,11 +40,11 @@ const setEndOfDay = (date) => {
|
||||
d.setHours(23, 59, 59, 999);
|
||||
return d;
|
||||
};
|
||||
// 点击本轮
|
||||
// 点击日期范围器
|
||||
const handleDateRangeClick = () => {
|
||||
dateRange.value = [];
|
||||
// triggerRefreshLeftData();
|
||||
// 不需要手动 emit，watch 会监听 dateRange 变化并自动 emit
|
||||
triggerRefreshLeftData();
|
||||
emit("dateRangeChange", []);
|
||||
};
|
||||
// 监听 dateRange 变化
|
||||
watch(
|
||||
@ -53,14 +54,16 @@ watch(
|
||||
console.log("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();
|
||||
// }
|
||||
if (triggerRefreshLeftData) {
|
||||
triggerRefreshLeftData();
|
||||
}
|
||||
// 向父组件传递时间范围
|
||||
emit("dateRangeChange", newVal);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user