jn_app/pages/power/index.vue

<template>
	<view class="power">
		<company-header></company-header>
		<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" v-if="item.type==='wind'" mode="">
							</image>
							<image src="../../static/jnImage/indexPage/powerIcon.png" v-else 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 powerFulterData" :key="index">
					<view class="ycdl_title flex">
						<image src="../../static/jnImage/powerPage/clock.png" mode=""></image>
						<text>{{item.date}}</text>
						<text>预测电量</text>
					</view>
					<view class="ycdl_data">
						<uni-row class="ycdl_data_row">
							<uni-col :span="12" v-for="(itv,index) in item.values" :key="index">
								<view class="ycdl_data_col flex">
									<view class="ycdl_data_col_left">
										<text>{{showStationZH(itv.windpowerstationId)}}</text>
									</view>
									<view class="ycdl_data_col_right flex justify-between">
										<text>{{itv.dayPowerForecast}}</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>24小时功率曲线</text>
				</view>
				<view class="qiun-chartsLine">
					<qiun-data-charts type="mix" :opts="optsLine" :chartData="chartDataLine" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bulletinappCompanyelectricityApi,
		bulletinappForecastApi,
		cockpitPowercurve24Api
	} from '../../api/power.js'
	import {
		windPowerDataApi
	} from '../../api/common.js'
	import companyHeader from '../common/companyHeader.vue'
	var uChartsInstance = {};
	export default {
		onLoad: function() {},
		components: {
			companyHeader
		},
		data() {
			return {
				powerTab: 'DL',
				yearTab: 'month',
				powerTabData: [],
				yearData: [],
				powerProgressData: [],
				chartData: {},
				chartDataLine: {},
				opts: {},
				optsLine: {},
				windData: [],
				powerData: [],
				powerFulterData: []
			}
		},
		created() {
			this.stationData("0", "-1");
			this.stationData("0", "-2");
			this.powerTabData = [{
					nameZN: '电量',
					nameEN: 'DL',
					showColor: true
				},
				{
					nameZN: '预测',
					nameEN: 'YC',
					showColor: false

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

				}
			]
		},
		methods: {
			//获取公司电量
			getCompanyData() {
				let that = this
				bulletinappCompanyelectricityApi().then(res => {
					if (res && res.data) {
						let allData = []
						let allSation = [...that.windData, ...that.powerData]
						allSation.forEach(item => {
							for (let i in res.data) {
								if (i === item.wpid) {
									let obj = res.data[i]
									obj.wpname = item.wpname
									obj.wpid = item.wpid
									allData.push(obj)
								}
							}
						})
						allData.forEach(item => {
							//公司电量月年数据
							let obj = {
								type: item.wpid.indexOf('_FDC') > -1 ? 'wind' : 'power',
								name: item.wpname
							}
							if (that.yearTab === 'month') {
								obj.inPower = item.yfdl
								obj.allPower = item.yjhdl
							} else if (that.yearTab === 'year') {
								obj.inPower = item.nfdl
								obj.allPower = item.njhdl
							}
							that.powerProgressData.push(obj)
						})
						//公司电量日数据
						that.getPowerBar(allData)
					}
				})
			},
			async stationData(type1, type2) {
				await windPowerDataApi({
						company: type1,
						type: type2
					})
					.then((res) => {
						if (Object.values(res.data.data).length) {
							if (res.data.data.powerVos.length > 0) {
								res.data.data.powerVos.forEach(item => {
									let obj = {
										wpname: item.wpname,
										wpid: item.wpid
									}
									if (type2 === "-1") {
										this.windData.push(obj)
									} else {
										this.powerData.push(obj)
									}
								})
								if (type2 === "-2") {
									this.getCompanyData()
								}
							}

						} else {
							this.windData = [];
							this.powerData = [];
						}
					});
			},
			getPowerBar(allData) {
				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,
						rotateAngle: 90,
						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 = []
				allData.forEach((item, index) => {
					xAxis.push(item.wpname)
					let obj = {
						color: '',
						name: '',
						textSize: 10,
						textColor: "#A49EAC",
						value: item.rjhdl.toFixed(2)
					}
					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: 6,
						data: series
					}]
				};
				this.opts = opts
				this.chartData = JSON.parse(JSON.stringify(res));
			},

			//获取公司预测电量
			getCompanyEleData() {
				let that = this
				bulletinappForecastApi({
					type: 0,
					wpId: '1'
				}).then(res => {
					if (res && res.data) {
						for (let i in res.data) {
							let obj = {
								date: res.data[i][0].recordDate,
								values: res.data[i]
							}
							that.powerFulterData.push(obj)
						}
					}
				})
			},
			showStationZH(stationId) {
				let allStation = [...this.windData, ...this.powerData]
				let str = ''
				allStation.forEach(item => {
					if (item.wpid === stationId) {
						str = item.wpname
					}
				})
				return str
			},
			// 获取公司24小时功率预测
			getcockpitPowercurve() {
				let that = this
				cockpitPowercurve24Api({
					wpId: 'KGDL_FGS0'
				}).then(res => {
					if (res && res.data) {
						this.getLineBar(res.data)
					}
				})
			},
			getLineBar(values) {
				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,
						rotateLabel: 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: "MW",
							fontColor: "#A49EAC",
							titleFontColor: "#A49EAC",
							titleFontSize: 10
						}]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				}

				let sjglArr = []
				let ycglArr = []
				let xAxisArr = []
				if (values.length > 0) {
					values.forEach((item, index) => {
						xAxisArr.push(this.changTimeSV(index + 1))
						sjglArr.push(item.sjgl)
						ycglArr.push(item.bzgl)
					})
				}

				let res = {
					categories: xAxisArr,
					series: [{
							name: "实际功率",
							type: "line",
							color: "#25a1ff",
							data: sjglArr
						},
						{
							name: "预测功率",
							type: "line",
							color: "#bc39aa",
							data: ycglArr
						}
					]
				};
				this.optsLine = opts
				this.chartDataLine = JSON.parse(JSON.stringify(res));
			},
			changTimeSV(date) {
				let str = ''
				if (date < 10) {
					str = '0' + date + ':00'
				} else {
					str = date + ':00'
				}
				return str
			},
			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.getCompanyData()
				} else {
					this.getCompanyEleData()
					this.getcockpitPowercurve()
				}
			},
			changeYearTab(item) {
				this.powerProgressData = []
				this.yearData.forEach(it => {
					it.showColor = false
					if (it.nameEN === item.nameEN) {
						item.showColor = true
						this.yearTab = it.nameEN
					}
				})
				this.getCompanyData()
			},
			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
				if (pro > 100) {
					pro = '100%'
				} else {
					pro = pro + '%'
				}
				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;

		.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, 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_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;
										width: 100%;
										display: inline-block;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
									}
								}

								.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>