esswisdom_app/pages/report/index.vue

<template>
	<view class="container">
		<view class="container_navbar">
			<view class="container_top">
			</view>
	<uni-nav-bar color="#222" :border="false" :shadow="false" :fixed="true" backgroundColor="rgba(255, 255, 255, 0.3)" shadow left-icon="left"
		title="经济测算报告" @clickLeft="onclickLeft"/>
			</view>
		
		<view class="container_box">
			<view class="container_title">
				<view class="calculation_left">
					<text class="testbox">&#xe65b;</text>选择地区
				</view>
			</view>
			<view class="container_Subtitle">
				<view class="voltageleft">
					<view class="voltagetop">
						电压级别
					</view>
					<view class="voltagebuttn">
						10kv
					</view>
				</view>
				<view class="voltageright">
					<view class="voltagetop">
						用电类型
					</view>
					<view class="voltagebuttn">
						大工业用电
					</view>
				</view>
			</view>
		</view>
	<view class="invest">
		<view class="invest_box">
			<view class="investall">
				<view class="invest_left">
					<view class="invest_top">
						<view class="investtop">
							全投资IRR
						</view>
						<view class="investbotton">
						8.86%
						</view>
					</view>
					<view class="invest_botton">
					<view class="invest_top">
						<view class="investtop">
							全投资静态回收期
						</view>
						<view class="investbotton">
						7.05年
						</view>
					</view>
					<view class="income_top">
						<view class="investtop">
							总投资收益率
						</view>
						<view class="investbotton">
						5.15%
						</view>
					</view>
					</view>
				</view>
				<view class="invest_right">
					<view class="invest_righttop">
						装机容量
					</view>
					<view class="invest_rightcenter">
						10
					</view>
					<view class="invest_rightbotton">
						MWh
					</view>
				</view>
			</view>
			<view class="investalls">
				<view class="invest_left">
					<view class="invest_botton">
					<view class="invest_top">
						<view class="investtop">
							造价总成本
						</view>
						<view class="investbotton">
						7.05年
						</view>
					</view>
					<view class="income_tops">
						<view class="investtop">
							充放电总收益
						</view>
						<view class="investbotton">
						5.15%
						</view>
					</view>
					</view>
					
					<view class="invest_top invest_botton">
						<view class="investtop">
							税前利润
						</view>
						<view class="investbotton">
						8.86%
						</view>
					</view>
				
				</view>
			
			</view>
		</view>
		<view class="collective">
			分年集体数据
		</view>
		<qiun-data-charts type="column" :opts="optscolumn" :ontouch="true" :chartData="chartcolumn" />
		<view class="contrast">
		<view class="contrast_title">
			<view class="contrast_titletop">
				对比周期
			</view>
			<view class="contrast_titletops">
				放电量<text class="Electricityprice_peakrightkwh">
					(万/KWh)
				</text> 
			</view>
			<view class="contrast_titletops">
				充电量<text class="Electricityprice_peakrightkwh">
					(万/KWh)
				</text> 
			</view>
		</view>
		<view class="contrast_middle">
			<view class="contrast_titletop">
				换电前充放电量
			</view>
			<view class="contrast_titletops">
				3889.40
			</view>
			<view class="contrast_titletops">
				4521.26
			</view>
		</view>
		<view class="contrast_bottom">
			<view class="contrast_titletop">
				全周期充放电量
			</view>
			<view class="contrast_titletops">
			   7340.29
			</view>
			<view class="contrast_titletops">
				8532.79
			</view>
		</view>
		</view>
		
	</view>
	<view class="economy">
		<view class="economy_top">
			<view class="economy_topleft">
				经济收益
			</view>
			<view class="economy_topright">
				(单位：万元)
			</view>
		</view>
		<view class="incomelist">
		 <view class="incomelist_title">
		 	<view class="incomelist_ul">
		 		年份
		 	</view>
			<view class="incomelist_ul">
				收益
			</view>
			<view class="incomelist_ul">
				现金流
			</view>
			<view class="incomelist_ul">
				投资收益
			</view>
		 </view>
		 <view class="incomelist_titles">
		 	<view class="incomelist_ul">
		 		第一年
		 	</view>
		 			<view class="incomelist_ul">
		 				163.52
		 			</view>
		 			<view class="incomelist_ul">
		 				-839.45
		 			</view>
		 			<view class="incomelist_ul">
		 				91.09
		 			</view>
		 </view>
		 <view class="incomelist_title">
		 	<view class="incomelist_ul">
		 		合计
		 	</view>
		 			<view class="incomelist_ul">
		 				163.52
		 			</view>
		 			<view class="incomelist_ul">
		 				-839.45
		 			</view>
		 			<view class="incomelist_ul">
		 				91.09
		 			</view>
		 </view>
		</view>
	</view>
	<view class="Electricityprice">
		<view class="Electricityprice_title">
			时段电价
		</view>
		<qiun-data-charts type="column" :opts="electricity" :ontouch="true" :chartData="electricitychart" />
		<view class="Electricityprice_peak">
			<view class="Electricityprice_peakleft">
				峰谷电价差
			</view>
			<view class="Electricityprice_peakright">
				0.4799 
				<view class="Electricityprice_peakrightkwh">
					元/kWh
				</view> 
			</view>
		</view>
		<view class="Electricityprice_text">
			测算结果根据当地各电价时段时长、变压器容量、每月实际需量、
			电池效率及消耗、利用率最高等因素推算得出,现阶段仅供参考。
		</view>
	</view>
	</view>
</template>
<!--    -->
<script>
	import request from '@/utils/request';
	export default {
		data() {
			return {
			optscolumn: {
				color: ["#007545"],
				padding: [15, 0, 0, 0],
				backgroundColor: "#007545",
				dataLabel: false, // 关闭数据标签
				legend: {
					show: true,
					fontSize: 10 
				},
				xAxis: {
					disableGrid: true,
					labelCount: 24, // 显示全部24小时标签
					rotate: 0, // 标签旋转45度
					fontSize: 10
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2,
					fontSize: 10,
					showTitle:true,
					data: [{
					title: '电量(万/kwh)',
						titleOffsetX:24,
					},
					{
					      position: "right",
					      title: "时间(年)",
						  fontSize:true,
						  titleOffsetX:-18
					            }
					],
				},
				extra: {
					line: {
						type: "straight",
						activeType: "hollow",
			
					},
					column: {
						width: 6,
						barBorderRadius: [1.5, 1.5, 0, 0],
					},
				}
			},
			chartcolumn: {},
			electricity: {
				color: ["#007545"],
				padding: [15, 0, 0, 0],
				backgroundColor: "#007545",
				dataLabel: false, // 关闭数据标签
				legend: {
					show: false
				},
				xAxis: {
					disableGrid: true,
					labelCount: 24, // 显示全部24小时标签
					rotate: 0, // 标签旋转45度
					fontSize: 10
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2,
					fontSize: 10,
					showTitle:true,
					data: [{
					title: '电价(元/kWh)',
						titleOffsetX:28,
					}
					],
				},
				extra: {
					line: {
						type: "straight",
						activeType: "hollow",
			
					},
					column: {
						width: 20,
						barBorderRadius: [2, 2, 0, 0],
					},
				}
			},
			electricitychart: {},
			}
		},
		onLoad() {
			setTimeout(() => {
		this.chartcolumn = {
			categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
			series: [{
				name: '充电',
				data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
			},{
				name: '放电',
				data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
			}]
		};
		}, 500);
		setTimeout(() => {
		this.electricitychart = {
			categories: ['尖期','峰期','平期','谷时','深谷'],
			series: [{
				name: '电价',
				data: [
				{"value":4,"color": "#EE6666"},
				{"value":3,"color": "#FAC858"},
				{"value":2,"color": "#91CB74"},
				{"value":1,"color": "#1890FF"},
				{"value":5,"color": "#9A60B4"},
				]
			}
			]
		};
		}, 500);
		},
		methods: {
		onclickLeft(){
			uni.navigateBack({
			    delta: 1 // 返回的页面数，默认为1
			});
		}
		}
	}
</script>

<style scoped>
	.uni-page {
		width: 100%;
		height: 100%;
	}
/deep/ .uni-nav-bar-text{
	font-weight: 600;
}
	.container {
		background-color: #ffffff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		background-image: url('https://esos-iot.bjdexn.cn/myminio/project/475a3a10bcf74300895b3dc82897237e.jpeg');
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-bottom: 140rpx;
	}
.container_navbar{
	width: 100%;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	padding: 0rpx;
}
.container_top{
	width: 100%;
	height: 40rpx;
	background-color:rgba(255, 255, 255, 0.5);
}
	.account_number {
		width: 100%;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	}


	.toptabbar {
		width: 100%;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.container_box {
		height: 520rpx;
		color: #222;
		padding-top: 100rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: linear-gradient(to bottom,
				rgba(255, 255, 255, 0),
				rgba(255, 255, 255, 0.8),
				/* 完全透明 */
				rgba(255, 255, 255, 1)
				/* 80% 不透明 */
			);
	}
	@font-face {
	  font-family: 'iconfont';  /* Project id 4935042 */
	  src: url('//at.alicdn.com/t/c/font_4935042_1qob4kor3dt.woff2?t=1749628842617') format('woff2'),
	       url('//at.alicdn.com/t/c/font_4935042_1qob4kor3dt.woff?t=1749628842617') format('woff'),
	       url('//at.alicdn.com/t/c/font_4935042_1qob4kor3dt.ttf?t=1749628842617') format('truetype');
	/* 	src: url('@/font/iconfont.woff2?t=1748497918806') format('woff2'),
			url('@/font/iconfont.woff?t=1748497918806') format('woff'),
			url('@/font/iconfont.ttf?t=1748497918806') format('truetype'); */
	}

	.test {
		font-family: iconfont;
		margin-left: 16rpx;
	}

.testbox {
		font-family: iconfont;
		margin-right: 10rpx;
	}
.container_Subtitle{
	margin-top: 40rpx;
	display: flex;
}
	 .voltageleft{
		 display: flex;
		 flex-direction: column;
	 }
	 .voltageright{
		 margin-left: 80rpx;
	 }
	 .voltagetop{
		 color: #A2A0AB;
		 font-weight: 500;
		 font-size: 32rpx;
	 }
	 .voltagebuttn{
		 margin-top: 20rpx;
		 font-size: 38rpx;
	 }
	 .invest{
		 padding: 0rpx 20rpx;
		 box-sizing: border-box;
	 }
	 .invest_box{
		width: 100%;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-between;
		 padding: 20rpx;
		 border-radius: 10rpx;
		border:1rpx solid #f5f5f5;
		background-color: #fff;
		box-shadow: 0px 0px 1px 1rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
	 }
	 .investall{
		 width: 100%;
		 height: 300rpx;
		  display: flex;
		  justify-content: space-between;
		border-bottom: 1rpx dashed #ccc;
		padding-bottom: 20rpx;
	 }
	 .investalls{
	 		 width: 100%;
	 		 height: 300rpx;
	 		  display: flex;
	 		  justify-content: space-between;
	 		padding-bottom: 20rpx;
	 }
	 .invest_left{
		 margin-top: 20rpx;
		 font-size: 28rpx;
	 }
	 .invest_top{
		 display: flex;
		 flex-direction: column;
	 }
	 .invest_botton{
		 display: flex;
		 margin-top: 40rpx;
	 }
	 .income_top{
		 margin-left: 20rpx;
	 }
	 .income_tops{
	 		 margin-left: 100rpx;
	 }
	 .invest_right{
		 width: 200rpx;
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 font-size: 24rpx;
		 background-image: url("/static/battery.png");
		 background-size: 100% auto;
		 background-repeat: no-repeat;
	 }
	 .invest_righttop{
		 margin-top: 80rpx;
		 color: #90959B;
	 }
	 
	 .invest_rightcenter{
		 margin-top: 10rpx;
	 }
	 .invest_rightbotton{
		 margin-top: 10rpx;
	 }
	 .investbotton{
		 margin-top: 10rpx;
	 }
	 .collective{
		 font-size: 30rpx;
		 margin-top: 60rpx;
		 margin-bottom: 10rpx;
	 }
	 .contrast{
		 width: 100%;
		 background-color: #f5f5f5;
		 border-radius: 10rpx;
		 padding: 20rpx;
		 box-sizing: border-box;
		 margin-top: 10rpx;
	 }
	 .contrast_title{
		 display: flex;
		 justify-content: space-between;
		 font-size: 26rpx;
	 }
	 .contrast_middle{
		 display: flex;
		 justify-content: space-between;
		 font-size: 26rpx;
		 margin-top: 20rpx;
	 }
	 .contrast_bottom{
		 display: flex;
		 justify-content: space-between;
		 font-size: 26rpx;
		 margin-top: 20rpx;
	 }
	 .contrast_titletop{
		 flex: 1;
	 }
	 .contrast_titletops{
	  flex: 1;
	  text-align: right;
	 }
	 .economy{
		 margin-top: 60rpx;
	 }
	 .economy_top{
		 display: flex;
		 font-size: 28rpx;
		 /* justify-content: space-between; */
		 padding: 0rpx 20rpx;
	 }
	 .economy_topright{
		 font-size: 22rpx;
		 margin-top: 4rpx;
		 margin-left: 10rpx;
		 color: #ccc;
	 }
	 .incomelist{
		 display: flex;
		 flex-direction: column;
		 margin-top: 20rpx;
		 font-size: 26rpx;
	 }
	 .incomelist_title{
		 display: flex;
		 height: 80rpx;
		 font-size: 26rpx;
		 justify-content: space-between;
		 background-color: #f5f5f5;
	 }
	 .incomelist_titles{
		display: flex;
		height: 80rpx;
		font-size: 26rpx;
		justify-content: space-between;
		/* background-color: #f5f5f5; */
	 }
	 .incomelist_ul{
		 flex: 1;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 
	 }
	 .Electricityprice{
		 display: flex;
		 flex-direction: column;
		 padding: 20rpx;
		 margin-top: 40rpx;
	 }
	 .Electricityprice_title{
		 font-size: 28rpx;
		 margin-bottom: 10rpx;
	 }
	 .Electricityprice_peak{
		 display: flex;
		 justify-content: space-between;
		 background-color: #f5f5f5;
		 padding: 20rpx;
		 border-radius: 10rpx;
		 font-size: 24rpx;
		 margin-top: 20rpx;
	 }
	 .Electricityprice_peakright{
		 font-size: 32rpx;
		 display: flex;
		 font-weight: 600;
	 }
	.Electricityprice_peakrightkwh{
		 font-size: 22rpx;
		 margin-top: 8rpx;
		 margin-left: 10rpx;
		 font-weight: 400;
	 }
	 .Electricityprice_text{
		 font-size: 22rpx;
		 margin-top: 20rpx;
		 line-height: 35rpx;
		 color: #ccc;
	 }
</style>