Merge branch 'visu_firecontrol_01_siping_2.5d' of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization into visu_firecontrol_01_siping_2.5d

src/components/supermap-2.5d.vue

@@ -5,7 +5,7 @@
       <div class="map-tit" v-show="mapshow">
         <div class="top-tit">
           <i class="iconfont sj-icon-jkzx"></i>
-          <span><img src="../assets/images/close.svg" /></span>
+          <span><img src="../assets/images/close.svg" @click="mapshow=false"/></span>
         </div>
         <div class="map-txt" v-html="bindPopupHtml">
         </div>

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="['#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 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>
@@ -1124,6 +1126,7 @@ export default {
     }
   },
   components: {
+    leftRightSwiperScroll,
     TVWall,
     vBottomMenu,
     supermapDialog,
@@ -1134,6 +1137,7 @@ export default {
   },
   data() {
     return {
+      isLoading:false,
       showFindUserByDept: false,//责任人选择框
       //海康
       cameraTitle: '',
@@ -1349,7 +1353,7 @@ export default {
     calendarDay: null//首页日历选择
   },
   created() {
-
+    this.isLoading = true;
     /** ----------------------------------摄像头预览开始------------------------------------- */
     const DHWsInstance = DHWs.getInstance()
     this.ws = DHWsInstance
@@ -1377,18 +1381,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,28 +29,32 @@
                   <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">
+                  <div class="forthis"  style="width:1320px; display: flex;">
                     <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
-                      <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 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="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>
@@ -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
@@ -1332,12 +1340,16 @@ export default {
           obj.icon = icon;
           _this.resourcesList1.push(obj);
           console.log("icon_" + (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'
         })
       })
     },