前端实现葡萄图记录考勤vue

已于 2024-07-11 09:12:25 修改
阅读量499 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端 javascript vue
于 2024-07-09 15:48:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PolarisWay/article/details/140297976

背景：现需要实现葡萄图，每一颗葡萄代表一天，一串葡萄代表一个月，当天考勤正常葡萄为紫色，有迟到缺勤葡萄为白色。
思路：一共4种情况：大月（31天）、小月（30天）、闰年2月（29天）、平年2月（28天）。
实现效果如下：
在这里插入图片描述
最后结合实际情况出的效果大致图为：
在这里插入图片描述

代码实现如下：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <script src="js/axios.js"></script>
    <script src="plugs/vue/vue.js"></script>
    <meta name="format-detection" content="telephone=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="element-ui/theme-chalk/index.css" />
    <link rel="stylesheet" href="css/style.css" />
    <style>
      .main {
        width: 100%;
        height: 100vh;
      }
      .contentBox {
        width: 100%;
        height: 100%;
        display: flex;
        padding: 35px 20px;
      }
      /* 左侧样式 */
      .leftContent {
        width: 30vw;
        height: 100%;
      }

      /* 右侧 */
      .rightContent {
        width: 70vw;
        height: 100%;
        .peopleBox {
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          overflow: auto;
          .peopleCard {
            width: calc(25% - 40px);
            height: calc(33% - 15px);
            border: 2px solid #adacab;
            margin-left: 40px;
            margin-top: 15px;
            border-radius: 3px;
            .peopleTop {
              width: 100%;
              height: 40%;
              display: flex;
              .peopleTLeft {
                width: calc(100% - 30px);
                height: 100%;
                .peopleRow {
                  width: 100%;
                  height: 33%;
                  font-size: 1rem;
                  display: flex;
                  .rowLeft {
                    width: 40%;
                    color: #fff;
                    background: #83b3d4;
                    border: 1px solid #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                  .rowRight {
                    width: 60%;
                    color: #141414;
                    background: #d8ecf9;
                    border: 1px solid #fff;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding-left: 5px;
                    line-height: 15px;
                  }
                }
              }
              .peopleTRight {
                width: 100px;
                height: 100%;
                border: 1px solid #fff;
                border-left: none;
                > img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .peopleBottom {
              width: 100%;
              height: 60%;
              background: #e7f1ff;
              .propleGrapeBox {
                width: 50%;
                height: 100%;
                margin: 0 auto;
                padding-top: 10px;
                /* 葡萄图样式 */
                .grapeBox {
                  width: 100%;
                  height: 100%;
                  margin: 0 auto;
                  position: relative;
                  .grapeHead {
                    width: 100%;
                    height: 30%;
                    > img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .grapeBody {
                    width: 100%;
                    height: 80%;
                    position: absolute;
                    top: 15%;
                    left: 5%;
                    .grapeBodyBox {
                      width: 90%;
                      height: 100%;
                      .row {
                        width: 100%;
                        height: 10%;
                        display: flex;
                        justify-content: center;
                        .col {
                          width: 20px;
                          height: 20px;
                          background: #a285ec;
                          border-radius: 50%;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          border: 1px solid #504f4f;
                          font-size: 0.6rem;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .peopleCard:nth-child(1),
      .peopleCard:nth-child(2),
      .peopleCard:nth-child(3),
      .peopleCard:nth-child(4) {
        margin-top: 0;
      }
    </style>
  </head>
  <div id="app" class="main">
    <div class="contentBox">
      <div class="leftContent">
      </div>
      <!-- 右侧 -->
      <div class="rightContent">
        <div class="peopleBox">
          <div class="peopleCard" v-for="(item,index) in peopleList">
            <div class="peopleTop">
              <div class="peopleTLeft">
                <div class="peopleRow">
                  <div class="rowLeft">xx</div>
                  <div class="rowRight" style="overflow: hidden">
                    {{item.id}}
                  </div>
                </div>
                <div class="peopleRow">
                  <div class="rowLeft">姓名</div>
                  <div class="rowRight">{{item.name}}</div>
                </div>
                <div class="peopleRow">
                  <div class="rowLeft">xx</div>
                  <div class="rowRight" style="overflow: hidden">
                    {{item.id}}
                  </div>
                </div>
              </div>
              <div class="peopleTRight">
                <!-- <img :src="item.userImg" alt="" /> -->
                <img src="./images/600.jpg" alt="" />
              </div>
            </div>
            <div class="peopleBottom">
              <!-- 葡萄图 -->
              <div class="propleGrapeBox">
                <div class="grapeBox">
                  <div class="grapeHead">
					<!-- 叶子图片 -->
                    <img src="./images/grapeleaf.png" alt="" />
                  </div>
                  <div class="grapeBody" style="z-index: 5">
                    <div class="grapeBodyBox">
                      <div class="row" v-for="(item,index) in item.attendList">
                        <div
                          class="col"
                          v-for="(it,i) in item.colList"
                          :style="{background:it.isBelate==true?'#ebd6edb2':''}"
                        >
                          {{it.day}}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <body>
    <script src="js/axios.js"></script>
    <script src="./js/public.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: function () {
          return {
            serverPath: "",
            leftList: [
              {
                title: "推行葡萄图的目的",
                content:
                  "为提升大厅政务服务水平，优化我区营商环境和政务服务效能，提升办事群众和企业的满意度和获得感，真实反映出每位员工的工作状况，制定葡萄图绩效考核针对大厅人员日常考勤进行统计分析，掌握人员考勤工作情况，合理分配人员岗位。",
              },
              {
                title: "葡萄图适用的范围",
                content: "高新区政务服务大厅窗口工作人员",
              },
              {
                title: "葡萄图考核方法",
                content:
                  "每位窗口人员每个月都有一张葡萄图，每位窗口人员每个出勤日都拥有一颗葡萄。上级领导根据员工的实际表现给予涂色，如有不良表现或优异变现均记录在《关键事件记录卡》上，以作为后续评定绩效等级的依据。每个葡萄有6种颜色，所有窗口人员的葡萄图均在现场公开、公布。",
              },
            ],
            showRowList: [
              {
                colList: [
                  { day: 31, isBelate: false },
                  { day: 30, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 29, isBelate: false },
                  { day: 28, isBelate: true },
                  { day: 27, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 26, isBelate: false },
                  { day: 25, isBelate: false },
                  { day: 24, isBelate: false },
                  { day: 23, isBelate: false },
                  { day: 22, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 21, isBelate: false },
                  { day: 20, isBelate: false },
                  { day: 19, isBelate: false },
                  { day: 18, isBelate: false },
                  { day: 17, isBelate: false },
                  { day: 16, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 15, isBelate: false },
                  { day: 14, isBelate: false },
                  { day: 13, isBelate: false },
                  { day: 12, isBelate: false },
                  { day: 11, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 10, isBelate: false },
                  { day: 9, isBelate: false },
                  { day: 8, isBelate: false },
                  { day: 7, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 6, isBelate: false },
                  { day: 5, isBelate: false },
                  { day: 4, isBelate: false },
                ],
              },
              {
                colList: [
                  { day: 3, isBelate: false },
                  { day: 2, isBelate: false },
                ],
              },
              { colList: [{ day: 1, isBelate: false }] },
            ],
            lineList: [
              {
                color: "紫色",
                text: "紫色：A ≥ 80",
              },
              {
                color: "白色",
                text: "白色:轮休、换班、请假",
              },
            ],
            peopleList: [
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
              {
                img: "./images/6.jpg",
                department: "企业服务科",
                name: "陈小文",
                month: "1月",
                grapeList: [
                  {
                    colList: [
                      { day: 31, isBelate: "" },
                      { day: 30, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: true },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ],
              },
            ],
            mockGrape: [],
          };
        },
        created: function () {
          this.serverPath = server_path;
        },
        methods: {
          getDate() {
            let now = new Date();
            let nowYear = now.getFullYear();
            let nowMonth = now.getMonth() + 1;
            // 大小月判断
            if (
              (nowMonth == 1 ||
                nowMonth == 3 ||
                nowMonth == 5 ||
                nowMonth == 7 ||
                nowMonth == 8 ||
                nowMonth == 10 ||
                nowMonth == 12) &&
              nowMonth != 2
            ) {
              console.log("这里不是2月，是大月31天");
              this.mockGrape = [
                {
                  colList: [
                    { day: 31, isBelate: "" },
                    { day: 30, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 29, isBelate: "" },
                    { day: 28, isBelate: "" },
                    { day: 27, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 26, isBelate: "" },
                    { day: 25, isBelate: "" },
                    { day: 24, isBelate: "" },
                    { day: 23, isBelate: "" },
                    { day: 22, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 21, isBelate: "" },
                    { day: 20, isBelate: "" },
                    { day: 19, isBelate: "" },
                    { day: 18, isBelate: "" },
                    { day: 17, isBelate: "" },
                    { day: 16, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 15, isBelate: "" },
                    { day: 14, isBelate: "" },
                    { day: 13, isBelate: "" },
                    { day: 12, isBelate: "" },
                    { day: 11, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 10, isBelate: "" },
                    { day: 9, isBelate: "" },
                    { day: 8, isBelate: "" },
                    { day: 7, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 6, isBelate: "" },
                    { day: 5, isBelate: "" },
                    { day: 4, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 3, isBelate: "" },
                    { day: 2, isBelate: "" },
                  ],
                },
                { colList: [{ day: 1, isBelate: "" }] },
              ];
            } else if (
              nowMonth != 2 &&
              (nowMonth == 4 ||
                nowMonth == 6 ||
                nowMonth == 9 ||
                nowMonth == 11)
            ) {
              console.log("这里不是2月，是小月30天");
              this.mockGrape = [
                {
                  colList: [
                    { day: 30, isBelate: "" },
                    { day: 29, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 28, isBelate: "" },
                    { day: 27, isBelate: "" },
                    { day: 26, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 25, isBelate: "" },
                    { day: 24, isBelate: "" },
                    { day: 23, isBelate: "" },
                    { day: 22, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 21, isBelate: "" },
                    { day: 20, isBelate: "" },
                    { day: 19, isBelate: "" },
                    { day: 18, isBelate: "" },
                    { day: 17, isBelate: "" },
                    { day: 16, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 15, isBelate: "" },
                    { day: 14, isBelate: "" },
                    { day: 13, isBelate: "" },
                    { day: 12, isBelate: "" },
                    { day: 11, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 10, isBelate: "" },
                    { day: 9, isBelate: "" },
                    { day: 8, isBelate: "" },
                    { day: 7, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 6, isBelate: "" },
                    { day: 5, isBelate: "" },
                    { day: 4, isBelate: "" },
                  ],
                },
                {
                  colList: [
                    { day: 3, isBelate: "" },
                    { day: 2, isBelate: "" },
                  ],
                },
                { colList: [{ day: 1, isBelate: "" }] },
              ];
            }
            // 2月润平年判断
            if (
              (nowYear % 4 == 0 && nowYear % 100 != 0) ||
              nowYear % 400 == 0
            ) {
              // 这里是闰年的2月，有29天
              if (nowMonth == 2) {
                console.log("这里是2月，闰年的，29天");
                this.mockGrape = [
                  {
                    colList: [
                      { day: 29, isBelate: "" },
                      { day: 28, isBelate: "" },
                      { day: 27, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 26, isBelate: "" },
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ];
              }
            } else {
              // 这里是平年的2月，只有28天
              if (nowMonth == 2) {
                console.log("这里是2月，平年的，28天");
                this.mockGrape = [
                  {
                    colList: [
                      { day: 28, isBelate: "" },
                      { day: 27, isBelate: "" },
                      { day: 26, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 25, isBelate: "" },
                      { day: 24, isBelate: "" },
                      { day: 23, isBelate: "" },
                      { day: 22, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 21, isBelate: "" },
                      { day: 20, isBelate: "" },
                      { day: 19, isBelate: "" },
                      { day: 18, isBelate: "" },
                      { day: 17, isBelate: "" },
                      { day: 16, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 15, isBelate: "" },
                      { day: 14, isBelate: "" },
                      { day: 13, isBelate: "" },
                      { day: 12, isBelate: "" },
                      { day: 11, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 10, isBelate: "" },
                      { day: 9, isBelate: "" },
                      { day: 8, isBelate: "" },
                      { day: 7, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 6, isBelate: "" },
                      { day: 5, isBelate: "" },
                      { day: 4, isBelate: "" },
                    ],
                  },
                  {
                    colList: [
                      { day: 3, isBelate: "" },
                      { day: 2, isBelate: "" },
                    ],
                  },
                  { colList: [{ day: 1, isBelate: "" }] },
                ];
              }
            }
          },
          getPeopleData() {
            var this_ = this;
            let mockdataa = [
              {
                userId: 1,
                name: "张三",
                username: "zhangsan哈哈",
                password:
                  "123123123123",
                gender: "1",
                status: 1,
                createUserId: null,
                windowId: "888888",
                deptId: "09090909090345",
                deptName:
                  "随便起的",
                roleId: "3,4,5",
                roleName: "善逸,甘露寺,小芭内",
                userImg: "123123.jpg",
                loginStatus: "Y",
                areaId: "123213123123",
                attendList: [
                  {
                    attendId: 6,
                    userId: "13",
                    attendDate: "2024-07-10",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 20,
                    userId: "13",
                    attendDate: "2024-07-09",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 39,
                    userId: "13",
                    attendDate: "2024-07-08",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 55,
                    userId: "13",
                    attendDate: "2024-07-05",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 65,
                    userId: "13",
                    attendDate: "2024-07-04",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 83,
                    userId: "13",
                    attendDate: "2024-07-03",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 93,
                    userId: "13",
                    attendDate: "2024-07-02",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 104,
                    userId: "13",
                    attendDate: "2024-07-01",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                ],
              },
              {
                userId: 6105820001,
                name: "善逸",
                username: "shanyi",
                password:
                  "678678678678",
                gender: "0",
                status: 1,
                windowId: null,
                deptId: null,
                deptName: null,
                roleId: "1",
                roleName: "哈哈",
                permission: null,
                userImg: "123/123/123/E1233/123123123-123123124.jpg",
                loginStatus: "Y",
                areaId: null,
                areaName: null,
                postIds: null,
                attendList: [
                  {
                    attendId: 17,
                    userId: "6105820001",
                    attendDate: "2024-07-09",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                  {
                    attendId: 77,
                    userId: "6105820001",
                    attendDate: "2024-07-08",
                    timeLength: null,
                    status: "0",
                    createTime: null,
                    updateTime: null,
                  },
                ],
              },
            ];
			// 这里发送请求
            axios
              .get(this.serverPath + "/haha/jiekou/renwu", {})
              .then(function (res) {
                if (res.data.code == 200) {
					// 这里模拟发送请求，请求回来的数据格式为mockdataa的数据格式
                  let dataa = res.data.data;
                  //   数据拼装
                  //   单独拼凑数组o防止数据层太深
                  //   最后拼凑进渲染数据
                  let o = dataa.map((it) => {
                    return {
                      name: it.name,
                      attendList: it.attendList,
                    };
                  });
                  let j;
                  o.map((item, index) => {
                    // 每次循环都将mockGrape初始化
                    this_.getDate();
                    j = this_.mockGrape;
                    j.forEach((it) => {
                      it.colList.map((i) => {
                        let a = item.attendList.find(
                          (itt) => this_.changeDate(itt.attendDate).day == i.day
                        );
                        if (a == undefined) {
                          i.isBelate = true;
                        } else {
                          i.isBelate = false;
                        }
                      });
                      return it;
                    });
                    o[index].attendList = j;
                  });
                  //   数据拼装
                  dataa.map((it) => {
                    it.attendList = o.find((i) => i.name == it.name).attendList;
                  });
                  this_.peopleList = dataa;
                }
              });
          },
          //   处理日期
		//   将日期分割开为{year:2024,month:3,day:3}处理为数字格式，匹配我们自己定义的数据格式
          changeDate(e) {
            let list = e.split("-");
            let year = list[0];
            let month = list[1];
            let day = list[2];
            return {
              year: Number(year),
              month: Number(month),
              day: Number(day),
            };
          },
        },
        mounted: function () {
          // console.log(this.getDate());
          this.getDate();
          this.getPeopleData();
        },
      });
    </script>
    <script src="js/polyfill.min.js"></script>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/lib.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/index.js"></script>
    <script src="js/js.cookie.js"></script>
    <script src="js/sm2.js"></script>
    <script src="js/Util.js"></script>
  </body>
</html>
前端必备！ECharts实现炫酷数据图表
小白菜的博客
05-18 538
本文旨在为前端开发者提供一份全面的ECharts使用指南，涵盖从入门到进阶的所有知识点。我们将探讨ECharts的核心功能、配置选项、性能优化以及实际应用场景，帮助读者掌握创建各种复杂数据可视化图表的能力。本文首先介绍ECharts的基本概念和核心原理，然后深入讲解各种图表类型的实现方法，接着通过实战案例展示ECharts的高级应用，最后讨论性能优化和未来发展趋势。ECharts：百度开源的一个使用JavaScript实现的开源可视化库Option：ECharts中的配置对象，用于定义图表的各个方面。
grapesjs-echarts:葡萄js的图表
05-12
Grapesjs图表 这是添加的WORK IN PROGRESS版本 :chart_increasing: 使用库将组件图表绘制到 。 在尝试一下。 检查基本结果。 可用组件 :bar_chart: 当前只有4个图表组件。 Bars Chart Pie Chart Donut Chart Lines Chart 还有一个特殊的Custom Chart ，它允许您通过以JSON字符串格式添加echarts.options来创建任何类型的图表，同时我继续带来更多的Chart Components和Settings 。 可用设定 主题 项目 名称 价值 颜色 此设置适用于除“ Custom Chart所有组件。 I18n支持 如果您想自定义此应用中使用的一些字符串，可以使用pluginOpts传递一组翻译，或者如果您只想更改语言，则可以传递您喜欢的本地语言（现在介于英语和西班牙语之间），我欢迎您其他语言的PR，仍然是小的插件，因
葡萄图的封装，以及调用
曾小超的博客
01-06 1034
效果图： 代码： 1.本地调用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>封装葡萄图之路</title> <script src="h
葡萄图管理软件
10-23
用EBPRO制作的葡萄图绩效管理软件，直接解压在D盘启动快捷方式运行。缺少插件的修补对应插件即可。
葡萄图所需葡萄（SVG画图）
曾小超的博客
11-27 1083
<!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect x="-1" y="-1" width="1662" heig...
葡萄图对象（通过New和传参实现）
01-23
通过New和传参，根据多个数据可以循环出多个葡萄图，以及可以给葡萄图设值，适合查询页面和修改页面
Vue常用插件汇总(1)
2401_84153285的博客
05-07 1228
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
毕业设计：基于MySql+SpringBoot+vue的职工管理系统设计与实现.zip
10-27
基于此背景，本毕业设计提出了一套基于MySql数据库、SpringBoot框架和vue前端技术构建的职工管理系统，旨在实现一个高效、稳定、易用的职工管理平台。 本系统采用MySql作为后端数据库，MySql是一个广泛使用的开源...
基于springboot+vue实现的办公管理系统 （源码+L文+ppt）4-116
2402_83796960的博客
12-06 1167
摘 要办公管理系统是一款集成了部门信息、员工管理、考勤签到、请假审批、工作日程安排、会议信息记录及签到、文件资料存储、通知公告发布和留言建议收集等多项功能的综合性软件。它旨在简化日常办公流程，提高工作效率，通过系统化的信息管理，确保数据的准确性和安全性。使用该办公管理系统，企业能够有效地监控和管理员工的出勤情况，优化工作流程，加强内部沟通，同时促进文档资料的电子化和标准化，保障重要信息的及时传达与共享。系统还提供了一个平台，让员工可以提出建议或反馈，增强企业内部互动和员工参与度。
基于Ruoyi+uniapp实现学生考勤系统源码+项目说明（学生考勤（普通、位置、二维码签到）等其他模块功能）.zip
最新发布
12-08
学生考勤系统源码的提供，使得开发者能够直接接触到系统的构建过程，包括但不限于数据库设计、后端API的编写、前端页面的实现以及移动端适配等关键步骤。系统不仅包含了基础的学生签到功能，还额外引入了位置签到和...
基于java+springboot+vue实现的企业OA管理系统（文末源码+Lw）131
2402_83796960的博客
07-21 477
基于SpringBoot+Vue的实现的企业OA管理系统（源码+数据库+万字Lun文+流程图+ER图+结构图+演示视频+软件包）
计算机毕业设计JAVA葡萄酒销售管理系统mybatis+源码+调试部署+系统+数据库+lw
07-11 816
计算机毕业设计JAVA葡萄酒销售管理系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：idea eclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数 据 库：MySQL5.7/8.0源码...
uniapp vue3 使用canvas绘制图片
初遇你时动了情
07-29 1282
需要注意如果使用popup这种控制显示隐藏的话，canvas只有第一次才会显示，第二次popup显示后canvas不显示了解决方案使用v-if控制canvas显示。
葡萄插件整理1 常用方法
潘晓宇(panxiaoyu)的专栏
01-25 641
・dataKey Field 　Javascript 　$("#element").wijgrid({ columns: [{ dataKey: "ProductID" }]}); ・doRefresh 　$("#element").wijgrid("doRefresh"); ・setSize 　Javascript 　$("#element").wijgrid("setSize",
练习：html
m0_51996043的博客
02-14 166
1.水果展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3 align="center">水果展示</h4> <hr color="brown" size="2"> <table align="center"&
Ffast-FE 基于vue iview 前后分离后台管理系统前端快速开发解决方案
葡萄园下Debug的博客
06-07 3356
https://github.com/ZhiYiDai/Ffast-FE文档继续完善中，JAVA后端快速解决方案也将再近期开源，欢迎点个starFfast-FE基于vue iview后台管理系统前端快速开发解决方案Build Setup# install dependencies npm install or yarn # serve with hot reload at localhost:8...
【解析+示例】2种方法，通过SpreadJS在前端实现甘特图
葡萄城技术团队博客
05-11 1300
如果一个项目由多个任务组成，而任务之间又有关联，我们该怎样准确的显示项目整体进度呢？ 使用甘特图，应该是最好的方式。 甘特图，不仅能够让管理者实时有效的掌握项目进度和资源分配，同时能够加强过程的可视化管理、人员实时沟通。因此，在企业项目管理工作中被广泛应用。 甘特图效果 由于项目管理的工作往往存在时间上的交叉。在项目开始之前，领导都会要求我们先查找可以并行的事项，并将它们安排在一起，以此实现对时间的高效利用。 合理的使用甘特图，可以把每天的工作安排得当。 Excel在2010版本中就已经内置了甘特图类型，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值