123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431 |
- <template>
- <div class='gdqd-dialog'>
- <div class='top'></div>
- <div class='gdqd-dialog-top'>
- <el-input
- clearable
- @keyup.enter.native='queryDetail'
- placeholder='搜索设备名称编号'
- style='width:196px;margin-right:12px'
- size='small'
- prefix-icon='el-icon-search'
- v-model='mcbhChange'
- ></el-input>
- <Select
- width='146'
- v-model='sbglgsStr'
- style='margin-right:12px'
- v-if='sbglgs.length>=0'
- tipPlace='top'
- caption='管理归属:'
- @change='changeSbglgsStr'
- size='small'
- :selectdata='sbglgs'
- ></Select>
- <Select
- width='146'
- style='margin-right:12px'
- v-if='sb_status.length>=0'
- tipPlace='top'
- caption='设备状态:'
- size='small'
- @change='changeSb_status'
- v-model='statusStr'
- :selectdata='sb_status'
- ></Select>
- <el-input
- clearable
- @keyup.enter.native='queryDetail'
- placeholder='搜索品牌型号'
- style='width:196px;margin-right:12px'
- size='small'
- prefix-icon='el-icon-search'
- v-model='ssppbh'
- ></el-input>
- <Select
- width='146'
- style='margin-right:12px'
- tipPlace='top'
- caption='楼层:'
- size='small'
- @change='changeFloorStr'
- v-model='floorStr'
- :selectdata='floorSelect'
- ></Select>
- </div>
- <div class='dialog-none'>
- <div class='input-dialog'>
- <div class='input-dialog-top' @click='show'>
- <img src='@/assets/imgs/select.png' />
- 筛选
- </div>
- <div class='input-dialog-form' v-if='dialogFormVisible'>
- <p class='input-dialog-p'>安装位置</p>
- <p class='input-dialog-p2'>
- <el-input
- clearable
- placeholder='搜索安装位置'
- style='width:200px;'
- size='mini'
- prefix-icon='el-icon-search'
- v-model='form.wbsxjlInput5'
- ></el-input>
- </p>
- <p class='input-dialog-p'>生产厂商</p>
- <p class='input-dialog-p2'>
- <el-input
- clearable
- placeholder='搜索生产厂商'
- style='width:200px;'
- size='mini'
- prefix-icon='el-icon-search'
- v-model='form.rwbhInput5'
- ></el-input>
- </p>
- <p class='input-dialog-p'>服务商</p>
- <p class='input-dialog-p2'>
- <el-input
- clearable
- placeholder='搜索服务商'
- style='width:200px;'
- size='mini'
- prefix-icon='el-icon-search'
- v-model='form.ycgdbhInput5'
- ></el-input>
- </p>
- <p class='input-dialog-foot'>
- <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
- <el-button type='primary' @click='confirm' size='mini'>确 定</el-button>
- </p>
- </div>
- </div>
- </div>
- <el-table
- :border='true'
- v-loading='loadingDetail'
- :data='detailData'
- style='width:100%;margin-top:12px'
- :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
- >
- <el-table-column type='index' label='序号' width='50' :index='indexMethod'></el-table-column>
- <el-table-column prop='sbjc' label='设备名称' min-width='150' :show-overflow-tooltip='true' resizable>
- <template slot-scope='{row}'>{{row.sbjc||'--'}}</template>
- </el-table-column>
- <el-table-column prop='assetnum' label='设备编号' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.assetnum||'--'}}</template>
- </el-table-column>
- <el-table-column prop='sl' label='数量' width='70' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.sl||'--'}}</template>
- </el-table-column>
- <el-table-column prop='sbglgs' label='管理归属' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.sbglgs||'--'}}</template>
- </el-table-column>
- <el-table-column prop='sbstatus' label='设备状态' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.sbstatus||'--'}}</template>
- </el-table-column>
- <el-table-column prop='brand' label='品牌' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.brand||'--'}}</template>
- </el-table-column>
- <el-table-column prop='sbxh' label='型号' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
- </el-table-column>
- <el-table-column prop='floor' label='楼层' width='70' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.floor||'--'}}</template>
- </el-table-column>
- <el-table-column prop='wzqy' label='安装位置' min-width='150' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.wzqy||'--'}}</template>
- </el-table-column>
- <el-table-column prop='manufacturer' label='生产厂商' min-width='150' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.manufacturer||'--'}}</template>
- </el-table-column>
- <el-table-column prop='fws' label='服务商' min-width='150' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.fws||'--'}}</template>
- </el-table-column>
- </el-table>
- <div class='foot'>
- <el-pagination
- background
- layout='prev, pager, next'
- :total='totalDetail'
- :page-size='sizeDetail'
- @prev-click='pageChanged'
- @next-click='pageChanged'
- @current-change='pageChanged'
- ></el-pagination>
- </div>
- </div>
- </template>
- <script>
- import { Select } from 'meri-design'
- // import Select from '@/components/Select/Select.vue'
- import { querySelect } from '@/api/public.js'
- import { mapGetters } from 'vuex'
- import { queryHxsbDetail } from '@/api/room.js'
- export default {
- props: ['row'],
- data() {
- return {
- dialogFormVisible: false,
- sb_status: [],
- sbglgs: [],
- input: '',
- floorStr: '',
- sbglgsStr: '',
- statusStr: '',
- loadingDetail: true,
- totalDetail: 0,
- pageDetail: 1,
- sizeDetail: 10,
- detailData: [],
- keyword: '',
- form: {
- wbsxjlInput5: '',
- rwbhInput5: '',
- ycgdbhInput5: '',
- ssmsInput5: ''
- },
- mcbhChange: '',
- ssppbh: ''
- }
- },
- components: {
- Select
- },
- computed: {
- ...mapGetters(['floorSelect', 'plazaId'])
- },
- mounted() {
- if (this.row) {
- this.queryDetail()
- this.query()
- }
- },
- watch: {
- row: {
- deep: true,
- handler: function(newV, oldV) {
- if (newV != oldV) {
- this.queryDetail()
- this.query()
- }
- }
- }
- },
- methods: {
- indexMethod(index) {
- return (this.page - 1) * this.size + index + 1
- },
- show() {
- this.dialogFormVisible = !this.dialogFormVisible
- },
- // 改变楼层
- changeFloorStr() {
- this.queryDetail()
- },
- // 改变管理归属
- changeSbglgsStr() {
- this.queryDetail()
- },
- // 改变设备状态
- changeSb_status() {
- this.queryDetail()
- },
- // 点击分页
- pageChanged(page) {
- this.pageDetail = page
- this.queryDetail()
- },
- // 设备详情
- queryDetail() {
- this.detailData = []
- let postParams = {
- manufacturer: this.row.manufacturer || '--',
- sbxh: this.row.sbxh || '--',
- brand: this.row.brand || '--',
- location: '1572',
- classstructureid: this.row.classstructureid,
- type_code: this.row.type_code
- }
- // if (this.floorChange) {
- // postParams.gname = this.floorChange
- // }
- // if (this.row.floorcode) {
- // postParams.floorcode = this.row.floorcode
- // }
- let data = {
- plazaId: this.plazaId,
- page: this.pageDetail,
- size: this.sizeDetail
- }
- if (this.floorStr) {
- postParams.floor = this.floorStr
- }
- if (this.sbglgsStr) {
- postParams.sbglgs = this.sbglgsStr
- }
- if (this.statusStr) {
- postParams.sb_status = this.statusStr
- }
- if (this.form.wbsxjlInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.form.wbsxjlInput5}:wzqy`
- } else {
- data.keyword = `${this.form.wbsxjlInput5}:wzqy`
- }
- }
- if (this.form.rwbhInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.form.rwbhInput5}:manufacturer`
- } else {
- data.keyword = `${this.form.rwbhInput5}:manufacturer`
- }
- }
- if (this.form.ycgdbhInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.form.ycgdbhInput5}:fws`
- } else {
- data.keyword = `${this.form.ycgdbhInput5}:fws`
- }
- }
- if (this.form.ssmsInput5) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.form.ssmsInput5}:sbbh`
- } else {
- data.keyword = `${this.form.ssmsInput5}:sbbh`
- }
- }
- if (this.mcbhChange) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.mcbhChange}:sbjc,sbbh`
- } else {
- data.keyword = `${this.mcbhChange}:sbjc,sbbh`
- }
- }
- if (this.ssppbh) {
- if (data.keyword) {
- data.keyword = `${data.keyword + ';' + this.ssppbh}:brand,sbxh`
- } else {
- data.keyword = `${this.ssppbh}:brand,sbxh`
- }
- }
- queryHxsbDetail({ data, postParams }).then(res => {
- //console.log('钻取表', res)
- this.loadingDetail = false
- this.detailData = res.data.data ? res.data.data : []
- this.totalDetail = res.data.count
- })
- },
- // 下拉框数据
- query() {
- let postParams = [
- {
- columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
- params: {
- type_code: this.type_code
- },
- tableName: 'sms_asset'
- }
- ]
- let data = {
- plazaId: this.plazaId
- }
- querySelect({ data, postParams }).then(res => {
- //console.log('管理归属', res)
- if (res.data.data) {
- let sb_status = [],
- sbglgs = []
- sb_status = res.data.data.sms_asset.sb_status ? res.data.data.sms_asset.sb_status : []
- sbglgs = res.data.data.sms_asset.sbglgs ? res.data.data.sms_asset.sbglgs : []
- if (sb_status.length > 0) {
- sb_status.forEach(el => {
- let obj = {
- id: el.key,
- name: el.value
- }
- this.sb_status.push(obj)
- })
- }
- if (sbglgs.length > 0) {
- sbglgs.forEach(el => {
- let obj = {
- id: el.key,
- name: el.value
- }
- this.sbglgs.push(obj)
- })
- }
- }
- })
- },
- confirm() {
- this.queryDetail()
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .gdqd-dialog {
- .gdqd-dialog-top {
- display: flex;
- }
- .foot {
- height: 32px;
- display: flex;
- justify-content: flex-end;
- margin-top: 28px;
- }
- .dialog-none {
- width: 100px;
- position: absolute;
- right: 0;
- .input-dialog {
- .input-dialog-top {
- color: #c3c7cb;
- cursor: pointer;
- position: absolute;
- top: -30px;
- right: 30px;
- }
- .input-dialog-form {
- padding: 20px 24px;
- background: rgba(255, 255, 255, 1);
- border-radius: 4px;
- border: 1px solid rgba(195, 199, 203, 1);
- z-index: 9999;
- position: absolute;
- top: 0px;
- right: 30px;
- }
- .input-dialog-p {
- margin-bottom: 8px;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(100, 108, 115, 1);
- line-height: 22px;
- }
- .input-dialog-p2 {
- margin-bottom: 16px;
- }
- }
- .input-dialog-foot {
- display: flex;
- justify-content: flex-end;
- }
- }
- }
- </style>
- <style lang="less">
- .gdqd-dialog {
- padding: 16px 24px 24px;
- .el-table td,
- .el-table th {
- padding: 8px 0;
- }
- }
- </style>
|