Add - 事件详情弹窗功能完善与接口对接

src/components/DetailDialog/eventDetail.vue

@@ -1016,6 +1016,43 @@ export default {
 }
 
 
+.eventDialog .transferBg .spsb_xx {
+  flex-direction: column;
+}
+
+.eventDialog .transferBg .spsb_xx .spsb_text {
+  width: 100% !important;
+  border: 1px solid #0672a3 !important;
+  background-color: rgba(4, 38, 73, 0.63) !important;
+}
+
+.eventDialog .transferBg .spsb_xx .btn_option {
+  display: flex;
+}
+
+.eventDialog .transferBg .spsb_xx .btn_option .el-button[data-v-d1d2bf40] {
+  height: 30px;
+  border: 1px solid #0672a3 !important;
+  background-color: #0395c5 !important;
+  padding: 0 20px;
+  color: #fff;
+}
+
+.eventDialog .d3 {
+  height: 386px !important;
+}
+
+.eventDialog .transferBg h3 {
+  color: #C9E1EF;
+}
+
+.eventDialog .d1 .eventInfo_contain>div {
+  width: 290px;
+  color: #b9e5ff;
+  padding: 5px;
+}
+
+
 .el-timeline-item__node--normal {
   left: 0px;
   width: 10px;

src/views/Regulatory.vue

@@ -69,7 +69,7 @@
 							<div class="chart-contaier" @click="selectedDiv = 2">
 								<div class="chart-con" id="sjChart"></div>
 								<div class="chart-con-num">
-									<div 
+									<div
 										class="chart-con-num-rig"
 										v-for="(e,idx) in eventStatusOption"
 										:key="idx"
@@ -486,133 +486,6 @@
 			</supermap>
 
 		</div>
-		<el-dialog title="事件详情" :visible.sync="dialogVisibleSj" width="90%" class="sj-dialog-newstyle">
-			<div class="sj-jcxx">
-				<div class="tit">
-					事件基本信息
-				</div>
-				<div class="sj-jcxx-con">
-					<div class="con-20">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						事件名称：超级大街燃气泄漏
-					</div>
-					<div class="con-20">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						所属行业：燃气
-					</div>
-					<div class="con-20">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						事件等级：一级
-					</div>
-					<div class="con-20">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						事件状态：已处理
-					</div>
-					<div class="con-20">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						事件类型：？？？
-					</div>
-					<div class="con-20">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						事件时间：2025/02/06 13:45:11
-					</div>
-					<div class="con-20">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						报警来源：压力传感器0025332
-					</div>
-					<div class="con-20 con-50">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						报警原因：燃气泄漏
-					</div>
-
-				</div>
-			</div>
-			<div class="sj-jcxx">
-				<div class="tit">
-					事件处理流程
-				</div>
-				<div class="sj-jcxx-con" style="height: 85px; margin-top: 20px;">
-					<div class="z-line"></div>
-					<div class="triangle"></div>
-					<div class="z-lc m60">
-						<img src="../assets/index_img/jslc-icon.png" />
-						事件发起
-						<div class="z-lc-time">
-							2025/02/06 11:45:11
-						</div>
-						<el-tooltip class="item" v-if="true" placement="top" popper-class="sj-tooltip">
-							<div slot="content" class="info-list">
-								<span>处理意见：案例手动封口机案例谁都快放假</span>
-								<span>处理意见：案例手动封口机案例谁都快案例手动封口放假</span>
-								<span>处理意见：案例手动封口机案例手动封口机案例谁都快放假快放假</span>
-								<span>处理意见：案例手动封口机案例谁都快放假案例手动封口机案例谁都快放假</span>
-							</div>
-							<div class="z-clyj">
-								<img src="../assets/index_img/clyj-icon.png" />
-							</div>
-						</el-tooltip>
-					</div>
-					<div class="z-lc">
-						<img src="../assets/index_img/jslc-icon.png" />
-						事件签收
-					</div>
-					<div class="z-lc">
-						<img src="../assets/index_img/jslc-icon.png" />
-						事件处理
-					</div>
-					<div class="z-lc">
-						<img src="../assets/index_img/jslc-icon.png" />
-						事件办结
-					</div>
-
-				</div>
-			</div>
-			<div class="sj-jcxx" style="width:40%">
-				<div class="tit">
-					现场画面
-				</div>
-				<div class="sj-jcxx-con" style="width: 100%; height: 435px; margin-top: 20px;">
-					<img src="../assets/index_img/temp-sp.png" width="100%" height="435px" />
-				</div>
-			</div>
-			<div class="sj-jcxx" style="width:59%">
-				<div class="tit">
-					监测数值
-				</div>
-				<div class="sj-jcxx-con"
-					style="margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start;">
-					<div class="con-20 con-100">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						报警设备：压力传感器0025332
-					</div>
-					<div class="con-20 con-100">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						报警原因：<span class="or">压力值异常</span>
-					</div>
-					<div class="con-20 con-100">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						异常数值：<span class="or">压力12</span>
-					</div>
-					<div class="con-20 con-100">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						事件预警影响：208户
-					</div>
-					<div class="con-20 con-100">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						应急预案匹配：<span class="bl">附件1应急预案</span>
-					</div>
-					<div class="con-20 con-100">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						当前处理人员：张三
-					</div>
-					<div class="con-20 con-100">
-						<img src="../assets/index_img/d-icon-tit-img.png">
-						处理人员电话：188277639002
-					</div>
-				</div>
-			</div>
-		</el-dialog>
-
 		<el-dialog title="巡查轨迹统计分析" :visible.sync="dialogVisibleXcgj" @open="open()" width="80%" class="sj-dialog-newstyle" >
 			<div class="box-row" style="width: 100%;">
 				<div class="chart_div flex-c" style="width:40%">
@@ -643,6 +516,8 @@
 			</div>
 
 		</el-dialog>
+    <!-- 事件详情弹窗 -->
+    <EventDetail ref="eventDetail" />
 	</div>
 </template>
 
@@ -650,6 +525,7 @@
 	import Cookies from 'js-cookie'
 	import supermap from '@/components/supermap-2.5d' //超图
 	import weatherHeader from '@/components/weatherHeader'
+  import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 	import {
 		getUserProfile
 	} from "@/api/system/user";
@@ -672,7 +548,8 @@
 	export default {
 		components: {
 			supermap,
-			weatherHeader
+			weatherHeader,
+      EventDetail
 		},
 		metaInfo() {
 			return {
@@ -2562,12 +2439,7 @@
       },
       // 打开事件详情弹窗
       openEventDetail(obj) {
-        getEventDetail({
-          eventId: obj.eventId
-        }).then(res => {
-          this.eventInfo = res.data
-          this.eventDialogVisible = true
-        })
+        this.$refs.eventDetail.openEventDetail(obj.eventId)
       },
       selectPatrolInspectionDataList(pageSize){
         selectPatrolInspectionDataList({

src/views/industry/ThermalPower.vue

@@ -789,131 +789,14 @@
 
     </transition>
     <!-- 事件详情弹窗 -->
-    <el-dialog title="事件详情" :visible.sync="eventDialogVisible" custom-class="eventDialog" class="sj_dialog"
-               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.eventTypeName || '' }}</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">
-          <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">
-          <h3>现场图片</h3>
-          <image-preview  :src="require('@/assets/images/alarm.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;"
-            v-for="dept in eventInfo.deptList">
-              <img src="@/assets/images/online-img2.png"
-                   style="width: 30px; height:30px; margin:0 5px 0 0 ;">
-              <div style="margin-top: 0 !important;">{{dept.mapDeptName}}</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="image in eventInfo.attachPath">
-              <el-image :src="image"
-                  :preview-src-list="assetTypeAnImage(eventInfo.attachPath)"
-                  style="width:8rem; height:8rem;margin: 5px;">
-              </el-image>
-            </router-link>
-          </div>
-        </div>
-        <div class="right transferBg">
-          <h3>事件日志</h3>
-          <div class="block le_ri">
-            <el-scrollbar style="height: 340px;" class="spsb_time">
-              <el-timeline>
-                <el-timeline-item placement="top">
-                  <span class="timeline-span">{{ eventInfo.createTime || '' }}</span>
-                  <el-card>
-                    <h4>{{ eventInfo.eventDescription || '' }}</h4>
-                    <p>{{ eventInfo.createTime || '' }} 提交于 {{ eventInfo.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 style="height: 22%;">签收</el-button>
-                <el-button style="height: 22%;">办结</el-button>
-                <el-button style="height: 22%;">驳回</el-button>
-                <el-button style="height: 22%;">归档</el-button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
+    <EventDetail ref="eventDetail" />
   </div>
-
-
-
 </template>
 
 
 <script>
 import DetailDialog from '@/components/DetailDialog/ThermalPower.vue';
+import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 import {
   getEnterpriseList,getHeatingPipeByDataSetAndSmId,
   getHeatingList,
@@ -959,6 +842,7 @@ export default {
   components:{
     supermap,
     DetailDialog,
+    EventDetail
   },
   data() {
     return {
@@ -3297,13 +3181,7 @@ export default {
     },
     // 打开事件详情弹窗
     openEventDetail(obj) {
-      getEventDetail({
-        eventId: obj.eventId
-      }).then(res => {
-        this.demoIdx = obj.demoIdx
-        this.eventInfo = res.data
-        this.eventDialogVisible = true
-      })
+      this.$refs.eventDetail.openEventDetail(obj.eventId)
     },
     //初始化地图数据
     getSuperMapUrl() {

src/views/industry/UtilityTunnel.vue

@@ -717,6 +717,8 @@
 			@cancelHeatingPipeVisible="cancelHeatingPipeVisible"
 			>
 		</PipeLineDetail>
+    <!-- 事件详情弹窗 -->
+    <EventDetail ref="eventDetail" />
 	</div>
 
 
@@ -727,6 +729,7 @@
 <script>
 import supermap from '@/components/supermap-2.5d'
 import DetailDialog from "@/components/DetailDialog/UtilityTunnel.vue";
+import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 import PipeLineDetail from '@/components/PipeLineDetail/index.vue'
 	let echarts = require('echarts')
 import { iconList, queryVectorTilesMapList } from '@/api/components/supermap'
@@ -767,7 +770,8 @@ import { getEventDetail, selectEventList } from '@/api/eventLifeLine'
     components: {
       supermap,
       DetailDialog,
-      PipeLineDetail
+      PipeLineDetail,
+      EventDetail
     },
 		data() {
 			return {
@@ -3054,12 +3058,7 @@ import { getEventDetail, selectEventList } from '@/api/eventLifeLine'
       },
       // 打开事件详情弹窗
       openEventDetail(obj) {
-        getEventDetail({
-          eventId: obj.eventId
-        }).then(res => {
-          this.eventInfo = res.data
-          this.eventDialogVisible = true
-        })
+        this.$refs.eventDetail.openEventDetail(obj.eventId)
       },
       flyTo(currentType, longitude, latitude) {
         this.$refs.supermap.dropLocation(latitude * 1, longitude * 1);

src/views/industry/lookall.vue

@@ -843,7 +843,6 @@
 	} from '@/api/tableInfo'
 
   import {
-    getEventDetail,
     selectEventList
   } from '@/api/eventLifeLine'
 	import modal from '@/plugins/modal'

src/views/industry/paishui.vue

@@ -498,7 +498,7 @@
 			</div>
 			<div class="fldx-cont">
 				<dl class="shijian-list">
-					<dd v-for="(item,idx) in eventList" :key="idx" @click="openDetail(e,'预警列表',idx)">
+					<dd v-for="(item,idx) in eventList" :key="idx" @click="openDetail(item,'预警列表')">
 						<div class="sjtop">
 							<i></i>
 							<span>{{ item.createTime || '' }}</span>
@@ -794,127 +794,8 @@
 
 		<!-- 详情弹窗 -->
 		<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"  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>
+    <!-- 事件详情弹窗 -->
+    <EventDetail ref="eventDetail" />
 	</div>
 
 
@@ -927,6 +808,7 @@
   import Cookies from "js-cookie";
   let echarts = require('echarts')
 	import DetailDialog from "@/components/DetailDialog/paishui.vue";
+  import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 	import supermap from '@/components/supermap-2.5d' //超图
 	import { getUserProfile } from '@/api/system/user'
 	import {
@@ -975,6 +857,7 @@
 		components: {
 			supermap,
 			DetailDialog,
+      EventDetail
 		},
 		data() {
 			return {
@@ -2459,7 +2342,11 @@
 						this.$refs.detailDialog.openDetail(type,obj18);
 						break;
 					// 监管平台
-					case "城市体检" || "日常监管" || "基础事件"|| "设备预警"|| "催办事件"|| "督办事件":
+					case "城市体检":
+					case "日常监管":
+					case "基础事件":
+					case "催办事件":
+					case "督办事件":
             this.openEventDetail(e);
 						break;
           case '巡检巡查任务管理':
@@ -2515,7 +2402,7 @@
 				console.log(this.currentResourceTile,e)
 				// this.$refs.detailDialog.openDetail(type,obj);
 			},
-			openDetail(e,tile,demoIdx){
+			openDetail(e,tile){
 				if(tile == '重点关注'){
 					let obj = {
 					"标题":e.followName,
@@ -2554,11 +2441,6 @@
 					this.$refs.detailDialog.openDetail(tile,obj);
 				} else if(tile == '预警列表') {
           this.openEventDetail(e);
-					if(this.demoIdx == 0){
-					setTimeout(() => {
-						this.initDemoChart()
-					})
-					}
 				} else if (tile == "值班管理") {
 					let obj = {
 					"企业名称": e.companyName,
@@ -2669,7 +2551,6 @@
 			},
 			getInfoList(type, deptId, pageNum){
         this.type=type
-        debugger
 				switch (type) {
 					case '维修管理':
 						maintenanceRepairList({
@@ -4142,13 +4023,7 @@
 			},
       // 打开事件详情弹窗
       openEventDetail(obj) {
-        getEventDetail({
-          eventId: obj.eventId
-        }).then(res => {
-          this.demoIdx = obj.demoIdx
-          this.eventInfo = res.data
-          this.eventDialogVisible = true
-        })
+        this.$refs.eventDetail.openEventDetail(obj.eventId)
       },
 			previewPointDetail(params) {
 				this.previewDetail(params.params,params.type)

src/views/industry/qiaoliang.vue

@@ -650,124 +650,6 @@
               @previewPointDetail="previewPointDetail">
     </supermap>
 
-    <!-- 事件详情弹窗 -->
-    <el-dialog title="事件详情" :visible.sync="eventDialogVisible" custom-class="eventDialog shijian-cont"
-               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.eventTypeName || '' }}</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">
-          <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">
-          <h3>现场图片</h3>
-          <image-preview :src="require('@/assets/images/alarm.png')"
-                         style="width: 36%; height: auto;margin: 10px;" />
-        </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;"
-                 v-for="dept in eventInfo.deptList">
-              <img src="@/assets/images/online-img2.png"
-                   style="width: 30px; height:30px; margin:0 5px 0 0 ;">
-              <div style="margin-top: 0 !important; color: #C9E1EF;">{{dept.mapDeptName}}</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="image in eventInfo.attachPath">
-              <el-image :src="image" :preview-src-list="assetTypeAnImage(eventInfo.attachPath)"
-                        style="width:8rem; height:8rem;margin: 5px;">
-              </el-image>
-            </router-link>
-          </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.createTime || '' }}</span>
-                  <el-card>
-                    <h4>{{ eventInfo.eventDescription || '' }}</h4>
-                    <p>{{ eventInfo.createTime || '' }} 提交于 {{ eventInfo.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 class="tongzhi">
       <a>关于加强燃气安全管理工作的通知</a>
@@ -809,6 +691,8 @@
 
     <!-- 详情弹窗 -->
     <DetailDialog ref="detailDialog" />
+    <!-- 事件详情弹窗 -->
+    <EventDetail ref="eventDetail" />
   </div>
 
 
@@ -821,6 +705,7 @@ import Cookies from "js-cookie";
 
 let echarts = require('echarts')
 import DetailDialog from "@/components/DetailDialog/qiaoliang.vue";
+import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 import supermap from '@/components/supermap-2.5d' //超图
 import {
   iconList,
@@ -869,7 +754,8 @@ export default {
   ],
   components: {
     supermap,
-    DetailDialog
+    DetailDialog,
+    EventDetail
   },
   data() {
     return {
@@ -3053,12 +2939,7 @@ export default {
     },
     // 打开事件详情弹窗
     openEventDetail(obj) {
-      getEventDetail({
-        eventId: obj.eventId
-      }).then(res => {
-        this.eventInfo = res.data
-        this.eventDialogVisible = true
-      })
+      this.$refs.eventDetail.openEventDetail(obj.eventId)
     },
     // 资源落点
     selectDeviceNoPage() {
@@ -4005,321 +3886,6 @@ div ::-webkit-scrollbar {
   height: 0;
 }
 
-.eventDialog {
-  width: 97%;
-  height: 95%;
-  border-radius: 10px;
-
-  .el-dialog__body {
-    height: 93%;
-    color: #fff;
-  }
-
-  .transferBg {
-    padding: 15px 0 0 15px;
-    background: linear-gradient(to bottom, rgba(15, 42, 58, 0.9), rgba(35, 42, 48, .9));
-    border-radius: 10px;
-
-    h3 {
-      padding-left: 20px;
-      background: url("../../assets/gas/leftlist_btn.png") no-repeat 0px 0px;
-      background-size: 12px 15px;
-      font-size: 16px;
-      font-weight: 600;
-    }
-
-    .spsb_xx {
-      display: flex;
-      height: 130px;
-      border-radius: 10px;
-      padding-left: 3%;
-
-      .spsb_text {
-        width: 60%;
-        height: 100%;
-        padding: 5px;
-        border-color: #22BCF3;
-        background: #14375A;
-        border-radius: 4px;
-        outline: 0px;
-        border-radius: 10px;
-        color: #fff;
-        line-height: 25px;
-      }
-
-      .btn_option {
-        width: 40%;
-        height: 100%;
-
-        .el-button {
-          width: 70%;
-          height: 20%;
-          margin: 2.5% 0 0 15% !important;
-          background-color: #14375A !important;
-        }
-      }
-    }
-  }
-
-  .xczk_div {
-    margin-top: 15px !important;
-
-    div {
-      font-size: 14px;
-      line-height: 20px;
-      color: #c9e3f3;
-      padding-left: 19px;
-    }
-  }
-
-  .continueForm_contain {
-    position: absolute;
-    width: 8vh;
-    right: 3%;
-    top: 10%;
-    color: #fff;
-    background-color: #5bdddd;
-    border-radius: 10px;
-    border: 0px;
-    outline: 0px;
-    padding: 4px 0px;
-  }
-
-  .d1 {
-    height: 20%;
-
-    .eventInfo_contain {
-      display: flex;
-      height: 60%;
-      width: 100%;
-      flex-wrap: wrap;
-      margin-top: 1.5%;
-
-      .sj_tit {
-        font-size: 14px;
-        font-weight: 600;
-        color: #22bcf3;
-      }
-
-      >div {
-        width: 250px;
-        color: #b9e5ff;
-      }
-
-      >div:not(:nth-child(4n+1)) {
-        margin-right: 5%;
-      }
-
-      .videoLinkage {
-        position: absolute;
-        width: 200px !important;
-        height: 15%;
-        text-align: center;
-        top: 10%;
-        right: -3%;
-        cursor: pointer;
-        background: url("~@/assets/images/lookall/sxt.png") 0 0 no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-  }
-
-  .d2 {
-    position: relative;
-    width: 69%;
-    height: 146px;
-    margin-top: 1%;
-
-    .progress_contain {
-      height: 60%;
-      margin-top: 1.5%;
-
-      color: #c3e7ff;
-
-      .line {
-        width: 99%;
-        height: 2px;
-        margin-top: 3%;
-        background-color: #09C2C4;
-      }
-
-      .e1 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 8%;
-
-        div {
-          height: 22px;
-          line-height: 35px;
-        }
-      }
-
-      .e2 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 32%;
-
-        div {
-          height: 22px;
-          line-height: 35px;
-        }
-      }
-
-      .e3 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 59%;
-
-        div {
-          height: 22px;
-          line-height: 35px;
-        }
-      }
-
-      .e4 {
-        width: 60px;
-        position: absolute;
-        bottom: 18%;
-        left: 86%;
-
-        div {
-          height: 22px;
-          line-height: 35px;
-        }
-      }
-
-      .z-lc-time {
-        width: 120px;
-        height: 23px;
-        background: linear-gradient(0deg, #2A6DCD 0%, rgba(43, 96, 152, 0.5) 100%);
-        border-radius: 50px;
-        font-size: 12px;
-        padding: 0 5px;
-        line-height: 24px !important;
-        color: #fff;
-        position: absolute;
-        left: 55px;
-        top: 15px;
-      }
-
-      .z-clyj {
-        position: absolute;
-        left: 190px;
-        top: 9px;
-
-        img {
-          width: 35px;
-          height: 35px;
-        }
-      }
-    }
-  }
-
-  .d3 {
-    display: flex;
-    height: 56%;
-    margin-top: 1%;
-
-    .video {
-      width: 34%;
-    }
-
-    .mid {
-      width: 34%;
-      margin-left: 1.5%;
-
-      .info {
-        width: 48.5%;
-        height: 48.5%;
-        float: left;
-
-        >div {
-          margin-top: 2.5%;
-          height: 76%;
-
-          >div:not(:nth-child(1)) {
-            margin-top: 2%;
-          }
-        }
-      }
-
-      .info_right {
-        float: left;
-        width: 48.5%;
-        height: 48.5%;
-        margin-left: 3%;
-        overflow: auto;
-
-        >div {
-          margin-top: 3%;
-
-          >div:not(:nth-child(1)) {
-            margin-top: 2%;
-          }
-        }
-
-        .div_Option {
-          width: 96%;
-          height: 16vh;
-        }
-      }
-
-      .demoDeptStylesheet {
-        width: 100%;
-        position: relative;
-        left: -3%;
-      }
-
-      .pics {
-        width: 100%;
-        height: 48.5%;
-        float: left;
-        margin-top: 2%;
-        overflow: auto;
-
-        >div {
-          overflow-x: auto;
-          /* 横向滚动条 */
-          overflow-y: hidden;
-          /* 隐藏纵向滚动条 */
-          white-space: nowrap;
-          /* 防止换行（如果不是 flex） */
-          display: flex;
-          padding-top: 2%;
-
-          img {
-            flex-shrink: 0;
-            width: 200px;
-            height: 140px;
-          }
-
-          >img:not(:nth-child(1)) {
-            margin-left: 3%;
-          }
-        }
-      }
-    }
-
-    .right {
-      width: 30%;
-      height: 140%;
-      margin-left: 1.5%;
-      margin-top: -168px;
-      padding-right: 1%;
-
-      >div {
-        margin-top: 1.5%;
-
-        >div:not(:nth-child(1)) {
-          margin-top: 2%;
-        }
-      }
-    }
-  }
-}
 
 .bg-contain {
   position: absolute;
@@ -5780,15 +5346,6 @@ div ::-webkit-scrollbar {
   }
 }
 
-.eventDialog .transferBg h3 {
-  color: #C9E1EF;
-}
-
-.eventDialog .d1 .eventInfo_contain>div {
-  width: 290px;
-  color: #b9e5ff;
-  padding: 5px;
-}
 
 .shijian-cont {
   width: 75%;
@@ -5802,39 +5359,6 @@ div ::-webkit-scrollbar {
   padding-top: 0;
 }
 
-.el-card {
-  border: 1px solid #0672a3;
-  background-color: rgba(4, 38, 73, 0.63);
-  color: #C9E1EF;
-}
-
-.eventDialog .transferBg .spsb_xx {
-  flex-direction: column;
-}
-
-.eventDialog .transferBg .spsb_xx .spsb_text {
-  width: 100% !important;
-  border: 1px solid #0672a3 !important;
-  background-color: rgba(4, 38, 73, 0.63) !important;
-}
-
-.eventDialog .transferBg .spsb_xx .btn_option {
-  display: flex;
-}
-
-.eventDialog .transferBg .spsb_xx .btn_option .el-button[data-v-d1d2bf40] {
-  height: 30px;
-  border: 1px solid #0672a3 !important;
-  background-color: #0395c5 !important;
-  padding: 0 20px;
-  color: #fff;
-}
-
-.eventDialog .d3 {
-  height: 386px !important;
-}
-
-
 .ditutc-nav {
   position: absolute;
   left: 50%;

src/views/industry/tableInfoHandler.vue

@@ -650,125 +650,8 @@
     <!-- 资源落点详情 -->
     <TableInfo ref="tableInfo" />
     <DetailDialog ref="detailDialog" />
-
-		<!-- 事件详情弹窗 -->
-		<el-dialog title="事件详情" :visible.sync="eventDialogVisible" custom-class="eventDialog"
-			style="margin-top: 5vh !important;" class="dialog2">
-			<div class="shexiangTou">
-				<img src="../../assets/images/lookall/sxt.png" >
-			</div>
-			<div class="transferBg d1">
-				<h3>事件基本信息</h3>
-				<div class="eventInfo_contain">
-					<div style="width: 100%;" class="sj_tit">事件名称：{{ eventInfo.eventTitle || '' }}</div>
-					<div>事件类型：{{ eventInfo.eventTypeName || '' }}</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">
-					<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">
-					<h3>现场图片</h3>
-          <image-preview :src="require('@/assets/images/alarm.png')" :width="550" :height="330" style="margin: 15px"/>
-        </div>
-        <div class="mid">
-          <div class="transferBg info">
-            <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">
-            <h3>联动部门</h3>
-            <h4 style="margin-top: 4%;"></h4>
-            <div 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>
-          </div>
-          <div class="transferBg pics">
-            <h3>处置照片</h3>
-            <div class="otherPics">
-              <image-preview :src="require('@/assets/images/alarm.png')" :width="200" :height="137" style="margin: 5px"/>
-              <image-preview :src="require('@/assets/images/alarm_1.png')" :width="200" :height="137" style="margin: 5px"/>
-            </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.createTime || '' }}</span>
-                  <el-card>
-                    <h4>{{ eventInfo.eventDescription || '' }}</h4>
-                    <p>{{ eventInfo.createTime || '' }} 提交于 {{ eventInfo.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>
+    <!-- 事件详情弹窗 -->
+    <EventDetail ref="eventDetail" />
   </div>
 
 </template>
@@ -778,6 +661,7 @@
 import TableInfo from '@/components/TableInfo/index.vue'
 import supermap from '@/components/supermap-2.5d' //超图
 import fastmenu from '@/components/v-fastmenu.vue'
+
 import {
   getUserProfile
 } from '@/api/system/user'
@@ -822,6 +706,7 @@ import {
   getDeviceOnlineOfflineByDept
 } from '@/api/tableInfo'
 import DetailDialog from "@/components/DetailDialog/tableInfoHandler.vue";
+import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 import {getWeather} from "@/api/data";
 import { selectEventList,getEventDetail } from '@/api/eventLifeLine'
 
@@ -835,7 +720,8 @@ export default {
     TableInfo,
     supermap,
     fastmenu,
-    DetailDialog
+    DetailDialog,
+    EventDetail
   },
   data() {
     return {
@@ -4185,12 +4071,7 @@ export default {
     },
     // 打开事件详情弹窗
     openEventDetail(obj) {
-      getEventDetail({
-        eventId: obj.eventId
-      }).then(res => {
-        this.eventInfo = res.data
-        this.eventDialogVisible = true
-      })
+      this.$refs.eventDetail.openEventDetail(obj.eventId)
     },
     //查看弹窗
     previewDetail(type, row) {

src/views/industry/water.vue

@@ -677,6 +677,8 @@
       <el-button @click="tableListSizeChange(pagerCount-1)" class="water_left" ><</el-button>
       <el-button @click="tableListSizeChange(pagerCount+1)"  class="water_right">></el-button>
     </el-carousel>
+    <!-- 事件详情弹窗 -->
+    <EventDetail ref="eventDetail" />
 	</div>
 
 
@@ -691,6 +693,7 @@
   import Cookies from 'js-cookie'
   import supermap from '@/components/supermap-2.5d' //超图
   import DetailDialog from "@/components/DetailDialog/water.vue";
+  import EventDetail from "@/components/DetailDialog/eventDetail.vue";
   import { iconList, queryVectorTilesMapList } from '@/api/components/supermap'
   import {
     getHeatingList,
@@ -731,7 +734,8 @@
     ],
     components: {
       supermap,
-      DetailDialog
+      DetailDialog,
+      EventDetail
     },
 		data() {
 			return {
@@ -2914,12 +2918,7 @@
       },
       // 打开事件详情弹窗
       openEventDetail(obj) {
-        getEventDetail({
-          eventId: obj.eventId
-        }).then(res => {
-          this.eventInfo = res.data
-          this.eventDialogVisible = true
-        })
+        this.$refs.eventDetail.openEventDetail(obj.eventId)
       },
       openDetail(e,tile){
 				if(tile == '重点关注'){