hb_sis_zhfx/src/views/Decision/dayinfo.vue

<template>
	<div class="health-day-info">
		<div class="body">
			<div class="left">
				<div class="chart-body">
					<normal-radar-chart :height="'500px'" :value="radarValue" />
				</div>
				<div class="chart-body">
					<normal-radar-chart :height="'500px'" :value="radarValue" />
				</div>
			</div>
			<div class="left">
				<div class="header">
					<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 in tabs">
						<td class="white">{{item.name}}</td>
						<td class="white">{{item.windData1}}</td>
						<td class="white">{{item.windData2}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
	export default {
		components: {
			NormalRadarChart
		},
		props: {
			windNum: {
				type: String,
				default: '麻黄山24号风机',
			},
			windNum2: {
				type: String,
				default: '麻黄山2号风机',
			},
			radarValue: {
				type: Array,
				default: () => [{
					indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率", "复位及时率", "消缺及时率","状态转换率"],
					data: [{
						value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000],
						name:'adf'
					}],
				}],
			},
			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
				}],
			},
		},
	};
</script>

<style lang="less">
	.health-day-info {
		.header {
			display: flex;
			width: 100%;
			height: 40px;
			line-height: 40px;
			background: fade(@gray, 60);
			color: @white;

			.herder-info {
				flex: 1 0 25%;
				text-align: center;
				font-size: @fontsize-s;

				&:last-child {
					flex: 1 0 50%;
				}
			}
		}

		.body {
			display: flex;

			.left {
				flex: 0 0 50%;

				display: flex;
				flex-direction: column;

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

			.right {
				flex: 0 0 50%;
			}
		}
	}
</style>