Explorar o código

业务空间展示

haojianlong %!s(int64=4) %!d(string=hai) anos
pai
achega
68d517f4b1
Modificáronse 3 ficheiros con 416 adicións e 309 borrados
  1. 3 3
      package.json
  2. 79 53
      src/views/maintain/space/components/spaceGraph.vue
  3. 334 253
      src/views/maintain/space/index.vue

+ 3 - 3
package.json

@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/draw": "2.2.10",
-    "@persagy-web/graph": "2.2.40",
-    "@persagy-web/big": "2.2.43",
+    "@persagy-web/draw": "2.2.12",
+    "@persagy-web/graph": "2.2.43",
+    "@persagy-web/big": "2.2.46",
     "@babel/runtime": "^7.12.5",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",

+ 79 - 53
src/views/maintain/space/components/spaceGraph.vue

@@ -1,58 +1,66 @@
 <template>
     <div id="graphContainer" ref="graphContainer">
-        <el-row class="buttons-box">
-            <div>
-                <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
-                    width="180px" @select="handleSelect">
-                    <i class="el-icon-search el-input__icon" slot="suffix"></i>
-                    <template slot-scope="{ item }">
-                        <div class="name" style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
-                            :title="item.data.RoomLocalName">
-                            {{ item.data.RoomLocalName }}
-                            <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
-                        </div>
-                    </template>
-                </el-autocomplete>
-            </div>
-            <div class="button-group">
-                <!-- 默认操作模式 -->
-                <div v-show="type==1">
-                    <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
-                        创建业务空间
-                        <el-dropdown-menu slot="dropdown">
-                            <!-- <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item> -->
-                            <el-dropdown-item command="createWall">创建墙体</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                    <!-- 点击已经关联的业务空间 -->
-                    <el-button plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
-                    <el-button plain :disabled="zoneDisable" style="margin-left:10px;">维护空间信息</el-button>
-                    <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
+        <div v-show="floorKey" v-loading="canvasLoading">
+            <el-row class="buttons-box">
+                <div>
+                    <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch"
+                        placeholder="输入平面图中已有的业务空间名称进行查找" width="180px" @select="handleSelect">
+                        <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                        <template slot-scope="{ item }">
+                            <div class="name"
+                                style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
+                                :title="item.data.RoomLocalName">
+                                {{ item.data.RoomLocalName }}
+                                <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
+                            </div>
+                        </template>
+                    </el-autocomplete>
                 </div>
-                <!-- 点击未关联的业务空间 -->
-                <div v-show="type==3">
-                    <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
-                    <el-button plain @click="cancelGraphy">取 消</el-button>
+                <div class="button-group">
+                    <!-- 默认操作模式 -->
+                    <div v-show="type==1">
+                        <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
+                            创建业务空间
+                            <el-dropdown-menu slot="dropdown">
+                                <!-- <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item> -->
+                                <el-dropdown-item command="createWall">创建墙体</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                        <!-- 点击已经关联的业务空间 -->
+                        <el-button plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
+                        <el-button plain :disabled="zoneDisable" style="margin-left:10px;">维护空间信息</el-button>
+                        <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
+                    </div>
+                    <!-- 点击未关联的业务空间 -->
+                    <div v-show="type==3">
+                        <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
+                        <el-button plain @click="cancelGraphy">取 消</el-button>
+                    </div>
+                    <!-- 重新划分业务空间 -->
+                    <div v-show="type==4">
+                        <el-button plain @click="cancelGraphy">取 消</el-button>
+                        <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
+                    </div>
+                    <!-- 批量创建所选业务空间 -->
+                    <div v-show="type==5">
+                        <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
+                        <el-button plain @click="cancelGraphy">取 消</el-button>
+                    </div>
                 </div>
-                <!-- 重新划分业务空间 -->
-                <div v-show="type==4">
-                    <el-button plain @click="cancelGraphy">取 消</el-button>
-                    <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
-                </div>
-                <!-- 批量创建所选业务空间 -->
-                <div v-show="type==5">
-                    <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
-                    <el-button plain @click="cancelGraphy">取 消</el-button>
-                </div>
-            </div>
-        </el-row>
+            </el-row>
 
-        <canvas id="spaceCanvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
+            <canvas id="spaceCanvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
 
-        <el-row class="canvas-actions-box">
-            <canvas-fun :config="config" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" ref="canvasFun"
-                @saveJson="saveJson" @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" />
-        </el-row>
+            <el-row class="canvas-actions-box">
+                <canvas-fun :config="config" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide"
+                    ref="canvasFun" @saveJson="saveJson" @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" />
+            </el-row>
+        </div>
+        <div v-show="!floorKey">
+            <p style="text-align:center;margin-top:199px;">
+                暂无数据
+            </p>
+        </div>
     </div>
 </template>
 <script lang="ts">
@@ -69,8 +77,7 @@ export default class spaceGraph extends Vue {
     canvasHeight = 800;
     view: FloorView | null = null;
     scene: FloorScene | null = null;
-    floorMap =
-        "/image-service/common/file_get?systemId=revit&key=base/76233a3214dd11eb94d469663ce1649a.jsonz";
+    mapBaseUrl = "/image-service/common/file_get?systemId=revit&key=";
     canvasLoading = false;
     type = 1;
     config = {
@@ -83,12 +90,30 @@ export default class spaceGraph extends Vue {
     curZoneItem = {};
     zoneList = [];
     buildFloor: string[] = [];
+    floor = {}; // 当前楼层对象
+    floorKey = ""; // 当前楼层底图请求完整url
     // 挂载
     mounted(): void {
         this.canvasWidth = this.$refs.graphContainer.offsetWidth;
         this.canvasHeight = this.$refs.graphContainer.offsetHeight;
         this.getGraph();
     }
+    // 父组件调用查询楼层底图
+    getData(floor) {
+        this.canvasLoading = true;
+        if (floor.infos && floor.infos.floorMap) {
+            this.floor = floor;
+            this.floorKey = this.mapBaseUrl + floor.infos.floorMap;
+            this.getGraph();
+        } else {
+            this.noMap();
+        }
+    }
+    // 无底图时操作
+    noMap() {
+        this.floorKey = "";
+        this.canvasLoading = false;
+    }
     // 初始化
     init(initType: number): void {
         this.type = 1;
@@ -132,7 +157,7 @@ export default class spaceGraph extends Vue {
         this.canvasLoading = true;
         this.clearGraphy();
         this.scene = null;
-        scene.loadUrl(this.floorMap).then((res) => {
+        scene.loadUrl(this.floorKey).then((res) => {
             if (this.view) {
                 this.view.scene = scene;
             }
@@ -144,7 +169,7 @@ export default class spaceGraph extends Vue {
     getGraphSuc(res: any): void {
         this.canvasLoading = false;
         if (res == "error") {
-            this.floorMap = "";
+            this.noMap();
             this.$message.warning("数据解析异常");
             return;
         }
@@ -159,6 +184,7 @@ export default class spaceGraph extends Vue {
         if (this.scene) {
             this.scene.changeSelect = this.changeSelect;
         }
+        this.canvasLoading = false;
     }
     // 清除canvas
     clearGraphy() {

+ 334 - 253
src/views/maintain/space/index.vue

@@ -1,39 +1,34 @@
 <template>
     <div class="space-index">
-        <statistics :statistics-msg="statisticsMsg"/>
+        <statistics :statistics-msg="statisticsMsg" />
         <el-divider class="small-divider"></el-divider>
         <div class="tabs">
-            <el-tabs v-model="activeName" type="card">
+            <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
                 <el-tab-pane label="列表" name="table"></el-tab-pane>
                 <el-tab-pane label="平面图" name="picture"></el-tab-pane>
             </el-tabs>
             <div class="tab-content">
-                <div class="search">
-                    <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options"
-                                 v-model="building"
-                                 filterable size="small" @change="changeCascader"
-                                 style="margin-right: 12px"></el-cascader>
-                    <el-cascader v-model="value2" :options="options2" @change="handleChange" placeholder="请选择分区"
-                                 class="item"
-                                 v-if="activeName==='picture'"></el-cascader>
-                    <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'"/>
+                <div class="search" :class="{ 'borderBottom': activeName==='picture' }">
+                    <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options" v-model="building" filterable size="small"
+                        @change="changeCascader" style="margin-right: 12px"></el-cascader>
+                    <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="handleChange" placeholder="请选择分区" class="item"
+                        v-if="activeName==='picture'"></el-cascader>
+                    <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
                 </div>
-                <div v-if="activeName==='table'" v-loading="loading" style="height: calc(100% - 100px);">
+                <div v-if="activeName==='table'" v-loading="loading" style="height: calc(100% - 100px);padding: 0 12px">
                     <template style="height: 100%;" v-if="building.length > 0">
-                        <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage"
-                                       :tableData="tableData"/>
-                        <Pagination v-if="tableData.length > 0" :paginationList="paginationList"
-                                    @handleCurrentChange="handleCurrentChange"
-                                    @handleSizeChange="handleSizeChange"/>
+                        <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage" :tableData="tableData" />
+                        <Pagination v-if="tableData.length > 0" :paginationList="paginationList" @handleCurrentChange="handleCurrentChange"
+                            @handleSizeChange="handleSizeChange" />
                     </template>
                     <div v-else class="void align">
-                        <svg-icon name="void" :width="String(120)" :height="String(123)"/>
+                        <svg-icon name="void" :width="String(120)" :height="String(123)" />
                         <p class="void-title">暂无内容</p>
                         <p class="void-tips">可点击左上角选择设备类型</p>
                     </div>
                 </div>
                 <div class="graph" v-if="activeName==='picture'">
-                    <spaceGraph/>
+                    <spaceGraph ref="spaceGraph" />
                 </div>
             </div>
         </div>
@@ -42,111 +37,157 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { AdmMultiTable, AdmSearch, Pagination, Statistics } from "../components/index";
+import {
+    AdmMultiTable,
+    AdmSearch,
+    Pagination,
+    Statistics,
+} from "../components/index";
 import spaceGraph from "./components/spaceGraph.vue";
-import { buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone } from "@/api/datacenter";
+import {
+    buildingQuery,
+    dictQuery,
+    floorQuery,
+    queryCountSpace,
+    queryZone,
+} from "@/api/datacenter";
 import tools from "@/utils/maintain";
 import { BeatchQueryParam } from "@/api/equipComponent";
 import { UserModule } from "@/store/modules/user";
-import it from "element-ui/src/locale/lang/it";
 
 @Component({
     name: "space-index",
-    components: { Statistics, AdmSearch, AdmMultiTable, spaceGraph, Pagination },
+    components: {
+        Statistics,
+        AdmSearch,
+        AdmMultiTable,
+        spaceGraph,
+        Pagination,
+    },
 })
-
 export default class spaceIndex extends Vue {
     // loading
-    loading = false
+    loading = false;
     private statisticsMsg = {
         title: "全部空间",
         total: 93640,
     };
-    currentHeader = '租赁系统'
+    currentHeader = "租赁系统";
     activeName = "table";
-    building = ['all'];
+    building = ["all"];
 
-    value2 = [];
+    zoneTypeVal = ['FunctionZone'];
     // 分页
     private paginationList = {
         page: 1,
         size: 50,
         sizes: [10, 30, 50, 100, 150, 200],
-        total: 0
-    }
+        total: 0,
+    };
     options = [];
-    options2 = []
+    zoneTypeOption = [
+        {
+            value: "FunctionZone",
+            label: "功能分区",
+        },
+        {
+            value: "Zone",
+            label: "业务分区",
+            children: [
+                {
+                    value: "FireZone",
+                    label: "防火分区",
+                },
+                {
+                    value: "PowerSupplyZone",
+                    label: "供电分区",
+                },
+            ],
+        },
+    ];
+
     // 信息点集合(表头)
-    all = []
-    codeToDataSource = {}
-    tableData = []
+    all = [];
+    codeToDataSource = {};
+    tableData = [];
     // 表头阶段信息结合
-    headersStage = {}
+    headersStage = {};
     // 搜索框字段
-    inputSearch = ''
-
+    inputSearch = "";
+    // 楼层映射
+    floorToMap = {};
+    //
     // 项目id
     private get projectId(): string {
-        return UserModule.projectId
+        return UserModule.projectId;
     }
 
     created() {
-        this.getData()
-        this.dataCount()
-        //    默认显示全部建筑信息
-        this.changeCascader()
+        this.getData();
+        this.dataCount();
+        // 默认显示全部建筑信息
+        this.changeCascader();
     }
 
-//查询统计数量
+    //查询统计数量
     dataCount() {
-        queryCountSpace({}).then(res => {
-            this.statisticsMsg.total = res.count
-        })
+        queryCountSpace({}).then((res) => {
+            this.statisticsMsg.total = res.count;
+        });
     }
 
     //获取楼层数据
     getData() {
-        let data, buildParams = {
-            pageNumber: 1,
-            pageSize: 1000,
-            orders: "localName asc",
-            projection: [
-                "id",
-                "localName"
-            ]
-        }, floorParams = {
-            orders: "floorSequenceId desc",
-            pageNumber: 1,
-            pageSize: 1000
-        }
+        let data,
+            buildParams = {
+                pageNumber: 1,
+                pageSize: 1000,
+                orders: "localName asc",
+                projection: ["id", "localName"],
+            },
+            floorParams = {
+                orders: "floorSequenceId desc",
+                pageNumber: 1,
+                pageSize: 1000,
+            };
         let promise1 = new Promise((resolve) => {
-            buildingQuery(buildParams).then(res => {
-                resolve(res)
-            })
-        })
+            buildingQuery(buildParams).then((res) => {
+                resolve(res);
+            });
+        });
         let promise2 = new Promise((resolve) => {
-            floorQuery(floorParams).then(res => {
-                resolve(res)
-            })
-        })
-        Promise.all([promise1, promise2]).then(values => {
-            let buildData = values[0].content, floorData = values[1].content
-            data = buildData.map(build => {
+            floorQuery(floorParams).then((res) => {
+                resolve(res);
+            });
+        });
+        Promise.all([promise1, promise2]).then((values) => {
+            let buildData = values[0].content,
+                floorData = values[1].content;
+                this.floorToMap = {};
+            data = buildData.map((build) => {
                 return {
                     value: build.id,
-                    label: build.localName
+                    label: build.localName,
+                };
+            });
+            data.unshift(
+                {
+                    value: "all",
+                    label: "全部",
+                },
+                {
+                    value: "noKnow",
+                    label: "未明确建筑",
                 }
-            })
-            data.unshift({
-                value: "all",
-                label: "全部"
-            }, {
-                value: "noKnow",
-                label: "未明确建筑"
-            })
-            data.forEach(build => {
-                floorData.forEach(floor => {
-                    if (build.value == floor.buildingId && floor.id && floor.localName) {
+            );
+            data.forEach((build) => {
+                floorData.forEach((floor) => {
+                    this.floorToMap[floor.id] = floor;
+                    if (
+                        build.value == floor.buildingId &&
+                        floor.id &&
+                        floor.localName
+                    ) {
                         if (build.children) {
                             build.children.push({
                                 value: floor.id,
@@ -154,16 +195,17 @@ export default class spaceIndex extends Vue {
                                 FloorSequenceID: floor.floorSequenceId,
                                 infos: floor.infos || {},
                                 outline: floor.outline || null,
-                            })
+                            });
                         } else {
-                            build.children = []
+                            build.children = [];
                             build.children.push(
                                 {
                                     value: "all",
-                                    label: "全部"
-                                }, {
-                                    value: 'noKnow',
-                                    label: "未明确楼层"
+                                    label: "全部",
+                                },
+                                {
+                                    value: "noKnow",
+                                    label: "未明确楼层",
                                 },
                                 {
                                     value: floor.id,
@@ -171,13 +213,14 @@ export default class spaceIndex extends Vue {
                                     FloorSequenceID: floor.floorSequenceId,
                                     infos: floor.infos || {},
                                     outline: floor.outline || null,
-                                })
+                                }
+                            );
                         }
                     }
-                })
-            })
-            this.options = data
-        })
+                });
+            });
+            this.options = data;
+        });
     }
 
     //改变楼层
@@ -186,173 +229,187 @@ export default class spaceIndex extends Vue {
         // if (value && value.length > 0  && this.building[0] != 'all') {
         //     this.buildingLabel = this.$refs['floorCascader'].getCheckedNodes()[0].pathLabels
         // }
-        if (this.building.length > 0) {
-            this.loading = true
-            let param = {
-                "type": "FunctionZone",
-                "orders": "sort asc, name desc",
-                pageNumber: 1,
-                pageSize: 1000
-            }
-            let param2 = {
-                // 级联查建筑楼层信息
-                cascade: [{ name: 'building' }, { name: 'floor', orders: 'floorSequenceId desc' }],
-                zoneType: 'FunctionZone',
-                pageNumber: this.paginationList.page,
-                pageSize: this.paginationList.size,
-                orders: "createTime desc, localName desc, localId desc, id asc"
-            }
-
-
-            if (this.building.length === 1) {
-                param2.filters = ''
-                switch (this.building[0]) {
-                    case 'noKnow':
-                        param2.filters =`buildingId='isnull'`
-                        break;
-                    case 'all':
-                        delete param2.filters
-
-                        break
-                }
-            } else if (this.building.length === 2) {
-                switch (this.building[1]) {
-                    case 'noKnow':
-                        param2.filters = `buildingId='${ this.building[0] }';floorId='isnull'`
-
-                        break;
-                    case 'all':
-                        param2.filters = `buildingId='${ this.building[0] }'`
-                        break;
-                    default:
-                        param2.filters = `buildingId='${ this.building[0] }';floorId='${ this.building[1] }'`
-                }
-            }
-
-            let promise = new Promise(resolve => {
-                dictQuery(param).then(res => {
-                    resolve(res)
-                })
-            })
-            let promise2 = new Promise(resolve => {
-                queryZone(param2).then(res => {
-                    resolve(res)
-                })
-            })
-            Promise.all([promise, promise2]).then(res => {
-                let tableData = []
-                this.loading = false
-                // 类型下信息点,重组数据
-                let basicInfos = [], dictStages = []
-                this.all = res[0].content
-                res[0].content.forEach(item => {
-                    let i = ["localName", "localId", "building", "floor"]
-                    if (i.includes(item.path)) {
-                        basicInfos.push(item)
-                    } else {
-                        dictStages.push(item)
-                    }
-                })
-                basicInfos.map(item => {
-                    if(item.path == 'building') {
-                        item.path='buildingSign'
-
-                    }
-                    if(item.path == 'floor') {
-                        item.path='floorSign'
-
+        if (this.activeName == 'table') {
+            if (this.building.length > 0) {
+                this.loading = true;
+                let param = {
+                    type: "FunctionZone",
+                    orders: "sort asc, name desc",
+                    pageNumber: 1,
+                    pageSize: 1000,
+                };
+                let param2 = {
+                    // 级联查建筑楼层信息
+                    cascade: [
+                        { name: "building" },
+                        { name: "floor", orders: "floorSequenceId desc" },
+                    ],
+                    zoneType: "FunctionZone",
+                    pageNumber: this.paginationList.page,
+                    pageSize: this.paginationList.size,
+                    orders: "createTime desc, localName desc, localId desc, id asc",
+                };
+    
+                if (this.building.length === 1) {
+                    param2.filters = "";
+                    switch (this.building[0]) {
+                        case "noKnow":
+                            param2.filters = `buildingId='isnull'`;
+                            break;
+                        case "all":
+                            delete param2.filters;
+    
+                            break;
                     }
-                    return item
-                })
-
-                this.headersStage = {
-                    basicInfos: {
-                        name: '模型解析',
-                        data: basicInfos
-                    },
-                    dictStages: {
-                        name: '租赁系统',
-                        data: dictStages
+                } else if (this.building.length === 2) {
+                    switch (this.building[1]) {
+                        case "noKnow":
+                            param2.filters = `buildingId='${this.building[0]}';floorId='isnull'`;
+    
+                            break;
+                        case "all":
+                            param2.filters = `buildingId='${this.building[0]}'`;
+                            break;
+                        default:
+                            param2.filters = `buildingId='${this.building[0]}';floorId='${this.building[1]}'`;
                     }
                 }
-                this.paginationList.total = res[1].total
-                tableData = res[1].content // 主体数据
-                // 处理 outline BIM模型中轮廓坐标 展示
-                // 添加建筑,楼层展示(从下拉框获取)
-                this.tableData = tableData.map(item => {
-
-                    if(item.building) {
-                        item.buildingSign = item.building.localName
-                    }
-                    if(item.floor) {
-                        item.floorSign = item.floor.localName
-                    }
-                    item = {
-                        ...item,
-                        outline: JSON.stringify(item.outline)
-                    }
-                    return item
-                })
-                //  列表信息展示,获取动态数据
-                this.codeToDataSource = {}
-                this.all.forEach(item => {
-                    if (item.dataSource) {
-                        try {
-                            this.codeToDataSource[item.code] = {}
-                            item.dataSource.forEach(dic => {
-                                this.codeToDataSource[item.code][dic.code] = dic.name;
-                            })
-                        } catch (e) {
-                            console.log(e);
+    
+                let promise = new Promise((resolve) => {
+                    dictQuery(param).then((res) => {
+                        resolve(res);
+                    });
+                });
+                let promise2 = new Promise((resolve) => {
+                    queryZone(param2).then((res) => {
+                        resolve(res);
+                    });
+                });
+                Promise.all([promise, promise2]).then((res) => {
+                    let tableData = [];
+                    this.loading = false;
+                    // 类型下信息点,重组数据
+                    let basicInfos = [],
+                        dictStages = [];
+                    this.all = res[0].content;
+                    res[0].content.forEach((item) => {
+                        let i = ["localName", "localId", "building", "floor"];
+                        if (i.includes(item.path)) {
+                            basicInfos.push(item);
+                        } else {
+                            dictStages.push(item);
                         }
-                    }
+                    });
+                    basicInfos.map((item) => {
+                        if (item.path == "building") {
+                            item.path = "buildingSign";
+                        }
+                        if (item.path == "floor") {
+                            item.path = "floorSign";
+                        }
+                        return item;
+                    });
+    
+                    this.headersStage = {
+                        basicInfos: {
+                            name: "模型解析",
+                            data: basicInfos,
+                        },
+                        dictStages: {
+                            name: "租赁系统",
+                            data: dictStages,
+                        },
+                    };
+                    this.paginationList.total = res[1].total;
+                    tableData = res[1].content; // 主体数据
+                    // 处理 outline BIM模型中轮廓坐标 展示
+                    // 添加建筑,楼层展示(从下拉框获取)
+                    this.tableData = tableData.map((item) => {
+                        if (item.building) {
+                            item.buildingSign = item.building.localName;
+                        }
+                        if (item.floor) {
+                            item.floorSign = item.floor.localName;
+                        }
+                        item = {
+                            ...item,
+                            outline: JSON.stringify(item.outline),
+                        };
+                        return item;
+                    });
+                    //  列表信息展示,获取动态数据
+                    this.codeToDataSource = {};
+                    this.all.forEach((item) => {
+                        if (item.dataSource) {
+                            try {
+                                this.codeToDataSource[item.code] = {};
+                                item.dataSource.forEach((dic) => {
+                                    this.codeToDataSource[item.code][dic.code] =
+                                        dic.name;
+                                });
+                            } catch (e) {
+                                console.log(e);
+                            }
+                        }
+                    });
+                    this.getBatch(this.tableData);
                 });
-                this.getBatch(this.tableData)
-            })
-        } else {
-            console.log('void')
+            } else {
+                console.log("void");
+            }
+        } else if (this.activeName == 'picture') {
+            this.toGraph()
         }
     }
 
     // 动态信息点
     getBatch(data) {
         let param = {
-            groupCode: 'WD',
-            appId: 'datacenter',
+            groupCode: "WD",
+            appId: "datacenter",
             projectId: this.projectId,
-            data: []
-        }
-        this.all.forEach(head => {
-            if (head.category != 'STATIC') {
-                data.forEach(item => {
-                    let cur = tools.dataForKey(item, head.path)
+            data: [],
+        };
+        this.all.forEach((head) => {
+            if (head.category != "STATIC") {
+                data.forEach((item) => {
+                    let cur = tools.dataForKey(item, head.path);
                     if (cur) {
                         param.data.push({
                             objectId: item.id,
-                            infoCode: head.code
-                        })
+                            infoCode: head.code,
+                        });
                     }
-                })
+                });
             }
-
-        })
+        });
         if (param.data.length) {
-            BeatchQueryParam(param).then(res => {
-                this.tableData = data.map(item => {
-                    res.data.map(child => {
+            BeatchQueryParam(param).then((res) => {
+                this.tableData = data.map((item) => {
+                    res.data.map((child) => {
                         if (item.id == child.objectId) {
                             if (!!child.data || child.data == 0) {
-                                this.all.map(head => {
+                                this.all.map((head) => {
                                     if (head.code == child.infoCode) {
-                                        let contentVal = child.data
-                                        if (this.codeToDataSource[child.infoCode]) {
-                                            contentVal = this.codeToDataSource[child.infoCode][child.data]
+                                        let contentVal = child.data;
+                                        if (
+                                            this.codeToDataSource[
+                                                child.infoCode
+                                            ]
+                                        ) {
+                                            contentVal = this.codeToDataSource[
+                                                child.infoCode
+                                            ][child.data];
                                         }
-                                        tools.setDataForKey(item, head.path, contentVal);
+                                        tools.setDataForKey(
+                                            item,
+                                            head.path,
+                                            contentVal
+                                        );
                                     }
-                                })
+                                });
                             } else {
-                                this.all.map(head => {
+                                this.all.map((head) => {
                                     if (head.code == child.infoCode) {
                                         tools.setDataForKey(
                                             item,
@@ -363,41 +420,63 @@ export default class spaceIndex extends Vue {
                                 });
                             }
                         }
-                    })
-                    return item
-                })
-            })
+                    });
+                    return item;
+                });
+            });
         }
-
     }
 
     handleChange(val) {
-        console.log(val)
+        console.log(val);
     }
 
     // 当前分页
     handleCurrentChange(val: number) {
-        console.log(val)
-        this.paginationList.page = val
-        this.changeCascader()
+        this.paginationList.page = val;
+        this.changeCascader();
     }
 
     handleSizeChange(val: number) {
-        this.paginationList.size = val
-        this.changeCascader()
+        this.paginationList.size = val;
+        this.changeCascader();
     }
 
     // 搜索
     searchValue(val: string) {
-        this.inputSearch = val
-        this.changeCascader()
+        this.inputSearch = val;
+        this.changeCascader();
+    }
+
+    // tab页切换
+    tabChange() {
+        if (this.activeName == "picture") {
+            this.$nextTick(() => {
+                this.toGraph()
+            });
+        }
+    }
+
+    // 切换至图
+    toGraph() {
+        if (this.building.length) {
+            if (
+                this.building.indexOf("noKnow") < 0 &&
+                this.building.indexOf("all") < 0
+            ) {
+                this.$refs.spaceGraph.getData(this.floorToMap[this.building[1]]);
+            } else {
+                this.$refs.spaceGraph.noMap();
+            }
+        } else {
+            this.$refs.spaceGraph.noMap();
+        }
     }
 }
 </script>
 
 <style lang="scss" scoped>
 .void {
-
     margin-top: 200px;
 }
 
@@ -430,7 +509,7 @@ export default class spaceIndex extends Vue {
             height: calc(100% - 41px);
             border: 1px solid #e1e7ea;
             border-top: none;
-            padding: 12px;
+            padding-bottom: 12px;
 
             .search {
                 padding: 16px;
@@ -439,9 +518,11 @@ export default class spaceIndex extends Vue {
                     margin-left: 16px;
                 }
             }
-
+            .borderBottom{
+                border-bottom: 1px solid #e1e7ea;
+            }
             .graph {
-                height: calc(100% - 64px)
+                height: calc(100% - 64px);
             }
         }
     }