JP-ChargeTeam51/components/UMessage.vue

<template>
	<view>
		<u-popup v-model="showUMessage" mode="bottom" border-radius="14" :closeable="true">
			<view>

				<view class="UMessage">
					<view class="q1">系统通知</view>
					<view class="q2 margin">尊敬的优电用户，当前站点采用动态调能技术检测到区域用电负荷较高（实时负载率{{loadRate}}%）<br /> 系统已为您智能匹配以下选项：
					</view>
					<view class="q3card q3card0 margin" @click="payValue=0" :class="{
						cardselect:payValue==0,
						cardno:payValue!=0
					}">
						<view class="cardgo">
							<view class="cardinfo">
								<img src="@/assets/img/riFill-check-fill.svg" alt="">

							</view>
						</view>
						<view class="title"> 前往附近站点 享受即时充电</view>
						<view class="q4" v-show="payValue==0" v-if="searchNearStationData.station">
							<view class="q41">最近<span class="q4span">{{searchNearStationData.station.name}}</span>
							</view>
							<view class="q41">距离 <span class="q4span" style="margin-right: 32rpx;">1.2km</span> 空闲桩
								<span class="q4span">{{searchNearStationData.availableDeviceNum}}个</span>
							</view>

						</view>
					</view>

					<view class="q3card q3card1 margin" @click="payValue=1,loadPredictionCurve()" :class="{
						cardselect:payValue==1,
						cardno:payValue!=1
					}">
						<view class="cardgo">
							<view class="cardinfo">
								<img src="@/assets/img/riFill-check-fill.svg" alt="">

							</view>
						</view>
						<view class="title">预约<span v-show="payValue==1&&payTime"
								style="color:#00B962;margin: 0 12rpx;">{{payTime}}</span>充电</view>
							<view class="q4" style="margin: 12rpx 0;" v-if="payValue==1&&payTime">
								享 <span style="color: rgba(51, 51, 51, 1);font-weight: bold;margin: 0 8rpx;">{{price}}元/度</span> 充电优惠
							</view>	
						<view class="q4">
							点击查看[负荷预测曲线]，了解最佳充电时段。
						</view>
						<view class="q4" v-show="payValue==1">
							<view id="UMessage_pieEcharts">

							</view>
						</view>
					</view>
					<view class="q5">再次感谢您对我们的信任，期待您的下次光临！</view>

				</view>
				<view class="q6">
					<view class="q6n1 q6n" @click="bHide">取消充电</view>

					<view class=" q6n q6n2" v-if="payValue==0" @click="toSearchPile">查找附近站点 </view>

					<view class=" q6n q6n3" v-if="payValue==1&&personInfo.userType==1" @click="toLogin">登录后可预约充电</view>

					<view class=" q6n q6n3" v-else-if="payValue==1&&!payValue1bl">{{payTime?'当前时间不可预约':'点击曲线预约充电'}}
					</view>
					<view class=" q6n q6n2" v-else-if="payValue==1&&payValue1bl" @click="confirmBtn">立即预约</view>


				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as API from '@/apis/umessage.js'
	import * as echarts from "echarts";

	export default {
		name: "UMessage",
		props: {
			stationId: "",
			deviceNo: "",
			channelNo: ""
		},
		data() {
			return {
				groupId: "8bc25585-4e5b-4895-a94e-431a23a095df",
				showUMessage: false,
				payValue: 0,
				payValue1bl: false, //预约的时间是否合格
				payTime: "",
				loadRate: 0,
				ampereList: [],
				myChart: null,
				maxAmpere: 0,
				personInfo: {},
				price:"",
				searchNearStationData: {},
				cache: null,
			};
		},
		methods: {
			bShow() {
				this.payValue = 0
				this.payTime = ""
				this.myChart = null
				this.price='';
				this.payValue1bl = false;
				this.showUMessage = true;
				this.findChargingGroup()
			},
			toHTML(data,params){
				 
				 this.price=data.data.price;
				var result = params[0].name + '<br>';
				result += `${params[0].marker} ${params[0].seriesName}: ${params[0].value} A<br>`;
				result += `${params[0].marker} 电价: ${data.data.price} 元/度<br>`;
				return result
			},
			bHide() {
				this.showUMessage = false;

			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			toSearchPile() {
				uni.navigateTo({
					url: '/pages/searchPile/searchPile'
				})
			},
			initLine() {
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('UMessage_pieEcharts'), null, {

						height: uni.upx2px(300)
					});

				}

				//this.myChart.clear()

				var _this = this
				var data1 = []
				var data2 = []
				var pieces=[]
				var gt=0
				
				var keyswitch=0//
				for (var i in this.ampereList) {
					var item = this.ampereList[i]
					var key = item.createTime.split(' ')[1]
					key = key.substring(0, 5)
					data1.push(key)
					data2.push(item.ampere)
					if(i==0){
						if(item.ampere>this.maxAmpere){
							keyswitch=1;
						}
					}
					// console.log(keyswitch==0&&item.ampere>this.maxAmpere)
					// console.log(item.ampere,this.maxAmpere)
					if(keyswitch==0&&item.ampere>this.maxAmpere){
						
						pieces.push({
							gt: parseInt(gt),
							lte:parseInt(i-1),
							color: 'green'
						})
						gt=i-1
						keyswitch=1
					}else if(keyswitch==1&&item.ampere<this.maxAmpere){
						
						pieces.push({
							gt: parseInt(gt),
							lte:parseInt(i-1),
							color: 'red'
						})
						gt=i-1
						keyswitch=0
					}
					
				}
				pieces.push({
					gt: parseInt(gt),
					lte:parseInt(this.ampereList.length),
					color: keyswitch?'red':'green'
				})
				
				
				var option = {

					xAxis: {
						type: 'category',
						data: data1
					},
					yAxis: {
						type: 'value'
					},
					grid: {

						top: '25px',
						left: '30px',
						right: '20px',
						bottom: '25px',
						//  containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						formatter: function(params, ticket, callback) {
							
							_this.payTime=params[0].name ;
							
							if( params[0].data>_this.maxAmpere){
								_this.payValue1bl=false;
							}else{
								_this.payValue1bl=true;
							}
							
							API.timePointPrice({
								deviceNo: _this.deviceNo,
								timePoint: params[0].name
							}).then((res) => {

								 callback(ticket, _this.toHTML(res,params));
							}).catch(error => {
								 
							})

							return '加载中...';
						}
					},
					visualMap: {
					    show: false,
					    dimension: 0,
					    pieces: pieces
					  },
					series: [{
						data: data2,
						type: 'line',
						name: '电流',
						markLine: {
							data: [{
								name: '参考线',
								yAxis: this.maxAmpere, // 参考线的值

								lineStyle: {
									color: 'red',
									type: 'dashed'
								}
							}]
						}
					}],
				};
				console.log(option)
				this.myChart.setOption(option);



			},

			readyToTimingCharging() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var submitForm = {
					deviceNo: this.deviceNo,
					channelNo: this.channelNo,
					startTime: this.payTime
				}
				API.readyToTimingCharging(submitForm).then((res) => {
					uni.hideLoading();
					this.showUMessage = false
					uni.showModal({
						title: '预约成功',
						showCancel: false,
						content: "预约成功，拔枪将会自动取消预约"
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			loadPredictionCurve() {
				if (this.myChart) {
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.loadPredictionCurve({
					deviceNo: this.deviceNo
				}).then((res) => {
					uni.hideLoading();
					console.log(res)
					this.ampereList = res.data.ampereList
					this.maxAmpere = res.data.maxAmpere
					this.initLine()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})


			},
			confirmBtn() {
				this.readyToTimingCharging()
			},
			fetchAdditionalValue() {

			},
			searchNearStation() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.searchNearStation({
					stationId: this.stationId
				}).then((res) => {
					uni.hideLoading();
					console.log(res)
					this.searchNearStationData = res.data;

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			findChargingGroup() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findChargingGroup({
					deviceNo: this.deviceNo
				}).then((res) => {
					uni.hideLoading();
					console.log(res)
					this.loadRate = res.data.loadRate
					this.searchNearStation()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		},
		mounted() {
			this.personInfo = this.carhelp.getPersonInfo()
			this.cache = new Map()

			//this.searchNearStation()
			//this.loadPredictionCurve()
		}
	}
</script>

<style scoped lang="scss">
	.q6 {
		border: 1px solid rgba(242, 242, 242, 1);
		padding: 24rpx;
		display: flex;
		justify-content: space-around;

		.q6n {
			padding: 20rpx 0;
			border-radius: 50px;

			font-size: 34rpx;
			text-align: center;
		}

		.q6n1 {
			width: 30%;
			background-color: rgba(187, 187, 187, 1);
			color: rgba(255, 255, 255, 1);

		}

		.q6n2 {
			background-color: rgba(0, 185, 98, 1);
			color: rgba(255, 255, 255, 1);
			width: 60%;
		}

		.q6n3 {
			width: 60%;
			background-color: rgba(187, 187, 187, 1);
			color: rgba(255, 255, 255, 1);

		}

	}

	.UMessage {
		padding: 30rpx 40rpx;

		.q1 {
			color: rgba(16, 16, 16, 1);
			font-size: 40rpx;
			font-weight: bold;
		}

		.margin {
			margin: 20rpx 0;
		}

		.q2 {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;

		}

		.q5 {
			color: rgba(119, 119, 119, 1);
			font-size: 28rpx;
			//margin-bottom: 40rpx;
		}

		.q4 {

			color: rgba(119, 119, 119, 1);
			font-size: 28rpx;

			.q4span {
				color: rgba(51, 51, 51, 1);
				margin: 0 8rpx;
				font-weight: bold;
			}

			.q41 {
				margin: 8rpx;
			}
		}

		.q3card {
			overflow: hidden;
			padding: 30rpx 40rpx;
			margin-top: 10px;

			.title {
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.cardselect {
			border-radius: 8px;
			border: 2px solid rgba(0, 185, 98, 1);


			.cardgo {
				position: relative;

				.cardinfo {
					background-color: #00b962;
					width: 64rpx;
					height: 64rpx;
					position: absolute;
					top: -44rpx;
					right: -44rpx;
					border-radius: 0 0 0 8px;

					img {
						width: 64rpx;
					}
				}
			}
		}

		.cardno {
			border: 2px solid rgba(204, 204, 204, 1);
			border-radius: 8px;



			.cardgo {
				position: relative;

				.cardinfo {
					background-color: rgba(204, 204, 204, 1);
					width: 64rpx;
					height: 64rpx;
					position: absolute;
					top: -44rpx;
					right: -44rpx;
					border-radius: 0 0 0 8px;

					img {
						width: 64rpx;
					}
				}
			}

		}
	}
</style>