Skip to content

V
vue-gantt
Commit 50e5b64f by 杨子
Options

优化

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