|
@@ -1,33 +1,33 @@
|
|
<template>
|
|
<template>
|
|
- <!-- 对象实例 -->
|
|
|
|
- <div id="objectInstance">
|
|
|
|
- <div ref="test1"></div>
|
|
|
|
- <div class="obj-item" v-for="form in forms" :key="form.id">
|
|
|
|
- <el-form :model="form" label-width="150px">
|
|
|
|
- <el-form-item label="对象类型:">
|
|
|
|
- {{form.TypeCode}}
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="对象实例本地名称:">
|
|
|
|
- {{form.ObjectLocalName}}
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="对象实例本地编码:">
|
|
|
|
- {{form.EquipmentMark}}
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="对象实例ID:">
|
|
|
|
- {{form.ObjectID}}
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="信息点名称:">
|
|
|
|
- {{form.EquipLocalName}}
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="对应值:">
|
|
|
|
- {{form.InfomationPointCode}}
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="对象实例位置图:">
|
|
|
|
- <canvas height="200" width="100" class="instanceMap" :id="form.instanceId"></canvas>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <!-- 对象实例 -->
|
|
|
|
+ <div id="objectInstance" v-loading="loading">
|
|
|
|
+ <div ref="test1"></div>
|
|
|
|
+ <div class="obj-item" v-for="form in forms" :key="form.id">
|
|
|
|
+ <el-form :model="form" label-width="150px">
|
|
|
|
+ <el-form-item label="对象类型:">
|
|
|
|
+ {{form.TypeCode}}
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="对象实例本地名称:">
|
|
|
|
+ {{form.ObjectLocalName}}
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="对象实例本地编码:">
|
|
|
|
+ {{form.EquipmentMark}}
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="对象实例ID:">
|
|
|
|
+ {{form.ObjectID}}
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="信息点名称:">
|
|
|
|
+ {{form.EquipLocalName}}
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="对应值:">
|
|
|
|
+ {{form.InfomationPointCode}}
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="对象实例位置图:">
|
|
|
|
+ <canvas height="200" width="100" class="instanceMap" :id="form.instanceId" v-loading="form.loading"></canvas>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
</div>
|
|
</div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -35,102 +35,134 @@ import { mapGetters, mapActions } from 'vuex'
|
|
|
|
|
|
import { SGraphyView } from "@sybotan-web/graphy/lib";
|
|
import { SGraphyView } from "@sybotan-web/graphy/lib";
|
|
import { DivideFloorScene, } from "cad-engine"
|
|
import { DivideFloorScene, } from "cad-engine"
|
|
|
|
+import { SColor, SPoint } from "@sybotan-web/draw/lib";
|
|
|
|
|
|
import {
|
|
import {
|
|
- getTabFunNumObjInstance
|
|
|
|
|
|
+ getTabFunNumObjInstance
|
|
} from '@/api/point/request'
|
|
} from '@/api/point/request'
|
|
export default {
|
|
export default {
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- forms: [
|
|
|
|
- // {
|
|
|
|
- // id: '1', ID
|
|
|
|
- // objType: 'type1' , 对象类型
|
|
|
|
- // localName: 'name1', 对象实例本地名称
|
|
|
|
- // localNum: 'num1', 对象实例本地编码
|
|
|
|
- // instanceId: 'id1', 对象实例ID
|
|
|
|
- // mesPointName: 'name1', 信息点名称
|
|
|
|
- // mesPointVal: 'value1', 对应值
|
|
|
|
- // instanceMap: 'm' 对象实例位置图
|
|
|
|
- // }
|
|
|
|
- ],
|
|
|
|
- views: [],
|
|
|
|
- scenes: [],
|
|
|
|
- canvasLoadings: []
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- //加载对象实例
|
|
|
|
- loadObjectInstance() {
|
|
|
|
- let pa = {
|
|
|
|
- Filters: "MeterFuncid='" + this.tabFunNum + "'"
|
|
|
|
- };
|
|
|
|
- getTabFunNumObjInstance(pa, res => {
|
|
|
|
- this.forms = res.Content;
|
|
|
|
-
|
|
|
|
- //加载canvas
|
|
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ forms: [
|
|
|
|
+ // {
|
|
|
|
+ // id: '1', ID
|
|
|
|
+ // objType: 'type1' , 对象类型
|
|
|
|
+ // localName: 'name1', 对象实例本地名称
|
|
|
|
+ // localNum: 'num1', 对象实例本地编码
|
|
|
|
+ // instanceId: 'id1', 对象实例ID
|
|
|
|
+ // mesPointName: 'name1', 信息点名称
|
|
|
|
+ // mesPointVal: 'value1', 对应值
|
|
|
|
+ // instanceMap: 'm' 对象实例位置图
|
|
|
|
+ // }
|
|
|
|
+ ],
|
|
|
|
+ views: [],
|
|
|
|
+ scenes: [],
|
|
|
|
+ loading: true,
|
|
|
|
+ BSPRelaISPLists: [[]]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //加载对象实例
|
|
|
|
+ loadObjectInstance() {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ let pa = {
|
|
|
|
+ Filters: "MeterFuncid='" + this.tabFunNum + "'"
|
|
|
|
+ };
|
|
|
|
|
|
- // this.forms.map(item => {
|
|
|
|
- // let that = this;
|
|
|
|
- // that.clearGraphy()
|
|
|
|
- // that.views.map(it => {
|
|
|
|
- // it
|
|
|
|
- // })
|
|
|
|
- // that.view = new SGraphyView('floorCanvas')
|
|
|
|
- // that.scene = new DivideFloorScene();
|
|
|
|
- // that.canvasLoading = true;
|
|
|
|
- // let instance = document.getElementById(item.instanceId);
|
|
|
|
|
|
+ let that = this;
|
|
|
|
+ getTabFunNumObjInstance(pa, res => {
|
|
|
|
+ that.loading = false;
|
|
|
|
+ that.forms = res.Content;
|
|
|
|
+ that.clearGraphy()
|
|
|
|
+ //加载canvas
|
|
|
|
+ that.forms.map((key, item) => {
|
|
|
|
+ that.views[key] = new SGraphyView('floorCanvas')
|
|
|
|
+ that.scenes[key] = new DivideFloorScene();
|
|
|
|
+ that.forms[key].loading = true;
|
|
|
|
|
|
- // let ctx = instance.getContext('2d');
|
|
|
|
- // cxt.moveTo(10,10);
|
|
|
|
- // cxt.lineTo(150,50);
|
|
|
|
- // cxt.lineTo(10,50);
|
|
|
|
- // cxt.stroke();
|
|
|
|
- // });
|
|
|
|
|
|
+ that.scenes[key].loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(() => {
|
|
|
|
+ that.forms[key].loading = false;
|
|
|
|
+ that.views[key].scene = that.scenes[key];
|
|
|
|
+ let tempArr = that.BSPRelaISPLists[key].map((t, i) => {
|
|
|
|
+ return {
|
|
|
|
+ RoomLocalName: t.RoomLocalName,
|
|
|
|
+ OutLine: t.Outline,
|
|
|
|
+ RoomID: t.RoomID,
|
|
|
|
+ Color: new SColor(colorArr[i % colorArr.length]),
|
|
|
|
+ }
|
|
})
|
|
})
|
|
- },
|
|
|
|
- //清楚画布
|
|
|
|
- clearGraphy(){
|
|
|
|
- if (this.view) {
|
|
|
|
- this.views = [];
|
|
|
|
- this.scenes = this.scenes.map(item => {
|
|
|
|
- item.root.children = null;
|
|
|
|
- return item;
|
|
|
|
- })
|
|
|
|
- this.scenes = [];
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.loadObjectInstance();
|
|
|
|
|
|
+ that.scenes[key].addZoneList(tempArr);
|
|
|
|
+ that.scenes[key].click(that, that.canvasClick)
|
|
|
|
+ that.views[key].fitSceneToView();
|
|
|
|
+ that.views[key].maxScale = that.views[key].scale * 10;
|
|
|
|
+ that.views[key].minScale = that.views[key].scale;
|
|
|
|
+ // that.$refs.canvasFun.everyScale = that.views[key].scale;
|
|
|
|
+ })
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ })
|
|
},
|
|
},
|
|
- props: {
|
|
|
|
- tabFunNum: String//表号功能号
|
|
|
|
|
|
+ //清楚画布
|
|
|
|
+ clearGraphy() {
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.views = [];
|
|
|
|
+ this.scenes = this.scenes.map(item => {
|
|
|
|
+ item.root.children = null;
|
|
|
|
+ return item;
|
|
|
|
+ })
|
|
|
|
+ this.scenes = [];
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- computed:{
|
|
|
|
- ...mapGetters('layout', ['projectId', 'userId'])
|
|
|
|
|
|
+ // canvas点击事件
|
|
|
|
+ canvasClick(item, event) {
|
|
|
|
+ // this.scene.setSpaceSelectable(true);
|
|
|
|
+ // this.scene.setZoneSelectable(true);
|
|
|
|
+ // if (this.type == 4) {
|
|
|
|
+
|
|
|
|
+ // } else {
|
|
|
|
+ // if (item instanceof SpaceItem) {
|
|
|
|
+ // this.type = 3;
|
|
|
|
+ // this.curZoneItem = {};
|
|
|
|
+ // this.scene.setZoneSelectable(false);
|
|
|
|
+ // }
|
|
|
|
+ // if (item instanceof ZoneItem) {
|
|
|
|
+ // this.type = 2;
|
|
|
|
+ // this.curZoneItem = item;
|
|
|
|
+ // this.scene.setSpaceSelectable(false);
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- //切换时更新数据
|
|
|
|
- tabFunNum() {
|
|
|
|
- this.loadObjectInstance();
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.loadObjectInstance();
|
|
|
|
+ },
|
|
|
|
+ props: {
|
|
|
|
+ tabFunNum: String//表号功能号
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters('layout', ['projectId', 'userId'])
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ //切换时更新数据
|
|
|
|
+ tabFunNum() {
|
|
|
|
+ this.loadObjectInstance();
|
|
}
|
|
}
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
-#objectInstance{
|
|
|
|
- height:100%;
|
|
|
|
- overflow:auto;
|
|
|
|
|
|
+#objectInstance {
|
|
|
|
+ height: 100%;
|
|
|
|
+ overflow: auto;
|
|
}
|
|
}
|
|
-.instanceMap{
|
|
|
|
- min-height:100px;
|
|
|
|
|
|
+.instanceMap {
|
|
|
|
+ min-height: 100px;
|
|
}
|
|
}
|
|
-.obj-item{
|
|
|
|
- margin: 15px 10px;
|
|
|
|
- box-shadow: 2px 2px 2px 2px #aaa;
|
|
|
|
- background-color: white;
|
|
|
|
- padding: 10px 10px;
|
|
|
|
|
|
+.obj-item {
|
|
|
|
+ margin: 15px 10px;
|
|
|
|
+ box-shadow: 2px 2px 2px 2px #aaa;
|
|
|
|
+ background-color: white;
|
|
|
|
+ padding: 10px 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|