kmt/src/pages/super/HomeworkTotally.vue

<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-items">
      <el-col :span="20" class="main" :offset="2">
        <el-row>
          <el-col :span="20" class :offset="2">
            <h5 class="tiplog">作业统计表</h5>
          </el-col>
          <el-col :span="16" class :offset="4">
            <div class="block clickTime">
              <span class="demonstration">选择时间</span>
              <el-date-picker
                @change="FindSubjectChartsInfo"
                v-model="Timevalue"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                align="right"
               :picker-options="pickerOptions0"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <!-- {{AllFindSubjectEngCharts}} -->
          <!-- <el-col class="chartdiv" v-if="AllFindSubjectEngCharts.length >= 1"> -->
            <HomeworkTotalList :chartData="chartData1"></HomeworkTotalList>
          <!-- </el-col> -->
          <!-- <el-col class="chartdiv" v-if="AllFindSubjectEngCharts.length >= 2"> -->
            <HomeworkTotalList :chartData="chartData2"></HomeworkTotalList>
          <!-- </el-col> -->
          <!-- <el-col class="chartdiv" v-if="AllFindSubjectEngCharts.length >= 3"> -->
            <HomeworkTotalList :chartData="chartData3"></HomeworkTotalList>
          <!-- </el-col> -->
           <el-col class="chartdiv" v-if="AllFindSubjectEngCharts.length <= 0">
             <div>
                  <img src="../../assets/img/SEARCH (1).png" alt />
          <div style="display:block; margin-top:20px;">暂无数据!</div>
             </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import HomeworkTotalList from "@/components/HomeworkTotalList";
import { IMG_BASE_URL } from "@/ImgConfig";
export default {
  components: {
    HomeworkTotalList
  },
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      chartData1: {},
      chartData2: {},
      chartData3: {},
    pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },  
      Timevalue: "",
      startTime: "",
      endTime: ""

      //   Timevalue: ""
    };
  },
   created() {
    this.getNowFormatDate(); //获取随机id
  },
  methods: {
    // 数据列表
    async FindSubjectChartsInfo() {
      let arr = this.Timevalue;
      if (this.Timevalue.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          this.startTime = arr[0];
          this.endTime = arr[1];
        }
      }
      this.$store.dispatch("FindSubjectChartsLists", {
        startTime: this.startTime,
        endTime: this.endTime
      });
      console.log(this.startTime);
      console.log(this.endTime);
    },
   //获取当前时间，格式YYYY-MM-DD
   getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    this.startTime = currentdate
    this.endTime = currentdate
    console.log(this.startTime)
     console.log(this.endTime)
      console.log(currentdate)
}

  },
  watch: {
    FindSubjectCharts: {
      handler: function(val, oldVal) {
        this.chartData1 = val;
      },
      deep: true
    },
    FindSubjectmathCharts: {
      handler: function(val, oldVal) {
        this.chartData2 = val;
      },
      deep: true
    },
    FindSubjectEngCharts: {
      handler: function(val, oldVal) {
        this.chartData3 = val;
      },
      deep: true
    }
  },
  mounted() {
    this.FindSubjectChartsInfo();
  },
  computed: {
    ...mapGetters([
      "FindSubjectCharts",
      "FindSubjectmathCharts",
      "FindSubjectEngCharts",
      "AllFindSubjectEngCharts"
    ])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}

el-table {
  color: #999999;
  font-size: 18px;
}
.tiplog {
  font-size: 30px;
  text-align: center;
  margin-top: 100px;
  font-weight: 700;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 35%;
  height: 30%;
  font-size: 12px;
  border-radius: 15px;
  text-align: center;
}
.chartdiv {
  margin: 100px 0;
}
.block {
  margin-top: 40px;
}
.clickTime{
text-align:left;
}
</style>