CoreDeviceReport.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. <!-- 核心设备报表 -->
  2. <template>
  3. <div class='core-device-report'>
  4. <div class='main-left'>
  5. <Select
  6. class='system-select'
  7. width='217'
  8. :isReadOnly='true'
  9. tipPlace='top'
  10. caption='系统名称:'
  11. @change='changeCurSystem'
  12. v-model='systemId'
  13. :selectdata='systemList'
  14. :placeholder='"请选择"'
  15. />
  16. <div class='system-content'>
  17. <div
  18. v-for='(item) in systemContentData'
  19. :key='"key_" + item.id'
  20. class='item-content'
  21. :class='{"active": item.isActive}'
  22. @click='changeEquipment(item.id)'
  23. >
  24. <div class='first-row'>
  25. <div>{{item.name}}</div>
  26. <div>{{item.isMaintenance?'维保中' : ''}}</div>
  27. </div>
  28. <div class='sec-row'>
  29. <div>
  30. {{item.num}}
  31. <span>台</span>
  32. </div>
  33. <span :class='{"abnormal": item.abnormal}'>{{item.statusNum !== 0?item.statusNum : ''}}</span>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class='main-right'>
  39. <div class='search-container'>
  40. <Input iconType='search' v-model='searchKey' placeholder='搜索' width='192' />
  41. </div>
  42. <el-table :data='tableData' style='width: 100%;margin-bottom: 63px;' @row-click='showEquipmentStatus'>
  43. <el-table-column label='序号' type='index' :index='indexMethod'></el-table-column>
  44. <el-table-column prop='sbjc' label='设备简称'></el-table-column>
  45. <el-table-column prop='assetnum' label='设备编号'></el-table-column>
  46. <el-table-column prop='is_exception' label='状态'>
  47. <template slot-scope='scope'>
  48. <span
  49. style='display: inline-block;width: 6px;height:6px;border-radius: 3px;background: #0091FF;'
  50. :style='{"background": !scope.row.is_exception?"#0091FF" : "#F54E45"}'
  51. ></span>
  52. <span style='margin-left: 10px'>{{ !scope.row.is_exception?'正常' : '异常' }}</span>
  53. </template>
  54. </el-table-column>
  55. <el-table-column prop='photos_num' label='照片'>
  56. <template slot-scope='scope'>
  57. <!-- <span style="color: #025BAA">{{ scope.row.photos_num || scope.row.photos_num === 0?(scope.row.photos_num + '张') : '—' }}</span> -->
  58. <span style='color: #025BAA' @click='showPicturesDetail(scope.row)'>1张</span>
  59. </template>
  60. </el-table-column>
  61. <el-table-column prop='attachments_num' label='报告'>
  62. <template slot-scope='scope'>
  63. <span
  64. style='color: #025BAA'
  65. >{{ scope.row.attachments_num || scope.row.attachments_num === 0?(scope.row.attachments_num+ '张') : '—'}}</span>
  66. </template>
  67. </el-table-column>
  68. </el-table>
  69. <div class='page'>
  70. <el-pagination
  71. background
  72. layout='prev, pager, next'
  73. :total='tatol'
  74. :current-page='curPage'
  75. :page-size='pageSize'
  76. @current-change='changeTablePage'
  77. ></el-pagination>
  78. </div>
  79. <el-dialog title='交换机-照明系统' :visible.sync='dialogTableVisible' width='1260px'>
  80. <el-date-picker
  81. style='margin-bottom: 12px;'
  82. v-model='dialogTime'
  83. type='daterange'
  84. range-separator='至'
  85. @change='changeTime'
  86. start-placeholder='开始日期'
  87. end-placeholder='结束日期'
  88. ></el-date-picker>
  89. <el-table :data='historyTableData' style='margin-bottom: 55px;' max-height='500'>
  90. <el-table-column width='200' property='finishDate' label='日期'></el-table-column>
  91. <el-table-column width='100' property='typeName' label='事项类型'></el-table-column>
  92. <el-table-column property='taskName' label='事项名称'></el-table-column>
  93. <el-table-column width='100' property='photosNum' label='照片'>
  94. <template slot-scope='scope'>
  95. <!-- <span style="color: #025BAA">{{ scope.row.photosNum || scope.row.photosNum === 0?(scope.row.photosNum + '张') : '—' }}</span> -->
  96. <span style='color: #025BAA' @click='showPicturesDetail(scope.row)'>1张</span>
  97. </template>
  98. </el-table-column>
  99. <el-table-column width='100' property='attachmentsNum' label='报告'>
  100. <template slot-scope='scope'>
  101. <span
  102. style='color: #025BAA'
  103. >{{ scope.row.attachmentsNum || scope.row.attachmentsNum === 0?(scope.row.attachmentsNum+ '张') : '—'}}</span>
  104. </template>
  105. </el-table-column>
  106. </el-table>
  107. <div class='page'>
  108. <el-pagination
  109. background
  110. layout='prev, pager, next'
  111. :current-page='hisCurPage'
  112. :page-size='hisPageSize'
  113. :total='hisTotal'
  114. @current-change='changeHisTablePage'
  115. ></el-pagination>
  116. </div>
  117. </el-dialog>
  118. <el-dialog :title='detailTitle' :visible.sync='showDetail' width='1260px'>
  119. <div class='detail-container'>
  120. <div class='pictures-menu'></div>
  121. </div>
  122. </el-dialog>
  123. </div>
  124. </div>
  125. </template>
  126. <script>
  127. import { Select, Input } from 'meri-design'
  128. import { querySystemList, queryEquipmentList, queryTableData, queryHistoryTableData, queryDetailData } from '../../api/coreDeviceReport'
  129. import _ from 'lodash'
  130. import moment from 'moment'
  131. export default {
  132. data() {
  133. return {
  134. systemId: '', // 当前系统Id
  135. systemList: [], // 系统
  136. systemContentData: [
  137. { id: 1, name: '高压配电柜', isMaintenance: true, num: 95, statusNum: 0, abnormal: false, isActive: true },
  138. { id: 2, name: '变压器', isMaintenance: false, num: 256, statusNum: 12, abnormal: true, isActive: false },
  139. { id: 3, name: '低压配电柜', isMaintenance: false, num: 354, statusNum: 0, abnormal: false, isActive: false },
  140. { id: 4, name: '直流屏', isMaintenance: false, num: 175, statusNum: 0, abnormal: false, isActive: false },
  141. { id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: 0, abnormal: false, isActive: false }
  142. ], // 系统下的各种组成
  143. searchKey: '', // 搜索关键字
  144. tableData: [
  145. // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
  146. // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '异常', photo: 5, report: 6},
  147. // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
  148. ], // 表数据
  149. curPage: 1, // 当前页码
  150. pageSize: 10, // 每页条数
  151. tatol: 0, // 总数据
  152. dialogTableVisible: false, // 弹窗显示状态
  153. // 核心设备实例
  154. assetnum: null, // 设备台账编码
  155. historyTableData: [], // 核心设备实例的所有历史事项信息
  156. dialogTime: null, // 弹框内的时间
  157. hisCurPage: 1, // 当前页码
  158. hisPageSize: 8, // 当前页码
  159. hisTotal: 0, // 总条数
  160. startTime: null, // 开始时间
  161. endTime: null, // 结束事件
  162. showDetail: false, // 显示照片、报告详情
  163. detailTitle: '图片预览' // 弹窗名称
  164. }
  165. },
  166. components: {
  167. Select,
  168. Input
  169. },
  170. computed: {},
  171. mounted() {
  172. this.getSystemList()
  173. this.getEquipmentOfSystem()
  174. this.getTableData()
  175. },
  176. methods: {
  177. /**
  178. * 获取系统列表数据
  179. */
  180. getSystemList() {
  181. querySystemList().then(res => {
  182. if (res.result === 'success') {
  183. let data = res.data
  184. let newData = []
  185. _.forEach(data, item => {
  186. newData.push({
  187. id: item.code,
  188. name: item.name
  189. })
  190. })
  191. this.systemList = newData
  192. }
  193. })
  194. },
  195. /**
  196. * 切换系统名称
  197. */
  198. changeCurSystem(val) {
  199. console.log('val', val)
  200. },
  201. /**
  202. * 获取系统下的设备
  203. */
  204. getEquipmentOfSystem() {
  205. let param = {
  206. plazaId: 1000423,
  207. ccode: 1002347
  208. }
  209. if (this.systemId !== '') {
  210. param.smsxt = this.systemId
  211. }
  212. queryEquipmentList('/data/home/querySystemCard', param).then(res => {
  213. console.log('res', res)
  214. })
  215. },
  216. /**
  217. * 切换系统下的设备
  218. */
  219. changeEquipment(id) {
  220. _.map(this.systemContentData, o => {
  221. return (o.isActive = o.id === id)
  222. })
  223. },
  224. /**
  225. * 获取表数据
  226. */
  227. getTableData() {
  228. let query = {
  229. category_code: 'gdc'
  230. }
  231. queryTableData(`/data/glsms_asset/query?plazaId=1000423&page=${this.curPage}&size=${this.pageSize}`, query).then(res => {
  232. const { result, count, data } = res
  233. if (result === 'success') {
  234. this.tatol = count
  235. this.tableData = data
  236. }
  237. })
  238. },
  239. /**
  240. * 表第一列序号
  241. */
  242. indexMethod(index) {
  243. return index + 1
  244. },
  245. /**
  246. * 切换页码
  247. */
  248. changeTablePage(page) {
  249. this.curPage = page
  250. this.getTableData()
  251. },
  252. /**
  253. * 显示设备实例的维保、专维等状态
  254. */
  255. showEquipmentStatus(row, column, e) {
  256. setTimeout(() => {
  257. if (this.showDetail) return
  258. this.dialogTableVisible = true
  259. this.assetnum = row.assetnum
  260. this.initTimePicker()
  261. }, 36)
  262. },
  263. /**
  264. * 获取核心设备实例的所有历史事项信息
  265. */
  266. getEquipmentHistoryMsg() {
  267. this.historyTableData = []
  268. let param = {
  269. page: this.hisCurPage,
  270. size: this.hisPageSize,
  271. // assetnum: this.assetnum,
  272. assetnum: 8952,
  273. // startDate: this.startTime,
  274. startDate: 20180101000000,
  275. // endDate: this.endTime
  276. endDate: 20180201000000
  277. }
  278. queryHistoryTableData('/data/base/queryDateByAssetNum', param).then(res => {
  279. const { result, data, count } = res
  280. if (result === 'success') {
  281. this.historyTableData = data
  282. this.hisTotal = count
  283. _.forEach(this.historyTableData, item => {
  284. let name
  285. switch (item.type) {
  286. case '0':
  287. name = '专维'
  288. break
  289. case '1':
  290. name = '维保'
  291. break
  292. case '2':
  293. name = '第三方检测'
  294. break
  295. }
  296. item.typeName = name
  297. })
  298. }
  299. })
  300. },
  301. /**
  302. * 初始化时间选择器
  303. */
  304. initTimePicker() {
  305. let endTime = new Date(),
  306. startTime = new Date(endTime.getTime() - 1000 * 60 * 60 * 24 * 30)
  307. this.dialogTime = [startTime, endTime]
  308. this.changeTime()
  309. },
  310. /**
  311. * 切换时间
  312. */
  313. changeTime() {
  314. this.hisCurPage = 1
  315. if (this.dialogTime) {
  316. this.startTime = moment.unix(new Date(this.dialogTime[0]).getTime() / 1000).format('YYYYMMDDHHmmss')
  317. this.endTime = moment.unix(new Date(this.dialogTime[1]).getTime() / 1000).format('YYYYMMDDHHmmss')
  318. } else {
  319. this.initTimePicker()
  320. }
  321. this.getEquipmentHistoryMsg()
  322. },
  323. /**
  324. * 切换设备台账下所有历史事项信息页码
  325. */
  326. changeHisTablePage(page) {
  327. this.hisCurPage = page
  328. this.getEquipmentHistoryMsg()
  329. },
  330. /**
  331. * 显示图片详情
  332. */
  333. showPicturesDetail(val) {
  334. console.log('val', val)
  335. // if (!val.file_type || !val.file_type_id) {
  336. // return
  337. // }
  338. this.showDetail = true
  339. this.detailTitle = '图片预览'
  340. this.getDetailData(val)
  341. },
  342. /**
  343. * 获取图片/报告详情
  344. */
  345. getDetailData(val) {
  346. let param = {
  347. file_type: 1, // val.file_type
  348. file_type_id: 2467908, // val.file_type_id
  349. type: this.detailTitle === '图片预览' ? 0 : 1
  350. }
  351. queryDetailData('/data/base/queryFileDetails', param).then(res => {
  352. console.log('res', res)
  353. })
  354. }
  355. }
  356. }
  357. </script>
  358. <style lang='less' scoped>
  359. .core-device-report {
  360. display: flex;
  361. width: 100%;
  362. height: 100%;
  363. .main-left {
  364. padding-left: 16px;
  365. padding-right: 14px;
  366. padding-top: 12px;
  367. padding-bottom: 12px;
  368. width: 247px;
  369. border-top: 1px solid #e4e6e7;
  370. border-right: 1px solid #e4e6e7;
  371. .system-select {
  372. margin-bottom: 16px;
  373. }
  374. .item-content {
  375. padding-left: 12px;
  376. padding-right: 21px;
  377. padding-top: 7px;
  378. padding-bottom: 8px;
  379. border-bottom: 1px solid #e4e6e7;
  380. cursor: pointer;
  381. > div {
  382. display: flex;
  383. }
  384. .first-row {
  385. margin-bottom: 6px;
  386. display: flex;
  387. justify-content: space-between;
  388. > div:first-child {
  389. font-size: 14px;
  390. color: #1f2429;
  391. line-height: 19px;
  392. }
  393. > div:nth-of-type(2) {
  394. margin-left: 8px;
  395. font-size: 12px;
  396. color: #cd981d;
  397. line-height: 20px;
  398. }
  399. }
  400. .sec-row {
  401. margin-bottom: 6px;
  402. > div:first-child {
  403. font-size: 14px;
  404. color: #1f2429;
  405. line-height: 19px;
  406. > span {
  407. font-size: 12px;
  408. color: #646c73;
  409. }
  410. }
  411. // >div:nth-of-type(2){
  412. // padding-left: 8px;
  413. // padding-right: 8px;
  414. // font-size: 12px;
  415. // color: #0065B3;
  416. // line-height: 22px;
  417. // background: #E1F2FF;
  418. // }
  419. .abnormal {
  420. margin-left: 11px;
  421. padding-left: 3px;
  422. padding-right: 3px;
  423. font-size: 12px;
  424. color: #f54e45 !important;
  425. background: #fde3e2 !important;
  426. border-radius: 9px;
  427. }
  428. }
  429. }
  430. .system-content {
  431. .active {
  432. background: #e5eef5;
  433. border-radius: 2px;
  434. .first-row > div:first-child,
  435. .sec-row > div {
  436. color: #025baa;
  437. > span {
  438. color: #025baa;
  439. }
  440. }
  441. }
  442. }
  443. }
  444. .main-right {
  445. flex: 1;
  446. background: #fff;
  447. padding-left: 15px;
  448. padding-right: 13px;
  449. padding-top: 13px;
  450. padding-bottom: 25px;
  451. .search-container {
  452. margin-bottom: 12px;
  453. }
  454. .page {
  455. display: flex;
  456. justify-content: flex-end;
  457. }
  458. .el-dialog {
  459. min-height: 600px;
  460. }
  461. .detail-container {
  462. display: flex;
  463. min-height: 600px;
  464. }
  465. .pictures-menu {
  466. margin-right: 21px;
  467. width: 180px;
  468. }
  469. }
  470. }
  471. </style>