<template>
|
<div id="chargeListCss" class="chargeListCss" style="margin-bottom:20px">
|
<el-row>
|
<el-col :span="24">
|
<div style="height:50px">
|
<h2 style="margin-left:25px">灯杆列表</h2>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="1">
|
|
</el-col>
|
<el-col :span="13">
|
<el-input @keyup.enter.native="getKeyList()" @change="getKeyList()" v-model="key" placeholder="输入灯杆名称"></el-input>
|
</el-col>
|
<el-col :span="1">
|
|
</el-col>
|
<el-col :span="6">
|
<el-button class="searchBtn" @click="getKeyList()">搜索</el-button>
|
</el-col>
|
</el-row>
|
<el-table
|
highlight-current-row
|
v-loading="dataLoading"
|
:data="dataList"
|
@row-click="openInfo"
|
ref="weatherList"
|
:height="documentClientHeight - 340"
|
element-loading-text="加载列表中"
|
element-loading-color='black'
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0)"
|
style="width: 100%;background-color:rgba(0,0,0,0)"
|
>
|
<el-table-column
|
prop="streetlightName"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="addTime"
|
align="center"
|
width="200">
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
key: '',
|
row: 1,
|
tableHeight: window.innerHeight - 200,
|
dataList: [],
|
dataLoading: false,
|
pageIndex: 1,
|
pageSize: 20,
|
totalPage: 0
|
}
|
},
|
mounted () {
|
// 绑定滚动监听事件
|
const selectWrap = this.$refs.weatherList.bodyWrapper
|
selectWrap.addEventListener(
|
'scroll',
|
() => {
|
let sign = 100
|
const scrollDistance =
|
selectWrap.scrollHeight -
|
selectWrap.scrollTop -
|
selectWrap.clientHeight
|
if (scrollDistance <= sign && !this.dataListLoading) {
|
this.getDataList()
|
}
|
},
|
true
|
)
|
},
|
computed: {
|
documentClientHeight: {
|
get () { return this.$store.state.common.documentClientHeight }
|
}
|
},
|
watch: {
|
dataList: function () {
|
this.$nextTick(() => {
|
this.$refs.weatherList.setCurrentRow(this.dataList[0])
|
})
|
}
|
},
|
activated () {
|
this.getDataList()
|
},
|
methods: {
|
getDataList () {
|
// 判断是否超出范围
|
if (this.totalPage !== 0 && this.totalPage <= ((this.pageIndex - 1) * this.pageSize)) {
|
return
|
}
|
this.dataListLoading = true
|
this.$http({
|
url: this.$http.adornUrl('/pole/polestreetlight/list'),
|
method: 'get',
|
params: this.$http.adornParams({
|
'page': this.pageIndex,
|
'limit': this.pageSize
|
})
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
data.page.list.forEach(item => {
|
this.dataList.push(item)
|
})
|
if (this.$store.state.streetlight.streetlightId == null || this.$store.state.streetlight.streetlightId === 0) {
|
this.$store.commit('updateStreetlightIdOfWeather', this.dataList[0] ? this.dataList[0].streetlightId : 0)
|
}
|
this.totalPage = data.page.totalCount
|
this.pageIndex ++
|
} else {
|
this.totalPage = 0
|
}
|
this.dataListLoading = false
|
})
|
},
|
openInfo (row, event, column) {
|
this.$store.commit('updateStreetlightIdOfWeather', row.streetlightId)
|
this.$notify({
|
message: '选择灯杆：' + row.streetlightName + '(' + row.streetlightId + ')',
|
type: 'success'
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.el-table >>> thead {
|
color: white;
|
}
|
.el-table >>> th {
|
color: white;
|
background: rgba(0, 0, 0, 0);
|
}
|
.el-table >>> tr {
|
color: white;
|
background: rgba(0, 0, 0, 0);
|
}
|
.el-table >>> td,
|
.el-table >>> th.is-leaf {
|
border: 0px;
|
}
|
</style>
|
<style scoped>
|
.searchBtn {
|
color:white;
|
border:1px solid white;
|
border-radius:15px;
|
margin-left:5px;
|
background-color: #3FA9FC
|
}
|
.searchBtn:hover {
|
color: white;
|
border: 1px solid white;
|
background-color: #3FA9FC
|
}
|
.searchBtn:focus {
|
color: white;
|
border: 1px solid white;
|
background-color: #3FA9FC
|
}
|
</style>
|
<style>
|
[placeholder~="输入灯杆名称"] {
|
border: 1px solid white;
|
color: white;
|
background-color: rgba(0, 0, 0, 0);
|
border-radius: 25px;
|
}
|
[placeholder~="输入灯杆名称"]:focus {
|
border: 1px solid white;
|
color: white;
|
background-color: rgba(0, 0, 0, 0);
|
border-radius: 25px;
|
}
|
</style>
|
