vue element组件 时间联动显示

<template>
  <div>
    <div class="searchbar-warp">
      <div class="searchbar-txt">
        <el-radio-group v-model="activeTmie" class="time" @change="timeChange(activeTmie)">
          <el-radio :label="0">全部</el-radio>
          <el-radio :label="3">3天</el-radio>
          <el-radio :label="7">7天</el-radio>
          <el-radio :label="15">15天</el-radio>
          <el-radio :label="30">30天</el-radio>
        </el-radio-group>
        <div class="date">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']"
            @change="timeChange(date)"
          ></el-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  name: "timeBar",
  data() {
    return {
      activeTmie: 0,
      date: "",
      time: {
        startDate: "", //开始时间
        endDate: "" //结束时间
      }
    };
  },
  components: {
    // videoPlayer
  },
  methods: {
    timeChange(val) {
      var startTime, endTime;
      if (typeof val == "number") {
        if (val == 0) {
          this.date = [];
          return;
        }
        var date = new Date();
        var now = date.getTime();
        var timezoneOffset = date.getTimezoneOffset() * 60 * 1000; //时差 毫秒
        var day = parseInt(now / 1000 / 3600 / 24); //換算成天
        var startTime = (day - val) * 1000 * 3600 * 24 + timezoneOffset;
        var endTime = (day + 1) * 3600 * 1000 * 24 - 1 + timezoneOffset;
        this.date = [new Date(startTime), new Date(endTime)];
        this.time.startDate = startTime; //开始时间
        this.time.endDate = endTime; //结束时间
      } else {
        this.activeTmie = 0;
        if (val[0] && val[1]) {
          this.time.startDate = val[0].getTime(); //开始时间
          this.time.endDate = val[1].getTime(); //结束时间
        }
      }
      console.log(this.time);
    }
  },
  mounted() {
    // this.kw = this.$route.params.kw
  },
  computed: {},
  beforeRouteUpdate(to, from, next) {
    //to.param.kw
  },
  watch: {
  }
};
</script>

<style scoped lang="scss">
.searchbar-warp {
  position: relative;
}
#searchbar {
  width: 1098px;
  height: 66px;
  background: rgba(0, 0, 0, 0.41);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.12);
  border-radius: 13px;
  border: 2px solid rgba(38, 209, 125, 0.57);
}
.searchbar-txt {
  position: absolute;
  left: 2px;
  top: 22px;
  width: 1098px;
  height: 26px;

  /deep/ {
    .el-radio__input {
      display: none;
    }
    .el-radio__label {
      padding: 2px 16px;
      height: 26px;
      line-height: 26px;
    }
    .el-radio__input.is-checked + .el-radio__label {
      height: 24px;
      line-height: 24px;
      background: rgba(0, 129, 255, 0.37);
      border-radius: 13px;
      border: 1px solid rgba(0, 129, 255, 1);
    }

    .el-radio {
      color: #6b86b5;
      margin: 0;
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: #ffffff;
      padding: 2px 15px;
    }
    .el-range-editor.el-input__inner {
      width: 368px;
      height: 32px;
    }
    .el-range-editor.el-input__inner {
      background: none;
      border: 1px solid rgba(76, 142, 117, 0.65);
    }
    .el-range-input {
      background: none;
    }
    .el-date-editor .el-range-separator{
      line-height: 24px;
    }
  }
  .time {
    display: inline-block;
    width: 300px;
  }
  .date {
    display: inline-block;
    width: 368px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    /deep/ {
      .el-date-editor .el-range__icon {
        line-height: 24px;
      }
      .el-range__close-icon {
        line-height: 24px;
      }
      .el-date-editor .el-range-input {
        color: #6b86b5;
      }
    }
  }
}
</style>