123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <template>
- <!-- 对象实例 -->
- <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.TypeName || '--'}}
- </el-form-item>
- <el-form-item label="对象实例本地名称:">
- {{form.ObjectLocalName || '--'}}
- </el-form-item>
- <el-form-item label="对象实例本地编码:">
- {{form.ObjectLocalCode || '--'}}
- </el-form-item>
- <el-form-item label="对象实例ID:">
- {{form.ObjectID || '--'}}
- </el-form-item>
- <el-form-item label="信息点名称:">
- {{form.InfomationPointName || '--'}}
- </el-form-item>
- <el-form-item label="对应值:">
- {{ reValue || '--'}}
- </el-form-item>
- <el-form-item label="对象实例位置图:">
- <span v-show="!drawCanvas">--</span>
- <canvas v-show="drawCanvas" height="300px" width="600" class="instanceMap" :id="form.instanceId" :k="refreshCanvas"></canvas>
- </el-form-item>
- </el-form>
- </div>
- </div>
- </template>
- <script>
- import { mapGetters } from 'vuex'
- import { SGraphyView } from "@saga-web/graphy/lib";
- import { LocationPointScene, DivideFloorScene } from "@saga-web/cad-engine"
- import { SColor } from "@saga-web/draw/lib";
- import {
- getTabFunNumObjInstance, getEquipByEqID, getFloorMsgByFloorID, queryZone
- } from '@/api/scan/request'
- export default {
- data() {
- return {
- forms: [],//实例数据
- views: [],//canvas view
- scenes: [],//canvas scene
- loading: true,
- refreshCanvas: '',//重载canvas组件
- drawCanvas: false//是否画canvas
- }
- },
- methods: {
- //加载对象实例
- loadObjectInstance() {
- this.loading = true;
- let pa = {
- Filters: `MeterFuncid='${this.tabFunNum}';Related='true'`//
- };
- let that = this;
- //获取所有实例信息
- getTabFunNumObjInstance(pa, res => {
- that.loading = false;
- that.forms = res.Content;
- res.Content.map((item, key) => {
- //存在实例ID
- if (item.ObjectID) {
- that.forms[key].instanceId = item.ObjectID;
- //设备或者组件
- if (item.TypeCode == 'Eq' || item.TypeCode == 'Ec') {
- let pa = {
- Filters: `EquipID='${item.TypeCode + this.projectId.substring(2) + item.ObjectID}'`
- }
- //获取设备信息
- getEquipByEqID(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, key, item.TypeCode, canvasOption);
- }
- })
- }
- //空间
- else if (item.TypeCode == 'Sp') {
- let pa = {
- data: {
- Filters: `RoomID='${item.TypeCode + this.projectId.substring(2) + item.ObjectID}'`
- },
- zone: item.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, key, item.TypeCode, canvasOption);
- }
- });
- }
- }
- });
- })
- },
- //通过floorid获取信息,后通过floormap获取数据后绘制canvas
- loadDataToInstanceByFloorID(floorId, key, typecode, options) {
- let param = {
- Filters: `FloorId='${floorId}'`
- }
- let that = this;
- //获取楼层信息
- getFloorMsgByFloorID(param, floorMsg => {
- //刷新canvas
- that.refreshCanvas = new Date().getTime();
- if (!that.views[key]) {
- that.views[key] = new SGraphyView(`${that.forms[key].instanceId}`)
- }
- that.views[key].scene = null;
- that.scenes[key] = null;
- //类型
- if (typecode == 'Eq' || typecode == 'Ec') {
- that.scenes[key] = new LocationPointScene();
- }
- else if (typecode == 'Sp') {
- that.scenes[key] = new DivideFloorScene();
- }
- if (floorMsg.Content[0].StructureInfo && floorMsg.Content[0].StructureInfo.FloorMap) {
- //获取数据,并加载canvas
- that.scenes[key].loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMsg.Content[0].StructureInfo.FloorMap}`).then(() => {
- that.drawCanvas = true;
- that.views[key].scene = that.scenes[key];
- that.scenes[key].isSpaceSelectable = false;
- if (typecode == 'Eq' || typecode == 'Ec') {
- that.scenes[key].addMarker(options);
- }
- else if (typecode == 'Sp') {
- that.scenes[key].addZone(options);
- }
- that.views[key].fitSceneToView();
- })
- }
- });
- }
- },
- mounted() {
- this.loadObjectInstance();
- },
- props: {
- tabFunNum: String,//表号功能号,
- reValue: String//对应值
- },
- computed: {
- ...mapGetters('layout', ['projectId'])
- },
- watch: {
- //切换时更新数据
- tabFunNum() {
- this.loadObjectInstance();
- }
- }
- }
- </script>
- <style lang="less" scoped>
- #objectInstance {
- height: 100%;
- overflow: auto;
- }
- .instanceMap {
- min-height: 100px;
- }
- .obj-item {
- margin: 15px 10px;
- box-shadow: 2px 2px 2px 2px #aaa;
- background-color: white;
- padding: 10px 10px;
- height: 600px;
- }
- </style>
|