事件详情地图

src/api/forest.js

@@ -39,3 +39,12 @@ export function getEventList(param) {
     data: param
   })
 }
+
+// 获取事件详情
+export function getEventDetail(param) {
+  return request({
+    url: '/center-fire/VisuForestCloudMapController/getEventDetail',
+    method: 'post',
+    data: param
+  })
+}

src/assets/styles/base.scss

@@ -2166,15 +2166,3 @@ div::-webkit-scrollbar {
 	transform: translateX(-20rem)  !important;
 	transition: all 0.5s ease-in-out  !important;
 }
-
-
-//超图绘制截屏
-.leaflet-pane .leaflet-overlay-pane {
-  height: 75vh !important;
-  width: 143vh !important;
-}
-.leaflet-pane .leaflet-overlay-pane svg {
-  height: 75vh !important;
-  width: 143vh !important;
-  transform: translate3d(0px, 0px, 0px)!important;
-}

src/views/eventdetailsdialog.vue

@@ -3,58 +3,61 @@
     <!--头部-->
     <vheader></vheader>
     <!--主体-->
-    <div class="visual-body" >
+    <div class="visual-body">
       <button @click="showEventDialog"
-              style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情</button>
+              style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情
+      </button>
       <!-- 弹层 -->
       <el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" width="95%"
                  @close="cancelEventShow()">
         <div class="dia-event-info">
           <el-row>
             <!-- 左侧 -->
-            <el-col :span="18" class="dia-left" >
+            <el-col :span="18" class="dia-left">
               <div ref="imageTofile" style="height: 75vh;">
-              <!-- 应急预案 -->
-              <div class="dia-left-top">
-                <div class="dia-left-top-tit">应急预案</div>
-                <div class="dia-left-top-carousel">
-                  <el-carousel height="30px" direction="vertical" :interval="2000">
-                    <el-carousel-item v-for="item in 3" :key="item">
-                      <a href="#">这是一条应急预案</a>
-                    </el-carousel-item>
-                  </el-carousel>
+                <!-- 应急预案 -->
+                <div class="dia-left-top">
+                  <div class="dia-left-top-tit">应急预案</div>
+                  <div class="dia-left-top-carousel">
+                    <el-carousel height="30px" direction="vertical" :interval="2000">
+                      <el-carousel-item v-for="item in 3" :key="item">
+                        <a href="#">这是一条应急预案</a>
+                      </el-carousel-item>
+                    </el-carousel>
+                  </div>
                 </div>
-              </div>
-              <!-- 应急预案end -->
-              <!-- 左侧资源 -->
-              <div class="leftbar"  style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
-                <div class="forthis">
-                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
-                    <div class="i-list-con">
-                      <div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap;">
-                        <div class="icon-con" style="width: fit-content !important;" v-for="(item,index) in resourcesList">
-                          <div class="iconfont icon icon-normal" :class="item.icon"></div>
-                          <div class="icon-text">
-                            <h6>{{ item.count }}</h6>
-                            <h5>{{ item.resourceName }}</h5>
+                <!-- 应急预案end -->
+                <!-- 左侧资源 -->
+                <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
+                  <div class="forthis">
+                    <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
+                      <div class="i-list-con">
+                        <div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap;">
+                          <div class="icon-con" style="width: fit-content !important;"
+                               v-for="(item,index) in resourcesList">
+                            <div class="iconfont icon icon-normal" :class="item.icon"></div>
+                            <div class="icon-text">
+                              <h6>{{ item.count }}</h6>
+                              <h5>{{ item.resourceName }}</h5>
+                            </div>
                           </div>
                         </div>
                       </div>
-                    </div>
-                  </dv-border-box-7>
+                    </dv-border-box-7>
+                  </div>
                 </div>
-              </div>
-              <!-- 左侧资源end -->
-              <!-- 底部工具栏 -->
-           <!--   <div class="dia-left-btm-tool">
-              </div> -->
-              <!-- 底部工具栏end -->
-              <!-- 地图 -->
-              <supermapDialog ref="supermapDialog"  :dynamicPlotting="true"
-                              style="width:100% ;height: 75vh; position: absolute; top:0;left: 0;" :mapDiv="'forestWarmSuperMap'"
-                              :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
-                              :isSideBySide="false"></supermapDialog>
-              <!-- 地图end -->
+                <!-- 左侧资源end -->
+                <!-- 底部工具栏 -->
+                <!--   <div class="dia-left-btm-tool">
+                   </div> -->
+                <!-- 底部工具栏end -->
+                <!-- 地图 -->
+                <supermapDialog ref="supermapDialog" :dynamicPlotting="true"
+                                style="position: absolute; top:0;left: 0;"
+                                :mapDiv="'forestWarmSuperMap'"
+                                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
+                                :isSideBySide="false"></supermapDialog>
+                <!-- 地图end -->
               </div>
             </el-col>
             <!-- 左侧end -->
@@ -69,16 +72,16 @@
                         <div class="z-info-list" style="margin-top: 0;">
                           <el-timeline>
                             <el-timeline-item color="#2bacf7" timestamp="2018/4/12"
-                                              placement="top" v-for="(item,index) in 5">
+                                              placement="top" v-for="(item,index) in eventlog">
                               <el-card>
                                 <div class="z-info-list-con">
                                   <div class="user-and-time flex-d">
-                                    <span>中心管理员</span><span><i
+                                    <span>{{ item.createName }}</span><span><i
                                     class="el-icon-location"></i> 定位</span>
                                   </div>
                                   <div class="z-info">
                                     <div class="this-con-list-info">
-                                      请处理单位及时处理
+                                      {{ item.logContent }}
                                     </div>
                                     <div>
                                       <el-image :src="url"
@@ -145,16 +148,12 @@
 </template>
 
 <script>
-import html2canvas from "html2canvas";//截图组件
+import html2canvas from 'html2canvas'//截图组件
 import supermapDialog from '@/components/supermap' //超图
 import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
 import {
-  getBaseInfo,
-  getTodayEvents,
-  getDeptEventCount,
-  getWeather,
-  getEventList
+  getEventDetail
 } from '@/api/forest'
 
 export default {
@@ -165,6 +164,7 @@ export default {
   },
   data() {
     return {
+      eventlog:[],
       eventDialog: false,
       resourcesList: [{
         resourceName: '取水口',
@@ -219,21 +219,59 @@ export default {
     }
   },
   methods: {
-    cancelEventShow(){
-      console.log("关闭事件弹窗")
+    cancelEventShow() {
+      console.log('关闭事件弹窗')
+      this.eventlog=[];
     },
-    showEventDialog(id) {
-
-      this.eventDialog = true
+    showEventDialog(eventCode) {
+      let that = this
+      //获取事件详情
+      getEventDetail({ eventCode: eventCode }).then(res => {
+        this.eventDialog = true
+        this.eventlog=res.data.eventlog
+        if(res.data.catalogue!=null&&res.data.catalogue.length>0){
+          let markersMap = {
+            lng: 124.59,
+            lat: 43.02,
+            icon: 'marker',
+            bindPopupHtml: '',
+            click: '',
+            parameter: '',
+            keepBindPopup: false,
+            isAggregation: false,
+            radius:0
+          }
+          if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_1' || res.data.catalogue[0].eventStatusValue == 'forest_event_status_2' || res.data.catalogue[0].eventStatusValue == 'forest_event_status_3') {
+            markersMap.icon = 'sj-icon-map-clz'
+            markersMap.isAggregation = false
+          } else if (res.data.catalogue[0].eventStatusValue == 'event_event_status_4') {
+            markersMap.icon = 'sj-icon-map-wcl'
+          }else if (res.data.catalogue[0].eventStatusValue == 'event_event_status_5') {
+            markersMap.icon = 'sj-icon-map-wcl'
+          }else if (res.data.catalogue[0].eventStatusValue == 'event_event_status_6') {
+            markersMap.icon = 'sj-icon-map-wcl'
+          } else {
+            markersMap.icon = 'sj-icon-map-ywc'
+          }
+          markersMap.lng = res.data.catalogue[0].longitude
+          markersMap.lat = res.data.catalogue[0].latitude
+          if(res.data.eventdetail!=null&&res.data.eventdetail.length>0&&res.data.eventdetail[0].fireRadius!=null&&res.data.eventdetail[0].fireRadius!=""&&res.data.eventdetail[0].fireRadius>0){
+            markersMap.radius = res.data.eventdetail[0].fireRadius
+          }
+          setTimeout(() => {
+            that.$refs.supermapDialog.clearM(false)
+            that.$refs.supermapDialog.setMarkersRadius([markersMap])
+          }, 1000)
+        }
+      })
     },
     // 页面元素转图片
-    toImage () {
+    toImage() {
       // 手动创建一个 canvas 标签
-      const canvas = document.createElement("canvas")
+      const canvas = document.createElement('canvas')
       // 获取父标签，意思是这个标签内的 DOM 元素生成图片
       // imageTofile是给截图范围内的父级元素自定义的ref名称
       let canvasBox = this.$refs.imageTofile
-      debugger
       // 获取父级的宽高
       const width = parseInt(window.getComputedStyle(canvasBox).width)
       const height = parseInt(window.getComputedStyle(canvasBox).height)
@@ -245,8 +283,8 @@ export default {
       canvas.height = height * 2
       canvas.style.width = width + 'px'
       canvas.style.height = height + 'px'
-      const context = canvas.getContext("2d");
-      context.scale(2, 2);
+      const context = canvas.getContext('2d')
+      context.scale(2, 2)
       const options = {
         backgroundColor: null,
         canvas: canvas,
@@ -254,7 +292,7 @@ export default {
       }
       html2canvas(canvasBox, options).then((canvas) => {
         // toDataURL 图片格式转成 base64
-        let dataURL = canvas.toDataURL("image/png")
+        let dataURL = canvas.toDataURL('image/png')
         console.log(dataURL)
         this.downloadImage(dataURL)
       })
@@ -266,7 +304,7 @@ export default {
       a.href = url
       a.download = '首页截图'
       a.click()
-    },
+    }
   }
 }
 </script>

src/views/forest.vue

@@ -473,9 +473,9 @@ export default {
   },
   /** ----------------------------------weosocket结束------------------------------------- */
   methods: {
-    showEventDialog(id) {
+    showEventDialog(eventCode) {
       //事件信息弹出
-      this.$refs.eventdetailsdialog.showEventDialog(id)
+      this.$refs.eventdetailsdialog.showEventDialog(eventCode)
     },
     getCurrentDataStr() {
       let date = new Date()
@@ -738,18 +738,24 @@ export default {
             if (this.eventList.length > 50) {
               markersMap.isAggregation = true
             }
-            if (this.eventList[i].eventStatus == 'event_event_status_1' || this.eventList[i].eventStatus == 'event_event_status_2' || this.eventList[i].eventStatus == 'event_event_status_6') {
+            if (this.eventList[i].eventStatusValue == 'forest_event_status_1' || this.eventList[i].eventStatusValue == 'forest_event_status_2' || this.eventList[i].eventStatusValue == 'forest_event_status_3') {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-clz'
               markersMap.isAggregation = false
-            } else if (this.eventList[i].eventStatus == 'event_event_status_4') {
+            } else if (this.eventList[i].eventStatusValue == 'event_event_status_4') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-wcl'
+            }else if (this.eventList[i].eventStatusValue == 'event_event_status_5') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-wcl'
+            }else if (this.eventList[i].eventStatusValue == 'event_event_status_6') {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-wcl'
             } else {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-ywc'
             }
-            markersMap.parameter = this.eventList[i].id
+            markersMap.parameter = this.eventList[i].eventCode
             markersMap.lng = this.eventList[i].longitude
             markersMap.lat = this.eventList[i].latitude
             markersMap.bindPopupHtml = '<div class="map-tip">' +