index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  1. <template>
  2. <div class="adm-space">
  3. <statistics :statistics-msg="statisticsMsg"/>
  4. <el-divider class="small-divider"></el-divider>
  5. <div class="tabs">
  6. <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
  7. <el-tab-pane label="列表" name="table"></el-tab-pane>
  8. <el-tab-pane label="平面图" name="picture"></el-tab-pane>
  9. </el-tabs>
  10. <div class="tab-content">
  11. <div class="search" :class="{ 'borderBottom': activeName==='picture' }">
  12. <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options"
  13. v-model="building" filterable size="small"
  14. @change="changeCascader" style="margin-right: 12px"
  15. v-if="activeName==='table'"></el-cascader>
  16. <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'"/>
  17. <el-cascader clearable ref="graphCascader" placeholder="请选择建筑楼层" :options="graphOptions"
  18. v-model="graphBuilding" filterable
  19. size="small" @change="changeGraphCascader" style="margin-right: 12px"
  20. v-if="activeName==='picture'" :props="graphProps">
  21. </el-cascader>
  22. <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="changeZoneType"
  23. placeholder="请选择分区" class="item"
  24. v-if="activeName==='picture'"></el-cascader>
  25. </div>
  26. <div v-if="activeName==='table'" v-loading="loading" style="height: calc(100% - 100px);padding: 0 12px">
  27. <template style="height: 100%;" v-if="building.length > 0">
  28. <admMultiTable
  29. @handleCurrentEdit="handleCurrentEdit"
  30. :currentHeader="currentHeader"
  31. :headersStage="headersStage"
  32. :tableData="tableData"/>
  33. <Pagination v-if="tableData.length > 0" :paginationList="paginationList"
  34. @handleCurrentChange="handleCurrentChange"
  35. @handleSizeChange="handleSizeChange"/>
  36. </template>
  37. <div v-else class="void align">
  38. <svg-icon name="void" :width="String(120)" :height="String(123)"/>
  39. <p class="void-title">暂无内容</p>
  40. <p class="void-tips">可点击左上角选择设备类型</p>
  41. </div>
  42. </div>
  43. <div class="graph" v-if="activeName==='picture'">
  44. <spaceGraph ref="spaceGraph"/>
  45. </div>
  46. </div>
  47. </div>
  48. <el-dialog title="编辑空间信息" :visible.sync="dialogVisible" @close="close">
  49. <baseDataForm :objectHeaders="spaceHeaders"
  50. :currRowContent="currRowContent"
  51. ref="baseDataForm"/>
  52. <span slot="footer" class="dialog-footer">
  53. <el-button type="primary" @click="handleDataForm">完成</el-button>
  54. <el-button @click="dialogVisible = false">取消</el-button>
  55. </span>
  56. </el-dialog>
  57. </div>
  58. </template>
  59. <script lang="ts">
  60. import { Component, Vue } from "vue-property-decorator";
  61. import { AdmMultiTable, AdmSearch, baseDataForm, Pagination, Statistics } from "../components/index";
  62. import spaceGraph from "./components/spaceGraph.vue";
  63. import { buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone, updateZone } from "@/api/datacenter";
  64. import tools from "@/utils/maintain";
  65. import { BeatchQueryParam } from "@/api/equipComponent";
  66. import { UserModule } from "@/store/modules/user";
  67. @Component({
  68. name: "adm-space",
  69. components: {
  70. Statistics,
  71. AdmSearch,
  72. AdmMultiTable,
  73. spaceGraph,
  74. Pagination,
  75. baseDataForm
  76. },
  77. })
  78. export default class spaceIndex extends Vue {
  79. // loading
  80. loading = false;
  81. private statisticsMsg = {
  82. title: "全部空间",
  83. total: 0,
  84. };
  85. currentHeader = "租赁系统";
  86. activeName = "table";
  87. building = ["all"];
  88. zoneTypeVal = ["GeneralZone"];
  89. // 分页
  90. private paginationList = {
  91. page: 1,
  92. size: 50,
  93. sizes: [10, 30, 50, 100, 150, 200],
  94. total: 0,
  95. };
  96. options = [];
  97. graphOptions = [];
  98. zoneTypeOption = [
  99. {
  100. value: "GeneralZone",
  101. label: "功能分区",
  102. },
  103. {
  104. value: "Zone",
  105. label: "业务分区",
  106. children: [
  107. {
  108. value: "FireZone",
  109. label: "防火空间",
  110. },
  111. {
  112. value: "PowerSupplyZone",
  113. label: "供电空间",
  114. },
  115. ],
  116. },
  117. ];
  118. // 信息点集合(表头)
  119. all = [];
  120. codeToDataSource = {};
  121. tableData = [];
  122. // 表头阶段信息结合
  123. headersStage = {};
  124. // 搜索框字段
  125. inputSearch = "";
  126. // 楼层映射
  127. floorToMap = {};
  128. //
  129. graphProps = {
  130. label: "localName",
  131. value: "id",
  132. children: "floor",
  133. };
  134. graphBuilding = [];
  135. spaceHeaders = {}
  136. // 当前行数据
  137. currRowContent = {}
  138. // 弹窗开关
  139. dialogVisible = false
  140. //
  141. // 项目id
  142. private get projectId(): string {
  143. return UserModule.projectId;
  144. }
  145. created() {
  146. this.getData();
  147. this.dataCount();
  148. // 默认显示全部建筑信息
  149. this.changeCascader();
  150. }
  151. //查询统计数量
  152. dataCount() {
  153. queryCountSpace({}).then((res) => {
  154. this.statisticsMsg.total = res.count;
  155. });
  156. }
  157. //获取楼层数据
  158. getData() {
  159. let data,
  160. buildParams = {
  161. pageNumber: 1,
  162. pageSize: 1000,
  163. orders: "localName asc",
  164. projection: ["id", "localName"],
  165. },
  166. floorParams = {
  167. orders: "floorSequenceId desc",
  168. pageNumber: 1,
  169. pageSize: 1000,
  170. };
  171. let promise1 = new Promise((resolve) => {
  172. buildingQuery(buildParams).then((res) => {
  173. resolve(res);
  174. });
  175. });
  176. let promise2 = new Promise((resolve) => {
  177. floorQuery(floorParams).then((res) => {
  178. resolve(res);
  179. });
  180. });
  181. Promise.all([promise1, promise2]).then((values) => {
  182. let buildData = values[0].content,
  183. floorData = values[1].content;
  184. this.floorToMap = {};
  185. data = buildData.map((build) => {
  186. return {
  187. value: build.id,
  188. label: build.localName,
  189. };
  190. });
  191. data.unshift(
  192. {
  193. value: "all",
  194. label: "全部",
  195. },
  196. {
  197. value: "noKnow",
  198. label: "未明确建筑",
  199. }
  200. );
  201. data.forEach((build) => {
  202. floorData.forEach((floor) => {
  203. this.floorToMap[floor.id] = floor;
  204. this.floorToMap[floor.id].build = build.label;
  205. if (
  206. build.value == floor.buildingId &&
  207. floor.id &&
  208. floor.localName
  209. ) {
  210. if (build.children) {
  211. build.children.push({
  212. value: floor.id,
  213. label: floor.localName,
  214. FloorSequenceID: floor.floorSequenceId,
  215. infos: floor.infos || {},
  216. outline: floor.outline || null,
  217. });
  218. } else {
  219. build.children = [];
  220. build.children.push(
  221. {
  222. value: "all",
  223. label: "全部",
  224. },
  225. {
  226. value: "noKnow",
  227. label: "未明确楼层",
  228. },
  229. {
  230. value: floor.id,
  231. label: floor.localName,
  232. FloorSequenceID: floor.floorSequenceId,
  233. infos: floor.infos || {},
  234. outline: floor.outline || null,
  235. }
  236. );
  237. }
  238. }
  239. });
  240. });
  241. this.options = data;
  242. });
  243. const pa = {
  244. pageSize: 1000,
  245. orders: "localName asc",
  246. cascade: [{ name: "floor", orders: "floorSequenceId desc" }],
  247. };
  248. buildingQuery(pa).then((res) => {
  249. try {
  250. this.graphOptions = res.content.map((t) => {
  251. if (!t.floor) {
  252. t.floor = [];
  253. }
  254. return t;
  255. });
  256. } catch (err) {
  257. this.graphOptions = [];
  258. }
  259. if (this.graphOptions.length) {
  260. if (this.graphOptions[0].floor.length) {
  261. this.graphBuilding = [
  262. this.graphOptions[0].id,
  263. this.graphOptions[0].floor[0].id,
  264. ];
  265. }
  266. }
  267. });
  268. }
  269. //改变楼层
  270. changeCascader() {
  271. if (this.building.length > 0) {
  272. this.loading = true;
  273. let param = {
  274. type: "GeneralZone",
  275. orders: "sort asc, name desc",
  276. pageNumber: 1,
  277. pageSize: 1000,
  278. };
  279. let param2 = {
  280. // 级联查建筑楼层信息
  281. cascade: [
  282. { name: "building" },
  283. { name: "floor", orders: "floorSequenceId desc" },
  284. ],
  285. zoneType: "GeneralZone",
  286. pageNumber: this.paginationList.page,
  287. pageSize: this.paginationList.size,
  288. orders: "createTime asc, localName asc, localId desc, id asc",
  289. };
  290. let search = this.inputSearch ? `;localName contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'` : ''
  291. if (this.building.length === 1) {
  292. param2.filters = "";
  293. switch (this.building[0]) {
  294. case "noKnow":
  295. param2.filters = `buildingId='isnull'${ search }`;
  296. break;
  297. case "all":
  298. if (this.inputSearch) {
  299. param2.filters = `localName contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
  300. } else {
  301. delete param2.filters;
  302. }
  303. break;
  304. }
  305. } else if (this.building.length === 2) {
  306. switch (this.building[1]) {
  307. case "noKnow":
  308. param2.filters = `buildingId='${ this.building[0] }';floorId='isnull'${ search }`;
  309. break;
  310. case "all":
  311. param2.filters = `buildingId='${ this.building[0] }'${ search }`;
  312. break;
  313. default:
  314. param2.filters = `buildingId='${ this.building[0] }';floorId='${ this.building[1] }'${ search }`;
  315. }
  316. }
  317. let promise = new Promise((resolve) => {
  318. dictQuery(param).then((res) => {
  319. resolve(res);
  320. });
  321. });
  322. let promise2 = new Promise((resolve) => {
  323. queryZone(param2).then((res) => {
  324. resolve(res);
  325. });
  326. });
  327. Promise.all([promise, promise2]).then((res) => {
  328. let tableData = [];
  329. this.loading = false;
  330. // 类型下信息点,重组数据
  331. let basicInfos = [],
  332. dictStages = [];
  333. this.all = res[0].content;
  334. res[0].content.forEach((item) => {
  335. let i = ["localName", "localId", "building", "floor"];
  336. if (i.includes(item.path)) {
  337. basicInfos.push(item);
  338. } else {
  339. dictStages.push(item);
  340. }
  341. });
  342. dictStages.map((val, index) => {
  343. if (val.path == "outline") {
  344. dictStages.splice(index, 1);
  345. }
  346. return val;
  347. });
  348. basicInfos.map((item) => {
  349. if (item.path == "building") {
  350. item.path = "buildingSign";
  351. }
  352. if (item.path == "floor") {
  353. item.path = "floorSign";
  354. }
  355. return item;
  356. });
  357. this.headersStage = {
  358. basicInfos: {
  359. name: "模型解析",
  360. data: basicInfos,
  361. },
  362. dictStages: {
  363. name: "租赁系统",
  364. data: dictStages,
  365. },
  366. };
  367. this.paginationList.total = res[1].total;
  368. tableData = res[1].content; // 主体数据
  369. // 处理 outline BIM模型中轮廓坐标 展示
  370. // 添加建筑,楼层展示(从下拉框获取)
  371. this.tableData = tableData.map((item) => {
  372. if (item.building) {
  373. item.buildingSign = item.building.localName;
  374. }
  375. if (item.floor) {
  376. item.floorSign = item.floor.localName;
  377. }
  378. // 删除轮廓线
  379. if (item.outline) {
  380. delete item.outline;
  381. }
  382. // item = {
  383. // ...item,
  384. // outline: JSON.stringify(item.outline),
  385. // };
  386. return item;
  387. });
  388. // 列表信息展示,获取动态数据
  389. this.codeToDataSource = {};
  390. this.all.forEach((item) => {
  391. if (item.dataSource) {
  392. try {
  393. this.codeToDataSource[item.code] = {};
  394. item.dataSource.forEach((dic) => {
  395. this.codeToDataSource[item.code][dic.code] =
  396. dic.name;
  397. });
  398. } catch (e) {
  399. console.log(e);
  400. }
  401. }
  402. });
  403. this.getBatch(this.tableData);
  404. });
  405. } else {
  406. console.log("void");
  407. }
  408. }
  409. // 图建筑楼层修改
  410. changeGraphCascader() {
  411. this.toGraph();
  412. }
  413. // 动态信息点
  414. getBatch(data) {
  415. let param = {
  416. groupCode: "WD",
  417. appId: "datacenter",
  418. projectId: this.projectId,
  419. data: [],
  420. };
  421. this.all.forEach((head) => {
  422. if (head.category != "STATIC") {
  423. data.forEach((item) => {
  424. let cur = tools.dataForKey(item, head.path);
  425. if (cur) {
  426. param.data.push({
  427. objectId: item.id,
  428. infoCode: head.code,
  429. });
  430. }
  431. });
  432. }
  433. });
  434. if (param.data.length) {
  435. BeatchQueryParam(param).then((res) => {
  436. this.tableData = data.map((item) => {
  437. res.data.map((child) => {
  438. if (item.id == child.objectId) {
  439. if (!!child.data || child.data == 0) {
  440. this.all.map((head) => {
  441. if (head.code == child.infoCode) {
  442. let contentVal = child.data;
  443. if (this.codeToDataSource[child.infoCode]) {
  444. contentVal = this.codeToDataSource[child.infoCode][child.data];
  445. }
  446. tools.setDataForKey(
  447. item,
  448. head.path,
  449. contentVal
  450. );
  451. }
  452. });
  453. } else {
  454. this.all.map((head) => {
  455. if (head.code == child.infoCode) {
  456. tools.setDataForKey(
  457. item,
  458. head.path,
  459. child.error ? child.value
  460. ? "表号功能号格式错误"
  461. : "表号功能号不存在"
  462. : "暂未采集到实时数据"
  463. );
  464. }
  465. });
  466. }
  467. }
  468. });
  469. return item;
  470. });
  471. });
  472. }
  473. }
  474. // 修改分区类型
  475. changeZoneType(val) {
  476. this.toGraph();
  477. }
  478. // 当前分页
  479. handleCurrentChange(val: number) {
  480. this.paginationList.page = val;
  481. this.changeCascader();
  482. }
  483. // close
  484. close() {
  485. // this.next = true;
  486. }
  487. // 添加/编辑 事件处理
  488. handleDataForm() {
  489. this.$refs.baseDataForm.submitForm(this.handleDataFormSave)
  490. }
  491. handleDataFormSave() {
  492. let from = tools.formatData(this.$refs.baseDataForm.form)
  493. let param = {
  494. content: [from]
  495. }
  496. updateZone(param).then(res => {
  497. if (res.result == 'success') {
  498. this.$message.success('更新成功')
  499. this.dialogVisible = false
  500. // 默认显示全部建筑信息
  501. this.changeCascader();
  502. }
  503. })
  504. }
  505. handleSizeChange(val: number) {
  506. this.paginationList.size = val;
  507. this.changeCascader();
  508. }
  509. // 搜索
  510. searchValue(val: string) {
  511. this.inputSearch = val;
  512. this.changeCascader();
  513. }
  514. // 编辑当前行
  515. handleCurrentEdit(val: object) {
  516. this.currRowContent = val
  517. let pic = this.headersStage.dictStages.data.filter(i => i.dataType == 'ATTACHMENT')
  518. let base = this.headersStage.dictStages.data.filter(i => i.dataType != 'ATTACHMENT')
  519. this.headersStage.dictStages.data = pic.length > 0 ? [...base, ...pic] : [...base]
  520. this.spaceHeaders = this.headersStage
  521. this.dialogVisible = true
  522. }
  523. // tab页切换
  524. tabChange() {
  525. if (this.activeName == "picture") {
  526. this.$nextTick(() => {
  527. this.toGraph();
  528. });
  529. }
  530. }
  531. // 切换至图
  532. toGraph() {
  533. if (this.graphBuilding.length) {
  534. if (
  535. this.graphBuilding.indexOf("noKnow") < 0 &&
  536. this.graphBuilding.indexOf("all") < 0
  537. ) {
  538. this.$refs.spaceGraph.getData(
  539. this.floorToMap[this.graphBuilding[1]],
  540. this.zoneTypeVal
  541. );
  542. } else {
  543. this.$refs.spaceGraph.noMap();
  544. }
  545. } else {
  546. this.$refs.spaceGraph.noMap();
  547. }
  548. }
  549. }
  550. </script>
  551. <style lang="scss" scoped>
  552. .void {
  553. margin-top: 200px;
  554. }
  555. .align {
  556. display: flex;
  557. align-items: center;
  558. justify-content: center;
  559. flex-direction: column;
  560. flex-wrap: wrap;
  561. }
  562. .adm-space {
  563. background: #fff;
  564. padding: 12px;
  565. height: 100%;
  566. .small-divider {
  567. margin: 12px 0;
  568. }
  569. .tabs {
  570. position: relative;
  571. height: calc(100% - 92px);
  572. ::v-deep .el-tabs__header {
  573. margin: 0;
  574. }
  575. .tab-content {
  576. height: calc(100% - 41px);
  577. border: 1px solid #e1e7ea;
  578. border-top: none;
  579. padding-bottom: 12px;
  580. .search {
  581. padding: 16px;
  582. //border-bottom: 1px solid #e1e7ea;
  583. & > .item + .item {
  584. margin-left: 16px;
  585. }
  586. }
  587. .borderBottom {
  588. border-bottom: 1px solid #e1e7ea;
  589. }
  590. .graph {
  591. height: calc(100% - 64px);
  592. }
  593. }
  594. }
  595. .adm-pagination {
  596. right: 10px;
  597. position: absolute;
  598. bottom: 10px;
  599. }
  600. }
  601. </style>
  602. <style lang="scss">
  603. .adm-space {
  604. .el-dialog {
  605. .el-dialog__body {
  606. padding: 20px;
  607. max-height: 643px !important;
  608. min-height: 100px;
  609. overflow-y: auto;
  610. overflow-x: hidden;
  611. }
  612. }
  613. .el-select, .el-date-editor.el-input, .el-date-editor.el-input__inner {
  614. width: 100%;
  615. }
  616. }
  617. </style>