UI-资源

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/assets/iconfont/iconfont.json

@@ -6,9 +6,114 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "12770896",
+      "name": "垃圾桶",
+      "font_class": "centerdata-t-hydraulic-garbage-station",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "35584502",
+      "name": "河道蓝线资源",
+      "font_class": "centerdata-t-hydraulic-channel-blueline",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "2116699",
+      "name": "河流面",
+      "font_class": "centerdata-t-hydraulic-river",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    },
+    {
+      "icon_id": "2777434",
+      "name": "桥梁工程",
+      "font_class": "centerdata-t-hydraulic-wade-bridge-culvert",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "4274470",
+      "name": "闸门信息",
+      "font_class": "centerdata-t-hydraulic-water-gate",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "9400975",
+      "name": "推土机",
+      "font_class": "centerdata-t-hydraulic-battlefield",
+      "unicode": "e703",
+      "unicode_decimal": 59139
+    },
+    {
+      "icon_id": "9466856",
+      "name": "河长制河段",
+      "font_class": "centerdata-t-hydraulic-reach",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "11858519",
+      "name": "排污口",
+      "font_class": "centerdata-t-hydraulic-outlet-sewage",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "13956683",
+      "name": "水库",
+      "font_class": "centerdata-t-hydraulic-reservoir",
+      "unicode": "e6b3",
+      "unicode_decimal": 59059
+    },
+    {
+      "icon_id": "6850817",
+      "name": "三角警示",
+      "font_class": "centerdata-t-traffic-warning-sign",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "11858521",
+      "name": "桥梁",
+      "font_class": "centerdata-t-traffic-bridge",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "35253155",
+      "name": "-_新建斜交涵洞",
+      "font_class": "centerdata-t-traffic-culvert",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "1287678",
+      "name": "企业认证",
+      "font_class": "centerdata-t-emergency-enterprise",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "11441202",
+      "name": "仓库库存",
+      "font_class": "centerdata-t-emergency-warehouse",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "26800916",
+      "name": "防汛抗旱应急队伍",
+      "font_class": "centerdata-t-emergency-team",
+      "unicode": "e7df",
+      "unicode_decimal": 59359
+    },
+    {
       "icon_id": "35532604",
       "name": "水鹤",
-      "font_class": "shuihe",
+      "font_class": "centerdata-t-forest-watercrane",
       "unicode": "e64d",
       "unicode_decimal": 58957
     },
@@ -204,7 +309,7 @@
     {
       "icon_id": "21492584",
       "name": "5饲料",
-      "font_class": "farmenterprise_2",
+      "font_class": "farmenterprise_3",
       "unicode": "e67a",
       "unicode_decimal": 59002
     },
@@ -239,7 +344,7 @@
     {
       "icon_id": "11831137",
       "name": "菜刀",
-      "font_class": "farmenterprise_3",
+      "font_class": "farmenterprise_2",
       "unicode": "e731",
       "unicode_decimal": 59185
     },
@@ -540,7 +645,7 @@
     {
       "icon_id": "30787123",
       "name": "森林防火队",
-      "font_class": "fireteam",
+      "font_class": "centerdata-t-forest-fireteam",
       "unicode": "e607",
       "unicode_decimal": 58887
     },
@@ -596,14 +701,14 @@
     {
       "icon_id": "30787132",
       "name": "起降点",
-      "font_class": "landing",
+      "font_class": "centerdata-t-forest-landing",
       "unicode": "e60f",
       "unicode_decimal": 58895
     },
     {
       "icon_id": "30787133",
       "name": "水源渠道",
-      "font_class": "channel",
+      "font_class": "centerdata-t-forest-channel",
       "unicode": "e610",
       "unicode_decimal": 58896
     },
@@ -638,7 +743,7 @@
     {
       "icon_id": "30787139",
       "name": "水鹤",
-      "font_class": "centerdata-t-forest-watercrane",
+      "font_class": "watercrane",
       "unicode": "e616",
       "unicode_decimal": 58902
     },

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>
+