数据中心

src/api/components/sookaMapIcon.js

@@ -0,0 +1,42 @@
+export function getIconBg(icon) {
+    switch (icon) {
+        // default
+        default:
+            return "#000";
+        //林业图标
+
+        case "sj-icon-centerdata-t-forest-landing":
+            return "#0FA2FF"; //起降点
+        case "sj-icon-centerdata-t-forest-channel":
+            return "#da8ec5"; //水源渠道
+        case "sj-icon-centerdata-t-forest-waterintake":
+            return "#58b35d"; //取水口
+        case "sj-icon-centerdata-t-forest-watercrane":
+            return "#0FA2FF"; //水鹤
+        case "sj-icon-centerdata-t-forest-firehydrant-1":
+            return "#da8ec5"; //地上消火栓
+        case "sj-icon-centerdata-t-forest-firehydrant-2":
+            return "#78bfc2"; //地下消火栓
+        case "sj-icon-centerdata-t-forest-firehydrant-3":
+            return "#f5ad1b"; //室内消火栓
+        case "sj-icon-centerdata-t-forest-fireteam":
+            return "#f5ad1b"; //森林防火队
+        //事件弹层补充
+        case "sj-icon-centerdata-t-firecontrol-fire-force":
+            return "#ff6063"; //消防力量
+        case "sj-icon-centerdata-t-firecontrol-fire-key-places":
+            return "#58b35d"; //重点场所
+        case "sj-icon-centerdata-t-firecontrol-fire-pressure-sensor":
+            return "#f5ad1b"; //压力传感器
+        case "sj-icon-centerdata-t-firecontrol-basic-linkage-force":
+            return "#da8ec5"; //基本联动力量
+        case "sj-icon-centerdata-t-firecontrol-other-linkage-force":
+            return "#5278e8"; //其他联动力量
+        case "sj-icon-centerdata-t-firecontrol-foam-liquid":
+            return "#00d6cc"; //泡沫液
+        case "sj-icon-centerdata-t-firecontrol-fulltime-station":
+            return "#898e28"; //专职站
+        case "sj-icon-centerdata-t-firecontrol-fire-pressure-sensor":
+            return "#f5ad1b"; //摄像头
+    }
+}

src/components/leftRightSwiperScroll.vue

@@ -0,0 +1,186 @@
+<template>
+    <!-- 文本超出，左右按钮滚动 -->
+    <div ref="swiperScroll" class="left-right-swiper-scroll-box">
+      <!-- 左边按钮 -->
+      <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon">
+        <i ></i>
+      </div>
+      <!-- 中间滚动区域 -->
+      <div ref="swiperScrollContent" class="swiper-scroll-content">
+        <slot></slot>
+      </div>
+      <!-- 右边按钮 -->
+      <div v-show="showRightIcon" @click="handleRightClick" class="scroll-icon right-icon">
+        <i ></i>
+      </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+      name: 'leftRightSwiperScroll',
+      props: {
+        swiperList: {
+          type: Object,
+          default: () => {
+            return {};
+          }
+        }
+      },
+      data() {
+        return {
+          showRightIcon: false, // 是否显示右箭头
+          swiperScrollWidth: 0, // 盒子的宽度
+          swiperScrollContentWidth: 0, // 内容的宽度
+          maxClickNum: 0, // 最大点击次数
+          lastLeft: 0, // 上次滑动距离
+          clickNum: 0, // 点击次数
+          childrenList: [] // 传进来的子元素
+        }
+      },
+      computed: {
+        showLeftIcon() {
+          return this.clickNum > 0
+        }
+      },
+      mounted() {
+        // 获取 HTMLCollection 转为 数组
+        this.childrenList = [...this.$refs.swiperScrollContent.children];
+        console.log('childrenList--->', this.childrenList);            
+        console.log('swiperScroll--->', this.$refs.swiperScroll);
+        console.log('swiperScrollContent--->', this.$refs.swiperScrollContent);
+        
+        // 盒子的宽度
+        this.swiperScrollWidth = this.$refs.swiperScroll.getBoundingClientRect().width;
+        // 内容的宽度
+        this.swiperScrollContentWidth = this.$refs.swiperScrollContent.getBoundingClientRect().width;
+        // 比较盒子的宽度,跟内容的宽度：判断是否需要展示右边的按钮
+        if(this.swiperScrollWidth < this.swiperScrollContentWidth) {
+          this.showRightIcon = true;
+        }
+        console.log('盒子的宽度--->', this.swiperScrollWidth );
+        console.log('内容的宽度--->', this.swiperScrollContentWidth);
+        console.log('this.showRightIcon',this.showRightIcon)
+      },
+      methods: {
+        // 点击右箭头（左侧滚动）
+        handleRightClick() {
+          // 如果点击次数小于数组长度-1时，执行左滑动效果。
+          if (this.clickNum < this.childrenList.length - 1) {
+            // 获取当前元素宽度
+            let width = this.childrenList[this.clickNum].getBoundingClientRect().width;
+            console.log(this.childrenList[this.clickNum], this.childrenList[this.clickNum].getBoundingClientRect());
+            // 获取最后一个元素距离左侧的距离
+            let lastItemOffsetLeft = this.childrenList[this.childrenList.length - 1].offsetLeft;
+            // 获取最后一个元素宽度
+            let lastWidth = this.childrenList[this.childrenList.length - 1].getBoundingClientRect().width;
+            console.log('lastItemOffsetLeft-->', lastItemOffsetLeft, this.childrenList[this.childrenList.length - 1].getBoundingClientRect());
+            // 获取可视区域宽度
+            const lookWidth = this.$refs.swiperScroll.clientWidth;
+            console.log('获取可视区域宽度-->lookWidth', lookWidth);
+            // 如果最后一个元素距离左侧的距离+自身的宽度大于可视距离，表示最后一个元素没有出现，执行滚动效果
+            if (lastItemOffsetLeft + lastWidth > lookWidth) {
+              // 滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
+              this.$refs.swiperScrollContent.style.marginLeft = `${-width + this.lastLeft}px`;
+              this.lastLeft = -width + this.lastLeft;
+              // 点击次数+1
+              this.clickNum++;
+              // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
+              this.maxClickNum = this.clickNum;
+            }
+            // 如果最后一个元素距离左侧的距离小于于可视距离，需要隐藏右侧箭头
+            let timer = setTimeout(() => {
+              // 重新：获取最后一个元素距离左侧的距离
+              let lastItemOffsetLeft2 = this.childrenList[this.childrenList.length - 1].offsetLeft;
+              console.log('lastItemOffsetLeft2-新的->', lastItemOffsetLeft2);
+              if(lastItemOffsetLeft2 + lastWidth <= lookWidth) {
+                this.showRightIcon = false;
+              }
+              clearTimeout(timer);
+            }, 200);
+          }
+        },
+        // 点击左箭头（右侧滚动）
+        handleLeftClick() {
+          // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
+          if (this.clickNum > 0) {
+            // 获取当前元素宽度
+            let width = this.childrenList[this.clickNum - 1].getBoundingClientRect().width;
+            // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
+            this.$refs.swiperScrollContent.style.marginLeft = `${this.lastLeft + width}px`
+            this.lastLeft = width + this.lastLeft;
+            // 点击次数-1
+            this.clickNum--;
+            // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
+            if (this.clickNum < this.maxClickNum) {
+              this.showRightIcon = true;
+            }
+          }
+        }
+      }
+    }
+    </script>
+    
+    <style lang='scss' scoped>
+    .left-right-swiper-scroll-box {
+      position: relative;
+      display: flex;
+      width: 1230px;
+      overflow: hidden;
+      transition: all 0.3s;
+      padding: 0 30px;
+      .scroll-icon {
+        position: absolute;
+        top: 0;
+        width: 30px;
+        height: 70px;
+        z-index: 9;
+        cursor: pointer;
+        background-image: linear-gradient(270deg, invalid gradient);
+        i {
+          position: absolute;
+          top: 5px;
+          width: 20px;
+          height: 20px;
+        }
+        &.left-icon {
+          left: 0;
+          background: url("~@/assets/images/img-mask-left.png") 0 0 no-repeat;
+          // i {
+          //   left: 0;
+          //   background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
+          // }
+        }
+        &.left-icon:hover{
+          left: 0;
+          background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
+        
+        }
+
+        &.right-icon {
+          right: 0;
+          background: url("~@/assets/images/img-mask-right.png") 0 0 no-repeat;
+          // i {
+          //   right: 0;
+          //   background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
+          // }
+        }
+        &.right-icon:hover {
+          right: 0;
+          background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
+        
+        }
+
+      }   
+      
+      
+      .swiper-scroll-content {
+        width: fit-content;
+        display: flex;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        transition: all 0.3s;
+      }
+    }
+    </style>
+    

src/views/eventdetailsdialog.vue

@@ -32,31 +32,33 @@
                 <!-- 应急预案end -->
                 <!-- 左侧资源 -->
                 <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
-                  <div class="forthis">
-                    <dv-border-box-7 backgroundColor="#040b1f" :color="['#0e7957', '#0da24c']">
-                      <div class="i-list-con">
-                        <div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap;">
-                          <div class="icon-con" style="width: fit-content !important;"
-                               v-for="(item,index) in resourcesList" @click="fireControlViewPoint(item.type)">
-                            <div class="iconfont icon icon-normal" :class="item.icon"></div>
-                            <div class="icon-text">
-                              <h5>{{ item.resourceName }}</h5>
+                  <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 resourcesList" @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>
-                          <el-input type="number" v-model="radius" style="width: 80px;" placeholder="请输入搜索半径"/>
+                          </leftRightSwiperScroll>
                         </div>
-                      </div>
 
+                        <el-input type="number" v-model="radius" class="d-input-bottom" placeholder="请输入搜索半径"/>
+                      </div>
                     </dv-border-box-7>
                   </div>
-
                 </div>
                 <!-- 左侧资源end -->
                 <!-- 底部工具栏 -->
                 <!--   <div class="dia-left-btm-tool">
                    </div> -->
                 <!-- 底部工具栏end -->
-                <div class="fire-m">
+                <div class="fire-m" style="bottom:5rem">
                   <el-button size="small" icon="el-icon-s-grid" @click="showTVWallDiaLog()">火点联动</el-button>
                   <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延
                   </el-button>
@@ -1074,6 +1076,8 @@ import eventLogUpload from '@/views/eventLogUpload.vue' //日志上传文件
 import areaSupermap from '@/components/supermap'//区域标记地图
 import TcPlayer from '@/components/TcPlayer' //视频预览
 import findUserByDept from '@/views/findUserByDept' //责任人选择弹框
+import leftRightSwiperScroll from '@/components/leftRightSwiperScroll.vue';//事件中心底部资源内容溢出组件
+import {getIconBg} from '@/api/components/sookaMapIcon';//资源底色控制文件
 import {
   fireControlViewPoint,
   fireControlViewList,
@@ -1121,6 +1125,7 @@ export default {
     }
   },
   components: {
+    leftRightSwiperScroll,
     TVWall,
     vBottomMenu,
     supermapDialog,
@@ -1131,6 +1136,7 @@ export default {
   },
   data() {
     return {
+      isLoading:false,
       showFindUserByDept: false,//责任人选择框
       //海康
       cameraTitle: '',
@@ -1346,6 +1352,7 @@ export default {
     calendarDay: null//首页日历选择
   },
   created() {
+    this.isLoading = true;
     /** ----------------------------------摄像头预览开始------------------------------------- */
     const DHWsInstance = DHWs.getInstance()
     this.ws = DHWsInstance
@@ -1377,18 +1384,23 @@ export default {
           obj.type = data.type;
           obj.count = data.num;
           obj.icon = icon;
-          if(resourceName != "重点场所"
-            && resourceName != "基本联动力量"
-            && resourceName != "其他联动力量"){
-            _this.resourcesList.push(obj);
-          }
+          // if(resourceName != "重点场所"
+          //   && resourceName != "基本联动力量"
+          //   && resourceName != "其他联动力量"){
+          //   _this.resourcesList.push(obj);
+          // }
+          _this.resourcesList.push(obj);
           console.log("icon_" + (index + 1) + "=", icon);
+          //每个图标对应固定颜色
+          _this.$set(_this.resourcesList[index], "bg", getIconBg(icon));
+
         })
         _this.resourcesList.push({
           resourceName: '摄像头',
           type: 'sxt',
           count: '1',
-          icon: 'sj-icon-jkzx'
+          icon: 'sj-icon-jkzx',
+          bg:'#f5ad1b'
         })
       })
     },

src/views/firespread.vue

@@ -29,35 +29,39 @@
                   <el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
                   </el-button>
                 </div>
+                <!-- 左侧资源 -->
                 <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
-                  <div class="forthis">
-                    <dv-border-box-7 backgroundColor="#040b1f" :color="['#0c4b53', '#18caca']" >
-                      <div class="i-list-con">
-                        <div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap; width:1080px">
-                          <div class="icon-con" style="width: fit-content !important;"
-                               v-for="(item,index) in resourcesList1" @click="fireControlViewPoint(item.type)">
-                            <div class="iconfont icon icon-normal" :class="item.icon"></div>
-                            <div class="icon-text">
-                              <h5>{{ item.resourceName }}</h5>
+                  <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>
+                              </div>
                             </div>
-                          </div>
-                          <el-input type="number" v-model="radius" style="width: 80px;" placeholder="请输入搜索半径"/>
+                          </leftRightSwiperScroll>
                         </div>
-                      </div>
 
+                        <el-input type="number" v-model="radius" class="d-input-bottom" placeholder="请输入搜索半径"/>
+                      </div>
                     </dv-border-box-7>
                   </div>
-
                 </div>
+                <!-- 左侧资源end -->
                 <!-- 应急预案end -->
-                <div class="fire-m">
+                <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>
                 <!-- 地图 -->
                 <supermapDialog1 ref="supermapDialog1"
                                  style="position: absolute; top:0;left: 0;"
-                                 :mapDiv="'forestWarmSuperMap'"
+                                 :mapDiv="'forestWarmSuperMap1'"
                                  :mapSite="{zoom:16,doubleClickZoom:true,dragging:true,scrollWheelZoom:true}"
                                  :codes="['9fa5']"
                                  :isSideBySide="false"
@@ -967,6 +971,8 @@ import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部
 import eventLogUpload from '@/views/eventLogUpload.vue' //日志上传文件
 import areaSupermap from '@/components/supermap'//区域标记地图
 import TcPlayer from '@/components/TcPlayer' //视频预览
+import leftRightSwiperScroll from '@/components/leftRightSwiperScroll.vue';//事件中心底部资源内容溢出组件
+import {getIconBg} from '@/api/components/sookaMapIcon';//资源底色控制文件
 import {
   getEventDetail,
   sendEventLog,
@@ -1009,6 +1015,7 @@ export default {
     }
   },
   components: {
+    leftRightSwiperScroll,
     vBottomMenu,
     supermapDialog1,
     eventLogUpload,
@@ -1017,6 +1024,7 @@ export default {
   },
   data() {
     return {
+      isLoading:false,
       //海康
       cameraTitle: '',
       cameraCode:'',
@@ -1278,7 +1286,7 @@ export default {
     calendarDay: null//首页日历选择
   },
   created() {
-
+    this.isLoading = true;
     /** ----------------------------------摄像头预览开始------------------------------------- */
     const DHWsInstance = DHWs.getInstance()
     this.ws = DHWsInstance
@@ -1331,18 +1339,23 @@ export default {
           obj.type = data.type;
           obj.count = data.num;
           obj.icon = icon;
-          if(resourceName != "重点场所"
-            && resourceName != "基本联动力量"
-            && resourceName != "其他联动力量"){
-            _this.resourcesList1.push(obj);
-          }
+          // if(resourceName != "重点场所"
+          //   && resourceName != "基本联动力量"
+          //   && resourceName != "其他联动力量"){
+          //   _this.resourcesList1.push(obj);
+          // }
+          _this.resourcesList1.push(obj);
           console.log("2222icon_" + (index + 1) + "=", icon);
+          //每个图标对应固定颜色
+          _this.$set(_this.resourcesList1[index], "bg", getIconBg(icon));
+
         })
         _this.resourcesList1.push({
           resourceName: '摄像头',
           type: 'sxt',
           count: '1',
-          icon: 'sj-icon-jkzx'
+          icon: 'sj-icon-jkzx',
+          bg:'#f5ad1b'
         })
       })
     },
@@ -2203,9 +2216,9 @@ export default {
       // 获取父标签，意思是这个标签内的 DOM 元素生成图片
       // imageTofile是给截图范围内的父级元素自定义的ref名称
       // let canvasBox = this.$refs.imageTofile
-      let canvasBox = document.getElementById('forestWarmSuperMap')
-      let toolbar = document.getElementById('toolbar')
-      canvasBox.removeChild(toolbar)
+      let canvasBox = document.getElementById('forestWarmSuperMap1')
+      // let toolbar = document.getElementById('toolbar')
+      // canvasBox.removeChild(toolbar)
       // 获取父级的宽高
       const width = parseInt(window.getComputedStyle(canvasBox).width)
       const height = parseInt(window.getComputedStyle(canvasBox).height)
@@ -2227,7 +2240,7 @@ export default {
         let dataBase64 = canvas.toDataURL('image/png')
         this.uploadBase64(dataBase64)
       })
-      canvasBox.appendChild(toolbar)
+      // canvasBox.appendChild(toolbar)
     },
     uploadBase64(dataBase64) {
       //事件详情截图直接上传日志