|
|
@@ -0,0 +1,918 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view style=";position: relative;height: 250px;margin-top:2vh;">
|
|
|
+ <view class="dtop">
|
|
|
+ <view class="can">
|
|
|
+
|
|
|
+ <view class="box">
|
|
|
+ <!--view class="top_ball one"></view-->
|
|
|
+ <!--view class="top_ball two"></view-->
|
|
|
+ <view class="three">
|
|
|
+ <view class="four"></view>
|
|
|
+ <view class="five"></view>
|
|
|
+ <view class="six"></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ <view class="dot"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <canvas id="c">-->
|
|
|
+ <!-- </canvas>-->
|
|
|
+ <view class="stip">
|
|
|
+
|
|
|
+ <view class="p0" st="">{{ deviceInfo.qrcode}}</view>
|
|
|
+ <view class="p1">
|
|
|
+ <view v-if="portDetail.portStatus == 2">
|
|
|
+ {{$t('charge.charging')}}
|
|
|
+ </view>
|
|
|
+ <view v-if="portDetail.portStatus == 6">
|
|
|
+ {{$t('charge.planed')}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="portDetail.portStatus == 2">
|
|
|
+ {{$t('charge.connected')}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-else>
|
|
|
+ {{$t('charge.nocharge')}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dstatus">
|
|
|
+ <view class="ditem">
|
|
|
+ <image class="itemimg" src="/static/images/new/tmp.png"/>
|
|
|
+ <view class="item-value">{{portDetail.dev_temper}}℃</view>
|
|
|
+ <span class="item-text">{{$t('charge.devtemper')}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="ditem">
|
|
|
+ <image class="itemimg" src="/static/images/new/dianya.png"/>
|
|
|
+ <view class="item-value">{{ portDetail.voltage }}V</view>
|
|
|
+ <span class="item-text">{{$t('charge.voltage')}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="ditem">
|
|
|
+ <image class="itemimg" src="/static/images/new/dianliu.png"/>
|
|
|
+ <view class="item-value" v-if="portDetail.voltage == 0">0A</view>
|
|
|
+ <view class="item-value" v-else>{{portDetail.POWER/portDetail.voltage}}A</view>
|
|
|
+ <span class="item-text">{{$t('charge.current')}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="ditem">
|
|
|
+ <image class="itemimg" src="/static/images/new/shjian.png"/>
|
|
|
+ <view class="item-value">{{ portDetail.time }}{{ i18('分钟') }}</view>
|
|
|
+ <span class="item-text">{{$t('charge.chargetime')}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="ditem">
|
|
|
+ <image class="itemimg" src="/static/images/new/gonglv.png"/>
|
|
|
+ <view class="item-value">{{ portDetail.power }}W</view>
|
|
|
+ <span class="item-text">{{$t('charge.power')}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="ditem">
|
|
|
+ <image class="itemimg" src="/static/images/new/dianliang.png"/>
|
|
|
+ <view class="item-value">{{ portDetail.elec }} {{ i18('度') }}</view>
|
|
|
+ <span class="item-text">{{$t('charge.elec')}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="dbtns">
|
|
|
+ <view class="start" @click="toPage">
|
|
|
+ <image style="width:25px;height: 25px;margin-right: 5px;" src="/static/images/new/start.png"/>
|
|
|
+ <span>{{$t('charge.startcharge')}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="get" @click="getInfo">
|
|
|
+ <image style="width:25px;height: 25px;margin-right: 5px;" src="/static/images/new/get.png"/>
|
|
|
+ <span>{{$t('charge.getinfo')}}</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="dtip">
|
|
|
+ <view style="margin:10px 0px;color: #1A87FF;"><img style="width: 13px;height: 13px" src="/static/images/new/tip.png">{{i18('温馨提示')}}</view>
|
|
|
+ <view>1,{{i18('桩控制最大输出电流,当功率没有达到请检查车的状态或者车的设置')}};</view>
|
|
|
+ <view>2,{{i18('启动充电->设备管理->可设置设备最大输出电流')}}</view>
|
|
|
+ <view>3,{{i18('为保障您远程启动正常充电,请确保枪头完全连接充电口,同时确认您的爱车处于立即充电状态下')}};</view>
|
|
|
+ <view>4,{{i18('注意规范安全充电,停好车,锁好车。')}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {getDeviceInfo,getPortDetail,startCharge,stopCharge,sendPortDetailCmd,checkStatusChange,getPlanInfo,cancelPlan} from "@/api/device/device";
|
|
|
+import websocket from '@/utils/websocket'
|
|
|
+import i18 from '@/utils/i18.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ deviceInfo:{},
|
|
|
+ visitTime:"",
|
|
|
+ timer:null,
|
|
|
+ showPort:false,
|
|
|
+ portDetail:{portStatus:0,POWER:0,voltage:0},
|
|
|
+ statusTimer:"",
|
|
|
+ connected:false,
|
|
|
+ scriptTask:null,
|
|
|
+ choosePort:1,
|
|
|
+ portList:[[{port:1,text:"端口一"}]],
|
|
|
+ planInfo:null,
|
|
|
+ days:["","周一","周二","周三","周四","周五","周六","周日"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ imgUrl() {
|
|
|
+ return getApp().globalData.config.imgUrl;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.deviceInfo.deviceId = opt.id;
|
|
|
+ this.deviceInfo.ccid = opt.ccid;
|
|
|
+ this.deviceInfo.qrcode = opt.qrcode;
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ this.getInfo();
|
|
|
+ this.getPlanInfo();
|
|
|
+ },
|
|
|
+ onUnload (){
|
|
|
+ this.closeSocket();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toPage(){
|
|
|
+ let imei = this.deviceInfo.deviceId;
|
|
|
+ let ccid = this.deviceInfo.ccid;
|
|
|
+ this.closeSocket();
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/weitiandi/device/index?id='+imei+'&ccid='+ccid
|
|
|
+ });
|
|
|
+ },
|
|
|
+ i18(text){
|
|
|
+ return i18(text)
|
|
|
+ },
|
|
|
+ planCharge(){
|
|
|
+ if(this.planInfo != null){
|
|
|
+ this.$modal.confirm("确认取消预约?").then(res=>{
|
|
|
+ this.cancelPlan();
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.toPlan()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancelPlan(){
|
|
|
+ cancelPlan(this.planInfo.id).then(res=>{
|
|
|
+ this.$modal.msg("取消成功");
|
|
|
+ this.planInfo = null;
|
|
|
+ this.getPlanInfo();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPlanInfo(){
|
|
|
+ getPlanInfo(this.deviceInfo.deviceId,this.choosePort).then(res=>{
|
|
|
+ let data = res.data;
|
|
|
+ if(data != null){
|
|
|
+ let planType = data.planType;
|
|
|
+ if(planType == 1){//单次预约
|
|
|
+ let planInfo = {};
|
|
|
+ planInfo.runTime = data.runTime;
|
|
|
+ this.planInfo = planInfo;
|
|
|
+ this.planInfo.id = data.id;
|
|
|
+ }else{
|
|
|
+ let planInfo = {};
|
|
|
+ planInfo.runTime = data.runTime;
|
|
|
+ let repeatDays = data.repeatDays;
|
|
|
+ let days = repeatDays.split(",")
|
|
|
+ let strs = "";
|
|
|
+ for (let i = 0; i < days.length; i++) {
|
|
|
+ if(strs.length>0){
|
|
|
+ strs+=",";
|
|
|
+ }
|
|
|
+ strs +=this.days[days[i]];
|
|
|
+ }
|
|
|
+ this.planInfo = planInfo;
|
|
|
+ this.planInfo.runTime = strs+" "+data.repeatTime;
|
|
|
+ this.planInfo.id = data.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirmPort(e){
|
|
|
+ let value = e.value[0]
|
|
|
+ this.choosePort = value.port;
|
|
|
+ this.showPort = false;
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ initSocket(key){
|
|
|
+ let self = this;
|
|
|
+ let socketUrl = getApp().globalData.config.socketUrl
|
|
|
+ this.scriptTask = websocket({
|
|
|
+ url:"/"+key+"/",
|
|
|
+ });
|
|
|
+ let scriptTask = this.scriptTask;
|
|
|
+ scriptTask.onOpen(function (res) {
|
|
|
+ console.log('WebSocket连接已打开!');
|
|
|
+ self.connected = true;
|
|
|
+ });
|
|
|
+ scriptTask.onError(function (res) {
|
|
|
+ self.connected = false;
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ scriptTask.onMessage(function (res) {
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ let type = data.type;
|
|
|
+ let real_data = data.real_data;
|
|
|
+ if(type == 103){
|
|
|
+ self.portDetail = real_data
|
|
|
+ self.portList = [[]];
|
|
|
+ let port_first_status = self.portDetail["port_first_status"];
|
|
|
+ let port_second_status = self.portDetail["port_second_status"]
|
|
|
+ if(port_first_status){
|
|
|
+ self.portList[0].push({port:1,text:"端口一"});
|
|
|
+ }
|
|
|
+ if(port_second_status){
|
|
|
+ self.portList[0].push({port:2,text:"端口二"});
|
|
|
+ }
|
|
|
+ let choosePort = self.choosePort
|
|
|
+ if(choosePort == 1){
|
|
|
+ self.portDetail.portStatus = port_first_status;
|
|
|
+ }else if(choosePort == 2){
|
|
|
+ self.portDetail.portStatus = port_second_status;
|
|
|
+ }
|
|
|
+
|
|
|
+ self.$modal.closeLoading();
|
|
|
+ }
|
|
|
+ if(type == 116){
|
|
|
+ self.$modal.closeLoading();
|
|
|
+ self.getInfo();
|
|
|
+ }
|
|
|
+ if(type == 113){
|
|
|
+ self.$modal.closeLoading();
|
|
|
+ self.getInfo();
|
|
|
+ }
|
|
|
+ if(type == 96){
|
|
|
+ self.mainBoardInfo = real_data;
|
|
|
+ self.formatMainboardData();
|
|
|
+ self.$modal.closeLoading();
|
|
|
+ }
|
|
|
+ self.$forceUpdate();
|
|
|
+ console.log('收到服务器内容:' + JSON.stringify(data));
|
|
|
+ });
|
|
|
+ scriptTask.onClose(function (res) {
|
|
|
+ console.log('WebSocket 已关闭!');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toSet(){
|
|
|
+ this.closeSocket();
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/weitiandi/device/setting?id='+this.deviceInfo.deviceId+"&ccid="+this.deviceInfo.ccid
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toPlan(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/weitiandi/device/plan?port='+this.choosePort+'&id='+this.deviceInfo.deviceId+"&ccid="+this.deviceInfo.ccid
|
|
|
+ });
|
|
|
+ },
|
|
|
+ trigger(){
|
|
|
+ let portStatus = this.portDetail.portStatus;
|
|
|
+ if(portStatus == 2){//需要停止充电
|
|
|
+ this.$modal.confirm("需要停止充电么?").then(res=>{
|
|
|
+ this.stopCharge();
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ if(portStatus == 1){
|
|
|
+ this.$modal.msg("请先将充电枪插入后再点击充电");
|
|
|
+ }
|
|
|
+ if(portStatus == 5){
|
|
|
+ this.$modal.confirm("确认开始充电么?").then(res=>{
|
|
|
+ this.startCharge();
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ this.$modal.loading("正在获取状态,请稍等...");
|
|
|
+ sendPortDetailCmd(this.deviceInfo).then(res => {
|
|
|
+ this.$modal.loading("正在获取状态,请稍等...");
|
|
|
+ this.visitTime = res.msg;
|
|
|
+ if(!this.visitTime){
|
|
|
+ this.$modal.msg("请重新进入页面");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(!this.scriptTask){
|
|
|
+ this.initSocket(this.deviceInfo.deviceId);
|
|
|
+ }
|
|
|
+ // this.getPortInfo()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ stopCharge(){
|
|
|
+ let self = this;
|
|
|
+ this.deviceInfo.port = this.choosePort;
|
|
|
+ stopCharge(this.deviceInfo).then(()=>{
|
|
|
+ self.$modal.loading("停止成功");
|
|
|
+ setTimeout((()=>{
|
|
|
+ self.getInfo();
|
|
|
+ }),1000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ startCharge(){
|
|
|
+ let self = this;
|
|
|
+ this.deviceInfo.port = this.choosePort;
|
|
|
+ startCharge(this.deviceInfo).then(res=>{
|
|
|
+ self.$modal.loading("启动成功");
|
|
|
+ setTimeout((()=>{
|
|
|
+ self.getInfo();
|
|
|
+ }),1000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getPortInfo(){
|
|
|
+ this.startPortDetailTimer();
|
|
|
+ },
|
|
|
+ startPortDetailTimer(){
|
|
|
+ let self = this;
|
|
|
+ this.timer = setTimeout(function (){
|
|
|
+ getPortDetail(self.deviceInfo,self.visitTime).then(res=>{
|
|
|
+ let data = res.data;
|
|
|
+ if(data != null){
|
|
|
+ self.portDetail = data;
|
|
|
+ self.checkStatusCheck();
|
|
|
+ self.$modal.closeLoading();
|
|
|
+ }else{
|
|
|
+ self.startPortDetailTimer();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },1000);
|
|
|
+ },
|
|
|
+ checkStatusCheck(){
|
|
|
+ this.statusChangeTimer();
|
|
|
+ },
|
|
|
+ checkOnPage(){
|
|
|
+ var pages = getCurrentPages() // 获取栈实例
|
|
|
+ let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
|
|
|
+ if("pages/weitiandi/device/index" != currentRoute){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ closeSocket(){
|
|
|
+ this.scriptTask.close();
|
|
|
+ this.scriptTask = null;
|
|
|
+ },
|
|
|
+ statusChangeTimer(){
|
|
|
+ let self = this;
|
|
|
+ this.statusTimer = setTimeout(function(){
|
|
|
+ if(!this.checkOnPage()){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ checkStatusChange(self.deviceInfo,self.visitTime).then(res=>{
|
|
|
+ let data = res.data;
|
|
|
+ if(data != null){
|
|
|
+ self.getInfo();
|
|
|
+ }else{
|
|
|
+ self.statusChangeTimer();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },3000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.container {
|
|
|
+ background: rgb(249, 252, 255);
|
|
|
+ inset: 0;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ margin-top:4vw;
|
|
|
+}
|
|
|
+
|
|
|
+.header-status-desc {
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ bottom:1vh;
|
|
|
+ font-size: 5vw;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0E9F9B;
|
|
|
+ margin-bottom: 5vw;
|
|
|
+}
|
|
|
+
|
|
|
+.header-status {
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.chong-active {
|
|
|
+ color: #0E9F9B
|
|
|
+}
|
|
|
+
|
|
|
+.header-img {
|
|
|
+ width: 100%;
|
|
|
+ padding: 5% 10%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.header-img image {
|
|
|
+ width: 100%;
|
|
|
+ height: 23vh;
|
|
|
+}
|
|
|
+.info-body{
|
|
|
+ background: #0E9F9B;
|
|
|
+ height: 20vh;
|
|
|
+ margin: 0 2%;
|
|
|
+ border-radius: 1vw;
|
|
|
+ margin-top:2vh;
|
|
|
+ color: #F8FCFF;
|
|
|
+ line-height: 3vh;
|
|
|
+}
|
|
|
+.info-content{
|
|
|
+ display: inline-block;
|
|
|
+ width: 23%;
|
|
|
+ text-align: center;
|
|
|
+ margin: 1%;
|
|
|
+ margin-top:2.5vh;
|
|
|
+}
|
|
|
+.info-content-value{
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.info-content-text{
|
|
|
+
|
|
|
+}
|
|
|
+.info-summary{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ text-align: center;
|
|
|
+ margin:3vh 0;
|
|
|
+}
|
|
|
+.summary{
|
|
|
+ width: 33%;
|
|
|
+ line-height: 2.5vh;
|
|
|
+}
|
|
|
+.charge-num{
|
|
|
+ color: #0E9F9B;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 4.5vw;
|
|
|
+}
|
|
|
+.charge-title{
|
|
|
+ color: #B2B2B2;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+.btn-image{
|
|
|
+ width: 90%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.info-bottom-btn{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 10vh
|
|
|
+;
|
|
|
+}
|
|
|
+.btn-area{
|
|
|
+ width: 50%;
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+.left{
|
|
|
+ position: relative;
|
|
|
+ left: 10px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.right{
|
|
|
+ text-align: left;
|
|
|
+ position: relative;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+.info-plan{
|
|
|
+ text-align: center;
|
|
|
+ color: #0E9F9B;
|
|
|
+ margin-top:1vh;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+.setting{
|
|
|
+ position: fixed;
|
|
|
+ right: -1px;
|
|
|
+ top: 10vh;
|
|
|
+ z-index: 999;
|
|
|
+ background: rgb(227,243,245);
|
|
|
+ color: #0E9F9B;
|
|
|
+ font-size: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 3px;
|
|
|
+}
|
|
|
+.port{
|
|
|
+ height: 70px;
|
|
|
+ background: #F8FCFF;
|
|
|
+ border: 0px solid #F8FCFF;
|
|
|
+ box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin:0 10px;
|
|
|
+ position: relative;
|
|
|
+ margin-top:10px;
|
|
|
+}
|
|
|
+
|
|
|
+.plan{
|
|
|
+ height: 70px;
|
|
|
+ background: #F8FCFF;
|
|
|
+ border: 0px solid #F8FCFF;
|
|
|
+ box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin:0 10px;
|
|
|
+ position: relative;
|
|
|
+ margin-top:15px;
|
|
|
+}
|
|
|
+.port-image{
|
|
|
+ height: 40px;
|
|
|
+ width: 40px;
|
|
|
+ position: absolute;
|
|
|
+ top:15px;
|
|
|
+ left:20px;
|
|
|
+}
|
|
|
+.port-text{
|
|
|
+ position: absolute;
|
|
|
+ top:13px;
|
|
|
+ left:75px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.port-num{
|
|
|
+ position: absolute;
|
|
|
+ top:38px;
|
|
|
+ left:75px;
|
|
|
+ color: #B2B2B2;
|
|
|
+}
|
|
|
+.port-icon{
|
|
|
+ position: absolute;
|
|
|
+ top:30px;
|
|
|
+ right:5px;
|
|
|
+ width: 10px;
|
|
|
+ height: 16px;
|
|
|
+}
|
|
|
+.port-icon image{
|
|
|
+ width: 90%;
|
|
|
+}
|
|
|
+.body-bottom{
|
|
|
+ padding:0 22px;
|
|
|
+}
|
|
|
+.body-bottom .info-content{
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+.bottom-control{
|
|
|
+ height: 22vh;
|
|
|
+ margin: 0 2%;
|
|
|
+ margin-top:2vh;
|
|
|
+ line-height: 3vh;
|
|
|
+ background: #F8FCFF;
|
|
|
+ border: 0px solid #F8FCFF;
|
|
|
+ box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding:3%;
|
|
|
+}
|
|
|
+.control-btn{
|
|
|
+ display: inline-block;;
|
|
|
+ height: 60px;
|
|
|
+ width: 25%;
|
|
|
+ padding:10px 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+.control-btn .btn-image{
|
|
|
+}
|
|
|
+
|
|
|
+#box {
|
|
|
+ /* width: 300px; */
|
|
|
+ height: 280px;
|
|
|
+ position: relative;
|
|
|
+ /* 背景色 */
|
|
|
+ /* background: #f7f6f6; */
|
|
|
+ overflow: hidden;
|
|
|
+ /* padding: 50px 0; */
|
|
|
+ box-sizing: border-box;
|
|
|
+;
|
|
|
+}
|
|
|
+
|
|
|
+.box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ /* 此处尽量不要设置背景色,可以选择在父标签上设置背景色,否则没有黏黏的效果 */
|
|
|
+ filter: url("#goo");
|
|
|
+}
|
|
|
+
|
|
|
+/* 电量文字 */
|
|
|
+.text {
|
|
|
+ font-weight: 200;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 5px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ff6600;
|
|
|
+}
|
|
|
+
|
|
|
+/* 电量文字 */
|
|
|
+.text span {
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部的两个旋转小球 */
|
|
|
+.top_ball {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border-radius: 35%;
|
|
|
+ opacity: 0.5;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ z-index: 10;
|
|
|
+ /* 从中心向外剪切圆,相当于掏空 */
|
|
|
+ -webkit-mask: radial-gradient(transparent 95px, white 0px);
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部的两个旋转小球 */
|
|
|
+.top_ball.one {
|
|
|
+ background: var(--c);
|
|
|
+ animation: ballZhuan 5s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部的两个旋转小球 */
|
|
|
+.top_ball.two {
|
|
|
+ background: var(--c);
|
|
|
+ animation: ballZhuan 8s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.three {
|
|
|
+ width: 170px;
|
|
|
+ height: 170px;
|
|
|
+ border-radius: 300px;
|
|
|
+ opacity: 1;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ z-index: 10;
|
|
|
+ /* 从中心向外剪切圆,相当于掏空 */
|
|
|
+ /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
|
|
|
+ background: #ffffff;
|
|
|
+ /* animation: ballZhuan 9s linear infinite; */
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0px 0px 19px 1px #2196f3;
|
|
|
+}
|
|
|
+.four {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border-radius: 80px;
|
|
|
+ opacity: 0.3;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ z-index: 10;
|
|
|
+ /* 从中心向外剪切圆,相当于掏空 */
|
|
|
+ /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
|
|
|
+ background: #2196f3;
|
|
|
+ animation: ballZhuan1 linear infinite;
|
|
|
+ animation-duration: 11s;
|
|
|
+}
|
|
|
+.five {
|
|
|
+ width: 270px;
|
|
|
+ height: 270px;
|
|
|
+ border-radius: 99px;
|
|
|
+ opacity: 0.6;
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ z-index: 10;
|
|
|
+ /* 从中心向外剪切圆,相当于掏空 */
|
|
|
+ /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
|
|
|
+ background: #2196f3;
|
|
|
+ animation: ballZhuan1 linear infinite;
|
|
|
+ /* transform: rotate(120deg); */
|
|
|
+ animation-duration: 9s;
|
|
|
+ left: -67px;
|
|
|
+}
|
|
|
+.six {
|
|
|
+ width: 270px;
|
|
|
+ height: 270px;
|
|
|
+ border-radius: 99px;
|
|
|
+ opacity: 0.6;
|
|
|
+ position: absolute;
|
|
|
+ top:30px;
|
|
|
+ z-index: 10;
|
|
|
+ /* 从中心向外剪切圆,相当于掏空 */
|
|
|
+ /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
|
|
|
+ background: #2196f3;
|
|
|
+ animation: ballZhuan1 7s linear infinite;
|
|
|
+ /* transform: rotate(120deg); */
|
|
|
+ right: -67px;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes ballZhuan {
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes ballZhuan1 {
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 底部的小球 */
|
|
|
+.dot {
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(101,192,255,0.28);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1000;
|
|
|
+ bottom: -50px;
|
|
|
+}
|
|
|
+
|
|
|
+.dot:nth-of-type(1) {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ right: 116px;
|
|
|
+ animation: dotMove 5s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.dot:nth-of-type(2) {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ left: 120px;
|
|
|
+ animation: dotMove 4s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.dot:nth-of-type(3) {
|
|
|
+ animation: dotMove 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.dot:nth-of-type(4) {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ left: 130px;
|
|
|
+ animation: dotMove 2s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.dot:nth-of-type(5) {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ animation: dotMove 3s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes dotMove {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 98% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-260px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.w-flex {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ padding: 0px 25px;
|
|
|
+}
|
|
|
+.w-flex__item {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.w-item{
|
|
|
+ text-align: center;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+.w-item-tit{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888;
|
|
|
+}
|
|
|
+.w-item-num{
|
|
|
+ font-size: 18px;
|
|
|
+ color: #111;
|
|
|
+}
|
|
|
+.can{
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ width: 211px;
|
|
|
+ height: 211px;
|
|
|
+ background-image: url(/static/images/new/quan.png);
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.dtop{
|
|
|
+ background: url(/static/images/new/box1.png);
|
|
|
+ background-size: cover;
|
|
|
+ width: 260px;
|
|
|
+ height: 236px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ left: 25%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.dstatus{
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-content: center;
|
|
|
+}
|
|
|
+.ditem{
|
|
|
+ width: 30%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 0.3rem;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.itemimg{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.item-value{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 19px;
|
|
|
+ margin:4px 0;
|
|
|
+}
|
|
|
+.item-text{
|
|
|
+ font-size: 13px;
|
|
|
+ margin:1px 0;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.start{
|
|
|
+ background: #1A87FF;
|
|
|
+ color: #fff;
|
|
|
+ width: 45%;
|
|
|
+ height: 50px;
|
|
|
+ min-height: 40px;
|
|
|
+ border-radius: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.dbtns{
|
|
|
+ display: flex;
|
|
|
+ margin-top:10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 30px;
|
|
|
+}
|
|
|
+.get{
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #1A87FF;
|
|
|
+ color: #1A87FF;
|
|
|
+ width: 45%;
|
|
|
+ height: 50px;
|
|
|
+ min-height: 40px;
|
|
|
+ border-radius: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.dtip{
|
|
|
+ margin: 20px 20px;
|
|
|
+ padding: 10px;
|
|
|
+ background: rgba(127,200,251,0.1);
|
|
|
+ border: 1px solid #7FC8FB;
|
|
|
+ box-shadow: 0 2px 8px 0 rgba(0,0,0,0.19);
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #B8B9BA;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.p1{
|
|
|
+ font-size: 20px;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top:10px;
|
|
|
+}
|
|
|
+.stip{
|
|
|
+ text-align: center;
|
|
|
+ z-index: 9999;
|
|
|
+}
|
|
|
+</style>
|