From a2b20d4b56a0b430706234526a1aa709b3c4f91f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E4=BA=89=E9=B8=A3?= Date: Tue, 11 Mar 2025 08:53:58 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9B=A8=E8=BE=B05=E6=97=A5gantt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/baseConfig.js | 186 +-- src/api/Gantt/gantt.js | 26 + src/api/Gantt/index.js | 838 +++++++------ src/components/Tree/index.vue | 10 + src/js/Beam.js | 23 +- .../EventList/components/EventDdConfig.jsx | 188 +-- .../EventList/components/MainEventEdit.jsx | 210 ++-- .../EventList/components/SubEventEdit.jsx | 251 ++-- .../EventList/components/useEventDdConfig.jsx | 206 ++-- .../Gantt/components/EventList/hooks.jsx | 136 ++- .../Gantt/components/EventList/index.jsx | 556 +++++---- .../components/Gantt/components/VRender.jsx | 94 +- .../Gantt/components/Gantt/hooks/gantt.ts | 1061 +++++++++------- src/views/Gantt/components/Gantt/index.jsx | 139 ++- .../components/Gantt1/components/VRender.jsx | 47 + .../Gantt/components/Gantt1/hooks/gantt.ts | 452 +++++++ src/views/Gantt/components/Gantt1/index.jsx | 51 + .../components/Gantt2/components/VRender.jsx | 47 + .../Gantt/components/Gantt2/hooks/gantt.ts | 461 +++++++ src/views/Gantt/components/Gantt2/index.jsx | 66 + .../components/GanttEdit/hooks/ganttEdit.ts | 778 ++++++------ .../Gantt/components/GanttEdit/index.jsx | 58 +- .../Gantt/components/MainGantt/index.jsx | 123 +- .../Gantt/components/MainGantt1/index.jsx | 48 + .../Gantt/components/MainGantt2/index.jsx | 83 ++ .../Gantt/components/MainGanttEdit/index.jsx | 90 +- src/views/Gantt/components/SubGantt/index.jsx | 66 +- .../Gantt/components/SubGanttEdit/index.jsx | 66 +- .../TaskList/components/NewTask/hooks.ts | 30 +- .../TaskList/components/NewTask/index.jsx | 236 ++-- src/views/Gantt/components/TaskList/index.jsx | 344 +++--- src/views/Gantt/index copy.vue | 1062 ++++++++--------- src/views/Gantt/index.jsx | 333 +++--- src/views/Gantt/index.vue | 14 +- src/views/Mubiao/index.vue | 23 +- src/views/Satellite/hooks/satellite.ts | 32 +- src/views/Satellite/index.vue | 26 +- 37 files changed, 5152 insertions(+), 3308 deletions(-) mode change 100644 => 100755 public/baseConfig.js create mode 100755 src/api/Gantt/gantt.js mode change 100644 => 100755 src/api/Gantt/index.js mode change 100644 => 100755 src/views/Gantt/components/EventList/components/EventDdConfig.jsx mode change 100644 => 100755 src/views/Gantt/components/EventList/components/MainEventEdit.jsx mode change 100644 => 100755 src/views/Gantt/components/EventList/components/SubEventEdit.jsx mode change 100644 => 100755 src/views/Gantt/components/EventList/components/useEventDdConfig.jsx mode change 100644 => 100755 src/views/Gantt/components/EventList/hooks.jsx mode change 100644 => 100755 src/views/Gantt/components/EventList/index.jsx mode change 100644 => 100755 src/views/Gantt/components/Gantt/components/VRender.jsx mode change 100644 => 100755 src/views/Gantt/components/Gantt/hooks/gantt.ts mode change 100644 => 100755 src/views/Gantt/components/Gantt/index.jsx create mode 100755 src/views/Gantt/components/Gantt1/components/VRender.jsx create mode 100755 src/views/Gantt/components/Gantt1/hooks/gantt.ts create mode 100755 src/views/Gantt/components/Gantt1/index.jsx create mode 100755 src/views/Gantt/components/Gantt2/components/VRender.jsx create mode 100755 src/views/Gantt/components/Gantt2/hooks/gantt.ts create mode 100755 src/views/Gantt/components/Gantt2/index.jsx mode change 100644 => 100755 src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts mode change 100644 => 100755 src/views/Gantt/components/GanttEdit/index.jsx mode change 100644 => 100755 src/views/Gantt/components/MainGantt/index.jsx create mode 100755 src/views/Gantt/components/MainGantt1/index.jsx create mode 100755 src/views/Gantt/components/MainGantt2/index.jsx mode change 100644 => 100755 src/views/Gantt/components/MainGanttEdit/index.jsx mode change 100644 => 100755 src/views/Gantt/components/SubGantt/index.jsx mode change 100644 => 100755 src/views/Gantt/components/SubGanttEdit/index.jsx mode change 100644 => 100755 src/views/Gantt/components/TaskList/components/NewTask/hooks.ts mode change 100644 => 100755 src/views/Gantt/components/TaskList/components/NewTask/index.jsx mode change 100644 => 100755 src/views/Gantt/components/TaskList/index.jsx mode change 100644 => 100755 src/views/Gantt/index copy.vue mode change 100644 => 100755 src/views/Gantt/index.jsx mode change 100644 => 100755 src/views/Gantt/index.vue diff --git a/public/baseConfig.js b/public/baseConfig.js old mode 100644 new mode 100755 index 141a38599..b747cb9db --- a/public/baseConfig.js +++ b/public/baseConfig.js @@ -1,92 +1,94 @@ -window['settings'] = { - apis: '/taishiView', - textConfigs: [], - - baseMBDict: { - base: { - icon: './images/icons/base/党政首脑机关.png', - color: '#ea7354', - model: './models/基地.glb', - }, - airport: { - icon: './images/icons/base/军用机场.png', - color: '#80b1d3', - model: './models/机场.glb', - }, - port: { - icon: './images/icons/base/军用港口.png', - color: '#fcee82', - model: './models/港口.glb', - }, - station: { - icon: './images/icons/base/民用机场.png', - color: '#8dd3c7', - model: './models/雷达.glb', - }, - }, - mbCountryDict: { - 美国: '#fff', - 中国: '#d00', - 日本: '#dd0', - 韩国: '#00d', - }, - mbDict: { - 甲: { - icon: './images/icons/10-7600-0-侦察机.svg', - color: '#d00', - model: './models/IDF.glb', - payload: 'airplaneConic', - }, - 乙: { - icon: './images/icons/10-5900-0-航空母舰.svg', - color: '#ff0', - model: './models/驱逐舰2.glb', - payload: 'radar', - }, - 丙: { - icon: './images/icons/10-6100-0-驱逐舰.svg', - color: '#dd0', - model: './models/驱逐舰2.glb', - payload: 'radar', - }, - }, - - map: { - 1: { - url: 'https://rt2.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&scene=0&version=347', - tilingScheme: 'WebMercatorTilingScheme', - image: './images/map/1.png', - name: '黑色', - }, - 2: { - url: 'https://rt2.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=5&scene=0&version=347', - tilingScheme: 'WebMercatorTilingScheme', - image: './images/map/2.png', - name: '白色', - }, - 3: { - url: './resources/map/{z}/{x}/{y}.jpg', - tilingScheme: 'WebMercatorTilingScheme', - image: './images/map/3.jpg', - name: 'Arcgis', - }, - 4: { - url: 'http://192.168.10.201:2022/api/maptilecache/service/tms/1.0.0/img_globle1to9-PNG-4326@EPSG:4326@png/{z}/{x}/{reverseY}.png', - tilingScheme: 'GeographicTilingScheme', - image: './images/map/4.png', - name: '卫星影像', - }, - }, - - gantt: { - task: { label: '任务', color: 'error' }, - - dd: { label: '主体' }, - - mainEvent: { label: '主事件', color: 'success' }, - eventType: { label: '事件分类', color: 'info' }, - - subEvent: { label: '子事件', color: 'warning' }, - twoEvent: { label: '二级分类', color: 'warning' }, - }, -} +window['settings'] = { + apis: '/taishiView', + textConfigs: [], + + baseMBDict: { + base: { + icon: './images/icons/base/党政首脑机关.png', + color: '#ea7354', + model: './models/基地.glb', + }, + airport: { + icon: './images/icons/base/军用机场.png', + color: '#80b1d3', + model: './models/机场.glb', + }, + port: { + icon: './images/icons/base/军用港口.png', + color: '#fcee82', + model: './models/港口.glb', + }, + station: { + icon: './images/icons/base/民用机场.png', + color: '#8dd3c7', + model: './models/雷达.glb', + }, + }, + mbCountryDict: { + 美国: '#fff', + 中国: '#d00', + 日本: '#dd0', + 韩国: '#00d', + }, + mbDict: { + 甲: { + icon: './images/icons/10-7600-0-侦察机.svg', + color: '#d00', + model: './models/IDF.glb', + payload: 'airplaneConic', + }, + 乙: { + icon: './images/icons/10-5900-0-航空母舰.svg', + color: '#ff0', + model: './models/驱逐舰2.glb', + payload: 'radar', + }, + 丙: { + icon: './images/icons/10-6100-0-驱逐舰.svg', + color: '#dd0', + model: './models/驱逐舰2.glb', + payload: 'radar', + }, + }, + + map: { + 1: { + url: 'https://rt2.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&scene=0&version=347', + tilingScheme: 'WebMercatorTilingScheme', + image: './images/map/1.png', + name: '黑色', + }, + 2: { + url: 'https://rt2.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=5&scene=0&version=347', + tilingScheme: 'WebMercatorTilingScheme', + image: './images/map/2.png', + name: '白色', + }, + 3: { + url: './resources/map/{z}/{x}/{y}.jpg', + tilingScheme: 'WebMercatorTilingScheme', + image: './images/map/3.jpg', + name: 'Arcgis', + }, + 4: { + url: 'http://192.168.10.201:2022/api/maptilecache/service/tms/1.0.0/img_globle1to9-PNG-4326@EPSG:4326@png/{z}/{x}/{reverseY}.png', + tilingScheme: 'GeographicTilingScheme', + image: './images/map/4.png', + name: '卫星影像', + }, + }, + + gantt: { + task: { label: '任务', color: 'error' }, + + dd: { label: '主体' }, + + 1: { label: '主事件', color: 'success' }, + 2: { label: '事件分类', color: 'info' }, + + 3: { label: '二级分类', color: 'warning' }, + 4: { label: '子事件', color: 'warning' }, + }, + + imgServer: 'http://minio.yc.com:29990/professional-system', +} diff --git a/src/api/Gantt/gantt.js b/src/api/Gantt/gantt.js new file mode 100755 index 000000000..1140adb5c --- /dev/null +++ b/src/api/Gantt/gantt.js @@ -0,0 +1,26 @@ +import { defAxios as request } from '@/utils/http' +const baseUrl = `${window.settings.apis}/gantt` + + +export function getDDList() { + return request({ + url: `${baseUrl}/gantt/target-info/simp-list`, + method: 'get', + }) +} + +export function getMainGantt(data = {}) { + return request({ + url: `${baseUrl}/gantt/target-info/gantt-list`, + method: 'post', + data, + }) +} + +export function getSubGantt(params) { + return request({ + url: `${baseUrl}/gantt/activity-event/gantt-list`, + method: 'get', + params, + }) +} diff --git a/src/api/Gantt/index.js b/src/api/Gantt/index.js old mode 100644 new mode 100755 index 0a9f0bc2d..e544d9e02 --- a/src/api/Gantt/index.js +++ b/src/api/Gantt/index.js @@ -1,372 +1,466 @@ -const sub = [ - { - id: 0, - name: 'DD', - // start: '2024-11-15', - // end: '2024-11-21', - type: 'eventType', - children: [ - { - id: 122, - name: '弹道DD', - start: '2024-11-15', - end: '2024-11-17', - type: "twoEvent", - children: [ - { - id: 1, - name: '发射事件', - start: '2024-11-15', - end: '2024-11-17', - type: 'subEvent', - trajData: {}, - avatar: '/images/影像.jpg', - - }, - ], - }, - { - id: 188, - name: '巡航DD', - start: '2024-11-15', - end: '2024-11-17', - type: "twoEvent", - children: [ - { - id: 1, - name: '发射事件', - start: '2024-11-15', - end: '2024-11-17', - type: 'subEvent', - trajData: {}, - avatar: '/images/影像.jpg', - - }, - ], - }, - ], - - }, - { - id: 300, - name: '飞机', - type: 'eventType', - children: [ - { - id: 5, - name: '起飞', - start: '2024-11-18', - end: '2024-11-21', - type: 'subEvent', - avatar: '/images/影像.jpg', - }, - ], - }, - { - name: '舰船', - type: 'eventType', - children: [ - { - id: 6, - name: '停留', - start: '2024-11-20', - end: '2024-11-22', - type: 'subEvent', - avatar: '/images/影像.jpg', - }, - { - id: 7, - name: '扫描', - start: '2024-11-18', - end: '2024-11-19', - type: 'subEvent', - avatar: '/images/影像.jpg', - }, - ], - }, - - { - name: '航J', - type: 'eventType', - children: [ - { - id: 8, - name: '航J事件', - start: '2024-11-20', - end: '2024-11-21', - type: 'subEvent', - avatar: '/images/影像.jpg', - }, - { - id: 9, - name: '航J事件-2', - start: '2024-11-22', - end: '2024-11-26', - type: 'subEvent', - avatar: '/images/影像.jpg', - }, - ], - }, - { - name: 'xx', - type: 'eventType', - children: [ - { - id: 13, - name: 'xx-事件-1', - start: '2024-11-22', - end: '2024-11-25', - type: 'subEvent', - avatar: '/images/影像.jpg', - }, - { - id: 14, - name: 'xx-事件-2', - start: '2024-11-27', - end: '2024-11-30', - type: 'subEvent', - avatar: '/images/影像.jpg', - }, - ], - }, -] - -const main = [ - { - id: 0, - name: 'DD-1', - type: 'dd', - children: [ - { - id: 1, - name: '事件1-1', - start: '2024-11-15', - end: '2024-11-17', - type: 'mainEvent', - // children: [ - // { - // id: 122, - // name: '发射', - // start: '2024-11-15', - // end: '2024-11-17', - // type: 'DD', - // avatar: - // 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg', - // }, - // ], - children: sub, - }, - { - id: 2, - name: '事件1-2', - start: '2024-11-17', - end: '2024-11-18', - type: 'mainEvent', - }, - { - id: 3, - name: '事件1-3', - start: '2024-11-19', - end: '2024-11-20', - type: 'mainEvent', - }, - { - id: 4, - name: '事件1-4', - start: '2024-11-18', - end: '2024-11-19', - type: 'mainEvent', - }, - ], - }, - { - id: 300, - name: 'DD-2', - children: [ - { - id: 5, - name: '事件-2-1', - start: '2024-11-18', - end: '2024-11-21', - type: 'mainEvent', - }, - ], - }, - { - name: 'DD-3', - children: [ - { - id: 6, - name: '事件-3-1', - start: '2024-11-21', - end: '2024-11-22', - type: 'mainEvent', - }, - { - id: 7, - name: '事件-3-2', - start: '2024-11-18', - end: '2024-11-19', - type: 'mainEvent', - }, - ], - }, - - { - name: 'DD-4', - children: [ - { - id: 8, - name: '事件-4-1', - start: '2024-11-20', - end: '2024-11-21', - type: 'mainEvent', - }, - { - id: 9, - name: '事件-4-2', - start: '2024-11-25', - end: '2024-11-26', - type: 'mainEvent', - }, - { - id: 10, - name: '事件-4-3', - start: '2024-11-17', - end: '2024-11-18', - type: 'mainEvent', - }, - { - id: 11, - name: '事件-4-4', - start: '2024-11-22', - end: '2024-11-25', - type: 'mainEvent', - }, - { - id: 12, - name: '事件-4-5', - start: '2024-11-23', - end: '2024-11-24', - type: 'mainEvent', - }, - ], - }, - { - name: 'DD-5', - children: [ - { - id: 13, - name: '事件-5-1', - start: '2024-11-22', - end: '2024-11-25', - type: 'mainEvent', - }, - { - id: 14, - name: '事件-5-2', - start: '2024-11-27', - end: '2024-11-30', - type: 'mainEvent', - }, - { - id: 15, - name: '事件-5-3', - start: '2024-12-10', - end: '2024-12-18', - type: 'mainEvent', - }, - ], - }, - { - name: 'DD-6', - children: [ - { - id: 16, - name: '事件-6-1', - start: '2024-11-20', - end: '2024-11-30', - type: 'mainEvent', - }, - { - id: 17, - name: '事件-6-2', - start: '2024-12-02', - end: '2024-12-18', - type: 'mainEvent', - }, - ], - }, - { - name: 'DD-7', - children: [ - { - id: 18, - name: '事件-7-1', - start: '2024-12-22', - end: '2024-12-28', - type: 'mainEvent', - }, - ], - }, - { - name: 'DD-8', - children: [ - { - id: 19, - name: '事件-8-1', - start: '2024-11-25', - end: '2024-11-30', - type: 'mainEvent', - }, - { - id: 20, - name: '事件-8-2', - start: '2024-12-01', - end: '2024-12-18', - type: 'mainEvent', - }, - ], - }, -] - -const task = [ - { - id: 1, - name: '任务-1', - type: 'task', - children: main, - }, -] - -export function getMainGantt(data = {}) { - return new Promise((resolve, reject) => { - setTimeout(() => { - resolve(main) - }, 200) - }) -} - -export function getEventListByDDType(ddType) { - return new Promise((resolve, reject) => { - setTimeout(() => { - resolve(main.find(item => item.name === ddType)) - }, 200) - }) -} - -export function getSubGantt(subId) { - return new Promise((resolve, reject) => { - setTimeout(() => { - resolve(sub) - }, 200) - }) -} - -export function getTask() { - return new Promise((resolve, reject) => { - setTimeout(() => { - resolve(task) - }, 200) - }) -} +const sub = [ + { + id: 0, + name: 'DD', + // start: '2024-11-15', + // end: '2024-11-21', + type: 'eventType', + children: [ + { + id: 122, + name: '弹道DD', + start: '2024-11-15', + end: '2024-11-17', + type: 'twoEvent', + children: [ + { + id: 1, + name: '发射事件', + start: '2024-11-15', + end: '2024-11-17', + type: 'subEvent', + trajData: {}, + avatar: '/images/影像.jpg', + }, + ], + }, + { + id: 188, + name: '巡航DD', + start: '2024-11-15', + end: '2024-11-17', + type: 'twoEvent', + children: [ + { + id: 1, + name: '发射事件', + start: '2024-11-15', + end: '2024-11-17', + type: 'subEvent', + trajData: {}, + avatar: '/images/影像.jpg', + }, + ], + }, + ], + }, + { + id: 300, + name: '飞机', + type: 'eventType', + children: [ + { + id: 5, + name: '起飞', + start: '2024-11-18', + end: '2024-11-21', + type: 'subEvent', + avatar: '/images/影像.jpg', + }, + ], + }, + { + name: '舰船', + type: 'eventType', + children: [ + { + id: 6, + name: '停留', + start: '2024-11-20', + end: '2024-11-22', + type: 'subEvent', + avatar: '/images/影像.jpg', + }, + { + id: 7, + name: '扫描', + start: '2024-11-18', + end: '2024-11-19', + type: 'subEvent', + avatar: '/images/影像.jpg', + }, + ], + }, + + { + name: '航J', + type: 'eventType', + children: [ + { + id: 8, + name: '航J事件', + start: '2024-11-20', + end: '2024-11-21', + type: 'subEvent', + avatar: '/images/影像.jpg', + }, + { + id: 9, + name: '航J事件-2', + start: '2024-11-22', + end: '2024-11-26', + type: 'subEvent', + avatar: '/images/影像.jpg', + }, + ], + }, + { + name: 'xx', + type: 'eventType', + children: [ + { + id: 13, + name: 'xx-事件-1', + start: '2024-11-22', + end: '2024-11-25', + type: 'subEvent', + avatar: '/images/影像.jpg', + }, + { + id: 14, + name: 'xx-事件-2', + start: '2024-11-27', + end: '2024-11-30', + type: 'subEvent', + avatar: '/images/影像.jpg', + }, + ], + }, +] + +const main = [ + { + id: 0, + name: 'DD-1', + type: 'dd', + children: [ + { + id: 1, + name: '事件1-1', + start: '2024-11-15', + end: '2024-11-17', + type: 'mainEvent', + // children: [ + // { + // id: 122, + // name: '发射', + // start: '2024-11-15', + // end: '2024-11-17', + // type: 'DD', + // avatar: + // 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg', + // }, + // ], + children: sub, + }, + { + id: 2, + name: '事件1-2', + start: '2024-11-17', + end: '2024-11-18', + type: 'mainEvent', + }, + { + id: 3, + name: '事件1-3', + start: '2024-11-19', + end: '2024-11-20', + type: 'mainEvent', + }, + { + id: 4, + name: '事件1-4', + start: '2024-11-18', + end: '2024-11-19', + type: 'mainEvent', + }, + ], + }, + { + id: 300, + name: 'DD-2', + children: [ + { + id: 5, + name: '事件-2-1', + start: '2024-11-18', + end: '2024-11-21', + type: 'mainEvent', + }, + ], + }, + { + name: 'DD-3', + children: [ + { + id: 6, + name: '事件-3-1', + start: '2024-11-21', + end: '2024-11-22', + type: 'mainEvent', + }, + { + id: 7, + name: '事件-3-2', + start: '2024-11-18', + end: '2024-11-19', + type: 'mainEvent', + }, + ], + }, + + { + name: 'DD-4', + children: [ + { + id: 8, + name: '事件-4-1', + start: '2024-11-20', + end: '2024-11-21', + type: 'mainEvent', + }, + { + id: 9, + name: '事件-4-2', + start: '2024-11-25', + end: '2024-11-26', + type: 'mainEvent', + }, + { + id: 10, + name: '事件-4-3', + start: '2024-11-17', + end: '2024-11-18', + type: 'mainEvent', + }, + { + id: 11, + name: '事件-4-4', + start: '2024-11-22', + end: '2024-11-25', + type: 'mainEvent', + }, + { + id: 12, + name: '事件-4-5', + start: '2024-11-23', + end: '2024-11-24', + type: 'mainEvent', + }, + ], + }, + { + name: 'DD-5', + children: [ + { + id: 13, + name: '事件-5-1', + start: '2024-11-22', + end: '2024-11-25', + type: 'mainEvent', + }, + { + id: 14, + name: '事件-5-2', + start: '2024-11-27', + end: '2024-11-30', + type: 'mainEvent', + }, + { + id: 15, + name: '事件-5-3', + start: '2024-12-10', + end: '2024-12-18', + type: 'mainEvent', + }, + ], + }, + { + name: 'DD-6', + children: [ + { + id: 16, + name: '事件-6-1', + start: '2024-11-20', + end: '2024-11-30', + type: 'mainEvent', + }, + { + id: 17, + name: '事件-6-2', + start: '2024-12-02', + end: '2024-12-18', + type: 'mainEvent', + }, + ], + }, + { + name: 'DD-7', + children: [ + { + id: 18, + name: '事件-7-1', + start: '2024-12-22', + end: '2024-12-28', + type: 'mainEvent', + }, + ], + }, + { + name: 'DD-8', + children: [ + { + id: 19, + name: '事件-8-1', + start: '2024-11-25', + end: '2024-11-30', + type: 'mainEvent', + }, + { + id: 20, + name: '事件-8-2', + start: '2024-12-01', + end: '2024-12-18', + type: 'mainEvent', + }, + ], + }, +] + +const task = [ + { + id: 1, + name: '任务-1', + type: 'task', + children: main, + }, +] + +export function getMainGantt(data = {}) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(main) + }, 200) + }) +} + +export function getEventListByDDType(ddType) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(main.find(item => item.name === ddType)) + }, 200) + }) +} + +export function getSubGantt(subId) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(sub) + }, 200) + }) +} + +export function getTask() { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(task) + }, 200) + }) +} + +import { defAxios as request } from '@/utils/http' +const baseUrl = window.settings.apis + '/gantt' +// export function getHangjing(data = {}) { +// return request({ +// url: `${baseUrl}/hangjing/list`, +// method: 'post', +// data, +// }) +// } + +export function getSimpList() { + return request({ + url: `${baseUrl}/gantt/target-info/simp-list`, + method: 'get', + }) +} + +export function getSimpTreeList(data) { + return request({ + url: `${baseUrl}/gantt/target-activity/tree-list`, + method: 'post', + data, + }) +} + +export function addSimp(data) { + return request({ + url: `${baseUrl}/gantt/target-activity/create`, + method: 'post', + data, + }) +} + +export function updateSimp(data) { + return request({ + url: `${baseUrl}/gantt/target-activity/update`, + method: 'put', + data, + }) +} + +export function uploadImage(data) { + return request({ + url: `${baseUrl}/platform/sys/file/sync/upload`, + method: 'post', + data, + }) +} + +export function deleteSimp(params) { + return request({ + url: `${baseUrl}/gantt/target-activity/delete`, + method: 'delete', + params, + }) +} + +export function getSon(params) { + return request({ + url: `${baseUrl}/gantt/activity-event/get`, + method: 'get', + params, + }) +} + +export function addSon(data) { + return request({ + url: `${baseUrl}/gantt/activity-event/create`, + method: 'post', + data, + }) +} + +export function updateSon(data) { + return request({ + url: `${baseUrl}/gantt/activity-event/update`, + method: 'put', + data, + }) +} + +export function getTwoClass(params) { + return request({ + url: `${baseUrl}/gantt/data-type/list`, + method: 'get', + params, + }) +} + +export function deleteSon(params) { + return request({ + url: `${baseUrl}/gantt/activity-event/delete`, + method: 'delete', + params, + }) +} diff --git a/src/components/Tree/index.vue b/src/components/Tree/index.vue index 09d948f19..c0fb1955c 100644 --- a/src/components/Tree/index.vue +++ b/src/components/Tree/index.vue @@ -38,6 +38,10 @@ const props = defineProps({ type: Boolean, default: true, }, + nodeClick: { + type: Function as (key: string) => void, + default: undefined, + }, }) const searchValue = ref('') @@ -48,6 +52,11 @@ const updateChecked = (keys: Array) => { checkedKeys.value = keys } +const updateSelected = (key: Array) => { + // nodeClick && nodeClick(props.data.find(item => item[props.keyField] === keys[0])) + props.nodeClick && props.nodeClick(key) +} + // watch( // () => props.defaultCheckedKeys, // val => { @@ -86,6 +95,7 @@ const updateChecked = (keys: Array) => { :node-props="nodeProps" :render-suffix="renderSuffix" :render-label="renderLabel" + @update:selected-keys="updateSelected" /> diff --git a/src/js/Beam.js b/src/js/Beam.js index c3693f94c..f91e166aa 100644 --- a/src/js/Beam.js +++ b/src/js/Beam.js @@ -132,8 +132,16 @@ export class Beam { }) this.beamEntity = cylinder - // const that = this + let currentTime = 0 this._listener = (scene, time) => { + const timeStamp = Cesium.JulianDate.toDate(time).getTime() + const deltaTime = timeStamp - currentTime + + if (deltaTime <= 100) { + return + } + currentTime = timeStamp + if (!this.beamEntity) { return } @@ -144,11 +152,8 @@ export class Beam { if (!topPosition) { return } - // console.log(topPosition, 'topPosition') let bottomPosition = this.bottomEntity.position._value - // console.log(bottomPosition, 'bottomPosition') this.centerPoint = this._getCenterPoint(topPosition, bottomPosition) - // console.log(this.centerPoint, 'centerPoint') this.beamEntity.position = this.centerPoint this.distance = this._getDistance(topPosition, bottomPosition) this.beamEntity.cylinder.length = this.distance @@ -156,14 +161,12 @@ export class Beam { const orientation = this._getOrientation(bottomPosition, topPosition) this.beamEntity.orientation = orientation - console.log('1') - // throw new Error('TODO: Beam.js:26 Uncaught Error: TODO: Beam.js:26') } - // viewer.scene.preRender.addEventListener(this._listener) - setInterval(() => { - this._listener(viewer.scene, viewer.clock.currentTime) - }, 100) + viewer.scene.preRender.addEventListener(this._listener) + // setInterval(() => { + // this._listener(viewer.scene, viewer.clock.currentTime) + // }, 100) } _getCenterPoint(t, b) { diff --git a/src/views/Gantt/components/EventList/components/EventDdConfig.jsx b/src/views/Gantt/components/EventList/components/EventDdConfig.jsx old mode 100644 new mode 100755 index 6c6d5514d..76698f59b --- a/src/views/Gantt/components/EventList/components/EventDdConfig.jsx +++ b/src/views/Gantt/components/EventList/components/EventDdConfig.jsx @@ -1,94 +1,94 @@ -import { NTabs, NTabPane, NButton, NScrollbar } from 'naive-ui' -import TrajTable from '@/views/Daodan/components/TrajTable' - -import TrajUpload from '@/views/Daodan/components/TrajUpload' - -import { useEventDdConfig } from './useEventDdConfig' - -const panels = ['手动配置', 'STK轨迹文件配置'] -export default defineComponent({ - name: 'EventDaodan', - props: { - data: { - type: Object, - default: () => ({}), - }, - }, - setup() { - const name = ref('手动配置') - - const { trajData, interceptData, addIntercept } = useEventDdConfig() - - // const { trajData, interceptData, updateInterceptData } = useEvent() - const removeIntercept = id => { - interceptData.value.splice( - interceptData.value.findIndex(item => item.id === id), - 1 - ) - } - const showOrHideDdConfig = () => {} - return () => ( -
- - {panels.map(panel => ( - - -
-
- {panel === '手动配置' ? ( - <> -
- -
-
- {interceptData.value.map(data => ( - - ))} -
- - 添加拦截 - -
-
- - ) : ( - <> - - - - )} -
-
- - - ))} - -
- - 确认 - - showOrHideDdConfig({})}>取消 -
-
- ) - }, -}) +import { NTabs, NTabPane, NButton, NScrollbar } from 'naive-ui' +import TrajTable from '@/views/Daodan/components/TrajTable' + +import TrajUpload from '@/views/Daodan/components/TrajUpload' + +import { useEventDdConfig } from './useEventDdConfig' + +const panels = ['手动配置', 'STK轨迹文件配置'] +export default defineComponent({ + name: 'EventDaodan', + props: { + data: { + type: Object, + default: () => ({}), + }, + }, + setup() { + const name = ref('手动配置') + + const { trajData, interceptData, addIntercept } = useEventDdConfig() + + // const { trajData, interceptData, updateInterceptData } = useEvent() + const removeIntercept = id => { + interceptData.value.splice( + interceptData.value.findIndex(item => item.id === id), + 1 + ) + } + const showOrHideDdConfig = () => {} + return () => ( +
+ + {panels.map(panel => ( + + +
+
+ {panel === '手动配置' ? ( + <> +
+ +
+
+ {interceptData.value.map(data => ( + + ))} +
+ + 添加拦截 + +
+
+ + ) : ( + <> + + + + )} +
+
+ + + ))} + +
+ + 确认 + + showOrHideDdConfig({})}>取消 +
+
+ ) + }, +}) diff --git a/src/views/Gantt/components/EventList/components/MainEventEdit.jsx b/src/views/Gantt/components/EventList/components/MainEventEdit.jsx old mode 100644 new mode 100755 index ceefac5d4..6e6470263 --- a/src/views/Gantt/components/EventList/components/MainEventEdit.jsx +++ b/src/views/Gantt/components/EventList/components/MainEventEdit.jsx @@ -1,80 +1,130 @@ -import { - NForm, - NFormItem, - NInput, - NButton, - NDatePicker, - NUpload, -} from 'naive-ui' -import ModalCom from '@/components/Modal/index.vue' -import { useEvent } from '../hooks' -export default defineComponent({ - // props: { - // show: { - // type: Boolean, - // default: false, - // }, - // }, - setup() { - const { showMainEvent, mainEventData } = useEvent() - - const close = () => { - showMainEvent.value = false - } - - watch( - [ - () => mainEventData.value.start, - () => mainEventData.value.end, - () => mainEventData.value.avatar, - ], - ([start, end, avatar]) => { - timeRange.value = start ? [start, end] : null - uploadImg.value = [ - { - url: avatar, - status: 'finished', - }, - ] - } - ) - - const timeRange = ref(null) - const uploadImg = ref([]) - - return () => ( - - - - - - - - - - - - -
- 取消 - - 确认 - -
- - ) - }, -}) +import { + NForm, + NFormItem, + NInput, + NButton, + NDatePicker, + NUpload, +} from 'naive-ui' +import ModalCom from '@/components/Modal/index.vue' +import { useEvent } from '../hooks' +import { addSimp, updateSimp, uploadImage } from '@/api/Gantt' +export default defineComponent({ + // props: { + // show: { + // type: Boolean, + // default: false, + // }, + // }, + setup() { + const imageValue = ref() + const { + universalRules, + showMainEvent, + mainEventData, + targetId, + searchTreeList, + } = useEvent() + + const close = () => { + showMainEvent.value = false + } + const changeFile = async file => { + console.log(uploadImg) + const formData = new FormData() + formData.append('file', file.file.file) + const res = await uploadImage(formData) + imageValue.value = res.data.path + } + const sure = async () => { + const data = { + ...mainEventData.value, + targetId: targetId.value, + fileUrl: imageValue.value, + startTime: new Date(timeRange.value[0]).toISOString(), + endTime: new Date(timeRange.value[0]).toISOString(), + } + + const res = mainEventData.value.id + ? await updateSimp(data) + : await addSimp(data) + if (res.code === 200) { + showMainEvent.value = false + searchTreeList() + } + } + + watch( + [ + () => mainEventData.value.startTime, + () => mainEventData.value.endTime, + () => mainEventData.value.fileUrl, + ], + ([start, end, fileUrl]) => { + timeRange.value = start + ? [new Date(start).getTime(), new Date(end).getTime()] + : null + if (fileUrl) { + uploadImg.value = [ + { + id: '1', + name: fileUrl, + url: `${window.settings.imgServer}${fileUrl}`, + status: 'finished', + }, + ] + } + } + ) + + const timeRange = ref(null) + const uploadImg = ref([]) + // const desc = ref () + + return () => ( + + + + + + + + + + + + + + + +
+ 取消 + + 确认 + +
+ + ) + }, +}) diff --git a/src/views/Gantt/components/EventList/components/SubEventEdit.jsx b/src/views/Gantt/components/EventList/components/SubEventEdit.jsx old mode 100644 new mode 100755 index 5caaefac1..0c7fb875b --- a/src/views/Gantt/components/EventList/components/SubEventEdit.jsx +++ b/src/views/Gantt/components/EventList/components/SubEventEdit.jsx @@ -1,96 +1,155 @@ -import { - NForm, - NFormItem, - NInput, - NButton, - NDatePicker, - NUpload, - NSelect, -} from 'naive-ui' -import ModalCom from '@/components/Modal/index.vue' -import { useEvent } from '../hooks' -export default defineComponent({ - // props: { - // show: { - // type: Boolean, - // default: false, - // }, - // }, - setup() { - const { showNewEvent, eventData } = useEvent() - - const close = () => { - showNewEvent.value = false - } - - watch( - [ - () => eventData.value.start, - () => eventData.value.end, - () => eventData.value.avatar, - ], - ([start, end, avatar]) => { - timeRange.value = start ? [start, end] : null - uploadImg.value = [ - { - url: avatar, - status: 'finished', - }, - ] - } - ) - - const timeRange = ref(null) - const uploadImg = ref([]) - const value1 = ref(null) - const value2 = ref(null) - const value3 = ref(null) - - return () => ( - - - - - - - - - - - - - - - - - - - - - -
- 取消 - - 确认 - -
- - ) - }, -}) +import { + NForm, + NFormItem, + NInput, + NButton, + NDatePicker, + NUpload, + NSelect, +} from 'naive-ui' +import ModalCom from '@/components/Modal/index.vue' +import { useEvent } from '../hooks' +import { addSon, updateSon, uploadImage } from '@/api/gantt' +export default defineComponent({ + // props: { + // show: { + // type: Boolean, + // default: false, + // }, + // }, + setup() { + const { + showNewEvent, + eventData, + sonOptions, + oneClassData, + searchTreeList, + } = useEvent() + const imageValue = ref() + const close = () => { + showNewEvent.value = false + } + const changeFile = async file => { + const formData = new FormData() + formData.append('file', file.file.file) + const res = await uploadImage(formData) + imageValue.value = res.data.path + } + const sure = async () => { + const data = { + // id: eventData.value.id ?? null, + // activityId: oneClassData.value.activityId ?? null, + // name: eventData.value.name, + activityId: oneClassData.value?.pid ?? null, + oneType: oneClassData.value?.id, + ...eventData.value, + twoType: twoTypeId.value, + fileUrl: imageValue.value, + startTime: new Date(timeRange.value[0]).toISOString(), + endTime: new Date(timeRange.value[1]).toISOString(), + } + // console.log(data, 'data') + const res = eventData.value.id + ? await updateSon(data) + : await addSon(data) + if (res.code === 200) { + showNewEvent.value = false + searchTreeList() + } + } + + watch( + [ + () => eventData.value.startTime, + () => eventData.value.endTime, + () => eventData.value.fileUrl, + () => eventData.value.twoType, + ], + ([start, end, fileUrl, twoType]) => { + timeRange.value = start + ? [new Date(start).getTime(), new Date(end).getTime()] + : null + if (fileUrl) { + uploadImg.value = [ + { + id: fileUrl, + name: fileUrl, + url: `${window.settings.imgServer}${fileUrl}`, + status: 'finished', + }, + ] + console.log(uploadImg.value) + } + console.log(twoType, 'twoType') + + twoType && (twoTypeId.value = twoType) + } + ) + + const timeRange = ref(null) + const uploadImg = ref([]) + const twoTypeId = ref(null) + + return () => ( + + + + + + {/* + + + + + */} + + + + + + + + + + + + + + + + + + + +
+ 取消 + + 确认 + +
+ + ) + }, +}) diff --git a/src/views/Gantt/components/EventList/components/useEventDdConfig.jsx b/src/views/Gantt/components/EventList/components/useEventDdConfig.jsx old mode 100644 new mode 100755 index a3c5f65a4..6acc3786e --- a/src/views/Gantt/components/EventList/components/useEventDdConfig.jsx +++ b/src/views/Gantt/components/EventList/components/useEventDdConfig.jsx @@ -1,103 +1,103 @@ -export const useEventDdConfig = () => { - const trajData = ref({ - id: 'dd', - data: [ - { - name: '起始点', - lon: 120, - lat: 21, - alt: 0, - time: 1183135260000, - }, - { - name: '中间特征点', - lon: 122, - lat: 21, - alt: 1000000, - time: 1183135265000, - detached: true, - }, - { - name: '中间特征点', - lon: 124, - lat: 21, - alt: 1500000, - time: 1183135270000, - detached: true, - }, - { - name: '中间特征点', - lon: 128, - lat: 21, - alt: 2000000, - time: 1183135280000, - detached: true, - }, - { - name: '落点', - lon: 135, - lat: 21, - alt: 1500000, - time: 1183135290000, - }, - ], - }) - const interceptData = ref([ - { - id: 'dd1', - data: [ - { - name: '起始点', - lon: 137, - lat: 25, - alt: 0, - time: 1183135270000, - }, - { - name: '中间特征点', - lon: 138, - lat: 24, - alt: 1000000, - time: 1183135280000, - detached: true, - }, - { - name: '落点', - lon: 135, - lat: 21, - alt: 1500000, - time: 1183135290000, - }, - ], - }, - ]) - - function addIntercept() { - // 添加拦截d - interceptData.value.push({ - data: [ - { - name: '起始点', - lon: 120, - lat: 21, - alt: 0, - time: 1183135260000, - }, - { - name: '中间特征点', - lon: 120, - lat: 21, - alt: 0, - time: 1183135260000, - detached: false, - }, - trajData.value.data.at(-1), - ], - }) - } - return { - trajData, - interceptData, - addIntercept, - } -} +export const useEventDdConfig = () => { + const trajData = ref({ + id: 'dd', + data: [ + { + name: '起始点', + lon: 120, + lat: 21, + alt: 0, + time: 1183135260000, + }, + { + name: '中间特征点', + lon: 122, + lat: 21, + alt: 1000000, + time: 1183135265000, + detached: true, + }, + { + name: '中间特征点', + lon: 124, + lat: 21, + alt: 1500000, + time: 1183135270000, + detached: true, + }, + { + name: '中间特征点', + lon: 128, + lat: 21, + alt: 2000000, + time: 1183135280000, + detached: true, + }, + { + name: '落点', + lon: 135, + lat: 21, + alt: 1500000, + time: 1183135290000, + }, + ], + }) + const interceptData = ref([ + { + id: 'dd1', + data: [ + { + name: '起始点', + lon: 137, + lat: 25, + alt: 0, + time: 1183135270000, + }, + { + name: '中间特征点', + lon: 138, + lat: 24, + alt: 1000000, + time: 1183135280000, + detached: true, + }, + { + name: '落点', + lon: 135, + lat: 21, + alt: 1500000, + time: 1183135290000, + }, + ], + }, + ]) + + function addIntercept() { + // 添加拦截d + interceptData.value.push({ + data: [ + { + name: '起始点', + lon: 120, + lat: 21, + alt: 0, + time: 1183135260000, + }, + { + name: '中间特征点', + lon: 120, + lat: 21, + alt: 0, + time: 1183135260000, + detached: false, + }, + trajData.value.data.at(-1), + ], + }) + } + return { + trajData, + interceptData, + addIntercept, + } +} diff --git a/src/views/Gantt/components/EventList/hooks.jsx b/src/views/Gantt/components/EventList/hooks.jsx old mode 100644 new mode 100755 index 5b5c5af1e..53bf3d850 --- a/src/views/Gantt/components/EventList/hooks.jsx +++ b/src/views/Gantt/components/EventList/hooks.jsx @@ -1,30 +1,106 @@ -import { generateId } from '@/utils/id' - -const showMainEvent = ref(false) - -const mainEventData = ref({ - name: '', - start: '', - end: '', - type: 'mainEvent', - avatar: '', -}) - -const showNewEvent = ref(false) - -const eventData = ref({ - name: '', - start: '', - end: '', - avatar: '', - type: 'subEvent', -}) - -export const useEvent = () => { - return { - showMainEvent, - mainEventData, - showNewEvent, - eventData, - } -} +import { getSimpTreeList, getTwoClass } from '@/api/Gantt' + +const universalRules = { + name: { required: true, message: '请输入', trigger: 'blur' }, + startTime: { required: true, message: '请输入', trigger: 'blur' }, +} +const showMainEvent = ref(false) + +watch(showMainEvent, show => { + if (!show) { + resetMainEventData() + } +}) + +const mainEventData = ref({ + name: '', + startTime: '', + endTime: '', + // type: 'mainEvent', + describe: '', + fileUrl: '', +}) + +function resetMainEventData() { + mainEventData.value = ref({ + name: '', + startTime: '', + endTime: '', + // type: 'mainEvent', + describe: '', + fileUrl: '', + }) +} + +const targetId = ref(null) +const range = ref([new Date('2000-01-01').getTime(), Date.now()]) + +const showNewEvent = ref(false) + +watch(showNewEvent, show => { + if (!show) { + oneClassData.value = null + resetEventData() + } +}) + +const eventData = ref({ + name: '', + startTime: '', + endTime: '', + fileUrl: '', + describe: '', + equipModel: '', + reportSite: '', + // type: 'subEvent', +}) + +function resetEventData() { + eventData.value = ref({ + name: '', + startTime: '', + endTime: '', + fileUrl: '', + describe: '', + equipModel: '', + reportSite: '', + }) +} + +const tableData = ref([]) + +const oneClassData = ref(null) +async function searchTreeList() { + tableData.value = [] + + const res = await getSimpTreeList({ + targetId: targetId.value, + startTime: new Date(range.value[0]).toISOString(), + endTime: new Date(range.value[1]).toISOString(), + }) + tableData.value = res.data.list + // console.log('searchTreeList', tableData) +} + +const sonOptions = ref([]) +async function getTwoClassList(oneTypeId) { + const res = await getTwoClass({ oneType: oneTypeId }) + sonOptions.value = res.data.list +} +// const getSonList = async() +export const useEvent = () => { + return { + universalRules, + showMainEvent, + mainEventData, + showNewEvent, + eventData, + targetId, + searchTreeList, + tableData, + range, + oneClassData, + sonOptions, + getTwoClassList, + } +} diff --git a/src/views/Gantt/components/EventList/index.jsx b/src/views/Gantt/components/EventList/index.jsx old mode 100644 new mode 100755 index 67beceb21..c395300c8 --- a/src/views/Gantt/components/EventList/index.jsx +++ b/src/views/Gantt/components/EventList/index.jsx @@ -1,260 +1,296 @@ -import { NDataTable, NIcon, NButton, useDialog, NTag } from 'naive-ui' -import { getEventListByDDType } from '@/api/gantt' -import { useTree } from '@/utils/tree' -import { - HelpCircleOutline, - CreateOutline, - TrashBinOutline, - AddCircleOutline, - EnterOutline, -} from '@vicons/ionicons5' - -import MainEventEdit from './components/MainEventEdit' -import SubEventEdit from './components/SubEventEdit' - -import EventDdConfig from './components/EventDdConfig' - -import { useEvent } from './hooks' - -export default defineComponent({ - props: { - dd: { - type: String, - require: true, - }, - }, - setup(props) { - const { showMainEvent, mainEventData, showNewEvent, eventData } = useEvent() - const dict = window.settings.gantt - const columns = [ - { - title: '事件名称', - key: 'name', - width: 'auto', - render: row => { - return ( -
- {/* - - */} - - {dict[row.type].label} - - {row.name} -
- ) - }, - }, - { - title: '开始时间', - key: 'start', - }, - { - title: '结束时间', - key: 'end', - }, - // { - // title: '类型', - // key: 'type', - // render(row) { - // return ( - // - // {dict[row.type].label} - // - // ) - // }, - // }, - { - title: '图片', - key: 'avatar', - render(row) { - if (row.avatar) { - return - } else { - return - - } - }, - }, - { - title: '操作', - key: 'action', - render(row, rowIndex) { - // console.log(row, rowIndex) - return ( -
- {row.type === 'mainEvent' && ( - editMainEvent(row)} - > - - - - 编辑事件 - - )} - {row.type === 'twoEvent' ? ( - addSubEvent(row)} - > - - - - 添加子事件 - - ) : null} - {row.type === 'isDD' && ( - editSubEvent(row)} - > - - - - 编辑子事件 - - )} - {Reflect.has(row, 'trajData') && ( - ddConfig(row)} - > - - - - 编辑DD轨迹 - - )} - {row.type === 'subEvent' && ( - editSubEvent(row)} - > - - - - 编辑子事件 - - )} - {row.type !== 'eventType' ? ( - deleteEvent(row)} - > - - - - - ) : ( - <> - )} -
- ) - }, - }, - ] - - function editMainEvent(row) { - showMainEvent.value = true - mainEventData.value = row - } - - function addSubEvent(row) { - showNewEvent.value = true - } - - function editSubEvent(row) { - showNewEvent.value = true - eventData.value = row - } - - const dialog = useDialog() - function deleteEvent(row) { - dialog.warning({ - title: '删除事件', - content: `确定删除事件 ${row.name} 吗？`, - positiveText: '确定', - negativeText: '取消', - onPositiveClick: async () => { - // await deleteEventById(row.id) - // getEventList() - }, - }) - } - - function ddConfig(row) { - console.log(row) - dialog.create({ - style: 'width:auto;height:90vh', - maskClosable: false, - class: 'flex flex-col', - title: 'DD轨迹', - contentClass: 'flex-1 h-0', - content: () => , - // positiveText: '确定', - // negativeText: '取消', - // onPositiveClick: () => {}, - }) - } - - const tableData = ref([]) - onMounted(async () => { - await getEventList() - }) - - const { getAllKeys } = useTree() - const expandedRowKeys = ref([]) - async function getEventList() { - const res = await getEventListByDDType(props.dd) - tableData.value = res.children - expandedRowKeys.value = getAllKeys(tableData.value, 'name') - } - - watch( - () => props.dd, - async () => { - getEventList() - } - ) - - return () => ( - <> - row.name} - /> - - - - - ) - }, -}) +import { NDataTable, NIcon, NButton, useDialog, NTag } from 'naive-ui' +import { + getEventListByDDType, + deleteSimp, + getTwoClass, + deleteSon, +} from '@/api/gantt' +import { useTree } from '@/utils/tree' +import { + HelpCircleOutline, + CreateOutline, + TrashBinOutline, + AddCircleOutline, + EnterOutline, +} from '@vicons/ionicons5' + +import { cloneDeep } from 'es-toolkit' + +import MainEventEdit from './components/MainEventEdit' +import SubEventEdit from './components/SubEventEdit' + +import EventDdConfig from './components/EventDdConfig' + +import { useEvent } from './hooks' + +export default defineComponent({ + props: { + dd: { + type: Number, + require: true, + }, + tableData: { + type: Array, + require: true, + }, + }, + setup(props) { + const { + showMainEvent, + mainEventData, + showNewEvent, + eventData, + searchTreeList, + oneClassData, + // sonOptions, + getTwoClassList, + } = useEvent() + const dict = window.settings.gantt + const columns = [ + { + title: '事件名称', + key: 'name', + // width: 'auto', + render: row => { + return ( +
+ {/* + + */} + + {dict[row.level].label} + + {row.name} +
+ ) + }, + }, + { + title: '开始时间', + key: 'startTime', + width: '300', + }, + { + title: '结束时间', + key: 'endTime', + width: '300', + }, + // { + // title: '类型', + // key: 'type', + // render(row) { + // return ( + // + // {dict[row.type].label} + // + // ) + // }, + // }, + { + title: '图片', + key: 'filePath', + width: '200', + render(row) { + if (row.fileUrl) { + return ( + + ) + } else { + return - + } + }, + }, + { + title: '操作', + key: 'action', + width: '240', + render(row, rowIndex) { + // console.log(row, rowIndex) + return ( +
+ {row.level === 1 && ( + editMainEvent(row)} + > + + + + 编辑事件 + + )} + {row.level === 2 ? ( + addSubEvent(row)} + > + + + + 添加子事件 + + ) : null} + {row.level === 4 && ( + editSubEvent(row)} + > + + + + 编辑子事件 + + )} + {Reflect.has(row, 'trajData') && ( + ddConfig(row)} + > + + + + 编辑DD轨迹 + + )} + {/* {row.level == 4 && ( + editSubEvent(row)} + > + + + + 编辑子事件 + + )} */} + {![2, 3].includes(row.level) ? ( + deleteEvent(row)} + > + + + + + ) : ( + <> + )} +
+ ) + }, + }, + ] + + function editMainEvent(row) { + showMainEvent.value = true + mainEventData.value = cloneDeep(row) + } + + const addSubEvent = async row => { + console.log(row, 'row') + oneClassData.value = row + showNewEvent.value = true + // eventData.value = {} + await getTwoClassList(row.id) + } + + function editSubEvent(row) { + showNewEvent.value = true + eventData.value = cloneDeep(row) + getTwoClassList(row.oneType) + console.log('子事件编辑：', row, 'onClassData', oneClassData) + } + + const dialog = useDialog() + function deleteEvent(row) { + console.log(row, 'row') + dialog.warning({ + title: '删除事件', + content: `确定删除事件 ${row.name} 吗？`, + positiveText: '确定', + negativeText: '取消', + onPositiveClick: async () => { + //await deleteEventById(row.id) + if (row.level == 1) { + await deleteSimp({ id: row.id }) + } else if (row.level == 4) { + await deleteSon({ id: row.id }) + } + searchTreeList() + }, + }) + } + + function ddConfig(row) { + console.log(row) + dialog.create({ + style: 'width:auto;height:90vh', + maskClosable: false, + class: 'flex flex-col', + title: 'DD轨迹', + contentClass: 'flex-1 h-0', + content: () => , + // positiveText: '确定', + // negativeText: '取消', + // onPositiveClick: () => {}, + }) + } + + const { getAllKeys } = useTree() + const expandedRowKeys = ref([]) + + watch( + () => props.tableData, + () => { + expandedRowKeys.value = getAllKeys(props.tableData, 'name') || [] + }, + { + immediate: true, + } + ) + + return () => ( + <> + row.name} + /> + + + + + ) + }, +}) diff --git a/src/views/Gantt/components/Gantt/components/VRender.jsx b/src/views/Gantt/components/Gantt/components/VRender.jsx old mode 100644 new mode 100755 index a98ae0da4..4f0174da4 --- a/src/views/Gantt/components/Gantt/components/VRender.jsx +++ b/src/views/Gantt/components/Gantt/components/VRender.jsx @@ -1,47 +1,47 @@ -import { VImage, VGroup, VRect, VText } from '@visactor/vtable/es/vrender' - -const textColor = '#65c5e7' -export default defineComponent({ - props: { - width: { - type: Number, - default: 0, - }, - height: { - type: Number, - default: 0, - }, - taskRecord: { - type: Object, - default: () => ({}), - }, - }, - setup(props) { - const { width, height, taskRecord } = props - return () => ( - - - - ) - }, -}) +import { VImage, VGroup, VRect, VText } from '@visactor/vtable/es/vrender' + +const textColor = '#65c5e7' +export default defineComponent({ + props: { + width: { + type: Number, + default: 0, + }, + height: { + type: Number, + default: 0, + }, + taskRecord: { + type: Object, + default: () => ({}), + }, + }, + setup(props) { + const { width, height, taskRecord } = props + return () => ( + + + + ) + }, +}) diff --git a/src/views/Gantt/components/Gantt/hooks/gantt.ts b/src/views/Gantt/components/Gantt/hooks/gantt.ts old mode 100644 new mode 100755 index 9e44ab91b..b6ca6d2f1 --- a/src/views/Gantt/components/Gantt/hooks/gantt.ts +++ b/src/views/Gantt/components/Gantt/hooks/gantt.ts @@ -1,453 +1,608 @@ -import { Group, Image, Text, CheckBox, Rect } from '@visactor/vtable/es/vrender' - -import { Gantt, tools, TYPES } from '@visactor/vtable-gantt' -import { getMainGantt, getSubGantt } from '@/api/Gantt' - -type GanttParams = { - route?: any - router?: any -} -let ganttInstance: null | Gantt = null -const bgColor = '#1c202c' -const headerBgColor = '#33566f22' -const textColor = '#65c5e7' -const textColorWithOp = '#75fbfd22' - -const useGantt = ({ router, route }: GanttParams) => { - const currentImage = ref() - const { subId } = route.params - const records = ref([]) - onMounted(() => { - getGanttData() - }) - async function getGanttData() { - if (subId) { - const res = await getSubGantt(subId) - - records.value = res - ganttInstance?.setRecords(records.value) - } else { - const res = await getMainGantt() - // console.log(res, '----') - records.value = res - ganttInstance?.setRecords(records.value) - } - } - function renderMainTask(dom: HTMLElement) { - const option = getOption() - ganttInstance = new Gantt(dom, option) - window['ganttInstance'] = ganttInstance - // console.log(ganttInstance) - } - function getOption(): TYPES.GanttConstructorOptions { - const option = { - records: records.value, - taskListTable: renderTaskListTable(), - tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange, - // groupBy: 'name', - // groupField: 'name', - // widthMode: 'standard', - // groupTitleFieldFormat: (record, col, row, table) => { - // console.log(record, col, row, table, '----') - // const groupData = table.getGroupData(record); // 获取分组数据 - // const count = groupData ? groupData.length : 0; // 计算分组下的记录数量 - // return `${record.name} (${count})`; // 返回格式化的分组标题 - // }, - frame: { - outerFrameStyle: { - borderLineWidth: 2, - borderColor: textColor, - cornerRadius: 3, - }, - // verticalSplitLineHighlight: { - // lineColor: 'green', - // lineWidth: 3, - // }, - }, - grid: { - // backgroundColor: bgColor, - horizontalLine: { - lineWidth: 1, - lineColor: textColorWithOp, - }, - // verticalLine: { - // lineWidth: 1, - // lineColor: textColorWithOp, - // lineDash: [4, 8], - // }, - }, - taskList: { - // backgroundColor: bgColor, - headerStyle: { - borderColor: '#e1e4e8', - borderLineWidth: 0, - fontSize: 18, - fontWeight: 'bold', - color: 'red', - }, - }, - headerRowHeight: 59, - rowHeight: subId ? 200 : 100, - taskBar: renderTaskBar(subId), - timelineHeader: { - backgroundColor: headerBgColor, - colWidth: 140, - // colWidth: 1040, - // verticalLine: { - // lineColor: textColorWithOp, - // lineWidth: 1, - // lineDash: [4, 2], - // }, - horizontalLine: { - lineColor: textColorWithOp, - lineWidth: 1, - lineDash: [4, 2], - }, - scales: getTimeScales('day'), - }, - minDate: '2024-11-14', - maxDate: '2024-12-30', - markLine: [ - { - date: '2024-07-29', - style: { - lineWidth: 1, - lineColor: 'blue', - lineDash: [8, 4], - }, - }, - // { - // date: '2024-08-17', - // style: { - // lineWidth: 2, - // lineColor: 'red', - // lineDash: [8, 4], - // }, - // }, - ], - scrollStyle: { - scrollRailColor: 'RGBA(246,246,246,0)', - visible: 'focus', - width: 6, - scrollSliderCornerRadius: 2, - scrollSliderColor: 'rgba(255,255,255,0.25)', - }, - underlayBackgroundColor: bgColor, - } - return option as TYPES.GanttConstructorOptions - } - function renderColumn() { - const columns = [ - { - field: 'name', - title: subId ? '事件类型' : '事件主体', - width: '120', - mergeCell: true, - customLayout: args => { - console.log(args, 'srgs') - const { table, row, col, rect, dataValue } = args - // console.log( - // table, - // '1', - // row, - // '2', - // col, - // '3', - // rect, - // '4', - // dataValue, - // '5', - // '-----------' - // ) - const { height, width } = rect ?? table.getCellRect(col, row) - const container = new Group({ - width, - height, - fill: 'transparent', - // fill: textColor, - // fillOpacity: 0.1, - // stroke: textColor, - // strokeOpacity: 0.2, - // lineWidth: 4, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - cursor: 'pointer', - }) - console.log(args) - const count = table.records.find(r => dataValue === r.name)?.children - ?.length - const values = new Text({ - text: `${dataValue}`, - fontSize: 16, - fontFamily: 'sans-serif', - fill: textColor, - textAlign: 'center', - // boundsPadding: [10, 0, 0, 0], - }) - const counts = new Text({ - text: `( ${count} )`, - fontSize: 13, - fontFamily: 'sans-serif', - fill: textColor, - boundsPadding: [10, 0, 0, 0], - }) - container.add(values) - container.add(counts) - return { - rootContainer: container, - } - }, - }, - ] - if (subId) { - columns.unshift({ - field: 'isChecked', - title: '', - width: '60', - headerType: 'checkbox', - cellType: 'checkbox', - }) - } - return columns - } - - function renderTaskListTable() { - const taskListTable = { - columns: renderColumn(), - // tableWidth: 'auto', - theme: { - underlayBackgroundColor: bgColor, - headerStyle: { - borderColor: textColorWithOp, - borderLineWidth: 1, - fontWeight: 'bold', - color: textColor, - bgColor: headerBgColor, - textAlign: 'center', - fontSize: 20, - hover: { - cellBgColor: 'transparent', - }, - }, - bodyStyle: { - borderColor: textColorWithOp, - textAlign: 'center', - borderLineWidth: 1, - autoWrapText: true, - fontSize: 16, - color: textColor, - bgColor: bgColor, - hover: { - cellBgColor: textColorWithOp, - }, - }, - }, - } - return taskListTable - } - - function renderTaskBar() { - const taskBar = { - resizable: false, - moveable: false, - startDateField: 'start', - endDateField: 'end', - // progressField: 'progress', - barStyle: { width: subId ? 180 : 60 }, - customLayout: args => { - const { width, height, startDate, endDate, taskRecord } = args - const container = new Group({ - width, - height, - fill: 'transparent', - // fill: textColor, - // fillOpacity: 0.1, - // stroke: textColor, - // strokeOpacity: 0.2, - // lineWidth: 4, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - cursor: 'pointer', - }) - if (!subId) { - container.addEventListener('click', () => { - console.log(taskRecord, 'ooooooo') - router.push({ - path: `/gantt/sub/${taskRecord.id}`, - }) - }) - } - - if (subId) { - const image = new Image({ - image: taskRecord.avatar, - width: 100, - height: 100, - x: 10, - y: 10, - boundsPadding: [0, 0, 10, 0], - cursor: 'pointer', - }) - container.add(image) - image.addEventListener('click', () => { - currentImage.value = [taskRecord.avatar, Date.now()] - // console.log(currentImage, 'currentImage') - }) - } - // const checkbox = new CheckBox({ - // width: 20, - // height: 20, - // checked: false, - // }) - // container.add(checkbox) - - // checkbox.addEventListener('click', event => { - // console.log(event, 'event') - // }) - // console.log(taskRecord, 'taskRecord') - const nameContainer = new Group({ - fill: 'transparent', - display: 'flex', - // flexDirection: 'column', - // justifyContent: 'center', - alignItems: 'center', - }) - - container.add(nameContainer) - - if ('trajData' in taskRecord && taskRecord.trajData) { - const taskRecordSymbol = new Image({ - width: 20, - height: 20, - fill: '#ff0', - image: - '', - boundsPadding: [-3, 10, 0, 0], - cursor: 'pointer', - }) - nameContainer.add(taskRecordSymbol) - } - - const name = new Text({ - text: taskRecord.name, - fontSize: 16, - fontFamily: 'sans-serif', - fill: textColor, - fontWeight: 'bold', - maxLineWidth: width, - textAlign: 'center', - // boundsPadding: [10, 0, 0, 0], - }) - nameContainer.add(name) - - const days = new Text({ - text: `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`, - fontSize: 13, - fontFamily: 'sans-serif', - fill: textColor, - boundsPadding: [10, 0, 0, 0], - }) - container.add(days) - const rect = new Rect({ - width: width, - height: 7, - fill: { - gradient: 'linear', - x0: 0, - y0: 0, - x1: 1, - y1: 0, - stops: [ - { - offset: 0, - color: textColor, - }, - { - offset: 1, - color: textColorWithOp, - }, - ], - }, - boundsPadding: [10, 0, 0, 0], - }) - container.add(rect) - - return { - rootContainer: container, - } - }, - hoverBarStyle: { - cornerRadius: 2, - barOverlayColor: textColorWithOp, - }, - selectedBarStyle: { - // cornerRadius: 2, - borderColor: textColorWithOp, - borderLineWidth: 2, - }, - } - return taskBar - } - function renderGroup(opt: IGroupGraphicAttribute) { - return new Group(opt) - } - - function renderText(opt: ITextGraphicAttribute) { - return new Text(opt) - } - - function renderImage(opt: IImageGraphicAttribute) { - return new Image(opt) - } - - function changeTimeScales(scale: TYPES.ITimelineScale['unit']) { - const scales = getTimeScales(scale) - ganttInstance && ganttInstance.updateScales(scales) - } - - function getTimeScales( - scale: TYPES.ITimelineScale['unit'] - ): TYPES.ITimelineScale[] { - return [ - { - unit: scale, - step: 1, - customLayout: args => { - const { width, height, startDate } = args - const container = new Group({ - width, - height, - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - flexWrap: 'nowrap', - }) - - const day = new Text({ - text: startDate.toLocaleDateString(), - // scale === 'day' - // ? startDate.toLocaleDateString() - // : startDate.toLocaleTimeString(), - fontSize: 14, - fontWeight: 'bold', - fontFamily: 'sans-serif', - fill: textColor, - textAlign: 'right', - maxLineWidth: width, - }) - container.add(day) - return { - rootContainer: container, - } - }, - }, - ] - } - return { renderMainTask, changeTimeScales, currentImage } -} - -export default useGantt +import { Group, Image, Text, CheckBox, Rect } from '@visactor/vtable/es/vrender' +import { useDialog } from 'naive-ui' +import { Gantt, tools, TYPES } from '@visactor/vtable-gantt' +import { getMainGantt, getSubGantt } from '@/api/Gantt/gantt' +import { getSon } from '@/api/Gantt' +import { useTree } from '@/utils/tree' +import * as dayjs from 'dayjs' + +type GanttParams = { + route?: any + router?: any +} +let ganttInstance: null | Gantt = null +const bgColor = '#1c202c' +const headerBgColor = '#33566f22' +const textColor = '#65c5e7' +const textColorWithOp = '#75fbfd22' + +const { getTimeRangeForTree } = useTree() + +const useGantt = ({ router, route }: GanttParams) => { + const currentImage = ref() + const { subId } = route.params + const records = ref([]) + + const timeRange = ref([]) + // onMounted(() => { + // getGanttData() + // }) + async function getGanttData(params: Record) { + 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 + console.log(subId, ',,,,,') + 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.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) + startOfMonth.setHours(0, 0, 0, 0) + + const lastDayOfMonth = new Date(year, month + 1, 0) + const endOfMonth = new Date( + year, + month, + lastDayOfMonth.getDate() + ) + endOfMonth.setHours(23, 59, 59, 9999) + // new Date().toISOString() + + // console.log( + // mainEvent.startTime, + // startOfMonth.toISOString(), + // endOfMonth.toISOString() + // ) + + return { + ...mainEvent, + start: startOfMonth.toISOString(), + end: endOfMonth.toISOString(), + } + }), + } + }) + } + records.value.length > 0 && ganttInstance?.setRecords(records.value) + } + } + async function renderMainTask( + dom: HTMLElement, + params: Record + ) { + // console.log(subId, 'renderMainTask') + await getGanttData(params) + const option = getOption() + + // if (ganttInstance) { + // ganttInstance.setRecords(records.value) + // } else { + 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); + const option = { + records: records.value, + taskListTable: renderTaskListTable(), + tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange, + // groupBy: 'name', + // groupField: 'name', + // widthMode: 'standard', + // groupTitleFieldFormat: (record, col, row, table) => { + // console.log(record, col, row, table, '----') + // const groupData = table.getGroupData(record); // 获取分组数据 + // const count = groupData ? groupData.length : 0; // 计算分组下的记录数量 + // return `${record.name} (${count})`; // 返回格式化的分组标题 + // }, + frame: { + outerFrameStyle: { + borderLineWidth: 2, + borderColor: textColor, + cornerRadius: 3, + }, + // verticalSplitLineHighlight: { + // lineColor: 'green', + // lineWidth: 3, + // }, + }, + grid: { + // backgroundColor: bgColor, + horizontalLine: { + lineWidth: 1, + lineColor: textColorWithOp, + }, + // verticalLine: { + // lineWidth: 1, + // lineColor: textColorWithOp, + // lineDash: [4, 8], + // }, + }, + taskList: { + // backgroundColor: bgColor, + headerStyle: { + borderColor: '#e1e4e8', + borderLineWidth: 0, + fontSize: 18, + fontWeight: 'bold', + color: 'red', + }, + }, + headerRowHeight: 59, + rowHeight: subId ? 200 : 100, + taskBar: renderTaskBar(subId), + timelineHeader: { + backgroundColor: headerBgColor, + colWidth: 150, + // colWidth: 1040, + // verticalLine: { + // lineColor: textColorWithOp, + // lineWidth: 1, + // lineDash: [4, 2], + // }, + horizontalLine: { + lineColor: textColorWithOp, + lineWidth: 1, + lineDash: [4, 2], + }, + scales: getTimeScales(subId ? 'day' : 'month'), + }, + minDate: timeRange.value[0], + maxDate: timeRange.value[1], + markLine: [ + { + date: '2024-01-14T21:12:40', + style: { + lineWidth: 1, + lineColor: 'blue', + lineDash: [8, 4], + }, + }, + // { + // date: '2024-08-17', + // style: { + // lineWidth: 2, + // lineColor: 'red', + // lineDash: [8, 4], + // }, + // }, + ], + scrollStyle: { + scrollRailColor: 'RGBA(246,246,246,0)', + visible: 'focus', + width: 10, + scrollSliderCornerRadius: 2, + scrollSliderColor: 'rgba(255,255,255,0.25)', + }, + underlayBackgroundColor: bgColor, + } + return option as TYPES.GanttConstructorOptions + } + function renderColumn() { + const columns = [ + { + field: 'name', + title: subId ? '事件类型' : '事件主体', + width: '120', + mergeCell: true, + customLayout: args => { + // console.log(args, 'srgs') + const { table, row, col, rect, dataValue } = args + const { height, width } = rect ?? table.getCellRect(col, row) + const container = new Group({ + width, + height, + fill: 'transparent', + // fill: textColor, + // fillOpacity: 0.1, + // stroke: textColor, + // strokeOpacity: 0.2, + // lineWidth: 4, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + cursor: 'pointer', + boundsPadding: [10, 0, 0, 0], + }) + + // console.log('args：-----', args); + + const count = + table.records.find(r => dataValue === r.name)?.children?.length || 0 + const values = new Text({ + text: `${dataValue}`, + fontSize: 16, + fontFamily: 'sans-serif', + fill: textColor, + textAlign: 'center', + maxLineWidth: width, + whiteSpace: 'normal', + // boundsPadding: [10, 10, 10, 10], + }) + const counts = new Text({ + text: `( ${count} )`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(values) + container.add(counts) + return { + rootContainer: container, + } + }, + }, + ] + if (subId) { + columns.unshift({ + field: 'parentName', + title: '事件分类', + width: '120', + mergeCell: true, + }) + columns.unshift({ + field: 'isChecked', + title: '', + width: '60', + headerType: 'checkbox', + cellType: 'checkbox', + }) + } + return columns + } + + function renderTaskListTable() { + const taskListTable = { + columns: renderColumn(), + // tableWidth: 'auto', + theme: { + underlayBackgroundColor: bgColor, + headerStyle: { + borderColor: textColorWithOp, + borderLineWidth: 1, + fontWeight: 'bold', + color: textColor, + bgColor: headerBgColor, + textAlign: 'center', + fontSize: 20, + hover: { + cellBgColor: 'transparent', + }, + }, + bodyStyle: { + borderColor: textColorWithOp, + textAlign: 'center', + borderLineWidth: 1, + autoWrapText: true, + fontSize: 16, + color: textColor, + bgColor: bgColor, + hover: { + cellBgColor: textColorWithOp, + }, + }, + }, + } + return taskListTable + } + + function renderTaskBar(subId: string | number) { + // console.log(subId, '------'); + const taskBar = { + resizable: false, + moveable: false, + startDateField: 'start', + endDateField: 'end', + // progressField: 'progress', + barStyle: { width: subId ? 200 : 80 }, + customLayout: args => { + // console.log(args, 'args'); + const { width, height, startDate, endDate, taskRecord } = args + // console.log(taskRecord, 'taskRecord'); + const container = new Group({ + width, + height, + fill: 'transparent', + // fill: textColor, + // fillOpacity: 0.1, + // stroke: textColor, + // strokeOpacity: 0.2, + // lineWidth: 4, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + cursor: 'pointer', + }) + + container.addEventListener('click', async () => { + console.log(taskRecord, 'ooooooo') + if (!subId) { + router.push({ + path: `/gantt/sub/${taskRecord.id}`, + }) + } else { + const { code, data } = await getSon({ id: taskRecord.id }) + + if (code === 200) { + const showData = { + 事件名称: data.name, + 事件时间: `${data.startTime} - ${data.endTime}`, + 装备型号: data.equipModel, + 上报站点: 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: '确定', + }) + } + } + }) + // if (!subId) { + // container.addEventListener('click', () => { + // console.log(taskRecord, 'ooooooo') + // router.push({ + // path: `/gantt/sub/${taskRecord.id}`, + // }) + // }) + // } + + if (subId) { + const imgUrl = `${window.settings.imgServer}${taskRecord.fileUrl}` + // console.log(imgUrl); + const image = new Image({ + image: imgUrl, + width: 100, + height: 100, + x: 10, + y: 10, + boundsPadding: [0, 0, 10, 0], + cursor: 'pointer', + }) + container.add(image) + image.addEventListener('click', e => { + e.stopPropagation() + + currentImage.value = [imgUrl, Date.now()] + // console.log(currentImage, 'currentImage') + }) + } + // const checkbox = new CheckBox({ + // width: 20, + // height: 20, + // checked: false, + // }) + // container.add(checkbox) + + // checkbox.addEventListener('click', event => { + // console.log(event, 'event') + // }) + // console.log(taskRecord, 'taskRecord') + const nameContainer = new Group({ + fill: 'transparent', + display: 'flex', + // flexDirection: 'column', + // justifyContent: 'center', + alignItems: 'center', + }) + + container.add(nameContainer) + + if ('trajData' in taskRecord && taskRecord.trajData) { + const taskRecordSymbol = new Image({ + width: 20, + height: 20, + fill: '#ff0', + image: + '', + boundsPadding: [-3, 10, 0, 0], + cursor: 'pointer', + }) + nameContainer.add(taskRecordSymbol) + } + + const name = new Text({ + text: taskRecord.name, + fontSize: 16, + fontFamily: 'sans-serif', + fill: textColor, + fontWeight: 'bold', + maxLineWidth: width, + textAlign: 'center', + // boundsPadding: [10, 0, 0, 0], + }) + nameContainer.add(name) + + const start = new Text({ + text: `${taskRecord.startTime}`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(start) + const end = new Text({ + text: `${taskRecord.endTime}`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(end) + const rect = new Rect({ + width: width, + height: 7, + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 1, + y1: 0, + stops: [ + { + offset: 0, + color: textColor, + }, + { + offset: 1, + color: textColorWithOp, + }, + ], + }, + boundsPadding: [10, 0, 0, 0], + }) + container.add(rect) + + return { + rootContainer: container, + } + }, + hoverBarStyle: { + cornerRadius: 2, + barOverlayColor: textColorWithOp, + }, + selectedBarStyle: { + // cornerRadius: 2, + borderColor: textColorWithOp, + borderLineWidth: 2, + }, + } + // console.log(taskBar, '0000000'); + return taskBar + } + function renderGroup(opt: IGroupGraphicAttribute) { + return new Group(opt) + } + + function renderText(opt: ITextGraphicAttribute) { + return new Text(opt) + } + + function renderImage(opt: IImageGraphicAttribute) { + return new Image(opt) + } + + function changeTimeScales(scale: TYPES.ITimelineScale['unit']) { + const scales = getTimeScales(scale) + ganttInstance && ganttInstance.updateScales(scales) + } + + function getTimeScales( + scale: TYPES.ITimelineScale['unit'] + ): TYPES.ITimelineScale[] { + return [ + { + unit: scale, + step: 1, + customLayout: args => { + const { width, height, startDate } = args + const container = new Group({ + width, + height, + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + flexWrap: 'nowrap', + }) + + const day = new Text({ + text: startDate.toLocaleDateString(), + // scale === 'day' + // ? startDate.toLocaleDateString() + // : startDate.toLocaleTimeString(), + fontSize: 14, + fontWeight: 'bold', + fontFamily: 'sans-serif', + fill: textColor, + textAlign: 'right', + maxLineWidth: width, + }) + container.add(day) + return { + rootContainer: container, + } + }, + }, + ] + } + return { renderMainTask, changeTimeScales, currentImage } +} + +export default useGantt diff --git a/src/views/Gantt/components/Gantt/index.jsx b/src/views/Gantt/components/Gantt/index.jsx old mode 100644 new mode 100755 index 9e796e8ae..af99e32c6 --- a/src/views/Gantt/components/Gantt/index.jsx +++ b/src/views/Gantt/components/Gantt/index.jsx @@ -1,51 +1,88 @@ -import { NImage } from 'naive-ui' -import useGantt from './hooks/gantt' -import { useRouter, useRoute } from 'vue-router' - -export default defineComponent({ - props: { - scale: { - type: String, - default: 'day', - }, - }, - setup(props) { - const router = useRouter() - const route = useRoute() - const { renderMainTask, changeTimeScales, currentImage } = useGantt({ - route, - router, - }) - - onMounted(() => { - nextTick(() => { - renderMainTask(document.querySelector('#tableContainer')) - }) - }) - watch( - () => props.scale, - val => { - changeTimeScales(val) - } - ) - - const imgRef = ref(null) - watch(currentImage, imgUrl => { - nextTick(() => { - if (imgUrl) { - imgRef.value.click() - } - }) - }) - return () => ( - <> -
- - - ) - }, -}) +import { NImage } from 'naive-ui' +import useGantt from './hooks/gantt' +import { useRouter, useRoute } from 'vue-router' + +export default defineComponent({ + props: { + scale: { + type: String, + default: 'day', + }, + dateRange: { + type: Array, + require: true, + }, + types: { + type: Array, + require: true, + }, + }, + setup(props, { expose }) { + const router = useRouter() + const route = useRoute() + const { renderMainTask, changeTimeScales, currentImage } = useGantt({ + route, + router, + }) + + const refresh = ref(false) + + expose({ refresh }) + + watch(refresh, val => { + if (val) { + renderMainTask(document.querySelector('#tableContainer'), { + ids: props.types, + startTime: props.dateRange + ? new Date(props.dateRange[0]).toISOString() + : null, + endTime: props.dateRange + ? new Date(props.dateRange[1]).toISOString() + : null, + }) + refresh.value = false + } + }) + + onMounted(() => { + nextTick(() => { + // console.log(props); + renderMainTask(document.querySelector('#tableContainer'), { + ids: props.types, + startTime: props.dateRange + ? new Date(props.dateRange[0]).toISOString() + : null, + endTime: props.dateRange + ? new Date(props.dateRange[1]).toISOString() + : null, + }) + refresh.value = false + }) + }) + watch( + () => props.scale, + val => { + changeTimeScales(val) + } + ) + + const imgRef = ref(null) + watch(currentImage, imgUrl => { + nextTick(() => { + if (imgUrl) { + imgRef.value.click() + } + }) + }) + return () => ( + <> +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/Gantt1/components/VRender.jsx b/src/views/Gantt/components/Gantt1/components/VRender.jsx new file mode 100755 index 000000000..4f0174da4 --- /dev/null +++ b/src/views/Gantt/components/Gantt1/components/VRender.jsx @@ -0,0 +1,47 @@ +import { VImage, VGroup, VRect, VText } from '@visactor/vtable/es/vrender' + +const textColor = '#65c5e7' +export default defineComponent({ + props: { + width: { + type: Number, + default: 0, + }, + height: { + type: Number, + default: 0, + }, + taskRecord: { + type: Object, + default: () => ({}), + }, + }, + setup(props) { + const { width, height, taskRecord } = props + return () => ( + + + + ) + }, +}) diff --git a/src/views/Gantt/components/Gantt1/hooks/gantt.ts b/src/views/Gantt/components/Gantt1/hooks/gantt.ts new file mode 100755 index 000000000..d6552fe88 --- /dev/null +++ b/src/views/Gantt/components/Gantt1/hooks/gantt.ts @@ -0,0 +1,452 @@ +import { Group, Image, Text, CheckBox, Rect } from '@visactor/vtable/es/vrender' + +import { Gantt, tools, TYPES } from '@visactor/vtable-gantt' +import { getMainGantt, getSubGantt } from '@/api/Gantt' + +type GanttParams = { + route?: any + router?: any +} +let ganttInstance: null | Gantt = null +const bgColor = '#1c202c' +const headerBgColor = '#33566f22' +const textColor = '#65c5e7' +const textColorWithOp = '#75fbfd22' + +const useGantt = ({ router, route }: GanttParams) => { + const currentImage = ref() + const { subId } = route.params + const records = ref([]) + onMounted(() => { + getGanttData() + }) + async function getGanttData() { + if (subId) { + const res = await getSubGantt(subId) + + records.value = res + ganttInstance?.setRecords(records.value) + } else { + const res = await getMainGantt() + // console.log(res, '----') + records.value = res + ganttInstance?.setRecords(records.value) + } + } + function renderMainTask(dom: HTMLElement) { + const option = getOption() + ganttInstance = new Gantt(dom, option) + window['ganttInstance'] = ganttInstance + // console.log(ganttInstance) + } + function getOption(): TYPES.GanttConstructorOptions { + const option = { + records: records.value, + taskListTable: renderTaskListTable(), + tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange, + // groupBy: 'name', + // groupField: 'name', + // widthMode: 'standard', + // groupTitleFieldFormat: (record, col, row, table) => { + // console.log(record, col, row, table, '----') + // const groupData = table.getGroupData(record); // 获取分组数据 + // const count = groupData ? groupData.length : 0; // 计算分组下的记录数量 + // return `${record.name} (${count})`; // 返回格式化的分组标题 + // }, + frame: { + outerFrameStyle: { + borderLineWidth: 2, + borderColor: textColor, + cornerRadius: 3, + }, + // verticalSplitLineHighlight: { + // lineColor: 'green', + // lineWidth: 3, + // }, + }, + grid: { + // backgroundColor: bgColor, + horizontalLine: { + lineWidth: 1, + lineColor: textColorWithOp, + }, + // verticalLine: { + // lineWidth: 1, + // lineColor: textColorWithOp, + // lineDash: [4, 8], + // }, + }, + taskList: { + // backgroundColor: bgColor, + headerStyle: { + borderColor: '#e1e4e8', + borderLineWidth: 0, + fontSize: 18, + fontWeight: 'bold', + color: 'red', + }, + }, + headerRowHeight: 59, + rowHeight: subId ? 200 : 100, + taskBar: renderTaskBar(subId), + timelineHeader: { + backgroundColor: headerBgColor, + colWidth: 140, + // colWidth: 1040, + // verticalLine: { + // lineColor: textColorWithOp, + // lineWidth: 1, + // lineDash: [4, 2], + // }, + horizontalLine: { + lineColor: textColorWithOp, + lineWidth: 1, + lineDash: [4, 2], + }, + scales: getTimeScales('day'), + }, + minDate: '2024-11-14', + maxDate: '2024-12-30', + markLine: [ + { + date: '2024-07-29', + style: { + lineWidth: 1, + lineColor: 'blue', + lineDash: [8, 4], + }, + }, + // { + // date: '2024-08-17', + // style: { + // lineWidth: 2, + // lineColor: 'red', + // lineDash: [8, 4], + // }, + // }, + ], + scrollStyle: { + scrollRailColor: 'RGBA(246,246,246,0)', + visible: 'focus', + width: 6, + scrollSliderCornerRadius: 2, + scrollSliderColor: 'rgba(255,255,255,0.25)', + }, + underlayBackgroundColor: bgColor, + } + return option as TYPES.GanttConstructorOptions + } + function renderColumn() { + const columns = [ + { + field: 'name', + title: subId ? '事件类型' : '事件主体', + width: '120', + mergeCell: true, + customLayout: args => { + const { table, row, col, rect, dataValue } = args + // console.log( + // table, + // '1', + // row, + // '2', + // col, + // '3', + // rect, + // '4', + // dataValue, + // '5', + // '-----------' + // ) + const { height, width } = rect ?? table.getCellRect(col, row) + const container = new Group({ + width, + height, + fill: 'transparent', + // fill: textColor, + // fillOpacity: 0.1, + // stroke: textColor, + // strokeOpacity: 0.2, + // lineWidth: 4, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + cursor: 'pointer', + }) + console.log(args) + const count = table.records.find(r => dataValue === r.name)?.children + ?.length + const values = new Text({ + text: `${dataValue}`, + fontSize: 16, + fontFamily: 'sans-serif', + fill: textColor, + textAlign: 'center', + // boundsPadding: [10, 0, 0, 0], + }) + const counts = new Text({ + text: `( ${count} )`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(values) + container.add(counts) + return { + rootContainer: container, + } + }, + }, + ] + if (subId) { + columns.unshift({ + field: 'isChecked', + title: '', + width: '60', + headerType: 'checkbox', + cellType: 'checkbox', + }) + } + return columns + } + + function renderTaskListTable() { + const taskListTable = { + columns: renderColumn(), + // tableWidth: 'auto', + theme: { + underlayBackgroundColor: bgColor, + headerStyle: { + borderColor: textColorWithOp, + borderLineWidth: 1, + fontWeight: 'bold', + color: textColor, + bgColor: headerBgColor, + textAlign: 'center', + fontSize: 20, + hover: { + cellBgColor: 'transparent', + }, + }, + bodyStyle: { + borderColor: textColorWithOp, + textAlign: 'center', + borderLineWidth: 1, + autoWrapText: true, + fontSize: 16, + color: textColor, + bgColor: bgColor, + hover: { + cellBgColor: textColorWithOp, + }, + }, + }, + } + return taskListTable + } + + function renderTaskBar() { + const taskBar = { + resizable: false, + moveable: false, + startDateField: 'start', + endDateField: 'end', + // progressField: 'progress', + barStyle: { width: subId ? 180 : 60 }, + customLayout: args => { + const { width, height, startDate, endDate, taskRecord } = args + const container = new Group({ + width, + height, + fill: 'transparent', + // fill: textColor, + // fillOpacity: 0.1, + // stroke: textColor, + // strokeOpacity: 0.2, + // lineWidth: 4, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + cursor: 'pointer', + }) + if (!subId) { + container.addEventListener('click', () => { + console.log(taskRecord, 'ooooooo') + router.push({ + path: `/gantt/sub/${taskRecord.id}`, + }) + }) + } + + if (subId) { + const image = new Image({ + image: taskRecord.avatar, + width: 100, + height: 100, + x: 10, + y: 10, + boundsPadding: [0, 0, 10, 0], + cursor: 'pointer', + }) + container.add(image) + image.addEventListener('click', () => { + currentImage.value = [taskRecord.avatar, Date.now()] + // console.log(currentImage, 'currentImage') + }) + } + // const checkbox = new CheckBox({ + // width: 20, + // height: 20, + // checked: false, + // }) + // container.add(checkbox) + + // checkbox.addEventListener('click', event => { + // console.log(event, 'event') + // }) + // console.log(taskRecord, 'taskRecord') + const nameContainer = new Group({ + fill: 'transparent', + display: 'flex', + // flexDirection: 'column', + // justifyContent: 'center', + alignItems: 'center', + }) + + container.add(nameContainer) + + if ('trajData' in taskRecord && taskRecord.trajData) { + const taskRecordSymbol = new Image({ + width: 20, + height: 20, + fill: '#ff0', + image: + '', + boundsPadding: [-3, 10, 0, 0], + cursor: 'pointer', + }) + nameContainer.add(taskRecordSymbol) + } + + const name = new Text({ + text: taskRecord.name, + fontSize: 16, + fontFamily: 'sans-serif', + fill: textColor, + fontWeight: 'bold', + maxLineWidth: width, + textAlign: 'center', + // boundsPadding: [10, 0, 0, 0], + }) + nameContainer.add(name) + + const days = new Text({ + text: `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(days) + const rect = new Rect({ + width: width, + height: 7, + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 1, + y1: 0, + stops: [ + { + offset: 0, + color: textColor, + }, + { + offset: 1, + color: textColorWithOp, + }, + ], + }, + boundsPadding: [10, 0, 0, 0], + }) + container.add(rect) + + return { + rootContainer: container, + } + }, + hoverBarStyle: { + cornerRadius: 2, + barOverlayColor: textColorWithOp, + }, + selectedBarStyle: { + // cornerRadius: 2, + borderColor: textColorWithOp, + borderLineWidth: 2, + }, + } + return taskBar + } + function renderGroup(opt: IGroupGraphicAttribute) { + return new Group(opt) + } + + function renderText(opt: ITextGraphicAttribute) { + return new Text(opt) + } + + function renderImage(opt: IImageGraphicAttribute) { + return new Image(opt) + } + + function changeTimeScales(scale: TYPES.ITimelineScale['unit']) { + const scales = getTimeScales(scale) + ganttInstance && ganttInstance.updateScales(scales) + } + + function getTimeScales( + scale: TYPES.ITimelineScale['unit'] + ): TYPES.ITimelineScale[] { + return [ + { + unit: scale, + step: 1, + customLayout: args => { + const { width, height, startDate } = args + const container = new Group({ + width, + height, + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + flexWrap: 'nowrap', + }) + + const day = new Text({ + text: startDate.toLocaleDateString(), + // scale === 'day' + // ? startDate.toLocaleDateString() + // : startDate.toLocaleTimeString(), + fontSize: 14, + fontWeight: 'bold', + fontFamily: 'sans-serif', + fill: textColor, + textAlign: 'right', + maxLineWidth: width, + }) + container.add(day) + return { + rootContainer: container, + } + }, + }, + ] + } + return { renderMainTask, changeTimeScales, currentImage } +} + +export default useGantt diff --git a/src/views/Gantt/components/Gantt1/index.jsx b/src/views/Gantt/components/Gantt1/index.jsx new file mode 100755 index 000000000..aaf153917 --- /dev/null +++ b/src/views/Gantt/components/Gantt1/index.jsx @@ -0,0 +1,51 @@ +import { NImage } from 'naive-ui' +import useGantt from './hooks/gantt' +import { useRouter, useRoute } from 'vue-router' + +export default defineComponent({ + props: { + scale: { + type: String, + default: 'day', + }, + }, + setup(props) { + const router = useRouter() + const route = useRoute() + const { renderMainTask, changeTimeScales, currentImage } = useGantt({ + route, + router, + }) + + onMounted(() => { + nextTick(() => { + renderMainTask(document.querySelector('#tableContainer')) + }) + }) + watch( + () => props.scale, + val => { + changeTimeScales(val) + } + ) + + const imgRef = ref(null) + watch(currentImage, imgUrl => { + nextTick(() => { + if (imgUrl) { + imgRef.value.click() + } + }) + }) + return () => ( + <> +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/Gantt2/components/VRender.jsx b/src/views/Gantt/components/Gantt2/components/VRender.jsx new file mode 100755 index 000000000..4f0174da4 --- /dev/null +++ b/src/views/Gantt/components/Gantt2/components/VRender.jsx @@ -0,0 +1,47 @@ +import { VImage, VGroup, VRect, VText } from '@visactor/vtable/es/vrender' + +const textColor = '#65c5e7' +export default defineComponent({ + props: { + width: { + type: Number, + default: 0, + }, + height: { + type: Number, + default: 0, + }, + taskRecord: { + type: Object, + default: () => ({}), + }, + }, + setup(props) { + const { width, height, taskRecord } = props + return () => ( + + + + ) + }, +}) diff --git a/src/views/Gantt/components/Gantt2/hooks/gantt.ts b/src/views/Gantt/components/Gantt2/hooks/gantt.ts new file mode 100755 index 000000000..54d0f44a6 --- /dev/null +++ b/src/views/Gantt/components/Gantt2/hooks/gantt.ts @@ -0,0 +1,461 @@ +import { Group, Image, Text, CheckBox, Rect } from '@visactor/vtable/es/vrender' + +import { Gantt, tools, TYPES } from '@visactor/vtable-gantt' +import { getMainGantt, getSubGantt } from '@/api/Gantt/gantt' + +type GanttParams = { + route?: any + router?: any +} +let ganttInstance: null | Gantt = null +const bgColor = '#1c202c' +const headerBgColor = '#33566f22' +const textColor = '#65c5e7' +const textColorWithOp = '#75fbfd22' + +const useGantt = ({ router, route }: GanttParams) => { + const currentImage = ref() + const { subId } = route.params + const records = ref([]) + + const timeRange = ref([]) + // onMounted(() => { + // getGanttData() + // }) + async function getGanttData(params: Record) { + 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 + ganttInstance?.setRecords(records.value) + + } + } + async function renderMainTask(dom: HTMLElement, params: Record) { + await getGanttData(params) + const option = getOption() + ganttInstance = new Gantt(dom, option) + window['ganttInstance'] = ganttInstance + } + function getOption(): TYPES.GanttConstructorOptions { + console.log(records.value); + const option = { + records: records.value, + taskListTable: renderTaskListTable(), + tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange, + // groupBy: 'name', + // groupField: 'name', + // widthMode: 'standard', + // groupTitleFieldFormat: (record, col, row, table) => { + // console.log(record, col, row, table, '----') + // const groupData = table.getGroupData(record); // 获取分组数据 + // const count = groupData ? groupData.length : 0; // 计算分组下的记录数量 + // return `${record.name} (${count})`; // 返回格式化的分组标题 + // }, + frame: { + outerFrameStyle: { + borderLineWidth: 2, + borderColor: textColor, + cornerRadius: 3, + }, + // verticalSplitLineHighlight: { + // lineColor: 'green', + // lineWidth: 3, + // }, + }, + grid: { + // backgroundColor: bgColor, + horizontalLine: { + lineWidth: 1, + lineColor: textColorWithOp, + }, + // verticalLine: { + // lineWidth: 1, + // lineColor: textColorWithOp, + // lineDash: [4, 8], + // }, + }, + taskList: { + // backgroundColor: bgColor, + headerStyle: { + borderColor: '#e1e4e8', + borderLineWidth: 0, + fontSize: 18, + fontWeight: 'bold', + color: 'red', + }, + }, + headerRowHeight: 59, + rowHeight: subId ? 200 : 100, + taskBar: renderTaskBar(subId), + timelineHeader: { + backgroundColor: headerBgColor, + colWidth: 4000, + // colWidth: 1040, + // verticalLine: { + // lineColor: textColorWithOp, + // lineWidth: 1, + // lineDash: [4, 2], + // }, + horizontalLine: { + lineColor: textColorWithOp, + lineWidth: 1, + lineDash: [4, 2], + }, + scales: getTimeScales('month'), + }, + minDate: timeRange.value[0], + maxDate: timeRange.value[1], + markLine: [ + { + date: '2024-03-13T13:15:10', + style: { + lineWidth: 1, + lineColor: 'blue', + lineDash: [8, 4], + }, + }, + // { + // date: '2024-08-17', + // style: { + // lineWidth: 2, + // lineColor: 'red', + // lineDash: [8, 4], + // }, + // }, + ], + scrollStyle: { + scrollRailColor: 'RGBA(246,246,246,0)', + visible: 'focus', + width: 10, + scrollSliderCornerRadius: 2, + scrollSliderColor: 'rgba(255,255,255,0.25)', + }, + underlayBackgroundColor: bgColor, + } + return option as TYPES.GanttConstructorOptions + } + function renderColumn() { + const columns = [ + { + field: 'name', + title: subId ? '事件类型' : '事件主体', + width: '120', + mergeCell: true, + customLayout: args => { + // console.log(args, 'srgs') + const { table, row, col, rect, dataValue } = args + // console.log( + // table, + // '1', + // row, + // '2', + // col, + // '3', + // rect, + // '4', + // dataValue, + // '5', + // '-----------' + // ) + const { height, width } = rect ?? table.getCellRect(col, row) + const container = new Group({ + width, + height, + fill: 'transparent', + // fill: textColor, + // fillOpacity: 0.1, + // stroke: textColor, + // strokeOpacity: 0.2, + // lineWidth: 4, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + cursor: 'pointer', + boundsPadding: [10, 0, 0, 0], + }) + // console.log('args：-----', args); + + const count = table.records.find(r => dataValue === r.name)?.children + ?.length || 0 + const values = new Text({ + text: `${dataValue}`, + fontSize: 16, + fontFamily: 'sans-serif', + fill: textColor, + textAlign: 'center', + maxLineWidth: width, + whiteSpace: 'normal' + // boundsPadding: [10, 10, 10, 10], + }) + const counts = new Text({ + text: `( ${count} )`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(values) + container.add(counts) + return { + rootContainer: container, + } + }, + }, + ] + if (subId) { + columns.unshift({ + field: 'isChecked', + title: '', + width: '60', + headerType: 'checkbox', + cellType: 'checkbox', + }) + } + return columns + } + + function renderTaskListTable() { + const taskListTable = { + columns: renderColumn(), + // tableWidth: 'auto', + theme: { + underlayBackgroundColor: bgColor, + headerStyle: { + borderColor: textColorWithOp, + borderLineWidth: 1, + fontWeight: 'bold', + color: textColor, + bgColor: headerBgColor, + textAlign: 'center', + fontSize: 20, + hover: { + cellBgColor: 'transparent', + }, + }, + bodyStyle: { + borderColor: textColorWithOp, + textAlign: 'center', + borderLineWidth: 1, + autoWrapText: true, + fontSize: 16, + color: textColor, + bgColor: bgColor, + hover: { + cellBgColor: textColorWithOp, + }, + }, + }, + } + return taskListTable + } + + function renderTaskBar(subId: string | number) { + // console.log(subId, '------'); + const taskBar = { + resizable: false, + moveable: false, + startDateField: 'startTime', + endDateField: 'endTime', + // progressField: 'progress', + barStyle: { width: subId ? 180 : 60 }, + customLayout: args => { + + const { width, height, startDate, endDate, taskRecord } = args + // console.log(taskRecord, 'taskRecord'); + const container = new Group({ + width, + height, + fill: 'transparent', + // fill: textColor, + // fillOpacity: 0.1, + // stroke: textColor, + // strokeOpacity: 0.2, + // lineWidth: 4, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + cursor: 'pointer', + }) + if (!subId) { + container.addEventListener('click', () => { + console.log(taskRecord, 'ooooooo') + router.push({ + path: `/gantt/sub/${taskRecord.id}`, + }) + }) + } + + if (subId) { + const image = new Image({ + image: taskRecord.avatar, + width: 100, + height: 100, + x: 10, + y: 10, + boundsPadding: [0, 0, 10, 0], + cursor: 'pointer', + }) + container.add(image) + image.addEventListener('click', () => { + currentImage.value = [taskRecord.avatar, Date.now()] + // console.log(currentImage, 'currentImage') + }) + } + // const checkbox = new CheckBox({ + // width: 20, + // height: 20, + // checked: false, + // }) + // container.add(checkbox) + + // checkbox.addEventListener('click', event => { + // console.log(event, 'event') + // }) + // console.log(taskRecord, 'taskRecord') + const nameContainer = new Group({ + fill: 'transparent', + display: 'flex', + // flexDirection: 'column', + // justifyContent: 'center', + alignItems: 'center', + }) + + container.add(nameContainer) + + if ('trajData' in taskRecord && taskRecord.trajData) { + const taskRecordSymbol = new Image({ + width: 20, + height: 20, + fill: '#ff0', + image: + '', + boundsPadding: [-3, 10, 0, 0], + cursor: 'pointer', + }) + nameContainer.add(taskRecordSymbol) + } + + const name = new Text({ + text: taskRecord.name, + fontSize: 16, + fontFamily: 'sans-serif', + fill: textColor, + fontWeight: 'bold', + maxLineWidth: width, + textAlign: 'center', + // boundsPadding: [10, 0, 0, 0], + }) + nameContainer.add(name) + + const days = new Text({ + text: `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(days) + const rect = new Rect({ + width: width, + height: 7, + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 1, + y1: 0, + stops: [ + { + offset: 0, + color: textColor, + }, + { + offset: 1, + color: textColorWithOp, + }, + ], + }, + boundsPadding: [10, 0, 0, 0], + }) + container.add(rect) + + return { + rootContainer: container, + } + }, + hoverBarStyle: { + cornerRadius: 2, + barOverlayColor: textColorWithOp, + }, + selectedBarStyle: { + // cornerRadius: 2, + borderColor: textColorWithOp, + borderLineWidth: 2, + }, + } + console.log(taskBar, '0000000'); + return taskBar + } + function renderGroup(opt: IGroupGraphicAttribute) { + return new Group(opt) + } + + function renderText(opt: ITextGraphicAttribute) { + return new Text(opt) + } + + function renderImage(opt: IImageGraphicAttribute) { + return new Image(opt) + } + + function changeTimeScales(scale: TYPES.ITimelineScale['unit']) { + const scales = getTimeScales(scale) + ganttInstance && ganttInstance.updateScales(scales) + } + + function getTimeScales( + scale: TYPES.ITimelineScale['unit'] + ): TYPES.ITimelineScale[] { + return [ + { + unit: scale, + step: 1, + customLayout: args => { + const { width, height, startDate } = args + const container = new Group({ + width, + height, + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + flexWrap: 'nowrap', + }) + + const day = new Text({ + text: startDate.toLocaleDateString(), + // scale === 'day' + // ? startDate.toLocaleDateString() + // : startDate.toLocaleTimeString(), + fontSize: 14, + fontWeight: 'bold', + fontFamily: 'sans-serif', + fill: textColor, + textAlign: 'right', + maxLineWidth: width, + }) + container.add(day) + return { + rootContainer: container, + } + }, + }, + ] + } + return { renderMainTask, changeTimeScales, currentImage } +} + +export default useGantt diff --git a/src/views/Gantt/components/Gantt2/index.jsx b/src/views/Gantt/components/Gantt2/index.jsx new file mode 100755 index 000000000..f86361399 --- /dev/null +++ b/src/views/Gantt/components/Gantt2/index.jsx @@ -0,0 +1,66 @@ +import { NImage } from 'naive-ui' +import useGantt from './hooks/gantt' +import { useRouter, useRoute } from 'vue-router' + +export default defineComponent({ + props: { + scale: { + type: String, + default: 'day', + }, + dateRange: { + type: Array, + require: true, + }, + types: { + type: Array, + require: true, + } + }, + setup(props, { expose }) { + const router = useRouter() + const route = useRoute() + const { renderMainTask, changeTimeScales, currentImage } = useGantt({ + route, + router, + }) + + expose({ renderMainTask }) + + onMounted(() => { + nextTick(() => { + // console.log(props); + renderMainTask(document.querySelector('#tableContainer'), { + ids: props.types, + startTime: props.dateRange ? new Date(props.dateRange[0]).toISOString() : null, + endTime: props.dateRange ? new Date(props.dateRange[1]).toISOString() : null + }) + }) + }) + watch( + () => props.scale, + val => { + changeTimeScales(val) + } + ) + + const imgRef = ref(null) + watch(currentImage, imgUrl => { + nextTick(() => { + if (imgUrl) { + imgRef.value.click() + } + }) + }) + return () => ( + <> +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts b/src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts old mode 100644 new mode 100755 index b9419b13b..35292b58c --- a/src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts +++ b/src/views/Gantt/components/GanttEdit/hooks/ganttEdit.ts @@ -1,389 +1,389 @@ -import { Group, Image, Text, CheckBox, Rect } from '@visactor/vtable/es/vrender' - -import { useDialog } from 'naive-ui' -import { Gantt, tools, TYPES } from '@visactor/vtable-gantt' -import { getMainGantt, getSubGantt } from '@/api/Gantt' - -type GanttParams = { - route?: any - router?: any -} -let ganttInstance: null | Gantt = null -const bgColor = '#1c202c' -const headerBgColor = '#33566f22' -const textColor = '#65c5e7' -const textColorWithOp = '#75fbfd22' -const useGanttEdit = ({ router, route }: GanttParams) => { - const { subId } = route.params - const records = ref([]) - const dialog = useDialog() - - onMounted(() => { - getGanttData() - }) - async function getGanttData() { - if (subId) { - const res = await getSubGantt(subId) - records.value = res - ganttInstance?.setRecords(records.value) - } else { - const res = await getMainGantt() - // console.log(res, '----') - records.value = res - ganttInstance?.setRecords(records.value) - } - } - function renderMainTask(dom: HTMLElement) { - const option = getOption() - ganttInstance = new Gantt(dom, option) - window['ganttInstance'] = ganttInstance - console.log(ganttInstance) - } - function getOption(): TYPES.GanttConstructorOptions { - const option = { - records: records.value, - taskListTable: renderTaskListTable(), - tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange, - - frame: { - outerFrameStyle: { - borderLineWidth: 2, - borderColor: textColor, - cornerRadius: 3, - }, - // verticalSplitLineHighlight: { - // lineColor: 'green', - // lineWidth: 3 - // } - }, - grid: { - // backgroundColor: bgColor, - horizontalLine: { - lineWidth: 1, - lineColor: textColorWithOp, - }, - verticalLine: { - lineWidth: 1, - lineColor: textColorWithOp, - lineDash: [4, 8], - }, - }, - taskList: { - // backgroundColor: bgColor, - headerStyle: { - borderColor: '#e1e4e8', - borderLineWidth: 0, - fontSize: 18, - fontWeight: 'bold', - color: 'red', - }, - }, - headerRowHeight: 59, - rowHeight: subId ? 200 : 100, - taskBar: renderTaskBar(), - timelineHeader: { - backgroundColor: headerBgColor, - colWidth: 150, - verticalLine: { - lineColor: textColorWithOp, - lineWidth: 1, - lineDash: [4, 2], - }, - horizontalLine: { - lineColor: textColorWithOp, - lineWidth: 1, - lineDash: [4, 2], - }, - scales: getTimeScales('day'), - }, - minDate: '2024-11-14', - maxDate: '2024-12-30', - - scrollStyle: { - scrollRailColor: 'RGBA(246,246,246,0)', - visible: 'focus', - width: 6, - scrollSliderCornerRadius: 2, - scrollSliderColor: 'rgba(255,255,255,0.25)', - }, - underlayBackgroundColor: bgColor, - } - return option as TYPES.GanttConstructorOptions - } - function renderColumn() { - const columns = [ - { - field: 'name', - title: subId ? '事件类型' : '事件主体', - width: '120', - mergeCell: true, - }, - ] - // if (subId) { - // columns.unshift({ - // field: 'isChecked', - // title: '', - // width: '60', - // headerType: 'checkbox', - // cellType: 'checkbox', - // }) - // } - return columns - } - - function renderTaskListTable() { - const taskListTable = { - columns: renderColumn(), - // tableWidth: 'auto', - theme: { - underlayBackgroundColor: bgColor, - headerStyle: { - borderColor: textColorWithOp, - borderLineWidth: 1, - fontWeight: 'bold', - color: textColor, - bgColor: headerBgColor, - textAlign: 'center', - fontSize: 20, - hover: { - cellBgColor: 'transparent', - }, - }, - - bodyStyle: { - borderColor: textColorWithOp, - textAlign: 'center', - borderLineWidth: 1, - autoWrapText: true, - fontSize: 16, - color: textColor, - bgColor: bgColor, - hover: { - cellBgColor: textColorWithOp, - }, - }, - }, - } - return taskListTable - } - - function renderTaskBar() { - const taskBar = { - resizable: false, - moveable: false, - startDateField: 'start', - endDateField: 'end', - // progressField: 'progress', - barStyle: { width: subId ? 180 : 60 }, - customLayout: args => { - const { width, height, startDate, endDate, taskRecord } = args - - const container = new Group({ - width, - height, - fill: 'transparent', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - // alignItems: 'center', - cursor: 'pointer', - }) - if (!subId) { - container.addEventListener('click', event => { - router.push({ - path: `/gantt/subEdit/${taskRecord.id}`, - }) - }) - } - - if (subId) { - const image = new Image({ - image: taskRecord.avatar, - width: 100, - height: 100, - x: 10, - y: 10, - boundsPadding: [0, 0, 10, 0], - }) - container.add(image) - } - const checkBoxGroup = new Group({ - width, - //height, - fill: 'transparent', - display: 'flex', - }) - container.add(checkBoxGroup) - - // const checkbox = new CheckBox({ - // id: taskRecord.id, - // text: '', - // checked: false, - // }) - // checkBoxGroup.add(checkbox) - - // checkbox.addEventListener('click', event => { - // event.stopPropagation() - // console.log(checkbox, 'checkbox') - // }) - const name = new Text({ - text: taskRecord.name, - fontSize: 16, - fontFamily: 'sans-serif', - fill: textColor, - fontWeight: 'bold', - maxLineWidth: width, - textAlign: 'center', - // boundsPadding: [0, 0, 0, 10], - }) - checkBoxGroup.add(name) - - const editSymbol = new Image({ - width: 20, - height: 20, - fill: '#fff', - image: - '', - boundsPadding: [-2, 0, 0, 10], - cursor: 'pointer', - }) - checkBoxGroup.add(editSymbol) - - editSymbol.addEventListener('click', event => { - event.stopPropagation() - console.log(editSymbol, 'editSymbol') - }) - - const deleteSymbol = new Image({ - width: 20, - height: 20, - fill: '#fff', - image: - '', - boundsPadding: [-2, 0, 0, 10], - cursor: 'pointer', - }) - checkBoxGroup.add(deleteSymbol) - - deleteSymbol.addEventListener('click', event => { - event.stopPropagation() - // console.log(dialog, '----') - dialog.warning({ - title: '警告', - content: '确认删除当前事件？', - positiveText: '确定', - negativeText: '取消', - onPositiveClick: () => {}, - onNegativeClick: () => {}, - }) - console.log(deleteSymbol, 'deleteSymbol') - }) - - const days = new Text({ - text: `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`, - fontSize: 13, - fontFamily: 'sans-serif', - fill: textColor, - boundsPadding: [10, 0, 0, 0], - }) - container.add(days) - const rect = new Rect({ - width: width, - height: 7, - fill: { - gradient: 'linear', - x0: 0, - y0: 0, - x1: 1, - y1: 0, - stops: [ - { - offset: 0, - color: textColor, - }, - { - offset: 1, - color: textColorWithOp, - }, - ], - }, - boundsPadding: [10, 0, 0, 0], - }) - container.add(rect) - return { - rootContainer: container, - } - }, - hoverBarStyle: { - cornerRadius: 2, - barOverlayColor: textColorWithOp, - }, - selectedBarStyle: { - // cornerRadius: 2, - borderColor: textColorWithOp, - borderLineWidth: 2, - }, - } - return taskBar - } - function renderGroup(opt: IGroupGraphicAttribute) { - return new Group(opt) - } - - function renderText(opt: ITextGraphicAttribute) { - return new Text(opt) - } - - function renderImage(opt: IImageGraphicAttribute) { - return new Image(opt) - } - - function changeTimeScales(scale: TYPES.ITimelineScale['unit']) { - const scales = getTimeScales(scale) - ganttInstance && ganttInstance.updateScales(scales) - } - - function getTimeScales( - scale: TYPES.ITimelineScale['unit'] - ): TYPES.ITimelineScale[] { - return [ - { - unit: scale, - step: 1, - customLayout: args => { - const { width, height, startDate } = args - const container = new Group({ - width, - height, - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - flexWrap: 'nowrap', - }) - - const day = new Text({ - text: - scale === 'day' - ? startDate.toLocaleDateString() - : startDate.toLocaleTimeString(), - fontSize: 14, - fontWeight: 'bold', - fontFamily: 'sans-serif', - fill: textColor, - textAlign: 'center', - maxLineWidth: width, - // boundsPadding: [25, 12, 10, 12], - }) - container.add(day) - return { - rootContainer: container, - } - }, - }, - ] - } - return { renderMainTask, changeTimeScales } -} - -export default useGanttEdit +import { Group, Image, Text, CheckBox, Rect } from '@visactor/vtable/es/vrender' + +import { useDialog } from 'naive-ui' +import { Gantt, tools, TYPES } from '@visactor/vtable-gantt' +import { getMainGantt, getSubGantt } from '@/api/Gantt' + +type GanttParams = { + route?: any + router?: any +} +let ganttInstance: null | Gantt = null +const bgColor = '#1c202c' +const headerBgColor = '#33566f22' +const textColor = '#65c5e7' +const textColorWithOp = '#75fbfd22' +const useGanttEdit = ({ router, route }: GanttParams) => { + const { subId } = route.params + const records = ref([]) + const dialog = useDialog() + + onMounted(() => { + getGanttData() + }) + async function getGanttData() { + if (subId) { + const res = await getSubGantt(subId) + records.value = res + ganttInstance?.setRecords(records.value) + } else { + const res = await getMainGantt() + // console.log(res, '----') + records.value = res + ganttInstance?.setRecords(records.value) + } + } + function renderMainTask(dom: HTMLElement) { + const option = getOption() + ganttInstance = new Gantt(dom, option) + window['ganttInstance'] = ganttInstance + console.log(ganttInstance) + } + function getOption(): TYPES.GanttConstructorOptions { + const option = { + records: records.value, + taskListTable: renderTaskListTable(), + tasksShowMode: TYPES.TasksShowMode.Sub_Tasks_Arrange, + + frame: { + outerFrameStyle: { + borderLineWidth: 2, + borderColor: textColor, + cornerRadius: 3, + }, + // verticalSplitLineHighlight: { + // lineColor: 'green', + // lineWidth: 3 + // } + }, + grid: { + // backgroundColor: bgColor, + horizontalLine: { + lineWidth: 1, + lineColor: textColorWithOp, + }, + verticalLine: { + lineWidth: 1, + lineColor: textColorWithOp, + lineDash: [4, 8], + }, + }, + taskList: { + // backgroundColor: bgColor, + headerStyle: { + borderColor: '#e1e4e8', + borderLineWidth: 0, + fontSize: 18, + fontWeight: 'bold', + color: 'red', + }, + }, + headerRowHeight: 59, + rowHeight: subId ? 200 : 100, + taskBar: renderTaskBar(), + timelineHeader: { + backgroundColor: headerBgColor, + colWidth: 150, + verticalLine: { + lineColor: textColorWithOp, + lineWidth: 1, + lineDash: [4, 2], + }, + horizontalLine: { + lineColor: textColorWithOp, + lineWidth: 1, + lineDash: [4, 2], + }, + scales: getTimeScales('day'), + }, + minDate: '2024-11-14', + maxDate: '2024-12-30', + + scrollStyle: { + scrollRailColor: 'RGBA(246,246,246,0)', + visible: 'focus', + width: 6, + scrollSliderCornerRadius: 2, + scrollSliderColor: 'rgba(255,255,255,0.25)', + }, + underlayBackgroundColor: bgColor, + } + return option as TYPES.GanttConstructorOptions + } + function renderColumn() { + const columns = [ + { + field: 'name', + title: subId ? '事件类型' : '事件主体', + width: '120', + mergeCell: true, + }, + ] + // if (subId) { + // columns.unshift({ + // field: 'isChecked', + // title: '', + // width: '60', + // headerType: 'checkbox', + // cellType: 'checkbox', + // }) + // } + return columns + } + + function renderTaskListTable() { + const taskListTable = { + columns: renderColumn(), + // tableWidth: 'auto', + theme: { + underlayBackgroundColor: bgColor, + headerStyle: { + borderColor: textColorWithOp, + borderLineWidth: 1, + fontWeight: 'bold', + color: textColor, + bgColor: headerBgColor, + textAlign: 'center', + fontSize: 20, + hover: { + cellBgColor: 'transparent', + }, + }, + + bodyStyle: { + borderColor: textColorWithOp, + textAlign: 'center', + borderLineWidth: 1, + autoWrapText: true, + fontSize: 16, + color: textColor, + bgColor: bgColor, + hover: { + cellBgColor: textColorWithOp, + }, + }, + }, + } + return taskListTable + } + + function renderTaskBar() { + const taskBar = { + resizable: false, + moveable: false, + startDateField: 'start', + endDateField: 'end', + // progressField: 'progress', + barStyle: { width: subId ? 180 : 60 }, + customLayout: args => { + const { width, height, startDate, endDate, taskRecord } = args + + const container = new Group({ + width, + height, + fill: 'transparent', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + // alignItems: 'center', + cursor: 'pointer', + }) + if (!subId) { + container.addEventListener('click', event => { + router.push({ + path: `/gantt/subEdit/${taskRecord.id}`, + }) + }) + } + + if (subId) { + const image = new Image({ + image: taskRecord.avatar, + width: 100, + height: 100, + x: 10, + y: 10, + boundsPadding: [0, 0, 10, 0], + }) + container.add(image) + } + const checkBoxGroup = new Group({ + width, + //height, + fill: 'transparent', + display: 'flex', + }) + container.add(checkBoxGroup) + + // const checkbox = new CheckBox({ + // id: taskRecord.id, + // text: '', + // checked: false, + // }) + // checkBoxGroup.add(checkbox) + + // checkbox.addEventListener('click', event => { + // event.stopPropagation() + // console.log(checkbox, 'checkbox') + // }) + const name = new Text({ + text: taskRecord.name, + fontSize: 16, + fontFamily: 'sans-serif', + fill: textColor, + fontWeight: 'bold', + maxLineWidth: width, + textAlign: 'center', + // boundsPadding: [0, 0, 0, 10], + }) + checkBoxGroup.add(name) + + const editSymbol = new Image({ + width: 20, + height: 20, + fill: '#fff', + image: + '', + boundsPadding: [-2, 0, 0, 10], + cursor: 'pointer', + }) + checkBoxGroup.add(editSymbol) + + editSymbol.addEventListener('click', event => { + event.stopPropagation() + console.log(editSymbol, 'editSymbol') + }) + + const deleteSymbol = new Image({ + width: 20, + height: 20, + fill: '#fff', + image: + '', + boundsPadding: [-2, 0, 0, 10], + cursor: 'pointer', + }) + checkBoxGroup.add(deleteSymbol) + + deleteSymbol.addEventListener('click', event => { + event.stopPropagation() + // console.log(dialog, '----') + dialog.warning({ + title: '警告', + content: '确认删除当前事件？', + positiveText: '确定', + negativeText: '取消', + onPositiveClick: () => {}, + onNegativeClick: () => {}, + }) + console.log(deleteSymbol, 'deleteSymbol') + }) + + const days = new Text({ + text: `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`, + fontSize: 13, + fontFamily: 'sans-serif', + fill: textColor, + boundsPadding: [10, 0, 0, 0], + }) + container.add(days) + const rect = new Rect({ + width: width, + height: 7, + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 1, + y1: 0, + stops: [ + { + offset: 0, + color: textColor, + }, + { + offset: 1, + color: textColorWithOp, + }, + ], + }, + boundsPadding: [10, 0, 0, 0], + }) + container.add(rect) + return { + rootContainer: container, + } + }, + hoverBarStyle: { + cornerRadius: 2, + barOverlayColor: textColorWithOp, + }, + selectedBarStyle: { + // cornerRadius: 2, + borderColor: textColorWithOp, + borderLineWidth: 2, + }, + } + return taskBar + } + function renderGroup(opt: IGroupGraphicAttribute) { + return new Group(opt) + } + + function renderText(opt: ITextGraphicAttribute) { + return new Text(opt) + } + + function renderImage(opt: IImageGraphicAttribute) { + return new Image(opt) + } + + function changeTimeScales(scale: TYPES.ITimelineScale['unit']) { + const scales = getTimeScales(scale) + ganttInstance && ganttInstance.updateScales(scales) + } + + function getTimeScales( + scale: TYPES.ITimelineScale['unit'] + ): TYPES.ITimelineScale[] { + return [ + { + unit: scale, + step: 1, + customLayout: args => { + const { width, height, startDate } = args + const container = new Group({ + width, + height, + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + flexWrap: 'nowrap', + }) + + const day = new Text({ + text: + scale === 'day' + ? startDate.toLocaleDateString() + : startDate.toLocaleTimeString(), + fontSize: 14, + fontWeight: 'bold', + fontFamily: 'sans-serif', + fill: textColor, + textAlign: 'center', + maxLineWidth: width, + // boundsPadding: [25, 12, 10, 12], + }) + container.add(day) + return { + rootContainer: container, + } + }, + }, + ] + } + return { renderMainTask, changeTimeScales } +} + +export default useGanttEdit diff --git a/src/views/Gantt/components/GanttEdit/index.jsx b/src/views/Gantt/components/GanttEdit/index.jsx old mode 100644 new mode 100755 index e8cef8cff..6fec90029 --- a/src/views/Gantt/components/GanttEdit/index.jsx +++ b/src/views/Gantt/components/GanttEdit/index.jsx @@ -1,29 +1,29 @@ -import useGanttEdit from './hooks/ganttEdit' -import { useRouter, useRoute } from 'vue-router' - -export default defineComponent({ - props: { - scale: { - type: String, - default: 'day', - }, - }, - setup(props) { - const router = useRouter() - const route = useRoute() - const { renderMainTask, changeTimeScales } = useGanttEdit({ route, router }) - - onMounted(() => { - nextTick(() => { - renderMainTask(document.querySelector('#tableContainer')) - }) - }) - watch( - () => props.scale, - val => { - changeTimeScales(val) - } - ) - return () =>
- }, -}) +import useGanttEdit from './hooks/ganttEdit' +import { useRouter, useRoute } from 'vue-router' + +export default defineComponent({ + props: { + scale: { + type: String, + default: 'day', + }, + }, + setup(props) { + const router = useRouter() + const route = useRoute() + const { renderMainTask, changeTimeScales } = useGanttEdit({ route, router }) + + onMounted(() => { + nextTick(() => { + renderMainTask(document.querySelector('#tableContainer')) + }) + }) + watch( + () => props.scale, + val => { + changeTimeScales(val) + } + ) + return () =>
+ }, +}) diff --git a/src/views/Gantt/components/MainGantt/index.jsx b/src/views/Gantt/components/MainGantt/index.jsx old mode 100644 new mode 100755 index 698769dfc..e20aacfb3 --- a/src/views/Gantt/components/MainGantt/index.jsx +++ b/src/views/Gantt/components/MainGantt/index.jsx @@ -1,48 +1,75 @@ -import { useRouter } from 'vue-router' -import { - NDatePicker, - NRadioButton, - NRadioGroup, - NButton, - NSelect, -} from 'naive-ui' -import GanttCom from '../Gantt' - -export default defineComponent({ - setup() { - const range = ref() - const value = ref('day') - const type = ref() - - const router = useRouter() - const editEvent = () => { - console.log(router) - router.push('/gantt/mainEdit') - } - return () => ( - <> -
- - - - - - - {/* - 编辑事件 - */} -
- - - ) - }, -}) +import { useRouter } from 'vue-router' +import { + NDatePicker, + NRadioButton, + NRadioGroup, + NButton, + NSelect, +} from 'naive-ui' +import GanttCom from '../Gantt' +import { getDDList } from '@/api/Gantt/gantt' +import { onBeforeMount } from 'vue' + +export default defineComponent({ + setup() { + const range = ref([new Date('2000-01-01').getTime(), Date.now()]) + const value = ref('year') + const types = ref([]) + + const router = useRouter() + const editEvent = () => { + console.log(router) + router.push('/gantt/mainEdit') + } + + onBeforeMount(async () => { + await getDDOptions() + }) + + const ddOptions = ref([]) + async function getDDOptions() { + const { code, data } = await getDDList() + if (code === 200) { + ddOptions.value = data.list + // types.value = ddOptions.value.map(item => item.id) + } + } + + const ganttRef = ref(null) + function searchGanttData() { + ganttRef.value.refresh = true + } + + return () => ( + <> +
+ + {/* + + + */} + + {/* + 编辑事件 + */} + + 搜索 + +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/MainGantt1/index.jsx b/src/views/Gantt/components/MainGantt1/index.jsx new file mode 100755 index 000000000..5c683c890 --- /dev/null +++ b/src/views/Gantt/components/MainGantt1/index.jsx @@ -0,0 +1,48 @@ +import { useRouter } from 'vue-router' +import { + NDatePicker, + NRadioButton, + NRadioGroup, + NButton, + NSelect, +} from 'naive-ui' +import GanttCom from '../Gantt' + +export default defineComponent({ + setup() { + const range = ref() + const value = ref('day') + const type = ref() + + const router = useRouter() + const editEvent = () => { + console.log(router) + router.push('/gantt/mainEdit') + } + return () => ( + <> +
+ + + + + + + {/* + 编辑事件 + */} +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/MainGantt2/index.jsx b/src/views/Gantt/components/MainGantt2/index.jsx new file mode 100755 index 000000000..2e3d5ea5f --- /dev/null +++ b/src/views/Gantt/components/MainGantt2/index.jsx @@ -0,0 +1,83 @@ + import { useRouter } from 'vue-router' +import { + NDatePicker, + NRadioButton, + NRadioGroup, + NButton, + NSelect, +} from 'naive-ui' +import GanttCom from '../Gantt' +import {getDDList}from '@/api/Gantt/gantt' +import { onBeforeMount } from 'vue' + +export default defineComponent({ + setup() { + const range = ref([new Date('2000-01-01').getTime(), Date.now()]) + const value = ref('year') + const types = ref([]) + + const router = useRouter() + const editEvent = () => { + console.log(router) + router.push('/gantt/mainEdit') + } + + onBeforeMount(async ()=>{ + await getDDOptions() + }) + + const ddOptions = ref([]) + async function getDDOptions (){ + const {code,data} = await getDDList() + if(code === 200) { + ddOptions.value = data.list + types.value = ddOptions.value.map(item=>item.id) + } + } + + + const ganttRef = ref(null) + function searchGanttData(){ + // console.log(ganttRef); + renderMainTask(document.querySelector('#tableContainer'),{ + ids: types.value, + startTime: new Date(range.value[0]).toISOString(), + endTime: new Date(range.value[1]).toISOString() + }) + } + + + + return () => ( + <> +
+ + {/* + + + */} + + {/* + 编辑事件 + */} + + 搜索 + +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/MainGanttEdit/index.jsx b/src/views/Gantt/components/MainGanttEdit/index.jsx old mode 100644 new mode 100755 index 8534ebdfe..22bc882fb --- a/src/views/Gantt/components/MainGanttEdit/index.jsx +++ b/src/views/Gantt/components/MainGanttEdit/index.jsx @@ -1,45 +1,45 @@ -import { NDatePicker, NRadioButton, NRadioGroup, NButton } from 'naive-ui' -import { useRouter } from 'vue-router' -import GanttCom from '../GanttEdit' - -export default defineComponent({ - setup() { - const range = ref() - const value = ref('day') - - const addEvent = () => { - console.log('tianjia --- event') - } - const addTask = () => { - console.log('tianjiarenwu') - } - - const router = useRouter() - const ok = () => { - router.push('/gantt') - } - return () => ( - <> -
- - - - - -
- - 添加事件 - - {/* - 添加任务 - */} - - 完成编辑 - -
-
- - - ) - }, -}) +import { NDatePicker, NRadioButton, NRadioGroup, NButton } from 'naive-ui' +import { useRouter } from 'vue-router' +import GanttCom from '../GanttEdit' + +export default defineComponent({ + setup() { + const range = ref() + const value = ref('day') + + const addEvent = () => { + console.log('tianjia --- event') + } + const addTask = () => { + console.log('tianjiarenwu') + } + + const router = useRouter() + const ok = () => { + router.push('/gantt') + } + return () => ( + <> +
+ + + + + +
+ + 添加事件 + + {/* + 添加任务 + */} + + 完成编辑 + +
+
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/SubGantt/index.jsx b/src/views/Gantt/components/SubGantt/index.jsx old mode 100644 new mode 100755 index 3729f5594..a936b7cbe --- a/src/views/Gantt/components/SubGantt/index.jsx +++ b/src/views/Gantt/components/SubGantt/index.jsx @@ -1,33 +1,33 @@ -import { NButton } from 'naive-ui' -import GanttCom from '../Gantt' -import { useRouter } from 'vue-router' - -export default defineComponent({ - setup() { - const router = useRouter() - - const value = ref('day') - - const showView = () => { - // getCheckboxState - const checked = ganttInstance.taskListTableInstance?.getCheckboxState() - console.log(checked) - } - - return () => ( - <> -
- 态势展示 - { - router.go(-1) - }} - > - 返回 - -
- - - ) - }, -}) +import { NButton } from 'naive-ui' +import GanttCom from '../Gantt' +import { useRouter } from 'vue-router' + +export default defineComponent({ + setup() { + const router = useRouter() + + const value = ref('day') + + const showView = () => { + // getCheckboxState + const checked = ganttInstance.taskListTableInstance?.getCheckboxState() + console.log(checked) + } + + return () => ( + <> +
+ 态势展示 + { + router.go(-1) + }} + > + 返回 + +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/SubGanttEdit/index.jsx b/src/views/Gantt/components/SubGanttEdit/index.jsx old mode 100644 new mode 100755 index 1e48a1019..e29c01365 --- a/src/views/Gantt/components/SubGanttEdit/index.jsx +++ b/src/views/Gantt/components/SubGanttEdit/index.jsx @@ -1,33 +1,33 @@ -import { NButton } from 'naive-ui' -import GanttCom from '../GanttEdit' -import { useRouter } from 'vue-router' - -export default defineComponent({ - setup() { - const router = useRouter() - - const value = ref('day') - - const showView = () => { - // getCheckboxState - const checked = ganttInstance.taskListTableInstance?.getCheckboxState() - console.log(checked) - } - - return () => ( - <> -
- {/* 态势展示 */} - { - router.go(-1) - }} - > - 返回 - -
- - - ) - }, -}) +import { NButton } from 'naive-ui' +import GanttCom from '../GanttEdit' +import { useRouter } from 'vue-router' + +export default defineComponent({ + setup() { + const router = useRouter() + + const value = ref('day') + + const showView = () => { + // getCheckboxState + const checked = ganttInstance.taskListTableInstance?.getCheckboxState() + console.log(checked) + } + + return () => ( + <> +
+ {/* 态势展示 */} + { + router.go(-1) + }} + > + 返回 + +
+ + + ) + }, +}) diff --git a/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts b/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts old mode 100644 new mode 100755 index 2c854f7bf..f441a577a --- a/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts +++ b/src/views/Gantt/components/TaskList/components/NewTask/hooks.ts @@ -1,15 +1,15 @@ -const showNewTask = ref(false) - -const curTaskData = ref({ - name: '', - description: '', - checkedEvent: [], -}) -const useTask = () => { - return { - showNewTask, - curTaskData, - } -} - -export default useTask +const showNewTask = ref(false) + +const curTaskData = ref({ + name: '', + description: '', + checkedEvent: [], +}) +const useTask = () => { + return { + showNewTask, + curTaskData, + } +} + +export default useTask diff --git a/src/views/Gantt/components/TaskList/components/NewTask/index.jsx b/src/views/Gantt/components/TaskList/components/NewTask/index.jsx old mode 100644 new mode 100755 index 2276dd340..dada96a52 --- a/src/views/Gantt/components/TaskList/components/NewTask/index.jsx +++ b/src/views/Gantt/components/TaskList/components/NewTask/index.jsx @@ -1,118 +1,118 @@ -import { NForm, NFormItem, NInput, NDataTable, NButton } from 'naive-ui' -import ModalCom from '@/components/Modal/index.vue' -import { getMainGantt } from '@/api/gantt' -import useTask from './hooks' -export default defineComponent({ - // props: { - // show: { - // type: Boolean, - // default: false, - // }, - // }, - setup() { - // const checkedRowKeys = ref([]) - // watch(checkedRowKeys, newval => { - // console.log(newval, '-----') - // }) - - const columns = [ - { type: 'selection' }, - { - title: '事件名称', - key: 'name', - width: 220, - // render: row => { - // return ( - //
- // - // - // - // {row.name} - //
- // ) - // }, - }, - { - title: '开始时间', - key: 'start', - }, - { - title: '结束时间', - key: 'end', - }, - // { - // title: '类型', - // key: 'type', - // }, - { - title: '图片', - key: 'avatar', - render(row) { - if (row.avatar) { - return - } else { - return - - } - }, - }, - ] - - const tableData = ref([]) - onMounted(async () => { - const res = await getMainGantt() - tableData.value = res - }) - const { showNewTask, curTaskData } = useTask() - - const close = () => { - showNewTask.value = false - console.log(curTaskData, '---') - } - - // watch( - // showNewTask, - // show => { - // if (show) { - // taskData.value = { - // name: '', - // description: '', - // checkedEvent: [], - // } - // } - // }, - // { immediate: true } - // ) - - return () => ( - - - - - - - - - - row.name} - /> - - -
- 取消 - 确认 -
- - ) - }, -}) +import { NForm, NFormItem, NInput, NDataTable, NButton } from 'naive-ui' +import ModalCom from '@/components/Modal/index.vue' +import { getMainGantt } from '@/api/gantt' +import useTask from './hooks' +export default defineComponent({ + // props: { + // show: { + // type: Boolean, + // default: false, + // }, + // }, + setup() { + // const checkedRowKeys = ref([]) + // watch(checkedRowKeys, newval => { + // console.log(newval, '-----') + // }) + + const columns = [ + { type: 'selection' }, + { + title: '事件名称', + key: 'name', + width: 220, + // render: row => { + // return ( + //
+ // + // + // + // {row.name} + //
+ // ) + // }, + }, + { + title: '开始时间', + key: 'start', + }, + { + title: '结束时间', + key: 'end', + }, + // { + // title: '类型', + // key: 'type', + // }, + { + title: '图片', + key: 'avatar', + render(row) { + if (row.avatar) { + return + } else { + return - + } + }, + }, + ] + + const tableData = ref([]) + onMounted(async () => { + const res = await getMainGantt() + tableData.value = res + }) + const { showNewTask, curTaskData } = useTask() + + const close = () => { + showNewTask.value = false + console.log(curTaskData, '---') + } + + // watch( + // showNewTask, + // show => { + // if (show) { + // taskData.value = { + // name: '', + // description: '', + // checkedEvent: [], + // } + // } + // }, + // { immediate: true } + // ) + + return () => ( + + + + + + + + + + row.name} + /> + + +
+ 取消 + 确认 +
+ + ) + }, +}) diff --git a/src/views/Gantt/components/TaskList/index.jsx b/src/views/Gantt/components/TaskList/index.jsx old mode 100644 new mode 100755 index e266639ab..833da29b3 --- a/src/views/Gantt/components/TaskList/index.jsx +++ b/src/views/Gantt/components/TaskList/index.jsx @@ -1,172 +1,172 @@ -import { NDataTable, NIcon, NButton, NTag } from 'naive-ui' -import { useTree } from '@/utils/tree' -import { getTask } from '@/api/gantt' -import { - HelpCircleOutline, - CreateOutline, - TrashBinOutline, - AddCircleOutline, - EnterOutline, -} from '@vicons/ionicons5' -import useTask from './components/NewTask/hooks' - -export default defineComponent({ - setup() { - const dict = window.settings.gantt - const columns = [ - { - title: '任务名称/事件名称', - key: 'name', - width: 'auto', - render: row => { - return ( -
- {row.type && ( - - {dict[row.type].label} - - )} - {row.name} -
- ) - }, - }, - { - title: '开始时间', - key: 'start', - }, - { - title: '结束时间', - key: 'end', - }, - // { - // title: '类型', - // key: 'type', - // render(row) { - // return ( - // row.type && ( - // - // {dict[row.type].label} - // - // ) - // ) - // }, - // }, - { - title: '图片', - key: 'avatar', - render(row) { - if (row.avatar) { - return - } else { - return - - } - }, - }, - { - title: '操作', - key: 'action', - render(row) { - return ( -
- {row.type === 'task' ? ( - <> - editTask(row)} - > - - - - 进入任务 - - editTask(row)} - > - - - - 编辑 - - - ) : null} - {/* {!row.avatar ? ( - handleEdit(row)} - > - - - - - ) : ( - <> - )} */} - - {/* handleEdit(row)} - > - - - - */} -
- ) - }, - }, - ] - const tableData = ref([]) - const { getAllKeys } = useTree() - const expandedRowKeys = ref([]) - onMounted(async () => { - await getTaskList() - }) - - async function getTaskList() { - const res = await getTask() - tableData.value = res - expandedRowKeys.value = getAllKeys(tableData.value, 'name') - } - - const { showNewTask, curTaskData } = useTask() - function editTask(row) { - showNewTask.value = true - curTaskData.value = { - ...row, - checkedEvent: getAllKeys(row.children, 'name'), - } - } - - return () => ( - row.name} - /> - ) - }, -}) +import { NDataTable, NIcon, NButton, NTag } from 'naive-ui' +import { useTree } from '@/utils/tree' +import { getTask } from '@/api/gantt' +import { + HelpCircleOutline, + CreateOutline, + TrashBinOutline, + AddCircleOutline, + EnterOutline, +} from '@vicons/ionicons5' +import useTask from './components/NewTask/hooks' + +export default defineComponent({ + setup() { + const dict = window.settings.gantt + const columns = [ + { + title: '任务名称/事件名称', + key: 'name', + width: 'auto', + render: row => { + return ( +
+ {row.type && ( + + {dict[row.type].label} + + )} + {row.name} +
+ ) + }, + }, + { + title: '开始时间', + key: 'start', + }, + { + title: '结束时间', + key: 'end', + }, + // { + // title: '类型', + // key: 'type', + // render(row) { + // return ( + // row.type && ( + // + // {dict[row.type].label} + // + // ) + // ) + // }, + // }, + { + title: '图片', + key: 'avatar', + render(row) { + if (row.avatar) { + return + } else { + return - + } + }, + }, + { + title: '操作', + key: 'action', + render(row) { + return ( +
+ {row.type === 'task' ? ( + <> + editTask(row)} + > + + + + 进入任务 + + editTask(row)} + > + + + + 编辑 + + + ) : null} + {/* {!row.avatar ? ( + handleEdit(row)} + > + + + + + ) : ( + <> + )} */} + + {/* handleEdit(row)} + > + + + + */} +
+ ) + }, + }, + ] + const tableData = ref([]) + const { getAllKeys } = useTree() + const expandedRowKeys = ref([]) + onMounted(async () => { + await getTaskList() + }) + + async function getTaskList() { + const res = await getTask() + tableData.value = res + expandedRowKeys.value = getAllKeys(tableData.value, 'name') + } + + const { showNewTask, curTaskData } = useTask() + function editTask(row) { + showNewTask.value = true + curTaskData.value = { + ...row, + checkedEvent: getAllKeys(row.children, 'name'), + } + } + + return () => ( + row.name} + /> + ) + }, +}) diff --git a/src/views/Gantt/index copy.vue b/src/views/Gantt/index copy.vue old mode 100644 new mode 100755 index 6574e9297..e1deeaf9a --- a/src/views/Gantt/index copy.vue +++ b/src/views/Gantt/index copy.vue @@ -1,531 +1,531 @@ - - - + + + diff --git a/src/views/Gantt/index.jsx b/src/views/Gantt/index.jsx old mode 100644 new mode 100755 index 79aa6191a..8a59ad0d0 --- a/src/views/Gantt/index.jsx +++ b/src/views/Gantt/index.jsx @@ -1,154 +1,179 @@ -import { RouterView } from 'vue-router' -import { - NDatePicker, - NButton, - NFloatButton, - NIcon, - NDrawer, - NDrawerContent, - NTabs, - NTabPane, - NSelect, -} from 'naive-ui' -import { ArrowForward } from '@vicons/ionicons5' -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 useTask from './components/TaskList/components/NewTask/hooks' -import { useEvent } from './components/EventList/hooks' -export default defineComponent({ - setup() { - const show = ref(false) - const range = ref() - - const { showNewTask } = useTask() - - const addNewTask = () => { - showNewTask.value = true - } - - const ddList = Array.from({ length: 8 }, (_, i) => ({ - label: `DD-${i + 1}`, - value: `DD-${i + 1}`, - })) - - const dd = ref(`DD-1`) - - const paneClass = `border-1 h-full border-l-0 border-[var(--n-tab-border-color)] !p-2` - - const { showMainEvent, mainEventData } = useEvent() - const addNewMainEvent = () => { - showMainEvent.value = true - mainEventData.value = {} - } - - return () => ( -
-
- -
-
- -
- { - show.value = true - }} - > - - - - - - -
- - {/* -
-
- - - 添加任务 - -
-
- -
-
- */} - -
-
- - - - 添加事件 - -
-
- -
-
- - - {/*
- - -
-
- -
*/} -
- - - - -
- ) - }, -}) +import { RouterView } from 'vue-router' +import { + NDatePicker, + NButton, + NFloatButton, + NIcon, + NDrawer, + NDrawerContent, + NTabs, + NTabPane, + NSelect, +} from 'naive-ui' +import { ArrowForward } from '@vicons/ionicons5' +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 useTask from './components/TaskList/components/NewTask/hooks' +import { useEvent } from './components/EventList/hooks' +import { getSimpList, getSimpTreeList } from '@/api/Gantt' +import { onBeforeMount, nextTick } from 'vue' +export default defineComponent({ + setup() { + const show = ref(false) + + const { showNewTask } = useTask() + + const addNewTask = () => { + showNewTask.value = true + } + async function getSimpListData() { + const res = await getSimpList() + ddList.value = res.data.list + targetId.value = res.data.list[0].id + } + + // const ddList = Array.from({ length: 8 }, (_, i) => ({ + // label: `DD-${i + 1}`, + // value: `DD-${i + 1}`, + // })) + const ddList = ref([]) + + const paneClass = `border-1 h-full border-l-0 border-[var(--n-tab-border-color)] !p-2` + + const { + showMainEvent, + mainEventData, + targetId, + range, + searchTreeList, + tableData, + } = useEvent() + const addNewMainEvent = async () => { + showMainEvent.value = true + // const res = await addNewMainEvent({ }) + mainEventData.value = {} + } + + onBeforeMount(() => { + nextTick(async () => { + await getSimpListData() + await searchTreeList() + }) + }) + + return () => ( +
+
+ +
+
+ +
+ { + show.value = true + }} + > + + + + + + +
+ {/* + +
+
+ + + 添加任务 + +
+
+ +
+
+ + */} +
+
+ + + + 搜索 + + + 添加事件 + +
+
+ +
+
+ {/* + */} + {/*
+ + +
+
+ +
*/} +
+ + + + +
+ ) + }, +}) diff --git a/src/views/Gantt/index.vue b/src/views/Gantt/index.vue old mode 100644 new mode 100755 index bc0b7565a..4318161cf --- a/src/views/Gantt/index.vue +++ b/src/views/Gantt/index.vue @@ -1,7 +1,7 @@ - - - + + + diff --git a/src/views/Mubiao/index.vue b/src/views/Mubiao/index.vue index 9b2a5dbdd..b800678db 100644 --- a/src/views/Mubiao/index.vue +++ b/src/views/Mubiao/index.vue @@ -39,28 +39,19 @@ const { mubiaoMap } = useEntity() // const { showOrHideDdConfig } = useDaodan() const { flyTo } = useEarth() -const latValue = {} const nodeProps = ({ option }: { option: TreeOption }) => { return { onclick: () => { if (option.children) { return } - setTimeout(() => { - if (mubiaoMap.size > 0) { - mubiaoMap.forEach((entity, key) => { - const positions = entity.position._value - const [lon, lat, height] = cartesian32LonLat(positions) - const { - dataId, - // data: { geom }, - } = option - if (checkedKeys.value.includes(dataId as string)) { - flyTo({ lon, lat }) - } - }) - } - }, 500) + const { dataId } = option + if (mubiaoMap.has(dataId)) { + const [lon, lat, height] = cartesian32LonLat( + mubiaoMap.get(dataId).position._value + ) + flyTo({ lon, lat }) + } }, } } diff --git a/src/views/Satellite/hooks/satellite.ts b/src/views/Satellite/hooks/satellite.ts index 6ab530314..f901dc330 100644 --- a/src/views/Satellite/hooks/satellite.ts +++ b/src/views/Satellite/hooks/satellite.ts @@ -13,11 +13,6 @@ interface ISatellite { tle: string } -interface IBaseFilterParam { - treeData: Array - params: Array - paramName: string -} const { filterTreeNodeByField } = useTree() const satelliteList = ref([]) const checkedKeys = ref>([]) @@ -121,6 +116,7 @@ export function useSatellite() { addSatellites, showPoint, showPointUnderSat, + flyToSatellite, } } @@ -147,8 +143,6 @@ function createSatelliteCommunicationPayload(satId: string) { beam.create() - console.log(beam) - if (!satelliteBeamMap.has(satId)) { satelliteBeamMap.set(satId, new Map()) } @@ -198,6 +192,16 @@ async function getSatelliteList() { const checked = JSON.parse(JSON.stringify(checkedKeys.value)) const sateRes = await getSatellite() + // const sateRes = { + // code: '200', + // data: [ + // { + // id: '1', + // name: 'CALSPHERE 1', + // tle: 'CALSPHERE 1\n 1 00900U 64063C 25062.49198022 .00001185 00000+0 12127-2 0 9997\n2 00900 90.2081 61.0113 0023240 278.3857 208.6718 13.75857600 6688', + // }, + // ], + // } const { data, code } = sateRes if (code === '200') { checkedKeys.value = [] @@ -235,3 +239,17 @@ function getAllNodesToPayload() { }) console.log('satellitePayloadShowMap', satellitePayloadShowMap) } + +function flyToSatellite(satId: string) { + const sat = satelliteMap.get(satId)?.entity + if (sat) { + viewer.flyTo(sat, { + duration: 2, + // offset: { + // heading: Cesium.Math.toRadians(option.heading), + // pitch: Cesium.Math.toRadians(option.pitch), + // range: option.range, + // }, + }) + } +} diff --git a/src/views/Satellite/index.vue b/src/views/Satellite/index.vue index 491270454..943026951 100644 --- a/src/views/Satellite/index.vue +++ b/src/views/Satellite/index.vue @@ -4,14 +4,13 @@ import { NButton } from 'naive-ui' import Tree from '@/components/Tree/index.vue' import { useSatellite } from './hooks/satellite' import { showDetailsSatellite } from './components/SatDetail' -import { useEarth } from '../Earth/hooks/earth' -import { useEntity } from '@/hooks/entity' const { satelliteList, checkedKeys, getSatelliteList, addSatellites, + flyToSatellite, } = useSatellite() onMounted(async () => { @@ -21,32 +20,13 @@ onMounted(async () => { watch(checkedKeys, val => { addSatellites(val) }) -const { flyTo } = useEarth() -const { satelliteMap } = useEntity() const nodeProps = ({ option }: { option: TreeOption }) => { - // console.log(option, '卫星option') - return { onclick: () => { - // console.log(satelliteMap, 'satelliteMap') + const { id } = option + id && flyToSatellite(id as string) }, } - // return { - // onclick: () => { - // if (option.children) { - // return - // } - - // const { - // dataId, - // data: { geom }, - // } = option - // const [lon, lat] = parseWKT(geom).coordinates - // if (checkedKeys.value.includes(dataId as string)) { - // flyTo({ lon, lat }) - // } - // }, - // }, } const renderSuffix = ({ option }: { option: TreeOption }) => { // console.log(option)