diff --git a/src/global.css b/src/global.css index a2ddb35..dbcf6b5 100644 --- a/src/global.css +++ b/src/global.css @@ -350,23 +350,7 @@ a.ant-dropdown-trigger { .gn.themeBgHover:hover { background-color: #155BD4; } -.gn.algorithmSetting_project_box.ant-tabs-top > .ant-tabs-nav::before { - position: absolute; - right: 0; - left: 0; - border-bottom: 1px solid transparent; - content: ''; -} -.gn.algorithmSetting_project_box.ant-tabs .ant-tabs-ink-bar { - background: transparent; -} -.gn.algorithmSetting_project_box.ant-tabs .ant-tabs-tab { - padding: 16px 0 0px; -} -.gn.algorithmSetting_project_box.ant-tabs .ant-tabs-tab + .ant-tabs-tab { - margin: 0 0 0 12px; -} -.gn.algorithmSetting_project_box .ant-tabs-tab-active .ant-btn-default { +.gn.algorithmSetting_project_box .algorithmSetting_mode_box .active .ant-btn-default { border: 1px solid #154DDD; background: rgba(21, 77, 221, 0.1); color: #154DDD; diff --git a/src/global.less b/src/global.less index 00715f9..3b90320 100644 --- a/src/global.less +++ b/src/global.less @@ -439,30 +439,34 @@ a.ant-dropdown-trigger{ // 项目部署模块 &.algorithmSetting_project_box{ - &.ant-tabs-top >.ant-tabs-nav::before { - position: absolute; - right: 0; - left: 0; - border-bottom: 1px solid transparent; - content: ''; - } - &.ant-tabs .ant-tabs-ink-bar{ - background: transparent; - } - &.ant-tabs .ant-tabs-tab{ - padding: 16px 0 0px; - } - &.ant-tabs .ant-tabs-tab+.ant-tabs-tab{ - // margin: 0; - margin:0 0 0 12px; - } - & .ant-tabs-tab-active{ - .ant-btn-default{ - border: 1px solid #154DDD; - background: rgba(21, 77, 221, 0.10); - color: #154DDD; + + .algorithmSetting_mode_box{ + .active { + .ant-btn-default{ + border: 1px solid #154DDD; + background: rgba(21, 77, 221, 0.10); + color: #154DDD; + } } } + + // &.ant-tabs .ant-tabs-ink-bar{ + // background: transparent; + // } + // &.ant-tabs .ant-tabs-tab{ + // padding: 16px 0 0px; + // } + // &.ant-tabs .ant-tabs-tab+.ant-tabs-tab{ + // // margin: 0; + // margin:0 0 0 12px; + // } + // & .ant-tabs-tab-active{ + // .ant-btn-default{ + // border: 1px solid #154DDD; + // background: rgba(21, 77, 221, 0.10); + // color: #154DDD; + // } + // } } } .ant-pro-global-header-logo img { diff --git a/src/pages/Alarm/AlarmSetting/index.tsx b/src/pages/Alarm/AlarmSetting/index.tsx index f3de489..a544313 100644 --- a/src/pages/Alarm/AlarmSetting/index.tsx +++ b/src/pages/Alarm/AlarmSetting/index.tsx @@ -25,7 +25,7 @@ const DeviceCategoryList: React.FC = () => { * */ const [createModalOpen, setCreateModalOpen] = useState(false); // 告警状态设置 - const [alarmStatusModalOpen, setAlarmStatusModalOpen] = useState(true); + const [alarmStatusModalOpen, setAlarmStatusModalOpen] = useState(false); /** * @en-US The pop-up window of the distribution update window @@ -45,9 +45,6 @@ const DeviceCategoryList: React.FC = () => { const [selectedRowsState, setSelectedRows] = useState([]); /** - // TODO - 1. 告警列表-告警级别渲染-操作按钮 2h - // TODO 讨论 1. 告警状态设置 2. 项目部署告警添加 */ @@ -124,7 +121,7 @@ const DeviceCategoryList: React.FC = () => { dataIndex: 'createTime', sorter: true, hideInSearch: true, - valueType: 'dateTime', + // valueType: 'ProFormDateRangePicker', }, { title: , diff --git a/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx b/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx index 876e094..f338a8c 100644 --- a/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx +++ b/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx @@ -62,10 +62,18 @@ const InfoPreview: React.FC<{ const OccupyProportion: React.FC<{ pools: ComputePowerPoolItem[]; }> = ({ pools }) => { - const poolDefault = { - - buttonOptions: { + processBarOptions: { + top: 3, // 矩形左上角在y轴的位置 + left: 0, // 矩形左上角在x轴的位置 + height: 32, // 矩形的高 + stroke: 'transparent', // 边框颜色 + strokeWidth: 2, // 边框宽度 + rx: 15, // 圆角的横向半径 + ry: 15, // 圆角的纵向半径 + selectable: false, + }, + buttonBgOptions: { width: 20, height: 40, fill: 'white', // 填充颜色 @@ -73,74 +81,135 @@ const OccupyProportion: React.FC<{ left: 0, top: 0, selectable: false, - } - } + hasControls: false, + }, + buttonImageOptions: { + selectable: false, + hasControls: false, + }, + buttonGroupOptions: { + width: 20, + height: 40, + top: 0, + lockMovementY: true, + hasControls: false, + // 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); + const [rect1Witdh, setRect1Witdh] = useState((pools[0].proportion / 100) * clipPathData.width); + const [rect2Witdh, setRect2Witdh] = useState((pools[1].proportion / 100) * clipPathData.width); useEffect(() => { const canvasObject = new fabric.Canvas(canvasRef.current); + // 整个进度条 底色块 + const rect0 = new fabric.Rect({ + ...poolDefault.processBarOptions, + width: clipPathData.width, // 矩形的宽 + fill: '#E5E5E5', // 填充色 + }); + // 玩手机监控 const rect1 = new fabric.Rect({ - top: 3, // 矩形左上角在y轴的位置 - left: 0, // 矩形左上角在x轴的位置 + ...poolDefault.processBarOptions, 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, + // 离岗监控 + const rect2 = new fabric.Rect({ + ...poolDefault.processBarOptions, + left: rect1Witdh, + width: rect2Witdh, // 矩形的宽 + fill: '#3879FE', // 填充色 }); + // 创建矩形对象 + const bgRect1 = new fabric.Rect(poolDefault.buttonBgOptions); + const bgRect2 = new fabric.Rect(poolDefault.buttonBgOptions); // 添加背景图片到矩形 fabric.Image.fromURL('/images/computePowerAllocation/slideBtn1.png', function (img) { // 设置图片的宽度和高度为矩形的宽度和高度 - img.set({ width: bgRect1.width, height: bgRect1.height, selectable: false ,hasControls: false}); + img.set({ width: bgRect1.width, height: bgRect1.height, ...poolDefault.buttonImageOptions }); // 将图片置于矩形的底部 // bgRect1.set({ originX: 'center', originY: 'center' }); canvasObject.add( new fabric.Group([bgRect1, img], { - width: 20, - height: 40, + ...poolDefault.buttonGroupOptions, + buttonId: '1', left: rect1Witdh - 10, - top: 0, - lockMovementY: true, - hasControls: false, - // selectable: false, + selectable: false, + }), + ); + // 更新Canvas以应用更改 + canvasObject.renderAll(); + }); + fabric.Image.fromURL('/images/computePowerAllocation/slideBtn2.png', function (img) { + // 设置图片的宽度和高度为矩形的宽度和高度 + img.set({ width: bgRect2.width, height: bgRect2.height, ...poolDefault.buttonImageOptions }); + // 将图片置于矩形的底部 + // bgRect1.set({ originX: 'center', originY: 'center' }); + canvasObject.add( + new fabric.Group([bgRect2, img], { + ...poolDefault.buttonGroupOptions, + left: rect1Witdh + 10, + buttonId: '2', }), ); // 更新Canvas以应用更改 canvasObject.renderAll(); - }); + canvasObject.add(rect0); canvasObject.add(rect1); + canvasObject.add(rect2); canvasObject.on('object:moving', (event) => { // 获取事件的目标对象 const targetObject = event.target; - console.log(targetObject,'targetObject', canvasObject.item(0)) - canvasObject.item(0).set({ - width: targetObject?.left + 10 - }) + console.log(targetObject, 'targetObject', canvasObject.item(0)); + // 算力按钮1 + switch (targetObject.buttonId) { + case '1': + // 算力按钮2 + if (targetObject?.left >= 960) { + targetObject?.set({ + left: 960, + }); + } + if (targetObject?.left <= 0) { + targetObject?.set({ + left: 0, + }); + } + canvasObject.item(1).set({ + width: targetObject?.left + 10, + }); + canvasObject.item(2).set({ + left: targetObject?.left + 10 , + }); + break; + case '2': + // 算力按钮2 + if (targetObject?.left >= 980) { + targetObject?.set({ + left: 980, + }); + } + if (targetObject?.left <= rect1Witdh) { + targetObject?.set({ + left: rect1Witdh + 10, + }); + } + canvasObject.item(2).set({ + width: targetObject?.left -rect1Witdh + 10, + }); + break; + } // set_category_fk_id_open(false); // 检查目标对象是否为组合对象 - setRect1Witdh(targetObject?.left) + setRect1Witdh(targetObject?.left); canvasObject.renderAll(); }); canvasObject.renderAll(); @@ -158,7 +227,6 @@ const OccupyProportion: React.FC<{ style={{ marginTop: 24, marginBottom: 20, padding: 0, position: 'relative', width: '100%' }} > {/* */} -
    { - /** - * @en-US Pop-up window of new window - * @zh-CN 新建窗口的弹窗 - * */ +/**默认数据 */ +type tabModeListProps = { + label: string; + value: string; +}; +const tabModeList: tabModeListProps[] = [ + { + label: '项目详情', + value: '1', + }, + { + label: '告警设置', + value: '2', + }, +]; +const AlgorithmSetting: React.FC = () => { /** * @en-US International configuration * @zh-CN 国际化配置 * */ - const access = useAccess(); const intl = useIntl(); - const projectCardListRef = useRef(null); const actionRef = useRef(); const [updateModalOpen, setUpdateModalOpen] = useState(false); const [hasInit, setHasInit] = useState(false); const [nodeTreeData, setNodeTreeData] = React.useState([]); const [selectNodes, setSelectNodes] = React.useState([]); const [currentRow, setCurrentRow] = useState(); - const [currentCard, setCurrentCard] = useState(); - const [selectedRowsState, setSelectedRows] = useState([]); const [tabs, setTabs] = useState([]); - const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>('extra'); const [modelVersionData, setModelVersionData] = useState([]); const [projectData, setProjectData] = useState>({}); - const [targetKeys, setTargetKeys] = useState([]); const [projectConfigId, setProjectConfigId] = useState(0); const handleUpdateModal = () => { if (updateModalOpen) { @@ -58,23 +59,10 @@ const AlgorithmSetting: React.FC = () => { setUpdateModalOpen(true); } }; - + const [modelData, setModelData] = useState[]>([]); const [tab, setTab] = useState(''); - // const columns1: ProColumns[] = [ - // { - // title: '全选', - // dataIndex: 'name', - // hideInSearch: true, - // }, - // ]; - + const [activeMode, setActiveMode] = useState('1'); // 项目 | 告警 const columns = [ - // { - // title: , - // dataIndex: 'id', - // sorter: true, - // }, - { title: , dataIndex: 'name', @@ -121,48 +109,6 @@ const AlgorithmSetting: React.FC = () => { dataIndex: 'address', hideInSearch: true, }, - - // { - // title: ( - // - // ), - // dataIndex: 'telephone', - // hideInSearch: true, - // }, - - // { - // title: , - // dataIndex: 'lon', - // hideInSearch: true, - // }, - - // { - // title: , - // dataIndex: 'lat', - // hideInSearch: true, - // }, - - // { - // title: ( - // - // ), - // dataIndex: 'managerName', - // hideInSearch: true, - // }, - - // { - // title: ( - // - // ), - // dataIndex: 'managerPhone', - // hideInSearch: true, - // }, - - // { - // title: , - // dataIndex: 'remark', - // hideInSearch: true, - // }, ]; // 项目信息展示 @@ -175,7 +121,6 @@ const AlgorithmSetting: React.FC = () => { // TODO 左侧图标目前写死，需替换 // 操作左侧网点数据节点， 项目列表数据变更 function fetchProjectByGroupId(record: Record) { - // console.log('clickTreeNode', projectCardListRef.current) postProjectGetProjectByGroupId({ id: record.key }).then((resp) => { let tab_data = (resp?.data?.list || []).map((v: any) => { console.log(resp.data.list); @@ -215,56 +160,10 @@ const AlgorithmSetting: React.FC = () => { ), })); - // console.log(88, model_data); - // setProjectData({...projectData, [v.id]: v}) + setModelData(model_data); return { - label: , + label: v.name, key: v.id, - children: ( - - style={{ - padding: '0px 16px 16px' - }} - className="gn" - ghost={true} - itemCardProps={{ - ghost: true, - bodyStyle: { padding: 0, margin: 0 }, - }} - pagination={{ - defaultPageSize: 6, - showSizeChanger: false, - }} - showActions="hover" - grid={{ gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4 }} - metas={{ - type: {}, - content: {}, - actions: { - cardActionProps, - }, - }} - headerTitle="项目模型列表" - toolBarRender={(action, rows) => { - console.log(action, rows, 'toolBarRender'); - // TODO 需要对接接口 - const isProcess: boolean = false; - const currNode = isProcess ? ( - - ) : ( - - ); - return [currNode]; - }} - dataSource={model_data} - /> - ), }; }); if (tab_data.length) { @@ -277,7 +176,8 @@ const AlgorithmSetting: React.FC = () => { // TODO 需联调 // 操作项目列表数据类别切换， 项目列表数据变更 function changeProjectTab(key: React.SetStateAction) { - let model_ids = projectData[key]?.inferConfig?.models || []; + console.log('changeProjectTab_key', key); + let model_ids: number[] = projectData[key as string]?.inferConfig?.models || []; postModelVersionGetModelVersionListByIds({ ids: model_ids }).then((resp) => { let version_model_data = (resp?.data?.list || []).map((item: Record) => { return { @@ -316,11 +216,15 @@ const AlgorithmSetting: React.FC = () => { }; }); setModelVersionData(version_model_data); - console.log(99, modelVersionData); + console.log(modelVersionData); }); setTab(key); } - + // 切换展示 项目|告警 + function changeMode(info: tabModeListProps) { + console.log(info, 'changeMode_info'); + setActiveMode(info.value); + } useEffect(() => { postDeviceGroupGetDeviceGroupTree() .then((resp) => { @@ -333,7 +237,7 @@ const AlgorithmSetting: React.FC = () => { }, []); return ( - + { ) } rightDom={ -
    + <> { columns={columns} > - {/* tabs={{ - activeKey: tab, - items: tabs, - onChange: (key) => { - changeProjectTab(key); - }, - }} */} + {tabs?.length ? ( + <> + { + changeProjectTab(key); + }} + > + +
      + {tabModeList.map((item) => { + return ( +
    • changeMode(item)} + style={{ + padding: '16px 12px 0 0', + }} + > + +
      • + ); + })} +
    - - 项目 +
    + 模型列表 + {/* // TODO 需要对接接口 */} + {false ? ( + + ) : ( + + )} +
    + + style={{ + padding: '0px 16px 16px', + }} + className="gn" + ghost={true} + itemCardProps={{ + ghost: true, + bodyStyle: { padding: 0, margin: 0 }, + }} + pagination={{ + defaultPageSize: 6, + showSizeChanger: false, + }} + showActions="hover" + grid={{ gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4 }} + metas={{ + type: {}, + content: {}, + actions: { + cardActionProps: 'extra', + }, + }} + dataSource={modelData} + /> - ), - children: ( - { - changeProjectTab(key); - }} - > - ), - }, - { - key: '2', - label: ( - <> - - 告警 - - ), - children: (告警部分), - }, - ]} - /> -
    + ) : ( +
    + {' '} + +
    + )} + + + ) : ( + <> + + + )} + } >     - {/* - - - */} } updateModalOpen={updateModalOpen} diff --git a/src/pages/Setting/components/AlarmSetForm.tsx b/src/pages/Setting/components/AlarmSetForm.tsx new file mode 100644 index 0000000..76c47e8 --- /dev/null +++ b/src/pages/Setting/components/AlarmSetForm.tsx @@ -0,0 +1,133 @@ +import { + ProForm, + ProFormCheckbox, + ProFormDependency, + ProFormGroup, + ProFormList, + ProFormRadio, + ProFormSelect, + ProFormSwitch, +} from '@ant-design/pro-components'; +import { Form } from 'antd'; +import type { NamePath } from 'antd/lib/form/interface'; +import { useEffect } from 'react'; +type AlarmSetFormProps = { + values?: Record; +}; +const AlarmSetForm: React.FC = (props) => { + const [form] = Form.useForm(); + + const initialValues = { + label: 1, + value: 2, + }; + const depName1: NamePath[] = [['ways']]; + + useEffect(() => { + form.setFieldValue('ways', [ + { + label: '短信', + value: [], + isChecked: true, + }, + { + label: '邮件', + value: [], + isChecked: false, + }, + ]); + }, []); + return ( + // TODO 模拟提交告警设置 + + + + + {(f, index, action) => { + console.log('isChecked_value', f, index, action); + return ( + + {/* + {form.getFieldValue('ways')[index].label}{' '} + */} + + + + {form.getFieldValue('ways')[index].label} + + + {({ isChecked }) => { + return ( + { + // const resp = await postCurrentIP(); + const resp = ['test001', 'test002', 'test003']; + return resp?.map((v: any) => { + return { + label: v, + value: v, + }; + }); + }} + /> + ); + }} + + {/* */} + + ); + }} + + + + {/* `} + > + + {(depValues) => ( + 
    +              {JSON.stringify(depValues)}
+
    + )} +     +     */} + + + +     + ); +}; + +export default AlarmSetForm; diff --git a/src/pages/Setting/components/UpdateForm.tsx b/src/pages/Setting/components/UpdateForm.tsx index a3a57c0..f6b7d35 100644 --- a/src/pages/Setting/components/UpdateForm.tsx +++ b/src/pages/Setting/components/UpdateForm.tsx @@ -14,12 +14,9 @@ import { ProFormText, StepsForm, } from '@ant-design/pro-components'; -import { FormListActionType } from '@ant-design/pro-form/lib'; import { useIntl } from '@umijs/max'; import { Modal, message } from 'antd'; -import type { ColumnsType } from 'antd/es/table/interface'; -import type { TransferItem, TransferProps } from 'antd/es/transfer'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../config/defaultForm'; /**styles */ @@ -37,23 +34,22 @@ const modelFormAreaStyles: React.CSSProperties | undefined = { padding: 15, marginBottom: 12, border: '1px solid', - borderColor: 'rgba(219, 219, 219,0.4)' + borderColor: 'rgba(219, 219, 219,0.4)', }; - interface DataType extends API.Device { key: string; } -interface ProjectModelConfigById { - configId: number; -} +// interface ProjectModelConfigById { +// configId: number; +// } -interface TableTransferProps extends TransferProps { - dataSource: DataType[]; - leftColumns: ColumnsType; - rightColumns: ColumnsType; -} +// interface TableTransferProps extends TransferProps { +// dataSource: DataType[]; +// leftColumns: ColumnsType; +// rightColumns: ColumnsType; +// } export type UpdateFormProps = { updateModalOpen: boolean; @@ -73,7 +69,7 @@ const UpdateForm: React.FC = (props) => { const [configData, setConfigData] = useState([]); - const [addrValue, setAddr] = useState(''); + // const [addrValue, setAddr] = useState(''); const [projectModelConfig, setProjectModelConfig] = useState({}); const [configResult, setConfigResult] = useState({}); const [deviceData, setDeviceData] = useState([]); @@ -98,11 +94,11 @@ const UpdateForm: React.FC = (props) => { // } // }, [selectValue]); - const actionFormListRef = useRef< - FormListActionType<{ - name: string; - }> - >(); + // const actionFormListRef = useRef< + // FormListActionType<{ + // name: string; + // }> + // >(); // 获取默认渲染项 @@ -139,9 +135,9 @@ const UpdateForm: React.FC = (props) => { } else { } }, [props.updateModalOpen]); - const handleChange = (newTargetKeys: string[]) => { - setTargetKeys(newTargetKeys); - }; + // const handleChange = (newTargetKeys: string[]) => { + // setTargetKeys(newTargetKeys); + // }; return ( = (props) => { current={current} onCurrentChange={(value) => { setCurrent(value); - if (value == 1) { + if (value === 1) { postDeviceGetAllDeviceByGroup({ id: props.groupId }).then((resp) => { setDeviceData( (resp.data?.list || []).map((v: API.Device) => { @@ -162,7 +158,7 @@ const UpdateForm: React.FC = (props) => { }); } }} - onFinish={async (values) => { + onFinish={async () => { setCurrent(0); return true; }} @@ -418,11 +414,11 @@ const UpdateForm: React.FC = (props) => { stepProps={{ description: '设备关联配置', }} - onFinish={async (values: any) => { + onFinish={async () => { configResult.devices = targetKeys.join(','); configResult.id = props.projectModelConfigId; putProjectModelConfigUpdateProjectModelConfig(configResult) - .then((resp) => { + .then(() => { message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); props.handleModal(); props.reload();