PowerAnalysis_blue/src/views/economicsOperation/benchmarkingManagement/compontent/dayinfo.vue

<template>
	<div class="health-day-info">
		<div class="body">
			<div class="left">
				<div class="header">
					<div class="point left top"></div>
            		<div class="point right top"></div>
					<span class="herder-info">
						对标排名分析
					</span>
				</div>
				<div class="chart-body">
					<normal-radar-chart :height="'420px'" :value="radarValue" :title="[windNum, windNum2]" />
				</div>
			</div>
			<div class="left">
				<div class="header">
					<div class="point left top"></div>
            		<div class="point right top"></div>
					<span class="herder-info">
						基础指标
					</span>
				</div>
				<!-- <table class="table-form">
					<tr>
						<td class="white">指标</td>
						<td class="white">{{windNum}}</td>
						<td class="white">{{windNum2}}</td>
					</tr>
					<tr v-for="(item, index) in tabs" :key="index" >
						<td class="white">{{item.name}}</td>
						<td class="white">{{item.windData1}}</td>
						<td class="white">{{item.windData2}}</td>
					</tr>
				</table> -->
				<el-table :data="tabs" style="width:34vw" :cell-style="{ padding: '6px' }" :row-style="{ height: '4' }"
					stripe @selection-change="handleCurrentChange">
					<el-table-column align="center" prop="name" label="场站" width="200">
					</el-table-column>
					<el-table-column align="center" prop="windData1" :label="windNum">
					</el-table-column>
					<el-table-column align="center" prop="windData2" :label="windNum2">
					</el-table-column>
				</el-table>
			</div>

		</div>
		<div class="body">
			<div style="width: 100%;">
				<div class="header">
					<div class="point left top"></div>
            		<div class="point right top"></div>
					<span class="herder-info">
						损失电量分析
					</span>
				</div>
				<div class="chart-body">
					<multiple-bar-chart height="240px" :list="analyisDialog" :customerTooltip="true" @tooltip="tooltip"
						:units='["(万KWh)"]' />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import NormalRadarChart from "../../homePage/components/normal-radar-chart.vue";
import MultipleBarChart from "../../homePage/components/multiple-bar-chart.vue";
export default {
	components: {
		NormalRadarChart,
		MultipleBarChart
	},
	props: {
		windNum: {
			type: String,
			default: '',
		},
		windNum2: {
			type: String,
			default: '',
		},
		radarValue: {
			type: Array,
			default: () => [{
				indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率", "复位及时率", "消缺及时率", "状态转换率"],
				data: [{
					value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000]
				}],
			}],
		},
		tabs: {
			type: Array,
			default: () => [{
				name: "发电量",
				windData1: 1,
				windData2: 14
			}, {
				name: "故障损失电量",
				windData1: 2,
				windData2: 13
			}, {
				name: "检修损失电量",
				windData1: 3,
				windData2: 12
			}, {
				name: "性能未达标损失电量",
				windData1: 4,
				windData2: 11
			}, {
				name: "受累损失电量",
				windData1: 5,
				windData2: 10
			}, {
				name: "风能利用率",
				windData1: 6,
				windData2: 9
			}, {
				name: "故障损失率",
				windData1: 7,
				windData2: 8
			}, {
				name: "检修损失率",
				windData1: 8,
				windData2: 7
			}, {
				name: "弃风率",
				windData1: 9,
				windData2: 6
			}, {
				name: "性能损失率",
				windData1: 10,
				windData2: 5
			}, {
				name: "受累损失率",
				windData1: 11,
				windData2: 4
			}, {
				name: "复位及时率",
				windData1: 12,
				windData2: 3
			}, {
				name: "消缺及时率",
				windData1: 13,
				windData2: 2
			}, {
				name: "状态转换率",
				windData1: 14,
				windData2: 1
			}],
		},
		analyisDialog: {
			type: Array,
			default: () => [{
				title: "故障损失电量",
				yAxisIndex: 0,
				value: [11, 22]
			}, {
				title: "检修损失电量",
				yAxisIndex: 0,
				value: [11, 22]
			}, {
				title: "性能损失电量",
				yAxisIndex: 0,
				value: [11, 22]
			}, {
				title: "限电损失电量",
				yAxisIndex: 0,
				value: [11, 22]
			}, {
				title: "受累损失电量",
				yAxisIndex: 0,
				value: [11, 22]
			}]
		},
	},
	methods: {
		tooltip(param, callback) {
			var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];

			var result = param[0].axisValue;
			param.forEach((value, index) => {
				result += "<br />" +
					`<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
					value.seriesName + "：" + value.value;
			});
			callback(result);
			return true;
		},
	}
};
</script>

<style lang="less">
.health-day-info {
	.header {
		display: flex;
		width: 98%;
		height: 40px;
		line-height: 40px;
		border-top: 1px solid rgba(153, 153, 153, 0.5);
		color: #ffffff;
		position: relative;

		.herder-info {
			margin-left: 10px;
		}
	}

	.body {
		display: flex;

		.left {
			flex: 0 0 50%;

			display: flex;
			flex-direction: column;

			.chart-body {
				flex-grow: 1;
				display: flex;
				align-items: center;
				height: 43vh;
			}
		}

		.right {
			flex: 0 0 50%;
		}
	}
}

.point {
	width: 6px;
	height: 1px;
	background-color: #ffffff;
	position: absolute;

	&.left {
		left: 0;
	}

	&.right {
		right: 0;
	}

	&.top {
		top: -1px;
	}

	&.bottom {
		bottom: -1px;
	}
}
</style>