Vue前端以日历的方式展示月报表示例

1、Vue前端以日历的方式展示月报表，如下图


2、前端代码如下：

<template>

<div>
  <div style="width:100%;height:48px;">
   <div id="transparent-header" class="rank-head container" style="background: rgb(14,53,108);">
      <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>

        <span style="margin-right:20px;">月报表span>
        div>
   div>

   <div style="width:100%;height:40px;padding-top:0px;">

<div style="width:49%;height:100%;float:left;">
    <datepicker v-on:picked="picked" style="margin-left:10px;">
    datepicker>
div>

<div style="width:49%;height:100%;float:left;">

div>

div>


<div style="width:100%;height:578px;border:1px solid rgb(204,204,204);background:rgb(255,255,255);">

    <table cellpadding="0" cellspacing="0" id="1">
     <tr>
         <td>
            <div id="cal">
              <div id="top">
            div>

         <ul id="wk">
            <li><b>日b>li>
            <li>一li>
            <li>二li>
            <li>三li>
            <li>四li>
            <li>五li>
            <li><b>六b>li>
          ul>

        <ul id="wk" v-for="item in dayFreezeData">
        <li v-if="item[0].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{{item[0].day}}span> <p style="position:absolute;left:12px;top:18px;">{{item[0].num}}p>
        li>
        <li v-else > li>
        <li v-if="item[1].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{{item[1].day}}span> <p style="position:absolute;left:12px;top:18px;">{{item[1].num}}p>li>
        <li v-else>   li>

        <li v-if="item[2].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{{item[2].day}}span> <p style="position:absolute;left:12px;top:18px;">{{item[2].num}}p>li>
        <li v-else>  li>

        <li v-if="item[3].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{{item[3].day}}span> <p style="position:absolute;left:12px;top:18px;">

                                {{item[3].num}}p>li>
        <li v-else>  li>
      <li v-if="item[4].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{{item[4].day}}span> <p style="position:absolute;left:12px;top:18px;">{{item[4].num}}p>li>
                                <li v-else>  li>

                                <li v-if="item[5].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{{item[5].day}}span> <p style="position:absolute;left:12px;top:18px;">{{item[5].num}}p>li>
                                <li v-else>  li>

                                <li v-if="item[6].day != null" style="position:relative;"><span style="position:absolute;left:18px;top:0px;font-weight:bold;color:black;">{{item[6].day}}span> <p style="position:absolute;left:12px;top:18px;">{{item[6].num}}p>li>
                                <li v-else>  li>

                            ul>


                            <div id="bm">

                            div>

                        div>
                    td>
                  tr>
                table>

            div>

      div>



  div>

template>

<script>

  import datepicker from '../components/datepicker.vue'

  export default {
    data() {
        return{
           freezeMon:'',
           meterId:'',
           monitorName:'',
           supply:'',
           supplyComName:'',
           ownerCompanyName:'',
           areaName:'',
           dayFreezeData:[]
        }
    },
        methods: {
      picked(year, month, date) {
          if(month < 10){
              this.freezeMon = `${year}-0${month}`;
          }else{
              this.freezeMon = `${year}-${month}`;
          }

         this.getList();
      },
      routerBack(){
         //this.$router.go(-1);
         var mid = this.$route.params.id;
         var mname = this.$route.params.name;
         var mpname = this.$route.params.pname;

         this.$router.push({name: 'dayFreezePoint', params: {id: mid,name:mname,pname:mpname}});

      },
      getList(){
          this.dayFreezeData = []
          var meterId = this.$route.params.meterId;

          this.$http.post(this.URL + '/mobile/getMonthDatas.do',{yearMonth:this.freezeMon})
          .then(function (res) {
              this.dayFreezeData = res.data.weekData;

          })
          .catch(function (error) {
               this.$toast('月报表查询异常');
          });

      }
    },
    components: {
            datepicker
        },
    mounted () {
       this.getList()
    }

}

script>

<style>
*{margin:0;padding:0;  list-style:none }
h1,h2,h3,h4,h5,h6{font-size:16px; font-weight:normal;}

.rank-head{
     width: 100%;
     height: 40px;
     position:fixed;
     background: -webkit-linear-gradient(top,rgba(0,0,0,.6),rgba(0,0,0,0));
     z-index: 999;
     color: #fff;
     font-size: 16px;
     text-align: center;
     line-height: 40px;
}

.container{
     width: 100%;
     overflow: hidden }

.rank-head-back{
     display: block;
     float: left;
     width: 40px;
     height: 40px;
     background: url("../assets/index/back.png") no-repeat center center;
     background-size: 100% 100%;
}


.p1,
.p2,
.i {
    font-family: arial }

body {
    background-color: #fff;
    color: #000;
}

table {
    border: 0 }

#cal {

    width: 99%;
    font-size: 12px;
    margin: 8px 0 0 15px;position: relative;
}

#cal #top {
    height: 40px;
    line-height: 40px;
    background: #429e6c;
    border: 1px solid #429e6c;
    color: #fff;
    padding: 0 10px;
    clear: both;
}

#cal #top select {
    font-size: 12px }

#cal #top input {
    padding: 0 }

#cal ul#wk {
    margin: 0;
    padding: 0;
    height:50px;
    color: #888;
    font-size: 14px;
    border-left: 1px solid #429e6c;
    border-right: 1px solid #429e6c;
}

#cal ul#wk li {
    float: left;
    width: 48px;
    text-align: center;
    line-height: 50px;
    list-style: none }
.rl1{
    position: absolute;left:20px;top: 30px;
}
#cal ul#wk li b {
    font-weight: normal;
    color: #429e6c;
}

#cal #cm {
    clear: left;
    position: relative;
    border-left: 1px solid #429e6c;
    border-right: 1px solid #429e6c;
}

#cal #cm .cell {
    position: absolute;
    width: 42px;
    height: 36px;
    text-align: center;
    margin: 0 0 0 9px;
    cursor: pointer;
}

#cal #cm .cell .so {
    font: 16px arial;
}

#cal #bm {
    text-align: right;
    height: 30px;
    line-height: 30px;
    padding: 0 13px 0 0;
    border-bottom:1px solid #429e6c;
    border-left:1px solid #429e6c;border-right:1px solid #429e6c;
    clear: both;
    padding: 0 10px;
    font-size: 14px;
}

#cal #bm .heavenly-branch {
    color: #429e6c;
    float: left;
}
#cal #fd {
    display: none;
    position: absolute;
    border: 1px solid #dddddf;
    background: #fff;
    color: #333;
    padding: 10px;
    line-height: 21px;
    width: 150px;
    border-radius: 10px;
}
#cal #fd:before{
    content: '';
    position: absolute;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid #dddddf;
    border-bottom: 8px solid transparent;
}
#cal #fd:after{
    content: '';
    position: absolute;
    left: -6px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid #fff;
    border-bottom: 8px solid transparent;
}
#cal #fd b {
    font-weight: normal;
    color: #429e6c;
}
#cal .step {
    float: right;
    font-size: 16px;
}
#cal .step span{
    cursor: pointer;
}
#cal .step #prev{
    margin-right: 10px;
}
#cal .select{
    float: left;
}
#cal .select select{
    -webkit-appearance: none;
    padding: 5px 20px;
}
#cal #now-date{
    float: right;
    padding: 0px 10px;
    background-color: #429e6c;
    color: #fff;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin-top: 6px;
    text-decoration: none;
}

style>

3、后台返回的数据如下：

{"weekData":[[{},{"num":"27.62","day":"1"},{"num":"0.0","day":"2"},{"num":"0.0","day":"3"},{"num":"0.0","day":"4"},{"num":"0.0","day":"5"},{"num":"0.0","day":"6"}],[{"num":"0.0","day":"7"},{"num":"0.0","day":"8"},{"num":"0.0","day":"9"},{"num":"0.0","day":"10"},{"num":"0.0","day":"11"},{"num":"0.0","day":"12"},{"num":"0.0","day":"13"}],[{"num":"0.0","day":"14"},{"num":"0.0","day":"15"},{"num":"0.0","day":"16"},{"num":"0.0","day":"17"},{"num":"0.0","day":"18"},{"num":"0.0","day":"19"},{"num":"0.0","day":"20"}],[{"num":"0.0","day":"21"},{"num":"0.0","day":"22"},{"num":"0.0","day":"23"},{"num":"0.0","day":"24"},{"num":"0.0","day":"25"},{"num":"0.0","day":"26"},{"num":"0.0","day":"27"}],[{"num":"0.0","day":"28"},{"num":"0.0","day":"29"},{"num":"0.0","day":"30"},{"num":"0.0","day":"31"},{},{},{}]],"weekNum":1,"dayNum":31}

4、后台的controller层代码：

/**
  * 获取月报表信息
  */
 @ResponseBody
 @RequestMapping("/getMonthData")
 public Map getMonthData(String yearMonth){
   try {
       return monthDataService.getMonthData(yearMonth);
   } catch (Exception e) {
       log.error("获取月报表信息异常",e);
   }
   return null;
}

5、service层的代码：

@Override
public MapObject> getMonthData(String yearMonth) throws Exception {
    StringBuffer sb = new StringBuffer("");
    sb.append(" select t.FreezeMon,t.FreezeNum from dayfreezeNum t ");
    sb.append(" where t.MeterID = '"+meterId+"' ");
    sb.append(" and substring(t.FreezeMon,1,7) = '"+yearMonth+"' ");
    sb.append(" order by t.FreezeMon ");

    //获取某个月的数据
    List<Object[]> list = baseDao.queryBySql(sb.toString());    
    MapObject> map = new HashMapObject>();
    MapObject> detailMap = new HashMapObject>();

    if(list != null && list.size() > 0){
        for (int i = 0; i < list.size(); i++) {
            Object[] item = list.get(i);
            //item[0]为日期；item[1]为item[0]日期对应的数据
            //根据item[0]获取是当月的第几天
            int day = DateUtil.getDay(item[0] + "");
            //然后将数据放到map中，键是当月的第几天，值是该天对应的数据值
            detailMap.put(day, item[1]);
        }
}

    //获取该月份的总天数
    int dayNum = DateUtil.getDaysOfMonth(yearMonth + "-01");
    //获取该月份的总星期数
    int weekNum = DateUtil.getWeek(yearMonth + "-01");

    //查询该月每一天是否有数据，没有数据赋值为0
    for (int i = 1; i <= dayNum; i++) {
        if(!detailMap.containsKey(i)){
            detailMap.put(i, 0);
        }
    }

    //获取该月的最后一天
    String lastDay = DateUtil.getLastDayForMonth(yearMonth + "-01");
    //获取该月最后一天是该月的第几周
    int maxWeekIndex = DateUtil.getWeekInMonth(lastDay);

    //创建一天二维数组，用于保存该月的数据，主要是用于在移动端前端显示,二维数组，第一位表示该月的第几周、第二位表示从周日到周六
    Object[][] weekData = new Object[maxWeekIndex][7];
    for (int i = 0; i < maxWeekIndex; i++) {
        for (int j = 0; j < 7; j++) {
            //先将所有元素赋值为一个空的map
            MapObject> itemMap = new HashMapObject>();
            weekData[i][j] = itemMap;
        }
    }

    //遍历detailMap,获取该月每一天的数据，然后赋值给二维数组
    if(detailMap != null && detailMap.size() > 0){
        //根据该月的总天数进行遍历
        for (int i = 1; i <= dayNum; i++) {
            //第几天
            String dayNumStr = i < 10 ? ("0" + i) : (i + "");
            //计算第几天对应的是该月的第几周
            int weekIndex = DateUtil.getWeekInMonth(yearMonth + "-" + dayNumStr);
            //计算第几天对应的是周几
            int weekN = DateUtil.getWeek(yearMonth + "-" + dayNumStr);
            MapObject> itemMap = new HashMapObject>();
            //然后将日期与值放到itemMap中
            itemMap.put("day", i + "");
            itemMap.put("num", Double.parseDouble(detailMap.get(i) + "") + "");

            //将值放到二维数据中
            weekData[weekIndex - 1][weekN] = itemMap;
       }
    }

    //再将二维数据放到map中
    map.put("weekData", weekData);
    //将该月的总天数放到map中
    map.put("dayNum", dayNum);
    //将该月的总星期数放到map中
    map.put("weekNum", weekNum);

    return map;
}