火灾蔓延 事件详情互换

src/views/eventdetailsdialog.vue

@@ -210,18 +210,17 @@
                     v-show="mapToolCheckItem.includes('资源与操作')"
                     key="ziyuan"
                   >
-                    <el-button
-                      size="small"
-                      icon="el-icon-s-grid"
-                      @click="showTVWallDiaLog()"
-                      v-show="eventType == 1"
-                    >视频联动</el-button
-                    >
+                    <!--                    <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>
@@ -2573,7 +2572,7 @@ export default {
       // this.cancelEventShow();
       this.eventDialog = false;
 
-      this.$emit("getFirespread", this.eventCode);
+      this.$emit("showEventDialog", this.eventCode);
     },
     showTVWallDiaLog() {
       this.initByCameras();
@@ -3569,7 +3568,9 @@ export default {
     cancelEventShow() {
       this.mapToolShow=false
       this.mapToolCheckItem = [];
-      this.statusFlag = null;
+      this.mapToolCheckAll=false
+      this.mapToolShowBH=false,
+        this.statusFlag = null;
       this.deptId = null;
       console.log("关闭事件弹窗");
       this.eventLogList = [];
@@ -3578,7 +3579,9 @@ export default {
     showEventDialog(eventCode) {
       this.mapToolShow=false
       this.mapToolCheckItem = [];
-      this.fireControlViewList();
+      this.mapToolCheckAll=false
+      this.mapToolShowBH=false,
+        this.fireControlViewList();
       this.eventCode = eventCode;
       let that = this;
       //获取事件详情

src/views/firespread.vue

@@ -11,69 +11,134 @@
           <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"
+                  id="eventMapToolOnlyButton"
+                  @click="mapToolShow = !mapToolShow"
+                >地图功能</el-button
+                >
+              </div>
               <div ref="imageTofile" style="height: 75vh;">
-                <!-- 应急预案 -->
-                <div class="dia-left-top">
-                  <div class="dia-left-top-tit">应急预案</div>
-                  <div class="dia-left-top-carousel">
-                    <el-carousel height="30px" direction="vertical" :interval="2000">
-                      <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
-                        <el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName"
-                                    placement="top-start">
-                          <a :href="visuForestCloudYuAnBo.fileUrl"><span>
+                <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">
+                        <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
+                          <el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName"
+                                      placement="top-start">
+                            <a :href="visuForestCloudYuAnBo.fileUrl"><span>
                               <div
                                 style=" width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;">
                                 {{ visuForestCloudYuAnBo.reserveName }}
                               </div>
                             </span></a>
-                        </el-tooltip>
-                      </el-carousel-item>
-                      <el-carousel-item v-else>
-                        <a href="#">暂未关联预案</a>
-                      </el-carousel-item>
-                    </el-carousel>
+                          </el-tooltip>
+                        </el-carousel-item>
+                        <el-carousel-item v-else>
+                          <a href="#">暂未关联预案</a>
+                        </el-carousel-item>
+                      </el-carousel>
+                    </div>
+                    <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
+                    </el-button>
                   </div>
-                  <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
-                  </el-button>
-                </div>
+                </transition-group>
                 <!-- 左侧资源 -->
-                <div 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"
-                           style="width: 100%;display: flex; align-items: center;justify-content: space-between">
-
-                        <div class="d-l-con-icon" style="width: fit-content;  flex-direction:row;flex-wrap: nowrap;"
-                             ref="thisWidthWH">
-                          <leftRightSwiperScroll v-if="isLoading">
-                            <div class="icon-con" style="width: fit-content !important;"
-                                 v-for="(item,index) in resourcesList1" @click="fireControlViewPoint(item.type)"
-                                 :key="index">
-                              <div class="iconfont icon icon-normal" :class="item.icon"
-                                   :style="'background:' + item.bg"></div>
-                              <div class="icon-text">
-                                <h5 style="white-space: nowrap;">{{ item.resourceName }}</h5>
+                <transition-group
+                  appear
+                  name="animate__animated animate__bounce"
+                  enter-active-class="animate__backInUp"
+                  leave-active-class="animate__backOutDown"
+                >
+                  <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;"  v-show="mapToolCheckItem.includes('资源与操作')"
+                       key="mapToolziyuan">
+                    <div class="forthis" style="width:1320px; display: flex;">
+                      <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
+                        <div class="i-list-con"
+                             style="width: 100%;display: flex; align-items: center;justify-content: space-between">
+
+                          <div class="d-l-con-icon" style="width: fit-content;  flex-direction:row;flex-wrap: nowrap;"
+                               ref="thisWidthWH">
+                            <leftRightSwiperScroll  v-if="mapToolCheckItem.includes('资源与操作')">
+                              <div class="icon-con" style="width: fit-content !important;"
+                                   v-for="(item,index) in resourcesList1" @click="fireControlViewPoint(item.type)"
+                                   :key="index">
+                                <div class="iconfont icon icon-normal" :class="item.icon"
+                                     :style="'background:' + item.bg"></div>
+                                <div class="icon-text">
+                                  <h5 style="white-space: nowrap;">{{ item.resourceName }}</h5>
+                                </div>
                               </div>
-                            </div>
-                          </leftRightSwiperScroll>
-                        </div>
+                            </leftRightSwiperScroll>
+                          </div>
 
-                        <el-input type="number" v-model="radius" class="d-input-bottom" placeholder="请输入搜索半径" />
-                      </div>
-                    </dv-border-box-7>
+                          <el-input type="number" v-model="radius" class="d-input-bottom" placeholder="请输入搜索半径" />
+                        </div>
+                      </dv-border-box-7>
+                    </div>
                   </div>
-                </div>
-                <!-- 左侧资源end -->
-                <!-- 应急预案end -->
-                <div class="fire-m" style="bottom:5rem">
-                  <el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
-                  <!--                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延</el-button>-->
-                </div>
+                  <!-- 左侧资源end -->
+                  <!-- 应急预案end -->
+                  <div class="fire-m" style="bottom:5rem" v-show="mapToolCheckItem.includes('资源与操作')"
+                       key="ziyuan">
+                    <el-button
+                      size="small"
+                      icon="el-icon-s-grid"
+                      @click="showTVWallDiaLog()"
+                    >视频联动</el-button>
+                    <el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
+                    <!--                  <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延</el-button>-->
+                  </div>
+                </transition-group>
                 <!-- 地图 -->
                 <supermapDialog1 ref="supermapDialog1" style="position: absolute; top:0;left: 0;"
                                  :mapDiv="'forestWarmSuperMap'"
                                  :mapSite="{doubleClickZoom:true,dragging:true,scrollWheelZoom:true}" :codes="['9fa5']"
-                                 :isSideBySide="false" @preview="preview" />
+                                 :isSideBySide="false" @preview="preview" :mapToolShowBH="mapToolShowBH"/>
                 <!-- 地图end -->
               </div>
             </el-col>
@@ -146,8 +211,8 @@
                               <div class="z-info-btm-grp-left">
                                 <el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传
                                 </el-button>
-                                <el-button size="small" icon="el-icon-download" @click="toImage()">截图上传
-                                </el-button>
+                                <!--                                <el-button size="small" icon="el-icon-download" @click="toImage()">截图上传-->
+                                <!--                                </el-button>-->
                                 <el-button size="small" icon="el-icon-download" @click="showResponsibility()"
                                            v-if="eventStatusValue!='forest_event_status_1'&&eventStatusValue!='forest_event_status_7'">责任制
                                 </el-button>
@@ -1754,6 +1819,12 @@ export default {
   },
   data() {
     return {
+      //地图tool开关
+      mapToolShow: false,
+      mapToolCheckAll: false,
+      mapToolCheck: ["应急预案", "资源与操作"],
+      mapToolCheckItem: [],
+      mapToolShowBH:false,
       isLoading: false,
       //海康
       cameraTitle: '',
@@ -2032,6 +2103,91 @@ export default {
     this.fireControlViewList();
   },
   methods: {
+    showTVWallDiaLog() {
+      this.initByCameras();
+      // this.$refs.TVWall.showTVWall();
+    },
+    initByCameras() {
+      // const params = Object.assign({})
+      // params.longitude = this.longitude;
+      // params.latitude = this.latitude;
+      // params.type = '8'
+      // initByCameras(params).then(res => {
+      //   this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, res.data);
+      //   this.$refs.bottomMenu.showMeasure = false
+      //   this.$refs.bottomMenu.showChild = false
+      //   this.$refs.bottomMenu.showBanChild = false
+      //   this.$refs.bottomMenu.showChangChild = false
+      // })
+      let that = this
+      if(that.centermonitorTCamera == null){
+        this.$message.warning("当前事件无绑定摄像头")
+        return
+      }
+      let tvListJson = [{
+        "switchTab": "2",
+        "treeLabels": [{
+          "id": null,
+          "labelCode": "999",
+          "labelName": "电视墙",
+          "cameraType": null,
+          "parentLabelCode": ""
+        },
+          {
+            "id": "spcamera00010",
+            "labelCode": that.centermonitorTCamera.cameraCode,
+            "labelName": that.centermonitorTCamera.cameraName,
+            "cameraType": that.centermonitorTCamera.cameraType,
+            "parentLabelCode": "999"
+          }
+        ],
+        "labelChannels": [{
+          "labelCode": that.centermonitorTCamera.cameraCode,
+          "channelDates": [{
+            "channelCode": that.centermonitorTCamera.cameraCode,
+            "channelName": that.centermonitorTCamera.cameraName,
+            "channelSn": null,
+            "cameraType": that.centermonitorTCamera.cameraType,
+            "online": "1",
+            "cameraCode": null
+          }]
+        }]
+      }]
+      this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, tvListJson);
+      this.$refs.bottomMenu.showMeasure = false
+      this.$refs.bottomMenu.showChild = false
+      this.$refs.bottomMenu.showBanChild = false
+      this.$refs.bottomMenu.showChangChild = false
+    },
+    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;
+        }
+      });
+
+    },
+    // 地图tool显隐
+    mapToolCheckAllChange(val) {
+      this.mapToolCheckItem = [];
+      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()
+    },
     /************************************责任制-开始****************************************/
     addLine: function() { //添加负责人行数
       var newValue = {
@@ -2345,7 +2501,7 @@ export default {
     showEventdetailsdialog() {
       this.eventDialog = false;
       this.cancelEventShow()
-      this.$emit('showEventDialog', this.eventCode);
+      this.$emit('getFirespread', this.eventCode);
     },
     showheatPlotting() {
       this.$refs.supermapDialog1.showheatPlotting(this.latitude, this.longitude, this.windSpeed, this.windDirection)
@@ -2479,7 +2635,7 @@ export default {
                   }
                 }
                 if (res.data[i].cameraCode != null) {
-                  //markersMap.click = 'preview'
+                  // markersMap.click = 'preview'
                   // markersMap.parameter = res.data[i].cameraCode
                   markersMap.parameter = {code:res.data[i].cameraCode,
                     type:res.data[i].cameraFactory?res.data[i].cameraFactory:1,name:res.data[i].cameraName}
@@ -3082,13 +3238,21 @@ export default {
       this.$refs.eventLogUpload.eventLogUpload(this.eventCode)
     },
     cancelEventShow() {
-      this.dataStatus = null
+      this.mapToolShow=false
+      this.mapToolCheckItem = [];
+      this.mapToolCheckAll=false
+      this.mapToolShowBH=false,
+        this.dataStatus = null
       this.deptId = null
       console.log('关闭事件弹窗')
       this.eventLogList = []
     },
     showEventDialog(eventCode) {
-      this.getNewDataByDate(this.calendarDay)
+      this.mapToolShow=false
+      this.mapToolCheckItem = [];
+      this.mapToolCheckAll=false
+      this.mapToolShowBH=false,
+        this.getNewDataByDate(this.calendarDay)
       this.eventCode = eventCode
       let that = this
       //获取事件详情
@@ -3650,9 +3814,47 @@ 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';
+@import "@/assets/styles/base.scss";
 
 //弹层样式
 //.customWidthMp4 {
@@ -3662,11 +3864,10 @@ function cbIntegrationCallBack(oData) {
 
 .tree-border {
   border: 1px $barBorder;
-
 }
 
 button {
-  padding: .5rem;
+  padding: 0.5rem;
 }
 
 /** 火灾报告**/
@@ -3710,14 +3911,12 @@ table input {
   font-family: "微软雅黑";
   background: none;
   color: $inBlue;
-
 }
 
 table th input:hover {
   background: $eventBG;
 }
 
-
 table thead th {
   font-size: 1rem;
   font-family: "宋体";
@@ -3734,7 +3933,6 @@ table tr td {
   height: 2rem;
   border: 1px $searchBorder;
   text-align: center;
-
 }
 
 .font1 {
@@ -3759,22 +3957,21 @@ table tr td input {
   color: $inBlue;
   background: none;
   float: left;
-  padding: 0 .5rem;
+  padding: 0 0.5rem;
 }
 
 table tr td input:hover {
   background: $eventBG;
 }
 
-
 .int_tr td input {
   text-align: center !important;
 }
 
 .table2 tr th {
   font-size: 1.7rem;
-  padding: .5rem 0;
-  font-family: 'fontnameRegular';
+  padding: 0.5rem 0;
+  font-family: "fontnameRegular";
 }
 
 .table2 tr td {
@@ -3809,12 +4006,11 @@ table tr td input:hover {
   border: 0px !important;
   outline: 0px;
   width: 98%;
-  padding: .5rem;
+  padding: 0.5rem;
   font-size: 1rem;
   resize: none;
   background: none;
   color: $inBlue;
-
 }
 
 .table2 tr td textarea:hover {
@@ -3834,23 +4030,47 @@ table tr td input:hover {
   display: flex;
 
   button {
-    padding: .5rem 2rem;
+    padding: 0.5rem 2rem;
   }
 }
 
+.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;
-  color: #409EFF;
+  color: #409eff;
   background: none;
-  border-color: #409EFF;
+  border-color: #409eff;
 }
 
 .yatz_button:hover {
   color: #fff;
-  background: #409EFF;
-  border-color: #409EFF;
+  background: #409eff;
+  border-color: #409eff;
 }
 
 .fr_button {
@@ -3947,4 +4167,6 @@ table tr td input:hover {
     }
   }
 }
+
+
 </style>

src/views/forest.vue

@@ -418,10 +418,10 @@
     </div>
     <audio id="resource" ref="up" :src="audioSrc" controls style="display: none;"></audio>
     <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="calendarDay" @getEventList="getEventList"
-                        @getTodayEvents="getTodayEvents" @getFirespread="getFirespread" @getSupermap="getSupermap"></eventdetailsdialog>
+                        @getTodayEvents="getTodayEvents" @getFirespread="getFirespread" @showEventDialog="showEventDialog" @getSupermap="getSupermap"></eventdetailsdialog>
 
     <firespread ref="firespread" :calendarDay="calendarDay" @getEventList="getEventList"
-                @getTodayEvents="getTodayEvents" @showEventDialog="showEventDialog" @getSupermap="getSupermap"
+                @getTodayEvents="getTodayEvents" @showEventDialog="showEventDialog" @getFirespread="getFirespread" @getSupermap="getSupermap"
                 @showDialog="showDialog"></firespread>
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
@@ -693,11 +693,11 @@
       },
       showEventDialog(eventCode) {
         //事件信息弹出
-        this.$refs.eventdetailsdialog.showEventDialog(eventCode)
+        this.$refs.firespread.showEventDialog(eventCode)
       },
       getFirespread(eventCode) {
-        this.$refs.firespread.showEventDialog(eventCode);
-        this.$refs.firespread.fireControlViewList()
+        this.$refs.eventdetailsdialog.showEventDialog(eventCode);
+        this.$refs.eventdetailsdialog.fireControlViewList()
       },
       getCurrentDataStr() {
         let date = new Date()