<template>
  <div class="pageBox">
    <div class="searchBox">
      <el-form ref="form" :model="form" inline label-width="80px">
        <el-form-item label="风场：">
          <el-select v-model="form.wpId" placeholder="请选择" @change="changeWpId">
            <el-option v-for="item in wpList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker v-model="form.recorddate" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期"
            :picker-options="pickerOptions" @change="res => { this.getTableDate(form.wpId); }"></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%;" height="600">
        <el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
        <el-table-column prop="wtId" label="风机"></el-table-column>
        <el-table-column prop="rd" label="日期"></el-table-column>
        <el-table-column prop="qxpc1" label="3-5米曲线偏差率"></el-table-column>
        <el-table-column prop="qxpc2" label="5-11米曲线偏差率"></el-table-column>
        <el-table-column prop="qxpc3" label="11-25米曲线偏差率"></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="renderCharts('zxt', scope.row.wtId)" type="text" size="small">曲线趋势</el-button>
            <el-button @click="renderCharts('sdt', scope.row.wtId)" type="text" size="small">散点趋势</el-button>
            
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="dialogTitle" top="50px" :visible.sync="chartDialogShow" width="70%" @closed="(res) => { this.chartsLoading=true; this.noLineChartsData=false; }">
      <div class="chartBox">
        <div class="chartDom" id="curveDeviationChart"></div>
        <div class="tips cMove" v-if="chartsLoading">正在加载图表数据中...请稍候...</div>
        <div class="tips" v-if="noLineChartsData">暂无数据</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import curveDeviation from "@assets/js/healthManagement/curveDeviation";
export default curveDeviation;
</script>
<style lang="scss" scoped>
@import '@assets/css/healthManagement/curveDeviation.scss';
</style>
<style lang="scss">
.tableBox {
  .cell {
    text-align: center;
  }
}
</style>
