From 38f6673facf1b32649fc4a64dd0c237ddcc16a87 Mon Sep 17 00:00:00 2001
From: aq <aq@test.com>
Date: Tue, 15 Apr 2025 10:16:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=94=98=E7=89=B9=E5=9B=BE=E9=9C=80?=
=?UTF-8?q?=E6=B1=82=E5=8F=8A=E7=9B=B8=E5=85=B3bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 4 +-
.../EventList/components/MainEventEdit.jsx | 80 ++-
.../EventList/components/SubEventEdit.jsx | 41 +-
.../Gantt/components/EventList/hooks.jsx | 42 +-
.../Gantt/components/EventList/index.jsx | 81 ++-
.../Gantt/components/Gantt/hooks/gantt.ts | 461 +++++++++++++-----
src/views/Gantt/components/Gantt/index.jsx | 6 +-
.../Gantt/components/MainGantt/index.jsx | 23 +-
src/views/Gantt/components/SubGantt/index.jsx | 17 +-
src/views/Gantt/components/useHappen.jsx | 10 +
src/views/Gantt/index.jsx | 6 +-
11 files changed, 569 insertions(+), 202 deletions(-)
create mode 100644 src/views/Gantt/components/useHappen.jsx
diff --git a/src/App.vue b/src/App.vue
index 0c7498d5a..6b26808e9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
diff --git a/src/views/Gantt/components/EventList/components/MainEventEdit.jsx b/src/views/Gantt/components/EventList/components/MainEventEdit.jsx
index 4a635f60b..77bc3387c 100644
--- a/src/views/Gantt/components/EventList/components/MainEventEdit.jsx
+++ b/src/views/Gantt/components/EventList/components/MainEventEdit.jsx
@@ -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}
diff --git a/src/views/Gantt/components/EventList/components/SubEventEdit.jsx b/src/views/Gantt/components/EventList/components/SubEventEdit.jsx
index 5156e314d..2d333ec6c 100644
--- a/src/views/Gantt/components/EventList/components/SubEventEdit.jsx
+++ b/src/views/Gantt/components/EventList/components/SubEventEdit.jsx
@@ -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} />
diff --git a/src/views/Gantt/components/EventList/hooks.jsx b/src/views/Gantt/components/EventList/hooks.jsx
index 45b537e81..0641ab66d 100644
--- a/src/views/Gantt/components/EventList/hooks.jsx
+++ b/src/views/Gantt/components/EventList/hooks.jsx
@@ -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: '',
diff --git a/src/views/Gantt/components/EventList/index.jsx b/src/views/Gantt/components/EventList/index.jsx
index bcb95289a..c2ec1f7ee 100644
--- a/src/views/Gantt/components/EventList/index.jsx
+++ b/src/views/Gantt/components/EventList/index.jsx
@@ -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} /> */}
</>
)
},
diff --git a/src/views/Gantt/components/Gantt/hooks/gantt.ts b/src/views/Gantt/components/Gantt/hooks/gantt.ts
index e38df3a1a..5c7c3f27c 100644
--- a/src/views/Gantt/components/Gantt/hooks/gantt.ts
+++ b/src/views/Gantt/components/Gantt/hooks/gantt.ts
@@ -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
}
}
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({
<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"
diff --git a/src/views/Gantt/components/SubGantt/index.jsx b/src/views/Gantt/components/SubGantt/index.jsx
index a862fe24b..dba9d732c 100644
--- a/src/views/Gantt/components/SubGantt/index.jsx
+++ b/src/views/Gantt/components/SubGantt/index.jsx
@@ -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} />
+
</>
)
},
diff --git a/src/views/Gantt/components/useHappen.jsx b/src/views/Gantt/components/useHappen.jsx
new file mode 100644
index 000000000..5a0ff96c3
--- /dev/null
+++ b/src/views/Gantt/components/useHappen.jsx
@@ -0,0 +1,10 @@
+const happen = ref(1)
+const fatherData = ref({})
+
+export function useHappen() {
+ return { happen }
+}
+
+export function useFatherData() {
+ return { fatherData }
+}
diff --git a/src/views/Gantt/index.jsx b/src/views/Gantt/index.jsx
index 2d6fcabf5..334d406be 100644
--- a/src/views/Gantt/index.jsx
+++ b/src/views/Gantt/index.jsx
@@ -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>
)