feat: 资源管理设备状态静态完成，fabric监控信息展示初始化
parent
694c5bdd69
commit
f7402f5822
@ -1,30 +1,72 @@
|
|||||||
|
export const deviceStatusEnums: Record<string, any> = {
|
||||||
|
allStatus: {
|
||||||
|
miniName: '全部',
|
||||||
|
value: '0',
|
||||||
|
color: '',
|
||||||
|
},
|
||||||
|
onlineStatus: {
|
||||||
|
miniName: '在线',
|
||||||
|
value: '1',
|
||||||
|
color: 'success',
|
||||||
|
},
|
||||||
|
outlineStatus: {
|
||||||
|
miniName: '离线',
|
||||||
|
value: '2',
|
||||||
|
color: 'default',
|
||||||
|
},
|
||||||
|
processingStatus: {
|
||||||
|
miniName: '运行中',
|
||||||
|
value: '3',
|
||||||
|
color: 'warning',
|
||||||
|
},
|
||||||
|
errorStatus: {
|
||||||
|
miniName: '故障',
|
||||||
|
value: '4',
|
||||||
|
color: 'error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const resourceDeviceStatusEnums: Record<string, any> = {
|
||||||
|
allStatus: {
|
||||||
export const deviceStatusEnums : Record<string,any> = {
|
miniName: '全部异常',
|
||||||
'allStatus': {
|
value: '0',
|
||||||
miniName: '全部',
|
color: '',
|
||||||
value: '0',
|
renderType: '',
|
||||||
color: ''
|
},
|
||||||
},
|
storageWarn: {
|
||||||
'onlineStatus': {
|
miniName: '存储告警',
|
||||||
miniName: '在线',
|
value: '1',
|
||||||
value: '1',
|
color: 'error',
|
||||||
color: 'success'
|
renderType: 'progress',
|
||||||
},
|
},
|
||||||
'outlineStatus': {
|
GPUWarn: {
|
||||||
miniName: '离线',
|
miniName: 'GPU告警',
|
||||||
value: '2',
|
value: '2',
|
||||||
color: 'default'
|
color: 'success',
|
||||||
},
|
renderType: 'progress',
|
||||||
'processingStatus': {
|
},
|
||||||
miniName: '运行中',
|
memoryWarn: {
|
||||||
value: '3',
|
miniName: '内存告警',
|
||||||
color: 'warning'
|
value: '3',
|
||||||
},
|
color: 'success',
|
||||||
'errorStatus': {
|
renderType: 'progress',
|
||||||
miniName: '故障',
|
},
|
||||||
value: '4',
|
errorStatus: {
|
||||||
color: 'error'
|
miniName: 'CPU告警',
|
||||||
}
|
value: '4',
|
||||||
}
|
color: 'warning',
|
||||||
|
renderType: 'progress',
|
||||||
|
},
|
||||||
|
codeError: {
|
||||||
|
miniName: '代码出错',
|
||||||
|
value: '5',
|
||||||
|
color: 'error',
|
||||||
|
renderType: 'dot',
|
||||||
|
},
|
||||||
|
serveTimeOut: {
|
||||||
|
miniName: '服务器超时',
|
||||||
|
value: '6',
|
||||||
|
color: 'error',
|
||||||
|
renderType: 'dot',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|||||||
@ -0,0 +1,167 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-11-01 13:56:33
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-12-15 16:58:50
|
||||||
|
* @FilePath: \general-ai-platform-web\src\pages\Resource\ModelCategoryList\components\ColumnDrawer.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import { CloseOutlined } from '@ant-design/icons';
|
||||||
|
import { ProColumns, ProDescriptions, ProDescriptionsItemProps } from '@ant-design/pro-components';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export type ColumnDrawProps = {
|
||||||
|
handleDrawer: (id?: any) => void;
|
||||||
|
isShowDetail: boolean;
|
||||||
|
columns: ProColumns<API.ModelCategory>[];
|
||||||
|
currentRow: Record<string, any>;
|
||||||
|
clipPathData: Record<string, any>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
|
||||||
|
const [positionStyle, setPositionStyle] = useState<React.CSSProperties>({});
|
||||||
|
// 生成模型详情卡片位置
|
||||||
|
function initPointPosition() {
|
||||||
|
type Point = { x: number; y: number };
|
||||||
|
type Position = 'left' | 'right' | 'top' | 'bottom';
|
||||||
|
let currPositionStyle: React.CSSProperties = {};
|
||||||
|
const modelInfoPosition: Position[] = ['right'];
|
||||||
|
const maxX = props.clipPathData?.width; // 画布宽度
|
||||||
|
const maxY = props.clipPathData?.height; // 画布高度
|
||||||
|
const x = props.currentRow.baseInfo?.left; // 模型x轴位置
|
||||||
|
const y = props.currentRow.baseInfo?.top; // 模型y轴位置
|
||||||
|
const modelWidth: number = 120; // 模型自身宽度
|
||||||
|
const modelHeight: number = 54; // 模型自身高度
|
||||||
|
const modelInfoWidth: number = 400; // 模型信息卡片宽度
|
||||||
|
const modelInfoHeight: number = 240; // 模型信息卡片高度
|
||||||
|
// if (x < 0 || x > maxX || y < 0 || y > maxY) {
|
||||||
|
// // 模型超过范围
|
||||||
|
// }
|
||||||
|
if (x > maxX / 2) {
|
||||||
|
modelInfoPosition.push('left');
|
||||||
|
// if (x < maxX / 2) {
|
||||||
|
// modelInfoPosition.push('left');
|
||||||
|
// } else {
|
||||||
|
// modelInfoPosition.push('right');
|
||||||
|
// }
|
||||||
|
} else {
|
||||||
|
modelInfoPosition.push('right');
|
||||||
|
// if (y < maxY / 2) {
|
||||||
|
// modelInfoPosition.push('top');
|
||||||
|
// } else {
|
||||||
|
// modelInfoPosition.push('bottom');
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
console.log(props.currentRow, 'currentRow');
|
||||||
|
if (modelInfoPosition.includes('left')) {
|
||||||
|
let topValue = y - modelInfoHeight / 2 + modelHeight / 2
|
||||||
|
if(topValue> maxY - modelInfoHeight){
|
||||||
|
topValue = maxY - modelInfoHeight
|
||||||
|
}
|
||||||
|
if(topValue<0){
|
||||||
|
topValue = 0
|
||||||
|
}
|
||||||
|
currPositionStyle = {
|
||||||
|
top: topValue,
|
||||||
|
left: x - modelInfoWidth - 10,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
let topValue = y - modelInfoHeight / 2 + modelHeight / 2
|
||||||
|
if(topValue> maxY - modelInfoHeight){
|
||||||
|
topValue = maxY - modelInfoHeight
|
||||||
|
}
|
||||||
|
if(topValue<0){
|
||||||
|
topValue = 0
|
||||||
|
}
|
||||||
|
currPositionStyle = {
|
||||||
|
top: topValue,
|
||||||
|
left: x + modelWidth + 10,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
setPositionStyle(currPositionStyle);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.currentRow) {
|
||||||
|
initPointPosition();
|
||||||
|
}
|
||||||
|
}, [props.currentRow, props.clipPathData]);
|
||||||
|
return props.isShowDetail ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
background: '#fff',
|
||||||
|
borderRadius: 4,
|
||||||
|
width: 400,
|
||||||
|
boxShadow: '0px 8px 12px rgba(0, 0, 0, 0.25)',
|
||||||
|
border: '1px solid #eee',
|
||||||
|
...positionStyle,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
padding: '16px 24px',
|
||||||
|
borderBottom: '1px solid #eee',
|
||||||
|
color: '#1E1E1E',
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 700,
|
||||||
|
marginBottom: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>设备信息</span>
|
||||||
|
<CloseOutlined onClick={() => props.handleDrawer()} />
|
||||||
|
</div>
|
||||||
|
<ProDescriptions
|
||||||
|
style={{
|
||||||
|
padding: '0 24px',
|
||||||
|
}}
|
||||||
|
column={2}
|
||||||
|
dataSource={props.currentRow || {}}
|
||||||
|
columns={props.columns as ProDescriptionsItemProps<API.ModelCategory>[]}
|
||||||
|
></ProDescriptions>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
|
||||||
|
// <Modal
|
||||||
|
// title="设备信息"
|
||||||
|
// mask={false}
|
||||||
|
|
||||||
|
// open={props.isShowDetail}
|
||||||
|
// width={500}
|
||||||
|
// footer={null}
|
||||||
|
// onCancel={() => props.handleDrawer()}
|
||||||
|
// >
|
||||||
|
|
||||||
|
// </Modal>
|
||||||
|
// <Drawer
|
||||||
|
// width={500}
|
||||||
|
// open={props.isShowDetail}
|
||||||
|
// onClose={() => {
|
||||||
|
// props.handleDrawer();
|
||||||
|
// }}
|
||||||
|
// closable={true}
|
||||||
|
// >
|
||||||
|
// {props.currentRow?.id && (
|
||||||
|
// <ProDescriptions<API.ModelCategory>
|
||||||
|
// style={{
|
||||||
|
// // paddingLeft: 4,
|
||||||
|
// // paddingRight: 4
|
||||||
|
// }}
|
||||||
|
// column={2}
|
||||||
|
// title={props.currentRow?.id}
|
||||||
|
// request={async () => ({
|
||||||
|
// data: props.currentRow || {},
|
||||||
|
// })}
|
||||||
|
// params={{
|
||||||
|
// id: props.currentRow?.id,
|
||||||
|
// }}
|
||||||
|
// columns={props.columns as ProDescriptionsItemProps<API.ModelCategory>[]}
|
||||||
|
// />
|
||||||
|
// )}
|
||||||
|
// </Drawer>
|
||||||
|
};
|
||||||
|
export { ColumnDrawer };
|
||||||
@ -0,0 +1,204 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-12-12 10:57:54
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-12-15 17:06:36
|
||||||
|
* @FilePath: \general-ai-platform-web\src\pages\FabricView\Room\index.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
|
||||||
|
// import { useUuid } from '@/hooks/useUuid';
|
||||||
|
import { currJson } from '@/testData/fabricRoomList';
|
||||||
|
import { bgImageData } from '@/testData/fabricRoomSvg';
|
||||||
|
import { ProCard } from '@ant-design/pro-components';
|
||||||
|
import { useIntl } from '@umijs/max';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import { fabric } from 'fabric';
|
||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
import { ColumnDrawer } from './components/ColumnDrawer';
|
||||||
|
|
||||||
|
export const ModelCategoryColumns = [
|
||||||
|
{
|
||||||
|
title: '设备ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备代码',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备位置',
|
||||||
|
dataIndex: 'deviceLocation',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备代码',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备代码',
|
||||||
|
dataIndex: 'deviceCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const FabricViewRoom: React.FC = () => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const canvasRef = useRef(null);
|
||||||
|
const itemsRef = useRef(null);
|
||||||
|
const [cvs, setCanvas] = useState(null);
|
||||||
|
const [descriptors, setDescriptors] = useState<Record<string, any>>({});
|
||||||
|
const [category_fk_id_open, set_category_fk_id_open] = useState(false);
|
||||||
|
const [currentModelUserProperty, setCurrentModelUserProperty] = useState<Record<string, any>>({});
|
||||||
|
|
||||||
|
const [changeId, setChangeId] = useState<string[]>([]);
|
||||||
|
const [currentTargetObject, setCurrentTargetObject] = useState<any>(null);
|
||||||
|
|
||||||
|
const [clipPathData, setClipPathData] = useState({
|
||||||
|
width: 1200, // 宽
|
||||||
|
height: 900, // 高
|
||||||
|
});
|
||||||
|
const [jsonData, setJsonData] = useState<Record<string, any>>({});
|
||||||
|
|
||||||
|
/*test */
|
||||||
|
// const { fetchUuid } = useUuid();
|
||||||
|
|
||||||
|
function changeModelStatus() {
|
||||||
|
setChangeId(['2', '3']);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handle_category_fk_id = () => {
|
||||||
|
if (category_fk_id_open) {
|
||||||
|
set_category_fk_id_open(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function closeSelectedModel(targetCvs?: any) {
|
||||||
|
let finalCvs = cvs;
|
||||||
|
if (targetCvs) {
|
||||||
|
finalCvs = targetCvs;
|
||||||
|
}
|
||||||
|
finalCvs.getObjects().forEach((item) => {
|
||||||
|
// if (changeId.includes(item?.userProperty?.id)) {
|
||||||
|
const groupObject = item;
|
||||||
|
// 选中组合对象
|
||||||
|
// canvasObject.setActiveObject(groupObject); // 可以改变 selectable 值
|
||||||
|
finalCvs.requestRenderAll();
|
||||||
|
// 获取组合对象中的子对象
|
||||||
|
const objectsInGroup = groupObject.getObjects();
|
||||||
|
groupObject.item(0).item(1).set({
|
||||||
|
fill: '#DCDCDC',
|
||||||
|
});
|
||||||
|
groupObject.item(1).set({
|
||||||
|
fill: 'rgb(0,0,0)',
|
||||||
|
})
|
||||||
|
finalCvs.renderAll();
|
||||||
|
// 遍历子对象找到要修改的子对象
|
||||||
|
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 初始化加载画布&渲染模型
|
||||||
|
useEffect(() => {
|
||||||
|
const canvasObject = new fabric.Canvas(canvasRef.current);
|
||||||
|
canvasObject.setBackgroundImage(bgImageData.src, canvasObject.renderAll.bind(canvasObject), {
|
||||||
|
width: clipPathData.width,
|
||||||
|
height: clipPathData.height,
|
||||||
|
originX: 'left',
|
||||||
|
originY: 'top',
|
||||||
|
});
|
||||||
|
canvasObject.loadFromJSON(JSON.stringify(currJson), () => {
|
||||||
|
canvasObject.renderAll();
|
||||||
|
// const groupObjectList = canvasObject.getObjects()
|
||||||
|
|
||||||
|
// const groupObject = canvasObject.getObjects()[0];
|
||||||
|
|
||||||
|
// 选中组合对象
|
||||||
|
// console.log(groupObject, 'groupObject', canvasObject.getObjects());
|
||||||
|
// 注册事件监听器
|
||||||
|
canvasObject.on('mouse:down', (event) => {
|
||||||
|
// 获取事件的目标对象
|
||||||
|
const targetObject = event.target;
|
||||||
|
// set_category_fk_id_open(false);
|
||||||
|
|
||||||
|
// 检查目标对象是否为组合对象
|
||||||
|
if (targetObject && targetObject?.userProperty) {
|
||||||
|
// canvasObject.setActiveObject(targetObject);
|
||||||
|
setChangeId([targetObject?.userProperty?.id]);
|
||||||
|
// console.log('mouse:up:', targetObject);
|
||||||
|
setCurrentModelUserProperty(targetObject.userProperty);
|
||||||
|
set_category_fk_id_open(true);
|
||||||
|
}
|
||||||
|
// 检查目标对象是否为组合对象
|
||||||
|
if (targetObject) {
|
||||||
|
setCurrentTargetObject(targetObject);
|
||||||
|
closeSelectedModel(canvasObject);
|
||||||
|
|
||||||
|
// console.log('mouse:down:', );
|
||||||
|
targetObject.item(0).item(1).set({
|
||||||
|
fill: 'blue',
|
||||||
|
});
|
||||||
|
targetObject.item(1).set({
|
||||||
|
fill: 'blue',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
canvasObject.renderAll();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
setCanvas(canvasObject);
|
||||||
|
return () => {
|
||||||
|
canvasObject.dispose();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// TODO_3 需要加个loading效果
|
||||||
|
// import('./Descriptors.json').then((descriptors) => {
|
||||||
|
// setDescriptors(descriptors);
|
||||||
|
// });
|
||||||
|
// console.log(fetchUuid(), 'fetchUuid');
|
||||||
|
if (changeId && changeId.length && !category_fk_id_open) {
|
||||||
|
closeSelectedModel();
|
||||||
|
}
|
||||||
|
}, [changeId, category_fk_id_open]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ProCard
|
||||||
|
gutter={24}
|
||||||
|
extra={
|
||||||
|
<>
|
||||||
|
<Button type="primary" onClick={changeModelStatus}>
|
||||||
|
切换状态
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{/* <ProCard colSpan={4}>
|
||||||
|
<ImageMapItems ref={itemsRef} canvasRef={canvasRef} descriptors={descriptors} />
|
||||||
|
</ProCard> */}
|
||||||
|
<ProCard colSpan={24} style={{ padding: 0, margin: 0 }} bodyStyle={{ padding: 0, margin: 0 }}>
|
||||||
|
<canvas ref={canvasRef} {...clipPathData} style={{ border: '1px dashed #eee' }}></canvas>
|
||||||
|
|
||||||
|
<ColumnDrawer
|
||||||
|
handleDrawer={handle_category_fk_id}
|
||||||
|
isShowDetail={category_fk_id_open}
|
||||||
|
columns={ModelCategoryColumns}
|
||||||
|
currentRow={currentModelUserProperty}
|
||||||
|
clipPathData={clipPathData}
|
||||||
|
/>
|
||||||
|
</ProCard>
|
||||||
|
</ProCard>
|
||||||
|
// 属性预览
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FabricViewRoom;
|
||||||
@ -0,0 +1,158 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-11-06 16:12:17
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-12-15 14:00:33
|
||||||
|
* @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Progress } from 'antd';
|
||||||
|
// import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion';
|
||||||
|
|
||||||
|
// const [tabs, setTabs] = useState([]);
|
||||||
|
// const [projectData, setProjectData] = useState<any>({});
|
||||||
|
// const [tab, setTab] = useState('');
|
||||||
|
// const [modelVersionData, setModelVersionData] = useState<any[]>([]);
|
||||||
|
|
||||||
|
/**styles */
|
||||||
|
const listItemStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#333333',
|
||||||
|
width: '100%',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '4px 0 0',
|
||||||
|
};
|
||||||
|
|
||||||
|
const listItemLabelStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#666666',
|
||||||
|
minWidth: 53
|
||||||
|
};
|
||||||
|
|
||||||
|
const listItemTextStyle = {
|
||||||
|
fontSize: 14,
|
||||||
|
margin: 0,
|
||||||
|
};
|
||||||
|
// 卡片
|
||||||
|
export type UpdateProjectProps = {
|
||||||
|
info: Record<string, any>;
|
||||||
|
// reload: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
type DeviceItemProgress = {
|
||||||
|
label: string;
|
||||||
|
percent: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 进度条
|
||||||
|
// TODO 进度条的边框圆角调整为矩形
|
||||||
|
const DeviceItemProgress: React.FC<DeviceItemProgress> = (props) => {
|
||||||
|
let strokeColor = 'rgb(243,48,5)';
|
||||||
|
switch (props.label) {
|
||||||
|
case '存储告警':
|
||||||
|
strokeColor = 'rgb(243,48,5)';
|
||||||
|
break;
|
||||||
|
case 'GPU告警':
|
||||||
|
case '内存告警':
|
||||||
|
strokeColor = 'rgb(33,169,122)';
|
||||||
|
break;
|
||||||
|
case 'CPU告警':
|
||||||
|
strokeColor = 'rgb(250,173,20)';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ width: '100%', display: 'flex' }} className="rectProgress_box">
|
||||||
|
<span style={listItemLabelStyle}>{props.label}</span>
|
||||||
|
<Progress
|
||||||
|
style={{ padding: 0, margin: 0, borderRadius: 0 }}
|
||||||
|
size={['100%', 10]}
|
||||||
|
percent={props.percent * 100}
|
||||||
|
strokeColor={strokeColor}
|
||||||
|
showInfo={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const DeviceStatusCard: React.FC<UpdateProjectProps> = ({
|
||||||
|
info,
|
||||||
|
}: {
|
||||||
|
info: Record<string, any>;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'left',
|
||||||
|
paddingLeft: 8,
|
||||||
|
paddingRight: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 10 }}>
|
||||||
|
<span style={{ fontWeight: 700, fontSize: 14, paddingRight: 10 }}>苏胜天算法模型</span>
|
||||||
|
<Tag color="#44AEF5">经典算法</Tag>
|
||||||
|
</div> */}
|
||||||
|
<ul
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#E80D0D',
|
||||||
|
padding: '8px 0 0',
|
||||||
|
lineHeight: '18px',
|
||||||
|
margin: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: '#E80D0D',
|
||||||
|
}}
|
||||||
|
></span>
|
||||||
|
<span style={{ paddingLeft: 8 }}>代码出错</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: '#E80D0D',
|
||||||
|
}}
|
||||||
|
></span>
|
||||||
|
<span style={{ paddingLeft: 8 }}>服务超时</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul style={{ width: '100%', marginBottom: 8 }}>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="存储告警" percent={0.79}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="GPU告警" percent={0.18}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="内存告警" percent={0.16}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="CPU告警" percent={0.58}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DeviceStatusCard;
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,147 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-12-12 15:41:56
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-12-15 17:22:03
|
||||||
|
* @FilePath: \general-ai-platform-web\src\testData\fabricRoomList.ts
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { fetchWatchGroupObjects } from './fabricWatchIcons';
|
||||||
|
// 模型状态 在线 离线 告警 故障
|
||||||
|
const startData: Record<string, any> = {
|
||||||
|
modelsList: [
|
||||||
|
{
|
||||||
|
deviceType: '1', // 模型类型 1 设备1 2 设备2
|
||||||
|
id: '1001', // 模型id
|
||||||
|
status: 'watchOnline', //
|
||||||
|
deviceName: '监控设备1', // 模型名称
|
||||||
|
deviceCode: 'code1002',
|
||||||
|
deviceLocation: '客厅',
|
||||||
|
deviceParams: '设备参数',
|
||||||
|
deviceCategory: '控制器',
|
||||||
|
diviceGroup: '组1',
|
||||||
|
baseInfo: {
|
||||||
|
left: 527.0215, // 相对x
|
||||||
|
top: 24.5797, // 相对y
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deviceType: '1', // 模型类型 1 设备1 2 设备2
|
||||||
|
id: '1002', // 模型id
|
||||||
|
status: 'watchError', // 模型状态 在线 离线 告警 故障
|
||||||
|
deviceName: '监控设备2', // 模型名称
|
||||||
|
deviceCode: 'code1001',
|
||||||
|
deviceLocation: '客厅',
|
||||||
|
deviceParams: '设备参数',
|
||||||
|
deviceCategory: '控制器',
|
||||||
|
diviceGroup: '组1',
|
||||||
|
baseInfo: {
|
||||||
|
left: 397.0215, // 相对x
|
||||||
|
top: 444.5797, // 相对y
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deviceType: '1', // 模型类型 1 设备1 2 设备2
|
||||||
|
id: '1003', // 模型id
|
||||||
|
status: 'watchOutline', // 模型状态 在线 离线 告警 故障
|
||||||
|
deviceName: '监控设备2', // 模型名称
|
||||||
|
deviceCode: 'code1001',
|
||||||
|
deviceLocation: '客厅',
|
||||||
|
deviceParams: '设备参数',
|
||||||
|
deviceCategory: '控制器',
|
||||||
|
diviceGroup: '组1',
|
||||||
|
baseInfo: {
|
||||||
|
left: 397.0215, // 相对x
|
||||||
|
top: 144.5797, // 相对y
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deviceType: '1', // 模型类型 1 设备1 2 设备2
|
||||||
|
id: '1004', // 模型id
|
||||||
|
status: 'watchOutline', // 模型状态 在线 离线 告警 故障
|
||||||
|
deviceName: '监控设备2', // 模型名称
|
||||||
|
deviceCode: 'code1001',
|
||||||
|
deviceLocation: '客厅',
|
||||||
|
deviceParams: '设备参数',
|
||||||
|
deviceCategory: '控制器',
|
||||||
|
diviceGroup: '组1',
|
||||||
|
baseInfo: {
|
||||||
|
left: 297.0215, // 相对x
|
||||||
|
top: 644.5797, // 相对y
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deviceType: '1', // 模型类型 1 设备1 2 设备2
|
||||||
|
id: '1005', // 模型id
|
||||||
|
status: 'watchWarn', // 模型状态 在线 离线 告警 故障
|
||||||
|
deviceName: '监控设备2', // 模型名称
|
||||||
|
deviceCode: 'code1001',
|
||||||
|
deviceLocation: '客厅',
|
||||||
|
deviceParams: '设备参数',
|
||||||
|
deviceCategory: '控制器',
|
||||||
|
diviceGroup: '组1',
|
||||||
|
baseInfo: {
|
||||||
|
left: 797.0215, // 相对x
|
||||||
|
top: 844.5797, // 相对y
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const fabricRoomListData: Record<string, any>[] = [];
|
||||||
|
startData.modelsList.forEach((item: Record<string, any>) => {
|
||||||
|
const { baseInfo, ...restInfo } = item;
|
||||||
|
fabricRoomListData.push(
|
||||||
|
JSON.parse(
|
||||||
|
JSON.stringify({
|
||||||
|
...fetchWatchGroupObjects(item),
|
||||||
|
...baseInfo,
|
||||||
|
userProperty: item,
|
||||||
|
selectable: false,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export const currJson = {
|
||||||
|
version: '5.3.0',
|
||||||
|
objects: fabricRoomListData,
|
||||||
|
clipPath: {
|
||||||
|
type: 'rect',
|
||||||
|
version: '5.3.0',
|
||||||
|
originX: 'left',
|
||||||
|
originY: 'top',
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
width: 1200,
|
||||||
|
height: 900,
|
||||||
|
fill: 'rgba(255,255,255,1)',
|
||||||
|
stroke: null,
|
||||||
|
strokeWidth: 0,
|
||||||
|
strokeDashArray: null,
|
||||||
|
strokeLineCap: 'butt',
|
||||||
|
strokeDashOffset: 0,
|
||||||
|
strokeLineJoin: 'miter',
|
||||||
|
strokeUniform: false,
|
||||||
|
strokeMiterLimit: 4,
|
||||||
|
scaleX: 1,
|
||||||
|
scaleY: 1,
|
||||||
|
angle: 0,
|
||||||
|
flipX: false,
|
||||||
|
flipY: false,
|
||||||
|
opacity: 1,
|
||||||
|
shadow: null,
|
||||||
|
visible: true,
|
||||||
|
backgroundColor: '',
|
||||||
|
fillRule: 'nonzero',
|
||||||
|
paintFirst: 'fill',
|
||||||
|
globalCompositeOperation: 'source-over',
|
||||||
|
skewX: 0,
|
||||||
|
skewY: 0,
|
||||||
|
rx: 0,
|
||||||
|
ry: 0,
|
||||||
|
selectable: false,
|
||||||
|
hasControls: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue