index.vue 13 KB

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