wj-smartcity 调整部分页面布局 首页添加不同图层切换功能（轨迹&路况&设备）

wj-smartcity/public/index.html

@@ -113,7 +113,7 @@
         }
 
         .mapboxgl-ctrl-bottom-right {
-            bottom: 6px !important;
+            bottom: calc(33.3% + 20px) !important;
             right: 515px !important;
             z-index: 11 !important;
             transition: 0.5s all ease !important;
@@ -126,6 +126,7 @@
 
         .mapboxgl-ctrl-bottom-right-hide-box {
             right: 16px !important;
+            bottom: 20px !important;
             transition: 0.5s all ease !important;
         }
 

wj-smartcity/src/views/dataQueries/rightForm/index.vue

@@ -39,7 +39,7 @@ export default {
       tabs: [
         {'1': '周期数据'},
         {'2': '快照数据'},
-        {'3': '事件数据'},
+        // {'3': '事件数据'},
       ],
     }
   },

wj-smartcity/src/views/signal/layersSwitch.vue

-<template>
-  <div class="layersSwitch" :style="{ left: right }">
-    <div v-show="true" class="layerIcons">
-      <el-tooltip
-        effect="dark"
-        :content="item.name"
-        placement="right"
-        v-for="(item,index) of switchOptions"
-        :key="index"
-      >
-        <div class="item" :key="index" :class="{ check: item.check }">
-          <img
-            alt=""
-            :src="require(`../../assets/images/holo/svg/${item.label}.svg`)"
-            @click="changeCheck(item)"
-            class="img"
-          />
-        </div>
-      </el-tooltip>
-    </div>
-    <div
-      class="visibleControl"
-      :class="[{ 'expand-i': show }, { 'close-i': !show }]"
-      @click="changeVisibel"
-    >
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      layerIconsShow: true,
-      switchOptions: [
-        // { label: "first", check: true, name: "轨迹" },
-        // { label: "second", check: false, name: "路况" },
-        // { label: "third", check: false, name: "事件" },
-        // { label: "fourth", check: false, name: "设备" },
-      ],
-    };
-  },
-  props: ["right", "show"],
-  mounted() {},
-  methods: {
-    changeVisibel() {
-      this.$emit("visibleChange");
-    },
-    getOptions() {
-      return this.switchOptions;
-    },
-    changeCheck(item) {
-      let beforeItem = "";
-      this.switchOptions.forEach((e) => {
-        if (e.label === item.label) {
-          e.check = !e.check;
-        } else {
-          e.check && (beforeItem = e.label);
-          e.check = false;
-        }
-      });
-      this.$emit("changeCheck", beforeItem, item);
-    },
-  },
-  computed: {},
-  beforeDestroy() {},
-};
-</script>
-
-<style lang="less" scoped>
-.layersSwitch {
-  position: absolute;
-  z-index: 13;
-  .visibleControl {
-    margin-top: 10px;
-  }
-  .el-icon-document-copy {
-    font-size: 20px;
-    cursor: pointer;
-    color: #aeaeae;
-    text-align: right;
-  }
-  .expand-i {
-    background: url("../../assets/images/holo/close.png");
-    cursor: pointer;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    height: 42px;
-    width: 42px;
-  }
-  .close-i {
-    background: url("../../assets/images/holo/expand.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    cursor: pointer;
-    height: 42px;
-    width: 42px;
-  }
-  .layerIcons {
-    width: 42px;
-    margin-top: 8px;
-    height: 200px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-    .item {
-      width: 42px;
-      height: 25%;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      cursor: pointer;
-      background-position-y: bottom;
-      padding-top: 20%;
-    }
-    .item:nth-child(4) {
-      margin-top: 6px;
-    }
-    img {
-      width: 30px;
-    }
-    .check {
-      background: url("../../assets/images/holo/check.png");
-      background-size: 100%;
-      background-repeat: no-repeat;
-      background-position-y: bottom;
-      padding-top: 20%;
-    }
-    .check img {
-      filter: drop-shadow(#bedeff 100px 0);
-      transform: translateX(-100px);
-    }
-  }
-}
-</style>

wj-smartcity/src/views/signal/switchers/equipmentSwitch.vue

+<template>
+    <div class="equipmentSwc" :class="boxesShow?'m-b':''">
+      <div class="legend-container">
+        <el-tooltip
+          effect="dark"
+          :content="item.name"
+          :key="index"
+          placement="bottom"
+          v-for="(item,index) of switchOptions"
+        >
+          <div
+            class="item"
+            :key="index"
+            :class="{ check: item.check }"
+            @click="changeCheck(item)"
+          >
+            <img
+              alt=""
+              :src="
+                require(`../../../assets/images/holo/${item.label}${
+                  item.check ? 's' : ''
+                }.png`)
+              "
+              class="img"
+              style="vertical-align: super"
+            />
+          </div>
+        </el-tooltip>
+      </div>
+      <div class="select-all">
+        <div class="select-botton" @click="selectAll">
+          {{ showStatus ? "全选" : "取消" }}
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "equipmentSwitch",
+    data() {
+      return {
+        layerIconsShow: true,
+        switchOptions: [
+          { label: "signal", check: true, name: "信号机" },
+          { label: "camera", check: true, name: "视频相机" },
+          { label: "milli", check: true, name: "毫米波雷达" },
+          { label: "weather", check: true, name: "气象检测仪" },
+          { label: "radar", check: true, name: "激光雷达" },
+        ],
+      };
+    },
+    props: ['boxesShow'],
+    mounted() {},
+    methods: {
+      selectAll() {
+        if (this.showStatus) {
+          this.switchOptions.forEach((e) => {
+            e.check = true;
+          });
+        } else {
+          this.switchOptions.forEach((e) => {
+            e.check = false;
+          });
+        }
+  
+        this.$emit("equipmentChange", this.switchOptions);
+      },
+      changeCheck(item) {
+        item.check = !item.check;
+        this.$emit("equipmentChange", this.switchOptions);
+      },
+    },
+    computed: {
+      showStatus() {
+        for (let item of this.switchOptions) {
+          if (!item.check) {
+            return true;
+          }
+        }
+        return false;
+      },
+    },
+    beforeDestroy() {},
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  
+  .equipmentSwc {
+    transition: 0.5s all ease;
+    position: absolute;
+    z-index: 12;
+    bottom: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 340px;
+    height: 60px;
+    background-color: rgba(7, 15, 36, 0.5);
+    padding: 7px;
+    font-size: 12px;
+    border: 1px solid #3c568c;
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+  
+    .legend-container {
+      display: flex;
+      flex: 0 0 76%;
+      justify-content: space-between;
+      height: 100%;
+  
+      .item {
+        cursor: pointer;
+        padding: 10px;
+        border: 3px solid;
+        border-image: linear-gradient(
+            180deg,
+            rgba(25, 67, 125, 0.54) 0%,
+            rgba(47, 61, 82, 0.01) 100%
+          )
+          1;
+        background-image: linear-gradient(
+          180deg,
+          rgba(25, 67, 125, 0.54) 0%,
+          rgba(47, 61, 82, 0.01) 100%
+        );
+  
+        .img {
+          height: 100%;
+        }
+      }
+  
+      .check {
+        border: 3px solid;
+        border-image: linear-gradient(
+            rgba(65, 146, 217, 1),
+            rgba(65, 146, 217, 0.3),
+            rgba(65, 146, 217, 0.3),
+            rgba(65, 146, 217, 1)
+          )
+          1;
+      }
+    }
+  
+    .select-all {
+      // width: 50px;
+      display: flex;
+      align-items: center;
+  
+      .select-botton {
+        background-color: rgba(18, 35, 77, 0.5);
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      //   line-height: 28px;
+        text-align: center;
+        color: white;
+        border: 1px solid #3c568c;
+        border-radius: 3px;
+        width: 66px;
+        cursor: pointer;
+      }
+  
+      .select-botton:hover {
+        border: 1px solid #45619e;
+        background-color: rgba(28, 50, 107, 0.5);
+      }
+    }
+  }
+  .m-b{
+    bottom: calc(33.3% + 40px);
+    transition: 0.5s all ease;
+  }
+  </style>
+  
\ No newline at end of file

wj-smartcity/src/views/signal/switchers/layersSwitch.vue

+<template>
+    <div class="layersSwitch" :style="{ left: right }">
+      <div v-show="true" class="layerIcons">
+        <el-tooltip
+          effect="dark"
+          :content="item.name"
+          placement="right"
+          v-for="(item,index) of switchOptions"
+          :key="index"
+        >
+          <div class="item" :key="index" :class="{ check: item.check }">
+            <img
+              alt=""
+              :src="require(`../../../assets/images/holo/svg/${item.label}.svg`)"
+              @click="changeCheck(item)"
+              class="img"
+            />
+          </div>
+        </el-tooltip>
+      </div>
+      <div
+        class="visibleControl"
+        :class="[{ 'expand-i': show }, { 'close-i': !show }]"
+        @click="changeVisibel"
+      >
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        layerIconsShow: true,
+        switchOptions: [
+          { label: "first", check: true, name: "轨迹" },
+          { label: "second", check: false, name: "路况" },
+          // { label: "third", check: false, name: "事件" },
+          { label: "fourth", check: false, name: "设备" },
+        ],
+      };
+    },
+    props: ["right", "show"],
+    mounted() {},
+    methods: {
+      changeVisibel() {
+        this.$emit("visibleChange");
+      },
+      getOptions() {
+        return this.switchOptions;
+      },
+      changeCheck(item) {
+        let beforeItem = "";
+        this.switchOptions.forEach((e) => {
+          if (e.label === item.label) {
+            e.check = !e.check;
+          } else {
+            e.check && (beforeItem = e.label);
+            e.check = false;
+          }
+        });
+        this.$emit("changeCheck", beforeItem, item);
+      },
+    },
+    computed: {},
+    beforeDestroy() {},
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  .layersSwitch {
+    position: absolute;
+    z-index: 13;
+    .visibleControl {
+      margin-top: 10px;
+    }
+    .el-icon-document-copy {
+      font-size: 20px;
+      cursor: pointer;
+      color: #aeaeae;
+      text-align: right;
+    }
+    .expand-i {
+      background: url("../../../assets/images/holo/close.png");
+      cursor: pointer;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      height: 42px;
+      width: 42px;
+    }
+    .close-i {
+      background: url("../../../assets/images/holo/expand.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      cursor: pointer;
+      height: 42px;
+      width: 42px;
+    }
+    .layerIcons {
+      width: 42px;
+      margin-top: 8px;
+      height: 135px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      overflow: hidden;
+      .item {
+        width: 42px;
+        height: 33.3%;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        cursor: pointer;
+        background-position-y: bottom;
+        padding-top: 20%;
+      }
+      // .item:nth-child(4) {
+      //   margin-top: 6px;
+      // }
+      img {
+        width: 30px;
+      }
+      .check {
+        background: url("../../../assets/images/holo/check.png");
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position-y: bottom;
+        padding-top: 20%;
+      }
+      .check img {
+        filter: drop-shadow(#bedeff 100px 0);
+        transform: translateX(-100px);
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file