feat: 分布式设备样式调整

public/icons/fault.svg

@@ -0,0 +1,12 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3920_33855)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1.25L0.5 10.75H11.5L6 1.25Z" stroke="#E80D0D" stroke-linejoin="round"/>
+<path d="M6 8.75V9" stroke="#E80D0D" stroke-linecap="round"/>
+<path d="M6 4.75L6.00208 7.24988" stroke="#E80D0D" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3920_33855">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/icons/offline.svg

@@ -0,0 +1,11 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3920_33846)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 11C8.76143 11 11 8.76143 11 6C11 3.23857 8.76143 1 6 1C3.23857 1 1 3.23857 1 6C1 8.76143 3.23857 11 6 11Z" fill="#CCCCCC" stroke="#CCCCCC" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 8.25L8.25 3.75" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3920_33846">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/icons/online.svg

@@ -0,0 +1,11 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3924_33859)">
+<path d="M6 11C7.3807 11 8.6307 10.4404 9.53553 9.53553C10.4404 8.6307 11 7.3807 11 6C11 4.6193 10.4404 3.3693 9.53553 2.46446C8.6307 1.55964 7.3807 1 6 1C4.6193 1 3.3693 1.55964 2.46446 2.46446C1.55964 3.3693 1 4.6193 1 6C1 7.3807 1.55964 8.6307 2.46446 9.53553C3.3693 10.4404 4.6193 11 6 11Z" fill="#52C41A" stroke="#52C41A" stroke-linejoin="round"/>
+<path d="M4 6L5.5 7.5L8.5 4.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3924_33859">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/icons/running.svg

@@ -0,0 +1,11 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3928_41280)">
+<path d="M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z" fill="#FAAD14" stroke="#FAAD14" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 1V5.58579C6 5.851 5.89464 6.10536 5.70711 6.29289L2.5 9.5" stroke="white" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3928_41280">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/layouts/treeAndTableList.tsx

@@ -29,7 +29,7 @@ const TreeAndTableList: React.FC<TreeAndTableListProps> = (props) => {
   // 统一配置
   let finalLeftCard: ProCardTypeProps = {
     // 左侧卡片
-    headStyle: { paddingTop: 24, paddingLeft: 20, paddingRight: 20, paddingBottom:12 ,borderBottom: '1px solid #E0E0E0' },
+    headStyle: { paddingTop: 20, paddingLeft: 20, paddingRight: 20, paddingBottom: 20,borderBottom: '1px solid #E0E0E0' },
     bodyStyle: {paddingLeft: 20, paddingRight: 20},
     colSpan: '22%',
   };

src/locales/zh-CN/DCSDevice.ts

@@ -29,7 +29,7 @@ export const DCSDevice_group_list: { [key: string]: string } = {
     'DCSDeviceList.device_group.table.rule.required.managerPhone': '负责人联系方式为必填项',
     'DCSDeviceList.device_group.table.rule.required.parentFkId': '父节点为必填项',
     'DCSDeviceList.device_group.table.list.add': '新建设备分组',
-    'DCSDeviceList.device_group.table.list.update': '更新设备分组',
+    'DCSDeviceList.device_group.table.list.update': '编辑设备分组',
     'DCSDeviceList.device_group.table.list.treeAdd': '新建',
     'DCSDeviceList.device_group.table.list.create_son': '添加子节点',
     'DCSDeviceList.device_group.table.list.editor': '编辑',
@@ -46,7 +46,7 @@ export const DCSDevice_category_list: { [key: string]: string } = {
     'DCSDeviceList.device_category.table.rule.required.name': '类别名称为必填项',
     'DCSDeviceList.device_category.table.rule.required.code': '类别代码为必填项',
     'DCSDeviceList.device_category.table.list.add': '新建设备类别',
-    'DCSDeviceList.device_category.table.list.update': '更新设备类别',
+    'DCSDeviceList.device_category.table.list.update': '编辑设备类别',
     'DCSDeviceList.device_category.table.list.editor': '编辑',
 }
 
@@ -55,6 +55,9 @@ export const DCSDevice_list: { [key: string]: string } = {
     'DCSDeviceList.device.table.list.id': 'ID',
     'DCSDeviceList.device.table.list.name': '设备名称',
     'DCSDeviceList.device.table.list.code': '设备代码',
+    'DCSDeviceList.device.table.list.sort': '设备分类',
+    'DCSDeviceList.device.table.list.state': '设备状态',
+    'DCSDeviceList.device.table.list.IP': '设备IP',
     'DCSDeviceList.device.table.list.position': '位置',
     'DCSDeviceList.device.table.list.param': '设备参数',
     'DCSDeviceList.device.table.list.spec': '设备规格',
@@ -67,7 +70,7 @@ export const DCSDevice_list: { [key: string]: string } = {
     'DCSDeviceList.device.table.rule.required.name': '设备名称为必填项',
     'DCSDeviceList.device.table.rule.required.code': '设备代码为必填项',
     'DCSDeviceList.device.table.list.add': '新建设备',
-    'DCSDeviceList.device.table.list.update': '更新设备',
+    'DCSDeviceList.device.table.list.update': '编辑设备',
     'DCSDeviceList.device_category.table.list.editor': '编辑',
 }
 

src/pages/DCSDevice/DeviceGroupList/components/CreateForm.tsx

@@ -162,7 +162,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
             id: 'DCSDeviceList.device_group.table.list.address',
             defaultMessage: '$$$',
           })}`}
-          required={false}
+          required={true}
         />
         {/* <ProFormText
           width={proFormItemStyleProps.column2Width}
@@ -221,7 +221,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
             id: 'DCSDeviceList.device_group.table.list.managerName',
             defaultMessage: '$$$',
           })}`}
-          required={false}
+          required={true}
         />
         <ProFormText
           width={proFormItemStyleProps.column2Width}

src/pages/DCSDevice/DeviceList/components/ButtonState.tsx

@@ -0,0 +1,27 @@
+import { Button } from 'antd';
+import online from '../../../../../public/icons/online.svg'
+import offline from '../../../../../public/icons/offline.svg'
+import fault from '../../../../../public/icons/fault.svg'
+import running from '../../../../../public/icons/running.svg'
+
+
+export type ButtonStateProps = {
+    values: any
+};
+
+  
+const ButtonState: React.FC<ButtonStateProps> = (props) => {
+    return (
+        <Button
+        type="link"
+        style={{
+          color: props.values !== '-' ? '#52C41A' : '#999999'
+        }}
+      >
+        <img src={props.values !== '-' ? online : offline}/>
+        {props.values}
+      </Button>
+    )
+  }
+
+export default ButtonState;

src/pages/DCSDevice/DeviceList/components/UpdateForm.tsx

@@ -35,7 +35,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
     <ModalForm<API.Device>
       width={proFormModelWidth}
       title={intl.formatMessage({
-        id: 'device.device.table.list.update',
+        id: 'DCSDeviceList.device.table.list.update',
         defaultMessage: '$$$',
       })}
       open={props.updateModalOpen}

src/pages/DCSDevice/DeviceList/index.tsx

@@ -24,7 +24,7 @@ import {
   postDeviceGroupGetDeviceGroupNames,
   postDeviceGroupGetDeviceGroupTree,
 } from '@/services/device/DeviceGroup';
-import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
+import { PlusOutlined, PoweroffOutlined, RedoOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
 import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
@@ -36,6 +36,7 @@ import { ColumnDrawer } from './components/ColumnDrawer';
 import CreateForm from './components/CreateForm';
 import UpdateForm from './components/UpdateForm';
 import VideoModal from './components/VideoModal';
+import ButtonState from './components/ButtonState';
 
 const DeviceList: React.FC = () => {
   /**
@@ -192,6 +193,8 @@ const DeviceList: React.FC = () => {
       });
   };
 
+
+
   const columns: ProColumns<API.Device>[] = [
     {
       title: <FormattedMessage id="DCSDeviceList.device.table.list.name" defaultMessage="$$$" />,
@@ -199,18 +202,18 @@ const DeviceList: React.FC = () => {
       width: '150',
       sorter: true,
       hideInSearch: true,
-      render: (dom, entity) => {
+      // render: (dom, entity) => {
-        return (
+      //   return (
-          <a
+      //     <a
-            onClick={() => {
+      //       onClick={() => {
-              setCurrentRow(entity);
+      //         setCurrentRow(entity);
-              setShowDetail(true);
+      //         setShowDetail(true);
-            }}
+      //       }}
-          >
+      //     >
-            {dom}
+      //       {dom}
-          </a>
+      //     </a>
-        );
+      //   );
-      },
+      // },
       // renderFormItem: () => {
       //   return (
       //     <>
@@ -229,7 +232,7 @@ const DeviceList: React.FC = () => {
       //   );
       // },
       key: 'fixedName',
-      fixed: 'left',
+      // fixed: 'left',
     },
 
     // {
@@ -243,6 +246,28 @@ const DeviceList: React.FC = () => {
       dataIndex: 'code',
       hideInSearch: true,
     },
+    {
+      title: <FormattedMessage id="DCSDeviceList.device.table.list.sort" defaultMessage="$$$" />,
+      dataIndex: 'sort',
+      hideInSearch: true,
+    },
+    {
+      title: <FormattedMessage id="DCSDeviceList.device.table.list.state" defaultMessage="$$$" />,
+      dataIndex: 'state',
+      hideInSearch: true,
+      render: (dom, entity) => {
+        return (
+          <ButtonState 
+            values={dom}
+          ></ButtonState>
+        );
+      },
+    },
+    {
+      title: <FormattedMessage id="DCSDeviceList.device.table.list.IP" defaultMessage="$$$" />,
+      dataIndex: 'IP',
+      hideInSearch: true,
+    },
 
     // {
     //   title: <FormattedMessage id="DCSDeviceList.device.table.list.position" defaultMessage="$$$" />,
@@ -486,19 +511,19 @@ const DeviceList: React.FC = () => {
         leftCard={
           {
             title: '网点选择',
-            extra: (
+            // extra: (
-              <>
+            //   <>
-                <Button
+            //     <Button
-                  icon={<RedoOutlined />}
+            //       icon={<RedoOutlined />}
-                  onClick={() => {
+            //       onClick={() => {
-                    setSelectNodes([]);
+            //         setSelectNodes([]);
-                    actionRef.current?.reload();
+            //         actionRef.current?.reload();
-                  }}
+            //       }}
-                >
+            //     >
-                  重置
+            //       重置
-                </Button>
+            //     </Button>
-              </>
+            //   </>
-            ),
+            // ),
           } as ProCardTypeProps
         }
         leftDom={
@@ -652,11 +677,11 @@ const DeviceList: React.FC = () => {
               };
             }}
             columns={columns}
-            rowSelection={{
+            // rowSelection={{
-              onChange: (_, selectedRows) => {
+            //   onChange: (_, selectedRows) => {
-                setSelectedRows(selectedRows);
+            //     setSelectedRows(selectedRows);
-              },
+            //   },
-            }}
+            // }}
           />
         }
       ></TreeAndTableList>