事件详情地图

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,5 +1,11 @@
 <template>
   <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
+    <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"
          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">
@@ -17,7 +23,7 @@
         </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">
@@ -106,6 +112,7 @@ export default {
   name: 'sookaSuperMap',
   data() {
     return {
+      mapToolShowBH:false,
       windDirection:'',
       windSpeed:null,
       plottingdrawControl: null,

src/main.js

@@ -21,7 +21,8 @@ import '@/assets/iconfont/iconfont.js'; //字体图标
 import '@/assets/styles/font.scss';//字体引入
 // 字典数据组件
 import DictData from '@/components/DictData'
-
+//动画库
+import animated from 'animate.css'
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
 import './assets/icons' // icon
@@ -52,6 +53,7 @@ Vue.use(directive)
 Vue.use(plugins)
 Vue.use(dataV)
 Vue.use(MetaInfo)
+Vue.use(animated)
 Vue.component('ImageUpload', ImageUpload)
 Vue.prototype.$echarts = echarts //挂载echarts
 DictData.install()

src/views/eventdetailsdialog.vue

@@ -11,9 +11,57 @@
           <el-row>
             <!-- 左侧 -->
             <el-col :span="18" class="dia-left">
+              <div class="sj-map-tool-select">
+                <transition-group
+                  appear
+                  name="animate__animated animate__bounce"
+                  enter-active-class="animate__lightSpeedInRight"
+                  leave-active-class="animate__backOutRight"
+                >
+                  <div
+                    class="sj-map-tool-select-list"
+                    v-show="mapToolShow"
+                    id="eventMapToolOnly"
+                    key="1"
+                  >
+                    <el-checkbox
+                      v-model="mapToolCheckAll"
+                      @change="mapToolCheckAllChange"
+                      class="sj-map-tool-checkbox-all"
+                    >全选</el-checkbox
+                    >
+                    <el-checkbox-group
+                      v-model="mapToolCheckItem"
+                      @change="mapToolCheckChange"
+                      class="sj-map-tool-checkbox"
+                    >
+                      <el-checkbox
+                        v-for="tools in mapToolCheck"
+                        :label="tools"
+                        :key="tools"
+                      >{{ tools }}</el-checkbox
+                      >
+                    </el-checkbox-group>
+                  </div>
+                </transition-group>
+
+                <el-button
+                  size="small"
+                  icon="el-icon-s-grid"
+                  @click="mapToolShow = !mapToolShow"
+                  id="eventMapToolOnlyButton"
+                >地图功能</el-button
+                >
+              </div>
               <div ref="imageTofile" style="height: 75vh;">
                 <!-- 应急预案 -->
-                <div class="dia-left-top">
+                <transition-group
+                  appear
+                  name="animate__animated animate__bounce"
+                  enter-active-class="animate__backInDown"
+                  leave-active-class="animate__backOutUp"
+                >
+                  <div class="dia-left-top" v-show="mapToolCheckItem.includes('应急预案')"  key="yingji">
                   <div class="dia-left-top-tit">应急预案</div>
                   <div class="dia-left-top-carousel">
                     <el-carousel height="30px" direction="vertical" :interval="2000">
@@ -40,9 +88,18 @@
                   <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
                   </el-button>
                 </div>
+                </transition-group>
                 <!-- 应急预案end -->
                 <!-- 左侧资源 -->
-                <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
+                <transition-group
+                  appear
+                  name="animate__animated animate__bounce"
+                  enter-active-class="animate__backInUp"
+                  leave-active-class="animate__backOutDown"
+                >
+                  <div
+                    v-show="mapToolCheckItem.includes('资源与操作')"
+                    key="mapToolziyuan" class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
                   <div class="forthis" style="width:1320px; display: flex;">
                     <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
                       <div class="i-list-con"
@@ -50,7 +107,7 @@
 
                         <div class="d-l-con-icon" style="width: fit-content;  flex-direction:row;flex-wrap: nowrap;"
                              ref="thisWidthWH">
-                          <leftRightSwiperScroll v-if="isLoading">
+                          <leftRightSwiperScroll v-if="mapToolCheckItem.includes('资源与操作')">
                             <div class="icon-con" style="width: fit-content !important;"
                                  v-for="(item,index) in resourcesList" @click="fireControlViewPoint(item.type)"
                                  :key="index">
@@ -73,16 +130,19 @@
                 <!--   <div class="dia-left-btm-tool">
                    </div> -->
                 <!-- 底部工具栏end -->
-                <div class="fire-m" style="bottom:5rem">
-                  <el-button size="small" icon="el-icon-s-grid" @click="showTVWallDiaLog()" v-show="eventType==1">视频联动</el-button>
-                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()" v-show="eventType==1">火灾蔓延
-                  </el-button>
-                </div>
-                <!-- 地图 -->
+                  <div
+                    class="fire-m"
+                    style="bottom: 5rem"
+                    v-show="mapToolCheckItem.includes('资源与操作')"
+                    key="ziyuan"
+                  >>
+                  </div>
+                </transition-group>
                 <supermapDialog ref="supermapDialog" style="position: absolute; top:0;left: 0;"
                                 :mapDiv="'forestWarmSuperMap'"
                                 :mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}" :codes="['9fa5']"
-                                :isSideBySide="false" :isdynamicPlotting="true" @preview="preview" />
+                                :isSideBySide="false" :isdynamicPlotting="true" @preview="preview" :mapToolShowBH="mapToolShowBH"
+                />
                 <!-- <supermapDialog ref="supermapDialog" -->
                 <!-- @preview="preview"/> -->
                 <!-- 地图end -->
@@ -1131,6 +1191,11 @@ export default {
   },
   data() {
     return {
+      mapToolShow: false,
+      mapToolCheckAll: false,
+      mapToolCheck: ["应急预案", "地图标绘", "资源与操作"],
+      mapToolCheckItem: [],
+      mapToolShowBH:false,
       title:"火灾区域\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000《双击选中区域获取数据》",
       isLoading: false,
       showFindUserByDept: false, //责任人选择框
@@ -1352,13 +1417,41 @@ export default {
     calendarDay: null //首页日历选择
   },
   created() {
-    this.isLoading = true;
+    this.closedEventDiaTool()
+    // this.isLoading = true;
     /** ----------------------------------摄像头预览开始------------------------------------- */
     const DHWsInstance = DHWs.getInstance()
     this.ws = DHWsInstance
     /** ----------------------------------摄像头预览结束------------------------------------- */
   },
   methods: {
+    mapToolCheckAllChange(val) {
+      this.mapToolCheckItem = val ? this.mapToolCheck : [];
+      // this.isIndeterminate = false;
+      this.mapToolCheckChangeBH()
+    },
+    mapToolCheckChangeBH(){
+      if (this.mapToolCheckItem.includes("地图标绘")) {
+        this.mapToolShowBH= true
+      } else {
+        this.mapToolShowBH= false
+      }
+    },
+    mapToolCheckChange(value) {
+      let checkedCount = value.length;
+      this.mapToolCheckAll = checkedCount === this.mapToolCheck.length;
+      this.mapToolCheckChangeBH()
+    },
+    closedEventDiaTool() {
+      document.addEventListener("click", (e) => {
+        let b = document.getElementById("eventMapToolOnly");
+        let c = document.getElementById("eventMapToolOnlyButton");
+        if (this.mapToolShow && !b.contains(e.target) && !c.contains(e.target)) {
+          this.mapToolShow = false;
+        }
+      });
+
+    },
     // 获取消防左侧菜单列表
     fireControlViewList() {
       this.resourcesList = [];
@@ -2393,6 +2486,7 @@ export default {
       this.deptId = null
       console.log('关闭事件弹窗')
       this.eventLogList = []
+      this.mapToolShow = false;
     },
     showEventDialog(eventCode) {
       this.centermonitorTCamera = null
@@ -2950,6 +3044,45 @@ function cbIntegrationCallBack(oData) {
 </script>
 
 
+<style lang="scss">
+.sj-map-tool-checkbox-all {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem !important;
+
+  .el-checkbox__input {
+    line-height: 0;
+  }
+
+  .el-checkbox__label {
+    font-size: 14px;
+    color: white;
+    padding-left: 5px;
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #01d1eb;
+  }
+}
+.sj-map-tool-checkbox {
+  display: flex;
+  .el-checkbox {
+    margin-right: 1rem;
+    display: flex;
+    align-items: center;
+    .el-checkbox__input {
+      line-height: 0;
+    }
+  }
+  .el-checkbox__label {
+    font-size: 14px;
+    color: white;
+    padding-left: 5px;
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #01d1eb;
+  }
+}
+</style>
 <style lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 
@@ -3138,6 +3271,31 @@ table tr td input:hover {
 }
 
 
+.sj-map-tool-select {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  z-index: 1000;
+  display: flex;
+  height: 30px;
+  align-items: center;
+}
+.sj-map-tool-select-list {
+  position: relative;
+  padding: 0.3rem 1rem;
+  border-radius: 1rem;
+  background-color: #fff;
+  z-index: 1000;
+  background-image: linear-gradient(
+      180deg,
+      rgba(18, 71, 153, 1),
+      rgba(4, 21, 30, 1)
+  );
+  box-shadow: 0 -0.2rem 0.5rem 0.3rem rgba(13, 192, 219, 0.09) inset;
+  display: flex;
+  align-items: center;
+}
+
 // 20220928
 .yatz_button {
   padding: 0.5rem 0.5rem;