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

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__flipInX"
    leave-active-class="animate__flipOutX"
  >
    <div class="widget-PropertiesView" ref="widget-PropertiesView">
      <div class="wrap">
        <el-cascader
          ref="PropertiesView"
          v-model="selectValue"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          clearable
          size="small"
          placeholder="属性查看"
          popper-class="widget-PropertiesView-el-cascader-dropDown"
        ></el-cascader>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import PipeUnitInfo from '@/views/groupPage/districtPageModules/pipeUnitInfo/index.vue'
import artifactsInfo from '@/views/groupPage/districtPageModules/customTools/infoComponents/artifactsInfo.vue'
import { createTooltip } from '@/views/groupPage/util'
import { getLatAndLon } from '@/views/groupPage/util'
const Cesium = (window as any).Cesium
//属性查看
@Component({ name: 'PropertiesView' })
export default class PropertiesView extends Vue {
  toolTip = null
  tooltipHandler = null
  componentInfo = null
  pipeInfo = null
  options = [
    {
      value: 'bjck',
      label: '部件查看',
      children: [
        {
          value: 'point',
          label: '点选'
        },
        {
          value: 'rect',
          label: '框选'
        }
      ]
    },
    {
      value: 'component',
      label: '构件查看'
    }
  ]
  selectValue = []
  viewer
  get isInitViewer() {
    return this.$store.state.bigScreen.isInitViewer
  }
  get propertiesViewValue() {
    return this.$store.state.bigScreen.propertiesViewValue
  }
  @Watch('isInitViewer')
  onChangeViewMethod() {
    this.viewer = (window as any).viewer
  }
  @Watch('propertiesViewValue')
  onChangeValueMethod(val) {
    this.selectValue = val
  }
  @Watch('selectValue')
  onChangeMethod(val) {
    if (!val) return
    this.$store.state.bigScreen.propertiesViewValue = val
    const type = [...val]
    this.destroyLastOperation()
    if (type.includes('point')) {
      this.pipeUnitInfo('point')
    }
    if (type.includes('rect')) {
      this.pipeUnitInfo('rect')
    }
    if (type.includes('component')) {
      this.activeViewComponent()
    }
  }
  mounted() {
    let target = this.$refs['widget-PropertiesView'] as any
    target.style.setProperty('--right', '2.34375rem')
  }
  pipeUnitInfo(type) {
    const pipeInfoConstructor = Vue.extend(PipeUnitInfo)
    this.pipeInfo = new pipeInfoConstructor({
      data: {
        pickType: type,
        isInteractive: true,
        locateUnit: null
      },
      store: this.$store
    }).$mount()
  }
  //构件查看激活
  activeViewComponent() {
    const that = this
    this.toolTip = createTooltip(document.querySelector('#' + this.$store.state.bigScreen.mapContainerId))
    const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    this.tooltipHandler = handler
    // 设置要在输入事件上执行的功能，官方文档查询ScreenSpaceEventType可以看到所有的cesium鼠标事件
    handler.setInputAction((movement) => {
      var pickedObject = this.viewer.scene.pick(movement.position)
      const coordinate = getLatAndLon(this.viewer, movement)
      const position = Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, coordinate.altitude)
      if (this.viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
        const info = {
          name: pickedObject.primitive._name
        }
        this.showInfoPanel(position, info)
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    handler.setInputAction((movement) => {
      this.toolTip.showAt(movement.endPosition, '<p>鼠标左键选择构件进行查看,右键单击取消</p>')
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    handler.setInputAction(() => {
      this.clearPickEvent()
      this.selectValue = []
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
  }
  //显示构件信息
  showInfoPanel(position, info) {
    const artifactsInfoConstructor = Vue.extend(artifactsInfo)
    const that = this
    this.componentInfo = new artifactsInfoConstructor({
      data: {
        position,
        info
      },
      store: this.$store
    }).$mount()
  }
  //清除事件
  clearPickEvent() {
    if (this.componentInfo) {
      this.componentInfo.close()
    }
    if (this.toolTip) {
      this.toolTip.remove()
      this.toolTip = null
    }
    if (this.tooltipHandler && !this.tooltipHandler.isDestroyed()) {
      this.tooltipHandler.destroy()
      this.tooltipHandler = null
    }
  }
  destroyLastOperation() {
    if (this.pipeInfo) {
      this.pipeInfo.reset()
    }
    this.clearPickEvent()
  }
}
</script>

<style lang="scss" scoped>
.animate__flipInX,
.animate__flipOutX {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-PropertiesView {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-right: var(--right); //2.34375rem /* 450/192 */;
  position: absolute;
  right: 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;
  .wrap {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    width: 0.625rem /* 120/192 */;
    & ::placeholder {
      color: rgba(43, 167, 255, 1);
    }
    /deep/ .el-cascader {
      $background: rgba(7, 48, 80, 0.9);
      .el-input__inner {
        color: rgba(43, 167, 255, 1);
        border: none;
        background-color: $background;
      }
      .el-icon-arrow-down: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);
      }
    }
    // .icon {
    //   width: 0.520833rem /* 100/192 */;
    //   height: 0.177083rem /* 34/192 */;
    //   background: rgba(3, 109, 190, 0.4);
    //   border-radius: 2px;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   cursor: pointer;
    //   font-size: 0.072917rem /* 14/192 */;
    //   font-weight: 500;
    //   color: #2ba7ff;
    //   .iconImg {
    //     width: 0.104167rem /* 20/192 */;
    //     height: 0.083333rem /* 16/192 */;
    //   }
    //   .upImg {
    //     background: url('~@/views/groupPage/images/三角上.png');
    //   }
    //   .downImg {
    //     background: url('~@/views/groupPage/images/三角下.png');
    //   }
    // }
  }
}
</style>
<style lang="scss">
.widget-PropertiesView-el-cascader-dropDown {
  background: rgba(2, 60, 93, 0.64);
  border-color: #023c5d;
  & ::placeholder {
    color: rgba(43, 167, 255, 1);
  }
  .el-cascader-menu {
    color: #eee;
    border-right: solid 1px rgba(64, 158, 255, 0.24);
  }
  .el-cascader-menu:last-child {
    border-right: none;
  }
  .el-cascader-node:hover {
    background-color: rgba(43, 167, 255, 0.2);
  }
  .popper__arrow {
    border-bottom-color: rgba(43, 167, 255, 0.2) !important;
  }
  .popper__arrow::after {
    border-bottom-color: rgba(43, 167, 255, 0.2) !important;
  }
}
</style>