ElementU日历Demo

嗯,项目需求有这个,试着写了一个Demo看看效果。有好的建议请小伙伴留言

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body style="display: flex;justify-content: center;">
  <div id="app" style="display: flex;justify-content: center;width: 80%;;margin-top: 50px;">
    <el-card class="box-card">
      <el-calendar>
        <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell" slot-scope="{date, data}">
          <div :class="data.isSelected ? 'is-selected' : ''">
            <p class="dayItem">{{ date.getDate()}}</p>
            <div style="display: flex;flex-wrap: wrap;">
              <div v-for="(item,index) in initDataFu(date)" :key="index">
                <el-popover trigger="hover" placement="top-end" title="计划内容" close-delay="0">
                    <div style=" flex: 0 50px; margin: 5px;width: 260px;">
                    <el-date-picker v-model="dateform(item)" type="daterange" range-separator="至"  :editable="false" :clearable="false" size="mini" style="margin: 2.5px;width: 250px;"
                      start-placeholder="开始日期" end-placeholder="结束日期">
                      
                    </el-date-picker><br>
                    <!-- <template>
                      <el-radio v-model="radio" label="1">备选项</el-radio>
                      <el-radio v-model="radio" label="2">备选项</el-radio>
                    </template> -->
                    <el-input size="mini"   v-model="item[1].name" style="margin: 2.5px;width: 250px;" readonly>
                      <template slot="prepend">内容:</template>
                    </el-input>
                    <el-input size="mini"   v-model="item[1].adderss" style="margin: 2.5px;width: 250px;" readonly>
                      <template slot="prepend">地点</template>
                    </el-input>
                  </div>
                  <el-tag size="mini" @click="disabled = !disabled" slot="reference" :type="types(index)"
                    style="margin: 2px;"> {{ item[0]}}</el-tag>
                </el-popover>
              </div>

            </div>
          </div>
          <!-- <div style="display: flex;justify-content:center;flex-wrap:wrap;"> -->
          <div>
          </div>

  </div>
  </template>
  </el-calendar>
  </el-card>

  </div>
</body>



<script>
  new Vue({
    el: '#app',
    data() {
      return {
        value: new Date(),
        disabled: '',
        visible: false,
        dateRange: [],
        initData: {
          "userList": [
            {
              "userId": "1111",
              "userName": "admin",
              "projList": [
                {
                  "id": "08c6ac458e8a420daa87",
                  "userId": "1111",
                  "planId": "d1451de7feee46499412",
                  "projId": "5753a75fe5bf4d6c8b0b",
                  "type": 0,
                  "startDate": "2020-10-01",
                  "endDate": "2020-10-20",
                  "name": "9999",
                  "address": null,
                  "userType": 0,
                  "userMajor": null,
                  "releaseState": 0,
                  "ver": 0,
                  "createTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 303,
                    "dayOfMonth": 29,
                    "hour": 10,
                    "minute": 34,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 32,
                    "dayOfWeek": "THURSDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "createUser": "1111",
                  "updateTime": null,
                  "updateUser": null
                }, {
                  "id": "395ad5ffe1b04553a53b",
                  "userId": "1111",
                  "planId": "d1451de7feee46499412",
                  "projId": null,
                  "type": 0,
                  "startDate": "2020-10-21",
                  "endDate": "2020-10-23",
                  "name": "休假中",
                  "address": "1111",
                  "userType": 0,
                  "userMajor": "2",
                  "releaseState": 0,
                  "ver": 0,
                  "createTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 17,
                    "minute": 26,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 21,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "createUser": "1111",
                  "updateTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 17,
                    "minute": 26,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 21,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "updateUser": null
                }, {
                  "id": "6fd149272ac34c18b4c6",
                  "userId": "1111",
                  "planId": "d1451de7feee46499412",
                  "projId": "5753a75fe5bf4d6c8b0b",
                  "type": 0,
                  "startDate": "2020-10-22",
                  "endDate": "2020-10-22",
                  "name": "测试项目1009-2",
                  "address": "清水河",
                  "userType": 0,
                  "userMajor": "3",
                  "releaseState": 0,
                  "ver": 0,
                  "createTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 32,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 38,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "createUser": "1111",
                  "updateTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 32,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 38,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "updateUser": null
                }, {
                  "id": "75b5e335597d4adc852b",
                  "userId": "1111",
                  "planId": "d1451de7feee46499412",
                  "projId": null,
                  "type": 1,
                  "startDate": "2020-10-12",
                  "endDate": "2020-10-30",
                  "name": "asdasdasda",
                  "address": "北京",
                  "userType": 1,
                  "userMajor": "",
                  "releaseState": 0,
                  "ver": 0,
                  "createTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 23,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 14,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "createUser": "1111",
                  "updateTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 23,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 14,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "updateUser": null
                }, {
                  "id": "88128ddaa860432c920b",
                  "userId": "1111",
                  "planId": "d1451de7feee46499412",
                  "projId": "f0e51da27e8e4390bf49",
                  "type": 0,
                  "startDate": "2020-10-29",
                  "endDate": "2020-11-02",
                  "name": "测试项目0907-3",
                  "address": "上海",
                  "userType": 0,
                  "userMajor": "2",
                  "releaseState": 0,
                  "ver": 0,
                  "createTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 23,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 58,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "createUser": "1111",
                  "updateTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 23,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 58,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "updateUser": null
                }, {
                  "id": "98385c6c80dc4a64bfe3",
                  "userId": "1111",
                  "planId": "30dec21ce4bc4ad58a43",
                  "projId": "57cfa87c6ba14fe480bf",
                  "type": 0,
                  "startDate": "2020-10-02",
                  "endDate": "2020-10-23",
                  "name": "1026-LRL-评审权限测试",
                  "address": "77",
                  "userType": 0,
                  "userMajor": "1",
                  "releaseState": 0,
                  "ver": 0,
                  "createTime": {
                    "month": "NOVEMBER",
                    "year": 2020,
                    "dayOfYear": 315,
                    "dayOfMonth": 10,
                    "hour": 16,
                    "minute": 4,
                    "monthValue": 11,
                    "nano": 0,
                    "second": 31,
                    "dayOfWeek": "TUESDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "createUser": "1111",
                  "updateTime": null,
                  "updateUser": null
                }, {
                  "id": "ae11662ca3e74d91a537",
                  "userId": "1111",
                  "planId": "d1451de7feee46499412",
                  "projId": "95ca510eddf741a8b424",
                  "type": 0,
                  "startDate": "2020-10-19",
                  "endDate": "2020-10-22",
                  "name": "测试0907-4",
                  "address": "杭州",
                  "userType": 0,
                  "userMajor": "3",
                  "releaseState": 0,
                  "ver": 0,
                  "createTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 28,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 12,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "createUser": "1111",
                  "updateTime": {
                    "month": "OCTOBER",
                    "year": 2020,
                    "dayOfYear": 297,
                    "dayOfMonth": 23,
                    "hour": 16,
                    "minute": 28,
                    "monthValue": 10,
                    "nano": 0,
                    "second": 12,
                    "dayOfWeek": "FRIDAY",
                    "chronology": {
                      "id": "ISO",
                      "calendarType": "iso8601"
                    }
                  },
                  "updateUser": null
                }]
            }, {
              "userId": "13f673b3998b42e89613",
              "userName": "项目经理",
              "projList": []
            }, {
              "userId": "1f9f869a6afd43988b82",
              "userName": "sj102",
              "projList": [{
                "id": "009b151a5ff74dffae82",
                "userId": "1f9f869a6afd43988b82",
                "planId": "30dec21ce4bc4ad58a43",
                "projId": "310ec5a1cf274dea9356",
                "type": 0,
                "startDate": "2020-10-08",
                "endDate": "2020-10-09",
                "name": "测试-2020-11-03-01",
                "address": "",
                "userType": 0,
                "userMajor": "1",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 308,
                  "dayOfMonth": 3,
                  "hour": 13,
                  "minute": 41,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 6,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "35e7437cf1c64aab90a3",
                "userId": "1f9f869a6afd43988b82",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试项目1009-2",
                "address": "",
                "userType": 0,
                "userMajor": null,
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 15,
                  "minute": 48,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 41,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "69d4244af88245889de8",
                "userId": "1f9f869a6afd43988b82",
                "planId": "30dec21ce4bc4ad58a43",
                "projId": "310ec5a1cf274dea9356",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试-2020-11-03-01",
                "address": "3366666",
                "userType": 0,
                "userMajor": "3",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 16,
                  "minute": 8,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 50,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "e85ae8bac3e442dc92c5",
                "userId": "1f9f869a6afd43988b82",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-15",
                "endDate": "2020-10-16",
                "name": "测试项目1009-2",
                "address": "45445465465",
                "userType": 0,
                "userMajor": "2",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 9,
                  "minute": 20,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 12,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }, {
              "userId": "2ea262356baf4c5c8f1d",
              "userName": "ps102",
              "projList": [{
                "id": "20c3fe8c93da4eda9a41",
                "userId": "2ea262356baf4c5c8f1d",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-15",
                "endDate": "2020-10-16",
                "name": "测试项目1009-2",
                "address": "45445465465",
                "userType": 0,
                "userMajor": "3",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 9,
                  "minute": 20,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 12,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "e6061bad513040bab034",
                "userId": "2ea262356baf4c5c8f1d",
                "planId": "30dec21ce4bc4ad58a43",
                "projId": "fc0d7aaeca3148738287",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试-2020-11-03-02",
                "address": "8946465",
                "userType": 0,
                "userMajor": null,
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 16,
                  "minute": 2,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 4,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }, {
              "userId": "3356769b538e4e839e08",
              "userName": "刘小城",
              "projList": []
            }, {
              "userId": "51bd1f014df943ea8dcb",
              "userName": "设计单位1",
              "projList": []
            }, {
              "userId": "5d038e8f4d0c4a1cb754",
              "userName": "电气二次",
              "projList": [{
                "id": "1563bb6647154cb88273",
                "userId": "5d038e8f4d0c4a1cb754",
                "planId": "30dec21ce4bc4ad58a43",
                "projId": "310ec5a1cf274dea9356",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试-2020-11-03-01",
                "address": "3366666",
                "userType": 0,
                "userMajor": "1",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 16,
                  "minute": 8,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 50,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }, {
              "userId": "678ac8c4fce44242bb1d",
              "userName": "副总师",
              "projList": []
            }, {
              "userId": "741d93d40c1546c3a250",
              "userName": "评审101",
              "projList": [{
                "id": "530df0a93bd34d9db135",
                "userId": "741d93d40c1546c3a250",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-01",
                "endDate": "2020-10-20",
                "name": "9999",
                "address": null,
                "userType": 0,
                "userMajor": null,
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "OCTOBER",
                  "year": 2020,
                  "dayOfYear": 303,
                  "dayOfMonth": 29,
                  "hour": 10,
                  "minute": 34,
                  "monthValue": 10,
                  "nano": 0,
                  "second": 32,
                  "dayOfWeek": "THURSDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "788c17e52c9349bf96f8",
                "userId": "741d93d40c1546c3a250",
                "planId": "d1451de7feee46499412",
                "projId": null,
                "type": 1,
                "startDate": "2020-10-19",
                "endDate": "2020-10-14",
                "name": "休假中",
                "address": "北京",
                "userType": 1,
                "userMajor": "",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "OCTOBER",
                  "year": 2020,
                  "dayOfYear": 297,
                  "dayOfMonth": 23,
                  "hour": 16,
                  "minute": 22,
                  "monthValue": 10,
                  "nano": 0,
                  "second": 38,
                  "dayOfWeek": "FRIDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": {
                  "month": "OCTOBER",
                  "year": 2020,
                  "dayOfYear": 297,
                  "dayOfMonth": 23,
                  "hour": 16,
                  "minute": 22,
                  "monthValue": 10,
                  "nano": 0,
                  "second": 38,
                  "dayOfWeek": "FRIDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "updateUser": null
              }, {
                "id": "a394420334ec4aa0be75",
                "userId": "741d93d40c1546c3a250",
                "planId": "30dec21ce4bc4ad58a43",
                "projId": "310ec5a1cf274dea9356",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试-2020-11-03-01",
                "address": "3333",
                "userType": 0,
                "userMajor": "4",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 16,
                  "minute": 7,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 56,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }, {
              "userId": "7e5b6dbccb69447a8647",
              "userName": "变电土建",
              "projList": [{
                "id": "e3ac463dfa4e474d9358",
                "userId": "7e5b6dbccb69447a8647",
                "planId": "18d99c1b7c264b3e8607",
                "projId": null,
                "type": 1,
                "startDate": "2020-10-07",
                "endDate": "2020-10-08",
                "name": "11123",
                "address": "111",
                "userType": 0,
                "userMajor": "1",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 308,
                  "dayOfMonth": 3,
                  "hour": 14,
                  "minute": 40,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 26,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }, {
              "userId": "82eba4b7396e4565be6e",
              "userName": "js102",
              "projList": [{
                "id": "091395f874ac472cb0d1",
                "userId": "82eba4b7396e4565be6e",
                "planId": "30dec21ce4bc4ad58a43",
                "projId": "fc0d7aaeca3148738287",
                "type": 0,
                "startDate": "2020-10-12",
                "endDate": "2020-10-13",
                "name": "测试-2020-11-03-02",
                "address": "78",
                "userType": 0,
                "userMajor": "1",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 16,
                  "minute": 3,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 27,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "2ac075f1717a4f5c89a1",
                "userId": "82eba4b7396e4565be6e",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试项目1009-2",
                "address": "231",
                "userType": 0,
                "userMajor": "3",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 9,
                  "minute": 24,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 26,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }, {
              "userId": "a3f4dc74a9944e61ba08",
              "userName": "部门主任",
              "projList": []
            }, {
              "userId": "a7c1b098477f4aa6a420",
              "userName": "电气一次",
              "projList": [{
                "id": "62542342bc6d4355b885",
                "userId": "a7c1b098477f4aa6a420",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试项目1009-2",
                "address": "231",
                "userType": 0,
                "userMajor": "2",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 9,
                  "minute": 24,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 26,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "6b97c7ef62e548f4b74e",
                "userId": "a7c1b098477f4aa6a420",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-08",
                "endDate": "2020-10-09",
                "name": "测试项目1009-2",
                "address": "IPIPOi",
                "userType": 0,
                "userMajor": "2",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 9,
                  "minute": 32,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 15,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }, {
              "userId": "fe73b4c46ae84906b783",
              "userName": "汇总人",
              "projList": [{
                "id": "abb23e99279e43d59fdd",
                "userId": "fe73b4c46ae84906b783",
                "planId": "18d99c1b7c264b3e8607",
                "projId": "91b69e8bd3ac4d319828",
                "type": 0,
                "startDate": "2020-10-18",
                "endDate": "2020-10-19",
                "name": "测试项目1009-1",
                "address": "12",
                "userType": 0,
                "userMajor": "2",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 308,
                  "dayOfMonth": 3,
                  "hour": 14,
                  "minute": 18,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 37,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "ce895eabfde7428d81a8",
                "userId": "fe73b4c46ae84906b783",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-03",
                "endDate": "2020-10-04",
                "name": "测试项目1009-2",
                "address": "23423423",
                "userType": 0,
                "userMajor": null,
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 9,
                  "minute": 22,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 55,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }, {
                "id": "d2ac7a83ad5c4cda9f8e",
                "userId": "fe73b4c46ae84906b783",
                "planId": "d1451de7feee46499412",
                "projId": "5753a75fe5bf4d6c8b0b",
                "type": 0,
                "startDate": "2020-10-15",
                "endDate": "2020-10-16",
                "name": "测试项目1009-2",
                "address": "45445465465",
                "userType": 0,
                "userMajor": "1",
                "releaseState": 0,
                "ver": 0,
                "createTime": {
                  "month": "NOVEMBER",
                  "year": 2020,
                  "dayOfYear": 315,
                  "dayOfMonth": 10,
                  "hour": 9,
                  "minute": 20,
                  "monthValue": 11,
                  "nano": 0,
                  "second": 12,
                  "dayOfWeek": "TUESDAY",
                  "chronology": {
                    "id": "ISO",
                    "calendarType": "iso8601"
                  }
                },
                "createUser": "1111",
                "updateTime": null,
                "updateUser": null
              }]
            }]
        }
      }
    },
    mounted() {
      this.initPlanDate();
    },
    methods: {
      dateform(vle){
        return [vle[1].startDate,vle[1].endDate];
      },
      types(index) {
        let style = ['success', 'info', 'warning', 'danger'];
        return style[this.randomNum(0, 4)];
      },
      initDataFu(day) {
        let item = this.initData.userList;
        let dateDay = new Date(day);
        let userList = new Map();
        if ((dateDay.getMonth() + 1) == 10) {
          if (item.length == 0) {
            return userList;
          } else {
            for (let i = 0; i < item.length; i++) {
              let boo = false;
              item[i].projList.forEach(e => {
                let startDate = new Date(Date.parse(e.startDate.replace(/-/g, "/")));
                let endDate = new Date(Date.parse(e.endDate.replace(/-/g, "/")));
                console.log(endDate.getDate())
                console.log(startDate.getDate())
                console.log(dateDay.getDate())
                if ((startDate.getDate() <= dateDay.getDate() && endDate.getDate() >= dateDay.getDate()))  {
                  if (userList.has(item[i])) {
                    userList.set(item[i].userName, userList.get(item[i]) + ";" + e)
                  } else {
                    userList.set(item[i].userName, e);
                  }
                }
              });
            }

            return userList;
          }
        }
        console.log((dateDay.getMonth() + 1), dateDay.getDate(), item)

      },
      // 数据初始化
      initPlanDate() {

      },
      randomNum(minNum, maxNum) {
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
          case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
          default:
            return 0;
            break;
        }
      },
      crunt(data) {
        userdata.forEach(element => {
          console.log(element);
          userName = element.userName;
        });
        new Date(Date.parse("".replace(/-/g, "/")));
        return userName;
      }
    },
    props: {},
    computed: {},

    created() {

    },
    watch: {},
  })
</script>
<style>
  .is-selected {
    color: #1989FA;

  }

  .dayItem {
    position: absolute;
    margin-top: 1%;
    margin-left: 8%;
    font-size: 20px;
    opacity: 0.2;
  }

  .current .is-selected {}
</style>

</html>

 

posted @ 2020-11-13 20:30  山河已无恙  阅读(246)  评论(0编辑  收藏  举报