PipeColor.vue 4.45 KB
Newer Older
1 2 3
<!--
 * @Author: your name
 * @Date: 2022-01-26 10:52:10
纪泽龙's avatar
纪泽龙 committed
4
 * @LastEditTime: 2024-08-02 16:23:49
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 v-if="b" class="pipePressure">
纪泽龙's avatar
纪泽龙 committed
12 13
      <div class="dx" >
        <el-checkbox @change="showAnimate" v-model="show">流动方向</el-checkbox>
14 15 16 17 18
      </div>
      <div class="">
        <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
          <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
          低压管线
19
        </div>
20 21 22
        <div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
          <div :style="{ backgroundColor: pipeColor[`2`] }"></div>
          中压管线
23
        </div>
24 25 26
        <div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
          <div :style="{ backgroundColor: pipeColor[`3`] }"></div>
          次高压管线
27
        </div>
28 29 30
        <div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
          <div :style="{ backgroundColor: pipeColor[`4`] }"></div>
          高压管线
31
        </div>
32 33
      </div>
    </div>
34

35
    <div v-if="t" class="mapChange">
36 37 38 39 40 41 42 43 44
      <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 {
45 46 47 48 49 50 51 52 53 54
  props: {
    b: {
      type: Boolean,
      default: false,
    },
    t: {
      type: Boolean,
      default: false,
    },
  },
55
  data() {
56 57
    // downIcon: true;

58 59 60
    return {
      pipeColor,
      mapStyle: true,
纪泽龙's avatar
纪泽龙 committed
61
      show: true,
62 63 64
    };
  },
  methods: {
纪泽龙's avatar
纪泽龙 committed
65 66 67 68
    showAnimate(e) {
      console.log(e)
      // this.show = e;
      this.$emit("showAnimate", e);
69
    },
70 71 72 73 74 75 76 77
    // 更改卫星图
    mapChange(num) {
      if (num == 1) {
        this.mapStyle = false;
      } else {
        this.mapStyle = true;
      }
      this.$parent.map.changeMap(this.mapStyle);
78
    },
79
  },
80 81
};
</script>
纪泽龙's avatar
纪泽龙 committed
82 83 84 85 86 87 88 89 90 91 92 93
<style lang="scss">
.pipePressure {
  .el-checkbox__label {
    color: #1890ff;
  }
  .el-checkbox__inner{
    border-color:#1890ff;
    background: rgba(24, 144, 255,0.2);

  }
}
</style>
94 95 96

<style lang="scss" scoped>
.pipePressure {
97
  width: 130px;
98
  height: auto;
99
  // border: 1px solid #a5a5a5;
100
  // background-color: #112238b3;
101 102
  position: fixed;
  color: rgb(205, 219, 228);
103
  right: 435px;
104
  bottom: 50px;
105 106
  padding: 5px;
  font-size: 14px;
107
  pointer-events: none;
108 109 110 111 112 113 114 115

  .dx {
    position: absolute;
    z-index: 9999;
    margin-left: 15px;
    height: 32px;
    top: -27px;
    left: -4px;
纪泽龙's avatar
纪泽龙 committed
116

117 118 119
    color: #fff;
    line-height: 32px;
    text-align: center;
纪泽龙's avatar
纪泽龙 committed
120
 
121 122 123
    font-size: 14px;
    padding: 0px 10px;
    cursor: pointer;
纪泽龙's avatar
纪泽龙 committed
124
    // background: rgba(31, 106, 215, 0.32);
125
    box-sizing: border-box;
纪泽龙's avatar
纪泽龙 committed
126
    // border: 1px solid #2d64b4;
127 128 129 130 131 132 133 134 135 136 137 138
    border-radius: 2px;
    &:hover {
      // opacity: 0.7;
    }
    &.active {
      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
      border-radius: 2px;
      box-sizing: border-box;
      border: 1px solid #72c1ff;
    }
    pointer-events: auto;
  }
139 140 141 142 143 144 145
  // background: rgba(6, 29, 51, 0.8);
  .hasColorBox {
    // border: 1px solid #053b6a;
    padding: 2px 5px;
    margin-bottom: 5px;
    & > div {
      display: inline-block;
146
      width: 20px;
147
      height: 10px;
148
      margin-right: 10px;
149 150 151
    }
  }
}
152
.hasColorBox > img {
153 154 155 156
  width: 14px;
}
.mapChange {
  left: 10px;
157
  top: -32px;
158 159 160 161 162
  color: #fff;
  padding: 5px;
  position: absolute;
  display: flex;
  z-index: 9999;
163 164
  pointer-events: auto;

165
  div {
166 167 168 169 170 171 172 173 174 175
    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;
176
    margin-left: 8px;
177
    color: #ffffff;
178 179
    cursor: pointer;
    font-size: 14px;
180 181 182 183 184 185 186 187 188 189 190 191 192 193
    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;
194 195 196 197
    }
  }
}
</style>