index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  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%);textAlign: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. <div v-show="activeTab === 'staticData'" style="width:100%;height:100%;text-align: left;"
  55. id="iframe-box"></div>
  56. <div v-show="activeTab === 'dynamicData'" style="width:100%;height:100%;">
  57. <div class="content-box">
  58. <div style="text-align: left;margin-bottom: 10px"> <el-checkbox v-model="onlyMessage" @change="handleCheckbox">只看需采集的信息点</el-checkbox></div>
  59. <el-table ref="multipleTable" :data="tableData" stripe :header-cell-style="headerStyle">
  60. <el-table-column prop="InfoPointName" label="信息点名称">
  61. <template slot-scope="scope">
  62. <div>
  63. <span>{{ scope.row.InfoPointName}}</span>
  64. <span class="unit">{{scope.row.Unit?`${"("+scope.row.Unit+")"}`:""}}</span>
  65. </div>
  66. </template>
  67. </el-table-column>
  68. <el-table-column prop="functionNo" label="表号功能号"></el-table-column>
  69. <el-table-column prop="functionNoDynamicData" label="动态数据"></el-table-column>
  70. <el-table-column prop="functionNoTime" label="数据采集时间"></el-table-column>
  71. <!-- 后台未提供,暂不显示 -->
  72. <!-- <el-table-column prop="LastUpdate" label="数据采集时间"></el-table-column> -->
  73. <template slot="empty">
  74. <div style="height: 60%;transform: translateY(50%);">
  75. <i class="icon-wushuju iconfont"></i>
  76. 数据暂无
  77. </div>
  78. </template>
  79. </el-table>
  80. </div>
  81. </div>
  82. <div v-if="activeTab === 'objectRelationship'" class="objectRelationship">
  83. <div class="objectRelationship-left">
  84. <h5>空间内设备:</h5>
  85. <eqToSpaceTable :params="params" type="Equipment"></eqToSpaceTable>
  86. </div>
  87. <div class="objectRelationship-center">
  88. <h5>服务于空间的设备:</h5>
  89. <eqToSpaceTable :params="params" type="EquipmentFor"></eqToSpaceTable>
  90. </div>
  91. <div class="objectRelationship-right">
  92. <h5>空间内系统:</h5>
  93. <syInSpaceTable :params="params" type="generalSystem"></syInSpaceTable>
  94. </div>
  95. </div>
  96. </el-tab-pane>
  97. </template>
  98. </el-tabs>
  99. </el-main>
  100. </el-container>
  101. </el-container>
  102. </div>
  103. </template>
  104. <script>
  105. import {BeatchQueryParam, floorQuery, getDataDictionary, zoneQuery} from '@/api/scan/request'
  106. import eqToSpaceTable from '@/components/business_space/newTables/eqToSpaceTable'
  107. import syInSpaceTable from '@/components/business_space/newTables/syInSpaceTable'
  108. import {DivideFloorScene, FloorView} from "@saga-web/cad-engine/lib";
  109. import tools from "@/utils/scan/tools";
  110. export default {
  111. data() {
  112. return {
  113. tabsList: [
  114. {Code: 'staticData', Name: '静态数据'},
  115. {Code: 'dynamicData', Name: '动态数据'},
  116. {Code: 'objectRelationship', Name: '对象关系'}
  117. ],
  118. activeTab: 'staticData',
  119. checked: true,
  120. spaceDetails: {},
  121. iframeSrc: '',
  122. proId: '',
  123. params: {},
  124. view: null,
  125. scene: null,
  126. canvasWidth: 410,
  127. canvasHeight: 300,
  128. page: {
  129. pageSize: 50,
  130. pageSizes: [10, 20, 50, 100],
  131. pageNumber: 1,
  132. total: 0
  133. },
  134. tableData: [],
  135. headerStyle: {// 列表样式
  136. backgroundColor: '#e1e4e5',
  137. color: '#2b2b2b',
  138. lineHeight: '30px'
  139. },
  140. secret: '',
  141. canvasLoading: false,
  142. buildingFloor: localStorage.getItem('buildingFloor'),
  143. onlyMessage: false
  144. }
  145. },
  146. components: {
  147. eqToSpaceTable,
  148. syInSpaceTable
  149. },
  150. beforeRouteEnter(to, from, next) {
  151. if (to.query.RoomID && to.query.zone) {
  152. next();
  153. }
  154. },
  155. created() {
  156. if (this.$route.name === "spaceLedger" && this.$route.query.RoomID && this.$route.query.zone) {
  157. this.getData();
  158. }
  159. },
  160. updated() {
  161. },
  162. computed: {},
  163. methods: {
  164. getData() {
  165. this.params = this.$route.query;
  166. // 获取空间数据
  167. let params = {
  168. Filters: `RoomID="${this.$route.query.RoomID}"`,
  169. ZoneType: this.$route.query.zone
  170. }
  171. zoneQuery(params, res => {
  172. this.spaceDetails = res.Content[0];
  173. if (this.spaceDetails.Outline && this.spaceDetails.Outline[0] && this.spaceDetails.Outline[0].length) {
  174. this.getSpaceFloor();
  175. }
  176. this.setFrame();
  177. this.getInFormationPoitnName();
  178. })
  179. },
  180. setFrame() {
  181. // 设置静态数据tab的iframe地址
  182. this.proId = localStorage.getItem('projectId');
  183. this.secret = localStorage.getItem('secret');
  184. this.iframeSrc = `${process.env.BASE_URL}:8889/#/details?perjectId=${this.proId}&secret=${this.secret}&FmId=${this.$route.query.RoomID}&type=0&code=${this.$route.query.zone}`
  185. let box = document.getElementById('iframe-box');
  186. box.innerHTML = '';
  187. let iframe = document.createElement('iframe');
  188. iframe.src = this.iframeSrc
  189. iframe.style.width = '100%';
  190. iframe.style.height = '100%';
  191. box.appendChild(iframe);
  192. },
  193. getSpaceFloor() {
  194. // 获取业务空间楼层
  195. let params = {
  196. Filters: `FloorID='${this.spaceDetails.FloorId}'`
  197. }
  198. floorQuery(params, res => {
  199. if (res.Content[0] && res.Content[0].StructureInfo && res.Content[0].StructureInfo.FloorMap) {
  200. this.FloorMap = res.Content[0].StructureInfo.FloorMap;
  201. this.getGraphy();
  202. }
  203. })
  204. },
  205. getGraphy() {// 绘制空间位置图片
  206. let that = this;
  207. that.clearGraphy()
  208. that.scene = new DivideFloorScene();
  209. this.canvasLoading = true;
  210. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  211. that.canvasLoading = false;
  212. if (res == 'error') {
  213. this.FloorMap = '';
  214. this.$message.warning('数据解析异常');
  215. return;
  216. }
  217. that.view.scene = that.scene;
  218. that.view.fitSceneToView();
  219. let tempArr = {
  220. RoomLocalName: this.spaceDetails.RoomLocalName,
  221. OutLine: this.spaceDetails.Outline,
  222. RoomID: this.spaceDetails.RoomID,
  223. Color: "#F56C6C",
  224. HighLightFlag: true
  225. }
  226. that.scene.addZoneList([tempArr]);
  227. this.scene.isSpaceSelectable = false;
  228. })
  229. },
  230. clearGraphy() {
  231. if (this.view && this.view.scene) {
  232. this.view.scene = null;
  233. return
  234. }
  235. this.view = new FloorView('floorCanvas')
  236. },
  237. getInFormationPoitnName() {// 获取动态数据
  238. let proId = localStorage.getItem('projectId');
  239. let secret = localStorage.getItem('secret');
  240. let params = {
  241. data: {
  242. Filters: 'InputMode in ["L1","L2","L","M"]',
  243. Orders: "sort asc",
  244. PageNumber: 1,
  245. PageSize: 500
  246. },
  247. type: this.$route.query.zone
  248. }
  249. let param = {
  250. secret: secret,
  251. ProjId: proId,
  252. data: {
  253. criterias: []
  254. }
  255. }
  256. getDataDictionary(params, res => {// 获取表号功能号
  257. // this.tableData = res.Content;
  258. if (this.onlyMessage) {
  259. this.tableData = res.Content.filter(i => i.Visible)
  260. } else {
  261. this.tableData = res.Content
  262. }
  263. this.tableData.map(item => {
  264. let cur = tools.dataForKey(this.spaceDetails, item.Path);
  265. // item.functionNo = cur;
  266. param.data.criterias.push({
  267. id: this.spaceDetails.RoomID,
  268. code: item.InfoPointCode
  269. });
  270. })
  271. BeatchQueryParam(param, res => {// 获取动态数据
  272. res.Content.forEach((item, index) => {
  273. this.$set(this.tableData[index], 'functionNo', item.data)
  274. this.$set(this.tableData[index], 'functionNoTime', item.receivetime)
  275. tools.setDataForKey(
  276. this.spaceDetails,
  277. this.tableData[index].Path,
  278. this.$set(this.tableData[index], "functionNoDynamicData", item.interrupt ? '已断数' :(item.error ? item.value ? "表号功能号不存在" : "未维护" : "暂未采集到实时数据"))
  279. );
  280. })
  281. });
  282. })
  283. },
  284. handleCheckbox(val) {
  285. this.onlyMessage = val
  286. this.getInFormationPoitnName()
  287. }
  288. },
  289. watch: {
  290. // 监听路由地址,并判断有RoomID和zone,重新请求空间数据
  291. "$route"(to, from) {
  292. if (this.$route.name === "spaceLedger" && this.$route.query.RoomID && this.$route.query.zone) {
  293. this.getData();
  294. }
  295. }
  296. }
  297. }
  298. </script>
  299. <style lang="less" scoped>
  300. .box.screen-router {
  301. padding: 0;
  302. section {
  303. .el-container {
  304. padding: 0;
  305. }
  306. }
  307. }
  308. .el-header {
  309. padding: 0;
  310. height: 30px !important;
  311. margin-top: -10px;
  312. .boxName {
  313. color: #fff;
  314. font-size: 16px;
  315. line-height: 50px;
  316. height: 50px !important;
  317. padding: 0 10px;
  318. background-color: #3f4f62;
  319. }
  320. .spaceName {
  321. font-size: 14px;
  322. line-height: 30px;
  323. border-bottom: 1px solid #e4e7ed;
  324. box-sizing: border-box;
  325. }
  326. }
  327. .el-aside {
  328. color: #333;
  329. border: 1px solid #e4e7ed;
  330. margin-top: 10px;
  331. padding: 10px;
  332. box-sizing: border-box;
  333. height: calc(100% - 10px);
  334. overflow: hidden;
  335. .aside-top {
  336. overflow: hidden;
  337. display: flex;
  338. .aside-top-left {
  339. flex: 3;
  340. }
  341. .aside-top-right {
  342. float: right;
  343. img {
  344. margin-left: -10px;
  345. width: 140px;
  346. height: 140px;
  347. }
  348. }
  349. }
  350. .space-img {
  351. width: 100%;
  352. .img-box {
  353. margin-bottom: 20px;
  354. float: left;
  355. position: relative;
  356. width: 47%;
  357. height: 180px;
  358. margin: 10px 10px 0 0;
  359. overflow: hidden;
  360. img {
  361. position: absolute;
  362. left: 50%;
  363. top: 50%;
  364. transform: translate(-50%, -50%);
  365. width: 100%;
  366. }
  367. }
  368. }
  369. }
  370. .el-scrollbar {
  371. width: 430px;
  372. height: 100%;
  373. overflow-x: hidden !important;
  374. }
  375. .el-main {
  376. color: #333;
  377. text-align: center;
  378. overflow: hidden;
  379. width: 100%;
  380. padding: 10px 0 0 10px;
  381. }
  382. .el-tabs.el-tabs--card.el-tabs--top {
  383. height: 100% !important;
  384. width: 100%;
  385. }
  386. .objectRelationship {
  387. height: 100%;
  388. width: 100%;
  389. display: flex;
  390. .objectRelationship-left,
  391. .objectRelationship-center,
  392. .objectRelationship-right {
  393. flex: 1;
  394. margin-right: 10px;
  395. text-align: left;
  396. height: 100% !important;
  397. }
  398. }
  399. #pane-dynamicData {
  400. height: calc(100% - 10px);
  401. }
  402. .el-tab-pane {
  403. height: 100%;
  404. }
  405. #pane-staticData {
  406. div {
  407. height: 100%;
  408. }
  409. }
  410. .unit {
  411. color: rgb(167, 167, 167);
  412. }
  413. #floorCanvas {
  414. position: static;
  415. }
  416. /deep/ .el-scrollbar__wrap {
  417. height: 100%;
  418. overflow-x: hidden !important;
  419. overflow-y: auto !important;
  420. }
  421. .objectRelationship {
  422. height: calc(100% - 46px) !important;
  423. }
  424. /deep/ .el-tabs__content {
  425. height: 100%;
  426. }
  427. </style>