<template>
|
<div class="chargeListCss">
|
<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" size="mini" @click="getKeyList()">搜索</el-button>
|
</el-col>
|
</el-row>
|
<el-table
|
highlight-current-row
|
v-loading="dataLoading"
|
:data="dataList"
|
@row-click="openInfo"
|
ref="chargeList"
|
:height="documentClientHeight - 330"
|
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="c2ChargingName"
|
align="left">
|
</el-table-column>
|
<el-table-column
|
prop="c2ChargingAddTime"
|
align="left">
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
key: '',
|
row: 1,
|
tableHeight: window.innerHeight - 180,
|
dataList: [],
|
dataLoading: false,
|
pageIndex: 1,
|
pageSize: 20,
|
totalPage: 0
|
}
|
},
|
mounted () {
|
// 绑定滚动监听事件
|
const selectWrap = this.$refs.chargeList.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.chargeList.setCurrentRow(this.dataList[0])
|
})
|
}
|
},
|
activated () {
|
this.getDataList()
|
},
|
methods: {
|
getDataList () {
|
this.dataLoading = true
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/list'),
|
method: 'get',
|
params: this.$http.adornParams({
|
page: this.pageIndex,
|
limit: this.pageSize
|
})
|
}).then(({ data }) => {
|
data.page.list.forEach(item => {
|
this.dataList.push(item)
|
})
|
if (
|
this.$store.state.charge.streetlightIdOfChargeControl == null ||
|
this.$store.state.charge.streetlightIdOfChargeControl === 0
|
) {
|
this.$store.commit(
|
'updateStreetlightIdOfChargeControl',
|
this.dataList[0] ? this.dataList[0].streetlightId : 0
|
)
|
}
|
this.pageIndex++
|
this.totalPage = data.page.total
|
this.dataLoading = false
|
})
|
},
|
openInfo (row, event, column) {
|
this.$store.commit('updateStreetlightIdOfChargeControl', row.streetlightId)
|
this.$notify({
|
message: '选择充电桩：' + row.c2ChargingName + '(' + 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>
|
