ddtj/ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:甘特图需求及相关bug修改

Browse Source
This commit is contained in:
aq 2025-04-15 10:16:58 +08:00
parent 139c346e46
commit 38f6673fac
11 changed files with 569 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -5,6 +5,8 @@ import { themeOverrides } from '@/styles/naiveConfig'
import { darkTheme, NMessageProvider, zhCN, dateZhCN } from 'naive-ui'
import Message from '@/components/Message/index.vue'
import Notification from '@/components/Notification/index.vue'
import Dialog from '@/components/Dialog/index.vue'
import { useEntity } from '@/hooks/entity'
@ -44,7 +46,7 @@ const { baseMap, mubiaoMap, satelliteMap } = useEntity()
<n-notification-provider placement="bottom-left" :max="10">
<notification />
</n-notification-provider>
<n-dialog-provider> <router-view /></n-dialog-provider>
<n-dialog-provider> <Dialog /> <router-view /></n-dialog-provider>
<!-- </n-message-provider> -->
<!-- </n-theme-editor> -->
</n-config-provider>

80
src/views/Gantt/components/EventList/components/MainEventEdit.jsx
View File

@ -6,10 +6,13 @@ import {
NDatePicker,
NUpload,
NSwitch,
NSelect,
} from 'naive-ui'
import ModalCom from '@/components/Modal/index.vue'
import { useEvent } from '../hooks'
import { addSimp, updateSimp, uploadImage } from '@/api/Gantt'
import { addSimp, updateSimp, uploadImage, getSimpList } from '@/api/Gantt'
import { onBeforeMount, nextTick } from 'vue'
export default defineComponent({
// props: {
// show: {
@ -42,6 +45,7 @@ export default defineComponent({
const formRef = ref(null)
async function sure(e) {
e.preventDefault()
mainEventData.value.status = mainEventData.value.status ? 2 : 1
const data = {
...mainEventData.value,
targetId: targetId.value,
@ -78,9 +82,9 @@ export default defineComponent({
}
}
watch(
() => mainEventData.value.eventType,
() => mainEventData.value.status,
val => {
console.log(val, '------eventType')
console.log(val, '------status')
},
{
immediate: true,
@ -109,10 +113,41 @@ export default defineComponent({
}
)
async function getSimpListData() {
const res = await getSimpList()
ddList.value = res.data.list
targetId.value = res.data.list[0].id
}
onBeforeMount(() => {
nextTick(async () => {
await getSimpListData()
})
})
// const ddList = Array.from({ length: 8 }, (_, i) => ({
// label: `DD-${i + 1}`,
// value: `DD-${i + 1}`,
// }))
const ddList = ref([])
const timeRange = ref(null)
const uploadImg = ref([])
// const desc = ref ()
const railStyle = ({ focused, checked }) => {
const style = {}
if (checked) {
style.background = '#008000'
if (focused) {
style.boxShadow = '0 0 0 2px #00800040'
}
} else {
style.background = '#2080f0'
if (focused) {
style.boxShadow = '0 0 0 2px #2080f040'
}
}
return style
}
return () => (
<ModalCom
v-model:show={showMainEvent.value}
@ -126,6 +161,15 @@ export default defineComponent({
label-width="auto"
rules={mainEventRules}
>
<NFormItem label="类型" path="type">
<NSelect
class="w-[200px]"
v-model:value={targetId.value}
options={ddList.value}
label-field="name"
value-field="id"
></NSelect>
</NFormItem>
<NFormItem label="事件名称" path="name">
<NInput v-model:value={mainEventData.value.name} />
</NFormItem>
@ -142,24 +186,30 @@ export default defineComponent({
type="textarea"
/>
</NFormItem>
<NFormItem label="事件类型" path="eventType">
<NFormItem label="事件类型" path="status">
<NSwitch
v-model:value={mainEventData.value.eventType}
railStyle={railStyle}
v-model:value={mainEventData.value.status}
checked-value={true}
unchecked-value={false}
default-value={true}
default-value={false}
v-slots={{
checked: () => '已发生',
unchecked: () => '未发生',
checked: () => '未发生',
unchecked: () => '已发生',
}}
></NSwitch>
</NFormItem>
{!mainEventData.value.eventType ? (
<NFormItem label="导弹种类" path="category">
<NInput
v-model:value={mainEventData.value.category}
type="text"
/>
{mainEventData.value.status ? (
<NFormItem label="数据来源" path="source">
<NInput v-model:value={mainEventData.value.source} type="text" />
</NFormItem>
) : null}
{mainEventData.value.status ? (
<NFormItem label="数据发布" path="publishTime">
<NDatePicker
v-model:value={mainEventData.value.publishTime}
type="date"
></NDatePicker>
</NFormItem>
) : null}

41
src/views/Gantt/components/EventList/components/SubEventEdit.jsx
View File

@ -44,22 +44,27 @@ export default defineComponent({
const formRef = ref(null)
async function sure(e) {
e.preventDefault()
delete eventData.value.eventType
delete eventData.value.source
delete eventData.value.publishTime
delete eventData.value.twoType
console.log('eventData.value-------', eventData.value)
const data = {
// id: eventData.value.id ?? null,
// activityId: oneClassData.value.activityId ?? null,
// name: eventData.value.name,
activityId: oneClassData.value?.pid ?? null,
activityId: oneClassData.value?.id ?? null,
oneType: oneClassData.value?.id,
...eventData.value,
// twoType: twoTypeId.value,
fileUrl: imageValue.value,
startTime: eventData.value.timeRange
? eventData.value.timeRange[0]
: null,
endTime: eventData.value.timeRange
? eventData.value.timeRange[1]
: null,
startTime: eventData.value.timeRange,
endTime: eventData.value.timeRange,
// ? eventData.value.timeRange[0]
// : null,
// endTime: eventData.value.timeRange
// ? eventData.value.timeRange[1]
// : null,
}
// eventData.value.startTime = data.startTime
@ -67,11 +72,7 @@ export default defineComponent({
// console.log(erros, eventData, '')
// if (!erros) {
if (
eventData.value.name &&
eventData.value.timeRange &&
eventData.value.twoType
) {
if (eventData.value.name && eventData.value.timeRange) {
const res = eventData.value.id
? await updateSon(data)
: await addSon(data)
@ -133,14 +134,14 @@ export default defineComponent({
label-width="auto"
rules={subEventRules}
>
<NFormItem label="二级分类" path="twoType">
{/* <NFormItem label="二级分类" path="twoType">
<NSelect
v-model:value={eventData.value.twoType}
options={sonOptions.value}
label-field="name"
value-field="id"
></NSelect>
</NFormItem>
</NFormItem> */}
{/* <NFormItem label="步骤">
<NSelect v-model:value={value2.value}></NSelect>
</NFormItem>
@ -150,13 +151,21 @@ export default defineComponent({
<NFormItem label="事件名称" path="name">
<NInput v-model:value={eventData.value.name} />
</NFormItem>
<NFormItem label="事件时间" path="timeRange">
{/* <NFormItem label="事件时间" path="timeRange">
<NDatePicker
// v-model:value={timeRange.value}
v-model:value={eventData.value.timeRange}
type="datetimerange"
clearable
/>
</NFormItem> */}
<NFormItem label="事件时间" path="timeRange">
<NDatePicker
// v-model:value={timeRange.value}
v-model:value={eventData.value.timeRange}
type="datetime"
clearable
/>
</NFormItem>
<NFormItem label="装备型号" path="equipModel">
<NInput v-model:value={eventData.value.equipModel} />

42
src/views/Gantt/components/EventList/hooks.jsx
View File

@ -2,16 +2,26 @@ import { getSimpTreeList, getTwoClass } from '@/api/Gantt'
const subEventRules = {
name: { required: true, message: '请输入名称', trigger: ['blur', 'input'] },
// timeRange: {
// required: true,
// message: '请选择时间',
// trigger: ['blur', 'input'],
// },
timeRange: {
required: true,
message: '请选择时间',
trigger: ['blur', 'input'],
},
twoType: {
required: true,
message: '请选择二级分类',
trigger: ['blur', 'change'],
validator(rule, value) {
if (!value) {
return new Error('请选择时间范围')
}
return true
},
trigger: ['change'],
},
// twoType: {
// required: true,
// message: '请选择二级分类',
// trigger: ['blur', 'change'],
// },
}
// const mainEventRules = {
// name: { required: true, message: '请输入名称', trigger: ['blur', 'input'] },
@ -51,8 +61,9 @@ const mainEventData = ref({
// type: 'mainEvent',
describe: '',
fileUrl: '',
eventType: true,
category: '123333',
status: false,
source: '', //数据来源
publishTime: null,
})
function resetMainEventData() {
@ -60,7 +71,9 @@ function resetMainEventData() {
name: '',
timeRange: null,
describe: '',
eventType: true,
status: false,
source: '',
publishTime: null,
fileUrl: '',
}
}
@ -71,6 +84,7 @@ const range = ref(null)
const showNewEvent = ref(false)
watch(showNewEvent, show => {
console.log('----------show',show)
if (!show) {
oneClassData.value = null
resetEventData()
@ -82,7 +96,9 @@ const eventData = ref({
timeRange: null,
fileUrl: '',
describe: '',
eventType: true,
status: false,
source: '',
publishTime: null,
equipModel: '',
reportSite: '',
twoType: '',
@ -95,7 +111,9 @@ function resetEventData() {
timeRange: null,
fileUrl: '',
describe: '',
eventType: true,
status: false,
source: '',
publishTime: null,
equipModel: '',
reportSite: '',
twoType: '',

81
src/views/Gantt/components/EventList/index.jsx
View File

@ -52,6 +52,7 @@ export default defineComponent({
key: 'name',
// width: 'auto',
render: row => {
console.log(row, '-row----------------------')
return (
<div class="inline-flex items-center gap-2">
{/* <NIcon>
@ -119,9 +120,35 @@ export default defineComponent({
key: 'action',
width: '240',
render(row, rowIndex) {
// console.log(row, rowIndex)
console.log(row, rowIndex)
return (
<div class="flex justify-end">
{row.level === 1 ? (
<NButton
type="success"
size="small"
quaternary
onClick={() => addSubEvent(row)}
>
<NIcon>
<AddCircleOutline />
</NIcon>
添加子事件
</NButton>
) : null}
{/* {row.level === 1 && (
<NButton
type="success"
size="small"
quaternary
onClick={() => addSubEvent(row)}
>
<NIcon>
<AddCircleOutline />
</NIcon>
添加子事件
</NButton>
)} */}
{row.level === 1 && (
<NButton
type="primary"
@ -135,20 +162,8 @@ export default defineComponent({
编辑事件
</NButton>
)}
{row.level === 2 ? (
<NButton
type="success"
size="small"
quaternary
onClick={() => addSubEvent(row)}
>
<NIcon>
<AddCircleOutline />
</NIcon>
添加子事件
</NButton>
) : null}
{row.level === 4 && (
{row.level === 3 && (
<NButton
type="primary"
size="small"
@ -161,6 +176,19 @@ export default defineComponent({
编辑子事件
</NButton>
)}
{/* {row.level === 3 && (
<NButton
type="error"
size="small"
quaternary
onClick={() => delSubEvent(row)}
>
<NIcon>
<CreateOutline />
</NIcon>
删除子事件
</NButton>
)} */}
{Reflect.has(row, 'trajData') && (
<NButton
type="primary"
@ -187,7 +215,7 @@ export default defineComponent({
编辑子事件
</NButton>
)} */}
{![2, 3].includes(row.level) ? (
{![2].includes(row.level) ? (
<NButton
type="error"
size="small"
@ -209,11 +237,18 @@ export default defineComponent({
function editMainEvent(row) {
showMainEvent.value = true
console.log('---row', row)
mainEventData.value = cloneDeep(row)
mainEventData.value.status =
mainEventData.value.status == 2 ? true : false
mainEventData.value.timeRange = [
mainEventData.value.startTime,
mainEventData.value.endTime,
]
}
const addSubEvent = async row => {
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({
/>
<MainEventEdit v-model:show={showMainEvent.value} />
<SubEventEdit v-model:show={showNewEvent.value} />
{/* <SubEventEdit v-model:show={showNewEvent.value} /> */}
</>
)
},

461
src/views/Gantt/components/Gantt/hooks/gantt.ts
View File

@ -13,6 +13,9 @@ import { getSon } from '@/api/Gantt'
import { useTree } from '@/utils/tree'
import { useInfoBox } from './infoBox.jsx'
import dayjs from 'dayjs'
import { useHappen } from '../../useHappen'
import { useFatherData } from '../../useHappen'
import {useEvent} from '../../EventList/hooks'
type GanttParams = {
route?: any
@ -23,9 +26,11 @@ const bgColor = '#1c202c'
const headerBgColor = '#33566f22'
const textColor = '#65c5e7'
const textColorWithOp = '#75fbfd22'
const { getTimeRangeForTree } = useTree()
const currentGanttDom = ref(null)
const currentGanttParams=ref({});
const useGantt = ({ router, route }: GanttParams) => {
const currentImage = ref()
const { subId } = route.params
@ -33,80 +38,108 @@ const useGantt = ({ router, route }: GanttParams) => {
const timeRange = ref([])
const plans = ref()
const happen = ref()
// const happen = ref()
const { happen } = useHappen()
const { fatherData } = useFatherData()
// onMounted(() => {
// getGanttData()
// })
// 获取当前时间点的一个小时时间段
function createOneHourRange(centerTime,options = {}){
const {
before = 0,
after = 45*60*1000
}=options
const ceterTimestamp = centerTime.getTime();
return [
new Date(ceterTimestamp - before),
new Date(ceterTimestamp + after)
]
}
async function getGanttData(params: Record<string, string>) {
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<string, string>
) {
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: `<img width='200' height='200' src='${imgUrl}' />` },
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
}
}

6
src/views/Gantt/components/Gantt/index.jsx
View File

@ -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(

23
src/views/Gantt/components/MainGantt/index.jsx
View File

@ -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({
<NDatePicker
class="w-[600px]"
v-model:value={range.value}
type="datetimerange"
type="daterange"
clearable
/>
{/* <NRadioGroup v-model:value={value.value} name="radiobuttongroup">
<NRadioButton value="hour" label="日" />
<NRadioButton value="day" label="月" />
</NRadioGroup> */}
<NRadioGroup
v-model:value={happen.value}
name="radiobuttongroup"

17
src/views/Gantt/components/SubGantt/index.jsx
View File

@ -1,11 +1,16 @@
import { NButton } from 'naive-ui'
import { NButton,NRadioGroup,NRadioButton } from 'naive-ui'
import GanttCom from '../Gantt'
import { useRouter } from 'vue-router'
import { useEvent } from '../../components/EventList/hooks'
const {showNewEvent}=useEvent();
export default defineComponent({
setup() {
const router = useRouter()
watch(showNewEvent, show => {
console.log('----1111111------show',show)
})
const value = ref('day')
const showView = () => {
@ -25,8 +30,16 @@ export default defineComponent({
>
返回
</NButton>
<SubEventEdit v-model:show={showNewEvent.value} />
<NRadioGroup v-model:value={value.value} name="radiobuttongroup1">
<NRadioButton value="hour" label="小时" />
<NRadioButton value="day" label="日" />
</NRadioGroup>
</div>
<GanttCom scale={value.value} />
</>
)
},

10
src/views/Gantt/components/useHappen.jsx Normal file
View File

@ -0,0 +1,10 @@
const happen = ref(1)
const fatherData = ref({})
export function useHappen() {
return { happen }
}
export function useFatherData() {
return { fatherData }
}

6
src/views/Gantt/index.jsx
View File

@ -15,6 +15,9 @@ import HeaderCom from '../Content/components/Header/index.vue'
import TaskList from './components/TaskList'
import EventList from './components/EventList'
import NewTask from './components/TaskList/components/NewTask'
import SubEventEdit from './components/EventList/components/SubEventEdit'
import useTask from './components/TaskList/components/NewTask/hooks'
import { useEvent } from './components/EventList/hooks'
@ -48,6 +51,7 @@ export default defineComponent({
mainEventData,
targetId,
range,
showNewEvent,
searchTreeList,
tableData,
} = useEvent()
@ -171,7 +175,7 @@ export default defineComponent({
</div>
</NDrawerContent>
</NDrawer>
<SubEventEdit v-model:show={showNewEvent.value} />
<NewTask v-model:show={showNewTask.value} />
</div>
)