Skip to content

V
vue-gantt
Commit 50e5b64f by 杨子
Options

优化

parent 6bad617f
Showing with 148 additions and 78 deletions
package.json
...@@ -10,12 +10,14 @@ ...@@ -10,12 +10,14 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"ant-design-vue": "^3.2.7",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"dayjs": "^1.11.1", "dayjs": "^1.11.1",
"element-plus": "^2.1.11", "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-datepicker-ui": "^2.3.0",
"vue-router": "^4.0.3", "vue-router": "^4.0.3",
"vuetify": "^2.6.5", "vuetify": "^2.6.5",
"vuex": "^4.0.0" "vuex": "^4.0.0"
......
src/App.vue
<template> <template>
<router-view/>
<a-config-provider :locale="zhCN">
<router-view />
</a-config-provider>
</template> </template>
<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
</script>
<style lang="scss"> <style lang="scss">
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
......
src/components/GGanttBar.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div :id="bar.ganttBarConfig.id" class="g-gantt-bar" :style="barStyle" @mousedown="onMouseEvent" <div :id="bar.ganttBarConfig.id" class="g-gantt-bar" :style="barStyle" @mousedown="onMouseEvent"
@mouseup="onMouseEvent" @dblclick="onMouseEvent" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent" @mouseup="onMouseEvent" @dblclick="onMouseEvent" @mouseenter="onMouseEvent" @mouseleave="onMouseEvent"
@contextmenu="onMouseEvent"> @contextmenu="onMouseEvent">
<el-popover placement="right" trigger="hover" title="信息"> <el-popover :placement="placement" trigger="hover" title="信息">
<template #reference> <template #reference>
<div class="g-gantt-bar-label"> <div class="g-gantt-bar-label">
<slot :bar="bar"> <slot :bar="bar">
...@@ -54,6 +54,7 @@ import { GanttBarObject } from "../models/models"; ...@@ -54,6 +54,7 @@ import { GanttBarObject } from "../models/models";
import { computed, ref, toRefs, inject, watch, nextTick } from "vue"; import { computed, ref, toRefs, inject, watch, nextTick } from "vue";
import INJECTION_KEYS from "../models/symbols"; import INJECTION_KEYS from "../models/symbols";
import { ClickOutside as vClickOutside, ElPopover, ElCard, ElLink } from "element-plus"; import { ClickOutside as vClickOutside, ElPopover, ElCard, ElLink } from "element-plus";
import { pa } from "element-plus/lib/locale";
const props = defineProps<{ const props = defineProps<{
bar: GanttBarObject; bar: GanttBarObject;
}>(); }>();
...@@ -104,7 +105,14 @@ const prepareForDrag = () => { ...@@ -104,7 +105,14 @@ const prepareForDrag = () => {
); );
} }
}; };
const placement = ref('right');
const onMouseEvent = (e: MouseEvent) => { const onMouseEvent = (e: MouseEvent) => {
if(e.pageX >=1000){
placement.value = 'left';
}
e.preventDefault(); e.preventDefault();
if (e.type === "mousedown") { if (e.type === "mousedown") {
prepareForDrag(); prepareForDrag();
...@@ -140,12 +148,19 @@ window.addEventListener("resize", () => { ...@@ -140,12 +148,19 @@ window.addEventListener("resize", () => {
xStart.value = mapTimeToPosition(bar.value[barStart.value]); xStart.value = mapTimeToPosition(bar.value[barStart.value]);
xEnd.value = mapTimeToPosition(bar.value[barEnd.value]); xEnd.value = mapTimeToPosition(bar.value[barEnd.value]);
}); });
console.log(bar.value.ganttBarConfig.top);
const barStyle = computed(() => { const barStyle = computed(() => {
let top = `${rowHeight.value * 0.1 }px`
if( 'top' in bar.value.ganttBarConfig){
top = `${rowHeight.value * 0.1 * bar.value.ganttBarConfig.top + (32*(bar.value.ganttBarConfig.top-1))}px`
}
return { return {
...bar.value.ganttBarConfig.style, ...bar.value.ganttBarConfig.style,
position: "absolute", position: "absolute",
top: `${rowHeight.value * 0.1}px`, top,
left: `${xStart.value}px`, left: `${xStart.value}px`,
width: `${xEnd.value - xStart.value}px`, width: `${xEnd.value - xStart.value}px`,
height: `${rowHeight.value * 0.8}px`, height: `${rowHeight.value * 0.8}px`,
......
src/components/GGanttChart.vue
...@@ -209,5 +209,6 @@ provide(INJECTION_KEYS.emitBarEventKey, emitBarEvent) ...@@ -209,5 +209,6 @@ provide(INJECTION_KEYS.emitBarEventKey, emitBarEvent)
#g-gantt-rows-container{ #g-gantt-rows-container{
position: relative; position: relative;
text-align: left;
} }
</style> </style>
src/components/GGanttRow.vue
<template> <template>
<!-- <div
class="g-gantt-row-label"
:style="{background: colors.primary, color: colors.text}"
>
<slot name="label">
{{ label }}
</slot>
</div> -->
<div <div
class="g-gantt-row" class="g-gantt-row"
:style="rowStyle" :style="rowStyle"
...@@ -8,14 +18,7 @@ ...@@ -8,14 +18,7 @@
@mouseover="isHovering = true" @mouseover="isHovering = true"
@mouseleave="isHovering = false" @mouseleave="isHovering = false"
> >
<div
class="g-gantt-row-label"
:style="{background: colors.primary, color: colors.text}"
>
<slot name="label">
{{ label }}
</slot>
</div>
<div <div
ref="barContainer" ref="barContainer"
class="g-gantt-row-bars-container" class="g-gantt-row-bars-container"
...@@ -65,12 +68,18 @@ if (!gGanttChartPropsRefs) { ...@@ -65,12 +68,18 @@ if (!gGanttChartPropsRefs) {
} }
const { colors } = useColorScheme(gGanttChartPropsRefs) const { colors } = useColorScheme(gGanttChartPropsRefs)
const { rowHeight } = gGanttChartPropsRefs const { rowHeight } = gGanttChartPropsRefs
const { highlightOnHover } = toRefs(props) const { highlightOnHover, bars } = toRefs(props)
const isHovering = ref(false) const isHovering = ref(false)
const rowStyle = computed(() => { const rowStyle = computed(() => {
let height = rowHeight.value
const len = bars.value.filter(v=>v.ganttBarConfig.isCover).length
if(len > 0) {
height = (rowHeight.value * 0.8 * len) + (rowHeight.value * 0.1) * (len +1)
}
return { return {
height: `${rowHeight.value}px`, height: `${ height }px`,
background: highlightOnHover?.value && isHovering.value ? colors.value.hoverHighlight : null background: highlightOnHover?.value && isHovering.value ? colors.value.hoverHighlight : null
} }
}) })
...@@ -92,6 +101,9 @@ const onDrop = (e: MouseEvent) => { ...@@ -92,6 +101,9 @@ const onDrop = (e: MouseEvent) => {
</script> </script>
<style scoped> <style scoped>
.row-container{
position: relative;
}
.g-gantt-row { .g-gantt-row {
width: 100%; width: 100%;
transition: background 0.4s; transition: background 0.4s;
...@@ -103,6 +115,7 @@ const onDrop = (e: MouseEvent) => { ...@@ -103,6 +115,7 @@ const onDrop = (e: MouseEvent) => {
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
width: 100%; width: 100%;
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;
/* left: 80px; */ /* left: 80px; */
} }
......
src/components/GanttView.vue
<template> <template>
<g-gantt-chart <div>
:chart-start="chartStart" <div style="text-align: left; margin-bottom: 16px;float: left;">
:chart-end="chartEnd" <span>刻度：</span>
precision="minute" <el-select-v2 v-model="interval" :options="optionList" placeholder="Please select" />
:minuteInterval="interval" </div>
:row-height="40" <div style="text-align: left; margin-bottom: 16px;float: left; margin-left: 16px;">
grid <span>时间范围：</span>
width="100%" <a-range-picker v-model:value="dateRange" show-time="{ format: 'HH:mm' }" :format="dateFormat"
bar-start="beginProcessDate" :placeholder="['开始时间', '结束时间']" allowClear @change="onRangeChange" />
bar-end="endProcessDate" </div>
:date-format="format" <g-gantt-chart :chart-start="chartStart" :chart-end="chartEnd" precision="minute" :minuteInterval="interval"
> :row-height="40" grid width="100%" bar-start="beginProcessDate" bar-end="endProcessDate" :date-format="format">
<template v-for="item in contree" <template v-for="item in contree" :key="item.helicopterInfoDTO.id">
:key="item.helicopterInfoDTO.id"> <el-button type="success" size="default">{{ item.helicopterInfoDTO.name }}</el-button>
<g-gantt-row <g-gantt-row :label="item.helicopterInfoDTO.name" :bars="item.list" highlight-on-hover />
:label="item.helicopterInfoDTO.name"
:bars="item.list"
highlight-on-hover
/>
</template> </template>
</g-gantt-chart> </g-gantt-chart>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from "vue"; import { reactive, ref, nextTick } 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, ElMessage } from "element-plus" import { ElSelect, ElMessage, ElSelectV2, ElButton } from "element-plus"
import httpRequest from '@/utils/httpRequest.js' import httpRequest from '@/utils/httpRequest.js'
import dayjs, { Dayjs } from 'dayjs';
import { computed } from "@vue/reactivity";
const optionList = [
{ label: 1, value: 1 },
{ label: 5, value: 5 },
{ label: 10, value: 10 },
{ label: 20, value: 20 },
{ label: 30, value: 30 },
{ label: 60, value: 60 },
]
let chartStart = ref("2022-02-01 12:00"); let chartStart = ref("2022-02-01 12:00");
let chartEnd = ref("2022-02-01 18:00"); let chartEnd = ref("2022-02-01 18:00");
const format = ref("YYYY-MM-DD HH:mm"); const format = ref("YYYY-MM-DD HH:mm");
let contree = ref([] as any[]); let contree = ref([] as any[]);
const bars1 = ref([ const bars1 = ref([] as any);
// {
// 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 dateValueStart = ref("");
const dateValueEnd = ref(""); const dateValueEnd = ref("");
const interval = ref(10); const interval = ref(10);
const minuteValue = ref(); const minuteValue = ref();
const emits = defineEmits(["updateTaskName"]); const emits = defineEmits(["updateTaskName"]);
const Backgrounds = ['#BE9B93','#C1F462','#485C23','#67EAC1','#35B0C9','#151EC4','#7425EC','#F89681','#AC31E2','#972880','#5A0E34','#247168','#D6C51B','#F95E3D','#F82F04']; const Backgrounds = ['#BE9B93', '#C1F462', '#485C23', '#67EAC1', '#35B0C9', '#151EC4', '#7425EC', '#F89681', '#AC31E2', '#972880', '#5A0E34', '#247168', '#D6C51B', '#F95E3D', '#F82F04'];
const dateFormat = 'YYYY-MM-DD HH:mm';
const getRandomColor = function(){
return '#' + (function(color){ const dateRange = ref()
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
const onRangeChange = (value: [Dayjs, Dayjs], dateString: [string, string]) => {
const [first, end] = dateString
if (first && end) {
chartStart.value = first
chartEnd.value = end
} else {
chartStart.value = dateValueStart.value
chartEnd.value = dateValueEnd.value
}
};
const getRandomColor = function () {
return '#' + (function (color) {
return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
&& (color.length == 6) ? color : arguments.callee(color); && (color.length == 6) ? color : arguments.callee(color);
})(''); })('');
} }
const baseUrl = '/task/helicopterTask/getGanttInfo?id='+ sessionStorage.getItem('taskResultId')+"&token="+sessionStorage.getItem('token') const baseUrl = '/task/helicopterTask/getGanttInfo?id=' + sessionStorage.getItem('taskResultId') + "&token=" + sessionStorage.getItem('token')
httpRequest httpRequest
.get(baseUrl) .get(baseUrl)
.then(({ data }) => { .then(({ data }) => {
if(!data){ if (!data) {
ElMessage({ ElMessage({
message: '数据正在计算中...', message: '数据正在计算中...',
type: 'warning' type: 'warning'
...@@ -78,14 +89,20 @@ httpRequest ...@@ -78,14 +89,20 @@ httpRequest
emits("updateTaskName", name); emits("updateTaskName", name);
chartStart.value = beginTime; chartStart.value = beginTime;
chartEnd.value = endTime; chartEnd.value = endTime;
if(minuteInterval){ dateValueStart.value = beginTime;
dateValueEnd.value = endTime;
// dateRange.value = [dayjs(beginTime, dateFormat), dayjs(endTime, dateFormat)];
if (minuteInterval) {
interval.value = minuteInterval interval.value = minuteInterval
} }
if (Array.isArray(contreeList)) { if (Array.isArray(contreeList)) {
contreeList = contreeList.map((value, index) => { contreeList = contreeList.map((value, index) => {
if (Array.isArray(value.processesList)) { if (Array.isArray(value.processesList)) {
const result = value.processesList.map((v,i) => { const result = value.processesList.map((v, i) => {
v.begin = new Date(v.beginProcessDate).getTime()
v.end = new Date(v.endProcessDate).getTime()
v.ganttBarConfig = { v.ganttBarConfig = {
id: v.id, id: v.id,
label: v.name, label: v.name,
...@@ -94,39 +111,44 @@ httpRequest ...@@ -94,39 +111,44 @@ httpRequest
color: "#fff", color: "#fff",
}, },
hasHandles: false, hasHandles: false,
immobile:true // immobile:true
}; };
return v; return v;
}); });
value.list= result
formatter(result);
console.log(result);
value.list = result
} }
return value return value
}); });
} }
console.log(contreeList);
contree.value.push(...contreeList) contree.value.push(...contreeList)
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
}); });
const formatter = (processesList: any[]) => {
let index = 0, top = 0
while (index < processesList.length) {
const confirm = (type: number) => { const current = processesList[index]
if (dateValueStart.value) { const filterValues = processesList.filter((v, i) => i != index)
chartStart.value = dateValueStart.value;
for (const value of filterValues) {
if (current.begin >= value.begin && current.begin < value.end) {
top++
current.ganttBarConfig.isCover = true
current.ganttBarConfig.top = top
break
} }
if (dateValueEnd.value) {
chartEnd.value = dateValueEnd.value;
} }
index++
if (minuteValue.value) {
minuteInterval.value = minuteValue.value;
} }
}; return processesList
}
</script> </script>
src/composables/useTimeaxisUnits.ts
...@@ -26,7 +26,7 @@ export default function useTimeaxisUnits( ...@@ -26,7 +26,7 @@ export default function useTimeaxisUnits(
const displayFormats = { const displayFormats = {
hour: "HH", hour: "HH",
date: "DD.MMM ", date: "MMMDD日",
day: "DD.MMM ", day: "DD.MMM ",
month: "MMMM YYYY", month: "MMMM YYYY",
year: "YYYY", year: "YYYY",
...@@ -38,7 +38,6 @@ export default function useTimeaxisUnits( ...@@ -38,7 +38,6 @@ export default function useTimeaxisUnits(
// fifteen: 15, // fifteen: 15,
// half: 30 // half: 30
// } // }
const timeaxisUnits = computed(() => { const timeaxisUnits = computed(() => {
const upperUnits: { label: string, value?: string, width?: string }[] = [] const upperUnits: { label: string, value?: string, width?: string }[] = []
const lowerUnits: { label: string, value?: string, width?: string }[] = [] const lowerUnits: { label: string, value?: string, width?: string }[] = []
...@@ -99,9 +98,9 @@ export default function useTimeaxisUnits( ...@@ -99,9 +98,9 @@ export default function useTimeaxisUnits(
upperUnitMinutesCount += currentUnit.diff(prevUpperUnitUnit, "minutes", true) upperUnitMinutesCount += currentUnit.diff(prevUpperUnitUnit, "minutes", true)
} }
} }
// for the very last upper unit : // for the very last upper unit :
if (!upperUnits.some(un => un.value === String(currentUpperUnitVal))) { if (!upperUnits.some(un => un.value === String(currentUpperUnitVal))) {
debugger
upperUnitMinutesCount += chartEndDayjs.value.diff(currentUnit.subtract(1, lowerUnit === 'minute' ? 'hour': lowerUnit ), "minutes", true) upperUnitMinutesCount += chartEndDayjs.value.diff(currentUnit.subtract(1, lowerUnit === 'minute' ? 'hour': lowerUnit ), "minutes", true)
upperUnits.push({ upperUnits.push({
label: currentUnit.format(displayFormats[upperUnit]), label: currentUnit.format(displayFormats[upperUnit]),
......
src/main.ts
...@@ -4,5 +4,11 @@ import './registerServiceWorker' ...@@ -4,5 +4,11 @@ import './registerServiceWorker'
import router from './router' import router from './router'
import store from './store' import store from './store'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).mount('#app') import 'ant-design-vue/dist/antd.css';
import { DatePicker, Space, ConfigProvider } from 'ant-design-vue'
// import dayjs from 'dayjs';
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn')
createApp(App).use(store).use(DatePicker).use(ConfigProvider).use(Space).use(router).mount('#app')
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