index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  1. <template>
  2. <div class="box">
  3. <el-container style="height:100%">
  4. <el-header>
  5. <div class="spaceName">
  6. <b>空间名称:</b>{{spaceDetails.RoomLocalName?spaceDetails.RoomLocalName:"-"}}
  7. </div>
  8. </el-header>
  9. <el-container>
  10. <el-aside width="450px">
  11. <div class="aside-top">
  12. <div class="aside-top-left">
  13. <p><b>空间功能区类型:</b>{{spaceDetails.RoomFuncType?spaceDetails.RoomFuncType:"-"}}</p>
  14. <p style="padding-right: 10px"><b>备注文字:</b>{{spaceDetails.Intro?spaceDetails.Intro:"-"}}</p>
  15. </div>
  16. <div class="aside-top-right">
  17. <p><b>空间二维码:</b><span v-if="!spaceDetails.RoomQRCode">-</span></p>
  18. <img :src="'/image-service/common/file_get/'+ spaceDetails.RoomQRCode +'?systemId=dataPlatform'" alt="二维码图片"
  19. v-if="spaceDetails.RoomQRCode">
  20. </div>
  21. </div>
  22. <div>
  23. <p><b>位置图片:</b></p>
  24. <div v-show="spaceDetails.Outline && spaceDetails.Outline[0] && spaceDetails.Outline[0].length" id="graphy" ref="graphy"
  25. style="width:400px;height:280px;" v-loading="canvasLoading">
  26. <div style="color:#333;font-weight: 700">{{buildingFloor}}</div>
  27. <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  28. </div>
  29. </div>
  30. <div v-show="spaceDetails.Outline && !spaceDetails.Outline[0] || !spaceDetails.Outline"
  31. style="height: 280px;transform: translateY(30%);text-align:center;">
  32. <i class="icon-wushuju iconfont"></i>
  33. 数据暂无
  34. </div>
  35. <div class="space-img" style="height:400px;margin-top:40px;">
  36. <el-scrollbar>
  37. <p><b>空间照片:</b></p>
  38. <div v-if="spaceDetails.Pic">
  39. <div class="img-box" v-for="(item) in spaceDetails.Pic" :key='`${item.Id}+${item.Key}`'>
  40. <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`" alt="空间图片">
  41. </div>
  42. </div>
  43. <div v-show="!spaceDetails.Pic" style="height:100%;transform: translateY(50%);textAlign:center;">
  44. <i class="icon-wushuju iconfont"></i>
  45. 数据暂无
  46. </div>
  47. </el-scrollbar>
  48. </div>
  49. </el-aside>
  50. <el-main>
  51. <el-tabs v-model="activeTab" type='card'>
  52. <template v-for="(item,index) in tabsList">
  53. <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
  54. <section v-show="activeTab === 'staticData'">
  55. <el-radio-group
  56. v-model="radio"
  57. style=" margin: 0 10px;"
  58. @change="changRadio"
  59. v-for="(item,index) in radioList"
  60. :key="index"
  61. >
  62. <el-radio :label="item.label">{{item.value}}</el-radio>
  63. </el-radio-group>
  64. <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
  65. </section>
  66. <section v-show="activeTab === 'dynamicData'">
  67. <div style="text-align: left;margin-bottom: 10px">
  68. <el-checkbox v-model="onlyMessage" @change="handleCheckbox">只看需采集的信息点</el-checkbox>
  69. </div>
  70. <el-table height="700" ref="multipleTable" :data="tableData" stripe :header-cell-style="headerStyle">
  71. <el-table-column prop="InfoPointName" label="信息点名称">
  72. <template slot-scope="scope">
  73. <div>
  74. <span>{{ scope.row.InfoPointName}}</span>
  75. <span class="unit">{{scope.row.Unit?`${"("+scope.row.Unit+")"}`:""}}</span>
  76. </div>
  77. </template>
  78. </el-table-column>
  79. <el-table-column prop="functionNo" label="表号功能号"></el-table-column>
  80. <el-table-column prop="functionNoDynamicData" label="动态数据"></el-table-column>
  81. <el-table-column prop="functionNoTime" label="数据采集时间"></el-table-column>
  82. <!-- 后台未提供,暂不显示 -->
  83. <!-- <el-table-column prop="LastUpdate" label="数据采集时间"></el-table-column> -->
  84. <template slot="empty">
  85. <div style="height: 60%;transform: translateY(50%);">
  86. <i class="icon-wushuju iconfont"></i>
  87. 数据暂无
  88. </div>
  89. </template>
  90. </el-table>
  91. </section>
  92. <div v-if="activeTab === 'objectRelationship'" class="objectRelationship">
  93. <div class="objectRelationship-left">
  94. <h5>空间内设备:</h5>
  95. <eqToSpaceTable :params="params" type="Equipment"></eqToSpaceTable>
  96. </div>
  97. <div class="objectRelationship-center">
  98. <h5>服务于空间的设备:</h5>
  99. <eqToSpaceTable :params="params" type="EquipmentFor"></eqToSpaceTable>
  100. </div>
  101. <div class="objectRelationship-right">
  102. <h5>空间内系统:</h5>
  103. <syInSpaceTable :params="params" type="generalSystem"></syInSpaceTable>
  104. </div>
  105. </div>
  106. </el-tab-pane>
  107. </template>
  108. </el-tabs>
  109. </el-main>
  110. </el-container>
  111. </el-container>
  112. </div>
  113. </template>
  114. <script>
  115. import {BeatchQueryParam, floorQuery, getDataDictionary, zoneQuery, zoneQueryOutline} from '@/api/scan/request'
  116. import eqToSpaceTable from '@/components/business_space/newTables/eqToSpaceTable'
  117. import syInSpaceTable from '@/components/business_space/newTables/syInSpaceTable'
  118. import {DivideFloorScene, FloorView} from "@saga-web/cad-engine/lib";
  119. import tools from "@/utils/scan/tools";
  120. import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
  121. export default {
  122. data() {
  123. return {
  124. tabsList: [
  125. {Code: 'staticData', Name: '静态数据'},
  126. {Code: 'dynamicData', Name: '动态数据'},
  127. {Code: 'objectRelationship', Name: '对象关系'}
  128. ],
  129. activeTab: 'staticData',
  130. checked: true,
  131. spaceDetails: {},
  132. iframeSrc: '',
  133. proId: '',
  134. params: {},
  135. view: null,
  136. scene: null,
  137. canvasWidth: 410,
  138. canvasHeight: 300,
  139. page: {
  140. pageSize: 50,
  141. pageSizes: [10, 20, 50, 100],
  142. pageNumber: 1,
  143. total: 0
  144. },
  145. tableData: [],
  146. headerStyle: {// 列表样式
  147. backgroundColor: '#e1e4e5',
  148. color: '#2b2b2b',
  149. lineHeight: '30px'
  150. },
  151. secret: '',
  152. canvasLoading: false,
  153. buildingFloor: localStorage.getItem('buildingFloor'),
  154. onlyMessage: false,
  155. exhibitionBaseInformation: {
  156. information: {},
  157. },
  158. pointData: [],
  159. instance: {},
  160. radioList: [
  161. {
  162. value: '显示全部信息点',
  163. label: '1'
  164. },
  165. {
  166. value: '显示有值信息点',
  167. label: '2'
  168. }
  169. ],
  170. radio: '1'
  171. }
  172. },
  173. components: {
  174. eqToSpaceTable,
  175. syInSpaceTable,
  176. exhibitionBaseInformation
  177. },
  178. beforeRouteEnter(to, from, next) {
  179. if (to.query.RoomID && to.query.zone) {
  180. next();
  181. }
  182. },
  183. created() {
  184. if (this.$route.name === "spaceLedger" && this.$route.query.RoomID && this.$route.query.zone) {
  185. this.getData();
  186. }
  187. },
  188. updated() {
  189. },
  190. computed: {},
  191. methods: {
  192. getData() {
  193. //获取表头
  194. let params1 = {
  195. data: {
  196. Orders: "sort asc",
  197. PageNumber: 1,
  198. PageSize: 1000
  199. },
  200. type: this.$route.query.zone
  201. }
  202. // 获取空间数据
  203. let params2 = {
  204. Filters: `RoomID="${this.$route.query.RoomID}"`,
  205. ZoneType: this.$route.query.zone
  206. }
  207. this.params = this.$route.query;
  208. let promise1 = new Promise((resolve, reject) => {
  209. getDataDictionary(params1, res => {
  210. resolve(res)
  211. })
  212. })
  213. let promise2 = new Promise((resolve, reject) => {
  214. zoneQuery(params2, res => {
  215. resolve(res)
  216. })
  217. })
  218. Promise.all([promise1, promise2]).then(values => {
  219. this.pointData = values[0].Content;
  220. this.spaceDetails = values[1].Content[0];
  221. this.getOutline();
  222. // if (this.spaceDetails.Outline && this.spaceDetails.Outline[0] && this.spaceDetails.Outline[0].length) {
  223. // this.getSpaceFloor();
  224. // }
  225. let obj = values[1].Content[0] ? this.deepCopy(values[1].Content[0]) : values[1].Content[0];
  226. obj = tools.flattenKeys(obj);
  227. for(let key in obj) {
  228. if(Array.isArray(obj[key]) && !obj[key].length) {
  229. delete obj[key]
  230. }
  231. }
  232. this.instance = obj;
  233. this.getInFormationPoitnName();
  234. this.handleRadios(this.radio);
  235. })
  236. },
  237. getOutline(){
  238. zoneQueryOutline({
  239. Filters: `RoomID="${this.$route.query.RoomID}"`,
  240. ZoneType: this.$route.query.zone
  241. },res => {
  242. if(res.Content[0]&&res.Content[0].Outline&&res.Content[0].Outline.length){
  243. this.spaceDetails.Outline = res.Content[0].Outline;
  244. this.getSpaceFloor();
  245. }
  246. })
  247. },
  248. deepCopy(obj) {
  249. return JSON.parse(JSON.stringify(obj))
  250. },
  251. getSpaceFloor() {
  252. // 获取业务空间楼层
  253. let params = {
  254. Filters: `FloorID='${this.spaceDetails.FloorId}'`
  255. }
  256. floorQuery(params, res => {
  257. if (res.Content[0] && res.Content[0].StructureInfo && res.Content[0].StructureInfo.FloorMap) {
  258. this.FloorMap = res.Content[0].StructureInfo.FloorMap;
  259. this.getGraphy();
  260. }
  261. })
  262. },
  263. getGraphy() {// 绘制空间位置图片
  264. let that = this;
  265. that.clearGraphy()
  266. that.scene = new DivideFloorScene();
  267. this.canvasLoading = true;
  268. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  269. that.canvasLoading = false;
  270. if (res == 'error') {
  271. this.FloorMap = '';
  272. this.$message.warning('数据解析异常');
  273. return;
  274. }
  275. that.view.scene = that.scene;
  276. that.view.fitSceneToView();
  277. let tempArr = {
  278. RoomLocalName: this.spaceDetails.RoomLocalName,
  279. OutLine: this.spaceDetails.Outline,
  280. RoomID: this.spaceDetails.RoomID,
  281. Color: "#F56C6C",
  282. HighLightFlag: true
  283. }
  284. that.scene.addZoneList([tempArr]);
  285. this.scene.isSpaceSelectable = false;
  286. })
  287. },
  288. clearGraphy() {
  289. if (this.view && this.view.scene) {
  290. this.view.scene = null;
  291. return
  292. }
  293. this.view = new FloorView('floorCanvas')
  294. },
  295. getInFormationPoitnName() {// 获取动态数据
  296. let proId = localStorage.getItem('projectId');
  297. let secret = localStorage.getItem('secret');
  298. let params = {
  299. data: {
  300. Filters: 'InputMode in ["L1","L2","L","M"]',
  301. Orders: "sort asc",
  302. PageNumber: 1,
  303. PageSize: 500
  304. },
  305. type: this.$route.query.zone
  306. }
  307. let param = {
  308. secret: secret,
  309. ProjId: proId,
  310. data: {
  311. criterias: []
  312. }
  313. }
  314. getDataDictionary(params, res => {// 获取表号功能号
  315. // this.tableData = res.Content;
  316. if (this.onlyMessage) {
  317. this.tableData = res.Content.filter(i => i.Visible)
  318. } else {
  319. this.tableData = res.Content
  320. }
  321. this.tableData.map(item => {
  322. let cur = tools.dataForKey(this.spaceDetails, item.Path);
  323. // item.functionNo = cur;
  324. param.data.criterias.push({
  325. id: this.spaceDetails.RoomID,
  326. code: item.InfoPointCode
  327. });
  328. })
  329. BeatchQueryParam(param, res => {// 获取动态数据
  330. res.Content.forEach((item, index) => {
  331. this.$set(this.tableData[index], 'functionNo', item.data)
  332. this.$set(this.tableData[index], 'functionNoTime', item.receivetime)
  333. tools.setDataForKey(
  334. this.spaceDetails,
  335. this.tableData[index].Path,
  336. this.$set(this.tableData[index], "functionNoDynamicData", item.interrupt ? '已断数' : (item.error ? item.value ? "表号功能号不存在" : "未维护" : "暂未采集到实时数据"))
  337. );
  338. })
  339. });
  340. })
  341. },
  342. handleCheckbox(val) {
  343. this.onlyMessage = val
  344. this.getInFormationPoitnName()
  345. },
  346. displayData(arr) {//对数据进行处理传给组件展示
  347. const result = {}
  348. const resultEnergy = {};
  349. arr.forEach(i => {
  350. if (this.instance && this.instance.hasOwnProperty(i.Path) && this.currentRadio != 2) {
  351. i.value = this.instance[i.Path]
  352. }
  353. if (i.InputMode == 'C5') {
  354. if (this.instance && this.instance.hasOwnProperty(i.Path)) {
  355. let time = this.instance[i.Path]
  356. i.value = this.formatDate(time)
  357. }
  358. }
  359. if (i.DataSource && i.DataSource.length) {
  360. let source = JSON.parse(i.DataSource)
  361. //判断输入类型
  362. if (i.InputMode == 'D1L') {
  363. let d1l = tools.formatDataSource(i.DataSource)
  364. d1l.forEach(k => {
  365. if (k.Code == this.instance[i.Path]) {
  366. i.value = k.Name
  367. }
  368. })
  369. } else if (i.InputMode == 'D2' || i.InputMode == 'C6') {
  370. if (this.instance && this.instance.hasOwnProperty(i.Path)) {
  371. if (!Array.isArray(this.instance[i.Path])) {
  372. let transArray = this.instance[i.Path].split(',')
  373. i.value = source.filter(item => transArray.includes(item.Code)).map(item => item.Name).join(',')
  374. }
  375. }
  376. }
  377. source.forEach(j => {
  378. if (this.instance && j.Code == this.instance[i.Path]) {
  379. i.value = j.Name
  380. }
  381. })
  382. }
  383. switch (i.InputMode) {
  384. case "L":
  385. case "L1":
  386. case "L2":
  387. case "M":
  388. break;
  389. default:
  390. if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
  391. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
  392. Path: i.Path,
  393. InfoPointName: i.InfoPointName,
  394. InfoPointCode: i.InfoPointCode,
  395. Value: i.value,
  396. Visible: i.Visible,
  397. KeyWord: i.KeyWord,
  398. InputMode: i.InputMode
  399. })
  400. } else {
  401. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
  402. paths: [{
  403. Path: i.Path,
  404. InfoPointName: i.InfoPointName,
  405. InfoPointCode: i.InfoPointCode,
  406. Value: i.value,
  407. Visible: i.Visible,
  408. KeyWord: i.KeyWord,
  409. InputMode: i.InputMode
  410. }]
  411. }
  412. }
  413. }
  414. })
  415. this.exhibitionBaseInformation.information = result
  416. },
  417. changRadio(val) {
  418. this.handleRadios(val)
  419. this.radio = val
  420. },
  421. handleRadios(val) {
  422. let arr = []
  423. if (val == 1) {
  424. arr = this.pointData
  425. } else {
  426. let list = this.pointData
  427. list.map(j => {
  428. if (this.instance.hasOwnProperty(j.Path)) {
  429. return {
  430. ...j,
  431. value: this.instance[j.Path]
  432. }
  433. }
  434. })
  435. arr = list.filter(k => k.value)
  436. }
  437. this.displayData(arr)
  438. }
  439. },
  440. watch: {
  441. // 监听路由地址,并判断有RoomID和zone,重新请求空间数据
  442. "$route"(to, from) {
  443. if (this.$route.name === "spaceLedger" && this.$route.query.RoomID && this.$route.query.zone) {
  444. this.getData();
  445. }
  446. }
  447. }
  448. }
  449. </script>
  450. <style lang="less" scoped>
  451. /*.box{*/
  452. /* .content-box{*/
  453. /* width: 100%;*/
  454. /* height: calc(100% - 90px);*/
  455. /* }*/
  456. /*}*/
  457. .box.screen-router {
  458. padding: 0;
  459. section {
  460. .el-container {
  461. padding: 0;
  462. }
  463. }
  464. }
  465. .el-header {
  466. padding: 0;
  467. height: 30px !important;
  468. margin-top: -10px;
  469. .boxName {
  470. color: #fff;
  471. font-size: 16px;
  472. line-height: 50px;
  473. height: 50px !important;
  474. padding: 0 10px;
  475. background-color: #3f4f62;
  476. }
  477. .spaceName {
  478. font-size: 14px;
  479. line-height: 30px;
  480. border-bottom: 1px solid #e4e7ed;
  481. box-sizing: border-box;
  482. }
  483. }
  484. .el-aside {
  485. color: #333;
  486. border: 1px solid #e4e7ed;
  487. margin-top: 10px;
  488. padding: 10px;
  489. box-sizing: border-box;
  490. height: calc(100% - 10px);
  491. overflow: hidden;
  492. .aside-top {
  493. overflow: hidden;
  494. display: flex;
  495. .aside-top-left {
  496. flex: 3;
  497. }
  498. .aside-top-right {
  499. float: right;
  500. img {
  501. margin-left: -10px;
  502. width: 140px;
  503. height: 140px;
  504. }
  505. }
  506. }
  507. .space-img {
  508. width: 100%;
  509. .img-box {
  510. float: left;
  511. position: relative;
  512. width: 47%;
  513. height: 180px;
  514. margin: 10px 10px 0 0;
  515. overflow: hidden;
  516. img {
  517. position: absolute;
  518. left: 50%;
  519. top: 50%;
  520. transform: translate(-50%, -50%);
  521. width: 100%;
  522. }
  523. }
  524. }
  525. }
  526. .el-scrollbar {
  527. width: 430px;
  528. height: 100%;
  529. overflow-x: hidden !important;
  530. }
  531. .el-main {
  532. color: #333;
  533. /*text-align: center;*/
  534. overflow: hidden;
  535. width: 100%;
  536. padding: 10px 0 0 10px;
  537. }
  538. .el-tabs.el-tabs--card.el-tabs--top {
  539. height: 100% !important;
  540. width: 100%;
  541. }
  542. .objectRelationship {
  543. height: 100%;
  544. width: 100%;
  545. display: flex;
  546. .objectRelationship-left,
  547. .objectRelationship-center,
  548. .objectRelationship-right {
  549. flex: 1;
  550. margin-right: 10px;
  551. text-align: left;
  552. height: 100% !important;
  553. }
  554. }
  555. #pane-dynamicData {
  556. height: calc(100% - 10px);
  557. }
  558. .el-tab-pane {
  559. height: 100%;
  560. }
  561. #pane-staticData {
  562. div {
  563. height: 100%;
  564. }
  565. }
  566. .unit {
  567. color: rgb(167, 167, 167);
  568. }
  569. #floorCanvas {
  570. position: static;
  571. }
  572. /deep/ .el-scrollbar__wrap {
  573. height: 100%;
  574. overflow-x: hidden !important;
  575. overflow-y: auto !important;
  576. }
  577. .objectRelationship {
  578. height: calc(100% - 46px) !important;
  579. }
  580. /deep/ .el-tabs__content {
  581. height: 100%;
  582. }
  583. </style>