index.vue 21 KB

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