index.vue 18 KB

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