index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  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. <el-scrollbar style="height:100%;">
  9. <div class="content-scrollbar">
  10. <div class="content-left">
  11. <div class="content-keyPoint">
  12. <exhibitionCrux :exhibitionCrux="exhibitionCrux" :type="type" @cruxSuccess="cruxSuccess"/>
  13. </div>
  14. <div class="content-showType">
  15. <selectRadio
  16. :selectRadio="selectRadio"
  17. @changeRadio="changeRadio"
  18. />
  19. </div>
  20. <div class="content-point">
  21. <div class="content-point-left">
  22. <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
  23. </div>
  24. </div>
  25. </div>
  26. <div class="content-right">
  27. <div class="content-media">
  28. <exhibitionImage :exhibitionImage="exhibitionImage" v-show="isShowImage"/>
  29. <exhibitionVideo :exhibitionVideo="exhibitionVideo" v-show="isShowVideo"/>
  30. <exhibitionFile :exhibitionFile="exhibitionFile" v-show="isShowFile"/>
  31. </div>
  32. </div>
  33. </div>
  34. </el-scrollbar>
  35. </div>
  36. <div class="footer">
  37. <el-button-group style="float:right;margin:8px 10px 0 0">
  38. <el-button
  39. :disabled="list.findIndex(item => item.value == id) == 0"
  40. @click="handleClickPrev"
  41. size="mini"
  42. icon="el-icon-arrow-left">
  43. 上一页
  44. </el-button>
  45. <el-select size="mini" style="float:left;margin:0 10px;" v-model="id" @change="handleChangeExample"
  46. placeholder="请选择">
  47. <el-option
  48. v-for="item in list"
  49. :key="item.value"
  50. :label="item.label"
  51. :value="item.value">
  52. </el-option>
  53. </el-select>
  54. <el-button
  55. :disabled="list.findIndex(item => item.value == id) == list.length-1"
  56. @click="handleClickNext"
  57. size="mini">
  58. 下一页
  59. <i class="el-icon-arrow-right el-icon--right"></i>
  60. </el-button>
  61. </el-button-group>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  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 selectRadio from "@/components/ledger/details/detail/selectRadio";
  72. import { getDataDictionary } from "@/api/dict";
  73. import { queryProperty } from "@/api/scan/request";
  74. import { mapGetters } from "vuex";
  75. import tools from "@/utils/scan/tools"
  76. export default {
  77. name: "propertyDetails",
  78. components: {
  79. exhibitionBaseInformation,
  80. exhibitionFile,
  81. exhibitionImage,
  82. selectRadio,
  83. exhibitionCrux,
  84. exhibitionVideo
  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,'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. currentRadio: '1',//当前选中的select
  107. selectRadio: {
  108. information: '设备信息点',
  109. initRadio: '1',
  110. radioList: [
  111. {
  112. value: '显示需采集信息点',
  113. label: '1'
  114. },
  115. {
  116. value: '显示有值信息点',
  117. label: '2'
  118. },
  119. {
  120. value: '显示全部信息点',
  121. label: '3'
  122. }
  123. ]
  124. },
  125. exhibitionBaseInformation: {
  126. information: {}
  127. },
  128. exhibitionFile: {
  129. title: '文件',
  130. list: {}
  131. },
  132. exhibitionCrux: {
  133. title: '关键信息点:',
  134. cruxArray: [],
  135. allMessage: [],//全部信息点
  136. },
  137. exhibitionImage: {
  138. title: '图片',
  139. list: {},
  140. arr: []
  141. },
  142. exhibitionVideo: {
  143. title: '视频',
  144. list: {}
  145. },
  146. instance: {},//实例信息处理
  147. isShowImage: true,
  148. isShowVideo: true,
  149. isShowFile: true,
  150. }
  151. },
  152. methods: {
  153. deepCopy(obj) {
  154. return JSON.parse(JSON.stringify(obj))
  155. },
  156. cruxSuccess() {
  157. this.getData()
  158. },
  159. // 获取表头和实例数据
  160. getData() {
  161. let params1 = {
  162. orders: "sort asc",
  163. pageNumber: 1,
  164. pageSize: 1000,
  165. type: this.type
  166. }, params2 = {
  167. filters: `id='${this.id}'`,
  168. };
  169. let promise1 = new Promise((resolve, reject) => {
  170. getDataDictionary(params1, res => {
  171. resolve(res)
  172. })
  173. })
  174. let promise2 = new Promise((resolve, reject) => {
  175. queryProperty(params2, res => {
  176. resolve(res)
  177. })
  178. })
  179. Promise.all([promise1, promise2]).then(values => {
  180. this.pointData = values[0].content;
  181. this.exampleData = values[1].content[0];
  182. this.name = this.exampleData.localName ? this.exampleData.localName : this.exampleData.name ? this.exampleData.name : '';
  183. this.code = this.exampleData.localId ? this.exampleData.localId : '';
  184. let obj = this.deepCopy(values[1].content[0]);
  185. obj = tools.flattenKeys(obj);
  186. for (let key in obj) {
  187. if (Array.isArray(obj[key]) && !obj[key].length) {
  188. delete obj[key]
  189. }
  190. }
  191. this.instance = obj;
  192. this.handleRadios(this.currentRadio)
  193. this.handleEnclosure() //处理图片视频文件信息
  194. })
  195. },
  196. handleEnclosure() {
  197. //图片文件处理,脱离radio控制
  198. let isList = this.pointData
  199. let isArr = []
  200. isList.map(j => {
  201. if (this.instance.hasOwnProperty(j.path)) {
  202. j.value = this.instance[j.path]
  203. return j
  204. }
  205. })
  206. isArr = isList.filter(k => k.value)
  207. this.handlePicList(isArr)
  208. this.handleFileList(isArr)
  209. },
  210. handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
  211. let arr = []
  212. //关键信息点
  213. this.exhibitionCrux.cruxArray = this.pointData.filter(i => i.keyWord)
  214. this.exhibitionCrux.cruxArray.map(i => {
  215. if (this.instance.hasOwnProperty(i.path)) {
  216. return {
  217. ...i,
  218. value: this.instance[i.path]
  219. }
  220. }
  221. })
  222. if (val == 1) { //需采集信息
  223. arr = this.pointData.filter(i => i.visible)
  224. // 图片和的处理
  225. // this.handlePicList(arr)
  226. // // 文件处理
  227. // this.handleFileList(arr)
  228. } else if (val == 2) { //有值信息点
  229. let list = this.pointData
  230. list.map(j => {
  231. if (this.instance.hasOwnProperty(j.path)) {
  232. return {
  233. ...j,
  234. value: this.instance[j.path]
  235. }
  236. }
  237. arr = list.filter(k => k.value)
  238. // this.handlePicList(arr)
  239. // this.handleFileList(arr)
  240. })
  241. } else { //全部信息点
  242. arr = this.pointData
  243. // this.handlePicList(arr)
  244. // this.handleFileList(arr)
  245. }
  246. this.displayData(arr)
  247. },
  248. handlePicList(arr) {
  249. let picObject = {}
  250. //处理数据格式
  251. arr.map(i => {
  252. if (i.inputMode == 'F2') {
  253. switch (i.path) {
  254. case 'infos.drawing':
  255. case 'infos.installPic':
  256. case 'infos.installDrawing':
  257. case 'infos.nameplate':
  258. case 'infos.pic':
  259. if (this.instance.hasOwnProperty(i.path)) {
  260. i.PicList = this.instance[i.path]
  261. }
  262. if (picObject[i.name]) {
  263. } else {
  264. picObject[i.name] = []
  265. }
  266. picObject[i.name].push({
  267. ...i,
  268. })
  269. break;
  270. }
  271. }
  272. })
  273. //展示图片
  274. this.exhibitionImage.list = picObject
  275. let isArray = [] //获取图片数组
  276. for (let i in picObject) {
  277. if (Array.isArray(picObject[i])) {
  278. let list = picObject[i]
  279. list.forEach(i => {
  280. if (i.PicList) {
  281. isArray.push(...i.PicList)
  282. }
  283. })
  284. }
  285. }
  286. this.exhibitionImage.arr = isArray
  287. let video = isArray.filter(i => i.Type == 'video' && i.type == 'video')
  288. this.exhibitionVideo.list = video
  289. //判断是否显示图片组件
  290. this.isShowImage = isArray.length ? true : false
  291. //判断是否显示video组件
  292. this.isShowVideo = video.length ? true : false
  293. },
  294. handleFileList(arr) {
  295. let picObject = {}
  296. //处理数据格式
  297. arr.map(i => {
  298. if (i.inputMode == 'F2') {
  299. switch (i.path) {
  300. case 'infos.insuranceFile':
  301. case 'infos.archive':
  302. case 'infos.checkReport':
  303. if (this.instance.hasOwnProperty(i.path)) {
  304. i.fileList = this.instance[i.path]
  305. }
  306. if (picObject[i.name]) {
  307. } else {
  308. picObject[i.name] = []
  309. }
  310. picObject[i.name].push({
  311. ...i,
  312. })
  313. break
  314. }
  315. }
  316. })
  317. //展示文件
  318. this.exhibitionFile.list = picObject
  319. let isArray = [] //获取文件数组
  320. for (let i in picObject) {
  321. if (Array.isArray(picObject[i])) {
  322. let list = picObject[i]
  323. list.forEach(i => {
  324. if (i.fileList) {
  325. isArray.push(...i.fileList)
  326. }
  327. })
  328. }
  329. }
  330. //判断是否显示文件组件
  331. this.isShowFile = isArray.length ? true : false
  332. },
  333. changeRadio(val) { //1,需采集,2,有值,3,全部
  334. this.handleRadios(val)
  335. this.currentRadio = val
  336. },
  337. formatDate(str) {
  338. if (str) {
  339. if (str.includes('-')) {
  340. return str
  341. } else {
  342. 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)
  343. }
  344. } else {
  345. return '--'
  346. }
  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.inputMode == 'C5') {
  355. if (this.instance.hasOwnProperty(i.path)) {
  356. let time = this.instance[i.path]
  357. i.value = this.formatDate(time)
  358. }
  359. }
  360. if (i.dataSource && i.dataSource.length) {
  361. // let source = JSON.parse(i.DataSource)
  362. let source = i.dataSource
  363. //判断输入类型
  364. if (i.inputMode == 'D1L') {
  365. let d1l = tools.formatDataSource(i.dataSource)
  366. d1l.forEach(k => {
  367. if (k.code == this.instance[i.path]) {
  368. i.value = k.name
  369. }
  370. })
  371. } else if (i.inputMode == 'D2' || i.inputMode == 'C6') {
  372. if (this.instance.hasOwnProperty(i.path)) {
  373. if (!Array.isArray(this.instance[i.path])) {
  374. let transArray = this.instance[i.path].split(',')
  375. i.value = source.filter(item => transArray.includes(item.code)).map(item => item.name).join(',')
  376. }
  377. }
  378. }
  379. source.forEach(j => {
  380. if (j.code == this.instance[i.path]) {
  381. i.value = j.name
  382. }
  383. })
  384. }
  385. switch (i.inputMode) {
  386. case "L":
  387. case "L1":
  388. case "L2":
  389. case "M":
  390. break;
  391. default:
  392. if (result[`${i.firstName}${i.secondName ? '/' + i.secondName : ''}`]) {
  393. result[`${i.firstName}${i.secondName ? '/' + i.secondName : ''}`].paths.push({
  394. Path: i.Path,
  395. InfoPointName: i.name,
  396. InfoPointCode: i.code,
  397. Value: i.value,
  398. Visible: i.visible,
  399. KeyWord: i.keyWord,
  400. InputMode: i.inputMode,
  401. data: i.data,
  402. receivetime: i.receivetime,
  403. error: i.error,
  404. Unit: i.unit,
  405. FirstName: i.firstName,
  406. classCode: i.classCode,
  407. id: i.id,
  408. groupCode: i.groupCode,
  409. type: i.type
  410. })
  411. } else {
  412. result[`${i.firstName}${i.secondName ? '/' + i.secondName : ''}`] = {
  413. paths: [{
  414. Path: i.path,
  415. InfoPointName: i.name,
  416. InfoPointCode: i.code,
  417. Value: i.value,
  418. Visible: i.visible,
  419. KeyWord: i.keyWord,
  420. InputMode: i.inputMode,
  421. data: i.data,
  422. receivetime: i.receivetime,
  423. error: i.error,
  424. Unit: i.unit,
  425. FirstName: i.firstName,
  426. classCode: i.classCode,
  427. id: i.id,
  428. groupCode: i.groupCode,
  429. type: i.type
  430. }]
  431. }
  432. }
  433. }
  434. })
  435. this.exhibitionBaseInformation.information = result
  436. this.exhibitionCrux.allMessage = result
  437. },
  438. goBack() {
  439. this.$router.push({
  440. name: 'propertyLedger',
  441. params: {
  442. Family: this.type
  443. }
  444. })
  445. },
  446. // 切换实例
  447. handleChangeExample() {
  448. this.selectRadio.initRadio = '1';
  449. this.currentRadio = '1';
  450. this.getData();
  451. },
  452. // 切换上一个实例
  453. handleClickPrev() {
  454. let index = this.list.findIndex(item => item.value == this.id);
  455. this.id = this.list[index - 1].value;
  456. this.handleChangeExample();
  457. },
  458. // 切换下一个实例
  459. handleClickNext() {
  460. let index = this.list.findIndex(item => item.value == this.id);
  461. this.id = this.list[index + 1].value;
  462. this.handleChangeExample();
  463. },
  464. },
  465. watch: {
  466. projectId() {
  467. this.$router.push({ path: "/ledger/property" })
  468. }
  469. }
  470. }
  471. </script>
  472. <style scoped lang="less">
  473. @bgc: #fff;
  474. .tableDisplay {
  475. .header {
  476. padding-bottom: 10px;
  477. overflow: hidden;
  478. text-overflow: ellipsis;
  479. white-space: nowrap;
  480. .details-title {
  481. color: #333;
  482. font-size: 16px;
  483. margin-left: 20px;
  484. line-height: 32px;
  485. cursor: pointer;
  486. }
  487. }
  488. .content {
  489. height: calc(100% - 77px);
  490. .content-scrollbar {
  491. display: flex;
  492. height: 100%;
  493. flex-direction: row;
  494. box-sizing: border-box;
  495. background-color: #f2f2f2;
  496. .content-left {
  497. display: flex;
  498. flex-direction: column;
  499. flex: 1;
  500. box-sizing: border-box;
  501. .content-keyPoint {
  502. border: 1px solid #ccc;
  503. box-sizing: border-box;
  504. margin-bottom: 10px;
  505. // overflow: hidden;
  506. background: @bgc;
  507. }
  508. .content-showType {
  509. height: 50px;
  510. border: 1px solid #ccc;
  511. border-bottom: none;
  512. box-sizing: border-box;
  513. background: @bgc;
  514. }
  515. .content-point {
  516. display: flex;
  517. flex-direction: row;
  518. border: 1px solid #ccc;
  519. box-sizing: border-box;
  520. background: @bgc;
  521. .content-point-left {
  522. flex: 1;
  523. }
  524. }
  525. }
  526. .content-right {
  527. width: 400px;
  528. margin-left: 10px;
  529. box-sizing: border-box;
  530. .content-media {
  531. box-sizing: border-box;
  532. }
  533. }
  534. }
  535. }
  536. .footer {
  537. position: fixed;
  538. bottom: 0;
  539. left: 235px;
  540. width: calc(100% - 235px);
  541. height: 45px;
  542. background-color: #fff;
  543. box-sizing: border-box;
  544. }
  545. }
  546. /deep/ .el-scrollbar__wrap {
  547. overflow-x: hidden;
  548. }
  549. </style>