yclw/src/views/groupPage/districtPageModules/commonModules/SearchBox.vue

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__flipInX"
    leave-active-class="animate__flipOutX"
  >
    <div class="widget-SearchBox" ref="widget-SearchBox">
      <div class="search">
        <el-input placeholder="" v-model="inputText" class="input-with-select" size="small" clearable>
          <el-select v-model="selectValue" slot="prepend" placeholder="请选择" :popper-append-to-body="false">
            <el-option label="工程" value="1"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="lifting">
        <span>抬升：</span>
        <el-input-number v-model="layerdown" size="small" controls-position="right"></el-input-number>
        <span class="unit">米</span>
      </div>
      <div class="setOpacity">
        <span>透明度：</span>
        <el-input-number v-model="opacity" size="small" controls-position="right" :min="0" :max="100" :step="10">
        </el-input-number>
        <span class="unit">%</span>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import _ from 'lodash'
const Cesium = (window as any).Cesium
const gLayerList = [
  'NETWORK_SJ_PSWS@sxgk#1',
  'NETWORK_SJ_PSYS@sxgk#1',
  'NETWORK_SJ_PSWS_Node@sxgk#1',
  'NETWORK_SJ_PSYS_Node@sxgk#1',
  'TF_SJ_PSYS_JG_B_3D@sxgk#1',
  'TF_SJ_PSYS_JG_B_3D@sxgk#2',
  'TF_SJ_PSWS_JG_B_3D@sxgk#2',
  'TF_SJ_PSWS_JG_B_3D@sxgk#1'
]
//搜索栏
@Component({ name: 'SearchBox' })
export default class SearchBox extends Vue {
  inputText = ''
  selectValue = '1'
  layerdown = 0
  //地表透明度配置
  opacity = 0
  disVisibleLayers = ['Config']
  g_modelTransparent = false
  mounted() {
    let target = this.$refs['widget-SearchBox'] as any
    target.style.setProperty('--left', '2.34375rem')
  }
  viewer
  get mapConfig() {
    return this.$store.state.bigScreen.mapConfig
  }
  get isInitViewer() {
    return this.$store.state.bigScreen.isInitViewer
  }
  @Watch('isInitViewer')
  onChangeMethod() {
    this.viewer = (window as any).viewer
  }
  //透明度变化
  @Watch('opacity')
  changeOpacity(newVal) {
    const val = parseFloat(newVal)
    const alpha = parseFloat((1 - val / 100).toString())
    const layers = this.disVisibleLayers
    if (this.g_modelTransparent && layers.length > 0) {
      this.viewer.scene.layers.layerQueue.forEach((layer) => {
        if (_.indexOf(layers, layer.name) !== -1) {
          layer.style3D.fillForeColor.alpha = alpha
        }
      })
    }
    this.viewer.scene.globe.globeAlpha = 1 - val / 100
    for (var i = 0; i < this.viewer.scene.imageryLayers.length; i++) {
      var ly = this.viewer.scene.imageryLayers.get(i)
      ly.alpha = alpha
    }
  }
  //管线抬升
  @Watch('layerdown')
  changeDepth(value) {
    let height = parseFloat(value)
    if (isNaN(height)) {
      return
    }
    this.mapConfig.upDepth = height
    const style3D = new Cesium.Style3D()
    style3D.altitudeMode = 0
    style3D.bottomAltitude = height
    gLayerList.forEach((item) => {
      var layer = this.viewer.scene.layers.find(item)
      if (layer) {
        layer.style3D = style3D
        layer.refresh()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.animate__flipInX,
.animate__flipOutX {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-SearchBox {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-left: var(--left); //2.34375rem /* 450/192 */;
  position: absolute;
  left: 0;
  //size
  //background
  background-color: rgba(20, 24, 47, 0.5);
  color: #eee;
  box-shadow: 0 0 20px rgba(1, 9, 20, 1);
  //font
  font-family: Source Han Sans CN;
  .search {
    float: left;
    margin-right: 0.052083rem /* 10/192 */;
    & ::placeholder {
      color: rgba(43, 167, 255, 1);
    }
    /deep/ .el-input {
      $backgroundColor: rgba(7, 48, 80, 0.9);
      width: 1.25rem /* 240/192 */;
      .el-select .el-input {
        width: 0.46875rem /* 90/192 */;
      }
      .el-input__inner {
        color: #eee;
        background-color: $backgroundColor;
        border: none;
      }
      .el-input-group__append,
      .el-input-group__prepend {
        background-color: $backgroundColor;
        border: none;
        color: #2ba7ff;
      }
      .el-input-group__prepend {
        .el-select {
          margin: -0.015625rem /* 3/192 */ -0.109375rem /* 21/192 */;
          position: relative;
        }
        .el-input__inner {
          font-size: 0.072917rem /* 14/192 */;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #2ba7ff;
          position: relative;
        }
        .el-input::after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto 0;
          width: 1px;
          height: 80%;
          background-color: rgba(41, 177, 255, 0.3);
        }
        .el-icon-arrow-up:before {
          content: '';
          display: block;
          // 定义元素宽高
          margin-top: 0.041667rem /* 8/192 */;
          width: 0.130208rem /* 25/192 */;
          height: 0.078125rem /* 15/192 */;
          background: url('~@/views/groupPage/images/三角下.png') no-repeat center center;
          background-size: 100% 100%;
          transform: rotate(180deg);
        }
      }
    }
  }
  .lifting,
  .setOpacity {
    float: left;
    $background: rgba(7, 48, 80, 0.9);
    background: $background;
    border-radius: 0.010417rem /* 2/192 */;
    margin-right: 0.052083rem /* 10/192 */;
    span {
      padding: 0.052083rem /* 10/192 */ 0 0.052083rem /* 10/192 */ 0.052083rem /* 10/192 */;
      font-size: 0.072917rem /* 14/192 */;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #82bae2;
    }
    .unit {
      padding: 0.052083rem /* 10/192 */ 0.052083rem /* 10/192 */ 0 0 !important;
    }
    /deep/ .el-input-number {
      width: 0.3125rem /* 60/192 */;
      .el-input-group__append,
      .el-input-group__prepend {
        padding: 0 0.026042rem /* 5/192 */;
      }
      .el-input__inner {
        color: rgba(43, 167, 255, 1);
        border: none;
        background-color: $background;
        position: relative;
        padding-right: 0.15625rem /* 30/192 */;
        padding-left: 0;
      }
      .el-input-number__decrease,
      .el-input-number__increase {
        background: transparent;
        border: none;
        height: 50%;
      }
      .el-input-number__increase .el-icon-arrow-up:before {
        content: '';
        display: block;
        // 定义元素宽高
        margin-top: 0.010417rem /* 2/192 */;
        width: 0.130208rem /* 25/192 */;
        height: 0.078125rem /* 15/192 */;
        background: url('~@/views/groupPage/images/三角上.png') no-repeat center center;
        background-size: 100% 100%;
        object-fit: contain;
      }
      .el-input-number__decrease .el-icon-arrow-down:before {
        content: '';
        display: block;
        // 定义元素宽高
        // margin-top: 0.010417rem /* 2/192 */;
        width: 0.130208rem /* 25/192 */;
        height: 0.078125rem /* 15/192 */;
        background: url('~@/views/groupPage/images/三角下.png') no-repeat center center;
        background-size: 100% 100%;
        object-fit: contain;
      }
    }
  }
}
</style>