charge_miniapp/pages/site/site.vue

<template>
	<ax-body>
		<view class="body app-hide-scrollbar">
			<!-- 顶部 -->
			<view class="top">
				<view class="site-base">
					<view class="site-name">{{stationInfo.name}}</view>
					<view class="site-parkade">充电减免2小时停车费，超出部分按每小时3元计算</view>
				</view>
				<view class="location">
					<view class="info app-flex-one">
						<view class="name">距离您{{stationInfo.params.rangeShow}}</view>
						<view class="subname">{{stationInfo.addr}}</view>
					</view>
					<view @click="openLocation()" class="info app-flex c-center column">
						<image src="@/static/img/locate2.svg" class="icon"></image>
						<view class="txt">导航</view>
					</view>
					<image src="@/static/img/site-bg01.png" class="bg"></image>
				</view>
				<image src="@/static/img/logo.svg" class="logo" mode="widthFix"></image>
			</view>
			<!-- 费用信息 -->
			<view class="card">
				<view class="card-title">
					<text>费用信息</text>
					<view @click="toPriceAll()" class="more">
						<text>查看全部</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
				<view class="info-cell">
					<image src="@/static/img/site-icon02.png" class="icon"></image>
					<text>当前时段：</text><text>{{stationInfo.params.priceShow}}</text>
				</view>
				<view class="info-cell">
					<image src="@/static/img/site-icon03.png" class="icon"></image>
					<text>停车参考：</text><text>充电减免2小时停车费</text>
				</view>
				<view class="current-price">
					<view class="bg5">
						<view class="text">当前价</view>
						<image src="@/static/img/site-bg05.svg" class="bg" mode="heightFix"></image>
					</view>
					<view class="price-wrap" v-if="!isOperation">
						<view class="price">
							<text class="symbol">￥</text>
							<text>{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(4):"0.0000"}}</text>
						</view>
						<view class="unit">元/度</view>
					</view>
					<view class="price-wrap" v-else>
						<view class="operation-price">
							<text class="operation-symbol">￥</text>
							<text>{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(4):"0.0000"}}</text>
						</view>
						<view class="mini-text">元/度</view>
						<view class="operation-price-btn">
							企业专享价
						</view>
						<view class="ordinary-price">{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(4):"0.0000"}}</view>
					</view>
				</view>
			</view>
			<!-- 充电终端 -->
			<view class="card">
				<view class="card-title">
					<text>充电终端</text>
					<view @click="toDeiceAll()" class="more">
						<text>查看全部</text>
						<text class="ax ax-iconline i-arrow-right icon"></text>
					</view>
				</view>
				<view class="bread">
					<view class="bread-item"><view class="value">{{getStatusNum(1)}}</view><view class="name">空闲</view></view>
					<view class="bread-item"><view class="value">{{getStatusNum(2)}}</view><view class="name">占用</view></view>
					<view class="bread-item"><view class="value">{{getStatusNum(0)}}</view><view class="name">离线</view></view>
				</view>
				<view class="terminals">
					<view v-for="(item,index) in terminals" :key="index" @click="goTerminal(item)" class="terminal-item">
						<view class="state" :class="[getSatesObj(item).color]">
							<view class="cake">
								<image src="@/static/img/site-icon01.svg" class="icon"></image>
								<view class="name">{{getSatesObj(item).name}}</view>
							</view>
						</view>
						<view class="info">
							<view class="name">{{item.deviceName}}</view>
							<view class="subinfo">电类分类：{{getdeviceTypeName(item.eType)}}</view>
							<view class="subinfo">终端编号：{{item.deviceNo}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 扫码充电 -->
			<view class="footer">
				<view class="bg5">
					<view class="text">
						<view>中数电动</view>
						<view>特惠价</view>
					</view>
					<image src="@/static/img/site-bg05.svg" class="bg" mode="heightFix"></image>
				</view>
				<view class="price-wrap">
					<view class="price">
						<text class="symbol">￥</text>
						<text>{{nowPriceTime.price?nowPriceTime.price.toFixed(4):"0.0000"}}</text>
					</view>
					<view class="unit">{{nowPriceTime.unit}}</view>
				</view>
				<view @click="sacn()" class="scan">扫码充电</view>
			</view>
		</view>
	</ax-body>
</template>

<script>
	export default {
		onLoad: function (option) {
				console.log(option); //打印出上个页面传递的参数。
				this.stationInfo = JSON.parse(option.item);
				if(this.stationInfo.pictures){
					//添加站点图片
					var imgArr = this.stationInfo.pictures.split(",");
					if(imgArr.length > 0){
						this.tops = imgArr;
					}
				}
				this.getStationsInfo();
				this.getConfigStationInfo();
		},
		mounted() {
			this.$app.act.selectorQuery(this,'#footer').then(res=>{
				const win = uni.getWindowInfo();
				const tHight = win.windowWidth * 9 /16;
				this.mainHeight = win.windowHeight - tHight - res.height + 10;
			});
		},
		data() {
			return {
				isOperation:false,
				mainHeight: 0,
				tops:["../../static/img/$temp-site.png"],
				another: false,
				terminals: [],
				entInfo:{
					title:'服务提供',
					name: '华能贵州盘州市风电有限责任公司',
					code: '915205555155625655',
					tel: '0851-8815158',
					businessLicenceUrl:"/static/img/$temp-site01.jpg"
				},
				stationInfo : "",//站点信息
				deviceList: [],//该站点桩列表
				timePricesList: [],//费用时段列表
				nowPriceTime: {},//当前费用时段信息
				service:{
					tel: '400-0000-0000',
					work: '09:00 至 18:00'
				},
				busineHours:"",//营业时间
			}
		},
		methods: {
			getStationsInfo(){
				this.$api.base("post","/chargeApi/getStationsInfoAndUpdateDecice",{"stationId":this.stationInfo.id},{}).then(res=>{
					this.deviceList = res.devices;
					this.timePricesList = res.prices;
					this.nowPriceTime = res.nowPriceTime;
					//只显示三个设备信息
					for(var i = 0; i < this.deviceList.length; i++){
						this.terminals.push(this.deviceList[i]);
						if(i == 2){
							break;
						}
					}
				})
			},
			//获取桩状态的数量
			getStatusNum(status){
				var num = 0;
				//设备状态 0：离网1：空闲2：占用（未充电）3：占用（充电中）4：占用（预约锁定）255：故障
				for(var i = 0; i < this.deviceList.length; i++){
					var device = this.deviceList[i];
					if(status == 2){
						if(device.deviceStatus == 2 || device.deviceStatus == 3 || device.deviceStatus == 4){
							num++;
							continue;
						}
					}
					if(device.deviceStatus == status){
						num++;
					}
				}
				return num;
			},
			getSatesObj(item){
				//{name:'离线',color:'grey'},{name:'空闲',color:'green'},{name:'占用',color:'blue'}
				var obj = {};
				if(item.deviceStatus == 2 || item.deviceStatus == 4){
					obj = {name:'占用',color:'blue'};
				}else if(item.deviceStatus == 3){
					obj = {name:'充电中',color:'orange'};
				}else if(item.deviceStatus == 0){
					obj = {name:'离线',color:'grey'};
				}else if(item.deviceStatus == 1){
					obj = {name:'空闲',color:'green'};
				}else if(item.deviceStatus == 255){
					obj = {name:'故障',color:'err'};
				}
				return obj;
			},
			//获取充电桩设备类型
			getdeviceTypeName(type){
				//电类型 1：直流设备；2：交流设备3：交直流一体设备；4：无线设备；5：其他
				var str = "";
				switch(type){
					case "1":
						str = "直流设备";
						break
					case "2":
						str = "交流设备";
						break
					case "3":
						str = "交直流一体设备";
						break
					case "4":
						str = "无线设备";
						break
					case "5":
						str = "其他";
						break
				}
				return str;
			},
			//映射 峰  平  谷
			getPriceLable(type){
				//时间类型 1 谷 2 平 3 峰
				var str = "";
				switch (type){
					case 1:
						str = "谷";
						break;
					case 2:
						str = "平";
						break;
					case 3:
						str = "峰";
						break;
				}
				return str;
			},
			//获取配置文件信息
			getConfigStationInfo(){
				this.$api.static(this.$config.url.configUrl+"stationConfi.json").then(res=>{
					console.log("获取的配置文件信息:",res);
					this.entInfo = res.entInfo;
					this.service = res.service;
					this.busineHours = res.busineHours;
				})
			},
			// 拨打电话
			callPhone(phone){
				this.$app.act.callPhone(phone);
			},
			// 打开客服
			openCustomerService(){
				this.$refs.service.open();
			},
			// 打开服务提供
			openEnt_Serve(){
				this.entInfo.title = '服务提供';
				this.$refs.entInfo.open();
			},
			// 打开发票提供
			openEnt_Invoicing(){
				this.entInfo.title = '发票提供';
				this.$refs.entInfo.open();
			},
			// 关闭企业弹窗
			closeEnt(){
				this.$refs.entInfo.close();
			},
			// 关闭服务弹窗
			closeService(){
				this.$refs.service.close();
			},
			// 打开地图
			openLocation(){
				uni.openLocation({
					latitude: Number(this.stationInfo.lat),
					longitude:  Number(this.stationInfo.lng),
				});
			},
			// 跳转充电终端
			goTerminal(item){
				//设备状态 0：离网1：空闲2：占用（未充电）3：占用（充电中）4：占用（预约锁定）255：故障
				if(item.deviceStatus == 0 || item.deviceStatus == 255 ){
					return;
				}
				this.$app.url.goto('/pages/terminal/terminal?deviceId='+item.id+"&deviceStatus="+item.deviceStatus);
			},
			//去查看全部电站
			toDeiceAll(){
				var strList = JSON.stringify(this.timePricesList);
				var currPriceId = this.nowPriceTime.id
				this.$app.url.goto('/pages/site-more/site-more?stationId='+this.stationInfo.id)
			},
			//去查看全部电价
			toPriceAll(){
				this.$app.url.goto('/pages/site-more/site-more?show=1&stationId='+this.stationInfo.id)
			},
			//扫一扫
			sacn(){
				this.$app.act.scan().then(res=>{
					console.log(res);
					var paramObj = this.getUrlParams(res.result);
					if(!paramObj || !paramObj.connectorCode){
						this.$app.popup.alert("二维码不正确。","温馨提示！");
						return;
					}
					this.getDeviceInfo(paramObj.connectorCode);
				})
			},
			getUrlParams(url) {
			  const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
			  const params = {};
			  let match;
			  while (match = paramsRegex.exec(url)) {
			    params[match[1]] = match[2];
			  }
			  return params;
			},
			//通过充电桩编码（sn）获取设备详情
			getDeviceInfo(sn){
				this.$api.base("post","/chargeApi/checkDevicesBySn",{"sn":sn},{}).then(res=>{
					console.log("设备信息：",res)
					this.goTerminal(res.device);
				})
			}
		}
	}
</script>

<style scoped>
@import url("site.css");
</style>