equipDetail.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <template>
  2. <!-- 详情页面 -->
  3. <div class='gdqd-dialog1'>
  4. <el-dialog :title='`${row.sbjc}-设备详情`' :visible.sync='visible' :fullscreen='true'>
  5. <div class='top'></div>
  6. <div class='qdxq-top'>
  7. <div class='gdqd-dialog-top'></div>
  8. <div class='gdqd-dialog-bottom'>
  9. <el-table @row-click='innerTable' :data='tableData' :border='true' style='width: 100%;margin-bottom:30px'>
  10. <el-table-column type='index' label='序号' width='60'></el-table-column>
  11. <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='338'>
  12. <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
  13. </el-table-column>
  14. <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
  15. <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
  16. </el-table-column>
  17. <el-table-column prop='sl' label='数量' width='60'>
  18. <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
  19. </el-table-column>
  20. <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
  21. <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
  22. </el-table-column>
  23. <el-table-column prop='sb_status' label='设备状态' width='80' show-overflow-tooltip resizable>
  24. <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
  25. </el-table-column>
  26. <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
  27. <template slot-scope='{row}'>{{row.brand || '--'}}</template>
  28. </el-table-column>
  29. <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='100'>
  30. <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
  31. </el-table-column>
  32. <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
  33. <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
  34. </el-table-column>
  35. <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='250'>
  36. <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
  37. </el-table-column>
  38. <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='300'>
  39. <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
  40. </el-table-column>
  41. <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='300'>
  42. <template slot-scope='{row}'>{{row.fws || '--'}}</template>
  43. </el-table-column>
  44. <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
  45. <template slot-scope='{row}'>{{'--'}}</template>
  46. </el-table-column>
  47. </el-table>
  48. </div>
  49. </div>
  50. <div class='qdxq-bottom'>
  51. <div class='wb-title'>
  52. <div class='tab-title' id='1' :class='activeId==1?"active-is":""' @click='tabClick(1)'>维保</div>
  53. <div class='tab-title' id='2' :class='activeId==2?"active-is":""' @click='tabClick(2)'>维修</div>
  54. </div>
  55. <div v-if='activeId==1'>
  56. <el-tabs v-model='activeName1' @tab-click='handleClickWb'>
  57. <el-tab-pane label='重要维保' name='wb1' v-if='Object.keys(this.row).length>0'>
  58. <wbTable ref='wb1' :smsxt='smsxt' tabLabel='重要维保' :diff='diff' :assetnum='row.assetnum' :size='3'></wbTable>
  59. </el-tab-pane>
  60. <el-tab-pane label='日常维保' name='wb2' v-if='Object.keys(this.row).length>0'>
  61. <rcwbTable ref='wb2' :smsxt='smsxt' tabLabel='日常维保' :diff='diff' :assetnum='row.assetnum' :size='3'></rcwbTable>
  62. </el-tab-pane>
  63. </el-tabs>
  64. </div>
  65. <div v-if='activeId==2'>
  66. <el-tabs v-model='activeName2' @tab-click='handleClickWx'>
  67. <el-tab-pane label='重要维修' name='wx1' v-if='Object.keys(this.row).length>0'>
  68. <wxTable ref='wx1' :smsxt='smsxt' tabLabel='重要维修' :diff='diff' :assetnum='row.assetnum' :size='3'></wxTable>
  69. </el-tab-pane>
  70. <el-tab-pane label='日常维修' name='wx2' v-if='Object.keys(this.row).length>0'>
  71. <rcwxTable ref='wx2' :smsxt='smsxt' tabLabel='日常维修' :diff='diff' :assetnum='row.assetnum' :size='3'></rcwxTable>
  72. </el-tab-pane>
  73. </el-tabs>
  74. </div>
  75. </div>
  76. </el-dialog>
  77. </div>
  78. </template>
  79. <script>
  80. import { Select } from 'meri-design'
  81. import { mapGetters } from 'vuex'
  82. import { queryAsset } from '@/api/equipmentList.js'
  83. import { querySelect } from '@/api/public.js'
  84. import inputDialog from './inputDIalog'
  85. import rcwbTable from './rcwbTable'
  86. import wbTable from './wbTable'
  87. import rcwxTable from './rcwxTable'
  88. import wxTable from './wxTable'
  89. export default {
  90. data() {
  91. return {
  92. tableData: [],
  93. dataSelect2: [
  94. { id: 'test1', name: '选择项' },
  95. { id: 'test2', name: '单平米' },
  96. { id: 'test3', name: '下级分项' },
  97. { id: 'test4', name: '滑动平均滑动平均' },
  98. ],
  99. // page: 1,
  100. // size: 10,
  101. // total: 1,
  102. sbjc: '',
  103. brand: '',
  104. wzjc: '',
  105. floor: '1',
  106. status: '1',
  107. manufacturer: '',
  108. fws: '',
  109. sbglgs: '1',
  110. sbglgsOption: [],
  111. statusOption: [],
  112. floorAllSelect: [],
  113. activeId: '1',
  114. activeName1: 'wb1',
  115. activeName2: 'wx1',
  116. row: {},
  117. visible: false,
  118. smsxt: '',
  119. diff: '',
  120. }
  121. },
  122. components: {
  123. Select,
  124. inputDialog,
  125. rcwbTable,
  126. wbTable,
  127. rcwxTable,
  128. wxTable,
  129. },
  130. computed: {
  131. ...mapGetters(['floorSelect']),
  132. },
  133. methods: {
  134. tabClick(item) {
  135. this.activeId = item
  136. },
  137. handleClickWb(label) {
  138. if (this.$refs[`${label.name}`]) {
  139. this.$refs[`${label.name}`].startMethods()
  140. }
  141. },
  142. handleClickWx(label) {
  143. if (this.$refs[`${label.name}`]) {
  144. this.$refs[`${label.name}`].startMethods()
  145. }
  146. },
  147. innerTable(row) {
  148. if (row.assetuid) {
  149. window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
  150. }
  151. },
  152. queryTableList() {
  153. let data = {
  154. plazaId: this.$store.state.plazaId,
  155. }
  156. let postParams = {
  157. classstructureid: this.row.classstructureid,
  158. type_code: this.row.type_code,
  159. manufacturer: this.row.manufacturer || '--',
  160. sbxh: this.row.sbxh || '--',
  161. brand: this.row.brand || '--',
  162. assetnum: this.assetnum,
  163. }
  164. queryAsset({ data, postParams }).then((res) => {
  165. //console.log(res)
  166. this.tableData = res.data.data
  167. if (this.tableData.length > 0) {
  168. this.row = this.tableData[0]
  169. this.smsxt = this.row.system_code
  170. this.$refs.wb1.startMethods()
  171. }
  172. this.total = res.data.count
  173. })
  174. },
  175. //弹框出现
  176. open(row) {
  177. this.visible = true
  178. this.row = JSON.parse(row.row)
  179. this.assetnum = this.row.assetnum
  180. this.smsxt = this.row.system_code
  181. console.log(this.smsxt)
  182. this.queryTableList()
  183. },
  184. },
  185. }
  186. </script>
  187. <style lang="less" scoped>
  188. .gdqd-dialog1 {
  189. //height: 100vh;
  190. display: flex;
  191. flex-direction: column;
  192. .qdxq-top {
  193. .gdqd-dialog-top {
  194. // margin-bottom: 20px;
  195. }
  196. .gdqd-dialog-bottom {
  197. overflow: hidden;
  198. //max-height: 12vh;
  199. }
  200. }
  201. .qdxq-bottom {
  202. //max-height: 76vh;
  203. flex: 1;
  204. .wb-title {
  205. display: flex;
  206. height: 48px;
  207. line-height: 48px;
  208. background: #f5f6f7;
  209. margin: 20px 0;
  210. .tab-title {
  211. padding: 4px 16px;
  212. }
  213. &:hover {
  214. cursor: pointer;
  215. color: #025baa;
  216. }
  217. .active-is {
  218. color: #025baa;
  219. border-bottom: 2px solid #025baa;
  220. cursor: pointer;
  221. }
  222. }
  223. }
  224. }
  225. @media screen and (max-width: 1600px) {
  226. .gdqd-dialog td {
  227. padding: 4px 0;
  228. }
  229. }
  230. </style>
  231. <style lang="less">
  232. .gdqd-dialog1 {
  233. /deep/.el-table td {
  234. cursor: pointer;
  235. }
  236. .el-dialog__header {
  237. padding: 16px 24px;
  238. color: #fff;
  239. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  240. }
  241. .el-dialog__headerbtn .el-dialog__close {
  242. color: #fff;
  243. }
  244. .el-dialog__title {
  245. font-size: 16px;
  246. font-family: PingFangSC-Medium, PingFang SC;
  247. font-weight: 500;
  248. color: #fff;
  249. line-height: 24px;
  250. }
  251. .qdxq-bottom {
  252. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  253. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  254. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  255. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  256. padding-left: 16px;
  257. }
  258. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  259. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  260. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  261. .el-tabs--top .el-tabs__item.is-top:last-child {
  262. padding-right: 16px;
  263. }
  264. .el-tabs__nav-wrap::after {
  265. height: 0;
  266. }
  267. .el-tabs {
  268. // height: 95vh;
  269. }
  270. .el-tabs__content {
  271. height: calc(100% - 45px);
  272. /deep/ .el-tab-pane > div {
  273. height: 100% !important;
  274. }
  275. }
  276. .is-active {
  277. color: #025baa !important;
  278. border-color: #025baa !important;
  279. }
  280. .el-tabs__item {
  281. padding: 5px 16px;
  282. height: 30px;
  283. line-height: 22px;
  284. font-size: 14px;
  285. font-family: MicrosoftYaHei;
  286. color: rgba(31, 36, 41, 1);
  287. border: 1px solid rgba(195, 199, 203, 1);
  288. }
  289. /deep/ .el-tabs__item:last-child {
  290. border-radius: 0px 4px 4px 0px;
  291. }
  292. /deep/ .el-tabs__item:nth-child(2) {
  293. border-radius: 4px 0px 0px 4px;
  294. }
  295. .el-tab-pane {
  296. height: 100% !important;
  297. }
  298. .el-tabs__active-bar {
  299. background-color: transparent !important;
  300. }
  301. }
  302. }
  303. /deep/.el-dialog {
  304. margin-top: 5vh !important;
  305. }
  306. </style>