哨兵事件页面提交

src/api/components/supermap.js

@@ -40,4 +40,6 @@ export const iconList = {
   'marker': require('@/assets/icons/supermap/marker.png'),
   'positioning': require('@/assets/icons/supermap/positioning.png'), // 地图选点照片
   'hzqy': require('@/assets/icons/supermap/hz_qy.png'),
+  'sj-icon-event': require('@/assets/images/sentinel/hz_qy.png'),
+  'sj-icon-event-yingji': require('@/assets/images/sentinel/hz_qy4.png'),
 }

src/api/event.js

@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+//哨兵事件中心
+export function getStatisticByEventType() {
+  return request({
+    url: '/sooka-digital-construction/eventSubject/getStatisticByEventType',
+    method: 'get',
+  })
+}
+export function getEventList(param) {
+  return request({
+    url: '/sooka-digital-construction/eventSubject/getEventList',
+    method: 'get',
+    params: param
+  })
+}
+export function getEventLog(eventId) {
+  return request({
+    url: '/sooka-digital-construction/eventSubject/log/'+eventId,
+    method: 'get',
+  })
+}

src/components/supermap-2.5d.vue

@@ -191,6 +191,35 @@ export default {
       that.scene = that.viewer.scene
       that.viewer._Widget._creditContainer.style.display = "none" // 去掉超图logo水印
 
+      withinData.push(
+        {
+          "searchValue": null,
+          "createBy": null,
+          "createTime": null,
+          "updateBy": null,
+          "updateTime": null,
+          "remark": null,
+          "params": {},
+          "pageNum": null,
+          "pageSize": null,
+          "id": 1,
+          "deptId": 365,
+          "name": "底图",
+          "note": "124.48751127336885,43.3790475087265",
+          "path": "/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
+          "mapId": null,
+          "visuId": 20,
+          "parentId": null,
+          "sort": 0,
+          "deptName": null,
+          "type": "addImagery",
+          "scale": "350000",
+          "coordinate": "124.48751127336885,43.3790475087265",
+          "parentName": null,
+          "menuName": null,
+          "menuId": null
+        }
+      );
       //2.添加SuperMap iServer发布的影像服务
       that.addImageryProvider(withinData[0].path)
       let longitude = withinData[0].coordinate.split(',')[0]

src/views/SenEventCenter.vue

@@ -4,8 +4,9 @@
 		<!--主体-->
 		<div class="spsb_down">
 			<el-date-picker
-					v-model="value"
+					v-model="dataValue"
 					type="date"
+          @change="updateDataValue"
 					placeholder="选择日期">
 			</el-date-picker>
 		</div>
@@ -15,13 +16,13 @@
 				<div class="yjzx_k1">
 					<img src="../assets/images/sentinel/sb_icon1.png"/>
 					<span>总计</span>
-					<b>235</b>
+					<b>{{eventTotal}}</b>
 				</div>
 				<div class="yjzx_k2">
-					<p><span>震动预警</span><b>60</b></p>
-					<p><span>水位预警</span><b>70</b></p>
-					<p><span>位移预警</span><b>45</b></p>
-					<p><span>泄露预警</span><b>60</b></p>
+					<p v-for="item in eventNumberList">
+            <span>{{item.eventTypeName}}</span>
+            <b>{{item.countSum}}</b>
+          </p>
 				</div>
 			</div>
 			<div class="list_tit">事件列表</div>
@@ -36,25 +37,26 @@
 			<el-input
 					placeholder="请输入内容"
 					suffix-icon="el-icon-search"
-					v-model="input1">
+          @change="getEventLeft(1)"
+					v-model="searchLeft">
 			</el-input>
 			<dl class="sp_list">
-				<dt><span class="dt1">序号</span><span class="dt2">设备名称</span><span class="dt3">定位</span></dt>
-				<div class="hei_scroll hei30">
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+				<dt><span class="dtc1">序号</span><span class="dtc2">设备名称</span><span class="dtc3">定位</span></dt>
+				<div class="hei_scroll hei30" >
+					<dd v-for="(item,index) in eventLeftList">
+            <span class="dtc1">{{index+1}}</span>
+            <span class="dtc2">{{item.eventTitle.length>15?item.eventTitle.substring(0,15)+'...':item.eventTitle}}</span>
+            <span class="dtc3" @click="flyTo(item.longitude,item.latitude)"><img src="../assets/images/sentinel/hz_list_d.png"/></span>
+          </dd>
 				</div>
 			</dl>
 			<el-pagination
 					background
 					layout="prev, pager, next"
-					:total="100">
+          @prev-click="getEventLeft"
+          @next-click="getEventLeft"
+          @current-change="getEventLeft"
+					:total="leftTotal">
 			</el-pagination>
 		</div>
 		<div class="con_right">
@@ -62,156 +64,44 @@
 			<el-input
 					placeholder="请输入事件名称"
 					suffix-icon="el-icon-search"
-					v-model="input1">
+          @change="getEventRight(1)"
+					v-model="searchRight">
 			</el-input>
 			<dl class="sp_list yjsj_list">
 				<dt><span class="dt1">序号</span><span class="dt2">应急事件名称</span><span class="dt3">发生时间</span></dt>
 				<div class="hei_scroll hei64">
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
-					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
+          <dd v-for="(item,index) in eventRightList">
+            <span class="dt1">{{index+1}}</span><span class="dt2">{{item.eventTitle.length>5?item.eventTitle.substring(0,5)+'...':item.eventTitle}}</span><span class="dt3">{{item.createTime}}</span>
+          </dd>
 				</div>
 			</dl>
 			<el-pagination
 					background
 					layout="prev, pager, next"
-					:total="100">
+          @prev-click="getEventRight"
+          @next-click="getEventRight"
+          @current-change="getEventRight"
+					:total="rightTotal">
 			</el-pagination>
 		</div>
-		<div class="visual-body">
-			<!--弹框演示模板 开始-->
-			<img src="../assets/images/sentinel/hz_qy4.png" class="qydw1"/>
-			<img src="../assets/images/sentinel/hz_qy.png" class="qydw2"/>
-			<img src="../assets/images/sentinel/hz_qy.png" class="qydw3"/>
-			<div class="tk_div red_div">
-				<div class="tk1 tk_bor">
-					<h1>事件详情<i>使用中</i></h1>
-					<p>事件名称：超级大姐发生燃气事件</p>
-					<p>上报设备：燃气哨兵</p>
-					<p>上报时间：2025/02/06 11:45:11</p>
-					<p>事件类型：燃气事件</p>
-					<p>所在街道：紫气大路</p>
-					<p>事件坐标：43°43′5% 125°19</p>
-					<p>所属部门：燃气</p>
-					<p>处理流程：<a  @click="dialogVisible = true">详情</a></p>
-				</div>
-				<div class="tk2 tk_bor"  v-if="isVisible">
-					<h1>哨兵详情</h1>
-					<div id="sbxqChart" ref="MyChart"></div>
-				</div>
-			</div>
-			<!--弹框演示模板 结束-->
-
-            <!--弹框 开始-->
-            <el-dialog
-                    title="事件处理流程"
-                    :visible.sync="dialogVisible"
-                    width="70%"
-                    :before-close="handleClose">
-
-                <div class="sjlc_con">
-                    <div class="sjlc_div">
-                        <i><img src="../assets/images/sentinel/sb_icon2.png" /></i>
-                        <h4>事件上报</h4>
-                        <p>事件名称：超级大街燃气爆炸</p>
-                        <p>上报时间：2025/02/06 11:56:25</p>
-                        <p>上报设备：GBD15</p>
-                        <p>预警类型：燃气爆炸</p>
-                        <p>事件坐标：43°43′5% 125°19</p>
-                    </div>
-                    <u></u>
-                    <div class="sjlc_div">
-                        <i><img src="../assets/images/sentinel/sb_icon3.png" /></i>
-                        <h4>事件研判</h4>
-                        <p>事件名称：超级大街燃气爆炸</p>
-                        <p>上报时间：2025/02/06 11:56:25</p>
-                        <p>上报设备：GBD15</p>
-                        <p>预警类型：燃气爆炸</p>
-                        <p>事件坐标：43°43′5% 125°19</p>
-                    </div>
-                    <u class="date"></u>
-                    <div class="sjlc_div date_div">
-                        <i><img src="../assets/images/sentinel/sb_icon4.png" /></i>
-                        <h4>事件派发</h4>
-                        <p>事件名称：超级大街燃气爆炸</p>
-                        <p>上报时间：2025/02/06 11:56:25</p>
-                        <p>上报设备：GBD15</p>
-                        <p>预警类型：燃气爆炸</p>
-                        <p>事件坐标：43°43′5% 125°19</p>
-                    </div>
-                    <u></u>
-                    <div class="sjlc_div">
-                        <i><img src="../assets/images/sentinel/sb_icon5.png" /></i>
-                        <h4>事件处置</h4>
-                        <p>事件名称：超级大街燃气爆炸</p>
-                        <p>上报时间：2025/02/06 11:56:25</p>
-                        <p>上报设备：GBD15</p>
-                        <p>预警类型：燃气爆炸</p>
-                        <p>事件坐标：43°43′5% 125°19</p>
-                    </div>
-                    <u></u>
-                    <div class="sjlc_div">
-                        <i><img src="../assets/images/sentinel/sb_icon6.png" /></i>
-                        <h4>已经办结</h4>
-                        <p>事件名称：超级大街燃气爆炸</p>
-                        <p>上报时间：2025/02/06 11:56:25</p>
-                        <p>上报设备：GBD15</p>
-                        <p>预警类型：燃气爆炸</p>
-                        <p>事件坐标：43°43′5% 125°19</p>
-                    </div>
-                </div>
-				<div class="sjcl_media_con">
-					<div class="sjcl_media">
-						<img src="../assets/images/sentinel/sb_img1.png"/>
-					</div>
-					<div class="sjcl_img">
-						<img src="../assets/images/sentinel/sb_img2.png"/>
-						<img src="../assets/images/sentinel/sb_img2.png"/>
-						<img src="../assets/images/sentinel/sb_img2.png"/>
-						<img src="../assets/images/sentinel/sb_img2.png"/>
-					</div>
-				</div>
-
-            </el-dialog>
-            <!--弹框 结束-->
-
-			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;">
-			</supermap>
-		</div>
 	</div>
 </template>
 
 <script>
 	import Cookies from 'js-cookie'
-	import supermap from '@/components/supermap-2.5d' //超图
 	import {getUserProfile} from "@/api/system/user";
+	import {getEventList,getStatisticByEventType} from "@/api/event";
 
 	import '../assets/styles/sb_body.css';
 
 	import {
 		selectConfigKey
 	} from "@/api/system/config";
+  import {param} from "@/utils";
 	// import * as echarts from 'echarts'
 	let echarts = require("echarts");
 	export default {
 		components: {
-			supermap,
 		},
 		metaInfo () {
 			return {
@@ -226,19 +116,20 @@
 			}
 		},
 		created() {
-
+      this.getEventLeft(1);
+      this.getEventRight(1);
+      this.getSupermapEvent();
+      this.getStatisticByEventType();
 		},
 		mounted() {
 			// 初始化地图数据
-			// this.getSuperMapUrl();
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);
 		},
 		data() {
 			return {
-				title:'四平市智慧哨兵监管平台',
-                dialogVisible: false,
+        dialogVisible: false,
 				pickerOptions: {
 					disabledDate(time) {
 						return time.getTime() > Date.now();
@@ -264,10 +155,22 @@
 						}
 					}]
 				},
-				value: '',
-				input:'',
-				input1: '',
+        dataValue: this.getCurrentDataStr(new Date()),
+
+        eventNumberList:[],
+        eventTotal:0,
+
 				title:'四平市智慧哨兵监管平台',
+        searchLeft: '',
+        eventLeftList:[],
+        leftTotal:0,
+        leftCurrentPage:1,
+
+        searchRight:'',
+        eventRightList:[],
+        rightTotal:0,
+        rightCurrentPage:1,
+
 				options: [{
 					value: '选项1',
 					label: '华生1'
@@ -288,35 +191,95 @@
 			}
 		},
 		methods: {
-			getSuperMapUrl(){
-				getUserProfile().then(response => {
-					let mapDeptId=response.mapDeptId
-					let num = 0;
-					if (mapDeptId == "365") {
-						num = 0;
-					} else if (mapDeptId == "369") {
-						num = 1;
-					} else if (mapDeptId == "371") {
-						num = 2;
-					} else if (mapDeptId == "373") {
-						num = 3;
-					} else if (mapDeptId == "372") {
-						num = 4;
-					} else if (mapDeptId == "370") {
-						num = 5;
-					}
-					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
-				});
-			},
-// 弹框开启
-            handleClose(done) {
-                this.$confirm('确认关闭？')
-                    .then(_ => {
-                        done();
-                    })
-                    .catch(_ => {});
+      getStatisticByEventType(){
+        getStatisticByEventType().then(req => {
+          this.eventNumberList = req.data;
+          for(let item of req.data){
+            this.eventTotal += item.countSum
+          }
+        })
+      },
+      getCurrentDataStr(date) {
+        let y = date.getFullYear()
+        let m = date.getMonth() + 1
+        m = m < 10 ? '0' + m : m
+        let d = date.getDate()
+        d = d < 10 ? '0' + d : d
+        return y + '-' + m + '-' + d
+      },
+      updateDataValue(value){
+        this.dataValue = this.getCurrentDataStr(value);
+        this.getEventLeft(1);
+        this.getEventRight(1);
+      },
+      getEventLeft(pageNum){
+        let param = {
+          pageNum:pageNum,
+          pageSize:10,
+          eventTitle:this.searchLeft,
+          createTimeRange:this.dataValue+","+this.dataValue,
+        };
+        getEventList(param).then(req => {
+          this.eventLeftList = req.rows;
+          this.leftTotal = req.total;
+        })
+      },
+      flyTo(longitude,latitude){
+        this.$parent.$refs.supermap.flyTo(longitude,latitude);
+      },
+      getEventRight(pageNum){
+        let param = {
+          pageNum:pageNum,
+          pageSize:10,
+          eventTitle:this.searchRight,
+          createTimeRange:this.dataValue+","+this.dataValue,
+          eventTypeCode:'2'
+        };
+        getEventList(param).then(req => {
+          this.eventRightList = req.rows;
+          this.rightTotal = req.total;
+        })
+      },
+      getSupermapEvent(){
+        let that = this;
+        let param = {
+          createTimeRange:this.dataValue+","+this.dataValue,
+          selectClient:"ALL"
+        };
+        getEventList(param).then(res => {
+          const markersList = []
+          if (res.rows != null && res.rows.length > 0) {
+            for (let i = 0; i < res.rows.length; i++) {
+              let markersMap = {
+                lng: 124.59,
+                lat: 43.02,
+                icon: 'marker',
+                bindPopupHtml: '',
+                click: 'openDetails',
+                parameter: res.rows[i],
+                keepBindPopup: false,
+                isAggregation: false
+              }
+              markersMap.icon = "sj-icon-event";
+              if(res.rows[i].eventTypeCode == '2'){//应急事件
+                markersMap.icon = "sj-icon-event-yingji";
+              }
+              markersMap.lng = res.rows[i].longitude
+              markersMap.lat = res.rows[i].latitude
+              markersList.push(markersMap);
             }
-        }
+            setTimeout(() => {
+              that.$parent.$refs.supermap.clearM()
+              that.$parent.$refs.supermap.setMarkers(markersList)
+            }, 1000)
+          } else {
+            setTimeout(() => {
+              that.$parent.$refs.supermap.clearM()
+            }, 1000)
+          }
+        })
+      },
+    }
 	}
 </script>
 <style rel="stylesheet/scss" lang="scss">
@@ -503,6 +466,30 @@
 			}
 		}
 	}
+  .sp_list span.dtc1 {
+    width: 60px;
+    background: url("../assets/images/sentinel/hz_list_j.png") no-repeat left;
+    padding-left: 15px;
+  }
+
+  .sp_list span.dtc2 {
+    width: 192px;
+    text-align: left;
+  }
+
+  .sp_list span.dtc3 {
+    width: 35px;
+    text-align: center;
+    line-height: 38px;
+    position: relative;
+  }
+
+  .sp_list span.dtc3 img {
+    display: inline-block;
+    position: absolute;
+    top: 10px;
+    left: 11px;
+  }
 
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>

src/views/SentryCockpit.vue

@@ -27,16 +27,12 @@
 		</div>
 		<div class="visual-body" style="height: 100%;">
 
-			<!-- 地图 -->
-			<!-- <supermap ref="supermap" style="width: 100%;height: 100vh;">
-			</supermap> -->
 		</div>
 	</div>
 </template>
 
 <script>
 	import Cookies from 'js-cookie'
-	import supermap from '@/components/supermap-2.5d' //超图
 	import {
 		getUserProfile
 	} from "@/api/system/user";
@@ -49,7 +45,6 @@
 	export default {
 		name: 'SentryCockpit',
 		components: {
-			supermap,
 		},
 		metaInfo() {
 			return {
@@ -105,26 +100,6 @@
 		},
 
 		methods: {
-			getSuperMapUrl() {
-				getUserProfile().then(response => {
-					let mapDeptId = response.mapDeptId
-					let num = 0;
-					if (mapDeptId == "365") {
-						num = 0;
-					} else if (mapDeptId == "369") {
-						num = 1;
-					} else if (mapDeptId == "371") {
-						num = 2;
-					} else if (mapDeptId == "373") {
-						num = 3;
-					} else if (mapDeptId == "372") {
-						num = 4;
-					} else if (mapDeptId == "370") {
-						num = 5;
-					}
-					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
-				});
-			},
 			toggleDisplay() {
 				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
 			},
@@ -839,17 +814,17 @@
 		padding-left: 15px;
 	}
 
-	.sp_list span.dt2 {
-		width: 200px;
-		text-align: left;
-	}
-
-	.sp_list span.dt3 {
-		width: 40px;
-		text-align: center;
-		line-height: 38px;
-		position: relative;
-	}
+  .sp_list span.dt2 {
+    width: 85px;
+    text-align: left;
+  }
+
+  .sp_list span.dt3 {
+    width: 155px;
+    text-align: center;
+    line-height: 38px;
+    position: relative;
+  }
 
 	.sp_list span.dt3 img {
 		display: inline-block;

src/views/SentryPage.vue

@@ -58,8 +58,104 @@
 			</div>
 
 			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
+			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview" @openDetails="openEventDetails">
 			</supermap>
+      <!-- 事件詳情彈窗start -->
+      <div v-if="isEventDetails">
+        <div class="tk_div red_div">
+          <div class="tk1 tk_bor">
+            <h1>事件详情<i @click="isEventDetails = false">X</i></h1>
+            <p>事件名称：{{eventDetails.eventTitle}}</p>
+            <p>上报设备：{{eventDetails.createName}}</p>
+            <p>上报时间：{{eventDetails.createTime}}</p>
+            <p>事件类型：{{eventDetails.eventTypeName}}</p>
+            <p>所在街道：无</p>
+            <p>事件坐标：{{eventDetails.longitude}};{{eventDetails.latitude}}</p>
+            <p>所属部门：无</p>
+            <p>处理流程：<a  @click="dialogVisible = true">详情</a></p>
+          </div>
+        </div>
+        <!--弹框 开始-->
+        <el-dialog
+          title="事件处理流程"
+          :visible.sync="dialogVisible"
+          width="70%"
+          :before-close="handleClose">
+
+          <div class="sjlc_con">
+            <div class="sjlc_div" :class="eventDetails.eventStatus=='event_report'?'date_div':''">
+              <i><img src="../assets/images/sentinel/sb_icon2.png" /></i>
+              <h4>事件上报</h4>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_report'?'tab-data-tabs':''" border="2">
+                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              </table>
+            </div>
+            <u :class="eventDetails.eventStatus=='event_confirmation'?'date':''"></u>
+            <div class="sjlc_div" :class="eventDetails.eventStatus=='event_confirmation'?'date_div':''">
+              <i><img src="../assets/images/sentinel/sb_icon3.png" /></i>
+              <h4>事件确认</h4>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_confirmation'?'tab-data-tabs':''" border="2">
+                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              </table>
+            </div>
+            <u :class="eventDetails.eventStatus=='event_signature'?'date':''"></u>
+            <div class="sjlc_div" :class="eventDetails.eventStatus=='event_signature'?'date_div':''">
+              <i><img src="../assets/images/sentinel/sb_icon4.png" /></i>
+              <h4>事件签收</h4>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_signature'?'tab-data-tabs':''" border="2">
+                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              </table>
+            </div>
+            <u :class="eventDetails.eventStatus=='event_completion'?'date':''"></u>
+            <div class="sjlc_div" :class="eventDetails.eventStatus=='event_completion'?'date_div':''">
+              <i><img src="../assets/images/sentinel/sb_icon5.png" /></i>
+              <h4>事件办结</h4>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_completion'?'tab-data-tabs':''" border="2">
+                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              </table>
+            </div>
+            <u :class="eventDetails.eventStatus=='event_archiving'||eventDetails.eventStatus=='event_review'?'date':''"></u>
+            <div class="sjlc_div" :class="eventDetails.eventStatus=='event_archiving'||eventDetails.eventStatus=='event_review'?'date_div':''">
+              <i><img src="../assets/images/sentinel/sb_icon6.png" /></i>
+              <h4>已经归档</h4>
+              <table class="tab-tabs" :class="eventDetails.eventStatus=='event_archiving'?'tab-data-tabs':''" border="2">
+                <tr><td class="tab-left">事件名称</td><td class="tab-right">{{eventDetails.eventTitle}}</td></tr>
+                <tr><td class="tab-left">上报时间</td><td class="tab-right">{{eventDetails.createTime}}</td></tr>
+                <tr><td class="tab-left">上报设备</td><td class="tab-right">{{eventDetails.createName}}</td></tr>
+                <tr><td class="tab-left">预警类型</td><td class="tab-right">{{eventDetails.eventTypeName}}</td></tr>
+              </table>
+            </div>
+          </div>
+          <div class="block">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(activity, index) in activities"
+                :key="index"
+                placement="top">
+                <span class="timeline-span">{{activity.createTime}}</span>
+                <el-card>
+                  <h4>{{activity.logContent}}</h4>
+                  <p>{{activity.createName}} 提交于 {{activity.createTime}}</p>
+                  <el-image v-if="activity.attachList.length>0" v-for="item in activity.attachList" :src="item.attachPath" style="width: 150px;"></el-image>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-dialog>
+      </div>
+      <!-- 事件詳情彈窗end -->
 		</div>
 	</div>
  </template>
@@ -70,52 +166,55 @@
 	import {
 		getUserProfile
 	} from "@/api/system/user";
-
 	import '../assets/styles/hz_body.css';
 	import {
 		selectConfigKey
 	} from "@/api/system/config";
-    import {
-		selectByDeviceId,
-        selectDailyThreshold
+  import {
+		selectByDeviceId,selectDailyThreshold
 	} from "@/api/sentinel"
     let echarts = require("echarts");
-
-    export default {
-        name: 'MyChart',
-        components: {
-            supermap
-        },
-        metaInfo() {
-            return {
-                title: '四平市智慧哨兵监管平台',
-                meta: [{
-                        charset: "utf-8"
-                    },
-                    {
-                        name: "viewport",
-                        content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-                    }
-                ]
-            }
-        },
-        data() {
+    import {getEventList, getEventLog} from "@/api/event";
+  export default {
+    name: 'MyChart',
+    components: {
+        supermap
+    },
+    metaInfo() {
+      return {
+        title: '四平市智慧哨兵监管平台',
+        meta: [{
+            charset: "utf-8"
+          },
+          {
+            name: "viewport",
+            content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+          }
+        ]
+      }
+    },
+    data() {
 			return {
 				title: '四平市智慧哨兵监管平台',
-                routerIdx:0,                    // 当前导航索引
-                detailInfo:{},                  // 设备详情信息
-                isVisible: false,               // 初始时设置为false，不显示内容
-                isDetailVisible:false,          // 设备弹窗显隐flag
-			}
+        routerIdx:0,                    // 当前导航索引
+        detailInfo:{},                  // 设备详情信息
+        isVisible: false,               // 初始时设置为false，不显示内容
+        isDetailVisible:false,          // 设备弹窗显隐flag
+
+        isEventDetails:false,           // 事件基础信息显隐框
+        eventDetails:{},                // 事件详情信息
+        dialogVisible: false,           // 事件日志显隐框
+        activities:[],                  // 事件日志信息
+      }
 		},
-        created() {
-
-        },
-        mounted() {
-            // 初始定向到驾驶舱
-            this.$router.push({
-                path:'/SentryCockpit'
-            })
+    created() {
+
+    },
+    mounted() {
+        // 初始定向到驾驶舱
+        this.$router.push({
+            path:'/SentryCockpit'
+        })
 			// 初始化地图数据
 			this.getSuperMapUrl();
 			setTimeout(() => {
@@ -123,18 +222,18 @@
 			}, 1000);
 
 		},
-        methods:{
-            closeDetail(){
+    methods:{
+      closeDetail(){
 				this.isDetailVisible = false
 				this.isVisible = false
 			},
-            preview(e){
+      preview(e){
 				selectByDeviceId({id:e.id}).then(res => {
 					this.detailInfo = res.data
 					this.isDetailVisible = true
 				})
 			},
-            toggleDisplay(deviceCode) {
+      toggleDisplay(deviceCode) {
 				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
 				if(this.isVisible){
 					selectDailyThreshold(deviceCode).then(res => {
@@ -142,19 +241,19 @@
 					})
 				}
 			},
-            jumpTo(path,idx){
-                if(this.routerIdx == idx) return;
-                // 重置哨兵详情态
-                this.isDetailVisible = false
+      jumpTo(path,idx){
+        if(this.routerIdx == idx) return;
+        // 重置哨兵详情态
+        this.isDetailVisible = false
 				this.isVisible = false
-                // 地图清点
-                this.$refs.supermap.clearM();
-                this.routerIdx = idx
-                this.$router.push({
-                    path
-                })
-            },
-            initChart(data){
+        // 地图清点
+        this.$refs.supermap.clearM();
+        this.routerIdx = idx
+        this.$router.push({
+            path
+        })
+      },
+      initChart(data){
 				// 基于准备好的dom，初始化echarts实例
 				const myChart = echarts.init(document.getElementById('sbxqChart'))
 				let xdata = data.time //x轴
@@ -316,7 +415,7 @@
 				};
 				myChart.setOption(option);
 			},
-            getSuperMapUrl() {
+      getSuperMapUrl() {
 				getUserProfile().then(response => {
 					let mapDeptId = response.mapDeptId
 					let num = 0;
@@ -336,8 +435,20 @@
 					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
 				});
 			},
-        }
+      openEventDetails(params){
+        this.isEventDetails = true;
+        this.eventDetails = params;
+        this.activities =
+        getEventLog(params.eventId).then(req => {
+          this.activities = req.data;
+        })
+      },
+      // 弹框开启
+      handleClose(done) {
+        done();
+      },
     }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
@@ -575,12 +686,12 @@
 	}
 
 	.sp_list span.dt2 {
-		width: 200px;
+		width: 95px;
 		text-align: left;
 	}
 
 	.sp_list span.dt3 {
-		width: 40px;
+		width: 155px;
 		text-align: center;
 		line-height: 38px;
 		position: relative;
@@ -799,7 +910,27 @@
 		width: 100%;
 		height: 280px;
 	}
+  .tab-tabs{
+    color: #ffffff;
+    border-collapse: collapse; /* 合并边框 */
+    border: 2px solid #ffffff; /* 设置边框样式 */
+  }
+  .tab-data-tabs{
+    color: #2c1de9;
+    border-collapse: collapse; /* 合并边框 */
+    border: 2px solid #ffffff; /* 设置边框样式 */
+  }
+  .tab-left{
+    width: 65px;
+  }
+  .tab-right{
+    width: 155px;
+  }
+  .timeline-span{
+    color: #fff;
+    font-size: 16px;
+  }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
-</style>
+</style>

vue.config.js

@@ -53,7 +53,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://10.6.52.11:3031`,
-		target: `http://192.168.10.12:3041`,
+		target: `http://192.168.4.5:3031`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''