index.vue 15 KB

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