detail.vue 16 KB

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