index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. <template>
  2. <div class="box">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <span>{{exampleData.RoomLocalName||exampleData.RoomName||''}}</span>
  7. </div>
  8. <el-row class="spaceTypes">
  9. <div class="types">
  10. <el-tabs v-model="activeTab" type='card'>
  11. <template v-for="(item,index) in tabsList">
  12. <el-tab-pane :name="item.Code" :key="index" :label="item.Name"></el-tab-pane>
  13. </template>
  14. </el-tabs>
  15. </div>
  16. <div class="deleBtn">
  17. <el-button size="small" @click="deleteSpace">删除业务空间</el-button>
  18. </div>
  19. </el-row>
  20. <div v-if="activeTab=='detail'" class="content">
  21. <iframe v-if="params.isMyTab == 1" height="100%" width="100%" :src="iframeSrc"></iframe>
  22. <div v-else class="content-left">
  23. <div class="content-showType">
  24. <selectRadio
  25. :selectRadio="selectRadio"
  26. @changeRadio="changeRadio"
  27. />
  28. </div>
  29. <div class="content-point">
  30. <div class="content-point-left">
  31. <el-scrollbar style="height:100%;">
  32. <div >
  33. <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
  34. </div>
  35. </el-scrollbar>
  36. </div>
  37. <div class="content-point-right">
  38. <el-scrollbar style="height:100%;">
  39. <div>
  40. <exhibitionEnergy :exhibitionEnergy="exhibitionEnergy" />
  41. </div>
  42. </el-scrollbar>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="content-right">
  47. <div class="content-repair">
  48. <exhibitionMaintain :exhibitionMaintain="exhibitionMaintain"/>
  49. </div>
  50. <div class="content-media">
  51. <el-scrollbar style="height:100%;">
  52. <div >
  53. <exhibitionImage :exhibitionImage="exhibitionImage"/>
  54. <exhibitionVideo :exhibitionVideo="exhibitionVideo"/>
  55. <exhibitionFile :exhibitionFile="exhibitionFile"/>
  56. </div>
  57. </el-scrollbar>
  58. </div>
  59. </div>
  60. </div>
  61. <!-- 空间内设备列表--服务于空间的设备 -->
  62. <eqToSpaceTable v-else-if="activeTab=='Equipment' || activeTab=='EquipmentFor'" :params="params" :type="activeTab"></eqToSpaceTable>
  63. <!-- 空间内系统 -->
  64. <syInSpaceTable v-else-if="activeTab=='generalSystem'" :params="params" :type="activeTab"></syInSpaceTable>
  65. </div>
  66. </div>
  67. </template>
  68. <script>
  69. import {mapGetters} from "vuex";
  70. import tools from "@/utils/scan/tools";
  71. import {deleteZone, getDataDictionary, queryZone} from '@/api/scan/request';
  72. import eqToSpaceTable from '@/components/business_space/newTables/eqToSpaceTable';
  73. import syInSpaceTable from '@/components/business_space/newTables/syInSpaceTable';
  74. import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
  75. import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
  76. import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
  77. import exhibitionVideo from "@/components/ledger/details/detail/exhibitionVideo";
  78. import exhibitionCrux from "@/components/ledger/details/detail/exhibitionCrux";
  79. import exhibitionEnergy from "@/components/ledger/details/detail/exhibitionEnergy";
  80. import exhibitionMaintain from "@/components/ledger/details/detail/exhibitionMaintain";
  81. import selectRadio from "@/components/ledger/details/detail/selectRadio";
  82. export default {
  83. data() {
  84. return {
  85. params: {}, //参数-包含空间id 分区类型 进入方式(1-平面图 2-列表)
  86. tabsList: [
  87. {Code: 'detail', Name: '空间详情'},
  88. {Code: 'Equipment', Name: '空间内设备'},
  89. {Code: 'EquipmentFor', Name: '服务于空间的设备'},
  90. {Code: 'generalSystem', Name: '空间内系统'},
  91. ], //tab页
  92. activeTab: 'detail', //当前选中的tab
  93. pointData: [], //信息点数据
  94. exampleData: {}, //实例数据
  95. criterias: [], //动态参数
  96. instance: {},
  97. iframeSrc: '', //空间详情iframe
  98. selectRadio: {
  99. information: '设备信息点',
  100. initRadio: '1',
  101. radioList: [
  102. {
  103. value: '显示需采集信息点',
  104. label: '1'
  105. },
  106. {
  107. value: '显示有值信息点',
  108. label: '2'
  109. },
  110. {
  111. value: '显示全部信息点',
  112. label: '3'
  113. }
  114. ]
  115. },
  116. exhibitionBaseInformation: {
  117. information: {},
  118. style:2
  119. },
  120. exhibitionEnergy: {
  121. title: '能耗信息',
  122. dynamic: [],
  123. },
  124. exhibitionMaintain: {
  125. title: '维修/维保记录'
  126. },
  127. exhibitionFile: {
  128. title: '文件',
  129. list: {}
  130. },
  131. exhibitionCrux: {
  132. title: '关键信息点:',
  133. cruxArray: [],
  134. allMessage: [],//全部信息点
  135. },
  136. exhibitionImage: {
  137. title: '图片',
  138. list: {}
  139. },
  140. exhibitionVideo: {
  141. title: '视频',
  142. list: {}
  143. }
  144. }
  145. },
  146. computed: {
  147. ...mapGetters("layout", ["projectId", "userId", "secret"])
  148. },
  149. components: {
  150. eqToSpaceTable,
  151. syInSpaceTable,
  152. exhibitionBaseInformation,
  153. exhibitionFile,
  154. exhibitionVideo,
  155. exhibitionImage,
  156. exhibitionMaintain,
  157. selectRadio,
  158. exhibitionCrux,
  159. exhibitionEnergy
  160. },
  161. created() {
  162. this.params = this.$route.query;
  163. this.getData();
  164. this.setFrame();
  165. },
  166. mounted() { },
  167. watch: {
  168. projectId() { }
  169. },
  170. methods: {
  171. deepCopy(obj) {
  172. return JSON.parse(JSON.stringify(obj))
  173. },
  174. // 返回
  175. goBack() {
  176. this.$router.push({
  177. name: "spacelist",
  178. params: this.params
  179. })
  180. },
  181. // 查询空间详情
  182. getData() {
  183. let params1 = {
  184. data: {
  185. Orders: "sort asc",
  186. PageNumber: 1,
  187. PageSize: 1000
  188. },
  189. type: this.params.zone
  190. }, params2 = {
  191. data: {
  192. Filters: `RoomID='${this.params.RoomID}'`
  193. },
  194. zone: this.params.zone
  195. };
  196. let promise1 = new Promise((resolve, reject) => {
  197. getDataDictionary(params1, res => {
  198. resolve(res)
  199. })
  200. })
  201. let promise2 = new Promise((resolve, reject) => {
  202. queryZone(params2, res => {
  203. resolve(res)
  204. })
  205. })
  206. Promise.all([promise1, promise2]).then(values => {
  207. this.pointData = values[0].Content;
  208. this.exampleData = values[1].Content[0];
  209. let obj = this.deepCopy(values[1].Content[0]);
  210. obj = tools.flattenKeys(obj);
  211. this.instance = obj;
  212. this.handleRadios(1)
  213. this.pointData.forEach(item => {
  214. if (item.InputMode == "L" || item.InputMode == "L1" || item.InputMode == "L2" || item.InputMode == "M") {
  215. let cur = tools.dataForKey(this.exampleData, item.Path);
  216. if (cur) {
  217. this.criterias.push({
  218. id: exampleData.EquipID,
  219. code: item.InfoPointCode
  220. })
  221. }
  222. }
  223. })
  224. let params = { //获取动态参数
  225. secret: this.secret,
  226. ProjId: this.projectId,
  227. data: {
  228. criterias: this.criterias
  229. }
  230. }
  231. if (this.criterias.length) {
  232. BeatchQueryParam(params, res => {
  233. res.Content.map(child => {
  234. this.pointData.forEach(head => {
  235. if (head.InfoPointCode == child.code) {
  236. this.exhibitionEnergy.dynamic.push({
  237. InfoPointCode: head.InfoPointCode,
  238. InfoPointName: head.InfoPointName,
  239. Path: head.Path,
  240. value: child.value,
  241. data: child.data || '--',
  242. receivetime: child.receivetime || '',
  243. error: child.error || '',
  244. Unit: head.Unit || ''
  245. })
  246. }
  247. })
  248. });
  249. })
  250. }
  251. })
  252. },
  253. handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
  254. let arr = []
  255. //关键信息点
  256. this.exhibitionCrux.cruxArray = this.pointData.filter(i => i.KeyWord)
  257. this.exhibitionCrux.cruxArray.map(i => {
  258. if (this.instance.hasOwnProperty(i.Path)) {
  259. return {
  260. ...i,
  261. value: this.instance[i.Path]
  262. }
  263. }
  264. })
  265. if (val == 1) { //需采集信息
  266. arr = this.pointData.filter(i => i.Visible)
  267. // 图片和的处理
  268. this.handlePicList(arr)
  269. // 文件处理
  270. this.handleFileList(arr)
  271. } else if (val == 2) { //有值信息点
  272. let list = this.pointData
  273. list.map(j => {
  274. if (this.instance.hasOwnProperty(j.Path)) {
  275. return {
  276. ...j,
  277. value: this.instance[j.Path]
  278. }
  279. }
  280. arr = list.filter(k => k.value)
  281. this.handlePicList(arr)
  282. this.handleFileList(arr)
  283. })
  284. } else { //全部信息点
  285. arr = this.pointData
  286. this.handlePicList(arr)
  287. this.handleFileList(arr)
  288. }
  289. this.displayData(arr)
  290. },
  291. handlePicList(arr) {
  292. let picObject = {}
  293. //处理数据格式
  294. arr.map(i => {
  295. if (i.InputMode == 'F2') {
  296. switch (i.Path) {
  297. case 'LedgerParam.PhotoDoc.Drawing':
  298. case 'LedgerParam.Siteinstall.InstallPic':
  299. case 'LedgerParam.Siteinstall.InstallDrawing':
  300. case 'LedgerParam.PhotoDoc.Nameplate':
  301. if (this.instance.hasOwnProperty(i.Path)) {
  302. i.PicList = this.instance[i.Path]
  303. }
  304. if (picObject[i.InfoPointName]) {
  305. } else {
  306. picObject[i.InfoPointName] = []
  307. }
  308. picObject[i.InfoPointName].push({
  309. ...i,
  310. })
  311. break;
  312. }
  313. }
  314. })
  315. //展示图片
  316. this.exhibitionImage.list = picObject
  317. },
  318. handleFileList(arr) {
  319. let picObject = {}
  320. //处理数据格式
  321. arr.map(i => {
  322. if (i.InputMode == 'F2') {
  323. switch (i.Path) {
  324. case 'LedgerParam.InsuranceDoc.InsuranceFile':
  325. case 'LedgerParam.PhotoDoc.Archive':
  326. case 'LedgerParam.Siteinstall.CheckReport':
  327. if (this.instance.hasOwnProperty(i.Path)) {
  328. i.fileList = this.instance[i.Path]
  329. }
  330. if (picObject[i.InfoPointName]) {
  331. } else {
  332. picObject[i.InfoPointName] = []
  333. }
  334. picObject[i.InfoPointName].push({
  335. ...i,
  336. })
  337. break
  338. }
  339. }
  340. })
  341. //展示文件
  342. this.exhibitionFile.list = picObject
  343. },
  344. changeRadio(val) { //1,需采集,2,有值,3,全部
  345. this.handleRadios(val)
  346. this.currentRadio = val
  347. },
  348. displayData(arr) {//对数据进行处理传给组件展示
  349. const result = {}
  350. arr.forEach(i => {
  351. if (this.instance.hasOwnProperty(i.Path) && this.currentRadio != 2) {
  352. i.value = this.instance[i.Path]
  353. }
  354. if (i.DataSource && i.DataSource.length) {
  355. let source = JSON.parse(i.DataSource)
  356. source.forEach(j => {
  357. if (j.Code == this.instance[i.Path]) {
  358. console.log(j.Name)
  359. i.value = j.Name
  360. }
  361. })
  362. }
  363. switch (i.InputMode) {
  364. case "L":
  365. case "L1":
  366. case "L2":
  367. case "M":
  368. break;
  369. default:
  370. if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
  371. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
  372. Path: i.Path,
  373. InfoPointName: i.InfoPointName,
  374. InfoPointCode: i.InfoPointCode,
  375. Value: i.value,
  376. Visible: i.Visible,
  377. KeyWord: i.KeyWord,
  378. InputMode:i.InputMode
  379. })
  380. } else {
  381. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
  382. paths: [{
  383. Path: i.Path,
  384. InfoPointName: i.InfoPointName,
  385. InfoPointCode: i.InfoPointCode,
  386. Value: i.value,
  387. Visible: i.Visible,
  388. KeyWord: i.KeyWord,
  389. InputMode:i.InputMode
  390. }]
  391. }
  392. }
  393. }
  394. })
  395. this.exhibitionBaseInformation.information = result
  396. this.exhibitionCrux.allMessage = result
  397. },
  398. // 设置iframe
  399. setFrame() {
  400. this.iframeSrc = `${process.env.BASE_URL}:8889/#/changeMess?perjectId=${this.projectId}&secret=${this.secret}&id=${this.params.RoomID}&type=${this.params.zone}`;
  401. // this.iframeSrc = this.params.isMyTab == 2 ?
  402. // `${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.params.RoomID}&type=0&code=${this.params.zone}`
  403. // : `${process.env.BASE_URL}:8889/#/changeMess?perjectId=${this.projectId}&secret=${this.secret}&id=${this.params.RoomID}&type=${this.params.zone}`;
  404. },
  405. // 删除业务空间
  406. deleteSpace() {
  407. this.$confirm("此操作将删除业务空间,是否继续?", "提示", {
  408. confirmButtonText: '确定',
  409. cancelButtonText: '取消',
  410. type: 'warning'
  411. }).then(() => {
  412. let pa = {
  413. data: [{
  414. RoomID: this.exampleData.RoomID
  415. }],
  416. zone: this.params.zone
  417. }
  418. deleteZone(pa, res => {
  419. this.$message.success('删除成功')
  420. this.goBack()
  421. })
  422. }).catch(() => {
  423. this.getData()
  424. this.$message("取消删除")
  425. })
  426. },
  427. }
  428. };
  429. </script>
  430. <style scoped lang='less'>
  431. .box {
  432. .condition {
  433. padding: 10px;
  434. display: flex;
  435. height: 100%;
  436. flex-direction: column;
  437. border: 1px solid #dfe6ec;
  438. box-sizing: border-box;
  439. background: #fff;
  440. .header {
  441. padding-bottom: 10px;
  442. span {
  443. line-height: 33px;
  444. margin-left: 15px;
  445. }
  446. }
  447. .spaceTypes {
  448. .types {
  449. float: left;
  450. width: calc(100% - 200px);
  451. /deep/ .el-tabs__item.is-top {
  452. border-top: 2px solid transparent;
  453. &.is-active {
  454. border-top: 2px solid #409eff;
  455. }
  456. }
  457. }
  458. .deleBtn {
  459. float: left;
  460. width: 200px;
  461. text-align: right;
  462. height: 40px;
  463. border-bottom: 1px solid #e4e7ed;
  464. }
  465. }
  466. .content {
  467. display: flex;
  468. flex-direction: row;
  469. box-sizing: border-box;
  470. height: calc(100% - 99px);
  471. .content-left {
  472. display: flex;
  473. flex-direction: column;
  474. flex: 1;
  475. .content-showType {
  476. height: 50px;
  477. border: 1px solid #ccc;
  478. border-bottom: none;
  479. box-sizing: border-box;
  480. }
  481. .content-point {
  482. display: flex;
  483. flex-direction: row;
  484. height: calc(100% - 50px);
  485. border: 1px solid #ccc;
  486. box-sizing: border-box;
  487. .content-point-left {
  488. flex: 1;
  489. }
  490. .content-point-right {
  491. width: 400px;
  492. border-left: 1px solid #ccc;
  493. }
  494. }
  495. }
  496. .content-right {
  497. width: 400px;
  498. margin-left: 10px;
  499. .content-repair {
  500. height: 50px;
  501. line-height: 50px;
  502. margin-bottom: 10px;
  503. border: 1px solid #ccc;
  504. box-sizing: border-box;
  505. }
  506. .content-media {
  507. height: calc(100% - 60px);
  508. border: 1px solid #ccc;
  509. box-sizing: border-box;
  510. }
  511. }
  512. }
  513. .main {
  514. margin-top: 10px;
  515. height: calc(100% - 96px);
  516. }
  517. .footer {
  518. margin-bottom: 10px;
  519. }
  520. /deep/ .el-scrollbar__wrap {
  521. overflow-x: hidden;
  522. }
  523. }
  524. }
  525. </style>
  526. <style lang="less">
  527. .el-table th {
  528. background-color: #d9d9d9;
  529. color: #000;
  530. }
  531. </style>