new-web.git - Gitblit

<template>
 <div style="padding:20px" id="charge-panel-body" class="charge-panel-body-usb">
    <el-row>
      <el-col @mouseover.native="changeType(0)" :span="5">
          <div style="height:30px;margin-top:10px;text-align:center">
              <span style="font-size:20px"><b>USB充电桩</b></span>
          </div>
      </el-col>
      <el-col @mouseover.native="changeType(1)" :span="5">
          <div style="height:30px;margin-top:10px;text-align:center">
              <span style="font-size:20px"><b>电单车充电桩</b></span>                
          </div>
      </el-col>
      <el-col :span="15">
          &nbsp;
      </el-col>
    </el-row>
    <el-row>
        <el-col :span="6">
          <div v-if="typeFlag === 0 && chargeInfo.usbStatus === 0" style="height:200px" class="status-usb-free"></div>
          <div v-if="typeFlag === 0 && chargeInfo.usbStatus === 1" style="height:200px" class="status-usb-charge"></div>
          <div v-if="typeFlag === 0 && chargeInfo.usbStatus === 2" style="height:200px" class="status-usb-error"></div>
          <div v-if="typeFlag === 1 && chargeInfo.eleStatus === 0" style="height:200px" class="status-bike-free"></div>
          <div v-if="typeFlag === 1 && chargeInfo.eleStatus === 1" style="height:200px" class="status-bike-charge"></div>
          <div v-if="typeFlag === 1 && chargeInfo.eleStatus === 2" style="height:200px" class="status-bike-error"></div>
          <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="10">
                <el-button id="on" class="on-no" style="background-color:rgba(0,0,0,0);border:0px;width:100%;height:50px"></el-button>
            </el-col>
            <el-col :span="10">
              <el-tooltip placement="top">
                <div style="background-color:rgba(0,0,0,0)" slot="content">
                  <h2 style="color:black">是否切换到<span style="color:red">待机状态</span></h2>
                  <el-button :loading="stopLoading" @click="stopCharge()" class="Btn" style="width:160px">确定</el-button>
                </div>
                <el-button id="off" class="off-no" style="background-color:rgba(0,0,0,0);border:0px;width:100%;height:50px"></el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
          </el-row>
          <div id="switch" class="off"></div>
        </el-col>
        <el-col :span="6">
          <div style="margin-top:10px;float:left">
            <img width="30px" height="30px" style="float:left" src="~@/assets/img/charge/charge-icon.png">
            <span style="font-size:25px;display:block;margin-left:40px">充电桩信息</span>
            <br><br>
            <span style="font-size:20px">灯杆ID：</span>
            <span style="font-size:20px">{{chargeInfo.streetlightId}}</span>
            <br><br>
            <span style="font-size:20px">名称：</span>
            <span style="font-size:20px">{{chargeInfo.c2ChargingName}}</span>
            <br><br>
            <span style="font-size:20px">机器识别码：</span>
            <span style="font-size:20px">{{chargeInfo.c2ChargingMac}}</span>
            <br><br>
            <span style="font-size:20px">创建时间：</span>
            <span style="font-size:20px">{{chargeInfo.c2ChargingAddTime}}</span>
            <br><br>
            <span v-if="typeFlag === 0" style="font-size:18px">USB口费率：</span>
            <span v-if="typeFlag === 0" style="font-size:18px">{{chargeInfo.usbcharge / 10}}&nbsp;RMB/半小时</span>
            <span v-if="typeFlag === 1" style="font-size:18px">电单车口费率：</span>
            <span v-if="typeFlag === 1" style="font-size:18px">{{chargeInfo.elecharge / 10}}&nbsp;RMB/半小时</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="margin-top:10px;width:99%;float:left">
            <img width="37px" height="27px" style="float:left;margin-left:20%;padding-right:10px" src="~@/assets/img/charge/chargeCost-icon.png">
            <span style="font-size:22px;display:block">充电费率设置</span>
            <br><br>
            <el-row>
              <el-col id="06rmb" style="text-align:center" :span="12">
                <div>
                  <el-button style="background-color:rgba(0,0,0,0);font-size:18px;padding:0px;border:0px;color:white" @click="openChargePanel(0.6)">0.6RMB/半小时</el-button>
                </div>
              </el-col>
              <el-col id="08rmb" style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargePanel(0.8)" style="background-color:rgba(0,0,0,0);font-size:18px;padding:0px;border:0px;color:white">0.8RMB/半小时</el-button>
                </div>
              </el-col>
            </el-row>
            <br><br>
            <el-row>
              <el-col id="10rmb" style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargePanel(1.0)" style="background-color:rgba(0,0,0,0);font-size:18px;padding:0px;border:0px;color:white">1.0RMB/半小时</el-button>
                </div>
              </el-col>
              <el-col id="12rmb" style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargePanel(1.2)" style="background-color:rgba(0,0,0,0);font-size:18px;padding:0px;border:0px;color:white">1.2RMB/半小时</el-button>
                </div>
              </el-col>
            </el-row>
            <br><br>
            <el-row>
              <el-col id="15rmb" style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargePanel(1.5)" style="background-color:rgba(0,0,0,0);font-size:18px;padding:0px;border:0px;color:white">1.5RMB/半小时</el-button>
                </div>
              </el-col>
              <el-col id="18rmb" style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargePanel(1.8)" style="background-color:rgba(0,0,0,0);font-size:18px;padding:0px;border:0px;color:white">1.8RMB/半小时</el-button>
                </div>
              </el-col>
            </el-row>
            <br><br>
            <el-row>
              <el-col id="20rmb" style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargePanel(2.0)" style="background-color:rgba(0,0,0,0);font-size:18px;padding:0px;border:0px;color:white">2.0RMB/半小时</el-button>
                </div>
              </el-col>
              <el-col style="text-align:center" :span="12">
                  <img width="22px" height="22px" src="~@/assets/img/charge/selfDete.png">
                <el-button @click="openChargePanel('')" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">自定义</el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="5">
          <div style="margin-top:10px;">
            <img width="37px" height="27px" style="float:left;margin-left:3%;padding-right:10px" src="~@/assets/img/charge/charging-icon.png">
            <span style="font-size:22px;display:block">充电时间设置</span>
            <br><br>
            <el-row>
              <el-col style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargeTimePanel(1)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">30分钟</el-button>
                </div>
              </el-col>
              <el-col style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargeTimePanel(2)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">60分钟</el-button>
                </div>
              </el-col>
            </el-row>
            <br><br>
            <el-row>
              <el-col style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargeTimePanel(3)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">90分钟</el-button>
                </div>
              </el-col>
              <el-col style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargeTimePanel(4)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">120分钟</el-button>
                </div>
              </el-col>
            </el-row>
            <br><br>
            <el-row>
              <el-col style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargeTimePanel(5)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">150分钟</el-button>
                </div>
              </el-col>
              <el-col style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargeTimePanel(6)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">180分钟</el-button>
                </div>
              </el-col>
            </el-row>
            <br><br>
            <el-row>
              <el-col style="text-align:center" :span="12">
                <div>
                  <el-button @click="openChargeTimePanel(7)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">210分钟</el-button>
                </div>
              </el-col>
              <el-col style="text-align:center" :span="12">
                <div>
                  <img width="22px" height="22px" src="~@/assets/img/charge/selfDete.png">
                  <el-button @click="openChargeTimePanel(0)" style="background-color:rgba(0,0,0,0);font-size:20px;padding:0px;border:0px;color:white">自定义</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
    </el-row>
    <transition name="el-zoom-in-center">
      <div class="popup-bg" id='popup-bg' v-if="dialogVisible">
        <div class="popup">
          <div>
            <el-row>
              <el-col :span="6" style="margin-top:10px;margin-left:30px">
                <div style="height:50px;">
                  <span style="font-size:20px">自定义</span>
                </div>
              </el-col>
              <el-col :span="18">
                &nbsp;
              </el-col>
            </el-row>
          </div>
          <div style="">
            <el-row>
              <el-col :span="24">
                <div style="height:50px">
                  <el-input v-model="viewCharge" style="margin-left:10%;width:60%" placeholder="输入自定义的充电费率"></el-input>
                  <span style="margin-left:10px;">RMB/半小时</span>
                </div>
              </el-col>
            </el-row>
 
            <el-row style="margin-top:10px">
              <el-col :span="3">
                <div style="height:50px;">
                </div>
              </el-col>
              <el-col :span="8">
                <div style="height:50px;">
                  <el-button class="popup-cancel" @click="dialogVisible = false">&nbsp;</el-button>
                </div>
              </el-col>
              <el-col :span="1">
                &nbsp;
              </el-col>
              <el-col :span="8">
                <div style="height:50px;">
                  <el-button class="popup-define" @click="changeCharge()">&nbsp;</el-button>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="height:50px;">
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </transition>
 
    <!-- 开始充电弹窗 -->
    <transition name="el-zoom-in-center">
      <div class="popup-bg" id='popup-bg' v-if="chargeVisible">
        <div class="popup">
          <div>
            <el-row>
              <el-col :span="6" style="margin-top:10px;margin-left:30px">
                <div style="height:50px;">
                  <span style="font-size:20px">开始充电</span>
                </div>
              </el-col>
              <el-col :span="18">
                &nbsp;
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="24">
              <div style="height:50px;text-align:center">
                <span style="font-size:20px">开始充电：{{viewChargingTime*30}}分钟</span><br>
                <span style="font-size:20px">(点击确认后请在充电桩屏幕点击开始充电)</span>
                <el-slider
                  v-model="viewChargingTime"
                  style="width:80%;margin-left:10%;"
                  :step="1"
                  :max="36"
                  :show-tooltip="false">
                </el-slider>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin-top:30px">
              <el-col :span="3">
                <div style="height:50px;">
                </div>
              </el-col>
              <el-col :span="8">
                <div style="height:50px;">
                  <el-button class="popup-cancel" @click="chargeVisible = false">&nbsp;</el-button>
                </div>
              </el-col>
              <el-col :span="1">
                &nbsp;
              </el-col>
              <el-col :span="8">
                <div style="height:50px;">
                  <el-button class="popup-define" @click="startCharge()">&nbsp;</el-button>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="height:50px;">
                </div>
              </el-col>
            </el-row>
        </div>
      </div>
    </transition>
 </div>
</template>
 
<script>
export default {
  data () {
    return {
      typeFlag: 0,
      halfHeight: '200px',
      streetlightId: 0,
      chargeInfo: '',
      dialogVisible: false,
      chargeVisible: false,
      charge: 0,
      viewCharge: 0,
      viewChargingTime: 0,
      stopLoading: false
    }
  },
  activated () {
    this.init()
  },
  computed: {
    streetlightStateId () {
      return this.$store.state.charge.streetlightIdOfChargeControl
    }
  },
  watch: {
    streetlightStateId (curVal, oldVal) {
      this.streetlightId = curVal
      this.typeFlag = 0
      this.getChargeInfo(curVal)
    }
  },
  methods: {
    init () {
      var h = document.body.clientHeight
      var chargePanelBody = document.getElementById('charge-panel-body')
      var num = h / 2 - 160
      this.halfHeight = h / 2 - 80 + 'px'
      chargePanelBody.style.height = num + 'px'
    },
    getChargeInfo (val) {
      this.$http({
        url: this.$http.adornUrl('/pole/polec2charging/chargeInfo'),
        method: 'get',
        params: this.$http.adornParams({
          streetlightId: val
        })
      }).then(({ data }) => {
        this.chargeInfo = data.info
        this.charge = data.info.usbcharge / 5
      })
    },
    openChargePanel (val) {
      this.viewCharge = val
      this.dialogVisible = true
    },
    changeCharge () {
      var usbcharge = 0
      var elecharge = 0
      if (this.typeFlag === 0) {
        usbcharge = this.viewCharge
        elecharge = this.chargeInfo.elecharge / 10
      } else {
        usbcharge = this.chargeInfo.usbcharge / 10
        elecharge = this.viewCharge
      }
      this.$message({
        message: '正在提交修改',
        type: 'warning'
      })
      this.$http({
        url: this.$http.adornUrl('/pole/polec2charging/changeCharge'),
        method: 'get',
        params: this.$http.adornParams({
          streetlightId: this.chargeInfo.streetlightId,
          addressCode: this.chargeInfo.c2ChargingMac,
          usbCharge: usbcharge,
          eleCharge: elecharge
        })
      }).then(({ data }) => {
        if (data.code === '0') {
          this.$message({
            message: data.msg,
            type: 'success'
          })
        } else {
          this.$message.error(data.msg)
        }
        this.dialogVisible = false
        this.getChargeInfo(this.chargeInfo.streetlightId)
      })
    },
    changeType (val) {
      this.typeFlag = val
      if (val === 0) {
        document.getElementById('charge-panel-body').className =
          'charge-panel-body-usb'
      } else {
        document.getElementById('charge-panel-body').className =
          'charge-panel-body-ele'
      }
    },
    startCharge () {
      this.$http({
        url: this.$http.adornUrl('/pole/polec2charging/startCharging'),
        method: 'get',
        params: this.$http.adornParams({
          streetlightId: this.streetlightId,
          addressCode: this.chargeInfo.c2ChargingMac,
          totalTime: this.viewChargingTime,
          type: this.typeFlag
        })
      }).then(({ data }) => {
        this.$message({
          message: data.msg,
          type: 'success'
        })
        this.chargeVisible = false
      })
    },
    stopCharge () {
      this.stopLoading = true
      this.$http({
        url: this.$http.adornUrl('/pole/polec2charging/stopCharging'),
        method: 'get',
        params: this.$http.adornParams({
          streetlightId: this.streetlightId,
          addressCode: this.chargeInfo.c2ChargingMac,
          type: this.typeFlag
        })
      }).then(({ data }) => {
        this.$message({
          message: data.msg,
          type: 'warning'
        })
        this.stopLoading = false
      })
    },
    openChargeTimePanel (val) {
      this.viewChargingTime = val
      this.chargeVisible = true
    }
  }
}
</script>
<style>
[placeholder~="输入自定义的充电费率"] {
  border: 1px solid #468caf;
  color: white;
  background-color: rgba(0, 0, 0, 0);
}
[placeholder~="输入自定义的充电费率"]:focus {
  border: 1px solid #468caf;
  color: white;
  background-color: rgba(0, 0, 0, 0);
}
[placeholder~="输入自定义的充电时间"] {
  border: 1px solid grey;
  color: black;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 25px;
}
[placeholder~="输入自定义的充电时间"]:focus {
  border: 1px solid grey;
  color: black;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 25px;
}
.Btn:hover {
  color: black;
  border: 1px solid white;
  background-color: grey;
}
.Btn:focus {
  color: black;
  border: 1px solid white;
  background-color: grey;
}
.status-usb-free {
  background-image: url(~@/assets/img/charge/usb-free.png);
  background-position: center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.status-usb-error {
  background-image: url(~@/assets/img/charge/usb-error.png);
  background-position: center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.status-usb-charge {
  background-image: url(~@/assets/img/charge/usb-charge.png);
  background-position: center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.status-bike-free {
  background-image: url(~@/assets/img/charge/bike-free.png);
  background-position: center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.status-bike-error {
  background-image: url(~@/assets/img/charge/bike-error.png);
  background-position: center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.status-bike-charge {
  background-image: url(~@/assets/img/charge/bike-charge.png);
  background-position: center;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.on-no {
  background-image: url(~@/assets/img/charge/on-no.png);
  background-position: center;
  background-size: 80% 100%;
  background-repeat: no-repeat;
}
.on-yes {
  background-image: url(~@/assets/img/charge/on-yes.png);
  background-position: center;
  background-size: 80% 100%;
  background-repeat: no-repeat;
}
.off-no {
  background-image: url(~@/assets/img/charge/off-no.png);
  background-position: center;
  background-size: 80% 100%;
  background-repeat: no-repeat;
}
.off-yes {
  background-image: url(~@/assets/img/charge/off-yes.png);
  background-position: center;
  background-size: 80% 100%;
  background-repeat: no-repeat;
}
</style>
<style>
.popup-bg {
  position: fixed;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  opacity: 1;
}
.popup {
  position: relative;
  width: 30%;
  height: 22%;
  margin: 18% auto;
  background-image: url(~@/assets/img/charge/popup-bg.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup-cancel {
  width: 100%;
  height: 50px;
  border: 0px;
  background-color: rgba(0, 0, 0, 0);
  background-image: url(~@/assets/img/charge/popup-concel.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup-define {
  width: 100%;
  height: 50px;
  border: 0px;
  background-color: rgba(0, 0, 0, 0);
  background-image: url(~@/assets/img/charge/popup-define.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>