index.vue 11 KB

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