宜昌两网大屏新增构件查看

src/config/bigScreenConfig.js

@@ -34,7 +34,7 @@ export const appconfig = {
         "config": {
           "wscj": {
             "name": "污水厂",
-            "url": "http://192.168.2.20:8090/iserver/services/3D-LiDuErShuiChang/rest/realspace"
+            "url": "http://192.168.2.20:8090/iserver/services/3D-liduershuichang/rest/realspace"
           },
           "jzcj": {
             "name": "建筑场景",

src/store/modules/bigScreen.ts

@@ -13,6 +13,7 @@ const state = {
   currentActive: null,//项目当前激活模块
   customToolList: [],//自定义工具激活集合
   currentTool: '',//当前激活工具
+  propertiesViewValue: null,//属性查看选择值
   isShowPipeSpeedInfoCheck: false,//显示进度查看弹窗
 }
 //检查是否存在已有数据方法

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

@@ -25,9 +25,17 @@
 <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',
@@ -44,20 +52,41 @@ export default class PropertiesView extends Vue {
       ]
     },
     {
-      value: '工程查看',
-      label: '工程查看'
+      value: 'component',
+      label: '构件查看'
     }
   ]
-  selectValue = null
+  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
@@ -65,7 +94,7 @@ export default class PropertiesView extends Vue {
   }
   pipeUnitInfo(type) {
     const pipeInfoConstructor = Vue.extend(PipeUnitInfo)
-    const pipeInfo = new pipeInfoConstructor({
+    this.pipeInfo = new pipeInfoConstructor({
       data: {
         pickType: type,
         isInteractive: true,
@@ -74,6 +103,64 @@ export default class PropertiesView extends Vue {
       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>
 

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

@@ -47,7 +47,7 @@ const gLayerList = [
 @Component({ name: 'SearchBox' })
 export default class SearchBox extends Vue {
   inputText = ''
-  selectValue = ''
+  selectValue = '1'
   layerdown = 0
   //地表透明度配置
   opacity = 0

src/views/groupPage/districtPageModules/customTools/infoComponents/artifactsInfo.vue

@@ -0,0 +1,118 @@
+<template>
+  <ComMapBox ref="ComMapBox">
+    <ComCardBox @close="close()">
+      <div class="widget-artifactsInfo">
+        <div class="header">
+          <div class="name">{{ info.name }}</div>
+        </div>
+        <div class="content">
+          <div class="content-item">
+            <div class="name">设计单位：</div>
+            <div class="value">xxx</div>
+          </div>
+          <div class="content-item">
+            <div class="name">施工单位：</div>
+            <div class="value">xxx</div>
+          </div>
+          <div class="content-item">
+            <div class="name">监理单位：</div>
+            <div class="value">xxx</div>
+          </div>
+          <div class="content-item">
+            <div class="name">工程量：</div>
+            <div class="value">xxx</div>
+          </div>
+        </div>
+      </div>
+    </ComCardBox>
+  </ComMapBox>
+</template>
+
+<script lang="ts">
+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
+//构件查看
+@Component({ name: 'artifactsInfo', components: { ComMapBox, ComCardBox } })
+export default class artifactsInfo extends Vue {
+  position: Array<any> = []
+  viewer
+  info = null
+  mounted() {
+    this.viewer = (window as any).viewer
+    ;(this.$refs['ComMapBox'] as any).initBox()
+    ;(this.$refs['ComMapBox'] as any).setPosition(this.position)
+  }
+  close() {
+    ;(this.$refs['ComMapBox'] as any).remove()
+  }
+  beforeDestroy() {
+    this.close()
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.widget-artifactsInfo {
+  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 {
+    height: calc(100% - 20px);
+    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>

src/views/groupPage/districtPageModules/customTools/pipeSpeedInfoCheck.vue

@@ -5,7 +5,7 @@
     enter-active-class="animate__zoomIn"
     leave-active-class="animate__zoomOut"
   >
-    <div class="widget-PipeSpeedInfoCheck" v-drag>
+    <div class="widget-ProjectPipeSpeedInfoCheck" v-drag>
       <div class="header">
         <span class="close">
           <i class="el-icon-close" @click="close()" />
@@ -50,7 +50,7 @@ import { GetProgress, PipeAndNodeProcess } from '@/api/APIs'
 import { queryMapByAttribute } from '@/views/groupPage/util'
 import _ from 'lodash'
 import config from '@/views/groupPage/districtPageModules/customTools/config.json'
-import pipeInfo from '@/views/groupPage/districtPageModules/customTools/pipeInfo.vue'
+import pipeInfo from '@/views/groupPage/districtPageModules/customTools/infoComponents/pipeInfo.vue'
 const gPipe = config.gPipe
 const SuperMap = (window as any).SuperMap
 const Cesium = (window as any).Cesium
@@ -59,8 +59,8 @@ let gPrimitiveCollection = null
 let gPpostUpdate = undefined
 let gHandler = null
 //进度查看模块
-@Component({ name: 'PipeSpeedInfoCheck' })
-export default class PipeSpeedInfoCheck extends Vue {
+@Component({ name: 'ProjectPipeSpeedInfoCheck' })
+export default class ProjectPipeSpeedInfoCheck extends Vue {
   viewer
   apiurls = {
     sjfw: '',
@@ -514,7 +514,7 @@ export default class PipeSpeedInfoCheck extends Vue {
   animation-duration: 1s; //动画持续时间
   animation-delay: 0s; //动画延迟时间
 }
-.widget-PipeSpeedInfoCheck {
+.widget-ProjectPipeSpeedInfoCheck {
   bottom: 0.520833rem /* 100/192 */;
   left: calc(50% - 1.5625rem);
   //   margin-left: -1.5625rem /* 300/192 */;

src/views/groupPage/districtPageModules/index.vue

@@ -9,7 +9,7 @@
     <!--自定义工具栏-->
     <CustomToolBox />
     <!--进度查看模块-->
-    <PipeSpeedInfoCheck v-if="isShowPipeSpeedInfoCheck" />
+    <ProjectPipeSpeedInfoCheck v-if="isShowPipeSpeedInfoCheck" />
     <!--工程全景模块-->
     <ProjectPanoramic v-if="districtModuleName === 'ProjectPanoramic'" />
   </div>
@@ -21,12 +21,12 @@ import PropertiesView from '@/views/groupPage/districtPageModules/commonModules/
 import SearchBox from '@/views/groupPage/districtPageModules/commonModules/SearchBox.vue'
 import ToolBox from '@/views/groupPage/districtPageModules/commonModules/ToolBox.vue'
 import CustomToolBox from '@/views/groupPage/districtPageModules/commonModules/CustomToolBox.vue'
-import PipeSpeedInfoCheck from '@/views/groupPage/districtPageModules/customTools/pipeSpeedInfoCheck.vue'
+import ProjectPipeSpeedInfoCheck from '@/views/groupPage/districtPageModules/customTools/projectPipeSpeedInfoCheck.vue'
 import ProjectPanoramic from '@/views/groupPage/districtPageModules/projectPanoramic/index.vue'
 //集团分公司页面模块
 @Component({
   name: 'districtPageModules',
-  components: { PropertiesView, SearchBox, ToolBox, CustomToolBox, ProjectPanoramic, PipeSpeedInfoCheck }
+  components: { PropertiesView, SearchBox, ToolBox, CustomToolBox, ProjectPanoramic, ProjectPipeSpeedInfoCheck }
 })
 export default class districtPageModules extends Vue {
   @Prop({ type: Boolean, default: false }) show!: boolean

src/views/groupPage/districtPageModules/pipeUnitInfo/index.vue

@@ -605,6 +605,12 @@ export default class pipeUnitInfo extends Vue {
   otherDestroy() {
     this.clearDrawEvent()
     this.clearAllPrimitives()
+    this.$store.state.bigScreen.propertiesViewValue = null
+  }
+  //清除所有元素并清空属性选择
+  reset() {
+    this.clearDrawEvent()
+    this.clearAllPrimitives()
   }
   //清除鼠标事件
   clearDrawEvent() {

src/views/groupPage/util.ts

@@ -63,6 +63,20 @@ export function fontSize(res) {
     let fontSize = clientWidth / 1920
     return res * fontSize
 }
+//获取场景里的点的经纬度（模型上的点）
+export function getLatAndLon(viewer, movement) {
+    let cartesian = viewer.scene.pickPosition(movement.position)
+    let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+    let lng = Cesium.Math.toDegrees(cartographic.longitude) // 经度
+    let lat = Cesium.Math.toDegrees(cartographic.latitude) // 纬度
+    let alt = cartographic.height // 高度
+    let coordinate = {
+        longitude: Number(lng.toFixed(6)),
+        latitude: Number(lat.toFixed(6)),
+        altitude: Number(alt.toFixed(2))
+    }
+    return coordinate
+}
 /********************************************部件查看公用方法*********************************************/
 //创建提示工具
 export const createTooltip = function (frameDiv) {