事件详情页面样式

src/components/supermap.vue

@@ -1,23 +1,29 @@
 <template>
   <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
-    <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary"
-         style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
-      <div class="panel-heading" id="panelheading">
-        <h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
-      </div>
-      <div class="panel-body content" id="panelbodycontent" style="margin-bottom: .5rem;padding-right: .5rem;">
-        <div align="right" class="button-group">
-          <el-button type="success" @click="PlottingDrawCancel">取消标绘</el-button>
-          &nbsp;&nbsp;
-          <el-button type="success" @click="clearLayers">清空标绘</el-button>
+    <transition-group
+      appear
+      name="animate__animated animate__bounce"
+      enter-active-class="animate__backInLeft"
+      leave-active-class="animate__backOutLeft"
+    >
+      <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary" v-show="mapToolShowBH" key="mapFlash"
+           style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
+        <div class="panel-heading" id="panelheading">
+          <h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
         </div>
-      </div>
-      <div id="plottingPanel">
-        <div id="plotPanel" style="width: 15rem;height:50%;overflow-y:scroll;">
+        <div class="panel-body content" id="panelbodycontent" style="margin-bottom: .5rem;padding-right: .5rem;">
+          <div align="right" class="button-group">
+            <el-button type="success" @click="PlottingDrawCancel">取消标绘</el-button>
+            &nbsp;&nbsp;
+            <el-button type="success" @click="clearLayers">清空标绘</el-button>
+          </div>
+        </div>
+        <div id="plottingPanel">
+          <div id="plotPanel" style="width: 15rem;height:50%;overflow-y:scroll;">
+          </div>
         </div>
       </div>
-    </div>
-
+    </transition-group>
     <div id="toolbar-heat" v-if="isheatPlotting" class="panel panel-primary"
          style="position:absolute;z-index: 9999; padding: 1rem; bottom:3rem;right: 1rem; border-radius: 4px; width: fit-content;height:fit-content;overflow-y:scroll;background:#040b1f">
       <div class="panel-body content">
@@ -318,7 +324,8 @@ export default {
     isSideBySide: false,
     showLatLng: null,
     showAreaLatLng: null,
-    showLineLatLng: null
+    showLineLatLng: null,
+    mapToolShowBH:false,
   },
   methods: {
     /** ----------------------------------火势蔓延  开始------------------------------------- */
@@ -628,20 +635,20 @@ export default {
       if (isAggregation) {
         if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
           this.isAggregationMyGroup.clearLayers()
-          this.map.removeLayer(this.isAggregationLayers)
-          this.isAggregationLayers = []
-          this.radiusLayers = []
-          this.isAggregationLayers = window.L.markerClusterGroup({
-            //设置为true时显示聚类所占据的范围
-            showCoverageOnHover: true,
-            //设置为true时会向低一级聚类缩放
-            zoomToBoundsOnClick: true,
-            //增加点位时增加聚合动画（否则会出问题）
-            animateAddingMarkers: true,
-            //最大缩放级别点击聚合图标展开图标
-            spiderfyOnMaxZoom: true
-          })
         }
+        this.map.removeLayer(this.isAggregationLayers)
+        this.isAggregationLayers = []
+        this.radiusLayers = []
+        this.isAggregationLayers = window.L.markerClusterGroup({
+          //设置为true时显示聚类所占据的范围
+          showCoverageOnHover: true,
+          //设置为true时会向低一级聚类缩放
+          zoomToBoundsOnClick: true,
+          //增加点位时增加聚合动画（否则会出问题）
+          animateAddingMarkers: true,
+          //最大缩放级别点击聚合图标展开图标
+          spiderfyOnMaxZoom: true
+        })
       } else {
         if (this.myGroup != undefined && this.myGroup != false) {
           this.myGroup.clearLayers()

src/main.js

@@ -29,7 +29,8 @@ import './permission' // permission control
 import ImageUpload from "@/components/ImageUpload"
 //DataV动效组件
 import dataV from '@jiaminghi/data-view'
-
+//动画库
+import animated from 'animate.css'
 //公共过滤器
 import './filters'
 
@@ -48,6 +49,7 @@ Vue.use(directive)
 Vue.use(plugins)
 Vue.use(MetaInfo)
 Vue.use(dataV)
+Vue.use(animated)
 Vue.prototype.$echarts = echarts //挂载echarts
 DictData.install()
 

src/views/system/login.vue

@@ -217,10 +217,11 @@ import {
       this.fontConfig();
     },
     mounted(){
+      this.getConfigKey();
       this.getVersionInfo();
     },
     methods: {
-      this.getConfigKey();
+
       getVersionInfo(){
         getVersionInfo().then(res => {
           this.QRCode = res.data.picUrl