index.vue 14 KB

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