index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. <template>
  2. <div class="space-index">
  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" v-model="building" filterable size="small"
  13. @change="changeCascader" style="margin-right: 12px"></el-cascader>
  14. <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="handleChange" placeholder="请选择分区" class="item"
  15. v-if="activeName==='picture'"></el-cascader>
  16. <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
  17. </div>
  18. <div v-if="activeName==='table'" v-loading="loading" style="height: calc(100% - 100px);padding: 0 12px">
  19. <template style="height: 100%;" v-if="building.length > 0">
  20. <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage" :tableData="tableData" />
  21. <Pagination v-if="tableData.length > 0" :paginationList="paginationList" @handleCurrentChange="handleCurrentChange"
  22. @handleSizeChange="handleSizeChange" />
  23. </template>
  24. <div v-else class="void align">
  25. <svg-icon name="void" :width="String(120)" :height="String(123)" />
  26. <p class="void-title">暂无内容</p>
  27. <p class="void-tips">可点击左上角选择设备类型</p>
  28. </div>
  29. </div>
  30. <div class="graph" v-if="activeName==='picture'">
  31. <spaceGraph ref="spaceGraph" />
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script lang="ts">
  38. import { Component, Vue } from "vue-property-decorator";
  39. import { AdmMultiTable, AdmSearch, Pagination, Statistics, } from "../components/index";
  40. import spaceGraph from "./components/spaceGraph.vue";
  41. import { buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone, } from "@/api/datacenter";
  42. import tools from "@/utils/maintain";
  43. import { BeatchQueryParam } from "@/api/equipComponent";
  44. import { UserModule } from "@/store/modules/user";
  45. @Component({
  46. name: "space-index",
  47. components: {
  48. Statistics,
  49. AdmSearch,
  50. AdmMultiTable,
  51. spaceGraph,
  52. Pagination,
  53. },
  54. })
  55. export default class spaceIndex extends Vue {
  56. // loading
  57. loading = false;
  58. private statisticsMsg = {
  59. title: "全部空间",
  60. total: 93640,
  61. };
  62. currentHeader = "租赁系统";
  63. activeName = "table";
  64. building = ["all"];
  65. zoneTypeVal = ['FunctionZone'];
  66. // 分页
  67. private paginationList = {
  68. page: 1,
  69. size: 50,
  70. sizes: [10, 30, 50, 100, 150, 200],
  71. total: 0,
  72. };
  73. options = [];
  74. zoneTypeOption = [
  75. {
  76. value: "FunctionZone",
  77. label: "功能分区",
  78. },
  79. {
  80. value: "Zone",
  81. label: "业务分区",
  82. children: [
  83. {
  84. value: "FireZone",
  85. label: "防火分区",
  86. },
  87. {
  88. value: "PowerSupplyZone",
  89. label: "供电分区",
  90. },
  91. ],
  92. },
  93. ];
  94. // 信息点集合(表头)
  95. all = [];
  96. codeToDataSource = {};
  97. tableData = [];
  98. // 表头阶段信息结合
  99. headersStage = {};
  100. // 搜索框字段
  101. inputSearch = "";
  102. // 楼层映射
  103. floorToMap = {};
  104. //
  105. // 项目id
  106. private get projectId(): string {
  107. return UserModule.projectId;
  108. }
  109. created() {
  110. this.getData();
  111. this.dataCount();
  112. // 默认显示全部建筑信息
  113. this.changeCascader();
  114. }
  115. //查询统计数量
  116. dataCount() {
  117. queryCountSpace({}).then((res) => {
  118. this.statisticsMsg.total = res.count;
  119. });
  120. }
  121. //获取楼层数据
  122. getData() {
  123. let data,
  124. buildParams = {
  125. pageNumber: 1,
  126. pageSize: 1000,
  127. orders: "localName asc",
  128. projection: ["id", "localName"],
  129. },
  130. floorParams = {
  131. orders: "floorSequenceId desc",
  132. pageNumber: 1,
  133. pageSize: 1000,
  134. };
  135. let promise1 = new Promise((resolve) => {
  136. buildingQuery(buildParams).then((res) => {
  137. resolve(res);
  138. });
  139. });
  140. let promise2 = new Promise((resolve) => {
  141. floorQuery(floorParams).then((res) => {
  142. resolve(res);
  143. });
  144. });
  145. Promise.all([promise1, promise2]).then((values) => {
  146. let buildData = values[0].content,
  147. floorData = values[1].content;
  148. this.floorToMap = {};
  149. data = buildData.map((build) => {
  150. return {
  151. value: build.id,
  152. label: build.localName,
  153. };
  154. });
  155. data.unshift(
  156. {
  157. value: "all",
  158. label: "全部",
  159. },
  160. {
  161. value: "noKnow",
  162. label: "未明确建筑",
  163. }
  164. );
  165. data.forEach((build) => {
  166. floorData.forEach((floor) => {
  167. this.floorToMap[floor.id] = floor;
  168. if (
  169. build.value == floor.buildingId &&
  170. floor.id &&
  171. floor.localName
  172. ) {
  173. if (build.children) {
  174. build.children.push({
  175. value: floor.id,
  176. label: floor.localName,
  177. FloorSequenceID: floor.floorSequenceId,
  178. infos: floor.infos || {},
  179. outline: floor.outline || null,
  180. });
  181. } else {
  182. build.children = [];
  183. build.children.push(
  184. {
  185. value: "all",
  186. label: "全部",
  187. },
  188. {
  189. value: "noKnow",
  190. label: "未明确楼层",
  191. },
  192. {
  193. value: floor.id,
  194. label: floor.localName,
  195. FloorSequenceID: floor.floorSequenceId,
  196. infos: floor.infos || {},
  197. outline: floor.outline || null,
  198. }
  199. );
  200. }
  201. }
  202. });
  203. });
  204. this.options = data;
  205. });
  206. }
  207. //改变楼层
  208. changeCascader(value) {
  209. //todo delete
  210. // if (value && value.length > 0 && this.building[0] != 'all') {
  211. // this.buildingLabel = this.$refs['floorCascader'].getCheckedNodes()[0].pathLabels
  212. // }
  213. if (this.activeName == 'table') {
  214. if (this.building.length > 0) {
  215. this.loading = true;
  216. let param = {
  217. type: "FunctionZone",
  218. orders: "sort asc, name desc",
  219. pageNumber: 1,
  220. pageSize: 1000,
  221. };
  222. let param2 = {
  223. // 级联查建筑楼层信息
  224. cascade: [
  225. { name: "building" },
  226. { name: "floor", orders: "floorSequenceId desc" },
  227. ],
  228. zoneType: "FunctionZone",
  229. pageNumber: this.paginationList.page,
  230. pageSize: this.paginationList.size,
  231. orders: "createTime desc, localName desc, localId desc, id asc",
  232. };
  233. if (this.building.length === 1) {
  234. param2.filters = "";
  235. switch (this.building[0]) {
  236. case "noKnow":
  237. param2.filters = `buildingId='isnull'`;
  238. break;
  239. case "all":
  240. delete param2.filters;
  241. break;
  242. }
  243. } else if (this.building.length === 2) {
  244. switch (this.building[1]) {
  245. case "noKnow":
  246. param2.filters = `buildingId='${this.building[0]}';floorId='isnull'`;
  247. break;
  248. case "all":
  249. param2.filters = `buildingId='${this.building[0]}'`;
  250. break;
  251. default:
  252. param2.filters = `buildingId='${this.building[0]}';floorId='${this.building[1]}'`;
  253. }
  254. }
  255. let promise = new Promise((resolve) => {
  256. dictQuery(param).then((res) => {
  257. resolve(res);
  258. });
  259. });
  260. let promise2 = new Promise((resolve) => {
  261. queryZone(param2).then((res) => {
  262. resolve(res);
  263. });
  264. });
  265. Promise.all([promise, promise2]).then((res) => {
  266. let tableData = [];
  267. this.loading = false;
  268. // 类型下信息点,重组数据
  269. let basicInfos = [],
  270. dictStages = [];
  271. this.all = res[0].content;
  272. res[0].content.forEach((item) => {
  273. let i = ["localName", "localId", "building", "floor"];
  274. if (i.includes(item.path)) {
  275. basicInfos.push(item);
  276. } else {
  277. dictStages.push(item);
  278. }
  279. });
  280. dictStages.map((val,index) => {
  281. val.name = val.unit ? `${ val.name }(${ val.unit })` : val.name
  282. if (val.path == 'outline') {
  283. dictStages.splice(index,1)
  284. }
  285. return val
  286. })
  287. basicInfos.map((item) => {
  288. if (item.path == "building") {
  289. item.path = "buildingSign";
  290. }
  291. if (item.path == "floor") {
  292. item.path = "floorSign";
  293. }
  294. return item;
  295. });
  296. this.headersStage = {
  297. basicInfos: {
  298. name: "模型解析",
  299. data: basicInfos,
  300. },
  301. dictStages: {
  302. name: "租赁系统",
  303. data: dictStages,
  304. },
  305. };
  306. this.paginationList.total = res[1].total;
  307. tableData = res[1].content; // 主体数据
  308. // 处理 outline BIM模型中轮廓坐标 展示
  309. // 添加建筑,楼层展示(从下拉框获取)
  310. this.tableData = tableData.map((item) => {
  311. if (item.building) {
  312. item.buildingSign = item.building.localName;
  313. }
  314. if (item.floor) {
  315. item.floorSign = item.floor.localName;
  316. }
  317. // 删除轮廓线
  318. if (item.outline) {
  319. delete item.outline
  320. }
  321. // item = {
  322. // ...item,
  323. // outline: JSON.stringify(item.outline),
  324. // };
  325. return item;
  326. });
  327. // 列表信息展示,获取动态数据
  328. this.codeToDataSource = {};
  329. this.all.forEach((item) => {
  330. if (item.dataSource) {
  331. try {
  332. this.codeToDataSource[item.code] = {};
  333. item.dataSource.forEach((dic) => {
  334. this.codeToDataSource[item.code][dic.code] =
  335. dic.name;
  336. });
  337. } catch (e) {
  338. console.log(e);
  339. }
  340. }
  341. });
  342. this.getBatch(this.tableData);
  343. });
  344. } else {
  345. console.log("void");
  346. }
  347. } else if (this.activeName == 'picture') {
  348. this.toGraph()
  349. }
  350. }
  351. // 动态信息点
  352. getBatch(data) {
  353. let param = {
  354. groupCode: "WD",
  355. appId: "datacenter",
  356. projectId: this.projectId,
  357. data: [],
  358. };
  359. this.all.forEach((head) => {
  360. if (head.category != "STATIC") {
  361. data.forEach((item) => {
  362. let cur = tools.dataForKey(item, head.path);
  363. if (cur) {
  364. param.data.push({
  365. objectId: item.id,
  366. infoCode: head.code,
  367. });
  368. }
  369. });
  370. }
  371. });
  372. if (param.data.length) {
  373. BeatchQueryParam(param).then((res) => {
  374. this.tableData = data.map((item) => {
  375. res.data.map((child) => {
  376. if (item.id == child.objectId) {
  377. if (!!child.data || child.data == 0) {
  378. this.all.map((head) => {
  379. if (head.code == child.infoCode) {
  380. let contentVal = child.data;
  381. if (
  382. this.codeToDataSource[
  383. child.infoCode
  384. ]
  385. ) {
  386. contentVal = this.codeToDataSource[
  387. child.infoCode
  388. ][child.data];
  389. }
  390. tools.setDataForKey(
  391. item,
  392. head.path,
  393. contentVal
  394. );
  395. }
  396. });
  397. } else {
  398. this.all.map((head) => {
  399. if (head.code == child.infoCode) {
  400. tools.setDataForKey(
  401. item,
  402. head.path,
  403. child.error
  404. );
  405. }
  406. });
  407. }
  408. }
  409. });
  410. return item;
  411. });
  412. });
  413. }
  414. }
  415. handleChange(val) {
  416. console.log(val);
  417. }
  418. // 当前分页
  419. handleCurrentChange(val: number) {
  420. this.paginationList.page = val;
  421. this.changeCascader();
  422. }
  423. handleSizeChange(val: number) {
  424. this.paginationList.size = val;
  425. this.changeCascader();
  426. }
  427. // 搜索
  428. searchValue(val: string) {
  429. this.inputSearch = val;
  430. this.changeCascader();
  431. }
  432. // tab页切换
  433. tabChange() {
  434. if (this.activeName == "picture") {
  435. this.$nextTick(() => {
  436. this.toGraph()
  437. });
  438. }
  439. }
  440. // 切换至图
  441. toGraph() {
  442. if (this.building.length) {
  443. if (
  444. this.building.indexOf("noKnow") < 0 &&
  445. this.building.indexOf("all") < 0
  446. ) {
  447. this.$refs.spaceGraph.getData(this.floorToMap[this.building[1]]);
  448. } else {
  449. this.$refs.spaceGraph.noMap();
  450. }
  451. } else {
  452. this.$refs.spaceGraph.noMap();
  453. }
  454. }
  455. }
  456. </script>
  457. <style lang="scss" scoped>
  458. .void {
  459. margin-top: 200px;
  460. }
  461. .align {
  462. display: flex;
  463. align-items: center;
  464. justify-content: center;
  465. flex-direction: column;
  466. flex-wrap: wrap;
  467. }
  468. .space-index {
  469. background: #fff;
  470. padding: 12px;
  471. height: 100%;
  472. .small-divider {
  473. margin: 12px 0;
  474. }
  475. .tabs {
  476. position: relative;
  477. height: calc(100% - 92px);
  478. ::v-deep .el-tabs__header {
  479. margin: 0;
  480. }
  481. .tab-content {
  482. height: calc(100% - 41px);
  483. border: 1px solid #e1e7ea;
  484. border-top: none;
  485. padding-bottom: 12px;
  486. .search {
  487. padding: 16px;
  488. //border-bottom: 1px solid #e1e7ea;
  489. & > .item + .item {
  490. margin-left: 16px;
  491. }
  492. }
  493. .borderBottom{
  494. border-bottom: 1px solid #e1e7ea;
  495. }
  496. .graph {
  497. height: calc(100% - 64px);
  498. }
  499. }
  500. }
  501. .adm-pagination {
  502. right: 10px;
  503. position: absolute;
  504. bottom: 10px;
  505. }
  506. }
  507. </style>