detail.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. <template>
  2. <div class='gdqd-dialog'>
  3. <div class='top'></div>
  4. <div class='gdqd-dialog-top'>
  5. <el-input
  6. clearable
  7. @change='queryDetail'
  8. placeholder='搜索设备名称编号'
  9. style='width:196px;margin-right:12px'
  10. size='small'
  11. prefix-icon='el-icon-search'
  12. v-model='mcbhChange'
  13. ></el-input>
  14. <Select
  15. width='146'
  16. v-model='sbglgsStr'
  17. style='margin-right:12px'
  18. v-if='sbglgs.length>0'
  19. tipPlace='top'
  20. caption='管理归属'
  21. @change='changeSbglgsStr'
  22. size='small'
  23. :selectdata='sbglgs'
  24. ></Select>
  25. <Select
  26. width='146'
  27. style='margin-right:12px'
  28. v-if='sb_status.length>0'
  29. tipPlace='top'
  30. caption='设备状态'
  31. size='small'
  32. @change='changeSb_status'
  33. v-model='statusStr'
  34. :selectdata='sb_status'
  35. ></Select>
  36. <el-input
  37. clearable
  38. @change='queryDetail'
  39. placeholder='搜索品牌型号'
  40. style='width:196px;margin-right:12px'
  41. size='small'
  42. prefix-icon='el-icon-search'
  43. v-model='ssppbh'
  44. ></el-input>
  45. <Select
  46. width='146'
  47. style='margin-right:12px'
  48. tipPlace='top'
  49. caption='楼层:'
  50. size='small'
  51. @change='changeFloorStr'
  52. v-model='floorStr'
  53. :selectdata='floorSelect'
  54. ></Select>
  55. </div>
  56. <div class='dialog-none'>
  57. <div class='input-dialog'>
  58. <div class='input-dialog-top' @click='show'>
  59. <img src='@/assets/imgs/select.png' />
  60. 筛选
  61. </div>
  62. <div class='input-dialog-form' v-if='dialogFormVisible'>
  63. <p class='input-dialog-p'>安装位置</p>
  64. <p class='input-dialog-p2'>
  65. <el-input
  66. clearable
  67. placeholder='搜索安装位置'
  68. style='width:200px;'
  69. size='mini'
  70. prefix-icon='el-icon-search'
  71. v-model='form.wbsxjlInput5'
  72. ></el-input>
  73. </p>
  74. <p class='input-dialog-p'>生产厂商</p>
  75. <p class='input-dialog-p2'>
  76. <el-input
  77. clearable
  78. placeholder='搜索生产厂商'
  79. style='width:200px;'
  80. size='mini'
  81. prefix-icon='el-icon-search'
  82. v-model='form.rwbhInput5'
  83. ></el-input>
  84. </p>
  85. <p class='input-dialog-p'>服务商</p>
  86. <p class='input-dialog-p2'>
  87. <el-input
  88. clearable
  89. placeholder='搜索服务商'
  90. style='width:200px;'
  91. size='mini'
  92. prefix-icon='el-icon-search'
  93. v-model='form.ycgdbhInput5'
  94. ></el-input>
  95. </p>
  96. <p class='input-dialog-foot'>
  97. <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
  98. <el-button type='primary' @click='confirm' size='mini'>确 定</el-button>
  99. </p>
  100. </div>
  101. </div>
  102. </div>
  103. <el-table
  104. :border='true'
  105. v-loading='loadingDetail'
  106. :data='detailData'
  107. style='width:100%;margin-top:12px'
  108. :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
  109. >
  110. <el-table-column type='index' label='序号' width='50'></el-table-column>
  111. <el-table-column prop='sbjc' label='设备名称' :show-overflow-tooltip='true' resizable>
  112. <template slot-scope='{row}'>{{row.sbjc||'--'}}</template>
  113. </el-table-column>
  114. <el-table-column prop='sbbh' label='设备编号' :show-overflow-tooltip='true'>
  115. <template slot-scope='{row}'>{{row.sbbh||'--'}}</template>
  116. </el-table-column>
  117. <el-table-column prop='sl' label='数量' :show-overflow-tooltip='true'>
  118. <template slot-scope='{row}'>{{row.sl||'--'}}</template>
  119. </el-table-column>
  120. <el-table-column prop='sbglgs' label='管理归属' :show-overflow-tooltip='true'>
  121. <template slot-scope='{row}'>{{row.sbglgs||'--'}}</template>
  122. </el-table-column>
  123. <el-table-column prop='sbstatus' label='设备状态' :show-overflow-tooltip='true'>
  124. <template slot-scope='{row}'>{{row.sbstatus||'--'}}</template>
  125. </el-table-column>
  126. <el-table-column prop='brand' label='品牌' :show-overflow-tooltip='true'>
  127. <template slot-scope='{row}'>{{row.brand||'--'}}</template>
  128. </el-table-column>
  129. <el-table-column prop='sbxh' label='型号' :show-overflow-tooltip='true'>
  130. <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
  131. </el-table-column>
  132. <el-table-column prop='floor' label='楼层' :show-overflow-tooltip='true'>
  133. <template slot-scope='{row}'>{{row.floor||'--'}}</template>
  134. </el-table-column>
  135. <el-table-column prop='wzqy' label='安装位置' :show-overflow-tooltip='true'>
  136. <template slot-scope='{row}'>{{row.wzqy||'--'}}</template>
  137. </el-table-column>
  138. <el-table-column prop='manufacturer' label='生产厂商' :show-overflow-tooltip='true'>
  139. <template slot-scope='{row}'>{{row.manufacturer||'--'}}</template>
  140. </el-table-column>
  141. <el-table-column prop='fws' label='服务商' :show-overflow-tooltip='true'>
  142. <template slot-scope='{row}'>{{row.fws||'--'}}</template>
  143. </el-table-column>
  144. </el-table>
  145. <div class='foot'>
  146. <el-pagination
  147. background
  148. layout='prev, pager, next'
  149. :total='totalDetail'
  150. :page-size='sizeDetail'
  151. @prev-click='pageChanged'
  152. @next-click='pageChanged'
  153. @current-change='pageChanged'
  154. ></el-pagination>
  155. </div>
  156. </div>
  157. </template>
  158. <script>
  159. import Select from '@/components/Select/Select.vue'
  160. import { querySelect } from '@/api/public.js'
  161. import { mapGetters } from 'vuex'
  162. import { queryHxsbDetail } from '@/api/room.js'
  163. import InputDialog from './inputDialog'
  164. export default {
  165. props: ['type_code'],
  166. data() {
  167. return {
  168. dialogFormVisible: false,
  169. sb_status: [],
  170. sbglgs: [],
  171. input: '',
  172. floorStr: '',
  173. sbglgsStr: '',
  174. statusStr: '',
  175. loadingDetail: true,
  176. totalDetail: 0,
  177. pageDetail: 1,
  178. sizeDetail: 10,
  179. detailData: [],
  180. keyword: '',
  181. form: {
  182. wbsxjlInput5: '',
  183. rwbhInput5: '',
  184. ycgdbhInput5: '',
  185. ssmsInput5: ''
  186. },
  187. mcbhChange: '',
  188. ssppbh: ''
  189. }
  190. },
  191. components: {
  192. Select,
  193. InputDialog
  194. },
  195. computed: {
  196. ...mapGetters(['floorSelect'])
  197. },
  198. mounted() {
  199. if (this.type_code) {
  200. this.queryDetail()
  201. this.query()
  202. }
  203. },
  204. methods: {
  205. show() {
  206. this.dialogFormVisible = !this.dialogFormVisible
  207. },
  208. // 改变楼层
  209. changeFloorStr() {
  210. this.queryDetail()
  211. },
  212. // 改变管理归属
  213. changeSbglgsStr() {
  214. this.queryDetail()
  215. },
  216. // 改变设备状态
  217. changeSb_status() {
  218. this.queryDetail()
  219. },
  220. // 点击分页
  221. pageChanged(page) {
  222. this.pageDetail = page
  223. this.queryDetail()
  224. },
  225. // 设备详情
  226. queryDetail() {
  227. this.detailData = []
  228. let postParams = {
  229. type_code: this.type_code //自定义分类内码 主要设备清单必传
  230. }
  231. let data = {
  232. plazaId: this.$store.state.plazaId,
  233. page: this.pageDetail,
  234. size: this.sizeDetail
  235. }
  236. if (this.floorStr) {
  237. postParams.floor = this.floorStr
  238. }
  239. if (this.sbglgsStr) {
  240. postParams.sbglgs = this.sbglgsStr
  241. }
  242. if (this.statusStr) {
  243. postParams.sb_status = this.statusStr
  244. }
  245. if (this.form.wbsxjlInput5) {
  246. if (data.keyword) {
  247. data.keyword = `${data.keyword + ';' + this.form.wbsxjlInput5}:wzqy`
  248. } else {
  249. data.keyword = `${this.form.wbsxjlInput5}:wzqy`
  250. }
  251. }
  252. if (this.form.rwbhInput5) {
  253. if (data.keyword) {
  254. data.keyword = `${data.keyword + ';' + this.form.rwbhInput5}:manufacturer`
  255. } else {
  256. data.keyword = `${this.form.rwbhInput5}:manufacturer`
  257. }
  258. }
  259. if (this.form.ycgdbhInput5) {
  260. if (data.keyword) {
  261. data.keyword = `${data.keyword + ';' + this.form.ycgdbhInput5}:fws`
  262. } else {
  263. data.keyword = `${this.form.ycgdbhInput5}:fws`
  264. }
  265. }
  266. if (this.form.ssmsInput5) {
  267. if (data.keyword) {
  268. data.keyword = `${data.keyword + ';' + this.form.ssmsInput5}:sbbh`
  269. } else {
  270. data.keyword = `${this.form.ssmsInput5}:sbbh`
  271. }
  272. }
  273. if (this.mcbhChange) {
  274. if (data.keyword) {
  275. data.keyword = `${data.keyword + ';' + this.mcbhChange}:sbjc,sbbh`
  276. } else {
  277. data.keyword = `${this.mcbhChange}:sbjc,sbbh`
  278. }
  279. }
  280. if (this.ssppbh) {
  281. if (data.keyword) {
  282. data.keyword = `${data.keyword + ';' + this.ssppbh}:brand,sbxh`
  283. } else {
  284. data.keyword = `${this.ssppbh}:brand,sbxh`
  285. }
  286. }
  287. queryHxsbDetail({ data, postParams }).then(res => {
  288. console.log('钻取表', res)
  289. this.loadingDetail = false
  290. this.detailData = res.data.data ? res.data.data : []
  291. this.totalDetail = res.data.count
  292. })
  293. },
  294. // 下拉框数据
  295. query() {
  296. let postParams = [
  297. {
  298. columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
  299. params: {
  300. type_code: this.type_code
  301. },
  302. tableName: 'glsms_asset'
  303. }
  304. ]
  305. let data = {
  306. plazaId: this.$store.state.plazaId
  307. }
  308. querySelect({ data, postParams }).then(res => {
  309. console.log('管理归属', res)
  310. if (res.data.data) {
  311. let sb_status = [],
  312. sbglgs = []
  313. sb_status = res.data.data.glsms_asset.sb_status ? res.data.data.glsms_asset.sb_status : []
  314. sbglgs = res.data.data.glsms_asset.sbglgs ? res.data.data.glsms_asset.sbglgs : []
  315. if (sb_status.length > 0) {
  316. sb_status.forEach(el => {
  317. let obj = {
  318. id: el.key,
  319. name: el.value
  320. }
  321. this.sb_status.push(obj)
  322. })
  323. }
  324. if (sbglgs.length > 0) {
  325. sbglgs.forEach(el => {
  326. let obj = {
  327. id: el.key,
  328. name: el.value
  329. }
  330. this.sbglgs.push(obj)
  331. })
  332. }
  333. }
  334. })
  335. },
  336. confirm() {
  337. this.queryDetail()
  338. }
  339. }
  340. }
  341. </script>
  342. <style lang="less" scoped>
  343. .gdqd-dialog {
  344. .gdqd-dialog-top {
  345. display: flex;
  346. }
  347. .foot {
  348. height: 32px;
  349. display: flex;
  350. justify-content: flex-end;
  351. margin-top: 28px;
  352. }
  353. .dialog-none {
  354. width: 100px;
  355. position: absolute;
  356. right: 0;
  357. .input-dialog {
  358. .input-dialog-top {
  359. color: #c3c7cb;
  360. cursor: pointer;
  361. position: absolute;
  362. top: -30px;
  363. right: 30px;
  364. }
  365. .input-dialog-form {
  366. padding: 20px 24px;
  367. background: rgba(255, 255, 255, 1);
  368. border-radius: 4px;
  369. border: 1px solid rgba(195, 199, 203, 1);
  370. z-index: 9999;
  371. position: absolute;
  372. top: 0px;
  373. right: 30px;
  374. }
  375. .input-dialog-p {
  376. margin-bottom: 8px;
  377. font-size: 14px;
  378. font-family: MicrosoftYaHei;
  379. color: rgba(100, 108, 115, 1);
  380. line-height: 22px;
  381. }
  382. .input-dialog-p2 {
  383. margin-bottom: 16px;
  384. }
  385. }
  386. .input-dialog-foot {
  387. display: flex;
  388. justify-content: flex-end;
  389. }
  390. }
  391. }
  392. </style>
  393. <style lang="less">
  394. .gdqd-dialog {
  395. padding: 16px 24px 24px;
  396. .el-table td,
  397. .el-table th {
  398. padding: 8px 0;
  399. }
  400. }
  401. </style>