element 时间 转成季度 项目代码

    <template>
  <div v-loading="loading1" class="boxs">
    <!-- 商标数据    -->
    <div class="tab-dow">
      <el-row :gutter="20">
        <el-col :span="10" class="seek-right" style="margin-left:-20px">

          <span @click="showDoubleMonth">
            <el-input v-model="choseQuarter" placeholder="选择季度"></el-input>
          </span>
          <li class="show1" v-show="showTime1a">
            <p>
              <button
                type="button"
                aria-label="前一年"
                class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
                @click="prev"
              ></button>
              <span role="button" class="span-year">{{year}}年</span>
              <button
                type="button"
                aria-label="后一年"
                @click="next"
                class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
              ></button>
            </p>
            <p v-for="(item,index) in fullMonth" :key="index">
              <span class="selectMonth" @click="selectQuarter(index)">{{item}}</span>
            </p>
          </li>

        </el-col>

        <el-radio-group>
          <!-- <el-radio-button label="搜索"></el-radio-button> -->
          <el-button type="primary" style="background:#3D59D9" @click="fn">搜索</el-button>
          <el-button type="primary" style="margin-left:10px;background:#3D59D9" @click="reset">重置</el-button>
        </el-radio-group>
      </el-row>
    </div>
    

  
  </div>
</template>
<script>
import { regionData, CodeToText } from "element-china-area-data"; //三级联动插件
export default {
  data() {
    return {
      loading1: true,
      applicationNum: "",
      list: [],
      total: 10,
      pageSize: 10,
      pageNum: 1,
      // pagesize: 1,
      // size: 30,
      pageSizes: [10, 20, 40, 50, 100],

      pageNumber: 1, //默认当前为第几页
      pageSize: 10, //每页多少数据
      //三级联动插件
      options: regionData,
      selectedOptions: [],
      value: "",
      input: "",
      showTime1a: false,
      year: new Date().getFullYear(),
      fullMonth: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      choseQuarter: "",
      halfYearMonth: "",
      inputShow: false,
      valueSelectShow: false,
      list: [],
      total: 100,
      params: {
        page: 5,
        size: 20
      },

      value1: "",
      value2: "",
      value: "",
      province: "",
      city: "",
      county: ""
    };
  },
  methods: {
    //搜索
    //获取数据
    fn() {
      let then = this;
      this.loading1 = true;
      // let value1=this.value1.startTime,
      this.$axios.get(this.GLOBAL.myhf + "/search?pageNum=" +this.pageNumber + "&pageSize=" +this.pageSize +"&province=" +then.province + "&city=" +then.city +"&county=" +then.county,
          {withCredentials: true})
        .then(res => {
          // console.log(res)
          if (res.data.info == "success") {
            var parlinform = res.data.data;
            then.list = parlinform.list;
            then.total = res.data.data.total;
            setTimeout(() => {
              this.loading1 = false;
            }, 2000);
          } else {
            this.$message("暂无数据");
          }
        });
    },
    //重置
    reset() {
      this.loading1 = true;
      this.pageNumber = 1;
      this.pageSize = 10;
      this.selectedOptions = "";
      this.province = "";
      this.city = "";
      this.county = "";
      this.choseQuarter = "";
      this.fn();
    },
    //三级联动
    addressChange(arr) {
      let then = this;
      then.province = CodeToText[then.selectedOptions[0]]; //省
      then.city = CodeToText[then.selectedOptions[1]]; //市
      then.county = CodeToText[then.selectedOptions[2]]; //县
    },
    //季度
    showDoubleMonth() {
      this.showTime1a = true;
    },
    prev() {
      this.year = this.year * 1 - 1;
    },
    next() {
      this.year = this.year * 1 + 1;
    },

    selectQuarter(index) {
      console.log(parseInt(index));
      if (
        parseInt(index) == 0 ||
        parseInt(index) == 1 ||
        parseInt(index) == 2
      ) {
        this.choseQuarter = this.year + "-" + "第一季度";
        this.showTime1a = false;
      } else if (
        parseInt(index) == 3 ||
        parseInt(index) == 4 ||
        parseInt(index) == 5
      ) {
        this.choseQuarter = this.year + "-" + "第二季度";
        this.showTime1a = false;
      } else if (
        parseInt(index) == 6 ||
        parseInt(index) == 7 ||
        parseInt(index) == 8
      ) {
        this.choseQuarter = this.year + "-" + "第三季度";
        this.showTime1a = false;
      } else {
        this.choseQuarter = this.year + "-" + "第四季度";
        this.showTime1a = false;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fn();
      // console.log(`每页 ${val} 条`);
      // console.log(4545, this.params.page);
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.fn();
      // console.log(`当前页: ${val}`);
    }
  },
  created() {
    this.fn();
  }
};
</script>

<style scoped >

>>> .el-card__body {
  padding: 0 !important;
}
>>> .el-input--suffix {
  width: 70%;
}
>>> .el-cascader {
  width: 90%;
}
>>> .el-col el-col-9 {
  text-align: left;
}
</style>
<style lang="scss" scoped>
// * {
//   list-style: none;
// }
// .head {
//   padding: 20px;
// }
// .navBar input {
//   width: 215px;
//   height: 38px;
//   display: inline-block;
// }
.show1 {
  width: 320px;
  margin-top: 5px;
  position: absolute;
  z-index: 2;

  height: 160px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 5px;
}
.show1 p:nth-child(1) {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #f5f5f5;
}
.show1 p:nth-child(2) {
  box-sizing: border-box;
}
.selectMonth {
  display: inline-block;
  float: left;
  width: 78px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.selectMonth:hover {
  background: rgba(19, 131, 255, 0.052);
}
.span-year {
  width: 90%;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
  line-height: 40px;
}
.el-input {
  width: 215px;
  height: 38px;
  display: inline-block;
}
.col {
  text-align: center;
}
</style>