yclw/src/views/groupPage/districtPageModules/customTools/infoComponents/projectInfo.vue

<template>
  <ComMapBox ref="ComMapBox" :id="'projectInfo'">
    <ComCardBox @close="close()" :styleData="cardStyle">
      <div class="widget-projectInfo">
        <div class="header">
          <div class="name">{{ info.originname }}</div>
          <!-- <div class="status">{{ '建设中' }}</div> -->
        </div>
        <div class="content">
          <!-- <div class="content-item">
            <div class="name">工程进度：</div>
            <div class="value">
              <div class="progress-bg"></div>
              <div class="progress-value">80%</div>
            </div>
          </div> -->
          <div class="content-item">
            <div class="name">工程编码：</div>
            <div class="value">{{ info.code }}</div>
          </div>
          <div class="content-item">
            <div class="name">类型：</div>
            <div class="value">{{ info.levelname }}</div>
          </div>
          <div class="content-item">
            <div class="name">设计单位：</div>
            <div class="value">{{ designUnit }}</div>
          </div>
          <div class="content-item">
            <div class="name">施工单位：</div>
            <div class="value">{{ buildUnit }}</div>
          </div>
        </div>
      </div>
    </ComCardBox>
  </ComMapBox>
</template>

<script lang="ts">
import { mapSearch_api } from '@/api/APIs'
import ComMapBox from '@/views/groupPage/components/ComMapBox.vue'
import ComCardBox from '@/views/groupPage/components/ComCardBox.vue'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
const Cesium = (window as any).Cesium
let handler = null
//属性查看
@Component({ name: 'projectInfo', components: { ComMapBox, ComCardBox } })
export default class projectInfo extends Vue {
  info: any = {}
  position: Array<any> = []
  viewer
  designUnit: string = ''
  buildUnit: string = ''
  cardStyle: object = {
    '--height': '1.25rem ' /* 240/192 */, //高度
    '--width': '1.666667rem ' /* 320/192 */, //宽度
    '--borderColor': 'rgba(25, 137, 252, 1)', //边框线颜色
    '--backgroundColor': 'rgba(2, 20, 37, 0.45)' //背景颜色
  }
  mounted() {
    this.viewer = (window as any).viewer
    this.close() //初始不显示
    this.addEntity()
    this.addMapEvent()
    this.searchInfo()
  }
  searchInfo() {
    const data = { queryText: this.info.originname } //查询条件
    mapSearch_api(data).then((res) => {
      let dArray = [],
        bArray = []
      res.result.forEach((item) => {
        let buildUnit = item.tjData && item.tjData[0] && item.tjData[0].buildUnit ? item.tjData[0].buildUnit : '无'
        let designUnit = item.tjData && item.tjData[1] && item.tjData[1].designUnit ? item.tjData[1].designUnit : '无'
        if (!dArray.includes(designUnit)) dArray.push(designUnit)
        if (!bArray.includes(buildUnit)) bArray.push(buildUnit)
      })
      this.designUnit = dArray.join(',')
      this.buildUnit = bArray.join(',')
    })
  }
  initInfoPop() {
    ;(this.$refs['ComMapBox'] as any).initBox()
    ;(this.$refs['ComMapBox'] as any).setPosition(Cesium.Cartesian3.fromDegrees(this.position[0], this.position[1]))
  }
  addMapEvent() {
    const that = this
    handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    handler.setInputAction(
      function (movement) {
        var pickedObject = this.viewer.scene.pick(movement.position)
        // 使用时，最好利用pickPositionSupported判断一下浏览器是否支持模型高度拾取
        if (this.viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
          if (pickedObject.id._id === 'projectInfo') {
            that.initInfoPop()
          }
        } else {
        }
      }.bind(this),
      Cesium.ScreenSpaceEventType.LEFT_CLICK
    )
  }
  addEntity() {
    let viewer = this.viewer
    let imgSrc = require('@/views/groupPage/images/地图/工程-管网工程.png')
    this.removeEntity()
    viewer.entities.add({
      id: 'projectInfo',
      position: Cesium.Cartesian3.fromDegrees(this.position[0], this.position[1], 0),
      billboard: {
        image: imgSrc,
        width: 45,
        height: 45,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        eyeOffset: Cesium.Cartesian3.ZERO,
        disableDepthTestDistance: 9999999
      }
    })
    var entity = viewer.entities.getById('projectInfo')
    viewer.flyTo(entity, {
      offset: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-60),
        range: 500
      }
    })
  }
  removeEntity() {
    //清除定位实体
    let entitys = this.viewer.entities._entities._array
    for (let i = 0; i < entitys.length; i++) {
      if (entitys[i].id === 'projectInfo') {
        this.viewer.entities.remove(entitys[i])
        i--
      }
    }
  }
  close() {
    ;(this.$refs['ComMapBox'] as any).remove()
  }
  remove() {
    ;(this.$refs['ComMapBox'] as any).remove()
    this.removeEntity()
  }
  beforeDestroy() {
    this.close()
  }
}
</script>

<style lang='scss' scoped>
.widget-projectInfo {
  height: 100%;
  width: 90%;
  padding: 0.052083rem /* 10/192 */ 0.078125rem /* 15/192 */ 0;
  .header {
    height: 0.104167rem /* 20/192 */;
    display: flex;
    justify-content: space-between;
    .name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.083333rem /* 16/192 */;
      font-weight: bold;
      color: #16c6ea;
    }
    .status {
      flex: 0.3;
      background: rgba(3, 153, 228, 1);
      border-radius: 2px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.072917rem; /* 14/192 */
    }
  }
  .content {
    overflow: auto;
    height: calc(100% - 25px);
    width: 100%;
    display: flex;
    flex-flow: column;
    .content-item {
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      padding: 0.052083rem /* 10/192 */ 0;
      display: flex;
      .name {
        color: #ffffff;
      }
      .value {
        color: rgba(14, 202, 240, 1);
        flex: 1;
        white-space: normal;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .progress-bg {
        width: 60%;
        height: 0.052083rem /* 10/192 */;
        border-radius: 5px;
        background: linear-gradient(90deg, #1088f7, #ebe171);
      }
      .progress-value {
        color: rgba(234, 224, 114, 1);
      }
    }
  }
}
</style>