hb_sis_zhfx/src/views/malfunctionDiagnose/yjfl.vue

<template>
	<div>
		<div class="action-bar">
			<div class="query mg-b-16">
				<div class="query-items">
					<div class="query-item">
						<div class="lable">风场：</div>
						<div class="search-input">
							<el-select v-model="wpvalue" clearable placeholder="请选择" popper-class="select">
								<el-option v-for="item in ChangZhan" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="query-item">
						<div class="lable">日期：</div>
						<div class="search-input">
							<el-date-picker v-model="myDate" type="date" placeholder="开始日期" popper-class="date-select"
					   value-format="YYYY-MM-DD"></el-date-picker>
						</div>
					</div>
				</div>
				<div class="query-actions">
					<button class="btn green" @click="searchData">搜索</button>
				</div>
			</div>
		</div>
		<el-row>
			<el-col :span="14">
				<panel :title="'日雷达图'" class="radar-panel" :icon="'svg-wind-site'">
					<div class="wind-info">
						<radar-chart :width="'100%'" :height="'729px'" :value="rzdfsData" />
					</div>
				</panel>
			</el-col>
			<el-col :span="10">
				<el-row>
					<el-col :span="24">
						<panel :title="'月雷达图'" class="radar-panel" :icon="'svg-wind-site'">
							<div class="wind-info">
								<radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
							</div>
						</panel>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<panel :title="'年雷达图'" class="radar-panel" :icon="'svg-wind-site'">
							<div class="wind-info">
								<radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
							</div>
						</panel>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import panel from "@/components/coms/panel/panel.vue";
	import RadarChart from "@/components/chart/radar/radar-chart.vue";
	export default {
		components: {
			panel,
			RadarChart
		},
		data() {
			return {
				rzdfsData: {
					indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
					data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
				},
				yzdfsData: {
					indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
					data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
				},
				nzdfsData: {
					indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
					data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
				},
				ChangZhan: [],
				wpvalue: '',
				myDate: ""
			}
		},
		created() {
			var that = this;
			that.API.requestData({
				method: "GET",
				baseURL: "http://10.155.32.4:9001/",
				subUrl: "benchmarking/wplist",
				success(res) {
					that.ChangZhan = res.data;
					that.wpvalue = res.data[0].id;
					let end = new Date();
					that.myDate = end.formatDate("yyyy-MM-dd");
					that.searchData();
				},
			});
		},
		methods: {
			searchData(){
				var that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "radar/yjfx",
					data:{
						stationid:that.wpvalue,
						date:that.myDate
					},
					success(res) {
						that.rzdfsData = {
							indicator:Object.keys(res.data[0].year),
							data:[{value:Object.values(res.data[0].year)}]
						}
						that.yzdfsData = {
							indicator:Object.keys(res.data[1].month),
							data:[{value:Object.values(res.data[1].month)}]
						}
						that.nzdfsData = {
							indicator:Object.keys(res.data[2].day),
							data:[{value:Object.values(res.data[2].day)}]
						}
					},
				});
			}
		},

	};
</script>

<style>
</style>