row.name}
+ />
+ )
+ },
+})
diff --git a/src/views/Gantt/components/Gantt/hooks/gantt.ts b/src/views/Gantt/components/Gantt/hooks/gantt.ts
index 23258ea78..f54633b16 100644
--- a/src/views/Gantt/components/Gantt/hooks/gantt.ts
+++ b/src/views/Gantt/components/Gantt/hooks/gantt.ts
@@ -17,9 +17,9 @@ const useGantt = ({ router, route }: GanttParams) => {
const { subId } = route.params
const records = ref([])
onMounted(() => {
- getGanttData(subId)
+ getGanttData()
})
- async function getGanttData(subId: string) {
+ async function getGanttData() {
if (subId) {
const res = await getSubGantt(subId)
records.value = res
@@ -34,7 +34,7 @@ const useGantt = ({ router, route }: GanttParams) => {
function renderMainTask(dom: HTMLElement) {
const option = getOption()
ganttInstance = new Gantt(dom, option)
- // window['ganttInstance'] = ganttInstance
+ window['ganttInstance'] = ganttInstance
console.log(ganttInstance)
}
function getOption(): TYPES.GanttConstructorOptions {
@@ -81,7 +81,7 @@ const useGantt = ({ router, route }: GanttParams) => {
taskBar: renderTaskBar(subId),
timelineHeader: {
backgroundColor: headerBgColor,
- colWidth: 100,
+ colWidth: 140,
verticalLine: {
lineColor: textColorWithOp,
lineWidth: 1,
@@ -112,14 +112,14 @@ const useGantt = ({ router, route }: GanttParams) => {
const columns = [
{
field: 'name',
- title: '类型',
+ title: subId ? '事件类型' : '事件主体',
width: '120',
mergeCell: true,
},
]
if (subId) {
columns.unshift({
- field: 'isCheck',
+ field: 'isChecked',
title: '',
width: '60',
headerType: 'checkbox',
@@ -165,7 +165,7 @@ const useGantt = ({ router, route }: GanttParams) => {
return taskListTable
}
- function renderTaskBar(subId: string) {
+ function renderTaskBar() {
const taskBar = {
resizable: false,
moveable: false,
@@ -179,11 +179,15 @@ const useGantt = ({ router, route }: GanttParams) => {
width,
height,
fill: 'transparent',
- // stroke:true,
+ // fill: textColor,
+ // fillOpacity: 0.1,
// stroke: textColor,
+ // strokeOpacity: 0.2,
+ // lineWidth: 4,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
+ cursor: 'pointer',
})
if (!subId) {
container.addEventListener('click', event => {
@@ -304,6 +308,8 @@ const useGantt = ({ router, route }: GanttParams) => {
height,
display: 'flex',
flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
flexWrap: 'nowrap',
})
@@ -318,7 +324,6 @@ const useGantt = ({ router, route }: GanttParams) => {
fill: textColor,
textAlign: 'right',
maxLineWidth: width,
- boundsPadding: [25, 12, 10, 12],
})
container.add(day)
return {
diff --git a/src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts b/src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts
new file mode 100644
index 000000000..b9419b13b
--- /dev/null
+++ b/src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts
@@ -0,0 +1,389 @@
+import { Group, Image, Text, CheckBox, Rect } from '@visactor/vtable/es/vrender'
+
+import { useDialog } from 'naive-ui'
+import { Gantt, tools, TYPES } from '@visactor/vtable-gantt'
+import { getMainGantt, getSubGantt } from '@/api/Gantt'
+
+type GanttParams = {
+ route?: any
+ router?: any
+}
+let ganttInstance: null | Gantt = null
+const bgColor = '#1c202c'
+const headerBgColor = '#33566f22'
+const textColor = '#65c5e7'
+const textColorWithOp = '#75fbfd22'
+const useGanttEdit = ({ router, route }: GanttParams) => {
+ const { subId } = route.params
+ const records = ref([])
+ const dialog = useDialog()
+
+ onMounted(() => {
+ getGanttData()
+ })
+ async function getGanttData() {
+ if (subId) {
+ const res = await getSubGantt(subId)
+ records.value = res
+ ganttInstance?.setRecords(records.value)
+ } else {
+ const res = await getMainGantt()
+ // console.log(res, '----')
+ records.value = res
+ ganttInstance?.setRecords(records.value)
+ }
+ }
+ function renderMainTask(dom: HTMLElement) {
+ const option = getOption()
+ ganttInstance = new Gantt(dom, option)
+ window['ganttInstance'] = ganttInstance
+ console.log(ganttInstance)
+ }
+ function getOption(): TYPES.GanttConstructorOptions {
+ const option = {
+ records: records.value,
+ taskListTable: renderTaskListTable(),
+ tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange,
+
+ frame: {
+ outerFrameStyle: {
+ borderLineWidth: 2,
+ borderColor: textColor,
+ cornerRadius: 3,
+ },
+ // verticalSplitLineHighlight: {
+ // lineColor: 'green',
+ // lineWidth: 3
+ // }
+ },
+ grid: {
+ // backgroundColor: bgColor,
+ horizontalLine: {
+ lineWidth: 1,
+ lineColor: textColorWithOp,
+ },
+ verticalLine: {
+ lineWidth: 1,
+ lineColor: textColorWithOp,
+ lineDash: [4, 8],
+ },
+ },
+ taskList: {
+ // backgroundColor: bgColor,
+ headerStyle: {
+ borderColor: '#e1e4e8',
+ borderLineWidth: 0,
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: 'red',
+ },
+ },
+ headerRowHeight: 59,
+ rowHeight: subId ? 200 : 100,
+ taskBar: renderTaskBar(),
+ timelineHeader: {
+ backgroundColor: headerBgColor,
+ colWidth: 150,
+ verticalLine: {
+ lineColor: textColorWithOp,
+ lineWidth: 1,
+ lineDash: [4, 2],
+ },
+ horizontalLine: {
+ lineColor: textColorWithOp,
+ lineWidth: 1,
+ lineDash: [4, 2],
+ },
+ scales: getTimeScales('day'),
+ },
+ minDate: '2024-11-14',
+ maxDate: '2024-12-30',
+
+ scrollStyle: {
+ scrollRailColor: 'RGBA(246,246,246,0)',
+ visible: 'focus',
+ width: 6,
+ scrollSliderCornerRadius: 2,
+ scrollSliderColor: 'rgba(255,255,255,0.25)',
+ },
+ underlayBackgroundColor: bgColor,
+ }
+ return option as TYPES.GanttConstructorOptions
+ }
+ function renderColumn() {
+ const columns = [
+ {
+ field: 'name',
+ title: subId ? '事件类型' : '事件主体',
+ width: '120',
+ mergeCell: true,
+ },
+ ]
+ // if (subId) {
+ // columns.unshift({
+ // field: 'isChecked',
+ // title: '',
+ // width: '60',
+ // headerType: 'checkbox',
+ // cellType: 'checkbox',
+ // })
+ // }
+ return columns
+ }
+
+ function renderTaskListTable() {
+ const taskListTable = {
+ columns: renderColumn(),
+ // tableWidth: 'auto',
+ theme: {
+ underlayBackgroundColor: bgColor,
+ headerStyle: {
+ borderColor: textColorWithOp,
+ borderLineWidth: 1,
+ fontWeight: 'bold',
+ color: textColor,
+ bgColor: headerBgColor,
+ textAlign: 'center',
+ fontSize: 20,
+ hover: {
+ cellBgColor: 'transparent',
+ },
+ },
+
+ bodyStyle: {
+ borderColor: textColorWithOp,
+ textAlign: 'center',
+ borderLineWidth: 1,
+ autoWrapText: true,
+ fontSize: 16,
+ color: textColor,
+ bgColor: bgColor,
+ hover: {
+ cellBgColor: textColorWithOp,
+ },
+ },
+ },
+ }
+ return taskListTable
+ }
+
+ function renderTaskBar() {
+ const taskBar = {
+ resizable: false,
+ moveable: false,
+ startDateField: 'start',
+ endDateField: 'end',
+ // progressField: 'progress',
+ barStyle: { width: subId ? 180 : 60 },
+ customLayout: args => {
+ const { width, height, startDate, endDate, taskRecord } = args
+
+ const container = new Group({
+ width,
+ height,
+ fill: 'transparent',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ // alignItems: 'center',
+ cursor: 'pointer',
+ })
+ if (!subId) {
+ container.addEventListener('click', event => {
+ router.push({
+ path: `/gantt/subEdit/${taskRecord.id}`,
+ })
+ })
+ }
+
+ if (subId) {
+ const image = new Image({
+ image: taskRecord.avatar,
+ width: 100,
+ height: 100,
+ x: 10,
+ y: 10,
+ boundsPadding: [0, 0, 10, 0],
+ })
+ container.add(image)
+ }
+ const checkBoxGroup = new Group({
+ width,
+ //height,
+ fill: 'transparent',
+ display: 'flex',
+ })
+ container.add(checkBoxGroup)
+
+ // const checkbox = new CheckBox({
+ // id: taskRecord.id,
+ // text: '',
+ // checked: false,
+ // })
+ // checkBoxGroup.add(checkbox)
+
+ // checkbox.addEventListener('click', event => {
+ // event.stopPropagation()
+ // console.log(checkbox, 'checkbox')
+ // })
+ const name = new Text({
+ text: taskRecord.name,
+ fontSize: 16,
+ fontFamily: 'sans-serif',
+ fill: textColor,
+ fontWeight: 'bold',
+ maxLineWidth: width,
+ textAlign: 'center',
+ // boundsPadding: [0, 0, 0, 10],
+ })
+ checkBoxGroup.add(name)
+
+ const editSymbol = new Image({
+ width: 20,
+ height: 20,
+ fill: '#fff',
+ image:
+ '',
+ boundsPadding: [-2, 0, 0, 10],
+ cursor: 'pointer',
+ })
+ checkBoxGroup.add(editSymbol)
+
+ editSymbol.addEventListener('click', event => {
+ event.stopPropagation()
+ console.log(editSymbol, 'editSymbol')
+ })
+
+ const deleteSymbol = new Image({
+ width: 20,
+ height: 20,
+ fill: '#fff',
+ image:
+ '',
+ boundsPadding: [-2, 0, 0, 10],
+ cursor: 'pointer',
+ })
+ checkBoxGroup.add(deleteSymbol)
+
+ deleteSymbol.addEventListener('click', event => {
+ event.stopPropagation()
+ // console.log(dialog, '----')
+ dialog.warning({
+ title: '警告',
+ content: '确认删除当前事件？',
+ positiveText: '确定',
+ negativeText: '取消',
+ onPositiveClick: () => {},
+ onNegativeClick: () => {},
+ })
+ console.log(deleteSymbol, 'deleteSymbol')
+ })
+
+ const days = new Text({
+ text: `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`,
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: textColor,
+ boundsPadding: [10, 0, 0, 0],
+ })
+ container.add(days)
+ const rect = new Rect({
+ width: width,
+ height: 7,
+ fill: {
+ gradient: 'linear',
+ x0: 0,
+ y0: 0,
+ x1: 1,
+ y1: 0,
+ stops: [
+ {
+ offset: 0,
+ color: textColor,
+ },
+ {
+ offset: 1,
+ color: textColorWithOp,
+ },
+ ],
+ },
+ boundsPadding: [10, 0, 0, 0],
+ })
+ container.add(rect)
+ return {
+ rootContainer: container,
+ }
+ },
+ hoverBarStyle: {
+ cornerRadius: 2,
+ barOverlayColor: textColorWithOp,
+ },
+ selectedBarStyle: {
+ // cornerRadius: 2,
+ borderColor: textColorWithOp,
+ borderLineWidth: 2,
+ },
+ }
+ return taskBar
+ }
+ function renderGroup(opt: IGroupGraphicAttribute) {
+ return new Group(opt)
+ }
+
+ function renderText(opt: ITextGraphicAttribute) {
+ return new Text(opt)
+ }
+
+ function renderImage(opt: IImageGraphicAttribute) {
+ return new Image(opt)
+ }
+
+ function changeTimeScales(scale: TYPES.ITimelineScale['unit']) {
+ const scales = getTimeScales(scale)
+ ganttInstance && ganttInstance.updateScales(scales)
+ }
+
+ function getTimeScales(
+ scale: TYPES.ITimelineScale['unit']
+ ): TYPES.ITimelineScale[] {
+ return [
+ {
+ unit: scale,
+ step: 1,
+ customLayout: args => {
+ const { width, height, startDate } = args
+ const container = new Group({
+ width,
+ height,
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ flexWrap: 'nowrap',
+ })
+
+ const day = new Text({
+ text:
+ scale === 'day'
+ ? startDate.toLocaleDateString()
+ : startDate.toLocaleTimeString(),
+ fontSize: 14,
+ fontWeight: 'bold',
+ fontFamily: 'sans-serif',
+ fill: textColor,
+ textAlign: 'center',
+ maxLineWidth: width,
+ // boundsPadding: [25, 12, 10, 12],
+ })
+ container.add(day)
+ return {
+ rootContainer: container,
+ }
+ },
+ },
+ ]
+ }
+ return { renderMainTask, changeTimeScales }
+}
+
+export default useGanttEdit
diff --git a/src/views/Gantt/components/GanttEdit/index.jsx b/src/views/Gantt/components/GanttEdit/index.jsx
new file mode 100644
index 000000000..e8cef8cff
--- /dev/null
+++ b/src/views/Gantt/components/GanttEdit/index.jsx
@@ -0,0 +1,29 @@
+import useGanttEdit from './hooks/ganttEdit'
+import { useRouter, useRoute } from 'vue-router'
+
+export default defineComponent({
+ props: {
+ scale: {
+ type: String,
+ default: 'day',
+ },
+ },
+ setup(props) {
+ const router = useRouter()
+ const route = useRoute()
+ const { renderMainTask, changeTimeScales } = useGanttEdit({ route, router })
+
+ onMounted(() => {
+ nextTick(() => {
+ renderMainTask(document.querySelector('#tableContainer'))
+ })
+ })
+ watch(
+ () => props.scale,
+ val => {
+ changeTimeScales(val)
+ }
+ )
+ return () =>
+ },
+})
diff --git a/src/views/Gantt/components/MainGantt/index.jsx b/src/views/Gantt/components/MainGantt/index.jsx
index da637e79c..150ce5360 100644
--- a/src/views/Gantt/components/MainGantt/index.jsx
+++ b/src/views/Gantt/components/MainGantt/index.jsx
@@ -1,10 +1,17 @@
-import { NDatePicker, NRadioButton, NRadioGroup } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { NDatePicker, NRadioButton, NRadioGroup, NButton } from 'naive-ui'
import GanttCom from '../Gantt'
export default defineComponent({
setup() {
const range = ref()
const value = ref('day')
+
+ const router = useRouter()
+ const editEvent = () => {
+ console.log(router)
+ router.push('/gantt/mainEdit')
+ }
return () => (
<>
@@ -13,6 +20,9 @@ export default defineComponent({
+
+ 编辑事件
+
diff --git a/src/views/Gantt/components/MainGanttEdit/index.jsx b/src/views/Gantt/components/MainGanttEdit/index.jsx
new file mode 100644
index 000000000..8534ebdfe
--- /dev/null
+++ b/src/views/Gantt/components/MainGanttEdit/index.jsx
@@ -0,0 +1,45 @@
+import { NDatePicker, NRadioButton, NRadioGroup, NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import GanttCom from '../GanttEdit'
+
+export default defineComponent({
+ setup() {
+ const range = ref()
+ const value = ref('day')
+
+ const addEvent = () => {
+ console.log('tianjia --- event')
+ }
+ const addTask = () => {
+ console.log('tianjiarenwu')
+ }
+
+ const router = useRouter()
+ const ok = () => {
+ router.push('/gantt')
+ }
+ return () => (
+ <>
+
+
+
+
+
+
+
+
+ 添加事件
+
+ {/*
+ 添加任务
+ */}
+
+ 完成编辑
+
+
+
- 态势展示
- 返回
+ 态势展示
+ {
+ router.go(-1)
+ }}
+ >
+ 返回
+
diff --git a/src/views/Gantt/components/SubGanttEdit/index.jsx b/src/views/Gantt/components/SubGanttEdit/index.jsx
new file mode 100644
index 000000000..1e48a1019
--- /dev/null
+++ b/src/views/Gantt/components/SubGanttEdit/index.jsx
@@ -0,0 +1,33 @@
+import { NButton } from 'naive-ui'
+import GanttCom from '../GanttEdit'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+ setup() {
+ const router = useRouter()
+
+ const value = ref('day')
+
+ const showView = () => {
+ // getCheckboxState
+ const checked = ganttInstance.taskListTableInstance?.getCheckboxState()
+ console.log(checked)
+ }
+
+ return () => (
+ <>
+
+ {/* 态势展示 */}
+ {
+ router.go(-1)
+ }}
+ >
+ 返回
+
+
+
+
+ )
+ },
+})
diff --git a/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts b/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts
new file mode 100644
index 000000000..a5b788289
--- /dev/null
+++ b/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts
@@ -0,0 +1,8 @@
+const showNewTask = ref(false)
+const useTask = () => {
+ return {
+ showNewTask,
+ }
+}
+
+export default useTask
diff --git a/src/views/Gantt/components/TaskList/components/NewTask/index.jsx b/src/views/Gantt/components/TaskList/components/NewTask/index.jsx
new file mode 100644
index 000000000..36875147d
--- /dev/null
+++ b/src/views/Gantt/components/TaskList/components/NewTask/index.jsx
@@ -0,0 +1,100 @@
+import { NForm, NFormItem, NInput, NDataTable, NButton } from 'naive-ui'
+import ModalCom from '@/components/Modal/index.vue'
+import { getMainGantt } from '@/api/gantt'
+import useTask from './hooks'
+export default defineComponent({
+ // props: {
+ // show: {
+ // type: Boolean,
+ // default: false,
+ // },
+ // },
+ setup() {
+ const task = ref({
+ name: '',
+ description: '',
+ })
+ const columns = [
+ { type: 'selection' },
+ {
+ title: '事件名称',
+ key: 'name',
+ width: 220,
+ // render: row => {
+ // return (
+ //
+ //
+ //
+ //
+ // {row.name}
+ //
+ // )
+ // },
+ },
+ {
+ title: '开始时间',
+ key: 'start',
+ },
+ {
+ title: '结束时间',
+ key: 'end',
+ },
+ {
+ title: '类型',
+ key: 'type',
+ },
+ {
+ title: '图片',
+ key: 'avatar',
+ render(row) {
+ if (row.avatar) {
+ return 
+ } else {
+ return -
+ }
+ },
+ },
+ ]
+ const tableData = ref([])
+ onMounted(async () => {
+ const res = await getMainGantt()
+ tableData.value = res
+ })
+ const { showNewTask } = useTask()
+
+ const close = () => {
+ showNewTask.value = false
+ }
+
+ return () => (
+
+
+
+
+
+
+
+
+
+ row.name}
+ />
+
+
+
+ 取消
+ 确认
+
+
+ )
+ },
+})
diff --git a/src/views/Gantt/components/TaskList/index.jsx b/src/views/Gantt/components/TaskList/index.jsx
new file mode 100644
index 000000000..8fa19ae2e
--- /dev/null
+++ b/src/views/Gantt/components/TaskList/index.jsx
@@ -0,0 +1,128 @@
+import { NDataTable, NIcon, NButton } from 'naive-ui'
+import { getTask } from '@/api/gantt'
+import {
+ HelpCircleOutline,
+ CreateOutline,
+ TrashBinOutline,
+ AddCircleOutline,
+ EnterOutline,
+} from '@vicons/ionicons5'
+
+export default defineComponent({
+ setup() {
+ const columns = [
+ {
+ title: '任务名称/事件名称',
+ key: 'name',
+ width: 220,
+ render: row => {
+ return (
+
+
+
+
+ {row.name}
+
+ )
+ },
+ },
+ {
+ title: '开始时间',
+ key: 'start',
+ },
+ {
+ title: '结束时间',
+ key: 'end',
+ },
+ {
+ title: '类型',
+ key: 'type',
+ },
+ {
+ title: '图片',
+ key: 'avatar',
+ render(row) {
+ if (row.avatar) {
+ return
+ } else {
+ return -
+ }
+ },
+ },
+ {
+ title: '操作',
+ key: 'action',
+ render(row) {
+ return (
+
+ {row.type === 'task' ? (
+ <>
+
handleEdit(row)}
+ >
+
+
+
+
+
handleEdit(row)}
+ >
+
+
+
+
+
+ ) : null}
+ {/* {!row.avatar ? (
+
handleEdit(row)}
+ >
+
+
+
+
+ ) : (
+ <>
+ )} */}
+
+
handleEdit(row)}
+ >
+
+
+
+
+
@@ -11,6 +36,85 @@ export default defineComponent({
+
{
+ show.value = true
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+ 添加事件
+ */}
+
+
+
+
+
+ {/*
+
+
+
+
+
+
*/}
+
+
+
)
},