<template>
    <div class="formula history">
        <!-- 历史记录 -->
        <div class="page-content">
            <div class="table-title">
                <img src="../../assets/image/history.png" alt="" />
                智慧水肥(历史数据)
            </div>
            <div class="search-flex">
                <div class="search-left">
                    <span>快速查询</span>
                    <div class="">
                      <div :class="timeSel==index?'active':''" @click="timeSel=index" v-for="item,index in timeList" :key="index">{{ item }}</div>
                    </div>
                </div>
                <div class="search-right" v-if="timeSel==2">
                  <span>快速查询</span>
                  <el-date-picker
      v-model="value1"
      unlink-panels
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <div class="input-btn">
          <div class="btn green">
            <img src="../../assets/image/irrigateSet1.png" alt="" />查询
          </div>
          <div class="btn blue">
            <img src="../../assets/image/irrigateSet3.png" alt="" />下载
          </div>
          <div class="btn blue" >
            <img src="../../assets/image/irrigateSet2.png" alt="" />统计
          </div>
        </div>
                </div>
            </div>
            <div class="table-view">
                <el-table :data="tableData" :row-class-name="tableRowClassName" height="420" style="width: 100%">
          <el-table-column prop="data0"  width="180" label="时间">
            <template slot-scope="scope">
             <div>2023-09-23 14:08:19</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="160" label="目标水肥PH">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="200" label="1#肥EC(mS/cm)">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="160" label="水肥PH">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="200"  label="目标水肥EC(mS/cm)">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="160" label="2#水肥PH">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="160" label="水肥EC(mS/cm)">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="160" label="1#水肥PH">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="200" label="2#水肥EC(mS/cm)">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="160" label="1#水肥PH">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
          <el-table-column prop="data0" width="160" label="1#水肥PH">
            <template slot-scope="scope">
             <div>111</div>
            </template>
          </el-table-column>
         </el-table>

            </div>
           
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData:[{},{},{},{},{},{},],
            timeList:['今日','昨日','自定义'],
            timeSel:0,
            value1:''
        }
    },
    mounted() { },
    methods: {
        tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
    },

}
</script>
<style lang="scss"></style>
  
  