detail.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. <template>
  2. <div class='gdqd-dialog'>
  3. <div class='top'></div>
  4. <div class='gdqd-dialog-top'>
  5. <el-input
  6. clearable
  7. @keyup.enter.native='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. @keyup.enter.native='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' :index='indexMethod'></el-table-column>
  111. <el-table-column prop='sbjc' label='设备名称' min-width='150' :show-overflow-tooltip='true' resizable>
  112. <template slot-scope='{row}'>{{row.sbjc||'--'}}</template>
  113. </el-table-column>
  114. <el-table-column prop='assetnum' label='设备编号' :show-overflow-tooltip='true'>
  115. <template slot-scope='{row}'>{{row.assetnum||'--'}}</template>
  116. </el-table-column>
  117. <el-table-column prop='sl' label='数量' width='70' :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='楼层' width='70' :show-overflow-tooltip='true'>
  133. <template slot-scope='{row}'>{{row.floor||'--'}}</template>
  134. </el-table-column>
  135. <el-table-column prop='wzqy' label='安装位置' min-width='150' :show-overflow-tooltip='true'>
  136. <template slot-scope='{row}'>{{row.wzqy||'--'}}</template>
  137. </el-table-column>
  138. <el-table-column prop='manufacturer' label='生产厂商' min-width='150' :show-overflow-tooltip='true'>
  139. <template slot-scope='{row}'>{{row.manufacturer||'--'}}</template>
  140. </el-table-column>
  141. <el-table-column prop='fws' label='服务商' min-width='150' :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 'meri-design'
  160. // import Select from '@/components/Select/Select.vue'
  161. import { querySelect } from '@/api/public.js'
  162. import { mapGetters } from 'vuex'
  163. import { queryHxsbDetail } from '@/api/room.js'
  164. export default {
  165. props: ['row'],
  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. },
  194. computed: {
  195. ...mapGetters(['floorSelect', 'plazaId'])
  196. },
  197. mounted() {
  198. if (this.row) {
  199. this.queryDetail()
  200. this.query()
  201. }
  202. },
  203. watch: {
  204. row: {
  205. deep: true,
  206. handler: function(newV, oldV) {
  207. if (newV != oldV) {
  208. this.queryDetail()
  209. this.query()
  210. }
  211. }
  212. }
  213. },
  214. methods: {
  215. indexMethod(index) {
  216. return (this.page - 1) * this.size + index + 1
  217. },
  218. show() {
  219. this.dialogFormVisible = !this.dialogFormVisible
  220. },
  221. // 改变楼层
  222. changeFloorStr() {
  223. this.queryDetail()
  224. },
  225. // 改变管理归属
  226. changeSbglgsStr() {
  227. this.queryDetail()
  228. },
  229. // 改变设备状态
  230. changeSb_status() {
  231. this.queryDetail()
  232. },
  233. // 点击分页
  234. pageChanged(page) {
  235. this.pageDetail = page
  236. this.queryDetail()
  237. },
  238. // 设备详情
  239. queryDetail() {
  240. this.detailData = []
  241. let postParams = {
  242. manufacturer: this.row.manufacturer || '--',
  243. sbxh: this.row.sbxh || '--',
  244. brand: this.row.brand || '--',
  245. location: '1572',
  246. classstructureid: this.row.classstructureid,
  247. type_code: this.row.type_code
  248. }
  249. // if (this.floorChange) {
  250. // postParams.gname = this.floorChange
  251. // }
  252. // if (this.row.floorcode) {
  253. // postParams.floorcode = this.row.floorcode
  254. // }
  255. let data = {
  256. plazaId: this.plazaId,
  257. page: this.pageDetail,
  258. size: this.sizeDetail
  259. }
  260. if (this.floorStr) {
  261. postParams.floor = this.floorStr
  262. }
  263. if (this.sbglgsStr) {
  264. postParams.sbglgs = this.sbglgsStr
  265. }
  266. if (this.statusStr) {
  267. postParams.sb_status = this.statusStr
  268. }
  269. if (this.form.wbsxjlInput5) {
  270. if (data.keyword) {
  271. data.keyword = `${data.keyword + ';' + this.form.wbsxjlInput5}:wzqy`
  272. } else {
  273. data.keyword = `${this.form.wbsxjlInput5}:wzqy`
  274. }
  275. }
  276. if (this.form.rwbhInput5) {
  277. if (data.keyword) {
  278. data.keyword = `${data.keyword + ';' + this.form.rwbhInput5}:manufacturer`
  279. } else {
  280. data.keyword = `${this.form.rwbhInput5}:manufacturer`
  281. }
  282. }
  283. if (this.form.ycgdbhInput5) {
  284. if (data.keyword) {
  285. data.keyword = `${data.keyword + ';' + this.form.ycgdbhInput5}:fws`
  286. } else {
  287. data.keyword = `${this.form.ycgdbhInput5}:fws`
  288. }
  289. }
  290. if (this.form.ssmsInput5) {
  291. if (data.keyword) {
  292. data.keyword = `${data.keyword + ';' + this.form.ssmsInput5}:sbbh`
  293. } else {
  294. data.keyword = `${this.form.ssmsInput5}:sbbh`
  295. }
  296. }
  297. if (this.mcbhChange) {
  298. if (data.keyword) {
  299. data.keyword = `${data.keyword + ';' + this.mcbhChange}:sbjc,sbbh`
  300. } else {
  301. data.keyword = `${this.mcbhChange}:sbjc,sbbh`
  302. }
  303. }
  304. if (this.ssppbh) {
  305. if (data.keyword) {
  306. data.keyword = `${data.keyword + ';' + this.ssppbh}:brand,sbxh`
  307. } else {
  308. data.keyword = `${this.ssppbh}:brand,sbxh`
  309. }
  310. }
  311. queryHxsbDetail({ data, postParams }).then(res => {
  312. //console.log('钻取表', res)
  313. this.loadingDetail = false
  314. this.detailData = res.data.data ? res.data.data : []
  315. this.totalDetail = res.data.count
  316. })
  317. },
  318. // 下拉框数据
  319. query() {
  320. let postParams = [
  321. {
  322. columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
  323. params: {
  324. type_code: this.type_code
  325. },
  326. tableName: 'sms_asset'
  327. }
  328. ]
  329. let data = {
  330. plazaId: this.plazaId
  331. }
  332. querySelect({ data, postParams }).then(res => {
  333. //console.log('管理归属', res)
  334. if (res.data.data) {
  335. let sb_status = [],
  336. sbglgs = []
  337. sb_status = res.data.data.sms_asset.sb_status ? res.data.data.sms_asset.sb_status : []
  338. sbglgs = res.data.data.sms_asset.sbglgs ? res.data.data.sms_asset.sbglgs : []
  339. if (sb_status.length > 0) {
  340. sb_status.forEach(el => {
  341. let obj = {
  342. id: el.key,
  343. name: el.value
  344. }
  345. this.sb_status.push(obj)
  346. })
  347. }
  348. if (sbglgs.length > 0) {
  349. sbglgs.forEach(el => {
  350. let obj = {
  351. id: el.key,
  352. name: el.value
  353. }
  354. this.sbglgs.push(obj)
  355. })
  356. }
  357. }
  358. })
  359. },
  360. confirm() {
  361. this.queryDetail()
  362. }
  363. }
  364. }
  365. </script>
  366. <style lang="less" scoped>
  367. .gdqd-dialog {
  368. .gdqd-dialog-top {
  369. display: flex;
  370. }
  371. .foot {
  372. height: 32px;
  373. display: flex;
  374. justify-content: flex-end;
  375. margin-top: 28px;
  376. }
  377. .dialog-none {
  378. width: 100px;
  379. position: absolute;
  380. right: 0;
  381. .input-dialog {
  382. .input-dialog-top {
  383. color: #c3c7cb;
  384. cursor: pointer;
  385. position: absolute;
  386. top: -30px;
  387. right: 30px;
  388. }
  389. .input-dialog-form {
  390. padding: 20px 24px;
  391. background: rgba(255, 255, 255, 1);
  392. border-radius: 4px;
  393. border: 1px solid rgba(195, 199, 203, 1);
  394. z-index: 9999;
  395. position: absolute;
  396. top: 0px;
  397. right: 30px;
  398. }
  399. .input-dialog-p {
  400. margin-bottom: 8px;
  401. font-size: 14px;
  402. font-family: MicrosoftYaHei;
  403. color: rgba(100, 108, 115, 1);
  404. line-height: 22px;
  405. }
  406. .input-dialog-p2 {
  407. margin-bottom: 16px;
  408. }
  409. }
  410. .input-dialog-foot {
  411. display: flex;
  412. justify-content: flex-end;
  413. }
  414. }
  415. }
  416. </style>
  417. <style lang="less">
  418. .gdqd-dialog {
  419. padding: 16px 24px 24px;
  420. .el-table td,
  421. .el-table th {
  422. padding: 8px 0;
  423. }
  424. }
  425. </style>