123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785 |
- <template>
- <div class="adm-space">
- <statistics :statistics-msg="statisticsMsg"/>
- <el-divider class="small-divider"></el-divider>
- <div class="tabs">
- <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" :class="{ 'borderBottom': activeName==='picture' }">
- <template v-if="activeName==='table'">
- <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="zoneTypeValue" :options="zoneTypeOption" placeholder="请选择分区"
- @change="changeZoneTypes"
- class="item"></el-cascader>
- <admSearch @SearchValue="searchValue" class="item"/>
- </template>
- <template v-if="activeName==='picture'">
- <el-cascader clearable ref="graphCascader" placeholder="请选择建筑楼层" :options="graphOptions"
- v-model="graphBuilding" filterable size="small"
- @change="changeGraphCascader" style="margin-right: 12px" :props="graphProps">
- </el-cascader>
- <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="changeZoneType"
- placeholder="请选择分区" class="item"></el-cascader>
- <el-autocomplete popper-class="my-autocomplete" v-model="autoCompleteSearch"
- :fetch-suggestions="querySearch"
- placeholder="输入平面图中已有的业务空间名称进行查找" width="180" @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 style="float:right;position: relative;">
- <div v-if="createDisable" class="createMask"></div>
- <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>
- </div>
- </template>
- </div>
- <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
- @handleCurrentEdit="handleCurrentEdit"
- :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)"/>
- <p class="void-title">暂无内容</p>
- <p class="void-tips">可点击左上角选择设备类型</p>
- </div>
- </div>
- <div class="graph" v-if="activeName==='picture'">
- <spaceGraph @getZoneSuc="getZoneSuc" @initCreatBtn="initCreatBtn" ref="spaceGraph"/>
- </div>
- </div>
- </div>
- <el-dialog title="编辑空间信息" :visible.sync="dialogVisible" @close="close">
- <baseDataForm :objectHeaders="spaceHeaders"
- :currRowContent="currRowContent"
- ref="baseDataForm"/>
- <span slot="footer" class="dialog-footer">
- <el-button type="primary" @click="handleDataForm">完成</el-button>
- <el-button @click="dialogVisible = false">取消</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script lang="ts">
- import {Component, Vue} from "vue-property-decorator";
- import {AdmMultiTable, AdmSearch, baseDataForm, Pagination, Statistics} from "../components/index";
- import spaceGraph from "./components/spaceGraph.vue";
- import {buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone, updateZone} from "@/api/datacenter";
- import tools from "@/utils/maintain";
- import {BeatchQueryParam} from "@/api/equipComponent";
- import {UserModule} from "@/store/modules/user";
- @Component({
- name: "adm-space",
- components: {
- Statistics,
- AdmSearch,
- AdmMultiTable,
- spaceGraph,
- Pagination,
- baseDataForm
- },
- })
- export default class spaceIndex extends Vue {
- // loading
- loading = false;
- private statisticsMsg = {
- title: "全部空间",
- total: 0,
- };
- currentHeader = "租赁系统";
- activeName = "table";
- building = ["all"];
- zoneTypeVal = ["FunctionZone"];
- zoneTypeValue = ["FunctionZone"];
- // 分页
- private paginationList = {
- page: 1,
- size: 50,
- sizes: [10, 30, 50, 100, 150, 200],
- total: 0,
- };
- options = [];
- graphOptions = [];
- zoneTypeOption = [
- {
- value: "FunctionZone",
- label: "功能空间",
- },
- {
- value: "Zone",
- label: "业务空间",
- children: [
- {
- value: "FireZone",
- label: "防火分区",
- },
- {
- value: "PowerSupplyZone",
- label: "供电分区",
- },
- ],
- },
- ];
- // 信息点集合(表头)
- all = [];
- codeToDataSource = {};
- tableData = [];
- // 表头阶段信息结合
- headersStage = {};
- // 搜索框字段
- inputSearch = "";
- // 楼层映射
- floorToMap = {};
- //
- graphProps = {
- label: "localName",
- value: "id",
- children: "floor",
- };
- graphBuilding = [];
- spaceHeaders = {}
- // 当前行数据
- currRowContent = {}
- // 弹窗开关
- dialogVisible = false
- // 搜索
- autoCompleteSearch = "";
- // 业务空间列表
- zoneList = []
- // 禁用
- createDisable = true
- // 项目id
- private get projectId(): string {
- return UserModule.projectId;
- }
- created() {
- this.getData();
- this.dataCount();
- // 默认显示全部建筑信息
- this.changeCascader();
- }
- // 业务空间下拉搜索
- querySearch(queryString: string, cb: Function) {
- let restaurants = this.zoneList;
- let results = queryString
- ? restaurants.filter(this.createFilter(queryString))
- : restaurants;
- // 调用 callback 返回建议列表的数据
- cb(results);
- }
- // 过滤器
- createFilter(queryString: any) {
- return (restaurant: any) => {
- return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
- };
- }
- // 查询选中,定位
- handleSelect(zone: any) {
- if (this.$refs.spaceGraph) {
- this.$refs.spaceGraph.handleSelect(zone)
- }
- }
- // 子组件中获取业务空间成功
- getZoneSuc(list: []) {
- this.zoneList = list
- }
- // 创建空间
- editGraphy() {
- if (this.$refs.spaceGraph) {
- this.createDisable = true
- this.$refs.spaceGraph.editGraphy()
- }
- }
- // 下拉菜单
- handleCommand(command: string) {
- if (this.$refs.spaceGraph) {
- this.createDisable = true
- this.$refs.spaceGraph.handleCommand(command)
- }
- }
- /**
- * 初始化创建按钮
- */
- initCreatBtn(flag: boolean) {
- this.createDisable = flag
- }
- //查询统计数量
- dataCount() {
- 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 promise1 = new Promise((resolve) => {
- 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;
- this.floorToMap = {};
- data = buildData.map((build) => {
- return {
- value: build.id,
- label: build.localName,
- };
- });
- data.unshift(
- {
- value: "all",
- label: "全部",
- },
- {
- value: "noKnow",
- label: "未明确建筑",
- }
- );
- data.forEach((build) => {
- floorData.forEach((floor) => {
- this.floorToMap[floor.id] = floor;
- this.floorToMap[floor.id].build = build.label;
- if (
- build.value == floor.buildingId &&
- floor.id &&
- floor.localName
- ) {
- if (build.children) {
- build.children.push({
- value: floor.id,
- label: floor.localName,
- FloorSequenceID: floor.floorSequenceId,
- infos: floor.infos || {},
- outline: floor.outline || null,
- });
- } else {
- build.children = [];
- build.children.push(
- {
- value: "all",
- label: "全部",
- },
- {
- value: "noKnow",
- label: "未明确楼层",
- },
- {
- value: floor.id,
- label: floor.localName,
- FloorSequenceID: floor.floorSequenceId,
- infos: floor.infos || {},
- outline: floor.outline || null,
- }
- );
- }
- }
- });
- });
- this.options = data;
- });
- const pa = {
- pageSize: 1000,
- orders: "localName asc",
- cascade: [{name: "floor", orders: "floorSequenceId desc"}],
- };
- buildingQuery(pa).then((res) => {
- try {
- this.graphOptions = res.content.map((t) => {
- if (!t.floor) {
- t.floor = [];
- }
- return t;
- });
- } catch (err) {
- this.graphOptions = [];
- }
- if (this.graphOptions.length) {
- if (this.graphOptions[0].floor.length) {
- this.graphBuilding = [
- this.graphOptions[0].id,
- this.graphOptions[0].floor[0].id,
- ];
- }
- }
- });
- }
- //改变楼层
- changeCascader() {
- if (this.building.length > 0) {
- this.loading = true;
- let param = {
- // type: "FunctionZone",
- type: this.zoneTypeValue[this.zoneTypeValue.length - 1],
- orders: "sort asc, name desc",
- pageNumber: 1,
- pageSize: 1000,
- };
- let param2 = {
- // 级联查建筑楼层信息
- cascade: [
- {name: "building"},
- {name: "floor", orders: "floorSequenceId desc"},
- ],
- // zoneType: "FunctionZone",
- zoneType: this.zoneTypeValue[this.zoneTypeValue.length - 1],
- pageNumber: this.paginationList.page,
- pageSize: this.paginationList.size,
- orders: "createTime asc, localName asc, localId desc, id asc",
- };
- let search = this.inputSearch ? `;localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'` : ''
- if (this.building.length === 1) {
- param2.filters = "";
- switch (this.building[0]) {
- case "noKnow":
- param2.filters = `buildingId='isnull'${search}`;
- break;
- case "all":
- if (this.inputSearch) {
- param2.filters = `localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'`
- } else {
- delete param2.filters;
- }
- break;
- }
- } else if (this.building.length === 2) {
- switch (this.building[1]) {
- case "noKnow":
- param2.filters = `buildingId='${this.building[0]}';floorId='isnull'${search}`;
- break;
- case "all":
- param2.filters = `buildingId='${this.building[0]}'${search}`;
- break;
- default:
- param2.filters = `buildingId='${this.building[0]}';floorId='${this.building[1]}'${search}`;
- }
- }
- 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);
- }
- });
- dictStages.map((val, index) => {
- if (val.path == "outline") {
- dictStages.splice(index, 1);
- }
- return val;
- });
- 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;
- }
- // 删除轮廓线
- if (item.outline) {
- delete item.outline;
- }
- // 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);
- });
- } else {
- console.log("void");
- }
- }
- // 图建筑楼层修改
- changeGraphCascader() {
- this.toGraph();
- }
- // 动态信息点
- getBatch(data) {
- let param = {
- 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);
- if (cur) {
- param.data.push({
- objectId: item.id,
- infoCode: head.code,
- });
- }
- });
- }
- });
- if (param.data.length) {
- 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) => {
- if (head.code == child.infoCode) {
- let contentVal = child.data;
- if (this.codeToDataSource[child.infoCode]) {
- contentVal = this.codeToDataSource[child.infoCode][child.data];
- }
- tools.setDataForKey(
- item,
- head.path,
- contentVal
- );
- }
- });
- } else {
- this.all.map((head) => {
- if (head.code == child.infoCode) {
- tools.setDataForKey(
- item,
- head.path,
- child.error ? child.value
- ? "表号功能号格式错误"
- : "表号功能号不存在"
- : "暂未采集到实时数据"
- );
- }
- });
- }
- }
- });
- return item;
- });
- });
- }
- }
- // 修改分区类型
- changeZoneType(val) {
- this.toGraph();
- }
- // 修改表格分区类型
- changeZoneTypes() {
- this.changeCascader();
- }
- // 当前分页
- handleCurrentChange(val: number) {
- this.paginationList.page = val;
- this.changeCascader();
- }
- // close
- close() {
- // this.next = true;
- }
- // 添加/编辑 事件处理
- handleDataForm() {
- this.$refs.baseDataForm.submitForm(this.handleDataFormSave)
- }
- handleDataFormSave() {
- let from = tools.formatData(this.$refs.baseDataForm.form)
- let param = {
- content: [from]
- }
- updateZone(param).then(res => {
- if (res.result == 'success') {
- this.$message.success('更新成功')
- this.dialogVisible = false
- // 默认显示全部建筑信息
- this.changeCascader();
- }
- })
- }
- handleSizeChange(val: number) {
- this.paginationList.size = val;
- this.changeCascader();
- }
- // 搜索
- searchValue(val: string) {
- this.inputSearch = val;
- this.changeCascader();
- }
- // 编辑当前行
- handleCurrentEdit(val: object) {
- this.currRowContent = val;
- this.spaceHeaders = this.headersStage;
- this.dialogVisible = true;
- }
- // tab页切换
- tabChange() {
- if (this.activeName == "picture") {
- this.$nextTick(() => {
- this.toGraph();
- });
- }
- }
- // 切换至图
- toGraph() {
- if (this.graphBuilding.length) {
- if (
- this.graphBuilding.indexOf("noKnow") < 0 &&
- this.graphBuilding.indexOf("all") < 0
- ) {
- this.$refs.spaceGraph.getData(
- this.floorToMap[this.graphBuilding[1]],
- this.zoneTypeVal
- );
- } else {
- this.$refs.spaceGraph.noMap();
- }
- } else {
- this.$refs.spaceGraph.noMap();
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .void {
- margin-top: 200px;
- }
- .align {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- flex-wrap: wrap;
- }
- .adm-space {
- background: #fff;
- padding: 12px;
- height: 100%;
- .small-divider {
- margin: 12px 0;
- }
- .tabs {
- position: relative;
- height: calc(100% - 92px);
- ::v-deep .el-tabs__header {
- margin: 0;
- }
- .tab-content {
- height: calc(100% - 41px);
- border: 1px solid #e1e7ea;
- border-top: none;
- padding-bottom: 12px;
- .search {
- padding: 16px;
- //border-bottom: 1px solid #e1e7ea;
- & > .item + .item {
- margin-left: 16px;
- }
- .createMask {
- position: absolute;
- width: 100%;
- height: 100%;
- background: #ffffff80;
- cursor: not-allowed;
- z-index: 9;
- }
- }
- .borderBottom {
- border-bottom: 1px solid #e1e7ea;
- }
- .graph {
- height: calc(100% - 64px);
- }
- }
- }
- .adm-pagination {
- right: 10px;
- position: absolute;
- bottom: 10px;
- }
- }
- </style>
- <style lang="scss">
- .adm-space {
- .el-dialog {
- .el-dialog__body {
- padding: 20px;
- max-height: 550px !important;
- min-height: 100px;
- overflow-y: auto;
- overflow-x: hidden;
- }
- }
- .el-select, .el-date-editor.el-input, .el-date-editor.el-input__inner {
- width: 100%;
- }
- .el-autocomplete {
- display: inline-block;
- width: 320px;
- margin-left: 12px;
- }
- .my-autocomplete {
- li {
- line-height: normal;
- padding: 7px;
- .name {
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .addr {
- font-size: 12px;
- color: #b4b4b4;
- }
- .highlighted .addr {
- color: #ddd;
- }
- }
- }
- }
- </style>
|