init

src/assets/styles/base.scss

@@ -553,6 +553,12 @@ div::-webkit-scrollbar {
 }
 
 //弹层样式
+.diaWidth {
+  width: 522px !important;
+  height: 766px !important;
+}
+
+//弹层样式
 .customWidth {
   width: 1822px !important;
   height: 866px !important;
@@ -1335,12 +1341,12 @@ div::-webkit-scrollbar {
 
   .map-tip {
     .d-l-con {
-      
+
       box-shadow: none;
 
       .d-l-l-text {
         width: 100%;
-        
+
 
         h4 {
 		  width: 19rem;

src/views/resources.vue

@@ -31,10 +31,12 @@
       </div>
       <!-- 地图 -->
       <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">
+                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview" @showResourcesDialog="showResourcesDialog">
       </supermap>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
     </div>
+    <resourcesdialog ref="resourcesdialog"
+                        @getResource="getResource"></resourcesdialog>
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
     <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
@@ -58,6 +60,7 @@ import vheader from '@/components/v-header.vue' //一体化共用头部
 import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
 import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
 import TVWall from '@/components/TVWall.vue' //电视墙弹窗
+import resourcesdialog from '@/views/resourcesdialog.vue' //事件详情弹窗
 /** ----------------------------------摄像头预览开始------------------------------------- */
 import {
   getHaiKangVideoServer
@@ -65,6 +68,7 @@ import {
 /** ----------------------------------摄像头预览结束------------------------------------- */
 export default {
   components: {
+    resourcesdialog,
     supermap,
     vheader,
     vBottomMenu,
@@ -100,19 +104,23 @@ export default {
     }
   },
   methods: {
+    //查询各类资源的数量
     getResourcesCount(){
       getResourcesCount().then(res => {
         this.resourcesCountList = res.data;
       })
     },
+    //初始化所有资源并落点
     selectResources(){
       selectResources(this.labelList).then(res => {
         this.resourcesList = res.data;
         this.initMarkers(this.resourcesList);
       })
     },
+    //点击左侧某资源，将该资源进行落点
     selectResourcesByLabel(label){
       let that = this;
+      //每次点击，先将原有点位清空后重新落点
       this.markersList = [];
       this.resourcesList = [];
       that.$refs.supermap.clearM(false);
@@ -122,6 +130,14 @@ export default {
         this.initMarkers(this.resourcesList);
       })
     },
+    showResourcesDialog(id) {
+      console.log(id)
+      //资源信息弹出
+      this.$refs.resourcesdialog.showResourcesDialog(id);
+    },
+    getResource(){
+
+    },
     initMarkers(list){
       if (list != null && list.length > 0) {
         for (let i = 0; i < list.length; i++) {
@@ -138,11 +154,13 @@ export default {
           if (list.length > 200) {
             markersMap.isAggregation = true;
           }
-          // markersMap.icon = 'sj-icon-map-xinshangbao';
+          //根据标签确定资源的图标
           markersMap.icon = 'traffic-resources-' + this.resourcesList[i].label;
-          console.log(markersMap.icon)
+          markersMap.parameter = this.resourcesList[i].id;
+          markersMap.click = 'showResourcesDialog';
           markersMap.lng = list[i].longitude;
           markersMap.lat = list[i].latitude;
+          //POP的通用部分
           markersMap.bindPopupHtml = '<div class="map-tip">' +
             '<span>' +
             ' <div class="d-l-con">' +
@@ -207,7 +225,7 @@ export default {
               ' </div>' +
               '</span>';
           }
-          if(list[i].remark !="" && list[i].remark !=null){
+          if(list[i].remark !="" && list[i].remark !=null){//POP的备注部分
             markersMap.bindPopupHtml += ''+
               '<span>' +
               ' <div class="d-l-con">' +

src/views/resourcesdialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <button @click="showResourcesDialog"
+              style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情
+      </button>
+      <!-- 弹层 -->
+      <el-dialog title="事件详情" :visible.sync="eventDialog" customClass="diaWidth" v-if="eventDialog" @close="cancelEventShow()">
+        <div class="dia-event-info">
+          <el-form label-width="520px">
+            <el-form-item label="名称">
+              <el-input v-model="name" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="用途" v-if="label=='warning_sign'">
+              <el-input v-model="effect" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="设置时间" v-if="label=='warning_sign'">
+              <el-input v-model="setTime" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="竣工日期" v-if="label=='bridge'||label=='culvert'">
+              <el-input v-model="completionDate" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="养护单位" v-if="label=='bridge'||label=='culvert'">
+              <el-input v-model="maintenanceUnit" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="联系电话" v-if="label=='bridge'||label=='culvert'">
+              <el-input v-model="mainTel" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="管理单位" v-if="label=='bridge'||label=='culvert'">
+              <el-input v-model="managementUnit" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="联系电话" v-if="label=='bridge'||label=='culvert'">
+              <el-input v-model="manaTel" placeholder="未查询到数据"/>
+            </el-form-item>
+            <el-form-item label="备注">
+              <el-input v-model="remark" placeholder="未查询到数据" type="textarea"/>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  dicts: ['task_source'],
+  watch: {},
+  components: {},
+  data() {
+    return {
+      id: null,
+      label: 'warning_sign',
+      eventDialog: false,
+      name:"",
+      effect:"",
+      setTime:"",
+      completionDate:"",
+      maintenanceUnit:"",
+      mainTel:"",
+      managementUnit:"",
+      manaTel:"",
+      remark:"",
+    }
+  },
+  props: {},
+  methods: {
+    cancelEventShow() {
+      console.log('关闭事件弹窗')
+      this.eventLogList = []
+    },
+    showResourcesDialog(id) {
+      this.id = id
+      let that = this
+      //获取事件详情
+      this.eventDialog = true
+      console.log(this.id)
+    }
+
+  }
+}
+</script>