|
@@ -2,7 +2,7 @@
|
|
|
* @Author: zhangyu
|
|
|
* @Date: 2019-11-13 17:00:59
|
|
|
* @Info: 系统集成成果辅助屏
|
|
|
- * @LastEditTime: 2019-11-18 16:49:55
|
|
|
+ * @LastEditTime: 2019-11-18 18:50:07
|
|
|
-->
|
|
|
<template>
|
|
|
<div>
|
|
@@ -21,9 +21,12 @@
|
|
|
<example-list :queryParams="queryParams" @changeExample="handleChangeExample"></example-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="content-right">
|
|
|
- <canvas v-if="drawCanvas" height="100%" :width="canvasWidth" class="instanceMap" :id="form.instanceId" :k="refreshCanvas"></canvas>
|
|
|
- <div class="no-data" v-else>
|
|
|
+ <div class="content-right" id="cadBox" v-loading="loading">
|
|
|
+ <canvas v-show="drawCanvas" :height="cadHeight" :width="cadWidth" id="exampleCanvas" :k="refreshCanvas"></canvas>
|
|
|
+ <div v-show="drawCanvas" class="operate">
|
|
|
+ <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @scale="scale" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
|
|
|
+ </div>
|
|
|
+ <div class="no-data" v-show="!drawCanvas">
|
|
|
<div class="position-icon">
|
|
|
<i class="icon-wushuju iconfont"></i>
|
|
|
数据暂无
|
|
@@ -35,37 +38,178 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import realtimeData from '@/components/screen/integrateresults/realtimeData'
|
|
|
-import exampleList from '@/components/screen/integrateresults/exampleList'
|
|
|
+import { SGraphyView } from "@saga-web/graphy/lib";
|
|
|
+import { LocationPointScene, DivideFloorScene } from "@saga-web/cad-engine";
|
|
|
+import { SColor } from "@saga-web/draw/lib";
|
|
|
+import { queryEquip, floorQuery, queryZone } from '@/api/scan/request';
|
|
|
+//组件
|
|
|
+import realtimeData from '@/components/screen/integrateresults/realtimeData';
|
|
|
+import exampleList from '@/components/screen/integrateresults/exampleList';
|
|
|
+import canvasFun from "@/components/business_space/newGraphy/canvasFun";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
realtimeData,
|
|
|
- exampleList
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters('layout', ['userInfo', 'projectId', 'projects', 'userId'])
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
+ exampleList,
|
|
|
+ canvasFun
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
+ this.cadWidth = document.getElementById('cadBox').offsetWidth;
|
|
|
+ this.cadHeight = document.getElementById('cadBox').offsetHeight;
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- queryParams: this.$route.query
|
|
|
+ queryParams: this.$route.query,
|
|
|
+ loading: false,
|
|
|
+ cadWidth: 800,
|
|
|
+ cadHeight: 600,
|
|
|
+ views: null,//canvas view
|
|
|
+ scenes: null,//canvas scene
|
|
|
+ refreshCanvas: '',//重载canvas组件
|
|
|
+ drawCanvas: false,//是否画canvas,
|
|
|
+ ObjectLocalName: '',//对象名称
|
|
|
+ config: {
|
|
|
+ isEdit: false
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
handleChangeExample(example) {
|
|
|
- console.log(example)
|
|
|
+ //存在实例ID
|
|
|
+ if (example.ObjectID) {
|
|
|
+ this.ObjectLocalName = example.ObjectLocalName;
|
|
|
+ if (example.TypeCode == 'Eq' || example.TypeCode == 'Ec') {//设备或者组件
|
|
|
+ let pa = {
|
|
|
+ Filters: `EquipID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
|
|
|
+ }
|
|
|
+ //获取设备信息
|
|
|
+ queryEquip(pa, equipMsg => {
|
|
|
+ if (equipMsg.Content[0] && equipMsg.Content[0].LocationJson && equipMsg.Content[0].FloorId) {
|
|
|
+ let canvasOption = {
|
|
|
+ /** 标记的id */
|
|
|
+ Id: equipMsg.Content[0].EquipID,
|
|
|
+ /** 标记的名称 */
|
|
|
+ Name: equipMsg.Content[0].EquipName,
|
|
|
+ /** X坐标 */
|
|
|
+ X: equipMsg.Content[0].LocationJson.X,
|
|
|
+ /** Y坐标 */
|
|
|
+ Y: -equipMsg.Content[0].LocationJson.Y
|
|
|
+ }
|
|
|
+ this.loadDataToInstanceByFloorID(equipMsg.Content[0].FloorId, example.TypeCode, canvasOption);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (example.TypeCode == 'Sp') {//空间
|
|
|
+ let pa = {
|
|
|
+ data: {
|
|
|
+ Filters: `RoomID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
|
|
|
+ },
|
|
|
+ zone: example.SubTypeCode
|
|
|
+ }
|
|
|
+ //获取空间信息
|
|
|
+ queryZone(pa, zoneMsg => {
|
|
|
+ if (zoneMsg.Content[0] && zoneMsg.Content[0].Outline) {
|
|
|
+ let canvasOption = {
|
|
|
+ RoomLocalName: zoneMsg.Content[0].RoomLocalName,
|
|
|
+ OutLine: zoneMsg.Content[0].Outline,
|
|
|
+ RoomID: zoneMsg.Content[0].RoomID,
|
|
|
+ Color: new SColor('#F9C3C3')
|
|
|
+ }
|
|
|
+ this.loadDataToInstanceByFloorID(zoneMsg.Content[0].FloorId, example.TypeCode, canvasOption);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //通过floorid获取信息,后通过floormap获取数据后绘制canvas
|
|
|
+ loadDataToInstanceByFloorID(floorId, typecode, options) {
|
|
|
+ let param = {
|
|
|
+ Filters: `FloorId='${floorId}'`
|
|
|
+ }
|
|
|
+ //获取楼层信息
|
|
|
+ floorQuery(param, floorMsg => {
|
|
|
+ //刷新canvas
|
|
|
+ this.refreshCanvas = new Date().getTime();
|
|
|
+ if (!this.views) {
|
|
|
+ this.views = new SGraphyView('exampleCanvas')
|
|
|
+ }
|
|
|
+ this.views.scene = null;
|
|
|
+ this.scenes = null;
|
|
|
+ //类型
|
|
|
+ if (typecode == 'Eq' || typecode == 'Ec') {
|
|
|
+ this.scenes = new LocationPointScene();
|
|
|
+ }
|
|
|
+ else if (typecode == 'Sp') {
|
|
|
+ this.scenes = new DivideFloorScene();
|
|
|
+ }
|
|
|
+ if (floorMsg.Content[0] && floorMsg.Content[0].StructureInfo && floorMsg.Content[0].StructureInfo.FloorMap) {
|
|
|
+ this.loading = true;
|
|
|
+ //获取数据,并加载canvas
|
|
|
+ this.scenes.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMsg.Content[0].StructureInfo.FloorMap}`).then(() => {
|
|
|
+ this.drawCanvas = true;
|
|
|
+ this.loading = false;
|
|
|
+ this.views.scene = this.scenes;
|
|
|
+ this.scenes.isSpaceSelectable = false;
|
|
|
+ if (typecode == 'Eq' || typecode == 'Ec') {
|
|
|
+ this.scenes.addMarker(options);
|
|
|
+ }
|
|
|
+ else if (typecode == 'Sp') {
|
|
|
+ this.scenes.addZone(options);
|
|
|
+ }
|
|
|
+ this.views.fitSceneToView();
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.views.maxScale = this.views.scale * 10;
|
|
|
+ this.views.minScale = this.views.scale;
|
|
|
+ this.$refs.canvasFun.everyScale = this.views.scale;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.loading = false;
|
|
|
+ this.drawCanvas = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // canvas 获取焦点
|
|
|
+ focus() {
|
|
|
+ document.getElementById('cadBox').focus()
|
|
|
+ },
|
|
|
+ // 工具栏操作
|
|
|
+ // 适配底图到窗口
|
|
|
+ fit() {
|
|
|
+ this.views.fitSceneToView()
|
|
|
+ },
|
|
|
+ // 保存为png
|
|
|
+ savePng() {
|
|
|
+ this.views.saveImage(`${this.ObjectLocalName}.png`, 'png');
|
|
|
+ },
|
|
|
+ // 保存为svg
|
|
|
+ saveSvg() {
|
|
|
+ this.views.saveSceneSvg(`${this.ObjectLocalName}.svg`, 6400, 4800);
|
|
|
+ },
|
|
|
+ saveJson() {
|
|
|
+ this.views.saveFloorJson(`${this.ObjectLocalName}.json`)
|
|
|
+ },
|
|
|
+ // 缩放
|
|
|
+ scale(val) {
|
|
|
+ if (!this.views) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let scale = this.views.scale;
|
|
|
+ this.views.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2);
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
$route(to,from){
|
|
|
- this.queryParams = this.$route.query
|
|
|
+ this.queryParams = this.$route.query;
|
|
|
+ this.ObjectLocalName = '';
|
|
|
+ this.drawCanvas = false;
|
|
|
+ },
|
|
|
+ "views.scale": {
|
|
|
+ handler(n) {
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.sliderVal = n * 10 / this.views.minScale;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -111,6 +255,15 @@ $borderColor: rgba(201, 201, 201, 1);
|
|
|
flex-grow: 1;
|
|
|
flex-shrink: 1;
|
|
|
border: 1px solid $borderColor;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .operate {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 20px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
.no-data{
|
|
|
height: 100%;
|
|
|
text-align: center;
|