diyici

ChargingStation/pages/periodPrice/index.scss

@@ -0,0 +1,35 @@
+.periodPrice_body {
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+	box-sizing: border-box;
+	padding: 0 30rpx;
+	display: flex;
+	flex-direction: column;
+	.periodPrice_item {
+		// height: 154rpx;
+		width: 100%;
+		border-bottom: solid 1px #ededed;
+		padding: 46rpx 0;
+		box-sizing: border-box;
+		.blue{
+			color: #476FFA;
+		}
+		.periodPrice_item_bottom {
+			color: rgba(0, 0, 0, 0.85);
+			font-size: 24rpx;
+		}
+		.periodPrice_item_top {
+			margin-bottom: 14rpx;
+			.periodPrice_item_top_value {
+				font-weight: 600;
+				color: #121836;
+				font-size: 30rpx;
+			}
+			.periodPrice_item_top_label {
+				font-size: 28rpx;
+				color: rgba(0, 0, 0, 0.85);
+			}
+		}
+	}
+}

ChargingStation/pages/periodPrice/index.vue

@@ -0,0 +1,89 @@
+<template>
+	<view class="periodPrice_body">
+		<scroll-view v-if="priceList.length>2" style="width: 100%; height: 380rpx;  " scroll-x="true">
+			<qiunDataCharts :ontouch="true" :canvas2d='true' canvasId='canvasIdt' inScrollView="true" type="area" :opts="{
+				enableScroll:true,
+					extra:{
+						area:{
+							type:'curve',
+							addLine:true,
+							gradient:true
+							}
+						}, 
+						xAxis:{
+							itemCount:5,
+							scrollShow:true
+						},
+					fontColor:'#000000', 
+					}" :chartData="Line" />
+		</scroll-view>
+		<view style="flex: 1;overflow: hidden;">
+			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
+				<view class="periodPrice_item" :key="index" v-for="(item,index) in priceList">
+					<view class="periodPrice_item_top flex">
+						<view class=" periodPrice_item_top_label oneflex">
+						{{item.startTime}}-{{item.endTime}}  \n\n\n
+						<text v-if=" `${item.startTime} - ${item.endTime}` == now ">(当前时间段)</text>
+						</view>
+						<view class="periodPrice_item_top_value">￥{{item.totalFee}}/度</view>
+					</view>
+					<view class="periodPrice_item_bottom">
+						<text>电费: <text class="blue">{{ tool.getnum(item.electricityFee,3)}}元/度</text> </text>
+						<text style="margin-left: 19rpx;">服务费: <text class="blue">{{ tool.getnum(item.serviceFee,3)}}元/度</text> </text>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import qiunDataCharts from '../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+	export default {
+		components: {
+			qiunDataCharts
+		},
+		data() {
+			return {
+				priceList: [],
+				Line: null,
+				now:''
+			}
+		},
+		onLoad(e) { 
+			if (e.priceList) {
+				this.priceList = JSON.parse(e.priceList).map(item=>{
+					item.totalFee = this.tool.getnum(item.totalFee,3)
+					return item
+				});
+				this.lineInit()
+			}
+			if(e.now){
+				this.now =e.now; 
+			}
+		},
+		methods: {
+			lineInit() {
+				let categories = this.priceList.map(item => item.startTime);
+				let data = this.priceList.map(item => item.totalFee)
+				this.Line = {
+					categories,
+					series: [{
+						name: "金额",
+						data
+					}]
+				}
+			},
+			scrolltolower() {
+				uni.showToast({
+					title: '到底了',
+					icon: 'none'
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import 'index.scss';
+</style>