MingGao_vue/minggao/src/components/DateSearch/index.vue

<template>
  <div>
    <!-- <el-button
      :type="btnSelected == '1' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(1)"
      >24小时</el-button
    > -->
    <!-- <el-button
      :type="btnSelected == '1' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(1)"
      >本周</el-button
    > -->
    <!-- <el-button
      :type="btnSelected == '2' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(2)"
      >近一月</el-button
    >
    <el-button
      :type="btnSelected == '3' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(3)"
      >近半年</el-button
    >
    <el-button
      :type="btnSelected == '4' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(4)"
      >近一年</el-button
    > -->
    <!-- <el-date-picker
			style="cursor: pointer"
			size="mini"
			v-model="timeRange"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			@change="DateChange"
		></el-date-picker> -->

    <!-- 测试 -->
    <el-button
      :type="btnSelected == '1' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(1)"
      >近一天</el-button
    >
    <el-button
      :type="btnSelected == '2' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(2)"
      >近七天</el-button
    >
    <el-button
      :type="btnSelected == '3' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(3)"
      >近一月</el-button
    >
    <el-button
      :type="btnSelected == '4' ? 'primary' : 'default'"
      size="mini"
      @click="timeBtnClick(4)"
      >近三月</el-button
    >
    <!-- 测试 -->

    <el-date-picker
      style="cursor: pointer; margin: 0 0 0 4px"
      size="mini"
      v-model="timeRange"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="DateChange"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    var that = this;
    return {
      num: 1,
      btnSelected: "1",
      timeScreen: "1",
      queryInfo: {
        begin: "",
        end: "",
      },
      timeRange: "",

      pickerOptions: {
        shortcuts: [
          // {
          //   text: "最近一周",
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          //     picker.$emit("pick", [start, end]);
          //     that.queryInfo.begin = start;
          //     that.queryInfo.end = end;
          //   },
          // },
          // {
          //   text: "最近一个月",
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          //     picker.$emit("pick", [start, end]);
          //     that.queryInfo.begin = start;
          //     that.queryInfo.end = end;
          //   },
          // },
          // {
          //   text: "最近三个月",
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          //     picker.$emit("pick", [start, end]);
          //     that.queryInfo.begin = start;
          //     that.queryInfo.end = end;
          //   },
          // },


          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
              that.queryInfo.begin = start;
              that.queryInfo.end = end;
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit("pick", [start, end]);
              that.queryInfo.begin = start;
              that.queryInfo.end = end;
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.timeBtnClick(1);
  },
  methods: {
    //筛选时间
    timeBtnClick(i) {
      var now = new Date();
      var nowTime = now.getTime();
      var day = now.getDay();
      var longTime = 24 * 60 * 60 * 1000;
      var n = longTime * 7 * (0 || 0);
      var aa = nowTime - (day - 1) * longTime + n; //开始
      var bb = nowTime + (7 - day) * longTime + n; //结束
      // 开始
      aa = new Date(aa);
      var x = aa.getFullYear();
      var k = aa.getMonth() + 1;
      var b = aa.getDate();
      k = k < 10 ? "0" + k : k;
      b = b < 10 ? "0" + b : b;
      var mm =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      var dayA = x + "-" + k + "-" + b;
      // console.log(dayA);
      // 结束
      bb = new Date(bb);
      var y = bb.getFullYear();
      var m = bb.getMonth() + 1;
      var d = bb.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      var day = y + "-" + m + "-" + d;
      // console.log(day);

      this.btnSelected = i;
      this.timeRange = "";
      if (i == 1) {
        // 24小时
        this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000) / 1000);
        this.queryInfo.end = parseInt((Date.now() + 24) / 1000);
      } else if (i == 2) {
        // 近七天
        this.queryInfo.begin = parseInt(
          (Date.now() - 24 * 3600000 * 7) / 1000
        );
        this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000);
      } else if (i == 3) {
        // 近一个月
        // this.queryInfo.begin = parseInt(
        //   (Date.now() - 24 * 3600000 * 30 * 6) / 1000
        // );
         this.queryInfo.begin = parseInt(
          (Date.now() - 24 * 3600000 * 30) / 1000
        );
        // this.queryInfo.begin = parseInt(
        //   (Date.now() - 24 * 3600000 * 30 * 6) / 1000
        // );
        this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000);
      } else if (i == 4) {
        // 近三个月
        // this.queryInfo.begin = parseInt(
        //   (Date.now() - 24 * 3600000 * 30 * 12) / 1000
        // );
        this.queryInfo.begin = parseInt(
          (Date.now() - 24 * 3600000 * 30 * 3) / 1000
        );
        this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000);
      }
      console.log(this.queryInfo.begin)
      this.$emit("dateChange", this.queryInfo);
      this.$emit("btnSelected", this.btnSelected);
    },
    DateChange() {
      console.log(this.timeRange);
      this.btnSelected = null;
      if (this.timeRange) {
        this.queryInfo.begin = parseInt(
          new Date(this.timeRange[0]).getTime() / 1000
        );
        this.queryInfo.end = parseInt(
          new Date(this.timeRange[1]).getTime() / 1000
        );
      } else {
        this.btnSelected = 2;
        this.queryInfo.begin = parseInt(
          (Date.now() - 24 * 3600000 * 30) / 1000
        );
        this.queryInfo.end = parseInt((Date.now() + 24 * 3600000) / 1000);
      }
      this.$emit("dateChange", this.queryInfo);
      this.$emit("btnSelected", this.btnSelected);
      if (this.timeRange == null) {
        this.$emit("timeScreen", null);
      } else {
        this.$emit("timeScreen", this.timeScreen);
      }
    },
    say() {
      this.num++;
      console.log(this.num+"-------------------------------");
      if (this.num > 5 || this.num == 5) {
        console.log("停止");
        this.num = 0;
      } else {
        console.log(this.num);
        this.timeBtnClick(this.num);
      }
      this.$emit("timeScreen", null);
    },
  },
};
</script>

<style lang='less' scoped>
</style>