fd_dwgz_zhyw/src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue

<template>
  <div class="wind-body">
    <div class="table-wrapper">
      <el-table :data="tableData" size="mini" stripe width="100%" height="100%">
        <el-table-column
          v-for="(item, index) in tableHead"
          :label="item.label"
          :prop="item.prop"
          :key="index"
          header-align="center"
          :align="index == 0 ? 'center' : 'right'"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span
              style="cursor: pointer"
              v-if="item.prop == 'name'"
              @click.stop="rowClick(row, false)"
              >{{ row[item.prop] }}
            </span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="chart-wrapper"
      v-loading="chartLoading"
      element-loading-text="加载中..."
      element-loading-background="rgba(4, 12, 11, 0.8)"
    >
      <div class="left-chart">
        <lineCharts
          :unit="'m/s'"
          :windCurveValues="lineChart"
          :CurveTitle="chartName + '实时风速'"
          width="100%"
          :color="'#05bb4c'"
          height="100%"
          chartId="wind-fs"
        />
      </div>
      <div class="right-chart">
        <radarChart width="100%" height="100%" :list="radarChart" />
      </div>
    </div>
  </div>
</template>

<script>
import lineCharts from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/lineCharts.vue";
import radarChart from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/radar-chart.vue";
import dayjs from "dayjs";
import {
  getWindAnalysis,
  getWindAnalysisChart,
  getWindAnalysisRadarChart,
} from "@/api/monthlyPerformanceAnalysis.js";
export default {
  name: "Wind", //风资源分析
  components: { lineCharts, radarChart },
  props: {
    date: {
      type: String,
    },
  },
  data() {
    return {
      chartLoading: false,
      tableData: [],
      tableHead: [
        { prop: "name", label: "场站名称" },
        { prop: "pjfs", label: "平均风速(m/s)" },
        { prop: "zdfs", label: "最大风速(m/s)" },
        { prop: "zxfs", label: "最小风速(m/s)" },
        { prop: "pjfx", label: "平均风向" },
      ],
      chartName: "",
      lineChart: [],
      radarChart: [],
    };
  },
  created() {
    this.getData(true);
  },
  methods: {
    rowClick(row, flag) {
      console.log(row, flag);
      if (flag) {
        this.chartLoading = false;
      } else {
        this.chartLoading = true;
      }
      if (Object.keys(row).length) {
        this.chartName = row.name;
        this.getLineChart(row.wpid);
        this.getRadarChart(row.wpid);
      }
    },
    getData(val) {
      this.BASE.showLoading();
      getWindAnalysis(this.date).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data ? res.data : [];
          this.rowClick(this.tableData[0] || {}, val);
        }
      });
    },
    getLineChart(wpid) {
      getWindAnalysisChart({ Data: this.date, wpid }).then((res) => {
        if (res.code == 200) {
          this.lineChart = res.data
            ? res.data.map((item) => {
                return {
                  dateTime: dayjs(item.time).format("MM-DD HH:mm"),
                  value: item.value6,
                };
              })
            : [];
        }
        this.chartLoading = false;
        this.BASE.closeLoading();
      });
    },
    getRadarChart(wpid) {
      getWindAnalysisRadarChart({ Data: this.date, wpid }).then((res) => {
        if (res.code == 200) {
          this.radarChart =
            res.data && res.data[0].count ? res.data[0].count : [];
        }
        // this.chartLoading = false;
        // this.BASE.closeLoading();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wind-body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .table-wrapper {
    height: calc(100% - 390px - 20px);
    width: 100%;
    margin-bottom: 20px;
  }
  .chart-wrapper {
    height: 390px;
    display: flex;
    width: 100%;
    .left-chart {
      width: 65%;
      height: 100%;
    }
    .right-chart {
      width: 34%;
      height: 100%;
    }
  }
}
</style>