eqDetaileDialog.vue 11 KB

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