feat: 添加甘特图示例

build/optimize.ts

@@ -45,6 +45,7 @@ const include = [
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "vue-waterfall-plugin-next",
+  "@infectoone/vue-ganttastic",
   "@wangeditor/editor-for-vue",
   "vuedraggable/src/vuedraggable"
 ];

locales/en.yaml

@@ -71,6 +71,7 @@ menus:
   hsTag: Tag
   hsStatistic: Statistic
   hsCollapse: Collapse
+  hsGanttastic: Gantt Chart
   hsProgress: Progress
   hsUpload: File Upload
   hsCheckCard: CheckCard

locales/zh-CN.yaml

@@ -71,6 +71,7 @@ menus:
   hsTag: 标签
   hsStatistic: 统计组件
   hsCollapse: 折叠面板
+  hsGanttastic: 甘特图
   hsProgress: 进度条
   hsUpload: 文件上传
   hsCheckCard: 多选卡片

package.json

@@ -50,6 +50,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@howdyjs/mouse-menu": "^2.1.3",
+    "@infectoone/vue-ganttastic": "^2.3.1",
     "@logicflow/core": "^1.2.22",
     "@logicflow/extension": "^1.2.22",
     "@pureadmin/descriptions": "^1.2.1",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@howdyjs/mouse-menu':
     specifier: ^2.1.3
     version: 2.1.3(vue@3.4.21)
+  '@infectoone/vue-ganttastic':
+    specifier: ^2.3.1
+    version: 2.3.1(dayjs@1.11.10)(vue@3.4.21)
   '@logicflow/core':
     specifier: ^1.2.22
     version: 1.2.22
@@ -1312,6 +1315,19 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: true
 
+  /@infectoone/vue-ganttastic@2.3.1(dayjs@1.11.10)(vue@3.4.21):
+    resolution: {integrity: sha512-2P53V2N3SagJhqDMogcfpm50qIhqxEINufJBdWUGGZutnEquLg4CQThHysJsNZ11tght8TUPlBM10wHnZAMGiQ==}
+    peerDependencies:
+      dayjs: ^1.11.5
+      vue: ^3.2.40
+    dependencies:
+      '@vueuse/core': 9.13.0(vue@3.4.21)
+      dayjs: 1.11.10
+      vue: 3.4.21(typescript@5.4.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /@intlify/bundle-utils@7.5.1(vue-i18n@9.10.1):
     resolution: {integrity: sha512-UovJl10oBIlmYEcWw+VIHdKY5Uv5sdPG0b/b6bOYxGLln3UwB75+2dlc0F3Fsa0RhoznQ5Rp589/BZpABpE4Xw==}
     engines: {node: '>= 14.16'}

src/components/ReIcon/src/offlineIcon.ts

@@ -31,6 +31,7 @@ import Links from "@iconify-icons/ri/links-fill";
 import Search from "@iconify-icons/ri/search-line";
 import FlUser from "@iconify-icons/ri/admin-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
+import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
 import LoginLog from "@iconify-icons/ri/window-line";
 import Artboard from "@iconify-icons/ri/artboard-line";
 import SystemLog from "@iconify-icons/ri/file-search-line";
@@ -52,6 +53,7 @@ addIcon("ri:table-line", Table);
 addIcon("ri:search-line", Search);
 addIcon("ri:admin-line", FlUser);
 addIcon("ri:settings-3-line", Setting);
+addIcon("ri:bar-chart-horizontal-line", BarChart);
 addIcon("ri:window-line", LoginLog);
 addIcon("ri:file-search-line", SystemLog);
 addIcon("ri:artboard-line", Artboard);

src/router/enums.ts

@@ -2,30 +2,32 @@
 
 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
   vueflow = 1,
-  components = 2,
+  ganttastic = 2,
-  able = 3,
+  components = 3,
-  table = 4,
+  able = 4,
-  list = 5,
+  table = 5,
-  result = 6,
+  list = 6,
-  error = 7,
+  result = 7,
-  frame = 8,
+  error = 8,
-  nested = 9,
+  frame = 9,
-  permission = 10,
+  nested = 10,
-  system = 11,
+  permission = 11,
-  monitor = 12,
+  system = 12,
-  tabs = 13,
+  monitor = 13,
-  about = 14,
+  tabs = 14,
-  editor = 15,
+  about = 15,
-  flowchart = 16,
+  editor = 16,
-  formdesign = 17,
+  flowchart = 17,
-  board = 18,
+  formdesign = 18,
-  ppt = 19,
+  board = 19,
-  guide = 20,
+  ppt = 20,
-  menuoverflow = 21;
+  guide = 21,
+  menuoverflow = 22;
 
 export {
   home,
   vueflow,
+  ganttastic,
   components,
   able,
   table,

src/router/modules/ganttastic.ts

@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { ganttastic } from "@/router/enums";
+
+export default {
+  path: "/ganttastic",
+  redirect: "/ganttastic/index",
+  meta: {
+    icon: "ri:bar-chart-horizontal-line",
+    title: $t("menus.hsGanttastic"),
+    rank: ganttastic
+  },
+  children: [
+    {
+      path: "/ganttastic/index",
+      name: "Ganttastic",
+      component: () => import("@/views/ganttastic/index.vue"),
+      meta: {
+        title: $t("menus.hsGanttastic"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/views/ganttastic/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://zunnzunn.github.io/vue-ganttastic/introduction.html
+import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
+
+const context = ref([
+  [
+    {
+      week: "星期一",
+      beginDate: "06:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "0",
+        hasHandles: true,
+        label: "需求收集和分析  负责人：小张",
+        style: {
+          background: "#e96560"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期二",
+      beginDate: "09:00",
+      endDate: "18:00",
+      ganttBarConfig: {
+        id: "1",
+        hasHandles: true,
+        label: "系统设计  负责人：小强",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期三",
+      beginDate: "07:00",
+      endDate: "20:00",
+      ganttBarConfig: {
+        id: "2",
+        hasHandles: true,
+        label: "编码实现  负责人：老李",
+        style: {
+          background: "#77d6fa"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期四",
+      beginDate: "06:00",
+      endDate: "21:00",
+      ganttBarConfig: {
+        id: "3",
+        hasHandles: true,
+        label: "编码实现  负责人：小明",
+        style: {
+          color: "#fff",
+          background: "#1b2a47"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期五",
+      beginDate: "05:00",
+      endDate: "19:00",
+      ganttBarConfig: {
+        id: "4",
+        hasHandles: true,
+        label: "内部测试  负责人：小雪",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期六",
+      beginDate: "10:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "5",
+        hasHandles: true,
+        label: "系统优化和文档整理  负责人：小欣",
+        style: {
+          background: "#f8bc45"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期天",
+      beginDate: "04:00",
+      endDate: "23:59",
+      ganttBarConfig: {
+        id: "6",
+        immobile: false,
+        hasHandles: false,
+        label: "部署和上线  负责人：老王",
+        style: {
+          background: "#f3953d"
+        }
+      }
+    }
+  ]
+]);
+
+function getWeekRange() {
+  const today = new Date();
+  const dayOfWeek = today.getDay();
+
+  const startDate = new Date(today);
+  startDate.setDate(today.getDate() - dayOfWeek + 1);
+
+  const endDate = new Date(startDate);
+  endDate.setDate(startDate.getDate() + 6);
+
+  const formatDate = date => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const currentWeekStart = formatDate(startDate);
+  const currentWeekEnd = formatDate(endDate);
+
+  return {
+    currentWeekStart,
+    currentWeekEnd
+  };
+}
+
+const weekRangeInChina = getWeekRange();
+</script>
+
+<template>
+  <g-gantt-chart
+    chart-start="00:00"
+    chart-end="23:59"
+    precision="hour"
+    date-format="HH:mm"
+    bar-start="beginDate"
+    bar-end="endDate"
+    grid
+  >
+    <template #upper-timeunit>
+      <h1>
+        {{
+          `${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`
+        }}
+      </h1>
+    </template>
+    <g-gantt-row
+      v-for="(item, index) in context"
+      :key="index"
+      :bars="item"
+      :label="item[0].week"
+      highlight-on-hover
+    />
+  </g-gantt-chart>
+</template>