|
@@ -0,0 +1,428 @@
|
|
|
+
|
|
|
+<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;" v-loading="canvasLoading">
|
|
|
+ <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 style="height:100%">
|
|
|
+ <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%;height: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%;height:100%;">
|
|
|
+ <div class="content-box" style="height:100%;">
|
|
|
+ <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-if="activeTab === 'objectRelationship'" class="objectRelationship" style="height:100%">
|
|
|
+ <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: '',
|
|
|
+ canvasLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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];
|
|
|
+ console.log(this.spaceDetails,333)
|
|
|
+ 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();
|
|
|
+ this.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: 20px 20px 0 0;
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-scrollbar {
|
|
|
+ width: 430px;
|
|
|
+}
|
|
|
+.el-main {
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ margin: -10px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%
|
|
|
+}
|
|
|
+.el-tabs.el-tabs--card.el-tabs--top{
|
|
|
+ height: 100% !important;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.objectRelationship {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .objectRelationship-left,
|
|
|
+ .objectRelationship-center,
|
|
|
+ .objectRelationship-right {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ text-align: left;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+#pane-dynamicData{
|
|
|
+ height: calc(100% - 10px);
|
|
|
+}
|
|
|
+.el-tab-pane{
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.el-tabs__content{
|
|
|
+ height: calc(100% - 47px) !important;
|
|
|
+}
|
|
|
+</style>
|