fix: 设备诊断

src/components/BindParentDevice/index.tsx

@@ -80,12 +80,14 @@ const BindParentDevice = (props: Props) => {
   ];
 
   const submitBtn = async () => {
-    // const resp = await service.bindDevice(InstanceModel.detail.id!, bindKeys);
-    // if (resp.status === 200) {
-    //   props.onCancel();
-    //   setBindKeys([]);
-    //   actionRef.current?.reset?.();
-    // }
+    if (props.data?.id) {
+      const resp = await service.bindDevice(bindKeys[0], [props.data?.id]);
+      if (resp.status === 200) {
+        props.onOk(bindKeys[0]);
+        setBindKeys([]);
+        actionRef.current?.reset?.();
+      }
+    }
   };
 
   return (

src/components/ProTableCard/CardItems/AccessConfig/index.less

@@ -2,7 +2,13 @@
 
 .access-config-card-item {
   &.active {
+    position: relative;
+    color: @primary-color-active;
     border: 1px solid @primary-color-active;
+
+    .checked-icon {
+      display: block;
+    }
   }
 
   .tableCardDisabled {
@@ -96,6 +102,33 @@
       }
     }
   }
+
+  .checked-icon {
+    position: absolute;
+    right: -22px;
+    bottom: -22px;
+    z-index: 2;
+    display: none;
+    width: 44px;
+    height: 44px;
+    color: #fff;
+    background-color: red;
+    background-color: @primary-color-active;
+    transform: rotate(-45deg);
+
+    > div {
+      position: relative;
+      height: 100%;
+      transform: rotate(45deg);
+
+      > span {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        font-size: 12px;
+      }
+    }
+  }
 }
 
 :global {

src/components/ProTableCard/CardItems/AccessConfig/index.tsx

@@ -7,6 +7,7 @@ import type { AccessItem } from '@/pages/link/AccessConfig/typings';
 import './index.less';
 import classNames from 'classnames';
 import { Store } from 'jetlinks-store';
+import { CheckOutlined } from '@ant-design/icons';
 
 export interface AccessConfigCardProps extends AccessItem {
   detail?: React.ReactNode;
@@ -108,6 +109,11 @@ export default (props: AccessConfigCardProps) => {
           </div>
         </div>
       </div>
+      <div className={'checked-icon'}>
+        <div>
+          <CheckOutlined />
+        </div>
+      </div>
     </TableCard>
   );
 };

src/components/ProTableCard/CardItems/device.tsx

@@ -4,7 +4,7 @@ import { StatusColorEnum } from '@/components/BadgeStatus';
 import { TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
-import { DisconnectOutlined } from '@ant-design/icons';
+import { CheckOutlined, DisconnectOutlined } from '@ant-design/icons';
 import { Popconfirm, Tooltip } from 'antd';
 import { useIntl } from '@@/plugin-locale/localeExports';
 
@@ -120,6 +120,11 @@ export const ExtraDeviceCard = (props: DeviceCardProps) => {
           </div>
         </div>
       </div>
+      <div className={'checked-icon'}>
+        <div>
+          <CheckOutlined />
+        </div>
+      </div>
     </TableCard>
   );
 };

src/components/ProTableCard/CardItems/product.tsx

@@ -6,7 +6,7 @@ import { TableCard } from '@/components';
 import '@/style/common.less';
 import '../index.less';
 import { Popconfirm, Tooltip } from 'antd';
-import { DisconnectOutlined } from '@ant-design/icons';
+import { CheckOutlined, DisconnectOutlined } from '@ant-design/icons';
 
 export interface ProductCardProps extends Partial<ProductItem> {
   detail?: React.ReactNode;
@@ -124,6 +124,11 @@ export const ExtraProductCard = (props: ProductCardProps) => {
           </div>
         </div>
       </div>
+      <div className={'checked-icon'}>
+        <div>
+          <CheckOutlined />
+        </div>
+      </div>
     </TableCard>
   );
 };

src/components/ProTableCard/index.less

@@ -144,7 +144,40 @@
   background-color: #fff;
 
   &.item-active {
+    position: relative;
+    color: @primary-color-active;
     border: 1px solid @primary-color-active;
+
+    .checked-icon {
+      display: block;
+    }
+  }
+
+  .checked-icon {
+    position: absolute;
+    right: -22px;
+    bottom: -22px;
+    z-index: 2;
+    display: none;
+    width: 44px;
+    height: 44px;
+    color: #fff;
+    background-color: red;
+    background-color: @primary-color-active;
+    transform: rotate(-45deg);
+
+    > div {
+      position: relative;
+      height: 100%;
+      transform: rotate(45deg);
+
+      > span {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        font-size: 12px;
+      }
+    }
   }
 
   &.hover {

src/pages/device/Instance/Detail/Diagnose/Message/index.tsx

@@ -328,6 +328,9 @@ const Message = observer(() => {
                   type: 'string',
                   'x-decorator': 'FormItem',
                   'x-component': 'PreviewText.Input',
+                  // 'x-decorator-props': {
+                  //   tooltip: '使用固定的通知配置来发送此通知模版',
+                  // },
                 },
               },
             },

src/pages/device/Instance/Detail/Diagnose/Status/DiagnosticAdvice.tsx

@@ -21,7 +21,7 @@ const DiagnosticAdvice = (props: Props) => {
       onOk={() => {
         props.close();
       }}
-      width={900}
+      width={1000}
       visible
     >
       <div>
@@ -53,7 +53,7 @@ const DiagnosticAdvice = (props: Props) => {
                 title={
                   <div className="serverItem">
                     {(data?.info?.address || []).map((i: any) => (
-                      <div key={i.address}>
+                      <div key={i.address} className="eellipsiss">
                         <Badge color={i.health === -1 ? 'red' : 'green'} />
                         {i.address}
                       </div>
@@ -63,11 +63,10 @@ const DiagnosticAdvice = (props: Props) => {
               >
                 <div className="serverItem">
                   {(data?.info?.address || []).slice(0, 1).map((i: any) => (
-                    <Badge
-                      key={i.address}
-                      color={i.health === -1 ? 'red' : 'green'}
-                      text={i.address}
-                    />
+                    <div key={i.address} className="eellipsiss">
+                      <Badge color={i.health === -1 ? 'red' : 'green'} />
+                      {i.address}
+                    </div>
                   ))}
                 </div>
               </Tooltip>

src/pages/device/Instance/Detail/Diagnose/Status/model.ts

@@ -1,6 +1,7 @@
 import type { ProductItem } from '@/pages/device/Product/typings';
 import { model } from '@formily/reactive';
 import type { ReactNode } from 'react';
+import { DeviceInstance } from '../../../typings';
 
 export const StatusMap = new Map();
 StatusMap.set('error', require('/public/images/diagnose/status/error.png'));
@@ -231,6 +232,7 @@ export const DiagnoseStatusModel = model<{
   list: ListProps[];
   product: Partial<ProductItem>;
   gateway: any;
+  parent: Partial<DeviceInstance>;
   configuration: {
     product: any[];
     device: any[];
@@ -255,6 +257,7 @@ export const DiagnoseStatusModel = model<{
 }>({
   list: [],
   product: {},
+  parent: {},
   gateway: {},
   configuration: {
     product: [],

src/pages/device/Instance/Detail/Diagnose/index.tsx

@@ -35,7 +35,7 @@ const Diagnose = observer(() => {
     if (provider === 'fixed-media' || provider === 'gb28181-2016') {
       setProviderType('media');
     } else if (provider === 'OneNet' || provider === 'Ctwing') {
-      setProviderType('media');
+      setProviderType('cloud');
     } else if (provider === 'modbus-tcp' || provider === 'opc-ua') {
       setProviderType('channel');
     } else if (provider === 'child-device') {

src/pages/device/Instance/Detail/MetadataMap/EditableTable/index.tsx

@@ -75,6 +75,7 @@ const EditableCell = ({
     childNode = (
       <Form.Item style={{ margin: 0 }} name={dataIndex}>
         <AutoComplete
+          allowClear
           onBlur={() => {
             save();
           }}

src/pages/device/Product/Save/index.tsx

@@ -282,7 +282,7 @@ const Save = (props: Props) => {
                   });
                 }}
                 filterTreeNode={(input, treeNode) => treeNode.name.includes(input)}
-                placeholder={`${intlFormat('pages.form.tip.select', '请选择')}分类`}
+                placeholder={`${intlFormat('pages.form.tip.select', '请选择')}产品分类`}
                 fieldNames={{
                   label: 'name',
                   value: 'id',

src/pages/link/AccessConfig/Detail/Access/index.less

@@ -1,3 +1,4 @@
+@import '~antd/es/style/themes/default.less';
 .box {
   display: flex;
   flex-direction: column;
@@ -103,6 +104,43 @@
 
 .cardRender {
   width: 100%;
+  overflow: hidden;
   background: url('/images/access.png') no-repeat;
   background-size: 100% 100%;
+
+  .checkedIcon {
+    position: absolute;
+    right: -22px;
+    bottom: -22px;
+    z-index: 2;
+    display: none;
+    width: 44px;
+    height: 44px;
+    color: #fff;
+    background-color: red;
+    background-color: @primary-color-active;
+    transform: rotate(-45deg);
+
+    > div {
+      position: relative;
+      height: 100%;
+      transform: rotate(45deg);
+
+      > span {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        font-size: 12px;
+      }
+    }
+  }
+  &.checked {
+    position: relative;
+    color: @primary-color-active;
+    border-color: @primary-color-active;
+
+    .checkedIcon {
+      display: block;
+    }
+  }
 }

src/pages/link/AccessConfig/Detail/Access/index.tsx

@@ -6,12 +6,13 @@ import encodeQuery from '@/utils/encodeQuery';
 import { useHistory } from 'umi';
 import ReactMarkdown from 'react-markdown';
 import { getButtonPermission, getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { CheckOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import TitleComponent from '@/components/TitleComponent';
 import { PermissionButton } from '@/components';
 import { useDomFullHeight } from '@/hooks';
 import { onlyMessage } from '@/utils/util';
 import { descriptionList, MetworkTypeMapping, ProcotoleMapping } from './data';
+import classNames from 'classnames';
 
 interface Props {
   change: () => void;
@@ -281,7 +282,9 @@ const Access = (props: Props) => {
                 isPermission={networkPermission.add}
                 onClick={() => {
                   const url = getMenuPathByCode(MENUS_CODE['link/Type/Detail']);
-                  const tab: any = window.open(`${origin}/#${url}`);
+                  const tab: any = window.open(
+                    `${origin}/#${url}?type=${MetworkTypeMapping.get(props.provider?.id) || ''}`,
+                  );
                   tab!.onTabSaveSuccess = (value: any) => {
                     if (value.status === 200) {
                       queryNetworkList(props.provider?.id, {
@@ -301,12 +304,10 @@ const Access = (props: Props) => {
                 {networkList.map((item) => (
                   <Col key={item.id} span={8}>
                     <Card
-                      className={styles.cardRender}
-                      style={{
-                        width: '100%',
-                        borderColor:
-                          networkCurrent === item.id ? 'var(--ant-primary-color-active)' : '',
-                      }}
+                      className={classNames(
+                        styles.cardRender,
+                        networkCurrent === item.id ? styles.checked : '',
+                      )}
                       hoverable
                       onClick={() => {
                         setNetworkCurrent(item.id);
@@ -362,6 +363,11 @@ const Access = (props: Props) => {
                           </Tooltip>
                         </div>
                       </div>
+                      <div className={styles.checkedIcon}>
+                        <div>
+                          <CheckOutlined />
+                        </div>
+                      </div>
                     </Card>
                   </Col>
                 ))}
@@ -446,12 +452,16 @@ const Access = (props: Props) => {
                 {procotolList.map((item) => (
                   <Col key={item.id} span={8}>
                     <Card
-                      className={styles.cardRender}
-                      style={{
-                        width: '100%',
-                        borderColor:
-                          procotolCurrent === item.id ? 'var(--ant-primary-color-active)' : '',
-                      }}
+                      // className={styles.cardRender}
+                      className={classNames(
+                        styles.cardRender,
+                        procotolCurrent === item.id ? styles.checked : '',
+                      )}
+                      // style={{
+                      //   width: '100%',
+                      //   borderColor:
+                      //     procotolCurrent === item.id ? 'var(--ant-primary-color-active)' : '',
+                      // }}
                       hoverable
                       onClick={() => {
                         setProcotolCurrent(item.id);
@@ -467,6 +477,11 @@ const Access = (props: Props) => {
                           </Tooltip>
                         </div>
                       </div>
+                      <div className={styles.checkedIcon}>
+                        <div>
+                          <CheckOutlined />
+                        </div>
+                      </div>
                     </Card>
                   </Col>
                 ))}

src/pages/link/Type/Detail/index.tsx

@@ -70,8 +70,11 @@ const Save = observer(() => {
     field.loading = true;
     services(field).then(
       action.bound!((resp: any) => {
+        const type = location.href.split('?')?.pop()?.split('=')?.pop() || '';
         const save = location.href.split('/');
-        if (save[save.length - 1] === ':id') {
+        if (location.href.includes('type=') && !!type) {
+          field.value = type;
+        } else if (save[save.length - 1] === ':id') {
           field.value = resp[0].value;
         }
         field.dataSource = resp;