{/*
@@ -119,9 +120,35 @@ export default defineComponent({
key: 'action',
width: '240',
render(row, rowIndex) {
- // console.log(row, rowIndex)
+ console.log(row, rowIndex)
return (
-
+
+ {row.level === 1 ? (
+ addSubEvent(row)}
+ >
+
+
+ 添加子事件
+
+ ) : null}
+ {/* {row.level === 1 && (
+ addSubEvent(row)}
+ >
+
+
+ 添加子事件
+
+ )} */}
{row.level === 1 && (
)}
- {row.level === 2 ? (
- addSubEvent(row)}
- >
-
-
- 添加子事件
-
- ) : null}
- {row.level === 4 && (
+
+ {row.level === 3 && (
)}
+ {/* {row.level === 3 && (
+ delSubEvent(row)}
+ >
+
+
+ 删除子事件
+
+ )} */}
{Reflect.has(row, 'trajData') && (
)} */}
- {![2, 3].includes(row.level) ? (
+ {![2].includes(row.level) ? (
{
- console.log(row, 'row')
+ console.log('rowadd------------SubEvent', row)
oneClassData.value = row
showNewEvent.value = true
// eventData.value = {}
@@ -221,13 +256,17 @@ export default defineComponent({
}
function editSubEvent(row) {
+ console.log('---editSubEvent----', row)
showNewEvent.value = true
eventData.value = cloneDeep({
...row,
- timeRange: [row.startTime, row.endTime],
+ timeRange: row.startTime,
})
getTwoClassList(row.oneType)
- console.log('子事件编辑：', row, 'onClassData', oneClassData)
+ console.log('子事件编辑--------------：', row)
+ }
+ function delSubEvent(row) {
+ console.log('-----------delSubEvent', row)
}
const dialog = useDialog()
@@ -242,7 +281,7 @@ export default defineComponent({
//await deleteEventById(row.id)
if (row.level == 1) {
await deleteSimp({ id: row.id })
- } else if (row.level == 4) {
+ } else if (row.level == 3) {
await deleteSon({ id: row.id })
}
searchTreeList()
@@ -292,7 +331,7 @@ export default defineComponent({
/>
) {
timeRange.value = [params.startTime, params.endTime]
console.log('%csubId', 'color:red;font-size:20px', subId)
const { code, data } = subId
? await getSubGantt({ activityId: subId })
: await getMainGantt(params)
+
if (code === 200) {
// records.value = data.list
if (subId) {
- records.value = data.list
- .reduce((acc, cur) => {
- if (Array.isArray(cur.children) && cur.children.length > 0) {
- acc.push(
- cur.children.map(twoType => {
- return {
- ...twoType,
- children:
- twoType.children &&
- twoType.children.map(eventItem => {
- console.log(
- eventItem.startTime,
- eventItem.endTime
- // new Date(eventItem.startTime).getMonth()
- )
- return {
- ...eventItem,
- start: eventItem.startTime,
- end: eventItem.endTime,
- }
- }),
- parentName: cur.name,
- childrenLengthForParent: cur.children.length,
- }
- })
- )
- }
- return acc
- }, [])
- .flat()
- // console.log(records.value)
-
- records.value.length > 0 &&
- (timeRange.value = getTimeRangeForTree(records.value))
- } else {
- // console.log(data.list, '------')
+ // records.value = data.list
+ // .reduce((acc, cur) => {
+ // if (Array.isArray(cur.children) && cur.children.length > 0) {
+ // acc.push(
+ // cur.children.map(twoType => {
+ // return {
+ // ...twoType,
+ // children:
+ // twoType.children &&
+ // twoType.children.map(eventItem => {
+ // console.log(
+ // eventItem.startTime,
+ // eventItem.endTime
+ // // new Date(eventItem.startTime).getMonth()
+ // )
+ // return {
+ // ...eventItem,
+ // start: eventItem.startTime,
+ // end: eventItem.endTime,
+ // }
+ // }),
+ // parentName: cur.name,
+ // childrenLengthForParent: cur.children.length,
+ // }
+ // })
+ // )
+ // }
+ // return acc
+ // }, [])
+ // .flat()
records.value = data.list.map(item => {
return {
...item,
children:
item.children &&
item.children.map(mainEvent => {
- const date = new Date(mainEvent.startTime)
- const year = date.getFullYear()
- const month = date.getMonth()
- const startOfMonth = new Date(year, month, 1)
- // const startOfMonth = new Date(year, month, mainEvent.startTime)
- startOfMonth.setHours(0, 0, 0, 0)
+ if (mainEvent.status == 2) {
+ const now = new Date()
+ const sortValue = parseInt(mainEvent.sort) || 0
+ const daysToAdd = sortValue * 1
+ const futureDate = new Date(now)
+ futureDate.setDate(now.getDate() + daysToAdd)
- const lastDayOfMonth = new Date(year, month + 1, 0)
- // const lastDayOfMonth = new Date(year, month ,mainEvent.startTime)
- const endOfMonth = new Date(
- year,
- month,
- lastDayOfMonth.getDate()
- )
- endOfMonth.setHours(23, 59, 59, 0)
- // console.log(
- // startOfMonth.toLocaleString(),
- // endOfMonth.toLocaleString()
+ mainEvent.startTime = futureDate
+ }
+ console.log(mainEvent, 'FSLKFJSLKAFJDSL')
+ const date = new Date(mainEvent.startTime)
+ const startOfMonth = createOneHourRange(date)[0]
+ const endOfMonth = createOneHourRange(date)[1]
+
+ // const year = date.getFullYear()
+ // const month = date.getMonth()
+ // const day = date.getDate()
+ // const startOfMonth = new Date(year, month, day)
+ // console.log(startOfMonth, 'startOfMonth---FSLKFJSLKAFJDSL')
+
+ // // const startOfMonth = new Date(year, month, mainEvent.startTime)
+ // startOfMonth.setHours(1, 0, 0, 0)
+ // const lastDayOfMonth = new Date(year, month + 1, day)
+ // // const lastDayOfMonth = new Date(year, month ,mainEvent.startTime)
+ // const endOfMonth = new Date(
+ // year,
+ // month,
+ // lastDayOfMonth.getDate()
// )
+ // endOfMonth.setHours(2, 59, 59, 0)
+ console.log(
+ startOfMonth.toLocaleString(),
+ endOfMonth.toLocaleString()
+ )
return {
...mainEvent,
start: startOfMonth,
@@ -115,33 +148,103 @@ const useGantt = ({ router, route }: GanttParams) => {
}),
}
})
+ records.value.length > 0 &&
+ (timeRange.value = [
+ getRangeTime(fatherData.value.startTime, false),
+ getRangeTime(fatherData.value.endTime, true),
+ ])
+ // records.value.length > 0 &&
+ // (timeRange.value = getTimeRangeForTree(records.value))
+ } else {
+ // console.log(data.list, '------')
+ records.value = data.list.map(item => {
+ return {
+ ...item,
+ children:
+ item.children &&
+ item.children.map(mainEvent => {
+ console.log('mainEvent',mainEvent)
+ // const date = new Date(mainEvent.startTime)
+ // const year = date.getFullYear()
+ // const month = date.getMonth()
+ // const startOfMonth = new Date(year, month, 1)
+ // // const startOfMonth = new Date(year, month, mainEvent.startTime)
+ // startOfMonth.setHours(0, 0, 0, 0)
+
+ // const lastDayOfMonth = new Date(year, month + 1, 0)
+ // // const lastDayOfMonth = new Date(year, month ,mainEvent.startTime)
+ // const endOfMonth = new Date(
+ // year,
+ // month,
+ // lastDayOfMonth.getDate()
+ // )
+ // endOfMonth.setHours(23, 59, 59, 0)
+
+ const startOfMonth = new Date(mainEvent.startTime).getTime()
+ const endOfMonth =startOfMonth + 30*24*60*60*1000
+
+ return {
+ ...mainEvent,
+ start: startOfMonth,
+ end: happen.value === 2 ? mainEvent.endTime : endOfMonth,
+ }
+ }),
+ }
+ })
}
records.value.length > 0 && ganttInstance?.setRecords(records.value)
}
}
+
+ function getRangeTime(time, flag) {
+ const baseDate = new Date(time)
+ const type = flag ? 1 : -1
+ const start = new Date(baseDate)
+ start.setMonth(start.getMonth() + type)
+ return start.getTime()
+ }
async function renderMainTask(
dom: HTMLElement,
params: Record
) {
- console.log(subId, 'renderMainTask')
+
+ currentGanttDom.value = dom
+ currentGanttParams.value = params
await getGanttData(params)
const option = getOption()
// if (ganttInstance) {
// ganttInstance.setRecords(records.value)
// } else {
- if (records.value.length === 0) return
+ if (records.value.length === 0) {
+ return
+ }
ganttInstance && ganttInstance?.release()
ganttInstance = new Gantt(dom, option)
window['ganttInstance'] = ganttInstance
// }
}
function getOption(): TYPES.GanttConstructorOptions {
- // console.log(records.value);
+ let scales = 'month'
+ if(subId){
+ scales =plans.value ?? 'day'
+ }
const option = {
+ // hierarchyType: 'tree',
+ // tree: {
+ // enable: true,
+ // hidEmptyChildren: false,
+ // defaultTreeRowHeight: 40,
+ // indent: 20,
+ // },
+ // task: {
+ // minChildren: 0,
+ // },
records: records.value,
taskListTable: renderTaskListTable(),
tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange,
+ // tasksShowMode: TYPES.TasksShowMode.All_Tasks_Arrange,
+
// groupBy: 'name',
// groupField: 'name',
// widthMode: 'standard',
@@ -190,7 +293,9 @@ const useGantt = ({ router, route }: GanttParams) => {
taskBar: renderTaskBar(subId),
timelineHeader: {
backgroundColor: headerBgColor,
- colWidth: 150,
+ // colWidth: 150,
+ colWidth: 180,
+
// colWidth: 1040,
// verticalLine: {
// lineColor: textColorWithOp,
@@ -202,7 +307,8 @@ const useGantt = ({ router, route }: GanttParams) => {
lineWidth: 1,
lineDash: [4, 2],
},
- scales: getTimeScales(subId ? 'day' : 'month'),
+ // scales: getTimeScales(subId ? 'day' : 'month'),
+ scales: getTimeScales(scales),
},
minDate: timeRange.value[0],
maxDate: timeRange.value[1],
@@ -239,7 +345,8 @@ const useGantt = ({ router, route }: GanttParams) => {
const columns = [
{
field: 'name',
- title: subId ? '目标' : '事件主体',
+ // title: subId ? '目标' : '事件主体',
+ title: subId ? '装备型号' : '事件主体',
width: '120',
mergeCell: true,
customLayout: args => {
@@ -348,7 +455,6 @@ const useGantt = ({ router, route }: GanttParams) => {
const { createInfoBox, updatePosition, removeInfoBox } = useInfoBox()
function renderTaskBar(subId: string | number) {
- // console.log(subId, '------');
const taskBar = {
resizable: false,
moveable: false,
@@ -359,7 +465,7 @@ const useGantt = ({ router, route }: GanttParams) => {
customLayout: args => {
// console.log(args, 'args');
const { width, height, startDate, endDate, taskRecord } = args
- // console.log(taskRecord, 'taskRecord');
+
const container = new Group({
width,
height,
@@ -401,6 +507,7 @@ const useGantt = ({ router, route }: GanttParams) => {
container.addEventListener('click', async () => {
removeInfoBox()
if (!subId) {
+ fatherData.value = taskRecord
router.push({
path: `/gantt/sub/${taskRecord.id}`,
})
@@ -415,35 +522,49 @@ const useGantt = ({ router, route }: GanttParams) => {
上报站点: data.reportSite,
事件描述: data.describe,
}
- window.$dialog.info({
- title: '子事件详情',
- class: '!w-[40vw]',
- content: () => {
- return h(
- 'div',
- { class: 'flex flex-col gap-4 w-full h-full' },
- [
- ...Object.keys(showData).map(key => {
- return h('div', { class: 'flex w-full h-full ' }, [
- h('div', { class: 'w-[120px]' }, key),
- h(
- 'div',
- { class: 'flex-1 text-wrap' },
- showData[key]
- ),
- ])
- }),
- h('div', { class: 'flex w-full h-full' }, [
- h('div', { class: 'w-[120px]' }, '图片'),
- h('img', {
- src: `${window.settings.imgServer}${data.fileUrl}`,
- }),
- ]),
- ]
- )
- },
- positiveText: '确定',
- })
+ const {showNewEvent}=useEvent();
+ const {eventData} = useEvent();
+
+
+
+ eventData.value ={
+ ...data
+ // type: 'subEvent',
+ }
+ showNewEvent.value=true;
+ if(data.startTime){
+ eventData.value.timeRange=data.startTime
+ }
+
+ // window.$dialog.info({
+ // title: '子事件详情',
+ // class: '!w-[40vw]',
+ // content: () => {
+ // return h(
+ // 'div',
+ // { class: 'flex flex-col gap-4 w-full h-full' },
+ // [
+ // ...Object.keys(showData).map(key => {
+ // return h('div', { class: 'flex w-full h-full ' }, [
+ // h('div', { class: 'w-[120px]' }, key),
+ // h(
+ // 'div',
+ // { class: 'flex-1 text-wrap' },
+ // showData[key]
+ // ),
+ // ])
+ // }),
+ // h('div', { class: 'flex w-full h-full' }, [
+ // h('div', { class: 'w-[120px]' }, '图片'),
+ // h('img', {
+ // src: `${window.settings.imgServer}${data.fileUrl}`,
+ // }),
+ // ]),
+ // ]
+ // )
+ // },
+ // positiveText: '确定',
+ // })
}
}
})
@@ -458,7 +579,7 @@ const useGantt = ({ router, route }: GanttParams) => {
if (subId) {
const imgUrl = `${window.settings.imgServer}${taskRecord.fileUrl}`
- // console.log(imgUrl);
+
const image = new Image({
image: imgUrl,
width: 100,
@@ -470,7 +591,12 @@ const useGantt = ({ router, route }: GanttParams) => {
// texture: 'rect',
// textureColor: '#0006',
// html: { dom: `
` },
- opacity: taskRecord.status === 2 ? 0.3 : 1,
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
})
container.add(image)
image.addEventListener('click', e => {
@@ -522,30 +648,73 @@ const useGantt = ({ router, route }: GanttParams) => {
fontWeight: 'bold',
maxLineWidth: width,
textAlign: 'center',
- opacity: taskRecord.status === 2 ? 0.3 : 1,
+ // opacity: taskRecord.status === 2 ? 0.3 : 1,
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
// boundsPadding: [10, 0, 0, 0],
})
nameContainer.add(name)
+ if (taskRecord.status != 2) {
+ let sText=taskRecord.startTime
+ if(!subId){
+ sText = sText.split(' ')[0]
+ }
+ const start = new Text({
+ text: `${sText}`,
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: textColor,
+ boundsPadding: [10, 0, 0, 0],
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
+ })
+ container.add(start)
+ }
- const start = new Text({
- text: `${taskRecord.startTime}`,
- fontSize: 13,
- fontFamily: 'sans-serif',
- fill: textColor,
- boundsPadding: [10, 0, 0, 0],
- opacity: taskRecord.status === 2 ? 0.3 : 1,
- })
- container.add(start)
- const end = new Text({
- text: `${taskRecord.endTime}`,
- fontSize: 13,
- fontFamily: 'sans-serif',
- fill: textColor,
- boundsPadding: [10, 0, 0, 0],
- opacity: taskRecord.status === 2 ? 0.3 : 1,
- })
- container.add(end)
+ if (!subId) {
+ let eText=taskRecord.endTime
+ if(taskRecord.status != 2){
+ eText = eText.split(' ')[0]
+ }
+ const end = new Text({
+ text: `${eText}`,
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: textColor,
+ boundsPadding: [10, 0, 0, 0],
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
+ })
+ container.add(end)
+ }
+
+ // const end = new Text({
+ // text: `${taskRecord.endTime}`,
+ // fontSize: 13,
+ // fontFamily: 'sans-serif',
+ // fill: textColor,
+ // boundsPadding: [10, 0, 0, 0],
+ // opacity: getOpacity(
+ // taskRecord.start,
+ // taskRecord.status,
+ // subId,
+ // happen.value
+ // ),
+ // })
+ // container.add(end)
// 事件条
if (happen.value == 2) {
const rect = new Rect({
@@ -570,12 +739,25 @@ const useGantt = ({ router, route }: GanttParams) => {
],
},
boundsPadding: [10, 0, 0, 0],
- opacity: taskRecord.status === 2 ? 0.3 : 1,
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
})
container.add(rect)
}
- if (!subId) {
+ if (!subId && happen.value == 1) {
+ const dotContainer = new Group({
+ display: 'flex',
+ justifyContent: 'end',
+ height: 10,
+ width: width,
+ })
+ container.add(dotContainer)
+
// 添加状态圆点（直径8px）
const dot = new Circle({
radius: 4, // 半径4px
@@ -583,9 +765,14 @@ const useGantt = ({ router, route }: GanttParams) => {
stroke: textColor, // 边框色
strokeWidth: 1, // 边框粗细
zIndex: 10, // 确保显示在最上层
+ boundsPadding:[4,0,0,0]
})
- container.add(dot)
+ dotContainer.add(dot)
+ // dot.translate(
+ // Math.round(width * getDaysInMontnPercent(taskRecord.startTime)),
+ // 30
+ // )
}
return {
rootContainer: container,
@@ -605,6 +792,15 @@ const useGantt = ({ router, route }: GanttParams) => {
return taskBar
}
+ // 时间点
+ function getDaysInMontnPercent(time) {
+ const date = new Date(time)
+ const year = date.getFullYear()
+ const month = date.getMonth()
+ const days = date.getDate()
+ const allDays = new Date(year, month + 1, 0).getDate()
+ return days / allDays
+ }
function updateMarkLine() {
ganttInstance?.updateMarkLine([
{
@@ -616,7 +812,6 @@ const useGantt = ({ router, route }: GanttParams) => {
},
},
])
- console.log(ganttInstance)
}
function renderGroup(opt: IGroupGraphicAttribute) {
return new Group(opt)
@@ -633,8 +828,12 @@ const useGantt = ({ router, route }: GanttParams) => {
function changeTimeScales(scale: TYPES.ITimelineScale['unit'], val: number) {
plans.value = scale
happen.value = val
- const scales = getTimeScales(scale)
- ganttInstance && ganttInstance.updateScales(scales)
+
+ // const scales = getTimeScales(scale)
+ // ganttInstance && ganttInstance.updateScales(scales)
+ renderMainTask(
+ currentGanttDom.value,currentGanttParams.value
+ )
}
function getTimeScales(
@@ -656,13 +855,16 @@ const useGantt = ({ router, route }: GanttParams) => {
flexWrap: 'nowrap',
})
+ // const container = new Group({
+ // width:args.width,
+ // height:10,
+ // overflow:'hidden'
+ // })
+
const day = new Text({
- text: subId
- ? dayjs(startDate).format('YYYY年M月D日')
+ text: subId
+ ? scale === 'day'?dayjs(startDate).format('YYYY年M月D日'):dayjs(startDate).format('YYYY年M月D日 HH时')
: dayjs(startDate).format('YYYY年M月'),
- // scale === 'day'
- // ? startDate.toLocaleDateString()
- // : startDate.toLocaleTimeString(),
fontSize: 14,
fontWeight: 'bold',
fontFamily: 'sans-serif',
@@ -687,12 +889,23 @@ const useGantt = ({ router, route }: GanttParams) => {
// },
]
}
+
+ function getOpacity(time, status, subId, happen) {
+ if (subId) {
+ console.log(happen, 'fasfsjflksfjlaskjflkajflkfjas')
+ return new Date(time).getTime() > Date.now() && happen == 2 ? 0.3 : 1
+ } else {
+ return status === 2 ? 0.3 : 1
+ }
+ }
return {
getGanttData,
renderMainTask,
changeTimeScales,
currentImage,
updateMarkLine,
+ currentGanttDom,
+ currentGanttParams
}
}
diff --git a/src/views/Gantt/components/Gantt/index.jsx b/src/views/Gantt/components/Gantt/index.jsx
index 74c664fa0..28f780267 100644
--- a/src/views/Gantt/components/Gantt/index.jsx
+++ b/src/views/Gantt/components/Gantt/index.jsx
@@ -32,6 +32,8 @@ export default defineComponent({
changeTimeScales,
currentImage,
updateMarkLine,
+ currentGanttDom,
+ currentGanttParams,
} = useGantt({
route,
router,
@@ -57,7 +59,7 @@ export default defineComponent({
}
})
function getRefresh() {
- console.log(props.happen, '------------heppen')
+ console.log(props.happen, '------------heppen', props)
renderMainTask(document.querySelector('#tableContainer'), {
ids: props.types,
startTime: props.dateRange ? props.dateRange[0] : null,
@@ -79,7 +81,7 @@ export default defineComponent({
watch(
() => props.scale,
val => {
- changeTimeScales(val, props.happen)
+ changeTimeScales(val, props.happen);
}
)
watch(
diff --git a/src/views/Gantt/components/MainGantt/index.jsx b/src/views/Gantt/components/MainGantt/index.jsx
index 0e9965984..78d4e3028 100644
--- a/src/views/Gantt/components/MainGantt/index.jsx
+++ b/src/views/Gantt/components/MainGantt/index.jsx
@@ -8,13 +8,15 @@ import {
} from 'naive-ui'
import GanttCom from '../Gantt'
import { getDDList } from '@/api/Gantt/gantt'
-import { onBeforeMount } from 'vue'
+import { onBeforeMount, onMounted } from 'vue'
+import { useHappen } from '../useHappen'
export default defineComponent({
setup() {
const range = ref([new Date('2000-01-01 00:00:00').getTime(), Date.now()])
const value = ref('day')
- const happen = ref(1)
+ const { happen } = useHappen()
+ // const happen = ref(1)
const types = ref([])
const router = useRouter()
@@ -41,8 +43,16 @@ export default defineComponent({
ganttRef.value.refresh = true
}
function changeHappen() {
- range.value = [Date.now(), new Date('2027-01-01 00:00:00').getTime()]
+ console.log('------console')
+ if (happen.value == 1) {
+ range.value = [new Date('2023-01-01 00:00:00').getTime(), Date.now()]
+ } else if (happen.value == 2) {
+ range.value = [Date.now(), new Date('2027-01-01 00:00:00').getTime()]
+ }
}
+ onMounted(() => {
+ changeHappen()
+ })
return () => (
<>
@@ -50,13 +60,10 @@ export default defineComponent({
- */}
+
{
+ console.log('----1111111------show',show)
+
+ })
const value = ref('day')
const showView = () => {
@@ -25,8 +30,16 @@ export default defineComponent({
>
返回
+
+
` },
- opacity: taskRecord.status === 2 ? 0.3 : 1,
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
})
container.add(image)
image.addEventListener('click', e => {
@@ -522,30 +648,73 @@ const useGantt = ({ router, route }: GanttParams) => {
fontWeight: 'bold',
maxLineWidth: width,
textAlign: 'center',
- opacity: taskRecord.status === 2 ? 0.3 : 1,
+ // opacity: taskRecord.status === 2 ? 0.3 : 1,
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
// boundsPadding: [10, 0, 0, 0],
})
nameContainer.add(name)
+ if (taskRecord.status != 2) {
+ let sText=taskRecord.startTime
+ if(!subId){
+ sText = sText.split(' ')[0]
+ }
+ const start = new Text({
+ text: `${sText}`,
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: textColor,
+ boundsPadding: [10, 0, 0, 0],
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
+ })
+ container.add(start)
+ }
- const start = new Text({
- text: `${taskRecord.startTime}`,
- fontSize: 13,
- fontFamily: 'sans-serif',
- fill: textColor,
- boundsPadding: [10, 0, 0, 0],
- opacity: taskRecord.status === 2 ? 0.3 : 1,
- })
- container.add(start)
- const end = new Text({
- text: `${taskRecord.endTime}`,
- fontSize: 13,
- fontFamily: 'sans-serif',
- fill: textColor,
- boundsPadding: [10, 0, 0, 0],
- opacity: taskRecord.status === 2 ? 0.3 : 1,
- })
- container.add(end)
+ if (!subId) {
+ let eText=taskRecord.endTime
+ if(taskRecord.status != 2){
+ eText = eText.split(' ')[0]
+ }
+ const end = new Text({
+ text: `${eText}`,
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: textColor,
+ boundsPadding: [10, 0, 0, 0],
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
+ })
+ container.add(end)
+ }
+
+ // const end = new Text({
+ // text: `${taskRecord.endTime}`,
+ // fontSize: 13,
+ // fontFamily: 'sans-serif',
+ // fill: textColor,
+ // boundsPadding: [10, 0, 0, 0],
+ // opacity: getOpacity(
+ // taskRecord.start,
+ // taskRecord.status,
+ // subId,
+ // happen.value
+ // ),
+ // })
+ // container.add(end)
// 事件条
if (happen.value == 2) {
const rect = new Rect({
@@ -570,12 +739,25 @@ const useGantt = ({ router, route }: GanttParams) => {
],
},
boundsPadding: [10, 0, 0, 0],
- opacity: taskRecord.status === 2 ? 0.3 : 1,
+ opacity: getOpacity(
+ taskRecord.start,
+ taskRecord.status,
+ subId,
+ happen.value
+ ),
})
container.add(rect)
}
- if (!subId) {
+ if (!subId && happen.value == 1) {
+ const dotContainer = new Group({
+ display: 'flex',
+ justifyContent: 'end',
+ height: 10,
+ width: width,
+ })
+ container.add(dotContainer)
+
// 添加状态圆点（直径8px）
const dot = new Circle({
radius: 4, // 半径4px
@@ -583,9 +765,14 @@ const useGantt = ({ router, route }: GanttParams) => {
stroke: textColor, // 边框色
strokeWidth: 1, // 边框粗细
zIndex: 10, // 确保显示在最上层
+ boundsPadding:[4,0,0,0]
})
- container.add(dot)
+ dotContainer.add(dot)
+ // dot.translate(
+ // Math.round(width * getDaysInMontnPercent(taskRecord.startTime)),
+ // 30
+ // )
}
return {
rootContainer: container,
@@ -605,6 +792,15 @@ const useGantt = ({ router, route }: GanttParams) => {
return taskBar
}
+ // 时间点
+ function getDaysInMontnPercent(time) {
+ const date = new Date(time)
+ const year = date.getFullYear()
+ const month = date.getMonth()
+ const days = date.getDate()
+ const allDays = new Date(year, month + 1, 0).getDate()
+ return days / allDays
+ }
function updateMarkLine() {
ganttInstance?.updateMarkLine([
{
@@ -616,7 +812,6 @@ const useGantt = ({ router, route }: GanttParams) => {
},
},
])
- console.log(ganttInstance)
}
function renderGroup(opt: IGroupGraphicAttribute) {
return new Group(opt)
@@ -633,8 +828,12 @@ const useGantt = ({ router, route }: GanttParams) => {
function changeTimeScales(scale: TYPES.ITimelineScale['unit'], val: number) {
plans.value = scale
happen.value = val
- const scales = getTimeScales(scale)
- ganttInstance && ganttInstance.updateScales(scales)
+
+ // const scales = getTimeScales(scale)
+ // ganttInstance && ganttInstance.updateScales(scales)
+ renderMainTask(
+ currentGanttDom.value,currentGanttParams.value
+ )
}
function getTimeScales(
@@ -656,13 +855,16 @@ const useGantt = ({ router, route }: GanttParams) => {
flexWrap: 'nowrap',
})
+ // const container = new Group({
+ // width:args.width,
+ // height:10,
+ // overflow:'hidden'
+ // })
+
const day = new Text({
- text: subId
- ? dayjs(startDate).format('YYYY年M月D日')
+ text: subId
+ ? scale === 'day'?dayjs(startDate).format('YYYY年M月D日'):dayjs(startDate).format('YYYY年M月D日 HH时')
: dayjs(startDate).format('YYYY年M月'),
- // scale === 'day'
- // ? startDate.toLocaleDateString()
- // : startDate.toLocaleTimeString(),
fontSize: 14,
fontWeight: 'bold',
fontFamily: 'sans-serif',
@@ -687,12 +889,23 @@ const useGantt = ({ router, route }: GanttParams) => {
// },
]
}
+
+ function getOpacity(time, status, subId, happen) {
+ if (subId) {
+ console.log(happen, 'fasfsjflksfjlaskjflkajflkfjas')
+ return new Date(time).getTime() > Date.now() && happen == 2 ? 0.3 : 1
+ } else {
+ return status === 2 ? 0.3 : 1
+ }
+ }
return {
getGanttData,
renderMainTask,
changeTimeScales,
currentImage,
updateMarkLine,
+ currentGanttDom,
+ currentGanttParams
}
}
diff --git a/src/views/Gantt/components/Gantt/index.jsx b/src/views/Gantt/components/Gantt/index.jsx
index 74c664fa0..28f780267 100644
--- a/src/views/Gantt/components/Gantt/index.jsx
+++ b/src/views/Gantt/components/Gantt/index.jsx
@@ -32,6 +32,8 @@ export default defineComponent({
changeTimeScales,
currentImage,
updateMarkLine,
+ currentGanttDom,
+ currentGanttParams,
} = useGantt({
route,
router,
@@ -57,7 +59,7 @@ export default defineComponent({
}
})
function getRefresh() {
- console.log(props.happen, '------------heppen')
+ console.log(props.happen, '------------heppen', props)
renderMainTask(document.querySelector('#tableContainer'), {
ids: props.types,
startTime: props.dateRange ? props.dateRange[0] : null,
@@ -79,7 +81,7 @@ export default defineComponent({
watch(
() => props.scale,
val => {
- changeTimeScales(val, props.happen)
+ changeTimeScales(val, props.happen);
}
)
watch(
diff --git a/src/views/Gantt/components/MainGantt/index.jsx b/src/views/Gantt/components/MainGantt/index.jsx
index 0e9965984..78d4e3028 100644
--- a/src/views/Gantt/components/MainGantt/index.jsx
+++ b/src/views/Gantt/components/MainGantt/index.jsx
@@ -8,13 +8,15 @@ import {
} from 'naive-ui'
import GanttCom from '../Gantt'
import { getDDList } from '@/api/Gantt/gantt'
-import { onBeforeMount } from 'vue'
+import { onBeforeMount, onMounted } from 'vue'
+import { useHappen } from '../useHappen'
export default defineComponent({
setup() {
const range = ref([new Date('2000-01-01 00:00:00').getTime(), Date.now()])
const value = ref('day')
- const happen = ref(1)
+ const { happen } = useHappen()
+ // const happen = ref(1)
const types = ref([])
const router = useRouter()
@@ -41,8 +43,16 @@ export default defineComponent({
ganttRef.value.refresh = true
}
function changeHappen() {
- range.value = [Date.now(), new Date('2027-01-01 00:00:00').getTime()]
+ console.log('------console')
+ if (happen.value == 1) {
+ range.value = [new Date('2023-01-01 00:00:00').getTime(), Date.now()]
+ } else if (happen.value == 2) {
+ range.value = [Date.now(), new Date('2027-01-01 00:00:00').getTime()]
+ }
}
+ onMounted(() => {
+ changeHappen()
+ })
return () => (
<>
@@ -50,13 +60,10 @@ export default defineComponent({