| | |
| | | <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> |
| | | </el-input> |
| | | </el-form> |
| | | <div> |
| | | <el-card class="box-card" v-for="(item,index) in searchDataDisplay" :key="index"> |
| | | <div v-if="total > 3"> |
| | | <el-card class="box-card" |
| | | v-for="(item,index) in searchDataDisplay.slice((currentPage-1)*PageSize,currentPage*PageSize)" |
| | | :key="index"> |
| | | <div v-if="totalCount > 0"> |
| | | {{ item.CompanyName }} |
| | | </div> |
| | | </el-card> |
| | | <div class="search-pagination"> |
| | | <el-pagination |
| | | small |
| | | layout="prev, pager, next" |
| | | :total=total |
| | | :current-page=1 |
| | | class="warnPagination" |
| | | > |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="currentPage" |
| | | :page-sizes="[1, 2, 3]" |
| | | :page-size="1" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total='totalCount'> |
| | | </el-pagination> |
| | | </div> |
| | | <!-- <el-scrollbar style="height:100%">--> |
| | | <!-- <el-card class="footer-page">--> |
| | | <!-- <ul>--> |
| | | <!-- {{ searchDataDisplay }}--> |
| | | <!-- <li v-for="(item,index) in searchDataDisplay" :key="index">--> |
| | | <!-- {{ item.CompanyName }}--> |
| | | <!-- </li>--> |
| | | <!-- </ul>--> |
| | | <!-- </el-card>--> |
| | | <!-- <el-pagination--> |
| | | <!-- small--> |
| | | <!-- @current-change="handlePage"--> |
| | | <!-- :page-size=pageSize--> |
| | | <!-- layout="prev, pager, next"--> |
| | | <!-- :total=total--> |
| | | <!-- :current-page=current--> |
| | | <!-- class="warnPagination"--> |
| | | <!-- >--> |
| | | <!-- </el-pagination>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-scrollbar>--> |
| | | </div> |
| | | <!-- <el-scrollbar style="height:100%">--> |
| | | <!-- </el-scrollbar>--> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | }], |
| | | radio: '1', |
| | | form: { |
| | | keyword: '固废面板数据查询' |
| | | keyword: '固废面板数据查询', |
| | | // 数据的传递 |
| | | transferData: '' |
| | | }, |
| | | searchDataDisplay: [], |
| | | total: 0 |
| | | // 默认显示第几页 |
| | | currentPage: 1, |
| | | // 总条数,根据接口获取数据长度(注意:这里不能为空) |
| | | totalCount: 1, |
| | | // 个数选择器(可修改) |
| | | pageSizes: [1, 2, 3, 4], |
| | | // 默认每页显示的条数(可修改) |
| | | PageSize: 1 |
| | | } |
| | | }, |
| | | methods: { |
| | | // 每页显示的条数 |
| | | handleSizeChange (val) { |
| | | this.PageSize = val |
| | | this.currentPage = 1 |
| | | }, |
| | | // 显示第几页 |
| | | handleCurrentChange (val) { |
| | | this.currentPage = val |
| | | }, |
| | | handlePipelineType (val) { |
| | | this.solidWasteTypeOptions.forEach((itm) => { |
| | | if (val === itm.value) { |
| | | this.dataTypeOptions = itm.options |
| | | this.form.pipelineType = itm.label |
| | | this.form.labelList = itm.labelList |
| | | // console.log(val) |
| | | this.solidWasteTypeOptions.forEach(item => { |
| | | // console.log(item.value) |
| | | if (val === item.value) { |
| | | // console.log('数据选择相同') |
| | | // 接收数据 用于之后接口数据的调用 |
| | | // this.form.transferData = item.value |
| | | this.handleSearch(item.value) |
| | | } |
| | | }) |
| | | this.form.dataType = this.dataTypeOptions[0].label |
| | | this.form.key = this.dataTypeOptions[0].key |
| | | }, |
| | | // 点击搜索实现数据的搜索展示 |
| | | async handleSearch () { |
| | | async handleSearch (data) { |
| | | // console.log(this.form.keyword) |
| | | const result = await mapApi.getSolidWasteSurveyDetail() |
| | | console.log(result) |
| | | const result = await mapApi.getSolidWasteSurveyDetail(data) |
| | | // console.log(result) |
| | | this.searchDataDisplay = result.Result.DataInfo |
| | | this.total = result.Result.DataInfo.length |
| | | }, |
| | | handleLocation (val) { |
| | | // console.log(val) |
| | | const bound = this.L.geoJSON([val], {}).getBounds() |
| | | var layer = window.serviceLayerHelper.getByLayerId(val.id) |
| | | layer && layer.openPopup() |
| | | this.$store.state.map.map.flyToBounds(bound) |
| | | this.totalCount = result.Result.DataInfo.length |
| | | } |
| | | } |
| | | } |
| | |
| | | .box-card { |
| | | margin: 15px auto; |
| | | } |
| | | |
| | | .search-pagination { |
| | | padding: 0; |
| | | margin: 15px auto; |
| | | } |
| | | } |
| | | </style> |