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

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>

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: () => '已发生',
+                checked: () => '未发生',
-                unchecked: () => '未发生',
+                unchecked: () => '已发生',
               }}
             ></NSwitch>
           </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>
           ) : null}
 

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
+        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
@@ -67,11 +72,7 @@ export default defineComponent({
       //   console.log(erros, eventData, '')
 
       //   if (!erros) {
-      if (
+      if (eventData.value.name && eventData.value.timeRange) {
-        eventData.value.name &&
-        eventData.value.timeRange &&
-        eventData.value.twoType
-      ) {
         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} />

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: '请选择时间',
+    validator(rule, value) {
-    trigger: ['blur', 'input'],
+      if (!value) {
+        return new Error('请选择时间范围')
+      }
+      return true
     },
-  twoType: {
+    trigger: ['change'],
-    required: true,
-    message: '请选择二级分类',
-    trigger: ['blur', '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,
+  status: false,
-  category: '123333',
+  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: '',

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
+              {row.level === 3 && (
-                  type="success"
-                  size="small"
-                  quaternary
-                  onClick={() => addSubEvent(row)}
-                >
-                  <NIcon>
-                    <AddCircleOutline />
-                  </NIcon>
-                  添加子事件
-                </NButton>
-              ) : null}
-              {row.level === 4 && (
                 <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} /> */}
       </>
     )
   },

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
+        // 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 => {
           return {
             ...item,
             children:
               item.children &&
               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 {
                   ...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({
+              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) {
           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: `${taskRecord.startTime}`,
+            text: `${sText}`,
             fontSize: 13,
             fontFamily: 'sans-serif',
             fill: textColor,
             boundsPadding: [10, 0, 0, 0],
-          opacity: taskRecord.status === 2 ? 0.3 : 1,
+            opacity: getOpacity(
+              taskRecord.start,
+              taskRecord.status,
+              subId,
+              happen.value
+            ),
           })
           container.add(start)
+        }
+
+        if (!subId) {
+          let eText=taskRecord.endTime
+          if(taskRecord.status != 2){
+            eText = eText.split(' ')[0]
+          }
           const end = new Text({
-          text: `${taskRecord.endTime}`,
+            text: `${eText}`,
             fontSize: 13,
             fontFamily: 'sans-serif',
             fill: textColor,
             boundsPadding: [10, 0, 0, 0],
-          opacity: taskRecord.status === 2 ? 0.3 : 1,
+            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日')
+              ? 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
   }
 }
 

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(

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() {
+      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"

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} />
+       
       </>
     )
   },

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 }
+}

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>
     )