删除无用内容

ruoyi-demo/src/main/java/com/ruoyi/mts/controller/MesPlanDetailController.java

@@ -4,9 +4,12 @@ import java.util.List;
 import java.util.Arrays;
 import java.util.concurrent.TimeUnit;
 
+import com.ruoyi.mts.domain.vo.GanttVO;
 import lombok.RequiredArgsConstructor;
+
 import javax.servlet.http.HttpServletResponse;
 import javax.validation.constraints.*;
+
 import cn.dev33.satoken.annotation.SaCheckPermission;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.validation.annotation.Validated;
@@ -48,6 +51,18 @@ public class MesPlanDetailController extends BaseController {
         return R.ok(list);
     }
 
+    /**
+     * 查询生产计划甘特列表
+     *
+     * @param bo
+     * @return
+     */
+    @GetMapping("/queryGanttList")
+    public R<List<GanttVO>> queryGanttList(MesPlanDetailBo bo) {
+        List<GanttVO> list = iMesPlanDetailService.queryGanttList(bo);
+        return R.ok(list);
+    }
+
     /**
      * 导出生产计划明细列表
      */

ruoyi-demo/src/main/java/com/ruoyi/mts/domain/vo/GanttVO.java

@@ -0,0 +1,25 @@
+package com.ruoyi.mts.domain.vo;
+
+import cn.hutool.core.date.DatePattern;
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.fasterxml.jackson.annotation.JsonProperty;
+import lombok.Data;
+
+import java.util.Date;
+
+@Data
+public class GanttVO {
+    private Long id;
+
+    private Long parent;
+
+    private String text;
+
+    @JsonFormat(pattern =  DatePattern.NORM_DATE_PATTERN)
+    @JsonProperty(value = "start_date")
+    private Date startDate;
+
+    private Integer duration;
+
+    private double progress;
+}

ruoyi-demo/src/main/java/com/ruoyi/mts/mapper/MesPlanDetailMapper.java

@@ -1,9 +1,13 @@
 package com.ruoyi.mts.mapper;
 
 import com.ruoyi.mts.domain.MesPlanDetail;
+import com.ruoyi.mts.domain.bo.MesPlanDetailBo;
+import com.ruoyi.mts.domain.vo.GanttVO;
 import com.ruoyi.mts.domain.vo.MesPlanDetailVo;
 import com.ruoyi.common.core.mapper.BaseMapperPlus;
 
+import java.util.List;
+
 /**
  * 生产计划明细Mapper接口
  *
@@ -12,4 +16,5 @@ import com.ruoyi.common.core.mapper.BaseMapperPlus;
  */
 public interface MesPlanDetailMapper extends BaseMapperPlus<MesPlanDetailMapper, MesPlanDetail, MesPlanDetailVo> {
 
+    List<GanttVO> queryGanttList(MesPlanDetailBo bo);
 }

ruoyi-demo/src/main/java/com/ruoyi/mts/service/IMesPlanDetailService.java

@@ -1,6 +1,7 @@
 package com.ruoyi.mts.service;
 
 import com.ruoyi.mts.domain.MesPlanDetail;
+import com.ruoyi.mts.domain.vo.GanttVO;
 import com.ruoyi.mts.domain.vo.MesPlanDetailVo;
 import com.ruoyi.mts.domain.bo.MesPlanDetailBo;
 
@@ -26,6 +27,14 @@ public interface IMesPlanDetailService {
      */
     List<MesPlanDetailVo> queryList(MesPlanDetailBo bo);
 
+    /**
+     * 查询生产计划甘特列表
+     *
+     * @param bo
+     * @return
+     */
+    List<GanttVO> queryGanttList(MesPlanDetailBo bo);
+
     /**
      * 新增生产计划明细
      */

ruoyi-demo/src/main/java/com/ruoyi/mts/service/impl/MesPlanDetailServiceImpl.java

@@ -4,6 +4,7 @@ import cn.hutool.core.bean.BeanUtil;
 import com.ruoyi.common.utils.StringUtils;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
+import com.ruoyi.mts.domain.vo.GanttVO;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 import com.ruoyi.mts.domain.bo.MesPlanDetailBo;
@@ -46,6 +47,18 @@ public class MesPlanDetailServiceImpl implements IMesPlanDetailService {
         return baseMapper.selectVoList(lqw);
     }
 
+    /**
+     * 查询生产计划甘特列表
+     *
+     * @param bo
+     * @return
+     */
+    @Override
+    public List<GanttVO> queryGanttList(MesPlanDetailBo bo) {
+        List<GanttVO> ganttVOS = baseMapper.queryGanttList(bo);
+        return ganttVOS;
+    }
+
     private LambdaQueryWrapper<MesPlanDetail> buildQueryWrapper(MesPlanDetailBo bo) {
         Map<String, Object> params = bo.getParams();
         LambdaQueryWrapper<MesPlanDetail> lqw = Wrappers.lambdaQuery();

ruoyi-demo/src/main/resources/mapper/mts/MesPlanDetailMapper.xml

@@ -18,5 +18,11 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="delFlag" column="del_flag"/>
     </resultMap>
 
+    <select id="queryGanttList" resultType="com.ruoyi.mts.domain.vo.GanttVO">
+        SELECT t.id,t.parent_id AS 'parent', t.name AS 'text', datediff(t.actual_date, t.plan_date) 'duration'
+        , t.plan_date AS 'startDate'
+        FROM mes_plan_detail t WHERE t.main_id=#{mainId}
+    </select>
+
 
 </mapper>

ruoyi-ui-vue3/.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = RuoYi-Vue-Plus后台管理系统
+VITE_APP_TITLE = 墨者科技后台管理系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

ruoyi-ui-vue3/.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = RuoYi-Vue-Plus后台管理系统
+VITE_APP_TITLE = 墨者科技后台管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'production'

ruoyi-ui-vue3/README.md

@@ -1,7 +1,7 @@
 ## 平台简介
 
 * 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
-* 配套后端代码仓库地址[RuoYi-Vue-Plus 4.X(注意版本号)](https://gitee.com/JavaLionLi/RuoYi-Vue-Plus)
+* 配套后端代码仓库地址[墨者科技 4.X(注意版本号)](https://gitee.com/JavaLionLi/墨者科技)
 * 5.X后端需要使用此项目 [plus-ui](https://gitee.com/JavaLionLi/plus-ui)
 
 ## 前端运行

ruoyi-ui-vue3/index.html

@@ -7,7 +7,7 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="/favicon.ico">
-  <title>RuoYi-Vue-Plus管理系统</title>
+  <title>墨者科技管理系统</title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,

ruoyi-ui-vue3/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "ruoyi-vue-plus",
+  "name": "墨者科技",
   "version": "4.8.2",
-  "description": "RuoYi-Vue-Plus后台管理系统",
+  "description": "墨者科技后台管理系统",
   "author": "LionLi",
   "license": "MIT",
   "scripts": {
@@ -11,13 +11,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://gitee.com/JavaLionLi/RuoYi-Vue-Plus-UI.git"
+    "url": "https://gitee.com/JavaLionLi/墨者科技-UI.git"
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.0.10",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
+    "dayjs": "^1.11.10",
+    "dhtmlx-gantt": "7.1.9",
     "echarts": "5.4.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
@@ -35,9 +37,9 @@
     "@vue/compiler-sfc": "3.2.45",
     "sass": "1.56.1",
     "unplugin-auto-import": "0.11.4",
+    "unplugin-vue-setup-extend-plus": "0.4.9",
     "vite": "3.2.3",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-svg-icons": "2.0.1",
+    "vite-plugin-svg-icons": "2.0.1"
-    "unplugin-vue-setup-extend-plus": "0.4.9"
   }
 }

ruoyi-ui-vue3/pnpm-lock.yaml

@@ -17,6 +17,12 @@ dependencies:
   axios:
     specifier: 0.27.2
     version: 0.27.2
+  dayjs:
+    specifier: ^1.11.10
+    version: 1.11.10
+  dhtmlx-gantt:
+    specifier: 7.1.9
+    version: 7.1.9
   echarts:
     specifier: 5.4.0
     version: 5.4.0
@@ -725,6 +731,10 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /dhtmlx-gantt@7.1.9:
+    resolution: {integrity: sha512-a1zFTg5kv21qqdAvkhFIItsuxXDR5e9IL9xCJS38VWfkY2n2WKXbiSxXHCiSg+S9lF6asAnkl09PAWaNSJIeyw==}
+    dev: false
+
   /dom-serializer@0.2.2:
     resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
     dependencies:

ruoyi-ui-vue3/src/api/mts/planDetail.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+export function queryGanttList(query) {
+  return request({
+    url: "/mts/planDetail/queryGanttList",
+    method: "get",
+    params: query,
+  });
+}
+
 // 查询生产计划明细列表
 export function listPlanDetail(query) {
   return request({

ruoyi-ui-vue3/src/components/RuoYi/Doc/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-const url = ref('https://gitee.com/JavaLionLi/RuoYi-Vue-Plus/wikis/pages');
+const url = ref('https://gitee.com/JavaLionLi/墨者科技/wikis/pages');
 
 function goto() {
   window.open(url.value)

ruoyi-ui-vue3/src/components/RuoYi/Git/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-const url = ref('https://gitee.com/JavaLionLi/RuoYi-Vue-Plus');
+const url = ref('https://gitee.com/JavaLionLi/墨者科技');
 
 function goto() {
   window.open(url.value)

ruoyi-ui-vue3/src/layout/components/Sidebar/Logo.vue

@@ -25,7 +25,7 @@ defineProps({
   }
 })
 
-const title = ref('RuoYi-Vue-Plus');
+const title = ref('墨者科技');
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
 </script>

ruoyi-ui-vue3/src/views/index.vue

@@ -1,176 +1,14 @@
 <template>
   <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>RuoYi-Vue-Plus后台管理系统</h2>
-        <p>
-          RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
-          <br/>
-          * 前端开发框架 Vue、Element UI<br/>
-          * 后端开发框架 Spring Boot<br/>
-          * 容器框架 Undertow 基于 Netty 的高性能容器<br/>
-          * 权限认证框架 Sa-Token 支持多终端认证系统<br/>
-          * 关系数据库 MySQL 适配 8.X 最低 5.7<br/>
-          * 缓存数据库 Redis 适配 6.X 最低 4.X<br/>
-          * 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率<br/>
-          * 数据库框架 p6spy 更强劲的 SQL 分析<br/>
-          * 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构<br/>
-          * 序列化框架 Jackson 统一使用 jackson 高效可靠<br/>
-          * Redis客户端 Redisson 性能强劲、API丰富<br/>
-          * 分布式限流 Redisson 全局、请求IP、集群ID 多种限流<br/>
-          * 分布式锁 Lock4j 注解锁、工具锁 多种多样<br/>
-          * 分布式幂等 Lock4j 基于分布式锁实现<br/>
-          * 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br/>
-          * 分布式任务调度 Xxl-Job 高性能 高可靠 易扩展<br/>
-          * 文件存储 Minio 本地存储<br/>
-          * 文件存储 七牛、阿里、腾讯	云存储<br/>
-          * 监控框架 SpringBoot-Admin 全方位服务监控<br/>
-          * 校验框架 Validation 增强接口安全性 严谨性<br/>
-          * Excel框架 Alibaba EasyExcel 性能优异 扩展性强<br/>
-          * 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释<br/>
-          * 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性<br/>
-          * 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码<br/>
-          * 部署方式 Docker 容器编排 一键部署业务集群<br/>
-          * 国际化 SpringMessage Spring标准国际化方案<br/>
-        </p>
-        <p>
-          <b>当前版本:</b> <span>v{{ version }}</span>
-        </p>
-        <p>
-          <el-tag type="danger">&yen;免费开源</el-tag>
-        </p>
-        <p>
-          <el-button
-            type="primary"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://gitee.com/JavaLionLi/RuoYi-Vue-Plus')"
-            >访问码云</el-button
-          >
-          <el-button
-            type="primary"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://github.com/JavaLionLi/RuoYi-Vue-Plus')"
-            >访问GitHub</el-button
-          >
-          <el-button
-            type="primary"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://gitee.com/JavaLionLi/RuoYi-Vue-Plus/wikis/pages?sort_id=4106467&doc_id=1469725')"
-          >更新日志</el-button
-          >
-        </p>
-      </el-col>
   
-      <el-col :sm="24" :lg="12" style="padding-left: 50px">
-        <el-row>
-          <el-col :span="12">
-            <h2>技术选型</h2>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <h4>后端技术</h4>
-            <ul>
-              <li>SpringBoot</li>
-              <li>Sa-Token</li>
-              <li>JWT</li>
-              <li>MyBatis</li>
-              <li>Druid</li>
-              <li>Jackson</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-          <el-col :span="6">
-            <h4>前端技术</h4>
-            <ul>
-              <li>Vue</li>
-              <li>Vuex</li>
-              <li>Element-ui</li>
-              <li>Axios</li>
-              <li>Sass</li>
-              <li>Quill</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-    <el-divider />
   </div>
 </template>
 
 <script setup name="Index">
-const version = ref('4.8.2')
 
-function goTarget(url) {
-  window.open(url, '__blank')
-}
 </script>
 
 <style scoped lang="scss">
-.home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
 
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
-  }
-
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
-    }
-  }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
-    }
-  }
-}
 </style>
 

ruoyi-ui-vue3/src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">RuoYi-Vue-Plus后台管理系统</h3>
+      <h3 class="title">墨者科技后台管理系统</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -59,7 +59,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2023 疯狂的狮子Li All Rights Reserved.</span>
+      <span>Copyright © 2018-2023 墨者科技All Rights Reserved.</span>
     </div>
   </div>
 </template>

ruoyi-ui-vue3/src/views/mts/planDetail/components/GanttComponent.vue

@@ -0,0 +1,93 @@
+<template>
+  <div ref="ganttContainer"></div>
+</template>
+
+<script>
+import { gantt } from 'dhtmlx-gantt';
+
+export default {
+  props: {
+    tasks: {
+      type: Object,
+      default() {
+        return { data: [], links: [] }
+      }
+    }
+  },
+
+  methods: {
+    $_initGanttEvents() {
+      if (!gantt.$_eventsInitialized) {
+        gantt.attachEvent('onTaskSelected', (id) => {
+          let task = gantt.getTask(id);
+          this.$emit('task-selected', task);
+        });
+
+        gantt.attachEvent('onTaskIdChange', (id, new_id) => {
+          if (gantt.getSelectedId() == new_id) {
+            let task = gantt.getTask(new_id);
+            this.$emit('task-selected', task);
+          }
+        });
+
+        gantt.$_eventsInitialized = true;
+      }
+    },
+
+    $_initDataProcessor() {
+      if (!gantt.$_dataProcessorInitialized) {
+        gantt.createDataProcessor((entity, action, data, id) => {
+          console.log('entity', entity);
+          this.$emit(`${entity}-updated`, id, action, data);
+        });
+
+        gantt.$_dataProcessorInitialized = true;
+      }
+    },
+    $init() {
+      this.$_initGanttEvents();
+      gantt.config.date_format = "%Y-%m-%D";
+
+      // gantt.config.resize_rows = true;
+      // gantt.config.min_task_grid_row_height = 45;
+
+      gantt.config.order_branch = true;
+
+      gantt.config.scales = [
+        { unit: 'month', step: 1, format: '%Y-%m' },
+        { unit: 'day', step: 1, format: '%d' }
+      ]
+      gantt.config.scale_height = 54;
+
+      gantt.config.fit_tasks = true;
+
+      gantt.i18n.setLocale("cn");
+
+      gantt.config.columns = [
+        { name: "text", label: "任务", tree: true, width: 200 },
+        { name: "add", label: "", align: "center", width: 80 },
+      ];
+
+      gantt.config.lightbox.sections = [
+        { name: "description", height: 70, map_to: "text", type: "textarea", focus: true },
+        { name: "text", label: "文本", height: 40, map_to: "userName", type: "textarea", focus: true },
+        { name: "time", height: 40, type: "time", map_to: "auto", time_format: ["%Y", "%m", "%d"] },/*按开始日期-结束日期显示*/
+        // {name: "time", height: 40, type: "duration", map_to: "auto", time_format: ["%Y", "%m", "%d"]}/*按开始日期-周期长度显示*/
+      ];
+
+      gantt.init(this.$refs.ganttContainer);
+      gantt.parse(this.$props.tasks);
+
+      this.$_initDataProcessor();
+    }
+  },
+
+  mounted() {
+    this.$init()
+  }
+}
+</script>
+
+<style>
+@import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
+</style>

ruoyi-ui-vue3/src/views/mts/planDetail/index.vue

@@ -1,329 +1,173 @@
 <template>
-  <div class="app-container">
+  <div class="container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <div class="right-container">
-      <el-form-item label="父id" prop="parentId">
+      <div class="gantt-selected-info">
-        <el-input
+        <div v-if="selectedTask">
-          v-model="queryParams.parentId"
+          <h2>{{ selectedTask.text }}</h2>
-          placeholder="请输入父id"
+          <span><b>编号: </b>{{ selectedTask.id }}</span><br />
-          clearable
+          <span><b>进度: </b> {{ progressPercentage }}</span><br />
-          @keyup.enter="handleQuery"
+          <span><b>开始时间: </b>{{ formattedStartDate }}</span><br />
-        />
+          <span><b>结束时间: </b>{{ formattedEndDate }}</span><br />
-      </el-form-item>
-      <el-form-item label="主表id" prop="mainId">
-        <el-input
-          v-model="queryParams.mainId"
-          placeholder="请输入主表id"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="计划时间" prop="planDate">
-        <el-date-picker clearable
-          v-model="queryParams.planDate"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="选择计划时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="实际时间" prop="actualDate">
-        <el-date-picker clearable
-          v-model="queryParams.actualDate"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="选择实际时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['mts:planDetail:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="Sort"
-          @click="toggleExpandAll"
-        >展开/折叠</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="planDetailList"
-      row-key="id"
-      :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-      <el-table-column label="父id" prop="parentId" />
-      <el-table-column label="主表id" align="center" prop="mainId" />
-      <el-table-column label="名称" align="center" prop="name" />
-      <el-table-column label="计划时间" align="center" prop="planDate" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="实际时间" align="center" prop="actualDate" width="180">
-        <template #default="scope">
-          <span>{{ parseTime(scope.row.actualDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mts:planDetail:edit']">修改</el-button>
-              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['mts:planDetail:add']">新增</el-button>
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mts:planDetail:remove']">删除</el-button>
-          </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 添加或修改生产计划明细对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="planDetailRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="父id" prop="parentId">
-          <el-tree-select
-            v-model="form.parentId"
-            :data="planDetailOptions"
-            :props="{ value: 'id', label: 'name', children: 'children' }"
-            value-key="id"
-            placeholder="请选择父id"
-            check-strictly
-          />
-        </el-form-item>
-        <el-form-item label="主表id" prop="mainId">
-          <el-input v-model="form.mainId" placeholder="请输入主表id" />
-        </el-form-item>
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="计划时间" prop="planDate">
-          <el-date-picker clearable
-            v-model="form.planDate"
-            type="datetime"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            placeholder="选择计划时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="实际时间" prop="actualDate">
-          <el-date-picker clearable
-            v-model="form.actualDate"
-            type="datetime"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            placeholder="选择实际时间">
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
         </div>
-      </template>
+        <div v-else class="select-task-prompt">
-    </el-dialog>
+          <h2>点击任务显示明细</h2>
+        </div>
+      </div>
+      <ul class="gantt-messages">
+        <li class="gantt-message" v-for="(message, index) in messages" v-bind:key="index">
+          {{ message }}
+        </li>
+      </ul>
+    </div>
+    <GanttComponent ref="ganttContainer" class="left-container" :tasks="tasks" @task-updated="logTaskUpdate"
+      @link-updated="logLinkUpdate" @task-selected="selectTask"></GanttComponent>
   </div>
 </template>
 
-<script setup name="PlanDetail">
+<script>
-import { listPlanDetail, getPlanDetail, delPlanDetail, addPlanDetail, updatePlanDetail } from "@/api/mts/planDetail";
+import dayjs from 'dayjs'
+import GanttComponent from "./components/GanttComponent.vue";
+import { queryGanttList, listPlanDetail, getPlanDetail, delPlanDetail, addPlanDetail, updatePlanDetail } from "@/api/mts/planDetail";
 
-const { proxy } = getCurrentInstance();
+export default {
-
+  name: "app",
-const planDetailList = ref([]);
+  components: { GanttComponent },
-const planDetailOptions = ref([]);
+  data() {
-const open = ref(false);
+    return {
-const buttonLoading = ref(false);
+      tasks: {
-const loading = ref(true);
+        data: [],
-const showSearch = ref(true);
+        links: [],
-const title = ref("");
-const isExpandAll = ref(true);
-const refreshTable = ref(true);
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    parentId: undefined,
-    mainId: undefined,
-    name: undefined,
-    planDate: undefined,
-    actualDate: undefined,
       },
-  rules: {
+      selectedTask: null,
-    id: [
+      messages: [],
-      { required: true, message: "主键不能为空", trigger: "blur" }
-    ],
-    parentId: [
-      { required: true, message: "父id不能为空", trigger: "blur" }
-    ],
-    mainId: [
-      { required: true, message: "主表id不能为空", trigger: "blur" }
-    ],
-    name: [
-      { required: true, message: "名称不能为空", trigger: "blur" }
-    ],
-    planDate: [
-      { required: true, message: "计划时间不能为空", trigger: "blur" }
-    ],
-    actualDate: [
-      { required: true, message: "实际时间不能为空", trigger: "blur" }
-    ],
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询生产计划明细列表 */
-function getList() {
-  loading.value = true;
-  listPlanDetail(queryParams.value).then(response => {
-    planDetailList.value = proxy.handleTree(response.data, "id", "parentId");
-    loading.value = false;
-  });
-}
-
-/** 查询生产计划明细下拉树结构 */
-function getTreeselect() {
-  listPlanDetail().then(response => {
-    planDetailOptions.value = [];
-    const data = { id: 0, name: '顶级节点', children: [] };
-    data.children = proxy.handleTree(response.data, "id", "parentId");
-    planDetailOptions.value.push(data);
-  });
-}
-
-// 取消按钮
-function cancel() {
-  open.value = false;
-  reset();
-}
-
-// 表单重置
-function reset() {
-  form.value = {
-    id: null,
-    parentId: null,
-    mainId: null,
-    name: null,
-    planDate: null,
-    actualDate: null,
-    createBy: null,
-    createTime: null,
-    updateBy: null,
-    updateTime: null,
-    delFlag: null
     };
-  proxy.resetForm("planDetailRef");
+  },
+  mounted() {
+    this.queryGanttList();
+  },
+  computed: {
+    progressPercentage() {
+      let taskProgress = this.selectedTask.progress;
+      if (!taskProgress) {
+        return "0";
       }
+      return `${Math.round(+taskProgress * 100)} %`;
+    },
+    formattedStartDate() {
+      let taskStart = this.selectedTask.start_date;
+      return `${taskStart.getFullYear()} / ${taskStart.getMonth() + 1} / ${taskStart.getDate()}`;
+    },
+    formattedEndDate() {
+      let taskEnd = this.selectedTask.end_date;
+      return `${taskEnd.getFullYear()} / ${taskEnd.getMonth() + 1} / ${taskEnd.getDate()}`;
+    },
+  },
+  methods: {
+    async queryGanttList() {
+      const route = this.$route;
+      const res = await queryGanttList({ mainId: route.params.mainId })
 
-/** 搜索按钮操作 */
+      res.data.forEach(item => {
-function handleQuery() {
+        item.start_date = dayjs(item.start_date).toDate();
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-
-/** 新增按钮操作 */
-function handleAdd(row) {
-  reset();
-  getTreeselect();
-  if (row != null && row.id) {
-    form.value.parentId = row.id;
-  } else {
-    form.value.parentId = 0;
-  }
-  open.value = true;
-  title.value = "添加生产计划明细";
-}
-
-/** 展开/折叠操作 */
-function toggleExpandAll() {
-  refreshTable.value = false;
-  isExpandAll.value = !isExpandAll.value;
-  nextTick(() => {
-    refreshTable.value = true;
       });
-}
+      this.tasks.data = res.data;
 
-/** 修改按钮操作 */
+      this.$refs.ganttContainer.$init();
-async function handleUpdate(row) {
+    },
-  loading.value = true;
+    selectTask(task) {
-  reset();
+      this.selectedTask = task;
-  await getTreeselect();
+    },
-  if (row != null) {
-    form.value.parentId = row.parentId;
-  }
-  getPlanDetail(row.id).then(response => {
-    loading.value = false;
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改生产计划明细";
-  });
-}
 
-/** 提交按钮 */
+    addMessage(message) {
-function submitForm() {
+      console.log(message)
-  proxy.$refs["planDetailRef"].validate(valid => {
+      message = message.replace('Task update', '操作任务日志')
-    if (valid) {
+      message = message.replace('Task create', '新建任务日志')
-      buttonLoading.value = true;
-      if (form.value.id != null) {
-        updatePlanDetail(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        }).finally(() => {
-          buttonLoading.value = false;
-        });
-      } else {
-        addPlanDetail(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        }).finally(() => {
-          buttonLoading.value = false;
-        });
-      }
-    }
-  });
-}
 
-/** 删除按钮操作 */
+      this.messages.unshift(message);
-function handleDelete(row) {
+      if (this.messages.length > 40) {
-  proxy.$modal.confirm('是否确认删除生产计划明细编号为"' + row.id + '"的数据项？').then(function() {
+        this.messages.pop();
-    loading.value = true;
-    return delPlanDetail(row.id);
-  }).then(() => {
-    loading.value = false;
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {
-  }).finally(() => {
-    loading.value = false;
-  });
       }
+    },
 
-getList();
+    logTaskUpdate(id, mode, task) {
+      console.log(id, mode, task)
+      let text = task && task.text ? ` (${task.text})` : "";
+      let message = `Task ${mode}: ${id} ${text}`;
+      this.addMessage(message);
+    },
+
+    logLinkUpdate(id, mode, link) {
+      let message = `Link ${mode}: ${id}`;
+      if (link) {
+        message += ` ( source: ${link.source}, target: ${link.target} )`;
+      }
+      this.addMessage(message);
+    },
+  },
+};
 </script>
+
+<style>
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  height: 100vh;
+  width: 100%;
+}
+
+.left-container {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+
+.right-container {
+  border-right: 1px solid #cecece;
+  float: right;
+  height: 100%;
+  width: 340px;
+  box-shadow: 0 0 5px 2px #aaa;
+  position: relative;
+  z-index: 2;
+}
+
+.gantt-messages {
+  list-style-type: none;
+  height: 50%;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-left: 5px;
+}
+
+.gantt-messages>.gantt-message {
+  background-color: #f4f4f4;
+  box-shadow: inset 5px 0 #d69000;
+  font-family: Geneva, Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  margin: 5px 0;
+  padding: 8px 0 8px 10px;
+}
+
+.gantt-selected-info {
+  border-bottom: 1px solid #cecece;
+  box-sizing: border-box;
+  font-family: Geneva, Arial, Helvetica, sans-serif;
+  height: 50%;
+  line-height: 28px;
+  padding: 10px;
+}
+
+.gantt-selected-info h2 {
+  border-bottom: 1px solid #cecece;
+}
+
+.select-task-prompt h2 {
+  color: #d9d9d9;
+}
+</style>

ruoyi-ui-vue3/src/views/mts/planDetail/index.vue.bak

@@ -0,0 +1,286 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="计划时间" prop="planDate">
+        <el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="YYYY-MM-DD"
+          placeholder="选择计划时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="实际时间" prop="actualDate">
+        <el-date-picker clearable v-model="queryParams.actualDate" type="date" value-format="YYYY-MM-DD"
+          placeholder="选择实际时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['mts:planDetail:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="planDetailList" row-key="id"
+      :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column label="名称" align="left" prop="name" />
+      <el-table-column label="计划时间" align="center" prop="planDate" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="实际时间" align="center" prop="actualDate" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.actualDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['mts:planDetail:edit']">修改</el-button>
+          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
+            v-hasPermi="['mts:planDetail:add']">新增</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['mts:planDetail:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改生产计划明细对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="planDetailRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="父id" prop="parentId">
+          <el-tree-select v-model="form.parentId" :data="planDetailOptions"
+            :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择父id"
+            check-strictly />
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="计划时间" prop="planDate">
+          <el-date-picker clearable v-model="form.planDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择计划时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="实际时间" prop="actualDate">
+          <el-date-picker clearable v-model="form.actualDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择实际时间">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="PlanDetail">
+import {ref, onMounted} from 'vue'
+import { useRoute } from 'vue-router'
+import { listPlanDetail, getPlanDetail, delPlanDetail, addPlanDetail, updatePlanDetail } from "@/api/mts/planDetail";
+
+const { proxy } = getCurrentInstance();
+const route = useRoute();
+
+const planDetailList = ref([]);
+const planDetailOptions = ref([]);
+const open = ref(false);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const title = ref("");
+const isExpandAll = ref(true);
+const refreshTable = ref(true);
+
+const data = reactive({
+  form: {
+
+  },
+  queryParams: {
+    parentId: undefined,
+    mainId: route.params.mainId,
+    name: undefined,
+    planDate: undefined,
+    actualDate: undefined,
+  },
+  rules: {
+    id: [
+      { required: true, message: "主键不能为空", trigger: "blur" }
+    ],
+    parentId: [
+      { required: true, message: "父id不能为空", trigger: "blur" }
+    ],
+    mainId: [
+      { required: true, message: "主表id不能为空", trigger: "blur" }
+    ],
+    name: [
+      { required: true, message: "名称不能为空", trigger: "blur" }
+    ],
+    planDate: [
+      { required: true, message: "计划时间不能为空", trigger: "blur" }
+    ],
+    actualDate: [
+      { required: true, message: "实际时间不能为空", trigger: "blur" }
+    ],
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+
+const dateColumns =[]
+onMounted(() => {
+
+  // dateColumns.values.push()
+})
+
+/** 查询生产计划明细列表 */
+function getList() {
+  loading.value = true;
+  listPlanDetail(queryParams.value).then(response => {
+    planDetailList.value = proxy.handleTree(response.data, "id", "parentId");
+    loading.value = false;
+  });
+}
+
+/** 查询生产计划明细下拉树结构 */
+function getTreeselect() {
+  listPlanDetail().then(response => {
+    planDetailOptions.value = [];
+    const data = { id: 0, name: '顶级节点', children: [] };
+    data.children = proxy.handleTree(response.data, "id", "parentId");
+    planDetailOptions.value.push(data);
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    parentId: null,
+    mainId: null,
+    name: null,
+    planDate: null,
+    actualDate: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null
+  };
+  proxy.resetForm("planDetailRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset();
+  getTreeselect();
+  if (row != null && row.id) {
+    form.value.parentId = row.id;
+  } else {
+    form.value.parentId = 0;
+  }
+  form.value.mainId = route.params.mainId;
+  open.value = true;
+  title.value = "添加生产计划明细";
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  loading.value = true;
+  reset();
+  await getTreeselect();
+  if (row != null) {
+    form.value.parentId = row.parentId;
+  }
+  form.value.mainId = route.params.mainId;
+  getPlanDetail(row.id).then(response => {
+    loading.value = false;
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改生产计划明细";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["planDetailRef"].validate(valid => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id != null) {
+        updatePlanDetail(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        }).finally(() => {
+          buttonLoading.value = false;
+        });
+      } else {
+        addPlanDetail(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        }).finally(() => {
+          buttonLoading.value = false;
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除生产计划明细编号为"' + row.id + '"的数据项？').then(function () {
+    loading.value = true;
+    return delPlanDetail(row.id);
+  }).then(() => {
+    loading.value = false;
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {
+  }).finally(() => {
+    loading.value = false;
+  });
+}
+
+getList();
+</script>

ruoyi-ui-vue3/src/views/register.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="register">
     <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">RuoYi-Vue-Plus后台管理系统</h3>
+      <h3 class="title">墨者科技后台管理系统</h3>
       <el-form-item prop="username">
         <el-input
           v-model="registerForm.username"
@@ -70,7 +70,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2023 疯狂的狮子Li All Rights Reserved.</span>
+      <span>Copyright © 2018-2023 墨者科技All Rights Reserved.</span>
     </div>
   </div>
 </template>