fix: 采集器

src/pages/link/DataCollect/components/Device/Save/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal } from 'antd';
 import { createForm, Field, onFieldReact } from '@formily/core';
 import { createSchemaField } from '@formily/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import * as ICONS from '@ant-design/icons';
 import { Form, FormGrid, FormItem, Input, Select, NumberPicker, Password } from '@formily/antd';
 import type { ISchema } from '@formily/json-schema';
@@ -49,6 +49,16 @@ export default (props: Props) => {
     },
   });
 
+  useEffect(() => {
+    if (props.data?.id) {
+      service.queryCollectorByID(props.data?.id).then((resp) => {
+        if (resp.status === 200) {
+          form.setValues(resp.result);
+        }
+      });
+    }
+  }, [props.data]);
+
   const SchemaField = createSchemaField({
     components: {
       FormItem,

src/pages/link/DataCollect/components/Tree/index.less

@@ -3,6 +3,7 @@
   align-items: center;
   justify-content: space-between;
   width: 240px;
+  overflow: hidden;
 }
 
 .title {

src/pages/link/DataCollect/components/Tree/index.tsx

@@ -1,13 +1,23 @@
-import { DownOutlined, PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Button, Input, Tree, Space, Popconfirm, Badge, Tooltip } from 'antd';
+import {
+  DownOutlined,
+  PlusOutlined,
+  FormOutlined,
+  DeleteOutlined,
+  StopOutlined,
+  PlayCircleOutlined,
+} from '@ant-design/icons';
+import { Button, Input, Tree, Space, Popconfirm, Tooltip } from 'antd';
 import { observer } from '@formily/react';
 import { model } from '@formily/reactive';
-import { Empty, PermissionButton } from '@/components';
+import { BadgeStatus, Empty, PermissionButton } from '@/components';
 import styles from './index.less';
 import service from '@/pages/link/DataCollect/service';
 import { useEffect } from 'react';
 import Save from '../../components/Channel/Save/index';
+import CollectorSave from '../../components/Device/Save/index';
 import { onlyMessage } from '@/utils/util';
+import { StatusColorEnum } from '@/components/BadgeStatus';
+import { useIntl } from '@@/plugin-locale/localeExports';
 
 const TreeModel = model<{
   selectedKeys: string[];
@@ -15,7 +25,9 @@ const TreeModel = model<{
   loading: boolean;
   param: any;
   visible: boolean;
-  current: Partial<ChannelItem>;
+  current: any;
+  c_visible: boolean;
+  c_current: any;
 }>({
   selectedKeys: [],
   dataSource: [],
@@ -23,6 +35,8 @@ const TreeModel = model<{
   param: {},
   visible: false,
   current: {},
+  c_visible: false,
+  c_current: {},
 });
 interface Props {
   change: (
@@ -38,6 +52,7 @@ export default observer((props: Props) => {
   const channelImg = require('/public/images/DataCollect/tree-channel.png');
   const deviceImg = require('/public/images/DataCollect/tree-device.png');
   const { permission } = PermissionButton.usePermission('link/DataCollect/DataGathering');
+  const intl = useIntl();
 
   const handleSearch = (params: any) => {
     TreeModel.loading = true;
@@ -60,6 +75,26 @@ export default observer((props: Props) => {
     handleSearch(TreeModel.param);
   }, [TreeModel.param, props.reload]);
 
+  const getState = (record: Partial<ChannelItem>): { text: string; value: string } => {
+    if (record) {
+      if (record?.state?.value === 'enabled') {
+        return {
+          text: record?.runningState?.text || '',
+          value: record?.runningState?.value || '',
+        };
+      } else {
+        return {
+          text: '禁用',
+          value: 'disabled',
+        };
+      }
+    }
+    return {
+      text: '',
+      value: '',
+    };
+  };
+
   return (
     <div>
       <div>
@@ -89,7 +124,12 @@ export default observer((props: Props) => {
       </div>
       <div>
         {TreeModel.dataSource.length ? (
-          <Tree showIcon selectedKeys={TreeModel.selectedKeys} switcherIcon={<DownOutlined />}>
+          <Tree
+            style={{ overflow: 'hidden' }}
+            showIcon
+            selectedKeys={TreeModel.selectedKeys}
+            switcherIcon={<DownOutlined />}
+          >
             {(TreeModel.dataSource || []).map((item: any) => (
               <Tree.TreeNode
                 key={item.id}
@@ -105,8 +145,21 @@ export default observer((props: Props) => {
                       >
                         <img width={'20px'} style={{ marginRight: 5 }} src={channelImg} />
                         <div className={'ellipsis'}>
-                          <Badge status={item.state?.value === 'enabled' ? 'success' : 'error'} />
-                          {item.name}
+                          <BadgeStatus
+                            status={
+                              item && getState(item) && getState(item)?.value
+                                ? getState(item).value
+                                : ''
+                            }
+                            text={item.name}
+                            statusNames={{
+                              running: StatusColorEnum.success,
+                              disabled: StatusColorEnum.processing,
+                              partialError: StatusColorEnum.warning,
+                              failed: StatusColorEnum.error,
+                              stopped: StatusColorEnum.default,
+                            }}
+                          />
                         </div>
                       </div>
                       <div>
@@ -147,15 +200,82 @@ export default observer((props: Props) => {
                     key={i.id}
                     title={() => {
                       return (
-                        <div
-                          className={styles.title}
-                          onClick={() => {
-                            TreeModel.selectedKeys = [i.id];
-                            props.change(i.id, 'device', item.provider, i);
-                          }}
-                        >
-                          <img width={'20px'} style={{ marginRight: 5 }} src={deviceImg} />
-                          <div className={'ellipsis'}>{i.name}</div>
+                        <div className={styles.treeTitle} style={{ paddingRight: 24 }}>
+                          <div
+                            className={styles.title}
+                            onClick={() => {
+                              TreeModel.selectedKeys = [i.id];
+                              props.change(i.id, 'device', item.provider, i);
+                            }}
+                          >
+                            <img width={'20px'} style={{ marginRight: 5 }} src={deviceImg} />
+                            <div style={{ width: '120px' }} className={'ellipsis'}>
+                              {i.name}
+                            </div>
+                          </div>
+                          <div>
+                            <Space className={styles.iconColor}>
+                              <Tooltip title={!permission.update ? '暂无权限，请联系管理员' : ''}>
+                                <FormOutlined
+                                  onClick={() => {
+                                    if (permission.update) {
+                                      TreeModel.current = item;
+                                      TreeModel.c_visible = true;
+                                      TreeModel.c_current = i;
+                                    }
+                                  }}
+                                />
+                              </Tooltip>
+                              <Popconfirm
+                                title={intl.formatMessage({
+                                  id: `pages.data.option.${
+                                    i?.state?.value !== 'disabled' ? 'disabled' : 'enabled'
+                                  }.tips`,
+                                  defaultMessage: '确认禁用？',
+                                })}
+                                onConfirm={async () => {
+                                  const resp =
+                                    i?.state?.value !== 'disabled'
+                                      ? await service.updateCollector(i.id, {
+                                          state: 'disabled',
+                                        })
+                                      : await service.updateCollector(i.id, {
+                                          state: 'enabled',
+                                        });
+                                  if (resp.status === 200) {
+                                    TreeModel.param = {};
+                                    handleSearch(TreeModel.param);
+                                    onlyMessage('操作成功');
+                                  } else {
+                                    onlyMessage('操作失败！', 'error');
+                                  }
+                                }}
+                              >
+                                <Tooltip title={!permission.action ? '暂无权限，请联系管理员' : ''}>
+                                  {i?.state?.value !== 'disabled' ? (
+                                    <StopOutlined />
+                                  ) : (
+                                    <PlayCircleOutlined />
+                                  )}
+                                </Tooltip>
+                              </Popconfirm>
+                              <Popconfirm
+                                title={'该操作将会删除下属采集器与点位，确定删除？'}
+                                onConfirm={async () => {
+                                  const resp = await service.removeCollector(i.id);
+                                  if (resp.status === 200) {
+                                    TreeModel.param = {};
+                                    handleSearch(TreeModel.param);
+                                    onlyMessage('操作成功');
+                                  }
+                                }}
+                              >
+                                <Tooltip title={!permission.delete ? '暂无权限，请联系管理员' : ''}>
+                                  <DeleteOutlined />
+                                </Tooltip>
+                              </Popconfirm>
+                            </Space>
+                          </div>
                         </div>
                       );
                     }}
@@ -180,6 +300,21 @@ export default observer((props: Props) => {
           }}
         />
       )}
+      {TreeModel.c_visible && (
+        <CollectorSave
+          data={TreeModel.c_current}
+          channelId={TreeModel.current.id}
+          provider={TreeModel.current.provider}
+          close={() => {
+            TreeModel.c_visible = false;
+          }}
+          reload={() => {
+            TreeModel.c_visible = false;
+            TreeModel.param = {};
+            handleSearch(TreeModel.param);
+          }}
+        />
+      )}
     </div>
   );
 });