adm/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 { LocationPointScene, DivideFloorScene, FloorView } from "@saga-web/cad-engine"
import { SColor } from "@saga-web/draw/lib";

import {
  getTabFunNumObjInstance,
  // floorQuery, //数据中心查询楼层
  projectQuery, //数据中心查询项目信息
  zoneQueryOutline, //数据中心所有空间实例
  queryLinkSys, //数据中心系统查询
  queryTenant, //数据中心查询租户
  partsQuery, //数据中心部件查询
} from '@/api/scan/request'
import { floorQuery } from '@/api/object/floor'
import { queryEquip } from "@/api/object/equip";
import { getDataDictionary } from "@/api/dict";
import { buildingQuery } from '@/api/object/build'

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') {
              //获取设备信息
              queryEquip({
                filters: `equipID='${item.TypeCode + item.ProjectId + item.ObjectID}'`
              }, equipMsg => {
                if (equipMsg.content[0]) {
                  if (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
                    }
                    that.forms[key].ObjectLocalName = equipMsg.content[0].equipLocalName
                    that.forms[key].ObjectLocalCode = equipMsg.content[0].equipLocalID
                    this.loadDataToInstanceByFloorID(equipMsg.content[0].floorId, key, item.TypeCode, canvasOption);
                  }
                  if (item.InfoList.length && equipMsg.content[0].classCode) {
                    let params = {
                      filters: `code in ${JSON.stringify(item.InfoList)}`,
                      type: equipMsg.content[0].classCode
                    }
                    getDataDictionary(params, resp => {
                      that.forms[key].InfomationPointName = resp.content.map(t => t.name).join(',');
                      that.$forceUpdate()
                    })
                  }
                }
              })
            } else if (item.TypeCode == 'Sp') {
              //获取空间信息
              if (item.SpaceType) {
                zoneQueryOutline({
                  Filters: `RoomID='${item.TypeCode + item.ProjectId + item.ObjectID}'`,
                  ZoneType: item.SpaceType
                }, zoneMsg => {
                  if (zoneMsg.Content[0]) {
                    if (zoneMsg.Content[0].Outline) {
                      let canvasOption = {
                        RoomLocalName: zoneMsg.Content[0].RoomLocalName,
                        OutLine: zoneMsg.Content[0].Outline,
                        RoomID: zoneMsg.Content[0].RoomID,
                        Color: '#F9C3C3'
                      }
                      that.forms[key].ObjectLocalName = zoneMsg.Content[0].RoomLocalName
                      that.forms[key].ObjectLocalCode = zoneMsg.Content[0].RoomLocalID
                      this.loadDataToInstanceByFloorID(zoneMsg.Content[0].FloorId, key, item.TypeCode, canvasOption);
                    }
                    if (item.InfoList.length && zoneMsg.Content[0].ObjectType) {
                      let params = {
                        filters: `code in ${JSON.stringify(item.InfoList)}`,
                        type: zoneMsg.Content[0].ObjectType
                      }
                      getDataDictionary(params, resp => {
                        that.forms[key].InfomationPointName = resp.content.map(t => t.name || '').join(',');
                        that.$forceUpdate()
                      })
                    }
                  }
                });
              }
            } else if (item.TypeCode == 'Ec') {
              partsQuery({
                Filters: `EquipID='${item.TypeCode + item.ProjectId + item.ObjectID}'`
              }, equipMsg => {
                if (equipMsg.Content[0]) {
                  if (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
                    }
                    that.forms[key].ObjectLocalName = equipMsg.Content[0].EquipLocalName
                    that.forms[key].ObjectLocalCode = equipMsg.Content[0].EquipLocalID
                    this.loadDataToInstanceByFloorID(equipMsg.Content[0].FloorId, key, item.TypeCode, canvasOption);
                  }
                  if (item.InfoList.length && equipMsg.Content[0].Category) {
                    let params = {
                      filters: `code in ${JSON.stringify(item.InfoList)}`,
                      type: equipMsg.Content[0].Category
                    }
                    getDataDictionary(params, resp => {
                      that.forms[key].InfomationPointName = resp.content.map(t => t.name || '').join(',');
                      that.$forceUpdate()
                    })
                  }
                }
              })
            } else if (item.TypeCode == 'Sy') {
              queryLinkSys({
                filters: `id='${item.TypeCode + item.ProjectId + item.ObjectID}'`
              }, res => {
                if (res.content.length) {
                  that.forms[key].ObjectLocalName = res.content[0].localName
                  that.forms[key].ObjectLocalCode = res.content[0].localId
                  if (item.InfoList.length && res.content[0].classCode) {
                    let params = {
                      filters: `code in ${JSON.stringify(item.InfoList)}`,
                      type: res.content[0].classCode
                    }
                    getDataDictionary(params, resp => {
                      that.forms[key].InfomationPointName = resp.content.map(t => t.name || '').join(',');
                      that.$forceUpdate()
                    })
                  }
                }
              })
            } else if (item.TypeCode == 'Bd') {
              buildingQuery({
                filters: `id='${item.TypeCode + item.ProjectId + item.ObjectID}'`
              }, res => {
                if (res.content.length) {
                  that.forms[key].ObjectLocalName = res.content[0].localName
                  that.forms[key].ObjectLocalCode = res.content[0].localId
                  if (item.InfoList.length && res.content[0].objectType) {
                    let params = {
                      filters: `code in ${JSON.stringify(item.InfoList)}`,
                      type: res.content[0].objectType
                    }
                    getDataDictionary(params, resp => {
                      that.forms[key].InfomationPointName = resp.content.map(t => t.name || '').join(',');
                      that.$forceUpdate()
                    })
                  }
                }
              })
            } else if (item.TypeCode == 'Fl') {
              floorQuery({
                filters: `id='${item.TypeCode + item.ProjectId + item.ObjectID}'`
              }, res => {
                if (res.content.length) {
                  that.forms[key].ObjectLocalName = res.content[0].localName
                  that.forms[key].ObjectLocalCode = res.content[0].localId
                  if (item.InfoList.length && res.content[0].objectType) {
                    let params = {
                      filters: `code in ${JSON.stringify(item.InfoList)}`,
                      type: res.content[0].objectType
                    }
                    getDataDictionary(params, resp => {
                      that.forms[key].InfomationPointName = resp.content.map(t => t.name || '').join(',');
                      that.$forceUpdate()
                    })
                  }
                }
              })
            } else if (item.TypeCode == 'VOTn') {
              queryTenant({
                Filters: `TenantID='${item.TypeCode + item.ProjectId + item.ObjectID}'`
              }, res => {
                if (res.Content.length) {
                  that.forms[key].ObjectLocalName = res.Content[0].TenantLocalName
                  that.forms[key].ObjectLocalCode = res.Content[0].TenantLocalID
                  if (item.InfoList.length && res.Content[0].ObjectType) {
                    let params = {
                      filters: `code in ${JSON.stringify(item.InfoList)}`,
                      type: res.Content[0].ObjectType
                    }
                    getDataDictionary(params, resp => {
                      that.forms[key].InfomationPointName = resp.content.map(t => t.name || '').join(',');
                      that.$forceUpdate()
                    })
                  }
                }
              })
            } else if (item.TypeCode == 'Pj') {
              projectQuery({
                Filters: `ProjID='${item.TypeCode + item.ProjectId + item.ObjectID}'`
              }, res => {
                if (res.Content.length) {
                  that.forms[key].ObjectLocalName = res.Content[0].ProjLocalName
                  that.forms[key].ObjectLocalCode = res.Content[0].ProjLocalID
                  if (item.InfoList.length && res.Content[0].ObjectType) {
                    let params = {
                      filters: `code in ${JSON.stringify(item.InfoList)}`,
                      type: res.Content[0].ObjectType
                    }
                    getDataDictionary(params, resp => {
                      that.forms[key].InfomationPointName = resp.content.map(t => t.name || '').join(',');
                      that.$forceUpdate()
                    })
                  }
                }
              })
            }
          }
        });
      })
    },
    //通过floorid获取信息，后通过floormap获取数据后绘制canvas
    loadDataToInstanceByFloorID(floorId, key, typecode, options) {
      let param = {
        filters: `floorId='${floorId}'`
      }
      let that = this;
      //获取楼层信息
      floorQuery(param, floorMsg => {
        //刷新canvas
        that.refreshCanvas = new Date().getTime();
        if (!that.views[key]) {
          that.views[key] = new FloorView(`${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>