eqDetaileDialog.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <!-- 详情页面 -->
  3. <div class='gdqd-dialog'>
  4. <div class='top'></div>
  5. <div class='gdqd-dialog-top'>
  6. <el-input placeholder='搜索设备简称、编号' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  7. <el-input placeholder='搜索品牌、型号' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  8. <el-input placeholder='搜索生产厂商' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  9. <el-input placeholder='搜索安装位置' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  10. <el-input placeholder='搜索服务商' style='width:192px;margin-right:12px' size='small' prefix-icon='el-icon-search' v-model='input'></el-input>
  11. <Select width='120' v-model='floor' tipPlace='top' caption='楼层:' size='small' :selectdata='floorSelect'></Select>
  12. <Select v-model='sbglgs' width='180' tipPlace='top' style='margin-top:12px;' caption='管理归属' size='small' :selectdata='sbglgsOption'></Select>
  13. <Select
  14. width='146'
  15. style='margin-left:12px;margin-top:12px;'
  16. v-model='status'
  17. tipPlace='top'
  18. caption='设备状态'
  19. size='small'
  20. :selectdata='statusOption'
  21. ></Select>
  22. </div>
  23. <el-table :data='tableData' :border='true' style='width: 100%;amrgin-bottom:30px'>
  24. <el-table-column type='index' label='序号' width='80'></el-table-column>
  25. <el-table-column prop='sbjc' label='设备简称' show-overflow-tooltip resizable>
  26. <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
  27. </el-table-column>
  28. <el-table-column prop='assetnum' label='设备编号' show-overflow-tooltip resizable>
  29. <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
  30. </el-table-column>
  31. <el-table-column prop='sl' label='数量'>
  32. <template slot-scope='{row}'>{{row.sl || '--'}}</template>
  33. </el-table-column>
  34. <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
  35. <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
  36. </el-table-column>
  37. <el-table-column prop='sb_status' label='设备状态'>
  38. <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
  39. </el-table-column>
  40. <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable>
  41. <template slot-scope='{row}'>{{row.brand || '--'}}</template>
  42. </el-table-column>
  43. <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable>
  44. <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
  45. </el-table-column>
  46. <el-table-column prop='floor' label='楼层'>
  47. <template slot-scope='{row}'>{{row.floor || '--'}}</template>
  48. </el-table-column>
  49. <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable>
  50. <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
  51. </el-table-column>
  52. <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable>
  53. <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
  54. </el-table-column>
  55. <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable>
  56. <template slot-scope='{row}'>{{row.fws || '--'}}</template>
  57. </el-table-column>
  58. </el-table>
  59. <div class='foot'>
  60. <el-pagination
  61. background
  62. layout='prev, pager, next'
  63. :total='total'
  64. :page-size='size'
  65. @prev-click='pageChanged'
  66. @next-click='pageChanged'
  67. @current-change='pageChanged'
  68. ></el-pagination>
  69. </div>
  70. </div>
  71. </template>
  72. <script>
  73. import Select from '@/components/Select/Select.vue'
  74. import { mapGetters } from 'vuex'
  75. import { queryAsset } from '@/api/equipmentList.js'
  76. import { querySelect, queryTab } from '@/api/public.js'
  77. export default {
  78. data() {
  79. return {
  80. tableData: [],
  81. dataSelect2: [
  82. { id: 'test1', name: '选择项' },
  83. { id: 'test2', name: '单平米' },
  84. { id: 'test3', name: '下级分项' },
  85. { id: 'test4', name: '滑动平均滑动平均' }
  86. ],
  87. input: '',
  88. page: 1,
  89. size: 10,
  90. total: 1,
  91. keyword: '',
  92. floor: '',
  93. status: '',
  94. sbglgs: '',
  95. sbglgsOption: [],
  96. statusOption: []
  97. }
  98. },
  99. components: {
  100. Select
  101. },
  102. computed: {
  103. ...mapGetters(['floorSelect'])
  104. },
  105. props: ['row', 'major'],
  106. mounted() {
  107. this.queryTableList()
  108. this.tabFind()
  109. },
  110. methods: {
  111. //下拉框查询
  112. tabFind() {
  113. let postParams = [
  114. {
  115. columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
  116. params: {
  117. type_code: this.row.type_code
  118. },
  119. tableName: 'glsms_asset' //视图名称
  120. }
  121. ]
  122. let major
  123. if (this.major.slice(0, 2) == 'GD') {
  124. major = '供电'
  125. } else if (this.major.slice(0, 2) == 'XF') {
  126. major = '消防'
  127. } else if (this.major.slice(0, 2) == 'GPS') {
  128. major = '给排水'
  129. } else if (this.major.slice(0, 2) == 'DT') {
  130. major = '电梯'
  131. } else if (this.major.slice(0, 2) == 'RQ') {
  132. major = '燃气'
  133. } else {
  134. major = this.major
  135. }
  136. let data = {
  137. major: major,
  138. plazaId: this.$store.state.plazaId
  139. }
  140. querySelect({ data, postParams }).then(res => {
  141. console.log(res)
  142. let sb_status = res.data.data.glsms_asset.sb_status
  143. let sbglgs = res.data.data.glsms_asset.sbglgs
  144. this.sbglgsOption = []
  145. this.statusOption = []
  146. sb_status.forEach(el => {
  147. this.statusOption.push({
  148. name: el.value,
  149. id: el.key
  150. })
  151. })
  152. sbglgs.forEach(el => {
  153. this.sbglgsOption.push({
  154. name: el.value,
  155. id: el.key
  156. })
  157. })
  158. })
  159. },
  160. pageChanged(page) {
  161. this.page = page
  162. this.queryTableList()
  163. },
  164. queryTableList() {
  165. let major
  166. if (this.major.slice(0, 2) == 'GD') {
  167. major = '供电'
  168. } else if (this.major.slice(0, 2) == 'XF') {
  169. major = '消防'
  170. } else if (this.major.slice(0, 2) == 'GPS') {
  171. major = '给排水'
  172. } else if (this.major.slice(0, 2) == 'DT') {
  173. major = '电梯'
  174. } else if (this.major.slice(0, 2) == 'RQ') {
  175. major = '燃气'
  176. } else {
  177. major = this.major
  178. }
  179. let data = {
  180. major: major,
  181. plazaId: this.$store.state.plazaId,
  182. page: this.page,
  183. size: this.size,
  184. keyword: this.keyword
  185. // sbglgs:this.sbglgs,
  186. // floor:this.floor,
  187. // status:this.status
  188. }
  189. let postParams = {
  190. type_code: this.row.type_code,
  191. manufacturer: this.row.manufacturer,
  192. sbxh: this.row.sbxh,
  193. // floor: '--',
  194. brand: '--'
  195. }
  196. queryAsset({ data, postParams }).then(res => {
  197. console.log(res)
  198. this.tableData = res.data.data
  199. this.total = res.data.count
  200. })
  201. }
  202. },
  203. watch: {
  204. 'row.type_code': {
  205. handler(newV, oldV) {
  206. if (newV != oldV) {
  207. this.queryTableList()
  208. this.tabFind()
  209. }
  210. },
  211. deep: true
  212. }
  213. }
  214. }
  215. </script>
  216. <style lang="less" scoped>
  217. .gdqd-dialog {
  218. padding: 16px 24px 40px;
  219. .gdqd-dialog-top {
  220. display: flex;
  221. flex-wrap: wrap;
  222. margin-bottom: 12px;
  223. }
  224. td {
  225. overflow: hidden;
  226. text-overflow: ellipsis;
  227. white-space: nowrap;
  228. }
  229. .foot {
  230. height: 32px;
  231. display: flex;
  232. justify-content: flex-end;
  233. margin-top: 28px;
  234. }
  235. }
  236. </style>
  237. <style lang="less">
  238. </style>