增加事件表格点击事件

src/components/amap.vue

@@ -61,6 +61,7 @@ export default {
       forestMarker: null,
       rightScrollMarker: null,
       boundaryPolygon: null,
+      eventMarker: null,
       markerData: {},
       cityMarkerArr: [],
       putPolygonData: [],
@@ -122,6 +123,8 @@ export default {
           this.getRightScrollData(this.leftPage);
         } else if (this.leftPage === 'economics') {
           this.getEconomics(this.smallClassMapArr);
+        } else if (this.leftPage === 'event') {
+          this.getEven();
         }
       }
       // this.putPolygon(val)
@@ -218,11 +221,75 @@ export default {
             });
             // this.smallMarker.setMap(this.map);
             this.map.add(this.smallMarker);
-          } else if(val.name == false && this.smallMarker){
+          } else if (val.name == false && this.smallMarker) {
             this.map.remove(this.smallMarker);
           }
         }
       }
+    },
+    '$store.state.addr.eventData': {
+      deep: true,
+      immediate: true,
+      handler: function (val, oldVal) {
+        if (val) {
+          if (val.longitude && val.latitude && !val.name) {
+            let lanLatArr = [val.longitude, val.latitude];
+            let baseIcon = '';
+            let fireIcon = require('@/assets/img/fire.png');
+            let cutTreeIcon = require('@/assets/img/cutTree.png');
+            let insectpestIcon = require('@/assets/img/insectpest.png');
+            if (val.eventType == 1) {
+              val.eventContLabel = '火灾';
+              baseIcon = fireIcon;
+            } else if (val.eventType == 2) {
+              val.eventContLabel = '砍伐';
+              baseIcon = cutTreeIcon;
+            } else if (val.eventType == 3) {
+              val.eventContLabel = '病虫害';
+              baseIcon = insectpestIcon;
+            }else if(val.eventType == 4) {
+              val.eventContLabel = '偷盗林木'
+            }
+            let treeSmallLabel =
+              "<div class='info-small'>" +
+              "<h5 class='marker-title'>历史事件" +
+              '</h5>' +
+              "<div class='marker-content'>" +
+              '<p>事件类型：' +
+              val.eventContLabel +
+              '</p>' +
+              '<p>上报时间：' +
+              val.createTime +
+              '</p>' +
+              '<p>上报人：' +
+              val.createBy +
+              '</p>' +
+              '<p>位置：' +
+              val.cityName +
+              val.countyName +
+              val.townName +
+              val.villageName +
+              '</p>' +
+              '</div>' +
+              '</div>';
+            this.eventMarker = new AMap.Marker({
+              position: lanLatArr,
+              icon: baseIcon,
+              anchor: 'bottom-center',
+              offset: new AMap.Pixel(0, 0),
+              zIndex: 9999
+            });
+            this.eventMarker.setLabel({
+              direction: 'top',
+              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
+              content: treeSmallLabel //设置文本标注内容
+            });
+            this.map.add(this.eventMarker);
+          }else if(val.name == false && this.eventMarker) {
+            this.map.remove(this.eventMarker);
+          }
+        }
+      }
     }
   },
   computed: {
@@ -557,9 +624,6 @@ export default {
           this.setMarker();
         }
         this.getrjx(adcode, selectStreet);
-        if (page === 'event') {
-          this.getEven();
-        }
 
         //设置当前使用的定位用节点
         this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
@@ -601,6 +665,8 @@ export default {
           this.getRightScrollData(this.leftPage);
         } else if (this.leftPage === 'economics') {
           this.getEconomics(this.smallClassMapArr);
+        } else if (this.leftPage === 'event') {
+          this.getEven();
         }
       });
     },
@@ -903,15 +969,15 @@ export default {
             item.eventContLabel = '病虫害';
             baseIcon = insectpestIcon;
           }
-          this.smallMarker = new AMap.Marker({
-            map: this.map,
+          _this.smallMarker = new AMap.Marker({
+            map: _this.map,
             position: lanLatArr,
             icon: baseIcon,
             anchor: 'bottom-center',
             offset: new AMap.Pixel(0, 0),
             zIndex: 999
           });
-          this.smallMarker.on('click', function (e) {
+          _this.smallMarker.on('click', function (e) {
             let treeSmallLabel =
               "<div class='info-small'>" +
               "<h5 class='marker-title'>最新事件" +
@@ -948,8 +1014,12 @@ export default {
             });
             _this.map.add(_this.eventMarker);
           });
-          this.smallMarker.on('mouseout', function (e) {
-            _this.map.remove(_this.eventMarker);
+          _this.smallMarker.on('mouseout', function (e) {
+            if (!_this.eventMarker) {
+              return;
+            } else {
+              _this.map.remove(_this.eventMarker);
+            }
           });
         });
       });
@@ -1225,6 +1295,8 @@ export default {
             this.getRightScrollData(this.leftPage);
           } else if (this.leftPage === 'economics') {
             this.getEconomics(this.smallClassMapArr);
+          } else if (this.leftPage === 'event') {
+            this.getEven();
           }
         });
       });

src/service/index.js

@@ -1,225 +1,219 @@
 /*
  * @LastEditors: gcz
  */
-import { callApi } from '../utils/request'
+import { callApi } from "../utils/request";
 
-export * from './mock'
+export * from "./mock";
 
 //查询小班列表
-export const rightScrollData = (data) =>
-    callApi({
-        url: 'smallClass',
-        data,
-        prefixUrl: 'api2',
-    })
+export const rightScrollData = data =>
+  callApi({
+    url: "smallClass",
+    data,
+    prefixUrl: "api2"
+  });
 
 //查询基地列表
-export const baseList = (data) =>
-    callApi({
-        url: 'finance/baseList',
-        data,
-        prefixUrl: 'api2',
-    })
+export const baseList = data =>
+  callApi({
+    url: "finance/baseList",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询小班地图边界
-export const smallClassMap = (data) =>
-    callApi({
-        url: 'smallClass/map',
-        data,
-        prefixUrl: 'api2',
-    })
+export const smallClassMap = data =>
+  callApi({
+    url: "smallClass/map",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询小班详情
-export const smallClassDetail = (data) =>
-    callApi({
-        url: 'smallClass/detail',
-        data,
-        prefixUrl: 'api2',
-    })
+export const smallClassDetail = data =>
+  callApi({
+    url: "smallClass/detail",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询省市县
-export const searchApi = (data) =>
-    callApi({
-        url: 'smallClass/area',
-        data,
-        prefixUrl: 'api2',
-    })
+export const searchApi = data =>
+  callApi({
+    url: "smallClass/area",
+    data,
+    prefixUrl: "api2"
+  });
 
 //森林资源
 // 查询小班基本信息
-export const smallInfo = (data) =>
-    callApi({
-        url: 'forest/smallInfo',
-        data,
-        prefixUrl: 'api2',
-    })
+export const smallInfo = data =>
+  callApi({
+    url: "forest/smallInfo",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询小班基本信息
-export const farmInfo = (data) =>
-    callApi({
-        url: 'forest/farm',
-        data,
-        prefixUrl: 'api2',
-    })
+export const farmInfo = data =>
+  callApi({
+    url: "forest/farm",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询统计概况
-export const page1numerical = (data) =>
-    callApi({
-        url: 'forest/statis',
-        data,
-        prefixUrl: 'api2',
-    })
+export const page1numerical = data =>
+  callApi({
+    url: "forest/statis",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询蓄积量统计
-export const page1echarts01 = (data) =>
-    callApi({
-        url: 'forest/stock',
-        data,
-        prefixUrl: 'api2',
-    })
+export const page1echarts01 = data =>
+  callApi({
+    url: "forest/stock",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询面积统计
-export const page1echarts02 = (data) =>
-    callApi({
-        url: 'forest/area',
-        data,
-        prefixUrl: 'api2',
-    })
+export const page1echarts02 = data =>
+  callApi({
+    url: "forest/area",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 查询样地列表
-export const forestSample = (data) =>
-    callApi({
-        url: 'forest/sample',
-        data,
-        prefixUrl: 'api2',
-    })
-
+export const forestSample = data =>
+  callApi({
+    url: "forest/sample",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 事件信息
-export const alarmDataApi = (data) =>
-    callApi({
-        url: 'event/latest',
-        data,
-        prefixUrl: 'api2',
-    })
-
-export const page6echarts01 = (data) =>
-    callApi({
-        url: 'event/statisVillage',
-        data,
-        prefixUrl: 'api2',
-    })
-
-export const page6echarts02 = (data) =>
-    callApi({
-        url: 'event/rate',
-        data,
-        prefixUrl: 'api2',
-    })
-
-export const page6numerical = (data) =>
-    callApi({
-        url: 'event/statis',
-        data,
-        prefixUrl: 'api2',
-    })
-
-export const eventList = (data) =>
-    callApi({
-        url: 'event/list',
-        data,
-        prefixUrl: 'api2',
-    })
+export const alarmDataApi = data =>
+  callApi({
+    url: "event/latest",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const page6echarts01 = data =>
+  callApi({
+    url: "event/statisVillage",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const page6echarts02 = data =>
+  callApi({
+    url: "event/rate",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const page6numerical = data =>
+  callApi({
+    url: "event/statis",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const eventList = data =>
+  callApi({
+    url: "event/list",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const eventDetail = data =>
+  callApi({
+    url: "event/detail",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 林木结构（树种）
-export const page2numerical = (data) =>
-    callApi({
-        url: 'smallClass/treeStatis',
-        data,
-        prefixUrl: 'api2',
-    })
-
-export const page2echarts01 = (data) =>
-    callApi({
-        url: 'smallClass/treeComp',
-        data,
-        prefixUrl: 'api2',
-    })
-
-export const page2echarts02 = (data) =>
-    callApi({
-        url: 'smallClass/treeDist',
-        data,
-        prefixUrl: 'api2',
-    })
-
-export const page2echarts03 = (data) =>
-    callApi({
-        url: 'smallClass/treeCount',
-        data,
-        prefixUrl: 'api2',
-    })
+export const page2numerical = data =>
+  callApi({
+    url: "smallClass/treeStatis",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const page2echarts01 = data =>
+  callApi({
+    url: "smallClass/treeComp",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const page2echarts02 = data =>
+  callApi({
+    url: "smallClass/treeDist",
+    data,
+    prefixUrl: "api2"
+  });
+
+export const page2echarts03 = data =>
+  callApi({
+    url: "smallClass/treeCount",
+    data,
+    prefixUrl: "api2"
+  });
 
 // 林下经济
 //查询数据概况
-export const page5numerical = (data) =>
-    callApi({
-        url: 'finance/baseInfo',
-        data,
-        prefixUrl: 'api2',
-    })
+export const page5numerical = data =>
+  callApi({
+    url: "finance/baseInfo",
+    data,
+    prefixUrl: "api2"
+  });
 
 //查询作物切换-作物信息
-export const financeCateInfo = (data) =>
-    callApi({
-        url: 'finance/cateInfo',
-        data,
-        prefixUrl: 'api2',
-    })
+export const financeCateInfo = data =>
+  callApi({
+    url: "finance/cateInfo",
+    data,
+    prefixUrl: "api2"
+  });
 
 //林下经济-占地面积统计
-export const page5echarts01 = (data) =>
-    callApi({
-        url: 'finance/baseArea',
-        data,
-        prefixUrl: 'api2',
-    })
+export const page5echarts01 = data =>
+  callApi({
+    url: "finance/baseArea",
+    data,
+    prefixUrl: "api2"
+  });
 
 //林下经济-基地数量统计
-export const page5echarts02 = (data) =>
-    callApi({
-        url: 'finance/baseCount',
-        data,
-        prefixUrl: 'api2',
-    })
+export const page5echarts02 = data =>
+  callApi({
+    url: "finance/baseCount",
+    data,
+    prefixUrl: "api2"
+  });
 
 //林下经济-查询基地的农作物
-export const financeBasePlant = (data) =>
-    callApi({
-        url: 'finance/basePlant',
-        data,
-        prefixUrl: 'api2',
-    })
+export const financeBasePlant = data =>
+  callApi({
+    url: "finance/basePlant",
+    data,
+    prefixUrl: "api2"
+  });
 
 //林下经济-查询基地农作物详情
-export const financeBaseDetail = (data) =>
-    callApi({
-        url: 'finance/baseDetail',
-        data,
-        prefixUrl: 'api2',
-    })
-
-
-
-
-
-
-
-
-
-
-
-
+export const financeBaseDetail = data =>
+  callApi({
+    url: "finance/baseDetail",
+    data,
+    prefixUrl: "api2"
+  });
 
 // get请求带参数
 
@@ -242,4 +236,4 @@ export const financeBaseDetail = (data) =>
 //         data,
 //         method: 'post',
 //         contentType: 'urlencoded',
-//     })
+//     })

src/store/addr/index.js

@@ -24,7 +24,8 @@ const addr = {
     // 获取小班边界地图
     smallClassMapArr: {},
     // 根据小班号查询搜索小班
-    smallClassSearch: []
+    smallClassSearch: [],
+    eventData: {}
   },
   mutations: {
     // 更改页面标识
@@ -55,6 +56,10 @@ const addr = {
     changeSelectStreet(state, streetData) {
       state.selectStreet = streetData;
     },
+    // 事件详情获取
+    changeEvenData(state,eventData) {
+      state.eventData = eventData
+    },
     changeSelectAddr(state, mapLevel) {
       // console.log("mapLevelmapLevel", mapLevel);
       // console.log('state', state);

src/store/getters.js

@@ -12,7 +12,8 @@ const getters = {
     selectStreet: state => state.addr.selectStreet,
     selectAddr: state => state.addr.selectAddr,
     smallClassMapArr: state => state.addr.smallClassMapArr,
-    smallClassSearch: state => state.addr.smallClassSearch
+    smallClassSearch: state => state.addr.smallClassSearch,
+    eventData: state => state.addr.eventData
 }
 
 export default getters

src/views/index.vue

@@ -2,8 +2,8 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: gcz
- * @LastEditTime: 2022-07-06 17:25:06
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-07-07 11:49:29
  * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -119,6 +119,7 @@
             :config="scrollEventConfig"
             ref="scrollBoard"
             @click="scrollEventClick"
+            @mouseout="scrollEventOut"
           />
 
         </div>
@@ -202,7 +203,8 @@ import {
   page6echarts02,
   eventList,
   smallClassDetail,
-  smallInfo
+  smallInfo,
+  eventDetail
 } from '../service/index';
 
 import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
@@ -347,7 +349,8 @@ export default {
   },
   methods: {
     ...mapMutations([
-      'changeSearchSmallClass'
+      'changeSearchSmallClass',
+      'changeEvenData'
     ]),
     addrChange(value) {
       console.log('addrChange', value);
@@ -1055,7 +1058,15 @@ export default {
       
     },
     scrollEventClick(e,){
-      console.log('scrollEventClick',e);
+      let param = {
+        id: e.row[4],
+      };
+      eventDetail(param).then( res =>{
+        this.changeEvenData(res.data)
+      })
+    },
+    scrollEventOut() {
+      this.changeEvenData({name:false})
     },
     toggleShowScrollBoard() {
       this.showScrollBoard = !this.showScrollBoard;