sis_zhfx/src/views/HealthControl/zhpj/dayinfo.vue

<template>
	<div class="health-day-info">
		<div class="header">
			<span class="herder-info" :width="800" v-for="item of gridDatas" :key="item">场站：{{ item.wpid }}</span>
			<span class="herder-info">基础指标</span>
		</div>
		<div class="body">
			<div class="left">
				<table class="table-form">
					<tr>
						<td class="white" v-for="item of gridDatas" :key="item">
							等级：{{ item.grade }}
						</td>
					</tr>
					<tr>
						<td class="white" v-for="item of gridDatas" :key="item">
							综合排名：{{ item.zpm }}
						</td>
					</tr>
				</table>

				<div class="chart-body">
					<normal-radar-chart :height="'500px'" :value="chartDatas" />
				</div>
			</div>
			<div class="left">
				<table class="table-form">
					<tr>
						<td class="white">指标</td>
						<td class="white" v-for="item of gridDatas" :key="item">
							{{ item.wpid }}
						</td>
						<td class="white" :colspan="gridDatas.length">排名</td>
						<td class="white" colspan="2">评分</td>
					</tr>
					<tr v-for="item of column" :key="item">
						<td class="white">{{ item.name }}</td>
						<td class="white" v-for="row of gridDatas" :key="row">
							{{ row[item.field] }}
						</td>
						<td class="white" v-for="row of gridDatas" :key="row">
							{{ row[item.rank] }}
						</td>
						<td class="white" v-for="row of gridDatas" :key="row">
							{{ row[item.score] ? row[item.score] : 0 }}
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	import NormalRadarChart from "../../../components/chart/radar/normal-radar-chart.vue";
	export default {
		components: {
			NormalRadarChart
		},
		props: {
			gridDatas: {},
			chartDatas: {},
			column: []
		},
		data() {
			return {
				value: "",
				radarValue: [{
					indicator: [
						"复位及时率(%)", "mttf", "缺陷下单及时率(%)", "缺陷验收及时率(%)", "设备利用小时", "限电损失率(%)", "性能损失率(%)",
						"综合场用电量", "状态转换及时率(%)"
					],
					data: [{
							value: [
								44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000,
								35000,
							],
							name: "NAME1",
						},
						{
							value: [
								35000, 44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200,
								20000,
							],
							name: "NAME2",
						},
					],
				}, ],
			};
		},
	};
</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>