shanxi_control/src/components/focus/PhotoelectricDetailPages.vue

<template>
	<el-dialog width="55%" @closed="closed()" :show-close="false" class="my-info-dialog">
		<template #title>
			<div class="showTitle">
				<img class="titleImg" src="../../assets/img/controlcenter/daraTrue.png" alt="">
				<div class="titles">{{stationName}}</div>
				<!-- <div class="icon">(麻黄山)</div> -->
			</div>
		</template>
		<div class="body">
			<div class="dataList">
				<div class="data">
					<div class="name">{{data.PowerSet.name}}：</div>
					<div class="num">{{data.PowerSet?.value}}</div>
					<div class="unit">MW</div>
				</div>
				<div class="data">
					<div class="name">{{data.TheoryPower.name}}：</div>
					<div class="num">{{data.TheoryPower?.value}}</div>
					<div class="unit">MW</div>
				</div>
				<div class="data">
					<div class="name">{{data.AgcLower.name}}：</div>
					<div class="num">{{data.AgcLower?.value}}</div>
					<div class="unit">MW</div>
				</div>
				<div class="data">
					<div class="name">{{data.ActualPower.name}}：</div>
					<div class="num">{{data.ActualPower?.value}}</div>
					<div class="unit">MW</div>
				</div>
				<div class="data">
					<div class="name">{{data.AgcUp.name}}：</div>
					<div class="num">{{data.AgcUp?.value}}</div>
					<div class="unit">MW</div>
				</div>
				<div class="data">
					<div class="name">{{data.ForecastPower.name}}：</div>
					<div class="num">{{data.ForecastPower?.value}}</div>
					<div class="unit">MW</div>
				</div>
			</div>
			<div class="condition">
				<div class="status">
					<div class="name">{{data.AgcIn.name}}：</div>
					<img v-if="data.AgcIn.value === 0" class="statusIcon"
						src="../../assets/img/controlcenter/daraTrue.png">
					<img v-else-if="data.AgcIn.value === 1" class="statusIcon"
						src="../../assets/img/controlcenter/dataFalse.png">
					<div v-else-if="data.AgcIn.value === ''">
						暂无数据
					</div>
				</div>
				<div class="status">
					<div class="name">{{data.AgcFar.name}}：</div>
					<img v-if="data.AgcFar.value === 0" class="statusIcon"
						src="../../assets/img/controlcenter/daraTrue.png">
					<img v-else-if="data.AgcFar.value === 1" class="statusIcon"
						src="../../assets/img/controlcenter/dataFalse.png">
					<div v-else-if="data.AgcFar.value === ''">
						暂无数据
					</div>
				</div>
				<div class="status">
					<div class="name">{{data.SumLock.name}}：</div>
					<img v-if="data.SumLock.value === 0" class="statusIcon"
						src="../../assets/img/controlcenter/daraTrue.png">
					<img v-else-if="data.SumLock.value === 1" class="statusIcon"
						src="../../assets/img/controlcenter/dataFalse.png">
					<div v-else-if="data.SumLock.value === ''">
						暂无数据
					</div>
				</div>
				<div class="status">
					<div class="name">{{data.SubLock.name}}：</div>
					<img v-if="data.SubLock.value === 0" class="statusIcon"
						src="../../assets/img/controlcenter/daraTrue.png">
					<img v-else-if="data.SubLock.value === 1" class="statusIcon"
						src="../../assets/img/controlcenter/dataFalse.png">
					<div v-else-if="data.SubLock.value === ''">
						暂无数据
					</div>
				</div>
			</div>
			<!-- <button @click='ChangeColors()'>测试按钮</button> -->
			<!-- <div id="main" class="echartsBox"></div> -->
			<MultipleLineChart ref="multipleLineChart" height="400px" :units="powerLineChartData.units" :list="powerLineChartData.value"
				 :showLegend="true" />
		</div>
	</el-dialog>
</template>

<script>
	// import UniformCodes from "../../assets/script/UniformCodes";
	// import { config } from '../../config';
	// import axios from 'axios';
	// import BackgroundData from "../../assets/script/BackgroundData"
	import MultipleLineChart from "./multiple-line-chart.vue";
	import dayjs from 'dayjs'
	export default {
		components: {
			MultipleLineChart
		},
		props: {
			stationName: {
				type: String,
				default: ''
			},
			data: {
				type: Array
			},
		},
		data() {
			return {
				chartData: {
					units: [""],
					value: [],
				},
				colors: ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"],
				timeData: [],
				PowerSet: [],
				ActualPower: [],
				index: 0,
				powerLineChartData: {},
			};
		},
		methods: {
			closed() {
				//勿删，传递关闭方法
			},
			ChangeColors() {
				this.colors = ["#aa2116", "#fcaf17"]
			},
			initData(PowerSet, ActualPower) {
				// this.chartData.units = ["(MW)", "(MW)"];
				this.chartData.value[0] = {
					title: "有功设定限值(MW)",
					yAxisIndex: 0,
					value: []
				};
				this.chartData.value[1] = {
					title: "实发有功(MW)",
					yAxisIndex: 0,
					value: []
				}
				PowerSet.forEach(item => {
					this.chartData.value[0].value.push({
						text: dayjs(item.ts).format('hh:mm'),
						value: parseFloat((item.doubleValue).toFixed(2))
					})
				})
				ActualPower.forEach(item => {
					this.chartData.value[1].value.push({
						text: dayjs(item.ts).format('hh:mm'),
						value: parseFloat((item.doubleValue).toFixed(2))
					})
				})
				this.powerLineChartData = this.chartData;
				this.$refs.multipleLineChart.initChart(this.chartData)
			}
		},
	};
</script>
<style scoped>
	.echartsBox {
		width: 64rem;
		height: 220px;
		overflow: hidden;
	}

	.el-dialog__header {
		background-color: #000000;
	}

	.showTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: -10px;
		font-size: 18px;
		color: #FFFFFF;
	}

	.titleImg {
		width: 16px;
		height: 16px;
		margin-right: 13px;
	}

	.icon {
		font-size: 12px;
		margin-left: 10px;
		margin-top: 5px;
	}

	.body {
		background-color: black;
		width: 100%;
		margin-top: -30px;
		/* height: 200px; */
	}

	.dataList {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 27px;
	}

	.data {
		width: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 22px;
	}

	.name {
		width: 40%;
		display: flex;
		flex-direction: row-reverse;
		font-size: 12px;
		color: #FFFFFF;
	}

	.num {
		margin-left: 59px;
		font-size: 16px;
		color: #05BB4C;
		min-width: 40px;
	}

	.unit {
		font-size: 16px;
		color: #FFFFFF;
		margin-left: 20px;
	}

	.condition {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20px;
		border-bottom: 1px solid #3D3D3D;
		padding-bottom: 10px;
	}

	.status {
		width: 25%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.statusIcon {
		width: 14px;
		height: 14px;
		margin-left: 8px;
	}
</style>