|
@@ -1,32 +1,28 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-row>
|
|
|
- <el-col :span="14">
|
|
|
+ <el-col :span="24">
|
|
|
<panel :title="'日雷达图'" class="radar-panel" :icon="'svg-wind-site'">
|
|
|
<div class="wind-info">
|
|
|
- <radar-chart :width="'100%'" :height="'729px'" :value="rzdfsData" />
|
|
|
+ <dual-pie-chart height="40vh" width='55vh' :innerData="rzdfsData" :outerData="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-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <panel :title="'月雷达图'" class="radar-panel" :icon="'svg-wind-site'">
|
|
|
+ <div class="wind-info">
|
|
|
+ <dual-pie-chart height="32vh" width='55vh' :innerData="yzdfsData" :outerData="yzdfsData" />
|
|
|
+ </div>
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <panel :title="'年雷达图'" class="radar-panel" :icon="'svg-wind-site'">
|
|
|
+ <div class="wind-info">
|
|
|
+ <dual-pie-chart height="32vh" width='55vh' :innerData="nzdfsData" :outerData="nzdfsData" />
|
|
|
+ </div>
|
|
|
+ </panel>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
@@ -34,11 +30,11 @@
|
|
|
|
|
|
<script>
|
|
|
import panel from "@/components/coms/panel/panel.vue";
|
|
|
- import RadarChart from "@/components/chart/radar/radar-chart.vue";
|
|
|
+ import DualPieChart from "@/components/chart/pie/dual-pie-chart.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
panel,
|
|
|
- RadarChart
|
|
|
+ DualPieChart
|
|
|
},
|
|
|
props:{
|
|
|
date: {
|
|
@@ -52,18 +48,9 @@
|
|
|
},
|
|
|
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: "",}, ],
|
|
|
- },
|
|
|
+ rzdfsData: [],
|
|
|
+ yzdfsData: [],
|
|
|
+ nzdfsData: [],
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -74,31 +61,41 @@
|
|
|
var that = this;
|
|
|
that.API.requestData({
|
|
|
method: "GET",
|
|
|
- subUrl: "radar/gzfx",
|
|
|
+ subUrl: "radar/yjfx",
|
|
|
showLoading:true,
|
|
|
data:{
|
|
|
- stId:that.wpid,
|
|
|
- Date:that.date
|
|
|
+ stationid:that.wpid,
|
|
|
+ date:that.date
|
|
|
},
|
|
|
success(res) {
|
|
|
- let key = ['变桨','变频器','齿轮箱','发电机','风机其它','滑环','机舱加热','控制','冷却','偏航','液压','主轴'];
|
|
|
- that.nzdfsData = {
|
|
|
- indicator:key,
|
|
|
- data:[{value:Object.values(res.data[0][0])}]
|
|
|
- }
|
|
|
- that.yzdfsData = {
|
|
|
- indicator:key,
|
|
|
- data:[{value:Object.values(res.data[1][0])}]
|
|
|
- }
|
|
|
- that.rzdfsData = {
|
|
|
- indicator:key,
|
|
|
- data:[{value:Object.values(res.data[2][0])}]
|
|
|
- }
|
|
|
+ let key = ['测风系统','传动链','发电机','变桨系统','齿轮箱','液压系统','偏航系统','机舱','其它','塔底柜'];
|
|
|
+ let year = Object.values(res.data[0][0]),
|
|
|
+ month = Object.values(res.data[1][0]),
|
|
|
+ day = Object.values(res.data[2][0]);
|
|
|
+ let yearData = [],
|
|
|
+ monthData = [],
|
|
|
+ dayData = [];
|
|
|
+ key.forEach((ele,index)=>{
|
|
|
+ yearData.push({
|
|
|
+ name: ele,
|
|
|
+ value: parseFloat(year[index])
|
|
|
+ })
|
|
|
+ monthData.push({
|
|
|
+ name: ele,
|
|
|
+ value: parseFloat(month[index])
|
|
|
+ })
|
|
|
+ dayData.push({
|
|
|
+ name: ele,
|
|
|
+ value: parseFloat(day[index])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ that.nzdfsData = yearData;
|
|
|
+ that.yzdfsData = monthData;
|
|
|
+ that.rzdfsData = dayData;
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
};
|
|
|
</script>
|
|
|
|