jn_app/pages/power/index.vue

<template>
	<view class="power">
		<view class="home_header">
			<view class="header_message">
				<image src="../../static/jnImage/indexPage/message.png"></image>
			</view>
			<view class="header_title">
				<image src="../../static/jnImage/loginPage/logo.png" mode=""></image>
				<text class="titleName">晋能新能源蒙东分公司</text>
			</view>
			<view class="header_more">
				<image src="../../static/jnImage/indexPage/more.png"></image>
			</view>
		</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="flex justify-between">
					<view class="fdwcl_title flex justify-center">
						<image src="../../static/jnImage/powerPage/powerTu.png" mode=""></image>
						<text>发电完成率</text>
					</view>
					<view class="yearTab">
						<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
							:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
					</view>
				</view>
				<view class="fdwcl_DataAll" v-for="(item,index) in powerProgressData" :key="index">
					<view class="fdwcl_Data flex justify-between">
						<view class="fdwcl_Data_1 flex">
							<image src="../../static/jnImage/indexPage/windIcon.png" mode=""></image>
							<text>{{item.inPower}}万kWh</text>
						</view>
						<view class="fdwcl_Data_2">
							<text>{{item.name}}</text>
						</view>
						<view class="fdwcl_Data_3">
							<text>{{item.allPower}}万kWh</text>
						</view>
					</view>
					<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_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>
						<text>预测电量</text>
					</view>
					<view class="ycdl_data">
						<uni-row class="ycdl_data_row">
							<uni-col :span="12" v-for="(item,index) in powerProgressData" :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="opts" :chartData="chartData" />
				</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>
	</view>
</template>

<script>
	// import * as echarts from 'echarts'
	// import uCharts from '../../components/u-charts/u-charts.js';
	// import qCharts from '../../components/u-charts/component.vue';
	var uChartsInstance = {};
	export default {
		onLoad: function() {},
		data() {
			return {
				powerTab: 'DL',
				yearTab: 'month',
				powerTabData: [],
				yearData: [],
				powerProgressData: [],
				chartData: {},
				chartDataLine: {},
				opts: {},
				optsLine: {},
			}
		},
		created() {
			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.powerProgressData = [{
						type: 'wind',
						inPower: 961,
						allPower: 1865,
						name: '宝龙山'
					},
					{
						type: 'wind',
						inPower: 852,
						allPower: 1865,
						name: '乌力吉'
					},
					{
						type: 'wind',
						inPower: 696,
						allPower: 1865,
						name: '浩日格吐'
					},
					{
						type: 'wind',
						inPower: 527,
						allPower: 1865,
						name: '开鲁'
					},
					{
						type: 'wind',
						inPower: 935,
						allPower: 1865,
						name: '景观'
					},
					{
						type: 'wind',
						inPower: 1022,
						allPower: 1865,
						name: '高力板'
					},
					{
						type: 'wind',
						inPower: 752,
						allPower: 1865,
						name: '书声'
					},
					{
						type: 'wind',
						inPower: 1520,
						allPower: 1865,
						name: '宝力根花'
					},
					{
						type: 'wind',
						inPower: 365.6,
						allPower: 1865,
						name: '振发'
					},
				]
		},
		onReady() {
			this.getPowerBar()
		},
		methods: {
			getPowerBar() {
				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
					},
					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',
				]
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

				let xAxis = []
				let series = []
				this.powerProgressData.forEach((item, index) => {
					xAxis.push(item.name)
					let obj = {
						color: '',
						name: '',
						textSize: 10,
						textColor: "#A49EAC",
						value: item.inPower
					}
					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: [{
						data: series
					}]
				};
				this.opts = opts
				this.chartData = 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
			},

		},
	}
</script>

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

	.power {
		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;

		.home_header {
			width: calc(100% -32px);
			display: flex;
			justify-content: space-between;
			height: 60px;
			padding-top: 16px;
			// position: fixed;

			.header_message {
				width: 15%;

				image {
					position: relative;
					top: 0px;
					left: 10px;
					width: 30px;
					height: 30px;
				}
			}

			.header_title {
				width: 70%;
				position: relative;
				left: 10px;

				image {
					width: 28px;
					height: 22px;
					position: relative;
					top: 5px;
				}

				.titleName {
					line-height: 20px;
					margin-left: 5px;
					font-size: 36upx;
					font-family: FZZhengHeiS-M-GB;
					font-weight: 600;
					letter-spacing: 2px;
					color: #fff;
				}
			}

			.header_more {
				width: 15%;
				position: relative;
				top: 5px;
				left: 10px;

				image {
					width: 30px;
					height: 20px;
				}
			}
		}

		.power_main {
			padding: 0 20px;

			.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, #202246);
					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, #202246);
					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_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, #202246);
					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>