@codernote/plan-hours

计划软件 - hours

计划软件右侧hours

安装

npm install @codernote/plan-hours

使用

// 2.0版本，组件使用示例
<template>
  <PlanHours
    ref="PlanHours"
    :goalTable="goalTable"
    :day="hoursFocusIdx"
    :show="showHours"
    :importType="1"
    @hide="handleHideHours"
    @updateHoursInfo="updateHoursInfo"
    @taskStatusChange="taskStatusChange"
  />
</template>

<script>

import {
  PlanHours, // 组件
  hoursConstant, // 常量
} from "@codernote/plan-hours";

export default {
  components: {
    PlanHours,
  },
  data() {
    return {
      showHours: false,
      tempInfo: {},       // 所有已经安排的任务：{hoursFocusIdx: {level1:[任务], level2:[任务], level3:[任务]}}
      hoursFocusIdx: -1,  // 任务所属时间天数
      goalTable: {
        goalMap: new Map(), // goalMap 只有level1和level2任务，数据格式如下：
        // {
        //   任务所属项目Id: {
        //     MEASURE_ENUM枚举: {
        //       hoursFocusIdx: {
        //         ...任务信息
        //       }
        //     }
        //   }
        // }
        hoursInfo: {} // 所有已经安排的任务, 数据格式如下：
        // {
        //   hoursFocusIdx: {
        //     level1:[任务],
        //     level2:[任务],
        //     level3:[任务]
        //   }
        // }
      }
    }
  },
  mounted() { 
    // 初始化测试数据
    this.initData()
  },
  methods: {
    initData() {
      this.hoursFocusIdx = 13709
      this.goalTable = {
        goalMap: {
          "1720967835253": {
              "6": {
                  "13709": {
                      "item_id": "1720967835253",
                      "type": 6,
                      "idx": 13709,
                      "desc": "任务1",
                      "finish": 0,
                      "bold": 0,
                      "isAssigned": 1,
                      "assignStartTime": "13:58",
                      "assignEndTime": "14:58",
                      "created_at": 1720969641966,
                      "updated_at": 1720970065241,
                      "deleted_at": 0
                  }
              }
          },
          "1720970094340": {
              "6": {
                  "13709": {
                      "bold": 1,
                      "finish": 0,
                      "desc": "重要任务",
                      "idx": 13709,
                      "item_id": "1720970094340",
                      "isAssigned": 1,
                      "assignStartTime": "11:58",
                      "assignEndTime": "12:58",
                      "type": 6,
                      "created_at": 1720970102545,
                      "updated_at": 1720970102545,
                      "deleted_at": 0,
                      "lastInsertRowid": 33,
                      "success": true
                  }
              }
          }
        },
        hoursInfo: {
          "13709": {
              "level1": [
                  {
                      "bold": 1,
                      "finish": 0,
                      "desc": "重要任务",
                      "idx": 13709,
                      "item_id": "1720970094340",
                      "isAssigned": 0,
                      "assignStartTime": "11:58",
                      "assignEndTime": "12:58",
                      "type": 6,
                      "created_at": 1720970102545,
                      "updated_at": 1720970102545,
                      "deleted_at": 0,
                      "lastInsertRowid": 33,
                      "success": true,
                      "level": "level1",
                      "height": "46.94117647058823",
                      "top": "233.52941176470588"
                  }
              ],
              "level2": [
                  {
                      "item_id": "1720967835253",
                      "type": 6,
                      "idx": 13709,
                      "desc": "任务1",
                      "finish": 0,
                      "bold": 0,
                      "isAssigned": 0,
                      "assignStartTime": "13:58",
                      "assignEndTime": "14:58",
                      "created_at": 1720969641966,
                      "updated_at": 1720970065241,
                      "deleted_at": 0,
                      "level": "level2",
                      "height": "46.94117647058823",
                      "top": 327
                  }
              ],
              "level3": [
                  {
                      "idx": 13709,
                      "desc": "新建任务",
                      "finish": 0,
                      "assignStartTime": "15:26",
                      "assignEndTime": "16:26",
                      "created_at": 1720961199752,
                      "updated_at": 1720961200251,
                      "deleted_at": 0,
                      "level": "level3",
                      "item_id": "1720961199752",
                      "top": "395.8705882352941",
                      "height": "46.94117647058823"
                  }
              ]
          }
        }
      }
      this.showHours = true
    },
    /**
     * 修改hourseInfo数据
     * @param {Number} idx 距离1987-01-01 00:00:00的天数
     * @param {any} data 数据
     */
    updateHoursInfo(idx, data = {}) {
      this.goalTable.hoursInfo[idx] = data
    },
    /**
     * 任务状态变更
     * @param {String} tableName 操作的表: hoursInfo || goalTree
     * @param {Number} action 任务类型  1:添加  2:修改  3:取消
     * @param {Object} item 任务数据
     */
    taskStatusChange(enter) {
      const { tableName, action, item } = enter
      switch(action) {
        case hoursConstant.ARRANGE_TASK_TYPE.add:
          console.log('添加', tableName, item)
          break;
        case hoursConstant.ARRANGE_TASK_TYPE.update:
          console.log('修改', tableName, item)
          break;
        case hoursConstant.ARRANGE_TASK_TYPE.del:
          console.log('删除', tableName, item)
          break;
      }
    }
  }
}
</script>

props

<PlanHours
  {/* 必需，写死，mixins调用 */}
  ref="hoursPanel"

  {/* 必需，数据体 */}
  :goalTable="goalTable"

  {/* 必需，任务所属天数 */}
  :day="noteList"

  {/* 是否显示当前组件，默认false */}
  :show="true"
  
  {/* 选传，引入端类型， 1: electron  2、H5; 默认为1 */}
  :importType="1"

  {/* 选传，头部配置 */}
  :headConf="{
    dateShow: true, // 日期显示
    clockStart: 7, // 开始钟点时间
    clockEnd: 24, // 结束钟点时间
    clockShow: true, // 显示钟点区间
  }"

  {/* 选传，主题色 */}
  :themeColor="{
    timeScale: '#e7e7e7', // 时间轴背景色
    timeLine: 'green', // 时间线颜色
    taskBorderColor: '#008080', // 任务active边框色
    task1Back: '#909399', // 左侧任务背景色
    task2Back: '#c0c4cc', // 中间任务背景色
    task3Back: '#e4e7ed', // 右侧任务背景色
  }"
    
  {/* 可选，关闭窗口 */}
  @hide="handleHideHours"

  {/* 必需，修改hourseInfo数据, 参考上方模版 */}
  @updateHoursInfo="updateHoursInfo"

  {/* 可选，任务状态变更通知，参考上方模版 */}
  @taskStatusChange="taskStatusChange"
/>

helper

/**
 * 获取当前时间的尺度Idx
 * @returns 距离1987-01-01 00:00:00的天数
 */
const getCurrentDayIdx = () => {
    const dayTimeStamp = 24 * 60 * 60 * 1000
    const beginTime = new Date('1987-01-01 00:00:00').getTime()
    const pastTime = Date.now() - beginTime
    return parseInt(pastTime / dayTimeStamp)
}

constants

/**
 * 微观枚举
 */
const MEASURE_ENUM = {
    lives: 0, // 生
    expect: 1, // 期
    year: 2, // 年
    quarter: 3, // 季
    month: 4, // 月
    week: 5, // 周
    day: 6 // 日
}

发布

npm publish