jn_sis_zhfx/src/views/windAnalysis/tab3.vue

<template>
  <div class="draught-fan-list">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getLine(); }">
              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">线路：</div>
          <div class="search-input">
            <el-select v-model="lineId" clearable placeholder="请选择" popper-class="select">
              <el-option v-for="item in lineArray" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </div>
        </div>
        <div class="query-item">
					<div class="lable">日期：</div>
					<div class="search-input">
						<el-date-picker v-model="recorddate" type="date"
							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
						</el-date-picker>
					</div>
				</div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search">搜索</button>
      </div>
    </div>
    <NormalScatterChart width="97%" height="650px" :data="chartData" xTitle="风速(m/s)" yTitle="功率(万kW)" :showLegend="true" />
  </div>
</template>

<script>
import NormalScatterChart from "@com/chart/scatter/normal-scatter-chart.vue";
import apis from "@api/wisdomOverhaul/health/index.js";
import api from "@api/wisdomOverhaul/windResources/index.js";
export default {
  // 名称
  name: "cutAnalyse",

  // 使用组件
  components: {
    NormalScatterChart
  },

  // 数据
  data () {
    return {
      isAsc: "asc",
      wpArray: [],
      lineArray: [],
      wpId: "",
      lineId:"",
      wtId: "MG01_01",
      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
      chartData: [{
        title: "风资源分析",
        value: []
      }]
    };
  },

  // 函数
  methods: {
    // 获取风场
    getWp (reGetWp) {
      apis.powercompareWindfarmAjax({}).then((res) => {
        this.wpArray = res.data;
          this.wpArray = res.data;
          this.wpId = res.data[0].id;
          this.getLine();
      });
      // let that = this;
      // that.API.requestData({
      //   method: "GET",
      //   subUrl: "powercompare/windfarmAjax",
      //   success (res) {
      //     that.wpArray = res.data;
      //     that.wpId = res.data[0].id;
      //     that.getLine();
      //   }
      // });
    },

    // 获取线路
    getLine(){

      api.lineWpIdAjax({
       wpId: this.wpId
      }).then((res) => {
        this.wpArray = res.data;
          this.projectArray = res.data;
          this.projectId = res.data[0].id;
          this.getChartData();
      });
      // let that = this;
      // that.API.requestData({
      //   method: "GET",
      //   subUrl: "powercompare/lineWpIdAjax",
      //   data:{
      //     wpId: that.wpId
      //   },
      //   success (res) {
      //     that.lineArray = res.data;
      //     that.lineId = res.data[0].id;
      //     that.getChartData();
      //   }
      // });
    },

    // 获取图表数据
    getChartData () {
      api.scatterAjax({
        wpId: this.wpId,
          pjId: "",
          lnId: "",
          year: (this.recorddate ? new Date(this.recorddate).getFullYear() : ""),
          month: (this.recorddate ? (new Date(this.recorddate).getMonth() + 1) : ""),
      }).then((res) => {
        let chartData = [{
            title: "风资源分析",
            value: (res.data || [])
          }];
          this.$nextTick(()=>{
            this.chartData = chartData;
          });
      });
    },

    search () {
      if (!this.wpId || !this.lineId) {
        this.BASE.showMsg({
          msg: '场站与线路为必选项'
        });
      } else {
        this.getChartData();
      }
    }
  },

  created () {
    this.getWp();
  },

  mounted () { },

  unmounted () { },
};
</script>

<style lang="less" scoped>
.draught-fan-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .df-table {
    border: 0.093vh solid fade(@darkgray, 50%);
    position: relative;
    overflow: auto;
    flex-grow: 1;
    margin-top: 1.481vh;
    height: 30vh;

    &:before {
      content: '';
      width: 0.37vh;
      height: 0.37vh;
      background: @write;
      position: absolute;
      left: 0.278vh;
      top: 0.278vh;
    }

    tbody {
      height: calc(100vh - 166px);
    }
  }
}
</style>