detail.vue 15 KB

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