Skip to content

V
vue-gantt
Commit d4d13d3c by 杨子
Options

update

parent 9f14c312
Showing with 445 additions and 140 deletions
.env.development 0 → 100644
# 开发环境配置
ENV = 'development'
# Jeeplus快速开发平台/开发环境
VUE_APP_BASE_API = '/api'
# Jeeplus快速开发平台/后台地址
VUE_APP_SERVER_URL = 'http://localhost:8084'
#单点登录设置
VUE_APP_SSO_LOGIN = 'false'
VUE_APP_CAS_SERVER = 'https://www.cainiao.com:8443/cas'
VUE_APP_CLIENT_LOGIN = 'http://localhost:3000/#/casLogin'
.env.production 0 → 100644
# 生产环境配置
ENV = 'production'
#Jeeplus快速开发平台/后台地址
VUE_APP_SERVER_URL = 'http:/xxxxxx.com/jeeplus-vue'
#单点登录设置
VUE_APP_SSO_LOGIN = 'false'
VUE_APP_CAS_SERVER = 'https://www.cainiao.com:8443/cas'
VUE_APP_CLIENT_HOST = 'http://localhost:3000'
package.json
......@@ -12,10 +12,12 @@
"dependencies": {
"core-js": "^3.8.3",
"dayjs": "^1.11.1",
"element-plus": "^2.1.11",
"register-service-worker": "^1.7.2",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3",
"vuetify": "^2.6.5",
"vuex": "^4.0.0"
},
"devDependencies": {
......
public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
src/App.vue
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>
......
src/components/HelloWorld copy.vue 0 → 100644
<template>
<div>
<g-gantt-chart
:chart-start="chartStart"
:chart-end="chartEnd"
precision="minute"
:minuteInterval="minuteInterval"
:row-height="40"
grid
width="100%"
bar-start="beginTime"
bar-end="endTime"
:date-format="format"
@mousedown-bar="onMousedownBar($event.bar, $event.e, $event.datetime)"
@dblclick-bar="onMouseupBar($event.bar, $event.e, $event.datetime)"
@mouseenter-bar="onMouseenterBar($event.bar, $event.e)"
@mouseleave-bar="onMouseleaveBar($event.bar, $event.e)"
@dragstart-bar="onDragstartBar($event.bar, $event.e)"
@drag-bar="onDragBar($event.bar, $event.e)"
@dragend-bar="onDragendBar($event.bar, $event.e, $event.movedBars)"
@contextmenu-bar="onContextmenuBar($event.bar, $event.e, $event.datetime)"
>
<template v-for="(item, index) in contree" :key="index">
<el-popover
placement="top-start"
title="Title"
:width="200"
trigger="hover"
content="this is content, this is content, this is content"
>
<template #reference>
<g-gantt-row
:label="item.helicopterInfoDTO.name"
:bars="item.safeModuleTaskDTOList"
highlight-on-hover
/>
</template>
</el-popover>
</template>
</g-gantt-chart>
<!-- 选择开始日期: <input type="text" v-model="dateValueStart" /> 选择结束日期:
<input type="text" v-model="dateValueEnd" /> -->
分钟间隔： <input type="text" v-model="minuteValue" />
<button @click="confirm()">确定</button>
<el-button
>Click me</el-button
>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs, unref } from "vue";
import GGanttRow from "./GGanttRow.vue";
import GGanttChart from "./GGanttChart.vue";
import { GanttBarObject } from "../models/models";
import axios from "axios";
import { ClickOutside as vClickOutside, ElPopover} from "element-plus"
const buttonRef = ref()
const popoverRef = ref()
const visible = ref(false)
const onClickOutside = () => {
unref(popoverRef).popperRef?.delayHide?.()
}
let chartStart = ref("");
let chartEnd = ref("");
let contree: any[] = reactive([]);
const format = ref("YYYY-MM-DD HH:mm");
const Backgrounds = ["#5484b7", "#f00"];
const dateValueStart = ref("");
const dateValueEnd = ref("");
const minuteInterval = ref(30);
const minuteValue = ref();
const emits = defineEmits(["updateTaskName"]);
const isShow = ref(true);
axios
.get("/api/task/helicopterTask/findById?id=1")
.then(({ data }) => {
const { beginTime, endTime, name, contreeList } = data;
emits("updateTaskName", name);
chartStart.value = beginTime;
chartEnd.value = endTime;
if (Array.isArray(contreeList)) {
contreeList.forEach((value, index) => {
if (Array.isArray(value.safeModuleTaskDTOList)) {
value.safeModuleTaskDTOList.forEach((v) => {
v.ganttBarConfig = {
id: Date.now(),
label: v.name,
style: {
background: Backgrounds[index],
color: "#fff",
},
hasHandles: true,
pushOnOverlap: true
};
});
}
});
}
contree.push(...contreeList);
})
.catch((err) => {
console.log(err);
});
const confirm = (type: number) => {
if (dateValueStart.value) {
chartStart.value = dateValueStart.value;
}
if (dateValueEnd.value) {
chartEnd.value = dateValueEnd.value;
}
if (minuteValue.value) {
minuteInterval.value = minuteValue.value;
}
};
const onMousedownBar = (
bar: GanttBarObject,
e: MouseEvent,
datetime?: string
) => {
console.log("mousedown-bar", bar, e, datetime);
};
const onMouseupBar = (
bar: GanttBarObject,
e: MouseEvent,
datetime?: string
) => {
console.log("mouseup-bar", bar, e, datetime);
};
const onMouseenterBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("mouseenter-bar", bar, e);
visible.value = true
};
const onMouseleaveBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("mouseleave-bar", bar, e);
visible.value = false
};
const onDragstartBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("dragstart-bar", bar, e);
};
const onDragBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("drag-bar", bar, e);
};
const onDragendBar = (
bar: GanttBarObject,
e: MouseEvent,
movedBars?: Map<GanttBarObject, { oldStart: string; oldEnd: string }>
) => {
console.log("dragend-bar", bar, e, movedBars);
};
const onContextmenuBar = (
bar: GanttBarObject,
e: MouseEvent,
datetime?: string
) => {
console.log("contextmenu-bar", bar, e, datetime);
};
</script>
src/components/HelloWorld.vue
......@@ -3,12 +3,12 @@
:chart-start="chartStart"
:chart-end="chartEnd"
precision="minute"
:minuteInterval = "minuteInterval"
:minuteInterval="minuteInterval"
:row-height="40"
grid
width="100%"
bar-start="beginDate"
bar-end="endDate"
bar-start="beginTime"
bar-end="endTime"
:date-format="format"
@mousedown-bar="onMousedownBar($event.bar, $event.e, $event.datetime)"
@dblclick-bar="onMouseupBar($event.bar, $event.e, $event.datetime)"
......@@ -19,56 +19,96 @@
@dragend-bar="onDragendBar($event.bar, $event.e, $event.movedBars)"
@contextmenu-bar="onContextmenuBar($event.bar, $event.e, $event.datetime)"
>
<g-gantt-row
<template v-for="item in contree"
:key="item.helicopterInfoDTO.id">
<g-gantt-row
:label="item.helicopterInfoDTO.name"
:bars="item.list"
highlight-on-hover
/>
</template>
<!-- <g-gantt-row
label="My row 1"
:bars="bars1"
highlight-on-hover
/>
<g-gantt-row
label="My row 2"
highlight-on-hover
:bars="bars2"
/>
/> -->
</g-gantt-chart>
<button @click="addBar()">
Add bar
</button>
<button @click="deleteBar()">
Delete bar
</button>
选择开始日期: <input type="text" v-model="dateValueStart">
选择结束日期: <input type="text" v-model="dateValueEnd">
<!-- 选择开始日期: <input type="text" v-model="dateValueStart">
选择结束日期: <input type="text" v-model="dateValueEnd"> -->
分钟间隔： <input type="text" v-model="minuteValue"> <button @click="confirm()">确定</button>
分钟间隔： <input type="text" v-model="minuteValue" />
<button @click="confirm()">确定</button>
</template>
<script setup lang="ts">
import { ref } from "vue"
import GGanttRow from "./GGanttRow.vue"
import GGanttChart from "./GGanttChart.vue"
import { GanttBarObject } from "../models/models"
let chartStart = ref("2022-02-01 12:00")
let chartEnd = ref("2022-02-01 18:00")
const format = ref("YYYY-MM-DD HH:mm")
import { reactive, ref } from "vue";
import GGanttRow from "./GGanttRow.vue";
import GGanttChart from "./GGanttChart.vue";
import { GanttBarObject } from "../models/models";
import { ClickOutside as vClickOutside, ElPopover} from "element-plus"
import axios from "axios";
let chartStart = ref("2022-02-01 12:00");
let chartEnd = ref("2022-02-01 18:00");
const format = ref("YYYY-MM-DD HH:mm");
let contree = ref([] as any[]);
const bars1 = ref([
{
beginDate: "2022-02-01 12:00",
endDate: "2022-02-01 12:30",
ganttBarConfig: {
id: "8621987329",
label: "I'm in a bundle",
bundle: "bundle2"
}
}
])
// {
// beginTime: "2022-05-06 08:00",
// endTime: "2022-05-06 12:30",
// ganttBarConfig: {
// id: "8621987329",
// label: "I'm in a bundle",
// },
// },
] as any);
const dateValueStart = ref("");
const dateValueEnd = ref("");
const minuteInterval = ref(30);
const minuteInterval = ref(2);
const minuteValue = ref();
const emits = defineEmits(["updateTaskName"]);
const Backgrounds = ["#5484b7", "#f00"];
axios
.get("/api/task/helicopterTask/findById?id=1")
.then(({ data }) => {
let { beginTime, endTime, name, contreeList } = data;
emits("updateTaskName", name);
chartStart.value = beginTime;
chartEnd.value = endTime;
if (Array.isArray(contreeList)) {
contreeList = contreeList.map((value, index) => {
if (Array.isArray(value.safeModuleTaskDTOList)) {
const result = value.safeModuleTaskDTOList.map((v) => {
v.ganttBarConfig = {
id: v.id,
label: v.name,
style: {
background: Backgrounds[index],
color: "#fff",
},
hasHandles: true,
};
return v;
});
value.list= result
}
return value
});
}
console.log(contreeList);
contree.value.push(...contreeList)
})
.catch((err) => {
console.log(err);
});
const bars2 = ref([
{
......@@ -81,14 +121,14 @@ const bars2 = ref([
background: "#69e064",
borderRadius: "15px",
color: "blue",
fontSize: "10px"
}
}
}
])
fontSize: "10px",
},
},
},
]);
const addBar = () => {
if (bars1.value.some(bar => bar.ganttBarConfig.id === "test1")) {
return
if (bars1.value.some((bar) => bar.ganttBarConfig.id === "test1")) {
return;
}
const bar = {
beginDate: "2022-02-01 12:00",
......@@ -99,64 +139,79 @@ const addBar = () => {
label: "Hello!",
style: {
background: "#5484b7",
borderRadius: "20px"
}
}
}
bars1.value.push(bar)
}
const confirm = (type:number) =>{
if(dateValueStart.value){
chartStart.value = dateValueStart.value;
borderRadius: "20px",
},
},
};
bars1.value.push(bar);
};
const confirm = (type: number) => {
if (dateValueStart.value) {
chartStart.value = dateValueStart.value;
}
if(dateValueEnd.value){
chartEnd.value = dateValueEnd.value;
if (dateValueEnd.value) {
chartEnd.value = dateValueEnd.value;
}
if(minuteValue.value){
minuteInterval.value = minuteValue.value;
if (minuteValue.value) {
minuteInterval.value = minuteValue.value;
}
}
};
const deleteBar = () => {
const idx = bars1.value.findIndex(b => b.ganttBarConfig.id === "test1")
const idx = bars1.value.findIndex((b) => b.ganttBarConfig.id === "test1");
if (idx !== -1) {
bars1.value.splice(idx, 1)
bars1.value.splice(idx, 1);
}
}
const onMousedownBar = (bar: GanttBarObject, e:MouseEvent, datetime?: string) => {
console.log("mousedown-bar", bar, e, datetime)
}
const onMouseupBar = (bar: GanttBarObject, e:MouseEvent, datetime?: string) => {
console.log("mouseup-bar", bar, e, datetime)
}
const onMouseenterBar = (bar: GanttBarObject, e:MouseEvent) => {
console.log("mouseenter-bar", bar, e)
}
const onMouseleaveBar = (bar: GanttBarObject, e:MouseEvent) => {
console.log("mouseleave-bar", bar, e)
}
const onDragstartBar = (bar: GanttBarObject, e:MouseEvent) => {
console.log("dragstart-bar", bar, e)
}
const onDragBar = (bar: GanttBarObject, e:MouseEvent) => {
console.log("drag-bar", bar, e)
}
const onDragendBar = (bar: GanttBarObject, e:MouseEvent, movedBars?: Map<GanttBarObject, {oldStart: string, oldEnd: string}>) => {
console.log("dragend-bar", bar, e, movedBars)
}
const onContextmenuBar = (bar: GanttBarObject, e:MouseEvent, datetime?: string) => {
console.log("contextmenu-bar", bar, e, datetime)
}
};
const onMousedownBar = (
bar: GanttBarObject,
e: MouseEvent,
datetime?: string
) => {
console.log("mousedown-bar", bar, e, datetime);
};
const onMouseupBar = (
bar: GanttBarObject,
e: MouseEvent,
datetime?: string
) => {
console.log("mouseup-bar", bar, e, datetime);
};
const onMouseenterBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("mouseenter-bar", bar, e);
};
const onMouseleaveBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("mouseleave-bar", bar, e);
};
const onDragstartBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("dragstart-bar", bar, e);
};
const onDragBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("drag-bar", bar, e);
};
const onDragendBar = (
bar: GanttBarObject,
e: MouseEvent,
movedBars?: Map<GanttBarObject, { oldStart: string; oldEnd: string }>
) => {
console.log("dragend-bar", bar, e, movedBars);
};
const onContextmenuBar = (
bar: GanttBarObject,
e: MouseEvent,
datetime?: string
) => {
console.log("contextmenu-bar", bar, e, datetime);
};
</script>
src/composables/useTimeaxisUnits.ts
......@@ -49,25 +49,25 @@ export default function useTimeaxisUnits(
let upperUnitMinutesCount = 0
let currentUpperUnitVal = currentUnit[upperUnit]()
while (currentUnit.isBefore(chartEndDayjs.value) || currentUnit.isSame(chartEndDayjs.value)) {
if (currentUnit[upperUnit]() !== currentUpperUnitVal) { // when upper unit changes:
let width = "0%"
if (upperUnits.length === 0) {
width = `${currentUnit.startOf(upperUnit).diff(chartStartDayjs.value, "minutes", true) / totalMinutes * 100}%`
} else if (currentUnit.isSameOrAfter(chartEndDayjs.value)) {
width = `${chartEndDayjs.value.diff(currentUnit.startOf(upperUnit), "minutes", true) / totalMinutes * 100}%`
} else {
const end = currentUnit.startOf(upperUnit)
const start = currentUnit.subtract(1, upperUnit).startOf(upperUnit)
width = `${end.diff(start, "minutes", true) / totalMinutes * 100}%`
}
upperUnits.push({
label: currentUnit.subtract(1, upperUnit).format(displayFormats[upperUnit]),
value: String(currentUpperUnitVal),
width
})
upperUnitMinutesCount = 0
currentUpperUnitVal = currentUnit[upperUnit]()
}
// if (currentUnit[upperUnit]() !== currentUpperUnitVal) { // when upper unit changes:
// let width = "0%"
// if (upperUnits.length === 0) {
// width = `${currentUnit.startOf(upperUnit).diff(chartStartDayjs.value, "minutes", true) / totalMinutes * 100}%`
// } else if (currentUnit.isSameOrAfter(chartEndDayjs.value)) {
// width = `${chartEndDayjs.value.diff(currentUnit.startOf(upperUnit), "minutes", true) / totalMinutes * 100}%`
// } else {
// const end = currentUnit.startOf(upperUnit)
// const start = currentUnit.subtract(1, upperUnit).startOf(upperUnit)
// width = `${end.diff(start, "minutes", true) / totalMinutes * 100}%`
// }
// upperUnits.push({
// label: currentUnit.subtract(1, upperUnit).format(displayFormats[upperUnit]),
// value: String(currentUpperUnitVal),
// width
// })
// upperUnitMinutesCount = 0
// currentUpperUnitVal = currentUnit[upperUnit]()
// }
let width = "0%"
//create and push lower unit:
const addCount = precision.value == 'minute' ? minuteInterval?.value: 1;
......
src/main.ts
......@@ -3,5 +3,6 @@ import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).mount('#app')
src/plugins/vuetify.js 0 → 100644
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: '#41B783',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
},
},
},
});
\ No newline at end of file
src/views/HomeView.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<h1>任务名称</h1>
<HelloWorld @:updateTaskName="updateTaskName"/>
</div>
</template>
......@@ -9,6 +9,12 @@
import { Options, Vue } from 'vue-class-component'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
const updateTaskName = (name: string)=>{
console.log('任务名称',name);
}
@Options({
components: {
HelloWorld
......
vue.config.js
......@@ -2,6 +2,25 @@ const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.NODE_ENV === 'production'
? '/v-gantt/'
: '/'
? '/static/v-gantt/'
: '/',
devServer: {
port: 3000,
proxy: {
'/api': {
target: process.env.VUE_APP_SERVER_URL,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/userfiles': {
target: process.env.VUE_APP_SERVER_URL,
changeOrigin: true,
pathRewrite: {
'^/userfiles': '/userfiles'
}
}
}
}
})
yarn.lock 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment