ibms/src/views/screen/splitscreen/spaceledger/index.vue

<template>
  <div class="box">
    <el-container>
      <el-header>
        <div class="boxName">
          第二屏详情
        </div>
        <div class="spaceName">
          <b>空间名称：</b>{{spaceDetails.RoomLocalName?spaceDetails.RoomLocalName:"-"}}
        </div>
      </el-header>
      <el-container>
        <el-aside width="450px">
          <el-scrollbar>
            <div class="aside-top">
              <div class="aside-top-left">
                <p><b>空间功能区类型:</b>{{spaceDetails.RoomFuncType?spaceDetails.RoomFuncType:"-"}}</p>
                <p><b>备注文字:</b>{{spaceDetails.Intro?spaceDetails.Intro:"-"}}</p>
              </div>
              <div class="aside-top-right">
                <p><b>空间二维码:</b><span v-if="!spaceDetails.RoomQRCode">-</span></p>
                <img :src="'/image-service/common/file_get/'+ spaceDetails.RoomQRCode +'?systemId=dataPlatform'" alt="二维码图片"
                  v-if="spaceDetails.RoomQRCode">
              </div>
            </div>
            <div v-show="spaceDetails.Outline && spaceDetails.Outline[0] && spaceDetails.Outline[0].length" id="graphy" ref="graphy"
              style="width:400px;height:400px;">
              <p><b>位置图片:</b></p>
              <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
            </div>
            <div v-show="spaceDetails.Outline && !spaceDetails.Outline[0] || !spaceDetails.Outline"
              style="height: 400px;transform: translateY(50%);textAlign:center;">
              <i class="icon-wushuju iconfont"></i>
              数据暂无
            </div>
            <div class="space-img" v-if="spaceDetails.Pic">
              <div class="img-box" v-for="(item) in spaceDetails.Pic" :key='`${item.Id}+${item.key}`'>
                <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.key}`" alt="空间图片">
              </div>
            </div>
            <!-- <div class="space-img" v-if="!spaceDetails.Pic">
              <div class="img-box">
                <img src="https://hbimg.huabanimg.com/2787ad434fc2bc819a5d7deda3855d897a99d528ab4a-e3HRgR_fw658" alt="空间图片">
              </div>
              <div class="img-box">
                <img src="https://hbimg.huabanimg.com/5e4e3239dc7eca56eb92ca612d49d824f022b13621d5a-Ga7voM_fw658" alt="空间图片">
              </div>
              <div class="img-box">
                <img src="https://hbimg.huabanimg.com/60e2a25564f6ac13e7e16a19dcc3e194d565776231347-1Cw8dg_fw658" alt="空间图片">
              </div>
              <div class="img-box">
                <img src="https://hbimg.huabanimg.com/2ea712954c75ff1b1e13329e7e4209f0691b88945c73-JCmkXX_fw658" alt="空间图片">
              </div>
            </div> -->
          </el-scrollbar>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeTab" type='card'>
            <template v-for="(item,index) in tabsList">
              <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
                <div v-show="activeTab === 'staticData'" style="width:100%;textAlign:left;" id="iframe-box">
                  <!-- <iframe height="100%" width="100%" :src="iframeSrc" id="screenIframe"></iframe> -->
                </div>
                <div v-show="activeTab === 'dynamicData'" style="width:100%;textAlign:left;">
                  <div class="main" style="height: 790px;">
                    <el-table ref="multipleTable" :data="tableData" stripe height="100%" :header-cell-style="headerStyle">
                      <el-table-column prop="InfoPointName" label="信息点名称">
                        <template slot-scope="scope">
                          <div>
                            <span>{{ scope.row.InfoPointName}}</span>
                            <span class="unit">{{scope.row.Unit?`${"("+scope.row.Unit+")"}`:""}}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="functionNo" label="表号功能号"></el-table-column>
                      <el-table-column prop="functionNoDynamicData" label="动态数据"></el-table-column>
                      <!-- 后台未提供，暂不显示 -->
                      <!-- <el-table-column prop="LastUpdate" label="数据采集时间"></el-table-column> -->
                      <template slot="empty">
                        <div style="height: 60%;transform: translateY(50%);">
                          <i class="icon-wushuju iconfont"></i>
                          数据暂无
                        </div>
                      </template>
                    </el-table>
                  </div>
                </div>
                <div v-show="activeTab === 'objectRelationship'" class="objectRelationship">
                  <div class="objectRelationship-left">
                    <h5>空间内设备：</h5>
                    <eqToSpaceTable :params="params" type="Equipment"></eqToSpaceTable>
                  </div>
                  <div class="objectRelationship-center">
                    <h5>服务于空间的设备：</h5>
                    <eqToSpaceTable :params="params" type="EquipmentFor"></eqToSpaceTable>
                  </div>
                  <div class="objectRelationship-right">
                    <h5>空间内系统：</h5>
                    <syInSpaceTable :params="params" type="generalSystem"></syInSpaceTable>
                  </div>
                </div>
              </el-tab-pane>
            </template>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { queryZone, getAllbusiness, getDataDictionary, floorQuery, buildingQuery, BeatchQueryParam } from '@/api/scan/request'
import eqToSpaceTable from '@/components/business_space/newTables/eqToSpaceTable'
import syInSpaceTable from '@/components/business_space/newTables/syInSpaceTable'
import { DivideFloorScene, SpaceItem, ZoneItem, FloorView } from "@saga-web/cad-engine/lib";
import tools from "@/utils/scan/tools";

export default {
  data() {
    return {
      tabsList: [
        { Code: 'staticData', Name: '静态数据' },
        { Code: 'dynamicData', Name: '动态数据' },
        { Code: 'objectRelationship', Name: '对象关系' }
      ],
      activeTab: 'staticData',
      checked: true,
      spaceDetails: {},
      iframeSrc: '',
      proId: '',
      params: {},
      view: null,
      scene: null,
      canvasWidth: 410,
      canvasHeight: 400,
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      tableData: [],
      headerStyle: {// 列表样式
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      secret: ''
    }
  },
  components: {
    eqToSpaceTable,
    syInSpaceTable
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.RoomID && to.query.zone) {
      next();
    }
  },
  created() {
    if (this.$route.name === "spaceLedger" && this.$route.query.RoomID && this.$route.query.zone) {
      this.getData();
    }
    this.getInFormationPoitnName();
  },
  updated() { },
  computed: {
    ...mapGetters('layout', ['userId', 'projectId'])
  },
  methods: {
    getData() {
      this.params = this.$route.query;
      // 获取空间数据
      let params = {
        data: {
          Filters: `RoomID="${this.$route.query.RoomID}"`
        },
        zone: this.$route.query.zone
      }
      queryZone(params, res => {
        this.spaceDetails = res.Content[0];
        if (this.spaceDetails.Outline && this.spaceDetails.Outline[0] && this.spaceDetails.Outline[0].length) {
          this.getSpaceFloor();
        }
        this.setFrame();
        this.getInFormationPoitnName();
      })
    },
    setFrame() {
      // 设置静态数据tab的iframe地址
      this.proId = localStorage.getItem('projectId');
      this.secret = localStorage.getItem('secret');
      this.iframeSrc = `${process.env.BASE_URL}:8889/#/details?perjectId=${this.proId}&secret=${this.secret}&FmId=${this.$route.query.RoomID}&type=0&code=${this.$route.query.zone}`
      let box = document.getElementById('iframe-box');
      box.innerHTML = '';
      let iframe = document.createElement('iframe');
      iframe.src = this.iframeSrc;
      iframe.style.width = '100%';
      iframe.style.height = '100%';
      box.appendChild(iframe);
    },
    getSpaceFloor() {
      // 获取业务空间楼层
      let params = {
        Filters: `FloorID='${this.spaceDetails.FloorId}'`
      }
      floorQuery(params, res => {
        if (res.Content[0] && res.Content[0].StructureInfo && res.Content[0].StructureInfo.FloorMap) {
          this.FloorMap = res.Content[0].StructureInfo.FloorMap;
          this.getGraphy();
        }
      })
    },
    getGraphy() {// 绘制空间位置图片
      let that = this;
      that.clearGraphy()
      that.scene = new DivideFloorScene();
      that.canvasLoading = true;
      that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
        that.canvasLoading = false;
        if (res == 'error') {
          this.FloorMap = '';
          this.$message.warning('数据解析异常');
          return;
        }
        that.view.scene = that.scene;
        that.view.fitSceneToView();
        let tempArr = {
          RoomLocalName: this.spaceDetails.RoomLocalName,
          OutLine: this.spaceDetails.Outline,
          RoomID: this.spaceDetails.RoomID,
          Color: "#a384fc",
        }
        that.scene.addZoneList([tempArr]);
        this.scene.isSpaceSelectable = false;
      })
    },
    clearGraphy() {
      if (this.view && this.view.scene) {
        this.view.scene = null;
        return
      }
      this.view = new FloorView('floorCanvas')
    },
    getInFormationPoitnName() {// 获取动态数据
      let secret = localStorage.getItem('secret');
      let params = {
        data: {
          Filters: 'InputMode in ["L1","L2","L","M"]',
          Orders: "sort asc",
          PageNumber: 1,
          PageSize: 500
        },
        type: this.$route.query.zone
      }
      let param = {
        secret: secret,
        ProjId: this.projectId,
        data: {
          criterias: []
        }
      }
      getDataDictionary(params, res => {// 获取表号功能号
        this.tableData = res.Content;
        this.tableData.map(item => {
          let cur = tools.dataForKey(this.spaceDetails, item.Path);
          item.functionNo = cur;
          param.data.criterias.push({
            id: this.spaceDetails.RoomID,
            code: item.InfoPointCode
          });
        })
        BeatchQueryParam(param, res => {// 获取动态数据
          res.Content.map((item, index) => {
            tools.setDataForKey(
              this.spaceDetails,
              this.tableData[index].Path,
              this.tableData[index].functionNoDynamicData = item.error ? item.value ? "表号功能号格式错误" : "表号功能号不存在" : "暂未采集到实时数据"
            );
          })
        });
      })
    }
  },
  watch: {
    // 监听路由地址，并判断有RoomID和zone，重新请求空间数据
    "$route"(to, from) {
      if (this.$route.name === "spaceLedger" && this.$route.query.RoomID && this.$route.query.zone) {
        this.getData();
        this.activeTab = 'staticData';
      }
    }
  }
}
</script>

<style lang="less" scoped>
#screenBox .screen-router[data-v-6c06ede0] {
  padding: 0;
}
.el-header {
  padding: 0;
  height: 80px !important;
  .boxName {
    color: #fff;
    font-size: 16px;
    line-height: 50px;
    height: 50px !important;
    padding: 0 10px;
    background-color: #3f4f62;
  }
  .spaceName {
    font-size: 14px;
    line-height: 30px;
    margin: 0 10px;
    border-bottom: 1px solid #e4e7ed;
    box-sizing: border-box;
  }
}
.el-aside {
  color: #333;
  border: 1px solid #e4e7ed;
  margin: 10px 0 0 10px;
  padding: 20px;
  box-sizing: border-box;
  height: calc(100% - 20px);
  overflow: hidden;
  .el-scrollbar {
    height: 100%;
    overflow: hidden !important;
  }
  .aside-top {
    overflow: hidden;
    display: flex;
    .aside-top-left {
      flex: 3;
    }
    .aside-top-right {
      float: right;
      img {
        margin-left: -10px;
        width: 140px;
        height: 140px;
      }
    }
  }
  .space-img {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    .img-box {
      float: left;
      position: relative;
      width: 45%;
      height: 180px;
      margin-right: 20px;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }
    }
  }
}
.el-scrollbar {
  width: 430px;
}
.el-main {
  color: #333;
  text-align: center;
  margin: -10px;
  padding-bottom: 0;
}
.objectRelationship {
  display: flex;
  .objectRelationship-left,
  .objectRelationship-center,
  .objectRelationship-right {
    flex: 1;
    margin-right: 10px;
    text-align: left;
    height: 100%;
  }
}
#pane-staticData {
  height: 750px;
  div {
    height: 100%;
  }
}
.unit {
  color: rgb(167, 167, 167);
}
#floorCanvas {
  position: static;
}
</style>
<style>
.el-scrollbar__wrap {
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
</style>