diff --git a/src/components/CustomCard/style/index.module.less b/src/components/CustomCard/style/index.module.less index 337c0e2..7647c01 100644 --- a/src/components/CustomCard/style/index.module.less +++ b/src/components/CustomCard/style/index.module.less @@ -2,6 +2,6 @@ transition-property: all; } -.card-custom-hover-style:hover { - transform: translateY(-4px); -} \ No newline at end of file +//.card-custom-hover-style:hover { +// transform: translateY(-4px); +//} \ No newline at end of file diff --git a/src/pages/instance/assets/calendar.svg b/src/pages/instance/assets/calendar.svg new file mode 100644 index 0000000..ceeb8ee --- /dev/null +++ b/src/pages/instance/assets/calendar.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/instance/assets/comments.svg b/src/pages/instance/assets/comments.svg new file mode 100644 index 0000000..b537d09 --- /dev/null +++ b/src/pages/instance/assets/comments.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/instance/assets/content.svg b/src/pages/instance/assets/content.svg new file mode 100644 index 0000000..204c749 --- /dev/null +++ b/src/pages/instance/assets/content.svg @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/instance/assets/increase.svg b/src/pages/instance/assets/increase.svg new file mode 100644 index 0000000..0d261ce --- /dev/null +++ b/src/pages/instance/assets/increase.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/instance/index.tsx b/src/pages/instance/index.tsx index 55f5307..0535de2 100644 --- a/src/pages/instance/index.tsx +++ b/src/pages/instance/index.tsx @@ -1,10 +1,248 @@ import React from 'react'; +import styles from './style/index.module.less'; +import CustomCard from '@/components/CustomCard'; +import Overview from './overview'; +import { Space, Select, Switch, Table, TableColumnProps, Progress } from '@arco-design/web-react'; +import { + IconLoading, + IconCheckCircle, + IconCloseCircle, + IconPauseCircle, + IconMinusCircle, + IconExclamationCircle, + IconEye +} from '@arco-design/web-react/icon'; +import { formatInstanceStatus, formatInstanceType, formatTimestamp } from '@/utils/common'; + +const Option = Select.Option; + + +const columns: TableColumnProps[] = [ + { + title: '实例名称', + dataIndex: 'name' + }, + { + title: '类型', + dataIndex: 'type', + render: (col, record, index) => ( + + {formatInstanceType(record.type)} + + ) + }, + { + title: '启动时间', + dataIndex: 'startTime', + render: (col, record, index) => ( + + {formatTimestamp(record.startTime)} + + ) + }, + { + title: '运行时长', + dataIndex: 'duration', + render: (col, record, index) => ( + + {record.duration}毫秒 + + ) + }, + { + title: '进度', + dataIndex: 'progress', + render: (col, record, index) => ( + + ) + }, + { + title: '运行状态', + dataIndex: 'state', + render: (col, record, index) => ( + + {formatInstanceStatus(record.state)} + {getIcon(record.state)} + + ) + }, + { + + title: '操作', + dataIndex: '', + render: (col, record, index) => ( + + checkInstance(record)} /> + + ) + } +]; + +const data = [ + { + 'appId': '1951085958320037889', + 'appResHistoryId': '1951157955455545345', + 'createBy': '1123598821738675201', + 'createTime': 1754028849000, + 'description': '', + 'duration': 0, + 'endTime': 0, + 'id': '1951164528214003713', + 'name': '复制:复制:轮胎装配流程', + 'nodeNum': 35, + 'progress': 14, + 'runningNum': 5, + 'startTime': 1754028849067, + 'state': 'RUNNING', + 'type': 'MANUAL', + 'updateBy': '1123598821738675201', + 'updateTime': 1754028849000 + }, + { + 'appId': '1951085958320037889', + 'appResHistoryId': '1951157955455545345', + 'createBy': '1123598821738675201', + 'createTime': 1754028826000, + 'description': '', + 'duration': 0, + 'endTime': 0, + 'id': '1951164430486720513', + 'name': '复制:复制:轮胎装配流程', + 'nodeNum': 35, + 'progress': 14, + 'runningNum': 5, + 'startTime': 1754028825767, + 'state': 'RUNNING', + 'type': 'MANUAL', + 'updateBy': '1123598821738675201', + 'updateTime': 1754028826000 + }, + { + 'appId': '1951085958320037889', + 'appResHistoryId': '1951157955455545345', + 'createBy': '1123598821738675201', + 'createTime': 1754028784000, + 'description': '', + 'duration': 0, + 'endTime': 0, + 'id': '1951164255143841793', + 'name': '复制:复制:轮胎装配流程', + 'nodeNum': 35, + 'progress': 14, + 'runningNum': 5, + 'startTime': 1754028783957, + 'state': 'RUNNING', + 'type': 'MANUAL', + 'updateBy': '1123598821738675201', + 'updateTime': 1754028784000 + } +]; + +function checkInstance(instance) { + console.log('instance:', instance); +} + +function getIcon(type) { + switch (type) { + case 'RUNNING': + return ; + case 'SUCCESS': + return ; + case 'FAILURE': + return ; + case 'PAUSED': + return ; + case 'STOPPED': + return ; + case 'KILL': + return ; + default: + return ''; + } +} + +function Selector() { + const cities = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan']; + return ( + + ); +} + +function RunStatus() { + const cities = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan']; + return ( + + ); +} + +function Type() { + const cities = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan']; + return ( + + ); +} + +function generateData() { + const newData = []; + for (let i = 0; i < 11; i++) { + data.forEach((item, index) => { + newData.push({ + ...item, + key: `${item.appId}-${i}` // 确保key唯一 + }); + }); + } + return newData; +}; function Instance() { + const newData = generateData(); return ( <> -
- 应用实例 +
+ + + +
+ 应用： + {Selector()} +
+
+ 运行状态： + {RunStatus()} +
+
+ 类型： + {Type()} +
+
+ 运行时长倒序： + +
+ + + ); diff --git a/src/pages/instance/overview.tsx b/src/pages/instance/overview.tsx new file mode 100644 index 0000000..c024e7a --- /dev/null +++ b/src/pages/instance/overview.tsx @@ -0,0 +1,116 @@ +import React, { useState, useEffect, ReactNode } from 'react'; +import { + Grid, + Card, + Divider, + Skeleton +} from '@arco-design/web-react'; +import styles from './style/overview.module.less'; +import IconCalendar from './assets/calendar.svg'; +import IconComments from './assets/comments.svg'; +import IconContent from './assets/content.svg'; +import IconIncrease from './assets/increase.svg'; + +const { Row, Col } = Grid; + +type StatisticItemType = { + icon?: ReactNode; + title?: ReactNode; + count?: ReactNode; + loading?: boolean; + unit?: ReactNode; +}; + +function StatisticItem(props: StatisticItemType) { + const { icon, title, count, loading, unit } = props; + return ( +
+
{icon}
+
+ +
{title}
+
+ {count} + {unit} +
+ +
+
+ ); +} + +type DataType = { + allContents?: string; + liveContents?: string; + increaseComments?: string; + growthRate?: string; + down?: boolean; +}; + +function Overview() { + const [data, setData] = useState({}); + const [loading, setLoading] = useState(true); + + const fetchData = () => { + setLoading(true); + setData({ + allContents: '1', + liveContents: '1,397', + increaseComments: '1,837', + growthRate: '650' + }); + setLoading(false); + }; + + useEffect(() => { + fetchData(); + }, []); + + return ( + + + + } + title="实例平均处理时间" + count={data.allContents} + loading={loading} + unit="分" + /> + + + + } + title="运行中" + count={data.liveContents} + loading={loading} + unit="个" + /> + + + + } + title="成功数" + count={data.increaseComments} + loading={loading} + unit="个" + /> + + + + } + title="失败数" + count={data.growthRate} + loading={loading} + unit="个" + /> + + + + ); +} + +export default Overview; diff --git a/src/pages/instance/style/index.module.less b/src/pages/instance/style/index.module.less new file mode 100644 index 0000000..1d7c754 --- /dev/null +++ b/src/pages/instance/style/index.module.less @@ -0,0 +1,3 @@ +.instanceContainer { + +} \ No newline at end of file diff --git a/src/pages/instance/style/overview.module.less b/src/pages/instance/style/overview.module.less new file mode 100644 index 0000000..fb7391d --- /dev/null +++ b/src/pages/instance/style/overview.module.less @@ -0,0 +1,75 @@ +.container { + padding: 20px; + + :global(.arco-divider-horizontal) { + border-bottom: 1px solid var(--color-border-1); + } + + :global(.arco-divider-vertical) { + border-left: 1px solid var(--color-border-1); + } +} + +.item { + display: flex; + align-items: center; + padding-left: 20px; + color: var(--color-text-1); +} + +.icon { + display: flex; + align-items: center; + justify-content: center; + width: 54px; + height: 54px; + background-color: var(--color-fill-2); + border-radius: 50%; + margin-right: 12px; +} + +.title { + font-size: 12px; + color: var(--color-text-1); +} + +.count { + font-size: 22px; + font-weight: 600; + color: var(--color-text-1); + + .unit { + font-size: 12px; + font-weight: 400; + color: var(--color-text-2); + margin-left: 8px; + } +} + +.divider { + height: 60px; +} + +.ctw { + display: flex; + justify-content: space-between; + margin-bottom: 16px; +} + +.tempHeadHot { + width: 100%; + height: 250px; + background-color: var(--color-fill-1); +} + +.chart-title { + font-size: 16px; + font-weight: 500; +} + +.chart-sub-title { + font-size: 12px; + font-weight: 400; + margin-left: 4px; + color: var(--color-text-3); +}