事件详情页面样式

package.json

@@ -39,6 +39,7 @@
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
+    "animate.css": "^4.1.1",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.19.1",

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">
@@ -42,43 +48,43 @@
             <input type="text" class="form-control" id="heatNums1" value="6"/>
           </div>
         </div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">温度</span>
-		    <input type="text" class="form-control" id="heatNums2" value="10℃"/>
-		  </div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">湿度</span>
-		    <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
-		  </div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">持续时间</span>
-		    <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
-		  </div>
-		</div>
-		<div class="panel">
-		<div class="input-group">
-		  <span class="input-group-addon">植被类型</span>
-		  <select class="form-control" style="width:auto" id="heatNums5">
-		    <option value="1">针叶林</option>
-		    <option value="31">落叶林</option>
-		  </select>
-		</div>
-		</div>
-		<div class="panel">
-		  <div class="input-group">
-		    <span class="input-group-addon">大气压</span>
-		    <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
-		  </div>
-		</div>
-		<div class="panel">
-        <el-button type="success" @click="createHeatPoints">分析</el-button>
-        <el-button type="success" @click="clearHeatPoints">重置</el-button>
-		</div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">温度</span>
+            <input type="text" class="form-control" id="heatNums2" value="10℃"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">湿度</span>
+            <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">持续时间</span>
+            <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">植被类型</span>
+            <select class="form-control" style="width:auto" id="heatNums5">
+              <option value="1">针叶林</option>
+              <option value="31">落叶林</option>
+            </select>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="input-group">
+            <span class="input-group-addon">大气压</span>
+            <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
+          </div>
+        </div>
+        <div class="panel">
+          <el-button type="success" @click="createHeatPoints">分析</el-button>
+          <el-button type="success" @click="clearHeatPoints">重置</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -318,7 +324,8 @@ export default {
     isSideBySide: false,
     showLatLng: null,
     showAreaLatLng: null,
-    showLineLatLng: null
+    showLineLatLng: null,
+    mapToolShowBH:false,
   },
   methods: {
     /** ----------------------------------火势蔓延  开始------------------------------------- */
@@ -629,19 +636,19 @@ export default {
         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()
@@ -1351,22 +1358,22 @@ export default {
     },
     dynamicPlotting: function() {
       setTimeout(() => {
-          var host = this.host
-          var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
+        var host = this.host
+        var serverUrl = host + '/iserver/services/plot-jingyong/rest/plot/'
 
-          var me = this
-          this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
-            serverUrl)
-          this.plottingLayer.spatialAnalystUrl =
-            host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
-          this.plottingLayer.addTo(this.map)
-          this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
-            .plottingLayer)
-          this.plottingdrawControl.addTo(this.map)
-          var editControl = window.L.supermap.plotting.editControl()
-          editControl.addTo(this.map)
-          window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
-            .plottingdrawControl)
+        var me = this
+        this.plottingLayer = window.L.supermap.plotting.plottingLayer('plot',
+          serverUrl)
+        this.plottingLayer.spatialAnalystUrl =
+          host + '/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst'
+        this.plottingLayer.addTo(this.map)
+        this.plottingdrawControl = window.L.supermap.plotting.drawControl(this
+          .plottingLayer)
+        this.plottingdrawControl.addTo(this.map)
+        var editControl = window.L.supermap.plotting.editControl()
+        editControl.addTo(this.map)
+        window.L.supermap.plotting.initPlotPanel('plotPanel', serverUrl, this
+          .plottingdrawControl)
       }, 2000)
     }
     /** ----------------------------------动态绘制结束------------------------------------- */
@@ -1377,30 +1384,30 @@ export default {
 <style lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 .panel{
-	margin-bottom: .5rem;
-	button{
-		margin-top: .5rem;
-	}
-	.input-group{
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		.input-group-addon{
-			color: $inBlue;
-			width: 3rem;
-			text-align: right;
+  margin-bottom: .5rem;
+  button{
+    margin-top: .5rem;
+  }
+  .input-group{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .input-group-addon{
+      color: $inBlue;
+      width: 3rem;
+      text-align: right;
 
-		}
-		.form-control{
-			padding: 0 .3rem;
-			margin-left: .5rem;
-			height: 1.5rem;
-			line-height: 1.5rem;
-			background-color: #112543;
-			color: $inBlue;
-			border: 1px $searchBorder;
-		}
-	}
+    }
+    .form-control{
+      padding: 0 .3rem;
+      margin-left: .5rem;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      background-color: #112543;
+      color: $inBlue;
+      border: 1px $searchBorder;
+    }
+  }
 }
 
 .button-group {

src/main.js

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