/* eslint-disable eqeqeq */
/* eslint-disable react/no-unknown-property */
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Image } from 'antd';
import { fabric } from 'fabric';
import React, { useEffect, useRef, useState } from 'react';
// type
import { ComputePowerPoolItem } from './typing';
// TODO 整个页面的字体、颜色、间距处理
// state
const poolsData: ComputePowerPoolItem[] = [
{
name: '玩手机监控',
type: 0,
proportion: 39,
PretreatmentEfficiency: 15,
color: '#FAA90B',
},
{
name: '离岗监控',
type: 1,
proportion: 60,
PretreatmentEfficiency: 20,
color: '#3879FE',
},
{
name: '空闲算力',
type: 2,
proportion: 1,
PretreatmentEfficiency: 0,
},
];
/**子组件 */
// 参数信息项
const InfoPreview: React.FC<{
name: string;
des: string;
}> = ({ name, des }) => {
return (
);
};
// 占比信息
const OccupyProportion: React.FC<{
pools: ComputePowerPoolItem[];
}> = ({ pools }) => {
const poolDefault = {
buttonOptions: {
width: 20,
height: 40,
fill: 'white', // 填充颜色
strokeWidth: 2, // 边框宽度
left: 0,
top: 0,
selectable: false,
}
}
const [clipPathData, setClipPathData] = useState({
width: 1000, // 宽
height: 80, // 高
});
const canvasRef = useRef(null);
const [cvs, setCanvas] = useState(null);
const [rect1Witdh, setRect1Witdh] = useState(pools[0].proportion/100 * clipPathData.width);
useEffect(() => {
const canvasObject = new fabric.Canvas(canvasRef.current);
const rect1 = new fabric.Rect({
top: 3, // 矩形左上角在y轴的位置
left: 0, // 矩形左上角在x轴的位置
width: rect1Witdh, // 矩形的宽
height: 32, // 矩形的高
fill: '#FAA90B', // 填充色
stroke: 'transparent', // 边框颜色
strokeWidth: 2, // 边框宽度
rx: 15, // 圆角的横向半径
ry: 15, // 圆角的纵向半径
selectable: false,
});
// 创建矩形对象
const bgRect1 = new fabric.Rect({
width: 20,
height: 40,
fill: 'white', // 填充颜色
strokeWidth: 2, // 边框宽度
left: 0,
top: 0,
selectable: false,
hasControls: false,
});
// 添加背景图片到矩形
fabric.Image.fromURL('/images/computePowerAllocation/slideBtn1.png', function (img) {
// 设置图片的宽度和高度为矩形的宽度和高度
img.set({ width: bgRect1.width, height: bgRect1.height, selectable: false ,hasControls: false});
// 将图片置于矩形的底部
// bgRect1.set({ originX: 'center', originY: 'center' });
canvasObject.add(
new fabric.Group([bgRect1, img], {
width: 20,
height: 40,
left: rect1Witdh - 10,
top: 0,
lockMovementY: true,
hasControls: false,
// selectable: false,
}),
);
// 更新Canvas以应用更改
canvasObject.renderAll();
});
canvasObject.add(rect1);
canvasObject.on('object:moving', (event) => {
// 获取事件的目标对象
const targetObject = event.target;
console.log(targetObject,'targetObject', canvasObject.item(0))
canvasObject.item(0).set({
width: targetObject?.left + 10
})
// set_category_fk_id_open(false);
// 检查目标对象是否为组合对象
setRect1Witdh(targetObject?.left)
canvasObject.renderAll();
});
canvasObject.renderAll();
setCanvas(canvasObject);
return () => {
canvasObject.dispose();
};
}, []);
return (
{/*
*/}
{pools.map((item, index) => {
return (
);
})}
{pools.map((item, index) => {
return (
-
{item.name}：{item.proportion}%
{item.type != 2 ? (
预计处理效率：
{item.PretreatmentEfficiency} 帧/秒
) : (
<>
)}
);
})}
);
};
/**
* @算力资源池页面组件
* @returns
*/
const ComputePowerAllocation: React.FC = () => {
return (
{/* 参数信息 */}
}
/>
{/* 占比信息 */}
);
};
export default ComputePowerAllocation;