jn_sis_zhfx/src/views/NewPages/alarm-center-yjfx.vue

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <panel :title="'日雷达图'" class="radar-panel" :icon="'svg-wind-site'">
          <div class="wind-info">
            <dual-pie-chart
              height="40vh"
              width="55vh"
              :innerData="rzdfsData"
              :outerData="rzdfsData"
            />
          </div>
        </panel>
      </el-col>
    </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="30vh"
              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="30vh"
              width="55vh"
              :innerData="nzdfsData"
              :outerData="nzdfsData"
            />
          </div>
        </panel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import panel from "@/components/coms/panel/panel.vue";
import DualPieChart from "@/components/chart/pie/dual-pie-chart.vue";
import api from "@api/wisdomOverhaul/reliability/index.js";
export default {
  components: {
    panel,
    DualPieChart,
  },
  props: {
    date: {
      type: String,
      default: "2021-06-06",
    },
    wpid: {
      type: String,
      default: "GJY_FDC",
    },
  },
  data() {
    return {
      rzdfsData: [],
      yzdfsData: [],
      nzdfsData: [],
    };
  },
  created() {
    this.searchData();
  },
  methods: {
    searchData() {


      api
        .radarGzfx({
         stId: this.wpid,
          Date: this.date,
        })
        .then((res) => {
             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]),
            });
          });
          this.nzdfsData = yearData;
          this.yzdfsData = monthData;
          this.rzdfsData = dayData;
        });



    //   var that = this;
    //   that.API.requestData({
    //     method: "GET",
    //     subUrl: "radar/gzfx",
    //     showLoading: true,
    //     data: {
    //       stId: that.wpid,
    //       Date: that.date,
    //     },
    //     success(res) {
    //       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>

<style>
</style>