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

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

@ -6,10 +6,13 @@ import {
NDatePicker, NDatePicker,
NUpload, NUpload,
NSwitch, NSwitch,
NSelect,
} from 'naive-ui' } from 'naive-ui'
import ModalCom from '@/components/Modal/index.vue' import ModalCom from '@/components/Modal/index.vue'
import { useEvent } from '../hooks' 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({ export default defineComponent({
// props: { // props: {
// show: { // show: {
@ -42,6 +45,7 @@ export default defineComponent({
const formRef = ref(null) const formRef = ref(null)
async function sure(e) { async function sure(e) {
e.preventDefault() e.preventDefault()
mainEventData.value.status = mainEventData.value.status ? 2 : 1
const data = { const data = {
...mainEventData.value, ...mainEventData.value,
targetId: targetId.value, targetId: targetId.value,
@ -78,9 +82,9 @@ export default defineComponent({
} }
} }
watch( watch(
() => mainEventData.value.eventType, () => mainEventData.value.status,
val => { val => {
console.log(val, '------eventType') console.log(val, '------status')
}, },
{ {
immediate: true, 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 timeRange = ref(null)
const uploadImg = ref([]) const uploadImg = ref([])
// const desc = 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 () => ( return () => (
<ModalCom <ModalCom
v-model:show={showMainEvent.value} v-model:show={showMainEvent.value}
@ -126,6 +161,15 @@ export default defineComponent({
label-width="auto" label-width="auto"
rules={mainEventRules} 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"> <NFormItem label="事件名称" path="name">
<NInput v-model:value={mainEventData.value.name} /> <NInput v-model:value={mainEventData.value.name} />
</NFormItem> </NFormItem>
@ -142,24 +186,30 @@ export default defineComponent({
type="textarea" type="textarea"
/> />
</NFormItem> </NFormItem>
<NFormItem label="事件类型" path="eventType"> <NFormItem label="事件类型" path="status">
<NSwitch <NSwitch
v-model:value={mainEventData.value.eventType} railStyle={railStyle}
v-model:value={mainEventData.value.status}
checked-value={true} checked-value={true}
unchecked-value={false} unchecked-value={false}
default-value={true} default-value={false}
v-slots={{ v-slots={{
checked: () => '已发生', checked: () => '未发生',
unchecked: () => '未发生', unchecked: () => '已发生',
}} }}
></NSwitch> ></NSwitch>
</NFormItem> </NFormItem>
{!mainEventData.value.eventType ? ( {mainEventData.value.status ? (
<NFormItem label="导弹种类" path="category"> <NFormItem label="数据来源" path="source">
<NInput <NInput v-model:value={mainEventData.value.source} type="text" />
v-model:value={mainEventData.value.category} </NFormItem>
type="text" ) : null}
/> {mainEventData.value.status ? (
<NFormItem label="数据发布" path="publishTime">
<NDatePicker
v-model:value={mainEventData.value.publishTime}
type="date"
></NDatePicker>
</NFormItem> </NFormItem>
) : null} ) : null}

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

@ -44,22 +44,27 @@ export default defineComponent({
const formRef = ref(null) const formRef = ref(null)
async function sure(e) { async function sure(e) {
e.preventDefault() 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 = { const data = {
// id: eventData.value.id ?? null, // id: eventData.value.id ?? null,
// activityId: oneClassData.value.activityId ?? null, // activityId: oneClassData.value.activityId ?? null,
// name: eventData.value.name, // name: eventData.value.name,
activityId: oneClassData.value?.pid ?? null, activityId: oneClassData.value?.id ?? null,
oneType: oneClassData.value?.id, oneType: oneClassData.value?.id,
...eventData.value, ...eventData.value,
// twoType: twoTypeId.value, // twoType: twoTypeId.value,
fileUrl: imageValue.value, fileUrl: imageValue.value,
startTime: eventData.value.timeRange startTime: eventData.value.timeRange,
? eventData.value.timeRange[0] endTime: eventData.value.timeRange,
: null, // ? eventData.value.timeRange[0]
endTime: eventData.value.timeRange // : null,
? eventData.value.timeRange[1] // endTime: eventData.value.timeRange
: null, // ? eventData.value.timeRange[1]
// : null,
} }
// eventData.value.startTime = data.startTime // eventData.value.startTime = data.startTime
@ -67,11 +72,7 @@ export default defineComponent({
// console.log(erros, eventData, '') // console.log(erros, eventData, '')
// if (!erros) { // if (!erros) {
if ( if (eventData.value.name && eventData.value.timeRange) {
eventData.value.name &&
eventData.value.timeRange &&
eventData.value.twoType
) {
const res = eventData.value.id const res = eventData.value.id
? await updateSon(data) ? await updateSon(data)
: await addSon(data) : await addSon(data)
@ -133,14 +134,14 @@ export default defineComponent({
label-width="auto" label-width="auto"
rules={subEventRules} rules={subEventRules}
> >
<NFormItem label="二级分类" path="twoType"> {/* <NFormItem label="二级分类" path="twoType">
<NSelect <NSelect
v-model:value={eventData.value.twoType} v-model:value={eventData.value.twoType}
options={sonOptions.value} options={sonOptions.value}
label-field="name" label-field="name"
value-field="id" value-field="id"
></NSelect> ></NSelect>
</NFormItem> </NFormItem> */}
{/* <NFormItem label="步骤"> {/* <NFormItem label="步骤">
<NSelect v-model:value={value2.value}></NSelect> <NSelect v-model:value={value2.value}></NSelect>
</NFormItem> </NFormItem>
@ -150,13 +151,21 @@ export default defineComponent({
<NFormItem label="事件名称" path="name"> <NFormItem label="事件名称" path="name">
<NInput v-model:value={eventData.value.name} /> <NInput v-model:value={eventData.value.name} />
</NFormItem> </NFormItem>
<NFormItem label="事件时间" path="timeRange"> {/* <NFormItem label="事件时间" path="timeRange">
<NDatePicker <NDatePicker
// v-model:value={timeRange.value} // v-model:value={timeRange.value}
v-model:value={eventData.value.timeRange} v-model:value={eventData.value.timeRange}
type="datetimerange" type="datetimerange"
clearable clearable
/> />
</NFormItem> */}
<NFormItem label="事件时间" path="timeRange">
<NDatePicker
// v-model:value={timeRange.value}
v-model:value={eventData.value.timeRange}
type="datetime"
clearable
/>
</NFormItem> </NFormItem>
<NFormItem label="装备型号" path="equipModel"> <NFormItem label="装备型号" path="equipModel">
<NInput v-model:value={eventData.value.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 = { const subEventRules = {
name: { required: true, message: '请输入名称', trigger: ['blur', 'input'] }, name: { required: true, message: '请输入名称', trigger: ['blur', 'input'] },
// timeRange: {
// required: true,
// message: '请选择时间',
// trigger: ['blur', 'input'],
// },
timeRange: { timeRange: {
required: true, required: true,
message: '请选择时间', validator(rule, value) {
trigger: ['blur', 'input'], if (!value) {
}, return new Error('请选择时间范围')
twoType: { }
required: true, return true
message: '请选择二级分类', },
trigger: ['blur', 'change'], trigger: ['change'],
}, },
// twoType: {
// required: true,
// message: '请选择二级分类',
// trigger: ['blur', 'change'],
// },
} }
// const mainEventRules = { // const mainEventRules = {
// name: { required: true, message: '请输入名称', trigger: ['blur', 'input'] }, // name: { required: true, message: '请输入名称', trigger: ['blur', 'input'] },
@ -51,8 +61,9 @@ const mainEventData = ref({
// type: 'mainEvent', // type: 'mainEvent',
describe: '', describe: '',
fileUrl: '', fileUrl: '',
eventType: true, status: false,
category: '123333', source: '', //数据来源
publishTime: null,
}) })
function resetMainEventData() { function resetMainEventData() {
@ -60,7 +71,9 @@ function resetMainEventData() {
name: '', name: '',
timeRange: null, timeRange: null,
describe: '', describe: '',
eventType: true, status: false,
source: '',
publishTime: null,
fileUrl: '', fileUrl: '',
} }
} }
@ -71,6 +84,7 @@ const range = ref(null)
const showNewEvent = ref(false) const showNewEvent = ref(false)
watch(showNewEvent, show => { watch(showNewEvent, show => {
console.log('----------show',show)
if (!show) { if (!show) {
oneClassData.value = null oneClassData.value = null
resetEventData() resetEventData()
@ -82,7 +96,9 @@ const eventData = ref({
timeRange: null, timeRange: null,
fileUrl: '', fileUrl: '',
describe: '', describe: '',
eventType: true, status: false,
source: '',
publishTime: null,
equipModel: '', equipModel: '',
reportSite: '', reportSite: '',
twoType: '', twoType: '',
@ -95,7 +111,9 @@ function resetEventData() {
timeRange: null, timeRange: null,
fileUrl: '', fileUrl: '',
describe: '', describe: '',
eventType: true, status: false,
source: '',
publishTime: null,
equipModel: '', equipModel: '',
reportSite: '', reportSite: '',
twoType: '', twoType: '',

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

@ -52,6 +52,7 @@ export default defineComponent({
key: 'name', key: 'name',
// width: 'auto', // width: 'auto',
render: row => { render: row => {
console.log(row, '-row----------------------')
return ( return (
<div class="inline-flex items-center gap-2"> <div class="inline-flex items-center gap-2">
{/* <NIcon> {/* <NIcon>
@ -119,9 +120,35 @@ export default defineComponent({
key: 'action', key: 'action',
width: '240', width: '240',
render(row, rowIndex) { render(row, rowIndex) {
// console.log(row, rowIndex) console.log(row, rowIndex)
return ( return (
<div class="flex justify-end"> <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 && ( {row.level === 1 && (
<NButton <NButton
type="primary" type="primary"
@ -135,20 +162,8 @@ export default defineComponent({
编辑事件 编辑事件
</NButton> </NButton>
)} )}
{row.level === 2 ? (
<NButton {row.level === 3 && (
type="success"
size="small"
quaternary
onClick={() => addSubEvent(row)}
>
<NIcon>
<AddCircleOutline />
</NIcon>
添加子事件
</NButton>
) : null}
{row.level === 4 && (
<NButton <NButton
type="primary" type="primary"
size="small" size="small"
@ -161,6 +176,19 @@ export default defineComponent({
编辑子事件 编辑子事件
</NButton> </NButton>
)} )}
{/* {row.level === 3 && (
<NButton
type="error"
size="small"
quaternary
onClick={() => delSubEvent(row)}
>
<NIcon>
<CreateOutline />
</NIcon>
删除子事件
</NButton>
)} */}
{Reflect.has(row, 'trajData') && ( {Reflect.has(row, 'trajData') && (
<NButton <NButton
type="primary" type="primary"
@ -187,7 +215,7 @@ export default defineComponent({
编辑子事件 编辑子事件
</NButton> </NButton>
)} */} )} */}
{![2, 3].includes(row.level) ? ( {![2].includes(row.level) ? (
<NButton <NButton
type="error" type="error"
size="small" size="small"
@ -209,11 +237,18 @@ export default defineComponent({
function editMainEvent(row) { function editMainEvent(row) {
showMainEvent.value = true showMainEvent.value = true
console.log('---row', row)
mainEventData.value = cloneDeep(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 => { const addSubEvent = async row => {
console.log(row, 'row') console.log('rowadd------------SubEvent', row)
oneClassData.value = row oneClassData.value = row
showNewEvent.value = true showNewEvent.value = true
// eventData.value = {} // eventData.value = {}
@ -221,13 +256,17 @@ export default defineComponent({
} }
function editSubEvent(row) { function editSubEvent(row) {
console.log('---editSubEvent----', row)
showNewEvent.value = true showNewEvent.value = true
eventData.value = cloneDeep({ eventData.value = cloneDeep({
...row, ...row,
timeRange: [row.startTime, row.endTime], timeRange: row.startTime,
}) })
getTwoClassList(row.oneType) getTwoClassList(row.oneType)
console.log('子事件编辑：', row, 'onClassData', oneClassData) console.log('子事件编辑--------------：', row)
}
function delSubEvent(row) {
console.log('-----------delSubEvent', row)
} }
const dialog = useDialog() const dialog = useDialog()
@ -242,7 +281,7 @@ export default defineComponent({
//await deleteEventById(row.id) //await deleteEventById(row.id)
if (row.level == 1) { if (row.level == 1) {
await deleteSimp({ id: row.id }) await deleteSimp({ id: row.id })
} else if (row.level == 4) { } else if (row.level == 3) {
await deleteSon({ id: row.id }) await deleteSon({ id: row.id })
} }
searchTreeList() searchTreeList()
@ -292,7 +331,7 @@ export default defineComponent({
/> />
<MainEventEdit v-model:show={showMainEvent.value} /> <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 { useTree } from '@/utils/tree'
import { useInfoBox } from './infoBox.jsx' import { useInfoBox } from './infoBox.jsx'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useHappen } from '../../useHappen'
import { useFatherData } from '../../useHappen'
import {useEvent} from '../../EventList/hooks'
type GanttParams = { type GanttParams = {
route?: any route?: any
@ -23,9 +26,11 @@ const bgColor = '#1c202c'
const headerBgColor = '#33566f22' const headerBgColor = '#33566f22'
const textColor = '#65c5e7' const textColor = '#65c5e7'
const textColorWithOp = '#75fbfd22' const textColorWithOp = '#75fbfd22'
const { getTimeRangeForTree } = useTree() const { getTimeRangeForTree } = useTree()
const currentGanttDom = ref(null)
const currentGanttParams=ref({});
const useGantt = ({ router, route }: GanttParams) => { const useGantt = ({ router, route }: GanttParams) => {
const currentImage = ref() const currentImage = ref()
const { subId } = route.params const { subId } = route.params
@ -33,80 +38,108 @@ const useGantt = ({ router, route }: GanttParams) => {
const timeRange = ref([]) const timeRange = ref([])
const plans = ref() const plans = ref()
const happen = ref()
// const happen = ref()
const { happen } = useHappen()
const { fatherData } = useFatherData()
// onMounted(() => { // onMounted(() => {
// getGanttData() // 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>) { async function getGanttData(params: Record<string, string>) {
timeRange.value = [params.startTime, params.endTime] timeRange.value = [params.startTime, params.endTime]
console.log('%csubId', 'color:red;font-size:20px', subId) console.log('%csubId', 'color:red;font-size:20px', subId)
const { code, data } = subId const { code, data } = subId
? await getSubGantt({ activityId: subId }) ? await getSubGantt({ activityId: subId })
: await getMainGantt(params) : await getMainGantt(params)
if (code === 200) { if (code === 200) {
// records.value = data.list // records.value = data.list
if (subId) { if (subId) {
records.value = data.list // records.value = data.list
.reduce((acc, cur) => { // .reduce((acc, cur) => {
if (Array.isArray(cur.children) && cur.children.length > 0) { // if (Array.isArray(cur.children) && cur.children.length > 0) {
acc.push( // acc.push(
cur.children.map(twoType => { // cur.children.map(twoType => {
return { // return {
...twoType, // ...twoType,
children: // children:
twoType.children && // twoType.children &&
twoType.children.map(eventItem => { // twoType.children.map(eventItem => {
console.log( // console.log(
eventItem.startTime, // eventItem.startTime,
eventItem.endTime // eventItem.endTime
// new Date(eventItem.startTime).getMonth() // // new Date(eventItem.startTime).getMonth()
) // )
return { // return {
...eventItem, // ...eventItem,
start: eventItem.startTime, // start: eventItem.startTime,
end: eventItem.endTime, // end: eventItem.endTime,
} // }
}), // }),
parentName: cur.name, // parentName: cur.name,
childrenLengthForParent: cur.children.length, // childrenLengthForParent: cur.children.length,
} // }
}) // })
) // )
} // }
return acc // return acc
}, []) // }, [])
.flat() // .flat()
// console.log(records.value)
records.value.length > 0 &&
(timeRange.value = getTimeRangeForTree(records.value))
} else {
// console.log(data.list, '------')
records.value = data.list.map(item => { records.value = data.list.map(item => {
return { return {
...item, ...item,
children: children:
item.children && item.children &&
item.children.map(mainEvent => { item.children.map(mainEvent => {
const date = new Date(mainEvent.startTime) if (mainEvent.status == 2) {
const year = date.getFullYear() const now = new Date()
const month = date.getMonth() const sortValue = parseInt(mainEvent.sort) || 0
const startOfMonth = new Date(year, month, 1) const daysToAdd = sortValue * 1
// const startOfMonth = new Date(year, month, mainEvent.startTime) const futureDate = new Date(now)
startOfMonth.setHours(0, 0, 0, 0) futureDate.setDate(now.getDate() + daysToAdd)
const lastDayOfMonth = new Date(year, month + 1, 0) mainEvent.startTime = futureDate
// const lastDayOfMonth = new Date(year, month ,mainEvent.startTime) }
const endOfMonth = new Date( console.log(mainEvent, 'FSLKFJSLKAFJDSL')
year, const date = new Date(mainEvent.startTime)
month, const startOfMonth = createOneHourRange(date)[0]
lastDayOfMonth.getDate() const endOfMonth = createOneHourRange(date)[1]
)
endOfMonth.setHours(23, 59, 59, 0) // const year = date.getFullYear()
// console.log( // const month = date.getMonth()
// startOfMonth.toLocaleString(), // const day = date.getDate()
// endOfMonth.toLocaleString() // 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 { return {
...mainEvent, ...mainEvent,
start: startOfMonth, 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) 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( async function renderMainTask(
dom: HTMLElement, dom: HTMLElement,
params: Record<string, string> params: Record<string, string>
) { ) {
console.log(subId, 'renderMainTask')
currentGanttDom.value = dom
currentGanttParams.value = params
await getGanttData(params) await getGanttData(params)
const option = getOption() const option = getOption()
// if (ganttInstance) { // if (ganttInstance) {
// ganttInstance.setRecords(records.value) // ganttInstance.setRecords(records.value)
// } else { // } else {
if (records.value.length === 0) return if (records.value.length === 0) {
return
}
ganttInstance && ganttInstance?.release() ganttInstance && ganttInstance?.release()
ganttInstance = new Gantt(dom, option) ganttInstance = new Gantt(dom, option)
window['ganttInstance'] = ganttInstance window['ganttInstance'] = ganttInstance
// } // }
} }
function getOption(): TYPES.GanttConstructorOptions { function getOption(): TYPES.GanttConstructorOptions {
// console.log(records.value); let scales = 'month'
if(subId){
scales =plans.value ?? 'day'
}
const option = { const option = {
// hierarchyType: 'tree',
// tree: {
// enable: true,
// hidEmptyChildren: false,
// defaultTreeRowHeight: 40,
// indent: 20,
// },
// task: {
// minChildren: 0,
// },
records: records.value, records: records.value,
taskListTable: renderTaskListTable(), taskListTable: renderTaskListTable(),
tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange, tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange,
// tasksShowMode: TYPES.TasksShowMode.All_Tasks_Arrange,
// groupBy: 'name', // groupBy: 'name',
// groupField: 'name', // groupField: 'name',
// widthMode: 'standard', // widthMode: 'standard',
@ -190,7 +293,9 @@ const useGantt = ({ router, route }: GanttParams) => {
taskBar: renderTaskBar(subId), taskBar: renderTaskBar(subId),
timelineHeader: { timelineHeader: {
backgroundColor: headerBgColor, backgroundColor: headerBgColor,
colWidth: 150, // colWidth: 150,
colWidth: 180,
// colWidth: 1040, // colWidth: 1040,
// verticalLine: { // verticalLine: {
// lineColor: textColorWithOp, // lineColor: textColorWithOp,
@ -202,7 +307,8 @@ const useGantt = ({ router, route }: GanttParams) => {
lineWidth: 1, lineWidth: 1,
lineDash: [4, 2], lineDash: [4, 2],
}, },
scales: getTimeScales(subId ? 'day' : 'month'), // scales: getTimeScales(subId ? 'day' : 'month'),
scales: getTimeScales(scales),
}, },
minDate: timeRange.value[0], minDate: timeRange.value[0],
maxDate: timeRange.value[1], maxDate: timeRange.value[1],
@ -239,7 +345,8 @@ const useGantt = ({ router, route }: GanttParams) => {
const columns = [ const columns = [
{ {
field: 'name', field: 'name',
title: subId ? '目标' : '事件主体', // title: subId ? '目标' : '事件主体',
title: subId ? '装备型号' : '事件主体',
width: '120', width: '120',
mergeCell: true, mergeCell: true,
customLayout: args => { customLayout: args => {
@ -348,7 +455,6 @@ const useGantt = ({ router, route }: GanttParams) => {
const { createInfoBox, updatePosition, removeInfoBox } = useInfoBox() const { createInfoBox, updatePosition, removeInfoBox } = useInfoBox()
function renderTaskBar(subId: string | number) { function renderTaskBar(subId: string | number) {
// console.log(subId, '------');
const taskBar = { const taskBar = {
resizable: false, resizable: false,
moveable: false, moveable: false,
@ -359,7 +465,7 @@ const useGantt = ({ router, route }: GanttParams) => {
customLayout: args => { customLayout: args => {
// console.log(args, 'args'); // console.log(args, 'args');
const { width, height, startDate, endDate, taskRecord } = args const { width, height, startDate, endDate, taskRecord } = args
// console.log(taskRecord, 'taskRecord');
const container = new Group({ const container = new Group({
width, width,
height, height,
@ -401,6 +507,7 @@ const useGantt = ({ router, route }: GanttParams) => {
container.addEventListener('click', async () => { container.addEventListener('click', async () => {
removeInfoBox() removeInfoBox()
if (!subId) { if (!subId) {
fatherData.value = taskRecord
router.push({ router.push({
path: `/gantt/sub/${taskRecord.id}`, path: `/gantt/sub/${taskRecord.id}`,
}) })
@ -415,35 +522,49 @@ const useGantt = ({ router, route }: GanttParams) => {
上报站点: data.reportSite, 上报站点: data.reportSite,
事件描述: data.describe, 事件描述: data.describe,
} }
window.$dialog.info({ const {showNewEvent}=useEvent();
title: '子事件详情', const {eventData} = useEvent();
class: '!w-[40vw]',
content: () => {
return h(
'div', eventData.value ={
{ class: 'flex flex-col gap-4 w-full h-full' }, ...data
[ // type: 'subEvent',
...Object.keys(showData).map(key => { }
return h('div', { class: 'flex w-full h-full ' }, [ showNewEvent.value=true;
h('div', { class: 'w-[120px]' }, key), if(data.startTime){
h( eventData.value.timeRange=data.startTime
'div', }
{ class: 'flex-1 text-wrap' },
showData[key] // window.$dialog.info({
), // title: '子事件详情',
]) // class: '!w-[40vw]',
}), // content: () => {
h('div', { class: 'flex w-full h-full' }, [ // return h(
h('div', { class: 'w-[120px]' }, '图片'), // 'div',
h('img', { // { class: 'flex flex-col gap-4 w-full h-full' },
src: `${window.settings.imgServer}${data.fileUrl}`, // [
}), // ...Object.keys(showData).map(key => {
]), // return h('div', { class: 'flex w-full h-full ' }, [
] // h('div', { class: 'w-[120px]' }, key),
) // h(
}, // 'div',
positiveText: '确定', // { 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) { if (subId) {
const imgUrl = `${window.settings.imgServer}${taskRecord.fileUrl}` const imgUrl = `${window.settings.imgServer}${taskRecord.fileUrl}`
// console.log(imgUrl);
const image = new Image({ const image = new Image({
image: imgUrl, image: imgUrl,
width: 100, width: 100,
@ -470,7 +591,12 @@ const useGantt = ({ router, route }: GanttParams) => {
// texture: 'rect', // texture: 'rect',
// textureColor: '#0006', // textureColor: '#0006',
// html: { dom: `<img width='200' height='200' src='${imgUrl}' />` }, // 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) container.add(image)
image.addEventListener('click', e => { image.addEventListener('click', e => {
@ -522,30 +648,73 @@ const useGantt = ({ router, route }: GanttParams) => {
fontWeight: 'bold', fontWeight: 'bold',
maxLineWidth: width, maxLineWidth: width,
textAlign: 'center', 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], // boundsPadding: [10, 0, 0, 0],
}) })
nameContainer.add(name) 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({ if (!subId) {
text: `${taskRecord.startTime}`, let eText=taskRecord.endTime
fontSize: 13, if(taskRecord.status != 2){
fontFamily: 'sans-serif', eText = eText.split(' ')[0]
fill: textColor, }
boundsPadding: [10, 0, 0, 0], const end = new Text({
opacity: taskRecord.status === 2 ? 0.3 : 1, text: `${eText}`,
}) fontSize: 13,
container.add(start) fontFamily: 'sans-serif',
const end = new Text({ fill: textColor,
text: `${taskRecord.endTime}`, boundsPadding: [10, 0, 0, 0],
fontSize: 13, opacity: getOpacity(
fontFamily: 'sans-serif', taskRecord.start,
fill: textColor, taskRecord.status,
boundsPadding: [10, 0, 0, 0], subId,
opacity: taskRecord.status === 2 ? 0.3 : 1, happen.value
}) ),
container.add(end) })
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) { if (happen.value == 2) {
const rect = new Rect({ const rect = new Rect({
@ -570,12 +739,25 @@ const useGantt = ({ router, route }: GanttParams) => {
], ],
}, },
boundsPadding: [10, 0, 0, 0], boundsPadding: [10, 0, 0, 0],
opacity: taskRecord.status === 2 ? 0.3 : 1, opacity: getOpacity(
taskRecord.start,
taskRecord.status,
subId,
happen.value
),
}) })
container.add(rect) 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） // 添加状态圆点（直径8px）
const dot = new Circle({ const dot = new Circle({
radius: 4, // 半径4px radius: 4, // 半径4px
@ -583,9 +765,14 @@ const useGantt = ({ router, route }: GanttParams) => {
stroke: textColor, // 边框色 stroke: textColor, // 边框色
strokeWidth: 1, // 边框粗细 strokeWidth: 1, // 边框粗细
zIndex: 10, // 确保显示在最上层 zIndex: 10, // 确保显示在最上层
boundsPadding:[4,0,0,0]
}) })
container.add(dot) dotContainer.add(dot)
// dot.translate(
// Math.round(width * getDaysInMontnPercent(taskRecord.startTime)),
// 30
// )
} }
return { return {
rootContainer: container, rootContainer: container,
@ -605,6 +792,15 @@ const useGantt = ({ router, route }: GanttParams) => {
return taskBar 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() { function updateMarkLine() {
ganttInstance?.updateMarkLine([ ganttInstance?.updateMarkLine([
{ {
@ -616,7 +812,6 @@ const useGantt = ({ router, route }: GanttParams) => {
}, },
}, },
]) ])
console.log(ganttInstance)
} }
function renderGroup(opt: IGroupGraphicAttribute) { function renderGroup(opt: IGroupGraphicAttribute) {
return new Group(opt) return new Group(opt)
@ -633,8 +828,12 @@ const useGantt = ({ router, route }: GanttParams) => {
function changeTimeScales(scale: TYPES.ITimelineScale['unit'], val: number) { function changeTimeScales(scale: TYPES.ITimelineScale['unit'], val: number) {
plans.value = scale plans.value = scale
happen.value = val 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( function getTimeScales(
@ -656,13 +855,16 @@ const useGantt = ({ router, route }: GanttParams) => {
flexWrap: 'nowrap', flexWrap: 'nowrap',
}) })
// const container = new Group({
// width:args.width,
// height:10,
// overflow:'hidden'
// })
const day = new Text({ const day = new Text({
text: subId text: subId
? dayjs(startDate).format('YYYY年M月D日') ? scale === 'day'?dayjs(startDate).format('YYYY年M月D日'):dayjs(startDate).format('YYYY年M月D日 HH时')
: dayjs(startDate).format('YYYY年M月'), : dayjs(startDate).format('YYYY年M月'),
// scale === 'day'
// ? startDate.toLocaleDateString()
// : startDate.toLocaleTimeString(),
fontSize: 14, fontSize: 14,
fontWeight: 'bold', fontWeight: 'bold',
fontFamily: 'sans-serif', 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 { return {
getGanttData, getGanttData,
renderMainTask, renderMainTask,
changeTimeScales, changeTimeScales,
currentImage, currentImage,
updateMarkLine, updateMarkLine,
currentGanttDom,
currentGanttParams
} }
} }

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

@ -32,6 +32,8 @@ export default defineComponent({
changeTimeScales, changeTimeScales,
currentImage, currentImage,
updateMarkLine, updateMarkLine,
currentGanttDom,
currentGanttParams,
} = useGantt({ } = useGantt({
route, route,
router, router,
@ -57,7 +59,7 @@ export default defineComponent({
} }
}) })
function getRefresh() { function getRefresh() {
console.log(props.happen, '------------heppen') console.log(props.happen, '------------heppen', props)
renderMainTask(document.querySelector('#tableContainer'), { renderMainTask(document.querySelector('#tableContainer'), {
ids: props.types, ids: props.types,
startTime: props.dateRange ? props.dateRange[0] : null, startTime: props.dateRange ? props.dateRange[0] : null,
@ -79,7 +81,7 @@ export default defineComponent({
watch( watch(
() => props.scale, () => props.scale,
val => { val => {
changeTimeScales(val, props.happen) changeTimeScales(val, props.happen);
} }
) )
watch( watch(

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

@ -8,13 +8,15 @@ import {
} from 'naive-ui' } from 'naive-ui'
import GanttCom from '../Gantt' import GanttCom from '../Gantt'
import { getDDList } from '@/api/Gantt/gantt' import { getDDList } from '@/api/Gantt/gantt'
import { onBeforeMount } from 'vue' import { onBeforeMount, onMounted } from 'vue'
import { useHappen } from '../useHappen'
export default defineComponent({ export default defineComponent({
setup() { setup() {
const range = ref([new Date('2000-01-01 00:00:00').getTime(), Date.now()]) const range = ref([new Date('2000-01-01 00:00:00').getTime(), Date.now()])
const value = ref('day') const value = ref('day')
const happen = ref(1) const { happen } = useHappen()
// const happen = ref(1)
const types = ref([]) const types = ref([])
const router = useRouter() const router = useRouter()
@ -41,8 +43,16 @@ export default defineComponent({
ganttRef.value.refresh = true ganttRef.value.refresh = true
} }
function changeHappen() { 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 () => ( return () => (
<> <>
@ -50,13 +60,10 @@ export default defineComponent({
<NDatePicker <NDatePicker
class="w-[600px]" class="w-[600px]"
v-model:value={range.value} v-model:value={range.value}
type="datetimerange" type="daterange"
clearable clearable
/> />
{/* <NRadioGroup v-model:value={value.value} name="radiobuttongroup">
<NRadioButton value="hour" label="日" />
<NRadioButton value="day" label="月" />
</NRadioGroup> */}
<NRadioGroup <NRadioGroup
v-model:value={happen.value} v-model:value={happen.value}
name="radiobuttongroup" 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 GanttCom from '../Gantt'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useEvent } from '../../components/EventList/hooks'
const {showNewEvent}=useEvent();
export default defineComponent({ export default defineComponent({
setup() { setup() {
const router = useRouter() const router = useRouter()
watch(showNewEvent, show => {
console.log('----1111111------show',show)
})
const value = ref('day') const value = ref('day')
const showView = () => { const showView = () => {
@ -25,8 +30,16 @@ export default defineComponent({
> >
返回 返回
</NButton> </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> </div>
<GanttCom scale={value.value} /> <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 TaskList from './components/TaskList'
import EventList from './components/EventList' import EventList from './components/EventList'
import NewTask from './components/TaskList/components/NewTask' import NewTask from './components/TaskList/components/NewTask'
import SubEventEdit from './components/EventList/components/SubEventEdit'
import useTask from './components/TaskList/components/NewTask/hooks' import useTask from './components/TaskList/components/NewTask/hooks'
import { useEvent } from './components/EventList/hooks' import { useEvent } from './components/EventList/hooks'
@ -48,6 +51,7 @@ export default defineComponent({
mainEventData, mainEventData,
targetId, targetId,
range, range,
showNewEvent,
searchTreeList, searchTreeList,
tableData, tableData,
} = useEvent() } = useEvent()
@ -171,7 +175,7 @@ export default defineComponent({
</div> </div>
</NDrawerContent> </NDrawerContent>
</NDrawer> </NDrawer>
<SubEventEdit v-model:show={showNewEvent.value} />
<NewTask v-model:show={showNewTask.value} /> <NewTask v-model:show={showNewTask.value} />
</div> </div>
) )