esswisdom_app/pages/electricityprice/index.vue

<template>
    <!-- <image src="/static/grf.gif" mode=""></image> -->
	<dLoading :status="loading" v-if="loading"></dLoading>
	<view class="container" v-if="!loading">
		<!-- <image class="swiper-item"
	 	src="https://esos-iot.bjdexn.cn/myminio/project/88861a6c1aa243878d02c3502bf8e2ab.jpg"
	 	mode="aspectFill"></image> -->
		<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>
		<image class="account_numberimage" :src="URL" mode="aspectFill"></image>
		<view class="electricityprice">
			<view class="electricityprice_box">
				<view class="electricityprice_box1">
					{{$t('electricityprice.title')}}
				</view>
				<view class="electricityprice_box2">
					<view class="electricity_left">
						<text class="testbox">&#xe65b;</text>
						{{$t('electricityprice.area')}}
					</view>
					<view class="electricity_right">
						<picker @change="bindPickerChange" :value="arrayindex" range-key="provincename" :range="array"
							v-if="array.length > 0">
							<view class="uni-input">{{array[arrayindex].provincename}}
								<icon :type="value" size="26" />
								<text class="test">&#xe606;</text>
							</view>

						</picker>
					</view>
				</view>
				<view class="electricityprice_box2">
					<view class="electricity_left">
						<text class="testbox">&#xe631;</text>
						{{$t('electricityprice.electricity')}}
					</view>
					<view class="electricity_right">
						<picker @change="bindelectricity" :value="categoryindex" range-key="categoryname"
							:range="electricity" v-if="electricity.length > 0">
							<view class="uni-input">
						<view class="uni-electricity">{{electricity[categoryindex].categoryname}}</view>	
								<icon :type="value" size="26" />
								<text class="test">&#xe606;</text>
							</view>

						</picker>
					</view>
				</view>
				<view class="electricityprice_box2">
					<view class="electricity_left">
						<text class="testbox">&#xe7a4;</text>
						{{$t('electricityprice.voltagelevel')}}
					</view>
					<view class="electricity_right">
						<picker @change="bindlevel" :value="levelindex" range-key="levelname" :range="voltage"
							v-if="voltage.length > 0">
							<view class="uni-input">{{voltage[levelindex].levelname}}
								<icon :type="value" size="26" />
								<text class="test">&#xe606;</text>
							</view>

						</picker>
					</view>
				</view>

				<view class="electricityprice_box2">
					<view class="electricity_left">
						<text class="testbox">&#xe679;</text>
					{{$t('electricityprice.selectdate')}}
					</view>
					<view class="electricity_right">
						<view class="datecalendar_2" @click="Dateselection">
							{{date}}
							<text class="test">&#xe606;</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="toptabbar">
			<view class="month">
				{{$t('electricityprice.monthlytime')}}
				<view class="month_box">
					<view class="month_title">
						<view class="month_title1">
							<view class="month_title111">
								{{$t('electricityprice.periodtime')}}
							</view>
							<view class="month_title11">
							{{$t('electricityprice.timesharing')}}
							</view>
							<view class="month_title11">
								{{$t('electricityprice.electricityprice')}}
							</view>

						</view>
						<view class="month_title2" v-for="item in chongdiandata.zuihoud.monthlyelectricityprice"
							key="index">
							<view class="month_title222">
								{{item.profit}}
							</view>
							<view class="month_title22">
								{{item.time}}
							</view>
							<view class="month_title22">
								{{item.value==0?'--':(item.value*1).toFixed(4)}}
							</view>

						</view>
					</view>
					<!-- 图表 -->
					<view class="qiun_data">

						<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
					</view>
				</view>
			</view>
			<!-- <view class="month">
			五一节假日
			<view class="month_box">
				<view class="month_title">
					<view class="month_title1">
						<view class="month_title111">
							时段
						</view>
						<view class="month_title11">
							分时
						</view>
						<view class="month_title11">
							电价
						</view>
			
					</view>
					<view class="month_title2" v-for="item in chongdiandata.holiday.monthlyelectricityprice" key="index">
						<view class="month_title222">
							{{item.profit}}
						</view>
						<view class="month_title22">
							{{item.time}}
						</view>
						<view class="month_title22">
							{{item.value||'--'}}
						</view>
			
					</view>
				</view>
				<view class="qiun_data">
				 
					<qiun-data-charts type="area" :opts="opts51" :chartData="chartData51" />
				</view>
			</view>
		</view> -->

			<view class="month">
				<view class="Capacityneeded">
					{{$t('electricityprice.Trend')}}
				</view>
				<view class="month_box">
					<view class="month_title">
						<view class="month_title1">
							<view class="month_title11" v-for="item in chongdiandata.zuihoud.averageelectricityprice">
								{{item.profit}}
							</view>

						</view>
						<view class="month_title2">
							<view class="month_title22" v-for="item in chongdiandata.zuihoud.averageelectricityprice">
								{{item.value==0?'--': (item.value*1).toFixed(4)}}
							</view>

						</view>
					</view>
					<!-- 图表 -->
					<view class="qiun_data">
						<!-- 	<view class="qiun_title">
						{{tabIndex==0?$t('device.batteryStatus')+'(kWh)':$t('device.earnings')+'(元)'}}	
						</view> -->
						<qiun-data-charts type="line" :opts="lineopts" :chartData="linechart" />
					</view>
					<view class="qiun_datatitle">
						{{$t('electricityprice.Spread')}}:{{(chongdiandata.zuihoud.max.provincemax.value*1).toFixed(6)}} 元/kWh
					</view>
					<view class="qiun_data">

						<view class="qiun_title">
							{{$t('electricityprice.monthly')}}
						</view>
						<qiun-data-charts type="column" :opts="optscolumn" :ontouch="true" :chartData="chartcolumn" />
					</view>
				</view>
			</view>

			<view class="month">
				<view class="Capacityneeded">
					{{$t('electricityprice.capacitycharge')}}
				</view>
				<view class="month_title">
					<view class="month_title1">
						<view class="month_title111">
							{{$t('electricityprice.electricitys')}}
						</view>
						<view class="month_title11">
							{{$t('electricityprice.energyCharge')}}
						</view>

					</view>
					<view class="month_title2">
						<view class="month_title222">
							{{$t('electricityprice.demandcharge')}}
						</view>
						<view class="month_title22">
							{{chongdiandata.zuihoud.pricechart.capacity==0?' -- ' :chongdiandata.zuihoud.pricechart.capacity}}{{$t('electricityprice.kVAmonth')}}
						</view>

					</view>
					<view class="month_title2">
						<view class="month_title222">
							{{$t('electricityprice.capacityprice')}}
						</view>
						<view class="month_title22">
							{{chongdiandata.zuihoud.pricechart.xucapacity==0?' -- ' :chongdiandata.zuihoud.pricechart.xucapacity}}{{$t('electricityprice.kWh_')}}
						</view>

					</view>
				</view>
			</view>
			<!-- 日用电价走势 -->
			<view class="month">
				<view class="Capacityneeded">
					{{$t('electricityprice.Profile')}}
				</view>
				<view class="Daysbox">
					<!-- <view class="Daystext" v-for="item in resultDays.daysArray" key="item">
								{{item}}
							</view> -->
					<top-tabbar :tabIndex="tabIndex" :tabBars="resultDays.daysArray" @toggleToptab="toggleTab"
						selectedBottomColor="#30c58d" selectedTextColor="#343434" textColor="#7d7e80"
						bgColor="#ffffff"></top-tabbar>
				</view>
				<view class="month_box">
					<view class="month_title">
						<view class="month_title1">
							<view class="month_title11" v-for="item in chongdiandata.zuihoud.averageelectricityprice">
								{{item.profit}}
							</view>

						</view>
						<view class="month_title2">
							<view class="month_title22" v-for="item in chongdiandata.zuihoud.averageelectricityprice">
								{{item.value==0?'--':(item.value*1).toFixed(4)}}
							</view>

						</view>
					</view>

					<!--  -->
					<view class="qiun_data">

						<qiun-data-charts type="line" :opts="daylineopts" :chartData="daylinechart" />
					</view>


				</view>
			</view>
		</view>
		<KDatePicker v-model="show" type="month" :modelValue="date" :defaultValue="date" :is-disabled="isDisabled" @change="handleChange"
			formatter="YYYY-MM" />
	</view>

</template>
<!--    -->
<script>
	import request from '@/utils/request';
	import topTabbar from '@/components/top-tabbar.vue';
	import KDatePicker from '@/components/k-date-picker/KDatePicker.vue';
	import dLoading from '@/uni_modules/d-loading/components/d-loading/d-loading.vue'
	import {
		getMonthRange,
		getDays
	} from '@/utils/date.js';

	export default {
		components: {
			KDatePicker, // 注册组件
			topTabbar,
			dLoading
		},
		data() {
			return {
				URL:'https://esos-iot.bjdexn.cn/myminio/project/891e77523d9e4abcb5c86f0b65ea68be.png',
				arrayindex: 0,
				categoryindex: 0,
				levelindex: 0,
				array: [],
				electricity: [],
				voltage: [],
				provinceid: '',
				categoryid: '',
				levelid: '',
				show: false,
				date: '',
				provincename: '',
				categoryname: '',
				jianfengname: '',
				chongdiandata: [],

				opts51: {

				},
				chartData51: {
					categories: [],
					series: []
				},
				opts: {

				},

				chartData: {
					categories: [],
					series: []
				},
				linechart: {},
				lineopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#9A60B4"],
					padding: [15, 20, 0, 0],
					enableScroll: false,
					dataLabel: false, // 关闭数据标签
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 24
					},
					xAxis: {
						disableGrid: false,
						boundaryGap: 'justify', // 柱子紧贴坐标轴
						fontSize: 10
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							tofix: 1
						}],
						fontSize: 10
					},

				},
				daylinechart: {},
				daylineopts: {
					color: ["#B2D5CB"],
					padding: [15, 20, 0, 0],
					enableScroll: false,
					backgroundColor: "#B2D5CB",
					dataPointShape: false, // 关闭数据点
					dataLabel: false, // 关闭数据标签
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						labelCount: 6, // 显示全部24小时标签
						rotate: 0, // 标签旋转45度
						fontSize: 10
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						fontSize: 10,
						data: [{
							min: 0,
							tofix: 1
						}],
					},
					extra: {
						line: {
							type: "step",
							width: 2,
							activeType: "hollow"
						}
					}

				},
				optscolumn: {
					color: ["#B2D5CB"],
					padding: [15, 10, 0, 0],
					backgroundColor: "#B2D5CB",
					dataLabel: false, // 关闭数据标签
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						labelCount: 24, // 显示全部24小时标签
						rotate: 0, // 标签旋转45度
						fontSize: 10
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						fontSize: 10,
						data: [{
							min: 0,
							tofix: 1
						}],
					},
					extra: {
						line: {
							type: "straight",
							activeType: "hollow",

						},
						column: {
							width: 18,
							barBorderRadius: [2, 2, 0, 0],
						},
					}
				},
				chartcolumn: {},
				electricitypricechart: [],
				resultDays: [],
				tabIndex: 0,
				dayresults: [],
				loading:true
			}
		},
		async onLoad() {
			// this.loading = true
			const monthRange = getMonthRange()
			this.date = monthRange.firstDay.substring(0, 7)
			await this.getelectricityprice()
			await this.getuseelectricity()
			await this.getvoltage()
			await this.getchongdian()
			this.resultDays = getDays(this.date.substring(0, 4), this.date.substring(5, 7))
			await this.getdayresult()
		},
		mounted() {
		
						
		},
		methods: {
			onclickLeft() {
				uni.navigateBack({
					delta: 1 // 返回的页面数，默认为1
				});
			},
			// 地区
			async getelectricityprice() {
				try {
					const response = await request({
						url: `/tdengineyuanshi/selectprovince`,
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}

					});

					this.array = response.data;
					this.provincename = this.array[0].provincename
					this.provinceid = this.array[0].provinceid
				} catch (error) {
					console.error('登录失败:', error);
				}
			},
			async bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.arrayindex = e.detail.value
				this.provincename = this.array[e.detail.value].provincename
				this.provinceid = this.array[e.detail.value].provinceid
				await this.getuseelectricity()
				await this.getvoltage()
				await this.getchongdian()
				await this.getdayresult()
			},
			// 用电分类 
			
			async getuseelectricity() {
				try {
					let data = {
						provinceId: this.provinceid
					}
					const response = await request({
						url: `/tdengineyuanshi/selectcategory`,
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}

					});
					this.electricity = response.data;
				const sortOrder = {
				       "大工业用电·两部制": 1,
				       "一般工商业·两部制": 2,
				       "一般工商业·单一制": 3
				     };
				    this.electricity.sort((a, b) => {
				       return sortOrder[a.categoryname] - sortOrder[b.categoryname];
				     });
					this.categoryindex = 0;
					this.categoryname = this.electricity[0].categoryname;
					this.categoryid = this.electricity[0].categoryid
				} catch (error) {
					console.error('登录失败:', error);
				}
			},
			async bindelectricity(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.categoryindex = e.detail.value
				this.categoryname = this.electricity[e.detail.value].categoryname
				this.categoryid = this.electricity[e.detail.value].categoryid
				await this.getvoltage()
				await this.getchongdian()
				await this.getdayresult()
			},
			// 电压等级
			async getvoltage() {
				try {
					let data = {
						categoryid: this.categoryid,
						year: this.date.substring(0, 4),
						month: this.date.substring(5, 7)
					}
					const response = await request({
						url: `/tdengineyuanshi/selectlevelid`,
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}

					});
					this.levelindex = 0
					this.voltage = response.data;
					this.levelid = this.voltage[0].levelid
					this.jianfengname = this.voltage[0].levelname
				} catch (error) {
					console.error('登录失败:', error);
				}
			},

			async bindlevel(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.levelindex = e.detail.value
				this.levelid = this.voltage[e.detail.value].levelid
				this.jianfengname = this.voltage[e.detail.value].levelname
				await this.getchongdian()
				await this.getdayresult()
			},
			// 月度电价查询方法
			async getchongdian() {
				this.loading = true
				try {
					let data = {
						provincename: this.provincename,
						categoryname: this.categoryname,
						jianfengname: this.jianfengname,
						year: this.date.substring(0, 4),
						month: this.date.substring(5, 7)
					}
					const response = await request({
						url: `/tdengineyuanshi/chongdian`,
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}

					});
					this.chongdiandata = response.data
					// this.electricitypricechart = this.chongdiandata.pricechart.electricitypricechart
					// 数据预处理
					if (this.chongdiandata.zuihoud.pricechart.electricitypricechart.length > 0) {
						this.electricitypricechart = this.chongdiandata.zuihoud.pricechart.electricitypricechart.map(
							item => ({
								...item,
								// 保持 startTime 和 endTime 为字符串格式
								startTime: item.startTime,
								endTime: item.endTime,
								value: item.value ? parseFloat(item.value) : 0
							}));
						this.processElectricityPriceChart();

					} else {
						this.electricitypricechart = [{
							endTime: "08:00",
							profit: "谷期",
							startTime: "00:00",
							value: "0.3186",
						}]
					}



					// 准备图表数据
					setTimeout(() => {
						let month = [];
						let monthvalue = [];
						for (let index = 0; index < this.chongdiandata.zuihoud.max.provinceListmax
							.length; index++) {
							month.push(this.date.substring(2, 4) + '/' + (index + 1));
							if (index == this.chongdiandata.zuihoud.max.provinceListmax.length - 1) {
								monthvalue.push({
									"value": this.chongdiandata.zuihoud.max.provinceListmax[index]
										.value.substring(0, 8),
									"color": "#007545"
								});
							} else {
								monthvalue.push((this.chongdiandata.zuihoud.max.provinceListmax[index].value)
									.substring(0, 8));
							}
						}

						this.chartcolumn = {
							categories: month,
							series: [{
								name: '电价',
								data: monthvalue
							}]
						};
					}, 500);

				} catch (error) {
					console.error('登录失败:', error);
				}
			},

			processElectricityPriceChart() {

				const hours = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5,
					11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 17.5, 18, 18.5, 19, 19.5, 20, 20.5,
					21, 21.5, 22, 22.5, 23, 23.5, 24
				];

				const seriesTemplates = [{
						name: "谷期",
						data: new Array(49).fill(null)
					},
					{
						name: "平期",
						data: new Array(49).fill(null)
					},
					{
						name: "峰期",
						data: new Array(49).fill(null)
					},
					{
						name: "尖期",
						data: new Array(49).fill(null)
					},
					{
						name: "深谷",
						data: new Array(49).fill(null)
					}
				];

				// 填充电价数据
				this.electricitypricechart.forEach(rate => {
					const series = seriesTemplates.find(s => s.name.includes(rate.profit));
					if (series) {
						// 确保 startTime 和 endTime 是字符串
						const startTime = String(rate.startTime);
						const endTime = String(rate.endTime);

						// 处理可能缺少冒号的情况
						const startTimeParts = startTime.includes(':') ? startTime.split(':') : [startTime, '00'];
						const endTimeParts = endTime.includes(':') ? endTime.split(':') : [endTime, '00'];

						// 计算开始和结束的半小时索引
						const startIndex = parseInt(startTimeParts[0]) * 2 + (startTimeParts[1] === '30' ? 1 : 0);
						const endIndex = parseInt(endTimeParts[0]) * 2 + (endTimeParts[1] === '30' ? 1 : 0);

						// 填充数据（不包含结束点）
						for (let i = startIndex; i <= endIndex; i++) {
							series.data[i] = rate.value === 0 ? null : rate.value;
						}
					}
				});

				// 过滤空系列
				const filteredSeries = seriesTemplates.filter(series =>
					series.data.some(value => value !== null)
				);

				// 提取可见标签
				const allTimePoints = new Set([0, 24]); // 确保包含0点和24点

				this.electricitypricechart.forEach(item => {
					// 转换为半小时索引并转回小时表示
					const startTime = String(item.startTime);
					const endTime = String(item.endTime);

					const startParts = startTime.includes(':') ? startTime.split(':') : [startTime, '00'];
					const endParts = endTime.includes(':') ? endTime.split(':') : [endTime, '00'];

					const startHour = parseInt(startParts[0]) + (startParts[1] === '30' ? 0.5 : 0);
					const endHour = parseInt(endParts[0]) + (endParts[1] === '30' ? 0.5 : 0);

					allTimePoints.add(startHour);
					allTimePoints.add(endHour);
				});

				// 转换为数组并排序
				const visibleLabels = Array.from(allTimePoints).sort((a, b) => a - b);
				this.getServerData();
				this.loading = false
				// 准备图表数据
				setTimeout(() => {
					// 图表配置
					this.opts = {
						padding: [15, 10, 0, 0],
						dataLabel: false,
						dataPointShape: false,
						enableScroll: false,
						legend: {
							show: true,
							position: "bottom",
							lineHeight: 25
						},
						xAxis: {
							disableGrid: true,
							boundaryGap: 'justify',
							data: visibleLabels,
							format: "timedemo",
							fontSize: 10
						},
						yAxis: {
							gridType: "dash",
							dashLength: 2,
							fontSize: 10,
							data: [{
								min: 0,
								tofix: 1
							}]
						}
					};

					// 设置图表数据
					this.chartData = {
						categories: hours, // X 轴数据是半小时间隔
						series: filteredSeries
					};

				}, 500);
			},
			isDisabled(value) {
				return value > new Date().getTime()
			},
			handleChange(value) {
				this.date = value
				this.show = false
				this.getchongdian()
				this.resultDays = getDays(this.date.substring(0, 4), this.date.substring(5, 7))
				this.getdayresult()
			},
			Dateselection(e) {
				console.log(this.date);
				this.show = true;
			},
			// 月度电价走势
			getServerData() {

				// 生成月份标签 - 假设this.date是"2025"
				let month = [];
				for (let index = 0; index < this.chongdiandata.zuihoud.electricitypricetrend.length; index++) {
					month.push(this.date.substring(2, 4) + '/' + (index + 1));
				}

				let res = {
					categories: month, // 使用动态生成的月份
					series: [{
							name: "谷期",
							data: new Array(month.length).fill(null)
						},
						{
							name: "平期",
							data: new Array(month.length).fill(null)
						},
						{
							name: "峰期",
							data: new Array(month.length).fill(null)
						},
						{
							name: "尖期",
							data: new Array(month.length).fill(null)
						},
						{
							name: "深谷",
							data: new Array(month.length).fill(null)
						}
					]
				};

				// 填充电价数据
				this.chongdiandata.zuihoud.electricitypricetrend.forEach((rateGroup, groupIndex) => {
					rateGroup.forEach(rateItem => {
						const series = res.series.find(s => s.name.includes(rateItem.profit));

						if (series) {
							// 使用groupIndex作为月份索引，因为数据是按月份顺序排列的
							// 将value转换为数字，空值或无效值设为null
							const value = rateItem.value ? parseFloat(rateItem.value) : null;
							series.data[groupIndex] = value === 0 ? null : value;
						}
					});
				});
				// 过滤没有数据的图例
				res.series = res.series.filter(series => {
					return series.data.some(value => value !== null);
				});

				// 模拟从服务器获取数据时的延时
				setTimeout(() => {
					this.linechart = JSON.parse(JSON.stringify(res));
				}, 500);

			},
			// 切换标签
			toggleTab(index) {
				this.tabIndex = index;
				this.getdayresult()
			},
			// 日用天查询
			async getdayresult() {
				try {
					let data = {
						provincename: this.provincename,
						categoryname: this.categoryname,
						jianfengname: this.jianfengname,
						year: this.date.substring(0, 4),
						month: this.date.substring(5, 7),
						day: this.tabIndex + 1
					}
					const response = await request({
						url: `/tdengineyuanshi/xiaoshi`,
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}

					});
					this.dayresults = response.data
					let month = [];
					let monthvalue = [];
					for (let index = 0; index < this.dayresults.length; index++) {
						month.push(this.dayresults[index].time);
						monthvalue.push(this.dayresults[index].profit);
					}
					setTimeout(() => {

						this.daylinechart = {
							categories: month,
							series: [{
								name: '电价',
								data: monthvalue
							}]
						};
					}, 500);
				} catch (error) {
					console.error('登录失败:', error);
				}
			},

		}
	}
</script>
<!--  -->
<style scoped>
	.uni-page {
		width: 100%;
		height: 100%;
	}
.container_grf{
	width: 100%;
	height:100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* background-color:rgba(18, 124, 199, 1); */
	background-color: #fff;
	
}
	.container {
		/* background: linear-gradient(to bottom, #007545 -40%, #f0f5f5 40%, #f0f5f5 100%); */
		background-color: #f0f5f5;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		/* background-image: url('https://esos-iot.bjdexn.cn/myminio/project/88861a6c1aa243878d02c3502bf8e2ab.jpg'); */
		/* background-image: url('https://esos-iot.bjdexn.cn/myminio/project/891e77523d9e4abcb5c86f0b65ea68be.png'); */
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
.container_navbar{
	width: 100%;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	padding: 0rpx;
	z-index: 1;
}
.container_top{
	width: 100%;
	height: 40rpx;
	background-color:rgba(255, 255, 255, 0.5);
}
.account_numberimage {
		width: 100%;
		padding: 0rpx;
		margin-top: -30rpx;
	}
	.swiper-item {
		width: 100%;
		overflow: auto;
	}

	.electricityprice {
		width: 100%;
		padding: 0rpx 20rpx;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	}

	.electricityprice_box {
		width: 100%;
		height: 420rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0rpx 20rpx;
	}

	.electricityprice_box1 {
		width: 100%;
		font-size: 30rpx;
		padding: 20rpx 0rpx;
		display: flex;
		justify-content: center;
		border-bottom: 1rpx #f0f5f5 solid;
	}

	.electricityprice_box2 {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx #f0f5f5 solid;
		box-sizing: border-box;
		
	}

	.electricity_left {
		font-size: 26rpx;
	}

	/*  */
	@font-face {
		font-family: 'iconfont';
		/* Project id 4935042 */
		src: url('http://at.alicdn.com/t/c/font_4935042_gsrxcrmdcz.woff2?t=1748497918806') format('woff2'),
			url('http://at.alicdn.com/t/c/font_4935042_gsrxcrmdcz.woff?t=1748497918806') format('woff'),
			url('http://at.alicdn.com/t/c/font_4935042_gsrxcrmdcz.ttf?t=1748497918806') 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: 20rpx;
	}

	.testbox {
		font-family: iconfont;
		margin-left: 32rpx;
		margin-right: 10rpx;
	}

	.electricity_right {
		display: flex;
		font-size: 26rpx;
	}

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

	.month {
		width: 100%;
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.month_box {
		width: 100%;
		margin-top: 20rpx;
	}

	.datecalendar_2 {
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.month_title {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.month_title1 {
		display: flex;
		font-size: 26rpx;
		font-weight: 600;
	}

	.month_title11 {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: aliceblue;
		border: 1rpx #f0f5f5 solid;
	}

	.month_title111 {
		width: 300rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: aliceblue;
		border: 1rpx #f0f5f5 solid;
	}

	.month_title2 {
		display: flex;
		font-size: 24rpx;
	}

	.month_title22 {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx #f0f5f5 solid;
	}

	.month_title222 {
		width: 300rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx #f0f5f5 solid;
	}

	.qiun_data {
		width: 100%;
		margin-top: 20rpx;
		overflow: auto;
		box-sizing: border-box;
		background-color: #f5f5f5;
		border-radius: 8rpx;
	}

	.qiun_title {
		height: 12%;
		font-size: 26rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.Capacityneeded {
		font-size: 28rpx;
		margin: 20rpx 20rpx;
	}

	.qiun_datatitle {
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.Daysbox {
		width: 100%;
		display: flex;
		overflow: hidden;
		overflow-x: auto;
	}

	.Daystext {
		width: 100rpx;
		height: 40rpx;
	}

	/deep/ .uni-scroll-view-content {
		width: 100%;
		overflow: auto;
	}

	/deep/ .uni-top-tabbar .uni-swiper-tab .swiper-tab-list {
		width: 80rpx;
	}
	.uni-input{
		display: flex;
	}
	.uni-electricity{
		width: 350rpx;
		/* flex: 1; */
		text-align: right;
		overflow: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>