Add - 事件详情弹窗组件抽取

src/components/DetailDialog/eventDetail.vue

@@ -0,0 +1,710 @@
+<!--
+    *@description: 生命线 - 综合信息详情弹窗
+    *@author: yh Fu
+    *@date: 2025-10-16 13:24:13
+    *@version: V1.0.5
+ -->
+<template>
+  <div>
+    <el-dialog title="事件详情" :visible.sync="eventDialogVisible" custom-class="eventDialog"
+               style="margin-top: 5vh !important;"
+    >
+      <div class="transferBg d1">
+        <h3>事件基本信息</h3>
+        <div class="eventInfo_contain">
+          <div style="width: 100%;" class="sj_tit">事件名称：{{ eventInfo.eventTitle || '' }}</div>
+          <div>事件类型：{{ eventInfo.eventTypeDlLabel || '' }}</div>
+          <div>上报时间：{{ eventInfo.createTime || '' }}</div>
+          <div>事件状态：{{ eventInfo.eventStatusLabel || '' }}</div>
+          <div>经度：{{ eventInfo.longitude || '' }}</div>
+          <div>纬度：{{ eventInfo.latitude || '' }}</div>
+          <div class="videoLinkage"></div>
+        </div>
+      </div>
+      <div class="transferBg d2">
+        <h3>事件处理流程</h3>
+        <div class="progress_contain" v-if="eventInfo.eventStatusLabel=='上报'">
+          <div class="line"></div>
+          <div class="e1" v-if="eventInfo.eventStatusLabel=='上报'">
+            <img src="@/assets/images/eventLogo2.png">
+            <div>事件发起</div>
+          </div>
+          <!--          <div class="e2" v-if="eventInfo.eventStatusLabel=='签收'">-->
+          <!--            <img src="@/assets/images/eventLogo2.png">-->
+          <!--            <div>事件签收</div>-->
+          <!--          </div>-->
+        </div>
+        <div class="progress_contain" v-if="eventInfo.eventStatusLabel=='办结'">
+          <div class="line"></div>
+          <div class="e1">
+            <img src="@/assets/images/eventLogo2.png">
+            <div>事件发起</div>
+          </div>
+          <!--          <div class="e2">-->
+          <!--            <img src="@/assets/images/eventLogo2.png">-->
+          <!--            <div>事件签收</div>-->
+          <!--          </div>-->
+          <div class="e2">
+            <img src="@/assets/images/eventLogo2.png">
+            <div>事件处理</div>
+          </div>
+        </div>
+        <div class="progress_contain" v-if="eventInfo.eventStatusLabel=='归档'">
+          <div class="line"></div>
+          <div class="e1">
+            <img src="@/assets/images/eventLogo2.png">
+            <div>事件发起</div>
+          </div>
+          <!--          <div class="e2">-->
+          <!--            <img src="@/assets/images/eventLogo2.png">-->
+          <!--            <div>事件签收</div>-->
+          <!--          </div>-->
+          <div class="e2">
+            <img src="@/assets/images/eventLogo2.png">
+            <div>事件处理</div>
+          </div>
+          <div class="e3">
+            <img src="@/assets/images/eventLogo2.png">
+            <div>事件结束</div>
+          </div>
+        </div>
+      </div>
+      <div class="d3">
+        <div class="transferBg video" v-if="demoIdx != 1">
+          <h3>现场图片</h3>
+          <image-preview :src="require('@/assets/images/alarm.png')" :width="580" :height="360"/>
+        </div>
+        <div class="transferBg video" v-else>
+          <h3>计划附件</h3>
+          <image-preview src="http://116.142.80.13:8081/group1/M00/00/2E/wKgKC2kNSGGACoyXAACpxjuIY5c521.png"
+                         :width="580" :height="360"
+          />
+        </div>
+        <div class="mid">
+          <div class="transferBg info" v-if="demoIdx != 1">
+            <h3>现场状况</h3>
+            <div class="xczk_div">
+              <div>事件当前伤亡：0人</div>
+              <div>事件预警影响：10人</div>
+              <div>预计解决时间：3天</div>
+              <div>当前处理人员：王鹤</div>
+              <div>处理人员电话：18130987651</div>
+            </div>
+          </div>
+          <div class="transferBg info_right" :class="demoIdx == 1 ? 'demoDeptStylesheet' : '' ">
+            <h3 v-show="demoIdx != 0">联动部门</h3>
+            <h4 v-show="demoIdx != 0" style="margin-top: 4%;"></h4>
+            <div v-show="demoIdx != 0" class="planItem"
+                 style="border-left: none; display: flex; align-items: center;"
+            >
+              <img src="@/assets/images/online-img2.png"
+                   style="width: 30px; height:30px; margin:0 5px 0 0 ;"
+              >
+              <div style="margin-top: 0 !important;">四平市</div>
+            </div>
+
+            <h3 v-show="demoIdx == 0">设备数据</h3>
+            <div v-show="demoIdx == 0" class="div_Option" ref="divOption"></div>
+          </div>
+          <div class="transferBg pics">
+            <h3>处置照片</h3>
+            <div class="otherPics">
+              <image-preview :src="require('@/assets/images/alarm_1.png')" :width="200" :height="137"/>
+            </div>
+            <!--    <router-link to="#" v-for="item, index in emergencyEventDetails.attachPath">
+                  <el-image :src="item"
+                      :preview-src-list="assetTypeAnImage(emergencyEventDetails.attachPath, index)"
+                      style="width:8rem; height:8rem;margin: 5px;">
+                  </el-image>
+                </router-link>
+              </div> -->
+          </div>
+        </div>
+        <div class="right transferBg">
+          <h3>事件日志</h3>
+          <div class="block le_ri">
+            <el-scrollbar style="height: 378px;" class="spsb_time">
+              <el-timeline  v-for="(item,idx) in eventLog">
+                <el-timeline-item placement="top">
+                  <span class="timeline-span">{{ item.createTime || '' }}</span>
+                  <el-card>
+                    <h4>{{ item.logContent || '' }}</h4>
+                    <p>{{ item.createName || '' }} 提交于 {{ item.createTime || '' }}</p>
+                  </el-card>
+                </el-timeline-item>
+              </el-timeline>
+            </el-scrollbar>
+            <div class="spsb_xx">
+              <textarea class="spsb_text" v-model="reviewDescription" placeholder=""> </textarea>
+              <div class="btn_option">
+                <el-button>签收</el-button>
+                <el-button>办结</el-button>
+                <el-button>驳回</el-button>
+                <el-button>归档</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 其他组件改为动态导入，在components中定义
+import * as echarts from 'echarts'
+import { deviceMonitoringLineChart } from '@/api/tableInfo'
+import { getEventDetail } from '@/api/eventLifeLine'
+
+export default {
+  name: 'eventDetail',
+  data() {
+    return {
+      eventDialogVisible: false,
+      reviewDescription: '',
+      eventInfo: {},//事件详情
+      eventLog: [],//事件日志
+    }
+  },
+  methods: {
+    isImgUrl(value) {
+      const regex = /^(https?:\/\/)?([\w.-]+)(:[0-9]+)?(\/[\w./%-]*)*\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i
+      return regex.test(value)
+    },
+    isFileUrl(value) {
+      const regex = /^(https?:\/\/)?([\w.-]+)(:[0-9]+)?(\/[\w./%-]*)*\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico|doc|docx|xls|xlsx|ppt|pptx|txt|csv|pdf|zip|rar|7z|tar|gz|mp3|wav|mp4|avi|mov|mkv|flv|webm|json|xml|html|htm)$/i
+      return regex.test(value)
+    },
+    handleFileClick(url) {
+      if (url) {
+        window.open(url, '_blank')
+      }
+    },
+    // 打开事件详情弹窗
+    openEventDetail(eventId) {
+      getEventDetail({
+        eventId: eventId
+      }).then(res => {
+        this.eventInfo = res.data.detail
+        this.eventLog = res.data.eventLog
+        this.eventDialogVisible = true
+      })
+    },
+    openDetailEachart(deviceCode, date) {
+      this.divOptionDialog = true
+      deviceMonitoringLineChart({ deviceCode: deviceCode, ...(date ? { date: date } : {}) }).then(res => {
+        let resDataObj = res.data
+        let resData = {
+          'series': [
+            {
+              'data': resDataObj.series.oneWaterSupplyPressure.map(value => value === '-100.0' ? '0' : value),
+              'name': '一次网供水压力'
+            }, {
+              'data': resDataObj.series.oneBackwaterPressure.map(value => value === '-100.0' ? '0' : value),
+              'name': '一次网回水压力'
+            }, {
+              'data': resDataObj.series.oneBackwaterToa.map(value => value === '-100.0' ? '0' : value),
+              'name': '一次网回水温度'
+            }, {
+              'data': resDataObj.series.oneWaterSupplyToa.map(value => value === '-100.0' ? '0' : value),
+              'name': '一次网供水温度'
+            }, {
+              'data': resDataObj.series.flowRate.map(value => value === '-100.0' ? '0' : value),
+              'name': '流量'
+            }, {
+              'data': resDataObj.series.twoWaterSupplyPressure.map(value => value === '-100.0' ? '0' : value),
+              'name': '二次网供水压力'
+            }, {
+              'data': resDataObj.series.twoBackwaterPressure.map(value => value === '-100.0' ? '0' : value),
+              'name': '二次网回水压力'
+            }, {
+              'data': resDataObj.series.twoWaterSupplyToa.map(value => value === '-100.0' ? '0' : value),
+              'name': '二次网供水温度'
+            }, {
+              'data': resDataObj.series.twoBackwaterToa.map(value => value === '-100.0' ? '0' : value),
+              'name': '二次网回水温度'
+            }],
+          'categories': resDataObj.timeLabels
+        }
+
+        const chartDom = this.$refs.divOption
+        const myChart = echarts.init(chartDom)
+        var xData = resData.categories
+        var color = ['#fa704d', '#01babc', '#1a9bfc', '#99da69', '#e32f46', '#7049f0', '#fa704d', '#01babc', '#1a9bfc', '#99da69', '#7049f0', '#e32f46']
+
+        var name = []
+        var data = []
+        for (const datum of resData.series) {
+          name.push(datum.name)
+          data.push(datum.data)
+        }
+        var series = []
+        for (var i = 0; i < name.length; i++) {
+          series.push({
+            name: name[i],
+            type: 'line',
+            symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+            symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            smooth: true, //是否平滑曲线显示
+            showSymbol: true, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: color[i]
+                  },
+                    {
+                      offset: 0.8,
+                      color: 'rgba(255,255,255,0)'
+                    }
+                  ],
+                  false
+                ),
+                // shadowColor: 'rgba(255,255,255, 0.1)',
+                shadowBlur: 10,
+                opacity: 0.3
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: color[i],
+                lineStyle: {
+                  width: 1,
+                  type: 'solid' //'dotted'虚线 'solid'实线
+                },
+                borderColor: color[i], //图形的描边颜色。支持的格式同 color
+                borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
+                barBorderRadius: 0,
+                label: {
+                  show: false
+                },
+                opacity: 0.5
+              }
+            },
+            yAxisIndex: name[i].includes('压力') ? 1 : 0,
+            data: data[i]
+          })
+        }
+        this.option = {
+          legend: {
+            top: 10,
+            itemGap: 5,
+            itemWidth: 5,
+            textStyle: {
+              color: '#fff',
+              fontSize: '10'
+            },
+            data: name
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: 'line', // 默认为直线，可选为：'line' | 'shadow'
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            backgroundColor: 'rgba(0,60,120,0.8)', // 设置提示框背景为蓝色
+            padding: [8, 10], //内边距
+            extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
+            formatter: function(params) {
+              let result = params[0].name + '<br/>'
+              params.forEach(param => {
+                switch (param.seriesName) {
+                  case '一次网供水压力':
+                    result += param.seriesName + ': ' + param.value + 'MPa<br/>'
+                    break
+                  case '一次网回水压力':
+                    result += param.seriesName + ': ' + param.value + 'MPa<br/>'
+                    break
+                  case '一次网供水温度':
+                    result += param.seriesName + ': ' + param.value + '℃<br/>'
+                    break
+                  case '一次网回水温度':
+                    result += param.seriesName + ': ' + param.value + '℃<br/>'
+                    break
+                  case '流量':
+                    result += param.seriesName + ': ' + param.value + 'm³/h<br/>'
+                    break
+                  case '二次网供水压力':
+                    result += param.seriesName + ': ' + param.value + 'MPa<br/>'
+                    break
+                  case '二次网回水压力':
+                    result += param.seriesName + ': ' + param.value + 'MPa<br/>'
+                    break
+                  case '二次网供水温度':
+                    result += param.seriesName + ': ' + param.value + '℃<br/>'
+                    break
+                  case '二次网回水温度':
+                    result += param.seriesName + ': ' + param.value + '℃<br/>'
+                    break
+                  default:
+                    break
+                }
+              })
+              return result
+            }
+          },
+          grid: {
+            borderWidth: 0,
+            top: 50,
+            bottom: 20,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          xAxis: [{
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#32346c'
+              }
+            },
+            boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: false
+            },
+            axisLabel: {
+              inside: false,
+              textStyle: {
+                color: '#bac0c0',
+                fontWeight: 'normal',
+                fontSize: '12'
+              }
+            },
+            data: xData
+          }],
+          yAxis: [{
+            name: '℃',
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#9bbdde'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#32346c '
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#bac0c0',
+                fontWeight: 'normal',
+                fontSize: '12'
+              }
+            }
+          },
+            {
+              name: 'MPa',
+              type: 'value',
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#9bbdde'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: '#32346c '
+                }
+              },
+              axisLabel: {
+                textStyle: {
+                  color: '#bac0c0',
+                  fontWeight: 'normal',
+                  fontSize: '12'
+                }
+              }
+            }],
+          series: series
+        }
+        console.log('this.option', this.option)
+        console.log(this.option)
+        myChart.setOption(this.option, true)
+        window.addEventListener('resize', function() {
+          myChart.resize()
+        })
+      })
+    }
+  }
+
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import '@/assets/styles/base.scss';
+</style>
+
+<style lang="scss">
+/*.longValue{*/
+/*width: 100% !important;*/
+/*flex-direction: row!important;*/
+/*span{*/
+/*display: block;*/
+/*}*/
+/*}*/
+
+.dialog2 {
+  .tvDialog {
+    background: none;
+    margin-top: 10vh !important;
+    background: none;
+    border: 0px;
+    width: 40% !important;
+
+    padding-top: 0;
+
+    .container {
+      background: #041b32;
+    }
+
+    .tvDialog {
+      /*height: auto!important;*/
+    }
+
+    .tk_list {
+      width: 100%;
+      position: relative;
+    }
+
+    .TVWallCustomWidth {
+      height: 100% !important;
+    }
+
+    .TVWallCustomWidth .el-descriptions__body .el-descriptions-item__label {
+      width: 400px !important;
+    }
+
+    .tvPicHighlight {
+      border: 6px solid #B8741A;
+    }
+
+    .tvPicNotHighlight {
+      border: none;
+    }
+
+
+    .el-dialog__body {
+      height: 92%;
+      padding: 0;
+    }
+
+    .el-dialog__header {
+      background: #091225 url("../../assets/images/sp_dtitbg.png") no-repeat left;
+      text-align: left;
+      padding: 0px 0px 0px 45px !important;
+      line-height: 40px;
+
+      .el-dialog__title {
+        color: #fff;
+      }
+
+      .el-dialog__headerbtn {
+        top: 11px !important;
+        background: url("../../assets/images/sp_close.png") no-repeat center;
+        width: 17px;
+
+        i {
+
+          color: #0e3585;
+
+        }
+
+        i::before {
+          display: none;
+        }
+      }
+    }
+
+    .tvPicHighlight {
+      border: 6px solid #B8741A;
+    }
+
+    .tvPicNotHighlight {
+      border: none;
+    }
+
+    .container {
+      height: 100%;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      background-size: 100% 100%;
+      background: rgb(4 18 50 / 84%) url(../../assets/images/sp_dneibg.png) no-repeat top;
+      background-size: contain;
+      border: 6px solid;
+      border-image-source: linear-gradient(to bottom, #19273d, #344e6d);
+      border-image-slice: 1;
+
+      .leftContain {
+        width: 100%;
+
+        .deviceInfo {
+          height: 71%;
+          overflow-x: scroll;
+          white-space: nowrap;
+
+          > div {
+            text-indent: 42px;
+            height: 10%;
+            font-size: 15px;
+            color: #A4A4A4;
+            font-weight: 700;
+          }
+
+          > div:nth-child(1) {
+            margin-top: 7%;
+          }
+        }
+
+        .deviceInfo::-webkit-scrollbar {
+          display: block !important;
+          background-color: #101823;
+          // border: 1px solid #fff;
+          height: 10px !important;
+        }
+
+        .deviceInfo::-webkit-scrollbar-thumb {
+          background-color: #183974;
+        }
+
+        .deviceIcon {
+          width: 30%;
+          margin: 7% 0 0 35%;
+          cursor: pointer;
+        }
+      }
+
+    }
+
+    .leader-info-container {
+      .el-descriptions-item__label {
+        width: 77px !important;
+      }
+    }
+
+
+    .tk_list_con {
+      float: left;
+      width: 75%;
+      height: 296px;
+      overflow-y: scroll;
+    }
+
+    .imgzw {
+      width: 170px;
+      height: 300px;
+      display: block;
+      margin: 0px 10px 0px 0px;
+      border-radius: 5px;
+      border: 1px dashed #0b3974;
+      float: left;
+      background: url("../../assets/images/sp_iconbtn2.png") no-repeat center;
+      // border: solid 1px #2c4362;
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+        margin: 10px 0;
+      }
+    }
+
+    .tk_list_div {
+      width: 100%;
+      margin-bottom: 5px;
+
+      span {
+        display: inline-block;
+        color: #fff;
+        line-height: 30px;
+      }
+    }
+
+    .tk_list_div span:nth-child(1) {
+      text-align: right;
+      background: rgb(28 46 76 / 47%);
+      color: #fff;
+      padding: 0px 5px;
+      min-width: 80px;
+      margin-right: 5px;
+      vertical-align: top;
+    }
+
+    .tk_list_left {
+      width: 64%;
+      float: left;
+
+    }
+
+    .tk_list_right {
+      span {
+        display: block;
+        width: 100%;
+      }
+
+      img {
+        margin: 10px 5px;
+        border: 1px solid #0f1e3c;
+        width: 180px;
+        height: 160px;
+      }
+    }
+
+    .div_Option {
+      width: 100%;
+      height: 22vh;
+    }
+
+    .shexiangTou {
+      position: absolute;
+      right: 4px;
+      bottom: 6px;
+      opacity: 0.5;
+    }
+
+  }
+}
+
+.TVWallCustomWidth {
+  height: 100% !important;
+}
+
+.TVWallCustomWidth .el-descriptions__body .el-descriptions-item__label {
+  width: 400px !important;
+}
+
+.tvPicHighlight {
+  border: 6px solid #B8741A;
+}
+
+.tvPicNotHighlight {
+  border: none;
+}
+
+.leader-info-container {
+  .el-descriptions-item__label {
+    width: 77px !important;
+  }
+}
+
+
+</style>

src/views/industry/lookall.vue

@@ -795,129 +795,8 @@
 		<TableInfo ref="tableInfo" />
 		<DetailDialog ref="detailDialog" />
 		<!-- 事件详情弹窗 -->
-		<el-dialog title="事件详情" :visible.sync="eventDialogVisible" custom-class="eventDialog"
-			style="margin-top: 5vh !important;">
-			<div class="transferBg d1">
-				<h3>事件基本信息</h3>
-				<div class="eventInfo_contain">
-					<div style="width: 100%;" class="sj_tit">事件名称：{{ eventInfo['事件名称'] || '' }}</div>
-					<div>事件类型：{{ eventInfo['事件类型'] || '' }}</div>
-					<div>上报时间：{{ eventInfo['上报时间'] || '' }}</div>
-					<div>事件状态：{{ eventInfo['事件状态'] || '' }}</div>
-					<div>经度：{{ eventInfo['经度'] || '' }}</div>
-					<div>纬度：{{ eventInfo['纬度'] || '' }}</div>
-					<div class="videoLinkage"></div>
-				</div>
-			</div>
-			<div class="transferBg d2">
-				<h3>事件处理流程</h3>
-				<div class="progress_contain">
-					<div class="line"></div>
-					<div class="e1">
-						<img src="@/assets/images/eventLogo2.png">
-						<div>事件发起</div>
-						<div class="z-lc-time">
-							2025/11/05 07:45:11
-						</div>
-						<el-tooltip class="item" v-if="true" placement="top" popper-class="sj-tooltip">
-							<div slot="content" class="info-list">
-								<span>处置人：张远</span>
-							</div>
-							<div class="z-clyj">
-								<img src="@/assets/index_img/clyj-icon.png" />
-							</div>
-						</el-tooltip>
-					</div>
-					<div class="e2">
-						<img src="@/assets/images/eventLogo2.png">
-						<div>事件签收</div>
-					</div>
-					<div class="e3">
-						<img src="@/assets/images/eventLogo2.png">
-						<div>事件处理</div>
-					</div>
-					<div class="e4">
-						<img src="@/assets/images/eventLogo2.png">
-						<div>事件办结</div>
-					</div>
-				</div>
-			</div>
-			<div class="d3">
-				<div class="transferBg video" v-if="demoIdx != 1">
-					<h3>现场图片</h3>
-					<image-preview :src="require('@/assets/images/alarm.png')" :width="580" :height="360" />
-				</div>
-				<div class="transferBg video" v-else>
-					<h3>计划附件</h3>
-					<image-preview src="http://116.142.80.13:8081/group1/M00/00/2E/wKgKC2kNSGGACoyXAACpxjuIY5c521.png"
-						:width="580" :height="360" />
-				</div>
-				<div class="mid">
-					<div class="transferBg info" v-if="demoIdx != 1">
-						<h3>现场状况</h3>
-						<div class="xczk_div">
-							<div>事件当前伤亡：0人</div>
-							<div>事件预警影响：10人</div>
-							<div>预计解决时间：3天</div>
-							<div>当前处理人员：王鹤</div>
-							<div>处理人员电话：18130987651</div>
-						</div>
-					</div>
-					<div class="transferBg info_right" :class="demoIdx == 1 ? 'demoDeptStylesheet' : '' ">
-						<h3 v-show="demoIdx != 0">联动部门</h3>
-						<h4 v-show="demoIdx != 0" style="margin-top: 4%;"></h4>
-						<div v-show="demoIdx != 0" class="planItem"
-							style="border-left: none; display: flex; align-items: center;">
-							<img src="@/assets/images/online-img2.png"
-								style="width: 30px; height:30px; margin:0 5px 0 0 ;">
-							<div style="margin-top: 0 !important;">四平市</div>
-						</div>
-
-						<h3 v-show="demoIdx == 0">设备数据</h3>
-						<div v-show="demoIdx == 0" class="div_Option" ref="divOption"></div>
-					</div>
-					<div class="transferBg pics">
-						<h3>处置照片</h3>
-						<div class="otherPics">
-							<image-preview :src="require('@/assets/images/alarm_1.png')" :width="200" :height="137" />
-						</div>
-						<!--    <router-link to="#" v-for="item, index in emergencyEventDetails.attachPath">
-                  <el-image :src="item"
-                      :preview-src-list="assetTypeAnImage(emergencyEventDetails.attachPath, index)"
-                      style="width:8rem; height:8rem;margin: 5px;">
-                  </el-image>
-                </router-link>
-              </div> -->
-					</div>
-				</div>
-				<div class="right transferBg">
-					<h3>事件日志</h3>
-					<div class="block le_ri">
-						<el-scrollbar style="height: 378px;" class="spsb_time">
-							<el-timeline>
-								<el-timeline-item placement="top">
-									<span class="timeline-span">{{ eventInfo['上报时间'] || '' }}</span>
-									<el-card>
-										<h4>{{ eventInfo['事件描述'] || '' }}</h4>
-										<p>{{ eventInfo['上报时间'] || '' }} 提交于 {{ eventInfo['上报时间'] || '' }}</p>
-									</el-card>
-								</el-timeline-item>
-							</el-timeline>
-						</el-scrollbar>
-						<div class="spsb_xx">
-							<textarea class="spsb_text" v-model="reviewDescription" placeholder=""> </textarea>
-							<div class="btn_option">
-								<el-button>签收</el-button>
-								<el-button>办结</el-button>
-								<el-button>驳回</el-button>
-								<el-button>归档</el-button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</el-dialog>
-	</div>
+    <EventDetail ref="eventDetail" />
+  </div>
 
 </template>
 
@@ -932,6 +811,7 @@
 		getWeather
 	} from '@/api/data'
 	import DetailDialog from "@/components/DetailDialog/lookall.vue";
+	import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 
 	let echarts = require('echarts')
 	import Cookies from 'js-cookie'
@@ -963,6 +843,7 @@
 	} from '@/api/tableInfo'
 
   import {
+    getEventDetail,
     selectEventList
   } from '@/api/eventLifeLine'
 	import modal from '@/plugins/modal'
@@ -977,6 +858,7 @@
 			TableInfo,
 			supermap,
 			DetailDialog,
+      EventDetail
 		},
 		data() {
 			return {
@@ -1300,8 +1182,6 @@
             ]
           }
         ],
-				eventDialogVisible: false,
-				eventInfo: {},
 				isOnDutyVisible: false,
 				searchValue: '',
 				searchCode: '',
@@ -2167,16 +2047,16 @@
 				this.activeSubItem = ''
         this.type = '';
 			},
-			openDetail(e, tile, demoIdx) {
-				if (tile == '重点关注') {
+			openDetail(e, type, demoIdx) {
+				if (type == '重点关注') {
 					let obj = {
 						"标题": e.followName,
 						"附件": e.followUrl,
 						"创建时间": e.createTime,
 						"详情": e.followRemark,
 					}
-					this.$refs.detailDialog.openDetail(tile, obj);
-				} else if (tile == '隐患列表') {
+					this.$refs.detailDialog.openDetail(type, obj);
+				} else if (type == '隐患列表') {
 					let obj = {
 						"隐患标题": e.title,
 						"管线名称": e.pipeName,
@@ -2192,8 +2072,8 @@
 						"整改前图片": 'http://116.142.80.13:8081/group1/M00/00/2D/wKgKC2kAcBeAUz2IAAb_TSnIT-c466.png',
 						"整改后图片": e.rectificationUrl
 					}
-					this.$refs.detailDialog.openDetail(tile, obj);
-				} else if (tile == '任务列表') {
+					this.$refs.detailDialog.openDetail(type, obj);
+				} else if (type == '任务列表') {
 					let obj = {
 						"任务标题": e.title,
 						"任务状态": this.dict.type.construction_tasks_status.find(item => item.value == e.status).label,
@@ -2203,29 +2083,11 @@
 						"任务详情": e.content,
 						"附件": e.reportUrl,
 					}
-					this.$refs.detailDialog.openDetail(tile, obj);
-				} else if (tile == '预警列表') {
-					let obj = {
-						"事件名称": demoIdx == 1 ? '【日常监管】年度计划超期未完成,告警时间：2025-10-24 10:02:21;' : e.eventTitle,
-						"上报时间": demoIdx == 1 ? '2025-10-24 10:02:21;' : e.createTime,
-						"上报人姓名": e.createName,
-						"事件类型": demoIdx == 1 ? '日常监管' : e.eventTypeName,
-						"经度": e.longitude,
-						"纬度": e.latitude,
-						"事件状态": demoIdx == 1 ? '年度计划超期未完成' : e.eventStatusLabel,
-						"事件来源": e.eventSource,
-						"催办状态": e.expediteStatus,
-						"事件描述": demoIdx == 1 ? '【日常监管】年度计划超期未完成,告警时间：2025-10-24 10:02:21;' : e.eventDescription,
-					}
-					this.demoIdx = demoIdx
-					this.eventInfo = obj
-					this.eventDialogVisible = true
-					if (this.demoIdx == 0) {
-						setTimeout(() => {
-							this.initDemoChart()
-						})
-					}
-				} else if (tile == "值班管理") {
+					this.$refs.detailDialog.openDetail(type, obj);
+				} else if(type == '城市体检'||type == '日常监管'||type == '基础事件'||type == '设备预警'||type == "催办事件"||type == "督办事件"||type == "预警列表"){
+          this.openEventDetail(e);
+          return
+        } else if (type == "值班管理") {
 					let obj = {
 						"企业名称": e.companyName,
 						"所属行业": this.dict.type.lifeline_industry.find(item => item.value == e.industry)?.label,
@@ -2237,7 +2099,7 @@
 						// "备注": e.remark,
 					};
 					return;
-				} else if (tile == "通知通告") {
+				} else if (type == "通知通告") {
 					let obj = {
 						"公告标题": e.noticeTitle,
 						"公告类型": this.dict.type.sys_notice_type.find(item => item.value == e.noticeType)?.label,
@@ -2252,9 +2114,9 @@
 						// "发布状态": e.release,
 						"备注": e.remark,
 					};
-					this.$refs.detailDialog.openDetail(tile, obj);
+					this.$refs.detailDialog.openDetail(type, obj);
 					return;
-				} else if (tile == "人员管理") {
+				} else if (type == "人员管理") {
 					let obj = {
 						// "部门ID": e.deptId,
 						"用户账号": e.userName,
@@ -2268,19 +2130,23 @@
 						"最后登录时间": e.loginDate,
 						"备注": e.remark,
 					};
-					this.$refs.detailDialog.openDetail(tile, obj);
+					this.$refs.detailDialog.openDetail(type, obj);
 					return;
-				} else if (tile == "维护报告") {
+				} else if (type == "维护报告") {
 					let obj = {
 						"标题": e.reportName,
 						"企业": this.dict.type.lifeline_enterprise.find(item => item.value == e.enterprise)?.label,
 						"行业": this.dict.type.lifeline_industry.find(item => item.value == e.industry)?.label,
 						"描述": e.reportRemark,
 					};
-					this.$refs.detailDialog.openDetail(tile, obj);
+					this.$refs.detailDialog.openDetail(type, obj);
 					return;
 				}
 			},
+      // 打开事件详情弹窗
+      openEventDetail(obj) {
+        this.$refs.eventDetail.openEventDetail(obj.eventId)
+      },
 			resetActiveSubItem() {
 				this.activeSubItem = ''
 			},