acupuncture/acupuncture-后台/src/views/indexCom/query.vue

<template>
  <div class="app-container">
    <div class="title1">
      <span class="title-bor"></span>
      {{ title }}
    </div>
    <div>
      <div>
        <!-- <el-radio-group
          v-model="radioValue"
          size="small"
          style="height: 36px"
          @change="radioChange"
        >
          <el-radio label="0" border style="margin: 0 20px 0 0">周</el-radio>
          <el-radio label="1" border style="margin: 0 20px 0 0">月</el-radio>
          <el-radio label="2" border style="margin: 0 20px 0 0">季</el-radio>
          <el-radio label="3" border style="margin: 0 20px 0 0">年</el-radio>
        </el-radio-group> -->
        <el-date-picker
          v-model="pickerValue"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="pickerChage"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
// import { deviceType } from "./index.js";
//  this.$store.commit('headerFun', data)
export default {
  name: "Post",
  props: ["title", "type"],
  data() {
    return {
      radioValue: "1",
      radioTime: [],
      pickerValue: null,
      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]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, 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]);
            },
          },
        ],
      },
    };
  },
  created() {
    console.log(this.pickerValue, 222);
  },
  methods: {
    radioChange() {
      const start = new Date();
      const end = new Date();
      this.timeType = 4;
      if (this.radioValue == 0) {
        this.timeType = 4;
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        this.radioTime = [start, end];
      }
      if (this.radioValue == 1) {
        this.timeType = 4;
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        this.radioTime = [start, end];
      }
      if (this.radioValue == 2) {
        this.timeType = 1;
        const now = new Date(); // 当前日期
        const nowYear = now.getFullYear(); //当前年
        const nowMonth = now.getMonth(); //当前月
        const nowDay = now.getDate(); // 当前日
        const nowDayOfWeek = now.getDay(); // 周几
        const jd = Math.ceil((nowMonth + 1) / 3); // 当前季度
        const startDate = new Date(nowYear, (jd - 1) * 3, 1);
        const endDate = new Date(nowYear, jd * 3, 0);
        this.radioTime = [startDate, endDate];
      }
      if (this.radioValue == 3) {
        this.timeType = 1;
        end.setTime(start.getTime());
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
        this.radioTime = [start, end];
      }
      this.$emit(
        "radio-change",
        this.pickerValue || this.radioTime,
        this.type,
        this.timeType
      );
    },
    pickerChage() {
      if (!this.pickerValue) {
        this.radioChange();
      }
      console.log(this.pickerValue, 111);
      this.radioTime = [];
      this.timeType = 4;
      if (this.radioValue == 0) {
        this.timeType = 4;
      }
      if (this.radioValue == 1) {
        this.timeType = 4;
      }
      if (this.radioValue == 2) {
        this.timeType = 1;
      }
      if (this.radioValue == 3) {
        this.timeType = 1;
      }
      this.$emit("picker-change", this.pickerValue, this.type, this.timeType);
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>> .el-card {
  margin-bottom: 0 !important;
}
>>> .el-radio--small.is-bordered {
  margin-right: 20px !important;
  margin-left: 0 !important;
}
>>> .el-radio__input {
  display: none;
}
>>> .el-radio__label {
  padding-left: 5px;
}
.app-container {
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.title1 {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #406e49;
}
.title-bor {
  display: inline-block;
  height: 20px;
  width: 6px;
  background: #406e49;
  margin-right: 10px;
  border-radius: 8px;
}
</style>