index_old.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
  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. j.value = this.instance[j.Path]
  185. return j
  186. }
  187. })
  188. isArr = isList.filter(k => k.value)
  189. this.handlePicList(isArr)
  190. this.handleFileList(isArr)
  191. },
  192. handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
  193. let arr = []
  194. //关键信息点
  195. this.exhibitionCrux.cruxArray = this.pointData.filter(i => i.KeyWord)
  196. this.exhibitionCrux.cruxArray.map(i => {
  197. if (this.instance.hasOwnProperty(i.Path)) {
  198. return {
  199. ...i,
  200. value: this.instance[i.Path]
  201. }
  202. }
  203. })
  204. if (val == 1) { //需采集信息
  205. arr = this.pointData.filter(i => i.Visible)
  206. // 图片和的处理
  207. // this.handlePicList(arr)
  208. // // 文件处理
  209. // this.handleFileList(arr)
  210. } else if (val == 2) { //有值信息点
  211. let list = this.pointData
  212. list.map(j => {
  213. if (this.instance.hasOwnProperty(j.Path)) {
  214. return {
  215. ...j,
  216. value: this.instance[j.Path]
  217. }
  218. }
  219. arr = list.filter(k => k.value)
  220. // this.handlePicList(arr)
  221. // this.handleFileList(arr)
  222. })
  223. } else { //全部信息点
  224. arr = this.pointData
  225. // this.handlePicList(arr)
  226. // this.handleFileList(arr)
  227. }
  228. this.displayData(arr)
  229. },
  230. handlePicList(arr) {
  231. let picObject = {}
  232. //处理数据格式
  233. arr.map(i => {
  234. if(i.InputMode == 'F2') {
  235. switch (i.Path) {
  236. case 'LedgerParam.PhotoDoc.Drawing':
  237. case 'LedgerParam.Siteinstall.InstallPic':
  238. case 'LedgerParam.Siteinstall.InstallDrawing':
  239. case 'LedgerParam.PhotoDoc.Nameplate':
  240. if (this.instance.hasOwnProperty(i.Path)) {
  241. i.PicList = this.instance[i.Path]
  242. }
  243. if (picObject[i.InfoPointName]) {
  244. } else {
  245. picObject[i.InfoPointName] = []
  246. }
  247. picObject[i.InfoPointName].push({
  248. ...i,
  249. })
  250. break;
  251. }
  252. }
  253. })
  254. //展示图片
  255. this.exhibitionImage.list = picObject
  256. let isArray = [] //获取图片数组
  257. for (let i in picObject) {
  258. if (Array.isArray(picObject[i])) {
  259. let list = picObject[i]
  260. list.forEach(i => {
  261. if (i.PicList) {
  262. isArray.push(...i.PicList)
  263. }
  264. })
  265. }
  266. }
  267. let video = isArray.filter(i => i.Type =='video' && i.type == 'video' )
  268. this.exhibitionVideo.list = video
  269. //判断是否显示图片组件
  270. this.isShowImage = isArray.length ? true : false
  271. //判断是否显示video组件
  272. this.isShowVideo = video.length ? true : false
  273. },
  274. handleFileList(arr) {
  275. let picObject = {}
  276. //处理数据格式
  277. arr.map(i => {
  278. if (i.InputMode == 'F2') {
  279. switch (i.Path) {
  280. case 'LedgerParam.InsuranceDoc.InsuranceFile':
  281. case 'LedgerParam.PhotoDoc.Archive':
  282. case 'LedgerParam.Siteinstall.CheckReport':
  283. if (this.instance.hasOwnProperty(i.Path)) {
  284. i.fileList = this.instance[i.Path]
  285. }
  286. if (picObject[i.InfoPointName]) {
  287. } else {
  288. picObject[i.InfoPointName] = []
  289. }
  290. picObject[i.InfoPointName].push({
  291. ...i,
  292. })
  293. break
  294. }
  295. }
  296. })
  297. //展示文件
  298. this.exhibitionFile.list = picObject
  299. let isArray = [] //获取文件数组
  300. for (let i in picObject) {
  301. if (Array.isArray(picObject[i])) {
  302. let list = picObject[i]
  303. list.forEach(i => {
  304. if (i.fileList) {
  305. isArray.push(...i.fileList)
  306. }
  307. })
  308. }
  309. }
  310. //判断是否显示文件组件
  311. this.isShowFile = isArray.length ? true : false
  312. },
  313. changeRadio(val) { //1,需采集,2,有值,3,全部
  314. this.handleRadios(val)
  315. this.currentRadio = val
  316. },
  317. formatDate(str) {
  318. if(str) {
  319. if(str.includes('-')) {
  320. return str
  321. }else {
  322. 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)
  323. }
  324. } else {
  325. return '--'
  326. }
  327. },
  328. displayData(arr) {//对数据进行处理传给组件展示
  329. const result = {}
  330. arr.forEach(i => {
  331. if (this.instance.hasOwnProperty(i.Path) && this.currentRadio != 2) {
  332. i.value = this.instance[i.Path]
  333. }
  334. if (i.InputMode == 'C5') {
  335. if (this.instance.hasOwnProperty(i.Path)) {
  336. let time = this.instance[i.Path]
  337. i.value = this.formatDate(time)
  338. }
  339. }
  340. if (i.DataSource && i.DataSource.length) {
  341. let source = JSON.parse(i.DataSource)
  342. //判断输入类型
  343. if (i.InputMode == 'D1L') {
  344. let d1l = tools.formatDataSource(i.DataSource)
  345. d1l.forEach(k => {
  346. if (k.Code == this.instance[i.Path]) {
  347. i.value = k.Name
  348. }
  349. })
  350. } else if (i.InputMode == 'D2' || i.InputMode == 'C6') {
  351. if (this.instance.hasOwnProperty(i.Path)) {
  352. if (!Array.isArray(this.instance[i.Path])) {
  353. let transArray = this.instance[i.Path].split(',')
  354. i.value = source.filter(item => transArray.includes(item.Code)).map(item => item.Name).join(',')
  355. }
  356. }
  357. }
  358. source.forEach(j => {
  359. if (j.Code == this.instance[i.Path]) {
  360. i.value = j.Name
  361. }
  362. })
  363. }
  364. switch (i.InputMode) {
  365. case "L":
  366. case "L1":
  367. case "L2":
  368. case "M":
  369. break;
  370. default:
  371. if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
  372. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
  373. Path: i.Path,
  374. InfoPointName: i.InfoPointName,
  375. InfoPointCode: i.InfoPointCode,
  376. Value: i.value,
  377. Visible: i.Visible,
  378. KeyWord: i.KeyWord,
  379. InputMode:i.InputMode
  380. })
  381. } else {
  382. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
  383. paths: [{
  384. Path: i.Path,
  385. InfoPointName: i.InfoPointName,
  386. InfoPointCode: i.InfoPointCode,
  387. Value: i.value,
  388. Visible: i.Visible,
  389. KeyWord: i.KeyWord,
  390. InputMode:i.InputMode
  391. }]
  392. }
  393. }
  394. }
  395. })
  396. this.exhibitionBaseInformation.information = result
  397. this.exhibitionCrux.allMessage = result
  398. },
  399. goBack () {
  400. this.$router.push({
  401. name: 'propertyLedger',
  402. params: {
  403. Family: this.type
  404. }
  405. })
  406. },
  407. // 切换实例
  408. handleChangeExample() {
  409. this.selectRadio.initRadio = '1'
  410. this.getData();
  411. },
  412. },
  413. watch: {
  414. projectId() {
  415. this.$router.push({path: "/ledger/property"})
  416. }
  417. }
  418. }
  419. </script>
  420. <style scoped lang="less">
  421. @bgc: #fff;
  422. .tableDisplay {
  423. .header {
  424. padding-bottom: 10px;
  425. overflow: hidden;
  426. text-overflow:ellipsis;
  427. white-space: nowrap;
  428. .details-title {
  429. color: #333;
  430. font-size: 16px;
  431. margin-left: 20px;
  432. line-height: 32px;
  433. cursor: pointer;
  434. }
  435. }
  436. .content {
  437. display: flex;
  438. flex-direction: row;
  439. box-sizing: border-box;
  440. height: calc(100% - 95px);
  441. .content-left {
  442. display: flex;
  443. flex-direction: column;
  444. flex: 1;
  445. .content-keyPoint {
  446. border: 1px solid #ccc;
  447. box-sizing: border-box;
  448. height: 100px;
  449. margin-bottom: 10px;
  450. overflow: hidden;
  451. background: @bgc;
  452. }
  453. .content-showType {
  454. height: 50px;
  455. border: 1px solid #ccc;
  456. border-bottom: none;
  457. box-sizing: border-box;
  458. background: @bgc;
  459. }
  460. .content-point {
  461. display: flex;
  462. flex-direction: row;
  463. height: calc(100% - 160px);
  464. border: 1px solid #ccc;
  465. box-sizing: border-box;
  466. background: @bgc;
  467. .content-point-left {
  468. flex: 1;
  469. }
  470. }
  471. }
  472. .content-right {
  473. width: 400px;
  474. margin-left: 10px;
  475. .content-media {
  476. height: 100%;
  477. background: @bgc;
  478. border: 1px solid #ccc;
  479. box-sizing: border-box;
  480. }
  481. }
  482. }
  483. .footer {
  484. margin-top: 5px;
  485. height: 45px;
  486. background-color: #fff;
  487. box-sizing: border-box;
  488. border: 1px solid #ccc;
  489. }
  490. }
  491. /deep/ .el-scrollbar__wrap {
  492. overflow-x: hidden;
  493. }
  494. </style>