Skip to content

V
vue-gantt
Commit d4d13d3c by 杨子
Options

update

parent 9f14c312
Showing with 432 additions and 127 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 @@ ...@@ -12,10 +12,12 @@
"dependencies": { "dependencies": {
"core-js": "^3.8.3", "core-js": "^3.8.3",
"dayjs": "^1.11.1", "dayjs": "^1.11.1",
"element-plus": "^2.1.11",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"vue": "^3.2.13", "vue": "^3.2.13",
"vue-class-component": "^8.0.0-0", "vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3", "vue-router": "^4.0.3",
"vuetify": "^2.6.5",
"vuex": "^4.0.0" "vuex": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
......
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title>
</head> <%= htmlWebpackPlugin.options.title %>
<body> </title>
</head>
<body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
\ No newline at end of file
src/App.vue
<template> <template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/> <router-view/>
</template> </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 @@ ...@@ -3,12 +3,12 @@
:chart-start="chartStart" :chart-start="chartStart"
:chart-end="chartEnd" :chart-end="chartEnd"
precision="minute" precision="minute"
:minuteInterval = "minuteInterval" :minuteInterval="minuteInterval"
:row-height="40" :row-height="40"
grid grid
width="100%" width="100%"
bar-start="beginDate" bar-start="beginTime"
bar-end="endDate" bar-end="endTime"
:date-format="format" :date-format="format"
@mousedown-bar="onMousedownBar($event.bar, $event.e, $event.datetime)" @mousedown-bar="onMousedownBar($event.bar, $event.e, $event.datetime)"
@dblclick-bar="onMouseupBar($event.bar, $event.e, $event.datetime)" @dblclick-bar="onMouseupBar($event.bar, $event.e, $event.datetime)"
...@@ -19,56 +19,96 @@ ...@@ -19,56 +19,96 @@
@dragend-bar="onDragendBar($event.bar, $event.e, $event.movedBars)" @dragend-bar="onDragendBar($event.bar, $event.e, $event.movedBars)"
@contextmenu-bar="onContextmenuBar($event.bar, $event.e, $event.datetime)" @contextmenu-bar="onContextmenuBar($event.bar, $event.e, $event.datetime)"
> >
<template v-for="item in contree"
:key="item.helicopterInfoDTO.id">
<g-gantt-row <g-gantt-row
label="My row 1" :label="item.helicopterInfoDTO.name"
:bars="bars1" :bars="item.list"
highlight-on-hover highlight-on-hover
/> />
<g-gantt-row
label="My row 2" </template>
<!-- <g-gantt-row
label="My row 1"
:bars="bars1"
highlight-on-hover highlight-on-hover
:bars="bars2" /> -->
/>
</g-gantt-chart> </g-gantt-chart>
<button @click="addBar()"> <!-- 选择开始日期: <input type="text" v-model="dateValueStart">
Add bar 选择结束日期: <input type="text" v-model="dateValueEnd"> -->
</button>
<button @click="deleteBar()">
Delete bar
</button>
选择开始日期: <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue" import { reactive, ref } from "vue";
import GGanttRow from "./GGanttRow.vue" import GGanttRow from "./GGanttRow.vue";
import GGanttChart from "./GGanttChart.vue" import GGanttChart from "./GGanttChart.vue";
import { GanttBarObject } from "../models/models" import { GanttBarObject } from "../models/models";
import { ClickOutside as vClickOutside, ElPopover} from "element-plus"
let chartStart = ref("2022-02-01 12:00") import axios from "axios";
let chartEnd = ref("2022-02-01 18:00") let chartStart = ref("2022-02-01 12:00");
const format = ref("YYYY-MM-DD HH:mm") let chartEnd = ref("2022-02-01 18:00");
const format = ref("YYYY-MM-DD HH:mm");
let contree = ref([] as any[]);
const bars1 = ref([ const bars1 = ref([
{ // {
beginDate: "2022-02-01 12:00", // beginTime: "2022-05-06 08:00",
endDate: "2022-02-01 12:30", // endTime: "2022-05-06 12:30",
ganttBarConfig: { // ganttBarConfig: {
id: "8621987329", // id: "8621987329",
label: "I'm in a bundle", // label: "I'm in a bundle",
bundle: "bundle2" // },
} // },
} ] as any);
])
const dateValueStart = ref(""); const dateValueStart = ref("");
const dateValueEnd = ref(""); const dateValueEnd = ref("");
const minuteInterval = ref(30); const minuteInterval = ref(2);
const minuteValue = ref(); 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([ const bars2 = ref([
{ {
...@@ -81,14 +121,14 @@ const bars2 = ref([ ...@@ -81,14 +121,14 @@ const bars2 = ref([
background: "#69e064", background: "#69e064",
borderRadius: "15px", borderRadius: "15px",
color: "blue", color: "blue",
fontSize: "10px" fontSize: "10px",
} },
} },
} },
]) ]);
const addBar = () => { const addBar = () => {
if (bars1.value.some(bar => bar.ganttBarConfig.id === "test1")) { if (bars1.value.some((bar) => bar.ganttBarConfig.id === "test1")) {
return return;
} }
const bar = { const bar = {
beginDate: "2022-02-01 12:00", beginDate: "2022-02-01 12:00",
...@@ -99,64 +139,79 @@ const addBar = () => { ...@@ -99,64 +139,79 @@ const addBar = () => {
label: "Hello!", label: "Hello!",
style: { style: {
background: "#5484b7", background: "#5484b7",
borderRadius: "20px" borderRadius: "20px",
} },
} },
} };
bars1.value.push(bar) bars1.value.push(bar);
} };
const confirm = (type:number) =>{ const confirm = (type: number) => {
if(dateValueStart.value){ if (dateValueStart.value) {
chartStart.value = dateValueStart.value; chartStart.value = dateValueStart.value;
} }
if(dateValueEnd.value){ if (dateValueEnd.value) {
chartEnd.value = dateValueEnd.value; chartEnd.value = dateValueEnd.value;
} }
if(minuteValue.value){ if (minuteValue.value) {
minuteInterval.value = minuteValue.value; minuteInterval.value = minuteValue.value;
} }
};
}
const deleteBar = () => { 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) { if (idx !== -1) {
bars1.value.splice(idx, 1) bars1.value.splice(idx, 1);
} }
} };
const onMousedownBar = (bar: GanttBarObject, e:MouseEvent, datetime?: string) => { const onMousedownBar = (
console.log("mousedown-bar", bar, e, datetime) bar: GanttBarObject,
} e: MouseEvent,
datetime?: string
const onMouseupBar = (bar: GanttBarObject, e:MouseEvent, datetime?: string) => { ) => {
console.log("mouseup-bar", bar, e, datetime) console.log("mousedown-bar", bar, e, datetime);
} };
const onMouseenterBar = (bar: GanttBarObject, e:MouseEvent) => { const onMouseupBar = (
console.log("mouseenter-bar", bar, e) bar: GanttBarObject,
} e: MouseEvent,
datetime?: string
const onMouseleaveBar = (bar: GanttBarObject, e:MouseEvent) => { ) => {
console.log("mouseleave-bar", bar, e) console.log("mouseup-bar", bar, e, datetime);
} };
const onDragstartBar = (bar: GanttBarObject, e:MouseEvent) => { const onMouseenterBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("dragstart-bar", bar, e) console.log("mouseenter-bar", bar, e);
} };
const onDragBar = (bar: GanttBarObject, e:MouseEvent) => { const onMouseleaveBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("drag-bar", bar, e) console.log("mouseleave-bar", bar, e);
} };
const onDragendBar = (bar: GanttBarObject, e:MouseEvent, movedBars?: Map<GanttBarObject, {oldStart: string, oldEnd: string}>) => { const onDragstartBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("dragend-bar", bar, e, movedBars) console.log("dragstart-bar", bar, e);
} };
const onContextmenuBar = (bar: GanttBarObject, e:MouseEvent, datetime?: string) => { const onDragBar = (bar: GanttBarObject, e: MouseEvent) => {
console.log("contextmenu-bar", bar, e, datetime) 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> </script>
src/composables/useTimeaxisUnits.ts
...@@ -49,25 +49,25 @@ export default function useTimeaxisUnits( ...@@ -49,25 +49,25 @@ export default function useTimeaxisUnits(
let upperUnitMinutesCount = 0 let upperUnitMinutesCount = 0
let currentUpperUnitVal = currentUnit[upperUnit]() let currentUpperUnitVal = currentUnit[upperUnit]()
while (currentUnit.isBefore(chartEndDayjs.value) || currentUnit.isSame(chartEndDayjs.value)) { while (currentUnit.isBefore(chartEndDayjs.value) || currentUnit.isSame(chartEndDayjs.value)) {
if (currentUnit[upperUnit]() !== currentUpperUnitVal) { // when upper unit changes: // if (currentUnit[upperUnit]() !== currentUpperUnitVal) { // when upper unit changes:
let width = "0%" // let width = "0%"
if (upperUnits.length === 0) { // if (upperUnits.length === 0) {
width = `${currentUnit.startOf(upperUnit).diff(chartStartDayjs.value, "minutes", true) / totalMinutes * 100}%` // width = `${currentUnit.startOf(upperUnit).diff(chartStartDayjs.value, "minutes", true) / totalMinutes * 100}%`
} else if (currentUnit.isSameOrAfter(chartEndDayjs.value)) { // } else if (currentUnit.isSameOrAfter(chartEndDayjs.value)) {
width = `${chartEndDayjs.value.diff(currentUnit.startOf(upperUnit), "minutes", true) / totalMinutes * 100}%` // width = `${chartEndDayjs.value.diff(currentUnit.startOf(upperUnit), "minutes", true) / totalMinutes * 100}%`
} else { // } else {
const end = currentUnit.startOf(upperUnit) // const end = currentUnit.startOf(upperUnit)
const start = currentUnit.subtract(1, upperUnit).startOf(upperUnit) // const start = currentUnit.subtract(1, upperUnit).startOf(upperUnit)
width = `${end.diff(start, "minutes", true) / totalMinutes * 100}%` // width = `${end.diff(start, "minutes", true) / totalMinutes * 100}%`
} // }
upperUnits.push({ // upperUnits.push({
label: currentUnit.subtract(1, upperUnit).format(displayFormats[upperUnit]), // label: currentUnit.subtract(1, upperUnit).format(displayFormats[upperUnit]),
value: String(currentUpperUnitVal), // value: String(currentUpperUnitVal),
width // width
}) // })
upperUnitMinutesCount = 0 // upperUnitMinutesCount = 0
currentUpperUnitVal = currentUnit[upperUnit]() // currentUpperUnitVal = currentUnit[upperUnit]()
} // }
let width = "0%" let width = "0%"
//create and push lower unit: //create and push lower unit:
const addCount = precision.value == 'minute' ? minuteInterval?.value: 1; const addCount = precision.value == 'minute' ? minuteInterval?.value: 1;
......
src/main.ts
...@@ -3,5 +3,6 @@ import App from './App.vue' ...@@ -3,5 +3,6 @@ import App from './App.vue'
import './registerServiceWorker' import './registerServiceWorker'
import router from './router' import router from './router'
import store from './store' import store from './store'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).mount('#app') 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> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <h1>任务名称</h1>
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> <HelloWorld @:updateTaskName="updateTaskName"/>
</div> </div>
</template> </template>
...@@ -9,6 +9,12 @@ ...@@ -9,6 +9,12 @@
import { Options, Vue } from 'vue-class-component' import { Options, Vue } from 'vue-class-component'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
const updateTaskName = (name: string)=>{
console.log('任务名称',name);
}
@Options({ @Options({
components: { components: {
HelloWorld HelloWorld
......
vue.config.js
...@@ -2,6 +2,25 @@ const { defineConfig } = require('@vue/cli-service') ...@@ -2,6 +2,25 @@ const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true, transpileDependencies: true,
publicPath: process.env.NODE_ENV === 'production' 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