123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- <template>
- <div>
- <div class='page-bar'>
- <span>设备名称:</span>
- <span>{{ equip.EquipLocalName || equip.EquipName }}</span>
- <span>(位置图片)</span>
- </div>
- <div class="page-content" id="page-content" v-loading="canvasLoading">
- <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, queryFileByModelId } from "@/api/model/file";
- export default {
- data() {
- return {
- equip: {},
- file: {},
- view: '',
- scene: {},
- cadWidth: 800,
- cadHeight: 800,
- showCanvas: true,
- canvasLoading: false,
- }
- },
- 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();
- queryFileByModelId({ Filters: `Id='${this.equip.ModelId}'` }, res => {
- if (res.Content.length) {
- this.getFileName(res.Content[0].FloorModelId);
- }
- });
- } else {
- this.showCanvas = false;
- }
- },
- // 获取底图
- getGraphy() {
- this.clearGraphy();
- this.scene = new LocationPointScene()
- this.canvasLoading = true;
- this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.equip.ModelId }).then(res => {
- this.getGraphtSuc(res)
- })
- },
- getGraphtSuc(res) {
- this.canvasLoading = false;
- 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(id) {
- let pa = { Id: id }
- 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>
|