Skip to content

V
vue-gantt
Commit 51352f50 by 杨子
Options

update

parent 9480f16c
Showing with 119 additions and 332 deletions
src/components/GGanttBar.vue
......@@ -11,8 +11,7 @@
@contextmenu="onMouseEvent"
>
<el-popover
placement="bottom"
:width="400"
placement="right"
trigger="hover"
title="保障资源信息"
>
......@@ -26,40 +25,21 @@
</div>
</template>
<template #default>
<template v-if="bar.equipmentResourceList && bar.equipmentResourceList.length">
<el-card class="box-card">
<template #header>
<!-- <template v-if="bar.equipmentResourceList && bar.equipmentResourceList.length">
<div class="card-header">
<span>保障设备</span>
<span>保障设备:</span><el-link type="primary" v-for="item in bar.equipmentResourceList" :key="item.id">{{item.name}}</el-link>
</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>
<span>人力资源:</span><el-link type="primary" v-for="item in bar.manpowerResourceList" :key="item.id">{{item.name}}</el-link>
</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>
<span>保障工具:</span><el-link type="primary" v-for="item in bar.toolResourceList" :key="item.id">{{item.name}}</el-link>
</div>
</template>
<el-link type="primary" v-for="item in bar.toolResourceList" :key="item.id">{{item.name}}</el-link>
</el-card>
</template>
</template> -->
</template>
......@@ -196,6 +176,7 @@ const barStyle = computed(() => {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
}
.g-gantt-bar-label > * {
white-space: nowrap;
......@@ -237,5 +218,8 @@ const barStyle = computed(() => {
.item {
margin-bottom: 18px;
}
.card-header{
font-size: 12px;
}
</style>
src/components/GGanttChart.vue
......@@ -65,7 +65,7 @@ import { GanttBarObject } from "../models/models"
interface GGanttChartProps {
chartStart: string
chartEnd: string
precision?: "hour" | "day" | "month"
precision?: "hour" | "day" | "month" | "minute"
barStart: string
barEnd: string
dateFormat?: string
......
src/components/HelloWorld copy.vue deleted 100644 → 0
<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
......@@ -7,17 +7,9 @@
:row-height="40"
grid
width="100%"
bar-start="beginTime"
bar-end="endTime"
bar-start="beginDate"
bar-end="endDate"
: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 in contree"
:key="item.helicopterInfoDTO.id">
......@@ -50,7 +42,8 @@ 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";
import httpRequest from '@/utils/httpRequest.js'
let chartStart = ref("2022-02-01 12:00");
let chartEnd = ref("2022-02-01 18:00");
const format = ref("YYYY-MM-DD HH:mm");
......@@ -72,8 +65,19 @@ const minuteInterval = ref(2);
const minuteValue = ref();
const emits = defineEmits(["updateTaskName"]);
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")
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=1'
const url = process.env.NODE_ENV === 'production' ? '/jeeplus-vue'+baseUrl: baseUrl
httpRequest
.get(url)
.then(({ data }) => {
let { beginTime, endTime, name, contreeList } = data;
emits("updateTaskName", name);
......@@ -81,17 +85,17 @@ axios
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,i) => {
if (Array.isArray(value.processesList)) {
const result = value.processesList.map((v,i) => {
v.ganttBarConfig = {
id: v.id,
label: v.name,
style: {
background: Backgrounds[i],
background: i < 16 ? Backgrounds[i] : getRandomColor(),
color: "#fff",
},
hasHandles: true,
hasHandles: false,
immobile:true
};
return v;
});
......@@ -110,41 +114,8 @@ axios
console.log(err);
});
const bars2 = ref([
{
beginDate: "2022-02-01 12:30",
endDate: "2022-02-01 12:36",
ganttBarConfig: {
id: "9716981641",
label: "Oh hey",
style: {
background: "#69e064",
borderRadius: "15px",
color: "blue",
fontSize: "10px",
},
},
},
]);
const addBar = () => {
if (bars1.value.some((bar) => bar.ganttBarConfig.id === "test1")) {
return;
}
const bar = {
beginDate: "2022-02-01 12:00",
endDate: "2022-02-01 13:00",
ganttBarConfig: {
id: "test1",
hasHandles: true,
label: "Hello!",
style: {
background: "#5484b7",
borderRadius: "20px",
},
},
};
bars1.value.push(bar);
};
const confirm = (type: number) => {
if (dateValueStart.value) {
......@@ -160,58 +131,4 @@ const confirm = (type: number) => {
}
};
const deleteBar = () => {
const idx = bars1.value.findIndex((b) => b.ganttBarConfig.id === "test1");
if (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);
};
</script>
src/plugins/vuetify.js deleted 100644 → 0
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/utils/httpRequest.js 0 → 100644
import Vue from 'vue'
import axios from 'axios'
// import axiosRetry from 'axios-retry'
import router from '@/router'
import qs from 'qs'
// 超时时间
axios.defaults.timeout = 100000
// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true
axios.defaults.headers = {'Content-Type': 'application/json; charset=utf-8'}
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'
// 非生产环境 && 开启代理, 接口前缀统一使用[/api]前缀做代理拦截!
const BASE_URL = process.env.NODE_ENV !== 'production' ? process.env.VUE_APP_BASE_API : process.env.VUE_APP_SERVER_URL
// 对面暴露的基础请求路径
axios.BASE_URL = BASE_URL
/**
* 请求拦截
*/
let loading
axios.interceptors.request.use(config => {
let showLoading = false
// 请求地址处理
if (!config.url.startsWith('http')) {
config.url = BASE_URL + config.url
}
const type = config.method
const arrayFormat = config.headers.arrayFormat || 'indices'
if (type === 'post' && config.headers['Content-Type'] === 'application/x-www-form-urlencoded; charset=utf-8') {
// post请求参数处理
config.data = qs.stringify(config.data, { allowDots: true, arrayFormat })
} else if (type === 'get') {
// get请求参数处理
config.paramsSerializer = (params) => {
return qs.stringify(params, {
allowDots: true, arrayFormat
})
}
}
return config
}, error => {
return Promise.reject(error)
})
/**
* 响应拦截
*/
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 408 || error.response.status === 401) { // 需要重新登录
router.push({ name: 'login' })
} else if (error.response.status === 404) { // 路径找不到
} else if (error.response.status === 503) {
} else if (error.response.status === 504) {
} else {
}
return Promise.reject(error)
})
// 配置axios
// axiosRetry(axios, {
// retries: 3, // 设置自动发送请求次数
// retryCondition: () => {
// // true为打开自动发送请求，false为关闭自动发送请求
// // 这里的意思是当请求方式为get时打开自动发送请求功能
// return false
// }
// })
export default axios
vue.config.js
......@@ -2,7 +2,7 @@ const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.NODE_ENV === 'production'
? '/static/v-gantt/'
? '/v-gantt/'
: '/',
devServer: {
port: 3001,
......
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