<template>
|
<div>
|
<el-card style="padding:0px;margin-top:0px;width:100%;height:100px;background-color:rgba(0,0,0,0);">
|
<img src="http://47.106.172.9:443/download/weixin.png" height="70px" style="float:left">
|
<div style="height:60px">
|
<p style="margin-top:0px;font-size:16px">充电桩名称：</p>
|
<span v-if="!changeNameVisable"> {{chargeInfo.c2ChargingName}}（{{chargeInfo.streetlightId}}）</span>
|
<el-tag v-if="chargeInfo.buttonFlag === 1 && !changeNameVisable" type="danger">故障</el-tag>
|
<el-tag v-if="chargeInfo.buttonFlag === 0 && !changeNameVisable" type="success">正常</el-tag>
|
<el-input style="width:40%;background-color:rgba(0,0,0,0)" @keyup.enter.native="changeC2ChargingName" v-if="changeNameVisable" v-model="chargeInfo.c2ChargingName"></el-input>
|
<el-button @click="changeNameVisable = !changeNameVisable" v-if="!changeNameVisable" style="float:right;background-color:rgba(0,0,0,0)" size="mini">修改</el-button>
|
<el-button @click="changeNameVisable = !changeNameVisable" v-if="changeNameVisable" style="float:right;background-color:rgba(0,0,0,0)" size="mini" >取消</el-button>
|
<el-button @click="changeC2ChargingName" v-if="changeNameVisable" style="float:right;background-color:rgba(0,0,0,0)" size="mini" >确定</el-button>
|
</div>
|
</el-card>
|
<el-card style="padding:0px;margin-top:10px;width:100%;background-color:rgba(0,0,0,0);">
|
<el-row style="margin-top:50px">
|
<el-col :span="12">
|
<div style="text-align:center">
|
<el-button v-if="chargeSelectVisable" style="width:200px;height:200px;background-color:#67C23A;color:white" icon="el-icon-check" @click="chargeSelectVisable = !chargeSelectVisable,startChargeVisable=true,stopChargeTypeVisable = true" circle>开始充电</el-button>
|
<!-- USB/电动车选择 -->
|
<el-row v-if="startChargeVisable">
|
<el-col :span="12">
|
<el-button style="width:200px;height:200px;background-color:#67C23A;color:white" icon="el-icon-check" @click="chargeTimeVisable = !chargeTimeVisable,startChargeVisable = !startChargeVisable,chargeType=0,stopChargeTypeVisable=true" circle>USB充电</el-button>
|
</el-col>
|
<el-col :span="12">
|
<el-button style="width:200px;height:200px;background-color:#67C23A;color:white" icon="el-icon-check" @click="chargeTimeVisable = !chargeTimeVisable,startChargeVisable = !startChargeVisable,chargeType=1,stopChargeTypeVisable=true" circle>电动车充电</el-button>
|
</el-col>
|
</el-row>
|
<div v-if="chargeTimeVisable">
|
<el-card style="width:100%;height:200px;background-color:rgba(0,0,0,0);">
|
<el-form style="margin-top:5%">
|
<el-form-item label="充电时间">
|
<el-input-number style="width:20%" v-model="hour" controls-position="right" :min="0" :max="18"></el-input-number>时
|
<el-input-number style="width:20%" v-model="minitue" controls-position="right" :step="30" :min="0" :max="30"></el-input-number>分
|
</el-form-item>
|
<el-form-item>
|
<el-button type="success" @click="startCharging()">开始充电</el-button>
|
<el-button @click="chargeTimeVisable = false,chargeSelectVisable = true">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div v-if="stopChargeTypeVisable" style="text-align:center">
|
<el-button @click="stopChargeTypeVisable = !stopChargeTypeVisable" style="width:200px;height:200px;background-color:#F56C6C;color:white" icon="el-icon-close" circle>结束充电</el-button>
|
</div>
|
<el-row v-if="!stopChargeTypeVisable">
|
<el-col :span="12">
|
<el-button @click="stopCharging(0)" style="width:200px;height:200px;background-color:#F56C6C;color:white" icon="el-icon-close" circle>USB结束充电</el-button>
|
</el-col>
|
<el-col :span="12">
|
<el-button @click="stopCharging(1)" style="width:200px;height:200px;background-color:#F56C6C;color:white" icon="el-icon-close" circle>电动车结束充电</el-button>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-row :gutter="40" style="margin-top:80px">
|
<el-col :span="12">
|
<el-card style="padding:0px;margin-top:20px;width:100%;height:120px;background-color:rgba(0,0,0,0);">
|
<img src="http://47.106.172.9:443/download/weixin.png" height="80px" style="float:left">
|
<div style="height:80px">
|
<p style="margin-top:0px;font-size:20px">费率：</p>
|
<span v-if="chargeInfo.usbcharge!=0"> {{chargeInfo.usbcharge/10}} 元</span>
|
<span v-if="chargeInfo.usbcharge==0"> 免费 </span>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card style="padding:0px;margin-top:20px;width:100%;height:120px;background-color:rgba(0,0,0,0);">
|
<img src="http://47.106.172.9:443/download/weixin.png" height="80px" style="float:left">
|
<div style="height:80px">
|
<p style="margin-top:0px;font-size:20px">USB口状态：</p>
|
|
<el-tag v-if="chargeInfo.usbStatus === 1" type="success">充电中</el-tag>
|
<el-tag v-else type="info">空闲</el-tag>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="40" style="margin-top:10px">
|
<el-col :span="12">
|
<el-card style="padding:0px;margin-top:20px;width:100%;height:120px;background-color:rgba(0,0,0,0);">
|
<img src="http://47.106.172.9:443/download/weixin.png" height="80px" style="float:left">
|
<div style="height:80px">
|
<p style="margin-top:0px;font-size:20px">费率：</p>
|
<span> {{chargeInfo.elecharge/10}} 元</span>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card style="padding:0px;margin-top:20px;width:100%;height:120px;background-color:rgba(0,0,0,0);">
|
<img src="http://47.106.172.9:443/download/weixin.png" height="80px" style="float:left">
|
<div style="height:80px">
|
<p style="margin-top:0px;font-size:20px">电动车口状态：</p>
|
|
<el-tag v-if="chargeInfo.eleStatus === 1" type="success">充电中</el-tag>
|
<el-tag v-else type="info">空闲</el-tag>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</el-card>
|
<el-row>
|
<el-card style="padding:0px;background-color:rgba(0,0,0,0)">
|
<el-button style="margin:0px;width:100%;border:0px;height:100%;background-color:rgba(0,0,0,0)"
|
@click="changeChargeVisable = !changeChargeVisable">费率修改</el-button>
|
<el-button style="margin:0px;width:100%;border:0px;height:100%;background-color:rgba(0,0,0,0)"
|
@click="getOrderList()">订单列表</el-button>
|
</el-card>
|
</el-row>
|
<el-dialog
|
title="费率修改"
|
:visible.sync="changeChargeVisable"
|
width="30%"
|
style="background-color:rgba(0,0,0,0);color:black">
|
<h3 style="margin-top:0px">费率调整为0为免费，费率范围为0 ~ 25.5元</h3>
|
<el-form inline style="margin-bottom:0px;">
|
<el-form-item label="USB口费率">
|
<el-input style="width:70%" v-model="usbcharge"></el-input>元
|
</el-form-item>
|
<el-form-item label="电动车口费率">
|
<el-input style="width:70%" v-model="elecharge"></el-input>元
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="changeCharge()">确定</el-button>
|
<el-button @click="changeChargeVisable=false">取消</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog
|
title="订单列表"
|
:visible.sync="orderListVisable"
|
width="100%"
|
style="background-color:rgba(0,0,0,0);color:black">
|
<el-input v-model="orderId"></el-input>
|
<el-table
|
:data="orderList"
|
style="width: 100%">
|
<el-table-column
|
align="center"
|
prop="outTradeNo"
|
label="订单编号">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="streetlightId"
|
label="所属灯杆ID">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="totalMoney"
|
label="订单总金额">
|
<template slot-scope="scope">
|
<span v-if="scope.row.totalMoney === 0">免费</span>
|
<span v-if="scope.row.totalMoney !== 0">{{scope.row.totalMoney}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="订单退款金额">
|
<template slot-scope="scope">
|
<span v-if="scope.row.orderStatus === 'REFUND'">{{scope.row.refundMoney}}</span>
|
<span v-else>--</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="chargeType"
|
label="充电口类型">
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.chargeType ===0" size="small" >USB</el-tag>
|
<el-tag v-else-if="scope.row.chargeType ===1" size="small">电动车</el-tag>
|
<el-tag v-else-if="scope.row.chargeType ===2" size="small">电动汽车</el-tag>
|
<el-tag v-else size="small" type="danger" >未知异常，请联系管理员</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="orderType"
|
label="支付方式">
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.orderType ===1" size="small" >支付宝</el-tag>
|
<el-tag v-else-if="scope.row.orderType ===0" size="small" type="success">微信</el-tag>
|
<el-tag v-else size="small" type="danger" >未知异常，请联系管理员</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="orderCreateTime"
|
align="center"
|
label="订单创建时间">
|
</el-table-column>
|
<el-table-column
|
prop="orderStatus"
|
label="订单状态">
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.orderStatus === 'SUCCESS'" size="small" type="success" >已支付</el-tag>
|
<el-tag v-else-if="scope.row.orderStatus === 'FAIL'" size="small" type="info">未支付</el-tag>
|
<el-tag v-else-if="scope.row.orderStatus === 'REFUND'" size="small" type="warning">已退款</el-tag>
|
<el-tag v-else-if="scope.row.orderStatus === 'RFERROR'" size="small" type="error">退款失败</el-tag>
|
<el-tag v-else size="small" type="danger" >未知异常，请联系管理员</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="orderPayTime"
|
label="订单支付时间">
|
<template slot-scope="scope">
|
<span v-if="scope.row.orderStatus === 'SUCCESS'">{{scope.row.orderPayTime}}</span>
|
<span v-else-if="scope.row.orderStatus === 'REFUND'">{{scope.row.orderPayTime}}</span>
|
<span v-else>--:--:-- --:--:--</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="orderRefundTime"
|
label="订单退款时间">
|
<template slot-scope="scope">
|
<span v-if="scope.row.orderStatus === 'REFUND'">{{scope.row.orderRefundTime}}</span>
|
<span v-else>--:--:-- --:--:--</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="操作面板">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="orderPanleHandle(scope.row.streetlightId,scope.row.outTradeNo,scope.row.orderStatus,scope.row.orderType,scope.row.totalMoney)">操作面板</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="sizeChangeHandle"
|
@current-change="currentChangeHandle"
|
:current-page="pageIndex"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
:total="totalPage"
|
layout="total, sizes, prev, pager, next, jumper">
|
</el-pagination>
|
</el-dialog>
|
|
<!-- <p>灯杆id：{{chargeInfo.streetlightId}}</p>
|
<p>充电桩名称：{{chargeInfo.c2ChargingName}}</p>
|
<p>充电桩Mac地址：{{chargeInfo.c2ChargingMac}}</p>
|
<p>充电桩USB口费率：{{chargeInfo.usbcharge/10}}</p>
|
<p>充电桩电动车口费率：{{chargeInfo.elecharge/10}}</p>
|
<p>充电桩电动汽车口费率：{{chargeInfo.carcharge/10}}</p>
|
<p>充电桩新增时间：{{chargeInfo.c2ChargingAddTime}}</p> -->
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
pageIndex: 1,
|
pageSize: 10,
|
totalPage: 0,
|
drawer: false,
|
panelHeight: '500px',
|
isMoblie: true,
|
streetlightId: 0,
|
usbcharge: 0,
|
elecharge: 0,
|
chargeInfo: '',
|
newName: '',
|
orderList: [],
|
chargeSelectVisable: true, // 充电类型选择按钮
|
startChargeVisable: false, // 充电时间界面
|
changeUSBVisable: false,
|
changeEleVisable: false,
|
chargeTimeVisable: false,
|
changeNameVisable: false, // 修改名称界面
|
changeChargeVisable: false, // 修改电价弹窗
|
orderListVisable: false, // 订单列表界面
|
hour: 0, // 开始充电设置小时
|
minitue: 0, // 开始充电设置30*x分钟
|
chargeType: -1, // 充电类型
|
stopChargeTypeVisable: true,
|
orderId: '' // 订单界面搜索绑定ID
|
}
|
},
|
computed: {
|
streetlightStateId () {
|
return this.$store.state.charge.streetlightIdOfChargeControl
|
}
|
},
|
watch: {
|
streetlightStateId (curVal, oldVal) {
|
this.streetlightId = curVal
|
this.getChargeInfo(curVal)
|
}
|
},
|
activated () {
|
},
|
methods: {
|
getOrderList () {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/orderlist'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: this.chargeInfo.streetlightId,
|
page: this.pageIndex,
|
limit: this.pageSize
|
})
|
}).then(({ data }) => {
|
this.orderList = data.page.list
|
this.totalPage = data.page.total
|
this.pageIndex = data.page.pageNum
|
this.orderListVisable = true
|
})
|
},
|
// 每页数
|
sizeChangeHandle (val) {
|
this.pageSize = val
|
this.pageIndex = 1
|
this.getOrderList()
|
},
|
// 当前页
|
currentChangeHandle (val) {
|
this.pageIndex = val
|
this.getOrderList()
|
},
|
// 获取充电桩信息
|
getChargeInfo (streetlightId) {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/chargeInfo'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: streetlightId
|
})
|
}).then(({ data }) => {
|
this.chargeInfo = data.info
|
this.usbcharge = data.info.usbcharge / 10
|
this.elecharge = data.info.elecharge / 10
|
if (this.chargeInfo.c2ChargingName !== undefined) {
|
this.$message({
|
message: '选择充电桩' + this.chargeInfo.c2ChargingName,
|
type: 'success'
|
})
|
}
|
})
|
},
|
changeC2ChargingName () {
|
var streetlightId = this.chargeInfo.streetlightId
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/changeChargingName'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: streetlightId,
|
c2ChargingName: this.chargeInfo.c2ChargingName
|
})
|
}).then(({ data }) => {
|
this.changeNameVisable = false
|
window.location.reload()
|
this.$message({
|
message: '修改成功',
|
type: 'success'
|
})
|
this.$store.commit('updateStreetlightIdOfChargeControl', streetlightId)
|
})
|
},
|
startCharging () {
|
if (Number(this.hour) + Number(this.minitue) === 0) {
|
this.$message({
|
message: '未设置时间，请选择充电时间!',
|
type: 'warning'
|
})
|
return -1
|
}
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/startCharging'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: this.streetlightId,
|
addressCode: this.chargeInfo.c2ChargingMac,
|
totalTime: this.hour * 2 + this.minitue / 30,
|
type: this.chargeType
|
})
|
}).then(({ data }) => {
|
this.$message({
|
message: data.msg,
|
type: 'success'
|
})
|
this.chargeTimeVisable = false
|
this.chargeSelectVisable = true
|
})
|
},
|
stopCharging (val) {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/stopCharging'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: this.streetlightId,
|
addressCode: this.chargeInfo.c2ChargingMac,
|
type: val
|
})
|
}).then(({ data }) => {
|
this.$message({
|
message: data.msg,
|
type: 'success'
|
})
|
this.stopChargeTypeVisable = !this.stopChargeTypeVisable
|
})
|
},
|
// 修改电价
|
changeCharge () {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/changeCharge'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: this.chargeInfo.streetlightId,
|
addressCode: this.chargeInfo.c2ChargingMac,
|
usbCharge: this.usbcharge,
|
eleCharge: this.elecharge
|
})
|
}).then(({ data }) => {
|
if (data.code === '0') {
|
this.$message({
|
message: data.msg,
|
type: 'success'
|
})
|
} else {
|
this.$message.error(data.msg)
|
}
|
this.changeChargeVisable = false
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.el-dialog__header {
|
background-color: black;
|
}
|
</style>
|
<style>
|
.el-radio-button__inner {
|
color: black;
|
background-color: rgba(0, 0, 0, 0);
|
border-color: black;
|
}
|
.el-radio-button__inner:hover {
|
color: black;
|
}
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
background-color: grey;
|
border-color: black;
|
}
|
.el-input-number__decrease is-disabled:focus {
|
border-color: black;
|
}
|
.el-input-number__decrease:focus {
|
border-color: black;
|
}
|
.mybg {
|
height: 200px;
|
width: 200px;
|
background-image: url("http://47.106.172.9:443/download/yuan.jpg");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
text-align: center;
|
padding-top: 90px;
|
/* background-color: black */
|
}
|
</style>
|
