|
@@ -0,0 +1,138 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class='page-bar'>
|
|
|
+ <span>设备名称:</span>
|
|
|
+ <span>{{equip.EquipLocalName || equip.EquipName}}</span>
|
|
|
+ <span>(位置图片)</span>
|
|
|
+ </div>
|
|
|
+ <div class="page-content" id="page-content">
|
|
|
+ <div v-show="showCanvas">
|
|
|
+ <p>{{file.FolderName}}{{file.FloorName}}</p>
|
|
|
+ <canvas :height="cadHeight" :width="cadWidth" id="floorCanvas" :k="refreshCanvas"></canvas>
|
|
|
+ </div>
|
|
|
+ <div class="no-data" v-show="!showCanvas">
|
|
|
+ <div class="position-icon">
|
|
|
+ <i class="icon-wushuju iconfont"></i>
|
|
|
+ 数据暂无
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { LocationPointScene, FloorView } from "@saga-web/cad-engine";
|
|
|
+import { getFileNameById } from "@/api/model/file";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ equip: {},
|
|
|
+ file: {},
|
|
|
+ view: '',
|
|
|
+ scene: {},
|
|
|
+ cadWidth: 800,
|
|
|
+ cadHeight: 800,
|
|
|
+ showCanvas: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.cadWidth = document.getElementById('page-content').offsetWidth;
|
|
|
+ this.cadHeight = document.getElementById('page-content').offsetHeight;
|
|
|
+ this.equip = this.$route.query.equip;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ if (this.equip.ModelId && this.equip.BIMLocation) {
|
|
|
+ this.showCanvas = true;
|
|
|
+ this.getGraphy();
|
|
|
+ this.getFileName();
|
|
|
+ } else {
|
|
|
+ this.showCanvas = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取底图
|
|
|
+ getGraphy() {
|
|
|
+ this.clearGraphy();
|
|
|
+ this.scene = new LocationPointScene()
|
|
|
+ this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.equip.ModelId }).then(res => {
|
|
|
+ this.getGraphtSuc(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getGraphtSuc(res) {
|
|
|
+ this.view.scene = this.scene;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ this.scene.isSpaceSelectable = false;
|
|
|
+ let obj = {
|
|
|
+ X: this.equip.LocationJson.X,
|
|
|
+ Y: -this.equip.LocationJson.Y
|
|
|
+ }
|
|
|
+ this.scene.addMarker(obj);
|
|
|
+ },
|
|
|
+ refreshCanvas() {
|
|
|
+ return new Date().getTime();
|
|
|
+ },
|
|
|
+ // 获取文件夹及文件名称
|
|
|
+ getFileName() {
|
|
|
+ let pa = { Id: this.equip.ModelId }
|
|
|
+ getFileNameById(pa, res => {
|
|
|
+ this.file = res
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清空平面图
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let id = `floorCanvas`;
|
|
|
+ this.view = new FloorView(id)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(to, from) {
|
|
|
+ let equip = this.$route.query.equip || {};
|
|
|
+ if (equip.EquipID && equip.EquipID != this.equip.EquipID) {
|
|
|
+ this.equip = equip;
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$borderColor: rgba(201, 201, 201, 1);
|
|
|
+.page-bar {
|
|
|
+ flex-grow: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 24px;
|
|
|
+ padding: 0 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+}
|
|
|
+.page-content {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid $borderColor;
|
|
|
+ p {
|
|
|
+ padding: 10px 16px;
|
|
|
+ }
|
|
|
+ canvas {
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ .no-data {
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .position-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|