index.vue 17 KB

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