jn_app/pages/power/stationIndex.vue

<template>
	<view class="stationpower">
		<view class="box-bg">
			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
				@clickLeft="back" />
		</view>
		<view class="power_main">
			<view class="flex justify-center">
				<view class="power_tab">
					<text v-for="(item,index) in powerTabData" :key="index" @click="changePowerTab(item)"
						:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
				</view>
			</view>
			<view class="fdwcl" v-if="powerTab === 'DL'">
				<view class="fdwcl_DataAll" v-for="(item,index) in powerProgressData" :key="index">
					<uni-row class="fdwcl_Data flex justify-between">
						<uni-col :span="8" class="fdwcl_Data_1 flex">
							<image src="../../static/jnImage/indexPage/windIcon.png" mode=""></image>
							<text>{{item.inPower}}万kWh</text>
						</uni-col>
						<uni-col :span="8" class="fdwcl_Data_2">
							<text>{{item.name}}</text>
						</uni-col>
						<uni-col :span="8" class="fdwcl_Data_3 flex justify-end">
							<text>{{item.allPower}}万kWh</text>
						</uni-col>
					</uni-row>
					<view class="fdwcl_Data_msg">
						<view class="show_msg" :style="showProgress(item, index)">

						</view>
					</view>
				</view>
			</view>
			<view class="ycdl" v-else>
				<view class="ycdl_tits flex justify-center">
					<image src="../../static/jnImage/powerPage/sqrfdl.png" mode=""></image>
					<text>本期预测电量</text>
				</view>
				<view class="ycdl_station">
					<uni-row class="ycdl_station_row">
						<uni-col :span="7" v-for="(item,index) in powerNowData" :key="index">
							<view class="ycdl_station_col">
								<view class="ycdl_data_col_top flex">
									<text>{{item.inPower}}</text>
									<text>{{item.type}}</text>
								</view>
								<view class="ycdl_data_col_bot flex">
									<image src="../../static/jnImage/powerPage/clockW.png" mode=""></image>
									<text>11月22日</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="ycdl_tits flex justify-center">
					<image src="../../static/jnImage/powerPage/sqrfdl.png" mode=""></image>
					<text>上期日发电量</text>
				</view>
				<view class="ycdl_msg" v-for="(item,index) in 3" :key="index">
					<view class="ycdl_title flex">
						<image src="../../static/jnImage/powerPage/clock.png" mode=""></image>
						<text>11月22日</text>
					</view>
					<view class="ycdl_data">
						<uni-row class="ycdl_data_row">
							<uni-col :span="12" v-for="(item,index) in powerNowData" :key="index">
								<view class="ycdl_data_col flex">
									<view class="ycdl_data_col_left">
										<text>{{item.name}}</text>
									</view>
									<view class="ycdl_data_col_right flex justify-between">
										<text>{{item.inPower}}</text>
										<text>MW</text>
									</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="ycdl_tits flex justify-center">
					<image src="../../static/jnImage/powerPage/tqrfdl.png" mode=""></image>
					<text>同期日发电量</text>
				</view>
				<view class="ycdl_msg" v-for="(item,index) in 3" :key="index">
					<view class="ycdl_title flex">
						<image src="../../static/jnImage/powerPage/clock.png" mode=""></image>
						<text>11月22日</text>
					</view>
					<view class="ycdl_data">
						<uni-row class="ycdl_data_row">
							<uni-col :span="12" v-for="(item,index) in powerNowData" :key="index">
								<view class="ycdl_data_col flex">
									<view class="ycdl_data_col_left">
										<text>{{item.name}}</text>
									</view>
									<view class="ycdl_data_col_right flex justify-between">
										<text>{{item.inPower}}</text>
										<text>MW</text>
									</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
			<view class="rdldb" v-if="powerTab === 'DL'">
				<view class="rdldb_title flex justify-center">
					<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""></image>
					<text>日发电量</text>
				</view>
				<view class="qiun-charts">
					<qiun-data-charts type="column" :opts="optsDay" :chartData="chartDataDay" />
				</view>
				<view class="rdldb_title flex justify-center">
					<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""></image>
					<text>月发电量</text>
				</view>
				<view class="qiun-charts">
					<qiun-data-charts type="column" :opts="optsMonth" :chartData="chartDataMonth" />
				</view>
			</view>
			<view class="xsfsgl" v-else>
				<view class="xsfsgl_title flex justify-center">
					<image src="../../static/jnImage/powerPage/72clock.png" mode=""></image>
					<text>72小时风速功率</text>
				</view>
				<view class="qiun-chartsLine">
					<qiun-data-charts type="mix" :opts="optsLine" :chartData="chartDataLine" />
				</view>
			</view>
		</view>
		<station-bar ref="stationBar"></station-bar>
	</view>
</template>

<script>
	import stationBar from '../common/stationTab.vue'
	import {
		electricityStatisticsApi,
		statisticsHisdataApi
	} from '../../api/power.js'
	import {
		bulletinappBulletinApi
	} from '../../api/report.js'
	var uChartsInstance = {};
	export default {
		onLoad: function(e) {

		},
		components: {
			stationBar
		},
		data() {
			return {
				stationName: '',
				stationWpid: '',
				stationTab: '',
				powerTab: 'DL',
				yearTab: 'month',
				powerTabData: [],
				yearData: [],
				powerProgressData: [],
				powerNowData: [],
				chartDataDay: {},
				chartDataMonth: {},
				chartDataLine: {},
				optsDay: {},
				optsMonth: {},
				optsLine: {},
			}
		},
		created() {
			this.stationName = uni.getStorageSync('stationName')
			this.stationWpid = uni.getStorageSync('stationWpid')
			this.getReportData()
			this.powerTabData = [{
					nameZN: '电量',
					nameEN: 'DL',
					showColor: true
				},
				{
					nameZN: '预测',
					nameEN: 'YC',
					showColor: false

				}
			]
			this.yearData = [{
					nameZN: '月',
					nameEN: 'month',
					showColor: true
				},
				{
					nameZN: '年',
					nameEN: 'year',
					showColor: false

				}
			]

			this.powerNowData = [{
					type: 'wind',
					inPower: 961,
					allPower: 1865,
					name: '预测电量'
				},
				{
					type: 'wind',
					inPower: 852,
					allPower: 1865,
					name: '实发电量'
				}
			]
		},
		mounted() {
			this.$refs.stationBar.showTab = '电量预测'
			// this.getPowerBar()
			this.getStationDayPowerData()
			this.getStationMonthPowerData()
		},
		methods: {
			back() {
				this.$tab.switchTab('/pages/home/index')
			},
			stationTabXY(it) {
				this.stationTab = it
			},
			// 获取场站日发电量
			getStationDayPowerData() {
				let that = this
				let params = {
					wpid: that.stationWpid
				}
				statisticsHisdataApi(params).then(res => {
					if (res && res.data) {
						that.getPowerBar('day', res.data.data)
					}
				})
			},
			// 获取场站月发电量
			getStationMonthPowerData() {
				let that = this
				let params = {
					wpId: that.stationWpid,
					timetype: 'month',
					year: new Date().getFullYear()
				}
				electricityStatisticsApi(params).then(res => {
					if (res && res.data) {
						that.getPowerBar('month', res.data.value)
					}
				})
			},
			getPowerBar(type, values) {
				let opts = {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						axisLineColor: "#A49EAC",
						fontColor: "#A49EAC",
						fontSize: 10,
						marginTop: 5,
						titleFontColor: "#A49EAC",
						titleFontSize: 10,
						titleOffsetY: -18
					},
					yAxis: {
						showTitle: true,
						data: [{
							min: 0,
							fontColor: "#A49EAC",
							title: "(万kwh)",
							titleFontColor: "#A49EAC",
							titleFontSize: 10
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 15,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}

				let proColor = ['#6C4B9E', '#323A97', '#4951B2', '#4287FF', '#3CB8FE', '#1AA7B5', '#5183B6', '#9F65C1',
					'#766FF1', '#4951B2',
				]
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				if (type === 'day') {
					let valData = []
					if (values.length === 0) {
						valData = [{
							rfdldb: 250000,
							recordDate: '2023-12-05'
						}]
					} else {
						valData = values
					}
					this.dayBarData(opts, proColor, valData)
				} else if (type === 'month') {
					this.monthBarData(opts, proColor, values)
				}

			},
			dayBarData(opts, proColor, values) {
				let xAxis = []
				let series = []
				values.forEach((item, index) => {
					xAxis.push(item.recordDate.substring(5))
					let obj = {
						color: '',
						name: '',
						textSize: 10,
						textColor: "#A49EAC",
						value: item.rfdldb / 1000
					}
					proColor.forEach((it, idx) => {
						if (index.toString().length > 1) {
							obj.color = proColor[index.toString().slice(-1)]
						} else {
							obj.color = proColor[index]
						}
					})
					series.push(obj)
				})
				let res = {
					categories: xAxis,
					series: [{
						name: '日发电量',
						textColor: "#FFFFFF",
						textSize: 12,
						data: series
					}]
				};
				this.optsDay = opts
				this.chartDataDay = JSON.parse(JSON.stringify(res));
			},
			monthBarData(opts, proColor, values) {
				let xAxis = []
				let series = []
				values.forEach((item, index) => {
					xAxis.push((index + 1) + '月')
					let obj = {
						color: '',
						name: '',
						textSize: 10,
						textColor: "#A49EAC",
						value: item.sjdl
					}
					proColor.forEach((it, idx) => {
						if (index.toString().length > 1) {
							obj.color = proColor[index.toString().slice(-1)]
						} else {
							obj.color = proColor[index]
						}
					})
					series.push(obj)
				})
				let res = {
					categories: xAxis,
					series: [{
						name: '实发电量',
						textColor: "#FFFFFF",
						textSize: 12,
						data: series
					}]
				};
				opts.xAxis.title = '月'
				this.optsMonth = opts
				this.chartDataMonth = JSON.parse(JSON.stringify(res));
			},
			getLineBar() {
				let opts = {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: true
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: "#A49EAC",
						fontColor: "#A49EAC",
						fontSize: 10,
						marginTop: 5
					},
					yAxis: {
						showTitle: true,
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						data: [{
								position: "left",
								title: "折线",
								fontColor: "#A49EAC",
								titleFontColor: "#A49EAC",
								titleFontSize: 10
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "点",
								textAlign: "left",
								fontColor: "#A49EAC",
								titleFontColor: "#A49EAC",
								titleFontSize: 10
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				}

				let proColor = ['#6C4B9E', '#323A97', '#4951B2', '#4287FF', '#3CB8FE', '#1AA7B5', '#5183B6', '#9F65C1',
					'#766FF1', '#4951B2',
				]
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

				let res = {
					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
					series: [{
							name: "折线",
							type: "line",
							color: "#2fc25b",
							data: [150, 186, 205, 155, 96, 84]
						},
						{
							name: "折线",
							type: "line",
							color: "#2fc25b",
							data: [120, 140, 105, 170, 95, 160]
						},
						{
							name: "点",
							index: 2,
							type: "point",
							color: "#f04864",
							data: [100, 80, 125, 150, 112, 132]
						}
					]
				};
				this.optsLine = opts
				this.chartDataLine = JSON.parse(JSON.stringify(res));
			},
			changePowerTab(item) {
				this.powerTabData.forEach(it => {
					it.showColor = false
					if (it.nameEN === item.nameEN) {
						item.showColor = true
						this.powerTab = it.nameEN
					}
				})
				if (this.powerTab === 'DL') {
					this.getPowerBar()
				} else {
					this.getLineBar()
				}
			},
			changeYearTab(item) {
				this.yearData.forEach(it => {
					it.showColor = false
					if (it.nameEN === item.nameEN) {
						item.showColor = true
						this.yearTab = it.nameEN
					}
				})
			},
			showProgress(item, index) {
				let indexX = index
				if (index > 9) {
					indexX = index - 9
				}
				let proColor = ['#6C4B9E', '#323A97', '#4951B2', '#4287FF', '#3CB8FE', '#1AA7B5', '#5183B6', '#9F65C1',
					'#766FF1'
				]
				let pro = ((item.inPower / item.allPower).toFixed(2)) * 100 + '%'
				let showColor = proColor[indexX]
				let ss = `width: ${pro};background: ${showColor}`
				return ss
			},
			getReportData() {
				let that = this
				bulletinappBulletinApi({
					wpId: that.stationWpid
				}).then(res => {
					if (res && res.data) {
						that.reportDataAll = res.data
						let datas = res.data
						that.powerProgressData = [{
								type: 'wind',
								inPower: datas['月发电量'],
								allPower: datas['月计划发电量'],
								name: '月发电完成率'
							},
							{
								type: 'wind',
								inPower: datas['年发电量'],
								allPower: datas['年计划发电量'],
								name: '年发电完成率'
							}
						]
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.stationpower {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.box-bg {
			width: 100vw;
			padding: 0;

			.uni-navbar {
				.uni-navbar__content {
					padding: 5px 0;
					height: 50px;
				}
			}
		}

		.power_main {
			padding: 25px;
			// margin: 20px 0;

			.power_tab {
				text {
					display: inline-block;
					width: 80px;
					height: 25px;
					border: 1px solid #4287FF;
					text-align: center;
					color: #4287FF;
					line-height: 25px;
					letter-spacing: 2px;
				}
			}

			.fdwcl {
				.fdwcl_title {
					width: 130px;
					height: 45px;
					padding-left: 10px;
					margin-top: 10px;
					background: linear-gradient(90deg, #333976, transparent);
					align-items: center;

					image {
						width: 24px;
						height: 22px;
					}

					text {
						margin-left: 10px;
						font-size: 16px;
						color: #fff;
					}
				}

				.yearTab {
					width: 80px;
					height: 25px;
					border-radius: 20px;
					background: #0B143E;
					margin-top: 20px;

					text {
						display: inline-block;
						width: 40px;
						height: 25px;
						border-radius: 20px;
						text-align: center;
						color: #4287FF;
						line-height: 25px;
					}
				}

				.fdwcl_DataAll {
					margin-top: 10px;

					.fdwcl_Data {
						.fdwcl_Data_1 {
							image {
								width: 18px;
								height: 18px;
							}

							text {
								margin-left: 5px;
								font-size: 28upx;
								color: #A49EAC;
								position: relative;
								top: 0px;
							}
						}

						.fdwcl_Data_2 {
							text {
								font-size: 32upx;
								color: #A49EAC;
							}
						}

						.fdwcl_Data_3 {
							text {
								font-size: 28upx;
								color: #A49EAC;
							}
						}
					}

					.fdwcl_Data_msg {
						width: 100%;
						height: 20px;
						border-radius: 5px;
						background: #0B143E;

						.show_msg {
							height: 20px;
							background: #6C4B9E;
							border-radius: 5px 0 0 5px;
						}
					}
				}
			}

			.rdldb {
				padding-bottom: 20px;

				.rdldb_title {
					width: 130px;
					height: 45px;
					padding-left: 10px;
					margin-top: 10px;
					background: linear-gradient(90deg, #333976, transparent);
					align-items: center;

					image {
						width: 24px;
						height: 22px;
					}

					text {
						margin-left: 10px;
						font-size: 16px;
						color: #fff;
					}
				}

				.qiun-charts {
					width: 100%;
					height: 300px;
					margin: 10px 0;
				}
			}

			.ycdl {
				margin-top: 10px;

				.ycdl_tits {
					width: 160px;
					height: 45px;
					padding-left: 10px;
					margin-top: 10px;
					background: linear-gradient(90deg, #333976, transparent);
					align-items: center;

					image {
						width: 24px;
						height: 22px;
					}

					text {
						margin-left: 10px;
						font-size: 16px;
						color: #fff;
					}
				}

				.ycdl_station {

					.ycdl_station_row {
						margin: 10px 0;

						.ycdl_station_col {
							height: 65px;
							width: 95%;
							background-color: #2E336D;

							.ycdl_data_col_top {
								height: 40px;

								text {
									font-size: 28upx;
									margin-left: 10px;
								}

								text:nth-of-type(1) {
									color: #fff;
									position: relative;
									top: 8px;
									font-size: 36upx;
								}

								text:nth-of-type(2) {
									color: #6274A1;
									position: relative;
									top: 18px;
								}
							}

							.ycdl_data_col_bot {
								height: 25px;
								background: #1AA7B5;

								image {
									width: 15px;
									height: 15px;
									position: relative;
									top: 5px;
									left: 5px;
								}

								text {
									font-size: 28upx;
									color: #fff;
									margin-left: 10px;
									line-height: 25px;
								}
							}
						}
					}
				}

				.ycdl_msg {
					.ycdl_title {
						image {
							width: 15px;
							height: 15px;
							position: relative;
							top: 3px;
						}

						text {
							font-size: 32upx;
							color: #676D9C;
							margin-left: 10px;
						}
					}

					.ycdl_data {
						margin-top: 5px;

						.ycdl_data_row {
							.ycdl_data_col {
								width: 98%;
								height: 20px;
								margin-bottom: 5px;
								background: #2E336D;
								border-radius: 5px;

								.ycdl_data_col_left {
									width: 50%;
									height: 20px;
									color: #fff;
									font-size: 30upx;
									background: #3F4572;
									border-radius: 5px;

									text {
										margin-left: 5px;
									}
								}

								.ycdl_data_col_right {
									height: 20px;
									color: #fff;
									font-size: 32upx;
									width: 48%;

									text:nth-of-type(1) {
										margin-left: 5px;
										width: 50%;
										font-size: 32upx;
										color: #fff;
										position: relative;
										top: 3px;
									}

									text:nth-of-type(2) {
										font-size: 22upx;
										color: #96B5D5;
										position: relative;
										top: 4px;
									}
								}
							}
						}
					}
				}
			}

			.xsfsgl {
				padding-bottom: 20px;

				.xsfsgl_title {
					width: 160px;
					height: 45px;
					padding-left: 10px;
					margin-top: 10px;
					background: linear-gradient(90deg, #333976, transparent);
					align-items: center;

					image {
						width: 24px;
						height: 22px;
					}

					text {
						margin-left: 10px;
						font-size: 16px;
						color: #fff;
					}
				}

				.qiun-chartsLine {
					width: 100%;
					height: 300px;
					margin: 10px 0;
				}
			}
		}

	}
</style>