index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  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 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"/>
  43. <exhibitionVideo :exhibitionVideo="exhibitionVideo"/>
  44. <exhibitionFile :exhibitionFile="exhibitionFile"/>
  45. </div>
  46. </el-scrollbar>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="footer"></div>
  51. </div>
  52. </template>
  53. <script>
  54. import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
  55. import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
  56. import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
  57. import exhibitionVideo from "@/components/ledger/details/detail/exhibitionVideo";
  58. import exhibitionCrux from "@/components/ledger/details/detail/exhibitionCrux";
  59. import exhibitionEnergy from "@/components/ledger/details/detail/exhibitionEnergy";
  60. import exhibitionMaintain from "@/components/ledger/details/detail/exhibitionMaintain";
  61. import selectRadio from "@/components/ledger/details/detail/selectRadio";
  62. import tools from "@/utils/scan/tools"
  63. import {BeatchQueryParam, getDataDictionary, queryEquip} from "@/api/scan/request";
  64. import {mapGetters} from "vuex";
  65. function flattenKeys(obj) {
  66. let res = {}
  67. function isObject(val) {
  68. return typeof val === 'object' && !Array.isArray(val)
  69. }
  70. function digKeys(prev, obj) {
  71. Object.entries(obj).forEach(([key, value]) => {
  72. const currentKey = prev ? `${prev}.${key}` : key
  73. if (isObject(value)) {
  74. digKeys(currentKey, value)
  75. } else {
  76. res[currentKey] = value
  77. }
  78. })
  79. }
  80. digKeys('', obj)
  81. return res
  82. }
  83. export default {
  84. name: "deviceDetails",
  85. components: {
  86. exhibitionBaseInformation,
  87. exhibitionFile,
  88. exhibitionVideo,
  89. exhibitionImage,
  90. exhibitionMaintain,
  91. selectRadio,
  92. exhibitionCrux,
  93. exhibitionEnergy
  94. },
  95. created() {
  96. this.id = this.$route.query.equipId;
  97. this.name = this.$route.query.equipName;
  98. this.code = this.$route.query.equipCode;
  99. this.type = this.$route.query.type;
  100. this.list = this.$route.query.data;
  101. this.getData();
  102. console.log(this.$route.query)
  103. },
  104. computed: {
  105. ...mapGetters("layout", ["projectId", "secret", "userId"])
  106. },
  107. data() {
  108. return {
  109. id: '', //当前设备id
  110. name: '', //当前设备本地名称
  111. code: '', //当前设备的本地编码
  112. type: '', //设备类型
  113. list: [], //设备列表
  114. pointData: [], //信息点数据
  115. exampleData: {}, //实例数据
  116. currentRadio: '',//当前选中的select
  117. criterias: [], //动态参数
  118. selectRadio: {
  119. information: '设备信息点',
  120. radioList: [
  121. {
  122. value: '显示需采集信息点',
  123. label: '1'
  124. },
  125. {
  126. value: '显示有值信息点',
  127. label: '2'
  128. },
  129. {
  130. value: '显示全部信息点',
  131. label: '3'
  132. }
  133. ]
  134. },
  135. exhibitionBaseInformation: {
  136. information: {},
  137. style:2
  138. },
  139. exhibitionEnergy: {
  140. title: '能耗信息',
  141. dynamic: [],
  142. },
  143. exhibitionMaintain: {
  144. title: '维修/维保记录'
  145. },
  146. exhibitionFile: {
  147. title: '文件',
  148. list: {}
  149. },
  150. exhibitionCrux: {
  151. title: '关键信息点:',
  152. cruxArray: [],
  153. allMessage: [],//全部信息点
  154. },
  155. exhibitionImage: {
  156. title: '图片',
  157. list: {}
  158. },
  159. exhibitionVideo: {
  160. title: '视频',
  161. list: {}
  162. },
  163. instance: {},//实例信息处理
  164. }
  165. },
  166. methods: {
  167. deepCopy(obj) {
  168. return JSON.parse(JSON.stringify(obj))
  169. },
  170. cruxSuccess(){
  171. this.getData()
  172. },
  173. // 获取表头和实例数据(动态数据在组件中获取,在此格式化请求参数)
  174. getData() {
  175. let params1 = {
  176. data: {
  177. Orders: "sort asc",
  178. PageNumber: 1,
  179. PageSize: 1000
  180. },
  181. type: this.type
  182. }, params2 = {
  183. Filters: `EquipID='${this.id}'`,
  184. };
  185. let promise1 = new Promise((resolve, reject) => {
  186. getDataDictionary(params1, res => {
  187. resolve(res)
  188. })
  189. })
  190. let promise2 = new Promise((resolve, reject) => {
  191. queryEquip(params2, res => {
  192. resolve(res)
  193. })
  194. })
  195. Promise.all([promise1, promise2]).then(values => {
  196. this.pointData = values[0].Content;
  197. this.exampleData = values[1].Content[0];
  198. let obj = this.deepCopy(values[1].Content[0]);
  199. obj = flattenKeys(obj);
  200. this.instance = obj;
  201. this.handleRadios(1)
  202. this.pointData.forEach(item => {
  203. if (item.InputMode == "L" || item.InputMode == "L1" || item.InputMode == "L2" || item.InputMode == "M") {
  204. let cur = tools.dataForKey(this.exampleData, item.Path);
  205. if (cur) {
  206. this.criterias.push({
  207. id: this.exampleData.EquipID,
  208. code: item.InfoPointCode
  209. })
  210. }
  211. }
  212. })
  213. let params = { //获取动态参数
  214. secret: this.secret,
  215. ProjId: this.projectId,
  216. data: {
  217. criterias: this.criterias
  218. }
  219. }
  220. if (this.criterias.length) {
  221. BeatchQueryParam(params, res => {
  222. res.Content.map(child => {
  223. this.pointData.forEach(head => {
  224. if (head.InfoPointCode == child.code) {
  225. this.exhibitionEnergy.dynamic.push({
  226. InfoPointCode: head.InfoPointCode,
  227. InfoPointName: head.InfoPointName,
  228. Path: head.Path,
  229. value: child.value,
  230. data: child.data || '--',
  231. receivetime: child.receivetime || '',
  232. error: child.error || '',
  233. Unit: head.Unit || ''
  234. })
  235. }
  236. })
  237. });
  238. })
  239. }
  240. })
  241. },
  242. handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
  243. let arr = []
  244. if (val == 1) { //需采集信息
  245. arr = this.pointData.filter(i => i.Visible)
  246. //关键信息点
  247. this.exhibitionCrux.cruxArray = arr.filter(i => i.KeyWord)
  248. // 图片和的处理
  249. this.handlePicList(arr)
  250. // 文件处理
  251. this.handleFileList(arr)
  252. } else if (val == 2) { //有值信息点
  253. let list = this.pointData
  254. list.map(j => {
  255. if (this.exampleData.hasOwnProperty(j.Path)) {
  256. return {
  257. ...j,
  258. value: this.exampleData[j.Path]
  259. }
  260. }
  261. arr = list.filter(k => k.value)
  262. this.handlePicList(arr)
  263. this.handleFileList(arr)
  264. })
  265. } else { //全部信息点
  266. arr = this.pointData
  267. this.handlePicList(arr)
  268. this.handleFileList(arr)
  269. }
  270. this.displayData(arr)
  271. },
  272. handlePicList(arr) {
  273. let picObject = {}
  274. //处理数据格式
  275. arr.map(i => {
  276. if(i.InputMode == 'F2') {
  277. switch (i.Path) {
  278. case 'LedgerParam.PhotoDoc.Drawing':
  279. case 'LedgerParam.Siteinstall.InstallPic':
  280. case 'LedgerParam.Siteinstall.InstallDrawing':
  281. case 'LedgerParam.PhotoDoc.Nameplate':
  282. if (this.instance.hasOwnProperty(i.Path)) {
  283. i.PicList = this.instance[i.Path]
  284. }
  285. if (picObject[i.InfoPointName]) {
  286. } else {
  287. picObject[i.InfoPointName] = []
  288. }
  289. picObject[i.InfoPointName].push({
  290. ...i,
  291. })
  292. break;
  293. }
  294. }
  295. })
  296. //展示图片
  297. this.exhibitionImage.list = picObject
  298. },
  299. handleFileList(arr) {
  300. let picObject = {}
  301. //处理数据格式
  302. arr.map(i => {
  303. if (i.InputMode == 'F2') {
  304. switch (i.Path) {
  305. case 'LedgerParam.InsuranceDoc.InsuranceFile':
  306. case 'LedgerParam.PhotoDoc.Archive':
  307. case 'LedgerParam.Siteinstall.CheckReport':
  308. if (this.instance.hasOwnProperty(i.Path)) {
  309. i.fileList = this.instance[i.Path]
  310. }
  311. if (picObject[i.InfoPointName]) {
  312. } else {
  313. picObject[i.InfoPointName] = []
  314. }
  315. picObject[i.InfoPointName].push({
  316. ...i,
  317. })
  318. break
  319. }
  320. }
  321. })
  322. //展示文件
  323. this.exhibitionFile.list = picObject
  324. },
  325. changeRadio(val) { //1,需采集,2,有值,3,全部
  326. this.handleRadios(val)
  327. this.currentRadio = val
  328. },
  329. displayData(arr) {//对数据进行处理传给组件展示
  330. const result = {}
  331. arr.forEach(i => {
  332. if (this.exampleData.hasOwnProperty(i.Path) && this.currentRadio != 2) {
  333. i.value = this.exampleData[i.Path]
  334. }
  335. switch (i.InputMode) {
  336. case "L":
  337. case "L1":
  338. case "L2":
  339. case "M":
  340. case 'F2':
  341. break;
  342. default:
  343. if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
  344. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
  345. Path: i.Path,
  346. InfoPointName: i.InfoPointName,
  347. InfoPointCode: i.InfoPointCode,
  348. Value: i.value,
  349. Visible: i.Visible,
  350. KeyWord: i.KeyWord
  351. })
  352. } else {
  353. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
  354. paths: [{
  355. Path: i.Path,
  356. InfoPointName: i.InfoPointName,
  357. InfoPointCode: i.InfoPointCode,
  358. Value: i.value,
  359. Visible: i.Visible,
  360. KeyWord: i.KeyWord
  361. }]
  362. }
  363. }
  364. }
  365. })
  366. this.exhibitionBaseInformation.information = result
  367. this.exhibitionCrux.allMessage = result
  368. },
  369. goBack() {
  370. this.$router.push({path: "/ledger/facility"})
  371. },
  372. },
  373. watch: {
  374. projectId() {
  375. this.$router.push({path: "/ledger/facility"})
  376. }
  377. }
  378. }
  379. </script>
  380. <style scoped lang="less">
  381. @bgc:#fff;
  382. .tableDisplay {
  383. .header {
  384. padding-bottom: 10px;
  385. .details-title {
  386. color: #333;
  387. font-size: 16px;
  388. margin-left: 20px;
  389. line-height: 32px;
  390. }
  391. }
  392. .content {
  393. display: flex;
  394. flex-direction: row;
  395. box-sizing: border-box;
  396. height: calc(100% - 82px);
  397. .content-left {
  398. display: flex;
  399. flex-direction: column;
  400. flex: 1;
  401. .content-keyPoint {
  402. border: 1px solid #ccc;
  403. box-sizing: border-box;
  404. height: 100px;
  405. margin-bottom: 10px;
  406. overflow: hidden;
  407. background: @bgc;
  408. }
  409. .content-showType {
  410. height: 50px;
  411. border: 1px solid #ccc;
  412. border-bottom: none;
  413. box-sizing: border-box;
  414. background: @bgc;
  415. }
  416. .content-point {
  417. display: flex;
  418. flex-direction: row;
  419. height: calc(100% - 160px);
  420. border: 1px solid #ccc;
  421. box-sizing: border-box;
  422. background: @bgc;
  423. .content-point-left {
  424. flex: 1;
  425. }
  426. .content-point-right {
  427. width: 400px;
  428. border-left: 1px solid #ccc;
  429. }
  430. }
  431. }
  432. .content-right {
  433. width: 400px;
  434. margin-left: 10px;
  435. .content-repair {
  436. height: 50px;
  437. line-height: 50px;
  438. margin-bottom: 10px;
  439. border: 1px solid #ccc;
  440. background: @bgc;
  441. box-sizing: border-box;
  442. }
  443. .content-media {
  444. height: calc(100% - 60px);
  445. border: 1px solid #ccc;
  446. box-sizing: border-box;
  447. }
  448. }
  449. }
  450. .footer {
  451. height: 40px;
  452. }
  453. }
  454. /deep/ .el-scrollbar__wrap {
  455. overflow-x: hidden;
  456. }
  457. </style>