PipeColor.vue 3.88 KB
Newer Older
1 2 3
<!--
 * @Author: your name
 * @Date: 2022-01-26 10:52:10
4
 * @LastEditTime: 2024-07-26 10:07:16
5
 * @LastEditors: 纪泽龙 jizelong@qq.com
6 7 8 9 10
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /test/hello-world/src/components/PipeColor.vue
-->
<template>
  <div>
11
    <div class="pipePressure">
12
    <!-- 
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
      <div style="float: left;margin-right: 5px;">
        <div class="hasColorBox">
          <img src="../../assets/image/bigtyx.svg" alt="">
          调压箱
        </div>
        <div class="hasColorBox">
          <img src="../../assets/image/bigfmj.svg" alt="">
          阀门井
        </div>
        <div class="hasColorBox">
          <img src="../../assets/image/bigcz.svg" alt="">
          厂站
        </div>
        <div class="hasColorBox">
          <img src="../../assets/image/biguser.svg" alt="">
          用户
        </div>
        <div class="hasColorBox">
          <img src="../../assets/image/bigjk.svg" alt="">
          监控
        </div>
34
      </div> -->
35 36 37 38
    <div class="">
      <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
        <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
        低压管线
39
      </div>
40 41 42 43 44 45 46 47 48 49 50 51 52 53
      <div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
        <div :style="{ backgroundColor: pipeColor[`2`] }"></div>
        中压管线
      </div>
      <div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
        <div :style="{ backgroundColor: pipeColor[`3`] }"></div>
        次高压管线
      </div>
      <div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
        <div :style="{ backgroundColor: pipeColor[`4`] }"></div>
        高压管线
      </div>
    </div>
    </div> 
54 55 56 57 58 59 60 61 62 63 64 65

    <div class="mapChange">
      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
    </div>
  </div>
</template>

<script>
import { pipeColor } from "@/utils/mapClass/config.js";
export default {
  data() {
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
    downIcon: true;
    return {
      pipeColor,
      mapStyle: true,
    };
  },
  methods: {
    // 更改卫星图
    mapChange(num) {
      if (num == 1) {
        this.mapStyle = false;
      } else {
        this.mapStyle = true;
      }
      this.$parent.map.changeMap(this.mapStyle);
81
    },
82
  },
83 84 85 86 87
};
</script>

<style lang="scss" scoped>
.pipePressure {
88
  width: 130px;
89
  height: auto;
90
  // border: 1px solid #a5a5a5;
91 92 93
  background-color: #112238b3;
  position: fixed;
  color: rgb(205, 219, 228);
94
  right: 400px;
95
  bottom: 50px;
96 97
  padding: 5px;
  font-size: 14px;
98
  pointer-events: none;
99 100 101 102 103 104 105
  // background: rgba(6, 29, 51, 0.8);
  .hasColorBox {
    // border: 1px solid #053b6a;
    padding: 2px 5px;
    margin-bottom: 5px;
    & > div {
      display: inline-block;
106
      width: 20px;
107
      height: 10px;
108
      margin-right: 10px;
109 110 111
    }
  }
}
112
.hasColorBox > img {
113 114 115 116
  width: 14px;
}
.mapChange {
  left: 10px;
117
  top: 50px;
118 119 120 121 122 123
  color: #fff;
  padding: 5px;
  position: absolute;
  display: flex;
  z-index: 9999;
  div {
124 125 126 127 128 129 130 131 132 133
    width: 128px;
    height: 32px;
    text-align: center;
    line-height: 3px;
    background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center;
    line-height: 34px;
    // background-color: #053b6a;

    // border: 1px solid #339CC9;
    // padding: 3px 6px;
134
    margin-left: 8px;
135
    color: #ffffff;
136 137
    cursor: pointer;
    font-size: 14px;
138 139 140 141 142 143 144 145 146 147 148 149 150 151
    transition: all 0.2s linear;
    &.active {
      background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
        bottom center;
      &:hover {
        background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
          bottom center;
        opacity: 1;
      }
    }
    &:hover {
      background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
        bottom center;
      opacity: 0.7;
152 153 154 155
    }
  }
}
</style>