index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  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>
  27. </div>
  28. <div class="content-right">
  29. <div class="content-media">
  30. <el-scrollbar style="height:100%;">
  31. <div>
  32. <exhibitionImage :exhibitionImage="exhibitionImage"/>
  33. <exhibitionVideo :exhibitionVideo="exhibitionVideo"/>
  34. <exhibitionFile :exhibitionFile="exhibitionFile"/>
  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. style:3
  114. },
  115. exhibitionFile: {
  116. title: '文件',
  117. list: {}
  118. },
  119. exhibitionCrux: {
  120. title: '关键信息点:',
  121. cruxArray: [],
  122. allMessage: [],//全部信息点
  123. },
  124. exhibitionImage: {
  125. title: '图片',
  126. list: {}
  127. },
  128. exhibitionVideo: {
  129. title: '视频',
  130. list: {}
  131. },
  132. instance: {},//实例信息处理
  133. }
  134. },
  135. methods: {
  136. deepCopy(obj) {
  137. return JSON.parse(JSON.stringify(obj))
  138. },
  139. cruxSuccess(){
  140. this.getData()
  141. },
  142. // 获取表头和实例数据
  143. getData () {
  144. let params1 = {
  145. data: {
  146. Orders: "sort asc",
  147. PageNumber: 1,
  148. PageSize: 1000
  149. },
  150. type: this.type
  151. }, params2 = {
  152. Filters: `EquipID='${this.id}'`,
  153. };
  154. let promise1 = new Promise((resolve, reject) => {
  155. getDataDictionary(params1, res => {
  156. resolve(res)
  157. })
  158. })
  159. let promise2 = new Promise((resolve, reject) => {
  160. queryProperty(params2, res => {
  161. resolve(res)
  162. })
  163. })
  164. Promise.all([promise1, promise2]).then(values => {
  165. this.pointData = values[0].Content;
  166. this.exampleData = values[1].Content[0];
  167. this.name = this.exampleData.EquipLocalName?this.exampleData.EquipLocalName:this.exampleData.EquipName?this.exampleData.EquipName:'';
  168. this.code = this.exampleData.EquipLocalID?this.exampleData.EquipLocalID:'';
  169. let obj = this.deepCopy(values[1].Content[0]);
  170. obj = tools.flattenKeys(obj);
  171. this.instance = obj;
  172. this.handleRadios(1)
  173. })
  174. },
  175. handleRadios(val) { //判断radio的值显示关键信息,基本信息,图片,文件
  176. let arr = []
  177. //关键信息点
  178. this.exhibitionCrux.cruxArray = this.pointData.filter(i => i.KeyWord)
  179. this.exhibitionCrux.cruxArray.map(i => {
  180. if (this.instance.hasOwnProperty(i.Path)) {
  181. return {
  182. ...i,
  183. value: this.instance[i.Path]
  184. }
  185. }
  186. })
  187. if (val == 1) { //需采集信息
  188. arr = this.pointData.filter(i => i.Visible)
  189. // 图片和的处理
  190. this.handlePicList(arr)
  191. // 文件处理
  192. this.handleFileList(arr)
  193. } else if (val == 2) { //有值信息点
  194. let list = this.pointData
  195. list.map(j => {
  196. if (this.instance.hasOwnProperty(j.Path)) {
  197. return {
  198. ...j,
  199. value: this.instance[j.Path]
  200. }
  201. }
  202. arr = list.filter(k => k.value)
  203. this.handlePicList(arr)
  204. this.handleFileList(arr)
  205. })
  206. } else { //全部信息点
  207. arr = this.pointData
  208. this.handlePicList(arr)
  209. this.handleFileList(arr)
  210. }
  211. this.displayData(arr)
  212. },
  213. handlePicList(arr) {
  214. let picObject = {}
  215. //处理数据格式
  216. arr.map(i => {
  217. if(i.InputMode == 'F2') {
  218. switch (i.Path) {
  219. case 'LedgerParam.PhotoDoc.Drawing':
  220. case 'LedgerParam.Siteinstall.InstallPic':
  221. case 'LedgerParam.Siteinstall.InstallDrawing':
  222. case 'LedgerParam.PhotoDoc.Nameplate':
  223. if (this.instance.hasOwnProperty(i.Path)) {
  224. i.PicList = this.instance[i.Path]
  225. }
  226. if (picObject[i.InfoPointName]) {
  227. } else {
  228. picObject[i.InfoPointName] = []
  229. }
  230. picObject[i.InfoPointName].push({
  231. ...i,
  232. })
  233. break;
  234. }
  235. }
  236. })
  237. //展示图片
  238. this.exhibitionImage.list = picObject
  239. },
  240. handleFileList(arr) {
  241. let picObject = {}
  242. //处理数据格式
  243. arr.map(i => {
  244. if (i.InputMode == 'F2') {
  245. switch (i.Path) {
  246. case 'LedgerParam.InsuranceDoc.InsuranceFile':
  247. case 'LedgerParam.PhotoDoc.Archive':
  248. case 'LedgerParam.Siteinstall.CheckReport':
  249. if (this.instance.hasOwnProperty(i.Path)) {
  250. i.fileList = this.instance[i.Path]
  251. }
  252. if (picObject[i.InfoPointName]) {
  253. } else {
  254. picObject[i.InfoPointName] = []
  255. }
  256. picObject[i.InfoPointName].push({
  257. ...i,
  258. })
  259. break
  260. }
  261. }
  262. })
  263. //展示文件
  264. this.exhibitionFile.list = picObject
  265. },
  266. changeRadio(val) { //1,需采集,2,有值,3,全部
  267. this.handleRadios(val)
  268. this.currentRadio = val
  269. },
  270. displayData(arr) {//对数据进行处理传给组件展示
  271. const result = {}
  272. arr.forEach(i => {
  273. if (this.instance.hasOwnProperty(i.Path) && this.currentRadio != 2) {
  274. i.value = this.instance[i.Path]
  275. }
  276. if (i.DataSource && i.DataSource.length) {
  277. let source = JSON.parse(i.DataSource)
  278. source.forEach(j => {
  279. if (j.Code == this.instance[i.Path]) {
  280. console.log(j.Name)
  281. i.value = j.Name
  282. }
  283. })
  284. }
  285. switch (i.InputMode) {
  286. case "L":
  287. case "L1":
  288. case "L2":
  289. case "M":
  290. break;
  291. default:
  292. if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
  293. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
  294. Path: i.Path,
  295. InfoPointName: i.InfoPointName,
  296. InfoPointCode: i.InfoPointCode,
  297. Value: i.value,
  298. Visible: i.Visible,
  299. KeyWord: i.KeyWord,
  300. InputMode:i.InputMode
  301. })
  302. } else {
  303. result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
  304. paths: [{
  305. Path: i.Path,
  306. InfoPointName: i.InfoPointName,
  307. InfoPointCode: i.InfoPointCode,
  308. Value: i.value,
  309. Visible: i.Visible,
  310. KeyWord: i.KeyWord,
  311. InputMode:i.InputMode
  312. }]
  313. }
  314. }
  315. }
  316. })
  317. this.exhibitionBaseInformation.information = result
  318. this.exhibitionCrux.allMessage = result
  319. },
  320. goBack () {
  321. this.$router.push({
  322. name: 'propertyLedger',
  323. params: {
  324. Family: this.type
  325. }
  326. })
  327. },
  328. // 切换实例
  329. handleChangeExample() {
  330. this.selectRadio.initRadio = '1'
  331. this.getData();
  332. },
  333. },
  334. watch: {
  335. projectId() {
  336. this.$router.push({path: "/ledger/property"})
  337. }
  338. }
  339. }
  340. </script>
  341. <style scoped lang="less">
  342. .tableDisplay {
  343. .header {
  344. padding-bottom: 10px;
  345. .details-title {
  346. color: #333;
  347. font-size: 16px;
  348. margin-left: 20px;
  349. line-height: 32px;
  350. }
  351. }
  352. .content {
  353. display: flex;
  354. flex-direction: row;
  355. box-sizing: border-box;
  356. height: calc(100% - 95px);
  357. .content-left {
  358. display: flex;
  359. flex-direction: column;
  360. flex: 1;
  361. .content-keyPoint {
  362. border: 1px solid #ccc;
  363. box-sizing: border-box;
  364. height: 100px;
  365. margin-bottom: 10px;
  366. overflow: hidden;
  367. background: #FFFFFF;
  368. }
  369. .content-showType {
  370. height: 50px;
  371. border: 1px solid #ccc;
  372. border-bottom: none;
  373. box-sizing: border-box;
  374. background: #FFFFFF;
  375. }
  376. .content-point {
  377. display: flex;
  378. flex-direction: row;
  379. height: calc(100% - 160px);
  380. border: 1px solid #ccc;
  381. box-sizing: border-box;
  382. background: #FFFFFF;
  383. .content-point-left {
  384. flex: 1;
  385. }
  386. }
  387. }
  388. .content-right {
  389. width: 400px;
  390. margin-left: 10px;
  391. .content-media {
  392. height: 100%;
  393. border: 1px solid #ccc;
  394. box-sizing: border-box;
  395. }
  396. }
  397. }
  398. .footer {
  399. margin-top: 5px;
  400. height: 45px;
  401. background-color: #fff;
  402. box-sizing: border-box;
  403. border: 1px solid #ccc;
  404. }
  405. }
  406. /deep/ .el-scrollbar__wrap {
  407. overflow-x: hidden;
  408. }
  409. </style>