Update - 预警列表功能优化与接口对接

src/views/CockpitLifeLine.vue

@@ -551,55 +551,33 @@
 						<div class="title-bar-pop">
 							<span>预警列表</span>
 						</div>
-						<el-select v-model="valueSJ1" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">
-							<el-option v-for="item in optionsSJ1" :key="item.value" :label="item.label"
+						<el-select v-model="industry" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">
+							<el-option v-for="item in industryList" :key="item.value" :label="item.label"
 								:value="item.value">
 							</el-option>
 						</el-select>
-						<el-select v-model="valueSJ2" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">
-							<el-option v-for="item in optionsSJ2" :key="item.value" :label="item.label"
+						<el-select v-model="eventType" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">
+							<el-option v-for="item in eventTypeList" :key="item.value" :label="item.label"
 								:value="item.value">
 							</el-option>
 						</el-select>
-						<el-select v-model="valueSJ3" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">
-							<el-option v-for="item in optionsSJ3" :key="item.value" :label="item.label"
-								:value="item.value">
-							</el-option>
-						</el-select>
-						<el-select v-model="valueSJ4" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">
-							<el-option v-for="item in optionsSJ4" :key="item.value" :label="item.label"
-								:value="item.value">
-							</el-option>
-						</el-select>
-						<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2"
+						<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="eventName"
 							class="sj-input-style">
 						</el-input>
 						<div class="list-ul-style-tit">
-							<span>序号</span>
-							<span>报警名称</span>
-							<span>详情</span>
+              <span style="width: 80%;">事件名称</span>
+              <span style="width: 55px;">催办情况</span>
+              <span style="width: 40px;">处理情况</span>
+              <span style="width: 30px;">定位</span>
 						</div>
 						<ul class="list-ul-style">
-							<li @click="dialogVisibleSj = true">
-								<span>1</span>
-								<span>紫气大街66号3号可燃气体泄漏</span>
-								<span><img src="../assets/index_img/dw-icon.png" alt=""></span>
-							</li>
-							<li>
-								<span>2</span>
-								<span>紫气大街66号3号可燃气体泄漏</span>
-								<span><img src="../assets/index_img/dw-icon.png" alt=""></span>
-							</li>
-							<li>
-								<span>3</span>
-								<span>紫气大街66号3号可燃气体泄漏</span>
-								<span><img src="../assets/index_img/dw-icon.png" alt=""></span>
-							</li>
-							<li>
-								<span>4</span>
-								<span>紫气大街66号3号可燃气体泄漏</span>
-								<span><img src="../assets/index_img/dw-icon.png" alt=""></span>
-							</li>
+              <li v-for="item in eventList" :key="item.id"  @click="openEventDetail(item)">
+                <span style="width: 80%;">{{ item.eventTitle }}</span>
+                <span style="width: 55px;">{{ item.expediteStatusLabel}}</span>
+                <span style="width: 40px;"
+                      :class=" item.eventStatusLabel == '已完成' ? 'green-txt' : 'blue-txt' ">{{ item.eventStatusLabel }}</span>
+                <span style="width: 30px;"><img src="../assets/index_img/dw-icon.png" alt="" @click="flyTo(item.longitude,item.latitude)"></span>
+              </li>
 						</ul>
 
 						<div slot="reference" style="cursor: pointer;">预警统计</div>
@@ -636,16 +614,6 @@
 							<span>任务列表</span>
 							<span @click="planVisible = !planVisible">X</span>
 						</div>
-<!--						<el-select v-model="value4" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">-->
-<!--							<el-option v-for="item in options4" :key="item.value" :label="item.label"-->
-<!--								:value="item.value">-->
-<!--							</el-option>-->
-<!--						</el-select>-->
-<!--						<el-select v-model="valueRW2" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">-->
-<!--							<el-option v-for="item in optionsRW2" :key="item.value" :label="item.label"-->
-<!--								:value="item.value">-->
-<!--							</el-option>-->
-<!--						</el-select>-->
 						<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2"
 							class="sj-input-style">
 						</el-input>
@@ -770,7 +738,7 @@
 			</div>
 
 			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;">
+			<supermap ref="supermap" style="width: 100%;height: 100vh;"  @previewPointDetail="previewPointDetail">
 			</supermap>
 
 
@@ -782,132 +750,6 @@
 				</div>
 			</div>
 		</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" st>
-				<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="dialogVisibleSjGD" width="90%" class="sj-dialog-newstyle" @close="cancelEventLocationShow()">
 			<div class="sj-jcxx">
@@ -1028,6 +870,8 @@
 				</div>
 			</div>
 		</el-dialog>
+    <!-- 事件详情弹窗 -->
+    <EventDetail ref="eventDetail" />
 	</div>
 </template>
 
@@ -1035,6 +879,7 @@
 	import Cookies from 'js-cookie'
 	import supermap from '@/components/supermap-2.5d' //超图
 	import TVWallDiv from '@/components/TVWallDiv' //电视墙DIV
+  import EventDetail from "@/components/DetailDialog/eventDetail.vue";
 
 	import '../assets/styles/hz_body.css';
 
@@ -1053,6 +898,7 @@
 	administrativeCountEventStatus,  	//事件统计:事件
 	industryCount,  					//事件统计:行业
   } from '@/api/Regulatory'
+  import { getEventDetail, selectEventList } from '@/api/eventLifeLine'
 
   export default {
     computed: {
@@ -1071,7 +917,8 @@
     },
 		components: {
 			supermap,
-      TVWallDiv
+      TVWallDiv,
+      EventDetail
 		},
 		metaInfo() {
 			return {
@@ -1090,6 +937,15 @@
 
 		},
     watch: {
+      eventName(newVal) {
+        this.selectEventList()
+      },
+      industry(newVal) {
+        this.selectEventList()
+      },
+      eventType(newVal) {
+        this.selectEventList()
+      },
       value5(newVal) {
         this.value5 = newVal
         this.getSupervisionList()
@@ -1119,6 +975,7 @@
 			this.ndChart('');
 			this.annualPlanTreeData();
 			this.fxChart();
+      this.selectEventList();
 		},
 		data() {
 			return {
@@ -1663,82 +1520,47 @@
 					}
 				],
 				value2: '',
-				optionsSJ1: [{
-						value: '燃气',
-						label: '燃气'
-					}, {
-						value: '热力',
-						label: '热力'
-					}, {
-						value: '供水',
-						label: '供水'
-					}, {
-						value: '排水',
-						label: '排水'
-					}, {
-						value: '管廊',
-						label: '管廊'
-					},
-					{
-						value: '桥梁',
-						label: '桥梁'
-					}
-				],
-				valueSJ1: '',
-				optionsSJ2: [{
-						value: '全部',
-						label: '全部'
-					}, {
-						value: '设备上报',
-						label: '设备上报'
-					}, {
-						value: '年度改造',
-						label: '年度改造'
-					}, {
-						value: '风险预警',
-						label: '风险预警'
-					}, {
-						value: '企业运行',
-						label: '企业运行'
-					},
-				],
-				valueSJ2: '',
-				optionsSJ3: [{
-						value: '全部',
-						label: '全部'
-					}, {
-						value: '紧急',
-						label: '紧急'
-					}, {
-						value: '一般',
-						label: '一般'
-					},
-				],
-				valueSJ3: '',
-				optionsSJ4: [{
-						value: '全部',
-						label: '全部'
-					}, {
-						value: '已处理',
-						label: '已处理'
-					}, {
-						value: '未处理',
-						label: '未处理'
-					},
-				],
-				valueSJ4: '',
-				optionsRW2: [{
-						value: '全部',
-						label: '全部'
-					}, {
-						value: '已完成',
-						label: '已完成'
-					}, {
-						value: '未完成',
-						label: '未完成'
-					},
+
+        eventList:[],
+        industryList: [
+          {
+            value: '1',
+            label: '热力'
+          }, {
+            value: '2',
+            label: '排水'
+          }, {
+            value: '3',
+            label: '桥梁'
+          }, {
+            value: '4',
+            label: '管廊'
+          }, {
+            value: '5',
+            label: '燃气'
+          }, {
+            value: '6',
+            label: '供水'
+          }],
+				industry: '',
+				eventTypeList: [
+          {
+            value: '100',
+            label: '城市体检'
+          }, {
+            value: '200',
+            label: '日常监管'
+          }, {
+            value: '300',
+            label: '基础事件'
+          }, {
+            value: '400',
+            label: '设备预警'
+          }
 				],
-				valueRW2: '',
+        eventType: '',
+        eventName:'',
+
 				options3: [{
 					value: '燃气哨兵',
 					label: '燃气哨兵'
@@ -1897,6 +1719,56 @@
           }
         })
       },
+      /**
+       * 预警列表
+       */
+      selectEventList() {
+        selectEventList({industry: this.industry,eventTitle: this.eventName,eventTypeDl:this.eventType}).then(res => {
+          this.eventList = res.rows
+          this.setMakersHandler('longitude', 'latitude', res.rows)
+        })
+      },
+      setMakersHandler(lonKey, latKey, rows) {
+        let ListMarkersList = []
+        this.latKey = latKey
+        this.lonKey = lonKey
+        for (let i = 0; i < rows.length; i++) {
+          let markersMap = {
+            lng: 124.59,
+            lat: 43.02,
+            icon: "marker",
+            bindPopupHtml: "",
+            keepBindPopup: false,
+            isAggregation: false,
+            click: 'previewPointDetail',
+            parameter: ''
+          };
+          markersMap.icon = "yujing";
+          markersMap.lng = rows[i][lonKey] * 1;
+          markersMap.lat = rows[i][latKey] * 1;
+          markersMap.radius = rows[i].cameraRadius || '';
+          markersMap.parameter = {
+            type: this.currentResourceTile,
+            params: rows[i]
+          };
+          ListMarkersList.push(markersMap);
+        }
+        setTimeout(() => {
+          this.$refs.supermap.clearM();
+          this.$refs.supermap.setMarkers(ListMarkersList);
+        }, 2000)
+
+      },
+      previewPointDetail(params) {
+        this.openEventDetail(params.params)
+      },
+      // 打开事件详情弹窗
+      openEventDetail(obj) {
+        this.$refs.eventDetail.openEventDetail(obj.eventId)
+      },
+      flyTo(longitude, latitude) {
+        this.$refs.supermap.dropLocation(latitude * 1, longitude * 1);
+      },
       assetInspection(){
         assetInspection().then(res => {
           this.assetInspectionData = res.data