Skip to content

V
vue-gantt
Commit 9480f16c by 杨子
Options

优化甘特图

parent d4d13d3c
Showing with 218 additions and 83 deletions
package.json
......@@ -48,6 +48,7 @@
"sass-loader": "^12.0.0",
"ts-node": "^9.1.1",
"typescript": "~4.5.5",
"vue-cli-plugin-vuetify": "~2.4.8",
"wdio-chromedriver-service": "^7.0.0"
}
}
src/components/GGanttBar.vue
......@@ -10,13 +10,60 @@
@mouseleave="onMouseEvent"
@contextmenu="onMouseEvent"
>
<div class="g-gantt-bar-label">
<slot :bar="bar">
<div>
{{ bar.ganttBarConfig.label || "" }}
<el-popover
placement="bottom"
:width="400"
trigger="hover"
title="保障资源信息"
>
<template #reference>
<div class="g-gantt-bar-label">
<slot :bar="bar">
<div>
{{ bar.ganttBarConfig.label || "" }}
</div>
</slot>
</div>
</slot>
</div>
</template>
<template #default>
<template v-if="bar.equipmentResourceList && bar.equipmentResourceList.length">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>保障设备</span>
</div>
</template>
<el-link type="primary" v-for="item in bar.equipmentResourceList" :key="item.id">{{item.name}}</el-link>
</el-card>
</template>
<template v-if="bar.manpowerResourceList && bar.manpowerResourceList.length">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>人力资源</span>
</div>
</template>
<el-link type="primary" v-for="item in bar.manpowerResourceList" :key="item.id">{{item.name}}</el-link>
</el-card>
</template>
<template v-if="bar.toolResourceList && bar.toolResourceList.length">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>保障工具</span>
</div>
</template>
<el-link type="primary" v-for="item in bar.toolResourceList" :key="item.id">{{item.name}}</el-link>
</el-card>
</template>
</template>
</el-popover>
<template v-if="bar.ganttBarConfig.hasHandles">
<div class="g-gantt-bar-handle-left" />
<div class="g-gantt-bar-handle-right" />
......@@ -25,79 +72,99 @@
</template>
<script setup lang="ts">
import useBarDragManagement from "../composables/useBarDragManagement"
import useTimePositionMapping from "../composables/useTimePositionMapping"
import useBarDragLimit from "../composables/useBarDragLimit"
import { GanttBarObject } from "../models/models"
import { computed, ref, toRefs, inject, watch, nextTick } from "vue"
import INJECTION_KEYS from "../models/symbols"
import useBarDragManagement from "../composables/useBarDragManagement";
import useTimePositionMapping from "../composables/useTimePositionMapping";
import useBarDragLimit from "../composables/useBarDragLimit";
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";
const props = defineProps<{
bar: GanttBarObject
}>()
bar: GanttBarObject;
}>();
const getRowsInChart = inject(INJECTION_KEYS.getChartRowsKey)
const gGanttChartPropsRefs = inject(INJECTION_KEYS.gGanttChartPropsKey)
const emitBarEvent = inject(INJECTION_KEYS.emitBarEventKey)
const getRowsInChart = inject(INJECTION_KEYS.getChartRowsKey);
const gGanttChartPropsRefs = inject(INJECTION_KEYS.gGanttChartPropsKey);
const emitBarEvent = inject(INJECTION_KEYS.emitBarEventKey);
if (!getRowsInChart || !gGanttChartPropsRefs || !emitBarEvent) {
throw Error("GGanttBar: Failed to inject values from GGanttChart!")
throw Error("GGanttBar: Failed to inject values from GGanttChart!");
}
const { bar } = toRefs(props)
const { rowHeight } = gGanttChartPropsRefs
const { mapTimeToPosition, mapPositionToTime } = useTimePositionMapping(gGanttChartPropsRefs)
const { initDragOfBar, initDragOfBundle } = useBarDragManagement(getRowsInChart, gGanttChartPropsRefs, emitBarEvent)
const { setDragLimitsOfGanttBar } = useBarDragLimit(getRowsInChart, gGanttChartPropsRefs)
const isDragging = ref(false)
const { bar } = toRefs(props);
const { rowHeight } = gGanttChartPropsRefs;
const { mapTimeToPosition, mapPositionToTime } =
useTimePositionMapping(gGanttChartPropsRefs);
const { initDragOfBar, initDragOfBundle } = useBarDragManagement(
getRowsInChart,
gGanttChartPropsRefs,
emitBarEvent
);
const { setDragLimitsOfGanttBar } = useBarDragLimit(
getRowsInChart,
gGanttChartPropsRefs
);
const isDragging = ref(false);
const prepareForDrag = () => {
setDragLimitsOfGanttBar(bar.value)
setDragLimitsOfGanttBar(bar.value);
if (!bar.value.ganttBarConfig.immobile) {
const firstMousemoveCallback = (e: MouseEvent) => {
bar.value.ganttBarConfig.bundle != null ? initDragOfBundle(bar.value, e) : initDragOfBar(bar.value, e)
isDragging.value = true
}
window.addEventListener("mousemove", firstMousemoveCallback, { once: true }) // on first mousemove event
window.addEventListener("mouseup",
() => { // in case user does not move the mouse after mousedown at all
window.removeEventListener("mousemove", firstMousemoveCallback)
isDragging.value = false
bar.value.ganttBarConfig.bundle != null
? initDragOfBundle(bar.value, e)
: initDragOfBar(bar.value, e);
isDragging.value = true;
};
window.addEventListener("mousemove", firstMousemoveCallback, {
once: true,
}); // on first mousemove event
window.addEventListener(
"mouseup",
() => {
// in case user does not move the mouse after mousedown at all
window.removeEventListener("mousemove", firstMousemoveCallback);
isDragging.value = false;
},
{ once: true }
)
);
}
}
};
const onMouseEvent = (e: MouseEvent) => {
e.preventDefault()
e.preventDefault();
if (e.type === "mousedown") {
prepareForDrag()
prepareForDrag();
}
const barElement = document.getElementById(bar.value.ganttBarConfig.id)
const barContainer = barElement?.closest(".g-gantt-row-bars-container")?.getBoundingClientRect()
let datetime
const barElement = document.getElementById(bar.value.ganttBarConfig.id);
const barContainer = barElement
?.closest(".g-gantt-row-bars-container")
?.getBoundingClientRect();
let datetime;
if (barContainer) {
datetime = mapPositionToTime(e.clientX - barContainer.left)
datetime = mapPositionToTime(e.clientX - barContainer.left);
}
emitBarEvent(e, bar.value, datetime)
}
emitBarEvent(e, bar.value, datetime);
};
const { barStart, barEnd, width, chartStart, chartEnd } = gGanttChartPropsRefs
const { barStart, barEnd, width, chartStart, chartEnd } = gGanttChartPropsRefs;
const xStart = ref(0)
const xEnd = ref(0)
const xStart = ref(0);
const xEnd = ref(0);
watch([bar, width, chartStart, chartEnd], () => {
nextTick(() => {
xStart.value = mapTimeToPosition(bar.value[barStart.value])
xEnd.value = mapTimeToPosition(bar.value[barEnd.value])
})
}, { deep: true, immediate: true })
watch(
[bar, width, chartStart, chartEnd],
() => {
nextTick(() => {
xStart.value = mapTimeToPosition(bar.value[barStart.value]);
xEnd.value = mapTimeToPosition(bar.value[barEnd.value]);
});
},
{ deep: true, immediate: true }
);
window.addEventListener("resize", () => {
xStart.value = mapTimeToPosition(bar.value[barStart.value])
xEnd.value = mapTimeToPosition(bar.value[barEnd.value])
})
xStart.value = mapTimeToPosition(bar.value[barStart.value]);
xEnd.value = mapTimeToPosition(bar.value[barEnd.value]);
});
const barStyle = computed(() => {
return {
......@@ -107,10 +174,9 @@ const barStyle = computed(() => {
left: `${xStart.value}px`,
width: `${xEnd.value - xStart.value}px`,
height: `${rowHeight.value * 0.8}px`,
zIndex: isDragging.value ? 3 : 2
}
})
zIndex: isDragging.value ? 3 : 2,
};
});
</script>
<style scoped>
......@@ -126,7 +192,7 @@ const barStyle = computed(() => {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 14px 0 14px; /* 14px is the width of the handle */
padding: 0 14px 0 14px; /* 14px is the width of the handle */
display: flex;
justify-content: center;
align-items: center;
......@@ -136,7 +202,8 @@ const barStyle = computed(() => {
overflow: hidden;
text-overflow: ellipsis;
}
.g-gantt-bar-handle-left, .g-gantt-bar-handle-right {
.g-gantt-bar-handle-left,
.g-gantt-bar-handle-right {
position: absolute;
width: 10px;
height: 100%;
......@@ -157,4 +224,18 @@ const barStyle = computed(() => {
pointer-events: none;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
</style>
src/components/HelloWorld.vue
......@@ -40,8 +40,8 @@
<!-- 选择开始日期: <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">
......@@ -71,7 +71,7 @@ const dateValueEnd = ref("");
const minuteInterval = ref(2);
const minuteValue = ref();
const emits = defineEmits(["updateTaskName"]);
const Backgrounds = ["#5484b7", "#f00"];
const Backgrounds = ['#BE9B93','#C1F462','#485C23','#67EAC1','#35B0C9','#151EC4','#7425EC','#F89681','#AC31E2','#972880','#5A0E34','#247168','#D6C51B','#F95E3D','#F82F04'];
axios
.get("/api/task/helicopterTask/findById?id=1")
.then(({ data }) => {
......@@ -79,16 +79,16 @@ axios
emits("updateTaskName", name);
chartStart.value = beginTime;
chartEnd.value = endTime;
if (Array.isArray(contreeList)) {
contreeList = contreeList.map((value, index) => {
const modelObj:any = {}
if (Array.isArray(value.safeModuleTaskDTOList)) {
const result = value.safeModuleTaskDTOList.map((v) => {
const result = value.safeModuleTaskDTOList.map((v,i) => {
v.ganttBarConfig = {
id: v.id,
label: v.name,
style: {
background: Backgrounds[index],
background: Backgrounds[i],
color: "#fff",
},
hasHandles: true,
......
src/views/HomeView.vue
<template>
<div class="home">
<h1>任务名称</h1>
<HelloWorld @:updateTaskName="updateTaskName"/>
<h1>{{taskName}}</h1>
<HelloWorld @updateTaskName="updateTaskName"/>
</div>
</template>
......@@ -9,15 +9,19 @@
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
},
data(){
return {
taskName: '任务名称'
}
},
methods: {
updateTaskName(name: string){
this.taskName = name
}
}
})
export default class HomeView extends Vue {}
......
vue.config.js
......@@ -5,7 +5,7 @@ module.exports = defineConfig({
? '/static/v-gantt/'
: '/',
devServer: {
port: 3000,
port: 3001,
proxy: {
'/api': {
target: process.env.VUE_APP_SERVER_URL,
......
yarn.lock
......@@ -935,7 +935,7 @@
"@babel/parser" "^7.16.7"
"@babel/types" "^7.16.7"
"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9":
"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9":
version "7.17.9"
resolved "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
......@@ -951,6 +951,22 @@
debug "^4.1.0"
globals "^11.1.0"
"@babel/traverse@^7.17.10":
version "7.17.10"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
dependencies:
"@babel/code-frame" "^7.16.7"
"@babel/generator" "^7.17.10"
"@babel/helper-environment-visitor" "^7.16.7"
"@babel/helper-function-name" "^7.17.9"
"@babel/helper-hoist-variables" "^7.16.7"
"@babel/helper-split-export-declaration" "^7.16.7"
"@babel/parser" "^7.17.10"
"@babel/types" "^7.17.10"
debug "^4.1.0"
globals "^11.1.0"
"@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.4.4":
version "7.17.10"
resolved "https://registry.npmmirror.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
......@@ -5293,7 +5309,7 @@ glob@7.1.6:
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@7.2.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
glob@7.2.0, glob@^7.0.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
version "7.2.0"
resolved "https://registry.npmmirror.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
......@@ -5804,7 +5820,7 @@ internal-slot@^1.0.3:
has "^1.0.3"
side-channel "^1.0.4"
interpret@^1.2.0, interpret@^1.4.0:
interpret@^1.0.0, interpret@^1.2.0, interpret@^1.4.0:
version "1.4.0"
resolved "https://registry.npmmirror.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
......@@ -7160,6 +7176,14 @@ nth-check@^2.0.1:
dependencies:
boolbase "^1.0.0"
null-loader@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/null-loader/-/null-loader-4.0.1.tgz#8e63bd3a2dd3c64236a4679428632edd0a6dbc6a"
integrity sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==
dependencies:
loader-utils "^2.0.0"
schema-utils "^3.0.0"
nwsapi@^2.2.0:
version "2.2.0"
resolved "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
......@@ -8134,6 +8158,13 @@ readdirp@~3.6.0:
dependencies:
picomatch "^2.2.1"
rechoir@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
dependencies:
resolve "^1.1.6"
recursive-readdir@^2.2.2:
version "2.2.2"
resolved "https://registry.npmmirror.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
......@@ -8254,7 +8285,7 @@ resolve-from@^4.0.0:
resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
resolve@^1.10.0, resolve@^1.10.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
version "1.22.0"
resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
......@@ -8481,7 +8512,7 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
resolved "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
semver@^7.1.2, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
version "7.3.7"
resolved "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
......@@ -8618,6 +8649,15 @@ shell-quote@^1.6.1:
resolved "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
shelljs@^0.8.3:
version "0.8.5"
resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
dependencies:
glob "^7.0.0"
interpret "^1.0.0"
rechoir "^0.6.2"
side-channel@^1.0.4:
version "1.0.4"
resolved "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
......@@ -9548,6 +9588,15 @@ vue-class-component@^8.0.0-0:
resolved "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz#db692cd97656eb9a08206c03d0b7398cdb1d9420"
integrity sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==
vue-cli-plugin-vuetify@~2.4.8:
version "2.4.8"
resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.4.8.tgz#f731768b247fb0faf71c0de79752a939e6829cbd"
integrity sha512-1e8tVbJNQPLpdJgx8tlsCrFVSKrohLe5axWwolOuMr9k++X1pg95jiqBxYZdhh7tIl9bNh4wzVPPGQzTIpoS+Q==
dependencies:
null-loader "^4.0.1"
semver "^7.1.2"
shelljs "^0.8.3"
vue-demi@*:
version "0.12.5"
resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
......
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