ibms/src/components/point/report/objectInstance.vue

<template>
  <!-- 对象实例 -->
  <div id="objectInstance" v-loading="loading">
    <div class="obj-item" v-for="form in forms" :key="form.id" :style="{height:drawCanvas? '600px' : '350px'}">
      <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>
          <div v-show="drawCanvas" style="border:1px solid rgba(0, 0, 0, 0.2);height:300px;">
            <canvas v-show="drawCanvas" height="300" :width="canvasWidth" class="instanceMap" :id="form.instanceId" :k="refreshCanvas"></canvas>
          </div>
        </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,
      canvasWidth:450
    }
  },
  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] && 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();
          })
        }
        else{
          that.drawCanvas = false;
        }
      });
    }
  },
  mounted() {
    this.canvasWidth = document.getElementById("objectInstance").offsetWidth - 200
    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: 0px 4px 10px 0px rgba(0,0,0,0.2);
  background-color: white;
  padding: 10px 10px;
  height: 600px;
}
</style>