fix: 修改诊断

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

@@ -1,40 +1,100 @@
+import { TitleComponent } from '@/components';
 import { randomString } from '@/utils/util';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Modal } from 'antd';
+import { InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { Badge, Descriptions, Modal, Tooltip } from 'antd';
+import _ from 'lodash';
 import styles from './index.less';
 
 interface Props {
   close: () => void;
-  data: any[];
+  data: any;
 }
 
 const DiagnosticAdvice = (props: Props) => {
   const { data } = props;
-
   return (
     <Modal
-      title="诊断建议"
+      title="设备诊断"
       onCancel={() => {
         props.close();
       }}
       onOk={() => {
         props.close();
       }}
-      width={700}
+      width={900}
       visible
     >
-      <div className={styles.advice}>
-        <div className={styles.alert}>
-          <InfoCircleOutlined style={{ marginRight: 10 }} />
-          所有诊断均无异常但设备任未上线，请检查以下内容
+      <div>
+        <TitleComponent data="诊断建议" />
+        <div className={styles.advice}>
+          <div className={styles.alert}>
+            <InfoCircleOutlined style={{ marginRight: 10 }} />
+            所有诊断均无异常但设备任未上线，请检查以下内容
+          </div>
+          <div style={{ marginLeft: 10 }}>
+            {(data?.list || []).map((item: any) => (
+              <div className={styles.infoItem} key={randomString()} style={{ margin: '10px 0' }}>
+                {item}
+              </div>
+            ))}
+          </div>
         </div>
-        <div>
-          {(data || []).map((item: any) => (
-            <div className={styles.infoItem} key={randomString()} style={{ margin: '10px 0' }}>
-              {item}
-            </div>
+      </div>
+      <div style={{ marginTop: 15 }}>
+        <TitleComponent data="连接信息" />
+        <Descriptions column={2}>
+          <Descriptions.Item span={1} label="设备ID">
+            {data?.info?.id || ''}
+          </Descriptions.Item>
+          {data?.info?.address.length > 0 && (
+            <Descriptions.Item span={1} label="连接地址">
+              <Tooltip
+                placement="topLeft"
+                title={
+                  <div className="serverItem">
+                    {(data?.info?.address || []).map((i: any) => (
+                      <div key={i.address}>
+                        <Badge color={i.health === -1 ? 'red' : 'green'} />
+                        {i.address}
+                      </div>
+                    ))}
+                  </div>
+                }
+              >
+                <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>
+              </Tooltip>
+            </Descriptions.Item>
+          )}
+
+          {(_.flatten(_.map(data?.info?.config, 'properties')) || []).map((item: any) => (
+            <Descriptions.Item
+              key={randomString()}
+              span={1}
+              label={
+                item?.description ? (
+                  <div>
+                    <span style={{ marginRight: '10px' }}>{item.name}</span>
+                    <Tooltip title={item.description}>
+                      <QuestionCircleOutlined />
+                    </Tooltip>
+                  </div>
+                ) : (
+                  item.name
+                )
+              }
+            >
+              {data?.info?.configValue[item?.property] || ''}
+            </Descriptions.Item>
           ))}
-        </div>
+        </Descriptions>
       </div>
     </Modal>
   );

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

@@ -32,7 +32,7 @@ interface Props {
 
 const Status = observer((props: Props) => {
   const { providerType } = props;
-  const time = 1000;
+  const time = 500;
   const device = { ...InstanceModel.detail };
   const history = useHistory();
 
@@ -1101,47 +1101,81 @@ const Status = observer((props: Props) => {
   const diagnoseNetworkOtherConfig = async () => {
     if (device.state?.value != 'online') {
       const item: ReactNode[] = [];
+      let info: any = {
+        id: device.id,
+      };
+      item.push(<Badge status="default" text="请检查设备运行状态是否正常" />);
       if (providerType === 'network') {
-        DiagnoseStatusModel.configuration.product.map((it) => {
-          item.push(
-            <Badge
-              status="default"
-              text={
-                <span>
-                  产品-{it.name}规则可能有加密处理，请认真查看
-                  <a
-                    onClick={() => {
-                      jumpAccessConfig();
-                    }}
-                  >
-                    设备接入配置
-                  </a>
-                  中【消息协议】说明
-                </span>
-              }
-            />,
-          );
-        });
-        DiagnoseStatusModel.configuration.device.map((it) => {
-          item.push(
-            <Badge
-              status="default"
-              text={
-                <span>
-                  设备-{it.name}规则可能有加密处理，请认真查看
-                  <a
-                    onClick={() => {
-                      jumpAccessConfig();
-                    }}
-                  >
-                    设备接入配置
-                  </a>
-                  中【消息协议】说明
-                </span>
-              }
-            />,
-          );
-        });
+        item.push(
+          <Badge
+            status="default"
+            text={
+              (DiagnoseStatusModel.gateway?.channelInfo?.addresses || []).length > 1 ? (
+                <>
+                  请检查设备网络是否畅通，并确保设备已连接到以下地址之一:
+                  <div className="serverItem">
+                    {(DiagnoseStatusModel.gateway?.channelInfo?.addresses || []).map((i: any) => (
+                      <span style={{ marginLeft: 15 }} key={i.address}>
+                        <Badge color={i.health === -1 ? 'red' : 'green'} />
+                        {i.address}
+                      </span>
+                    ))}
+                  </div>
+                </>
+              ) : (
+                <>
+                  请检查设备网络是否畅通，并确保设备已连接到:
+                  {(DiagnoseStatusModel.gateway?.channelInfo?.addresses || []).map((i: any) => (
+                    <span style={{ marginLeft: 15 }} key={i.address}>
+                      <Badge color={i.health === -1 ? 'red' : 'green'} />
+                      {i.address}
+                    </span>
+                  ))}
+                </>
+              )
+            }
+          />,
+        );
+        // DiagnoseStatusModel.configuration.product.map((it) => {
+        //   item.push(
+        //     <Badge
+        //       status="default"
+        //       text={
+        //         <span>
+        //           产品-{it.name}规则可能有加密处理，请认真查看
+        //           <a
+        //             onClick={() => {
+        //               jumpAccessConfig();
+        //             }}
+        //           >
+        //             设备接入配置
+        //           </a>
+        //           中【消息协议】说明
+        //         </span>
+        //       }
+        //     />,
+        //   );
+        // });
+        // DiagnoseStatusModel.configuration.device.map((it) => {
+        //   item.push(
+        //     <Badge
+        //       status="default"
+        //       text={
+        //         <span>
+        //           设备-{it.name}规则可能有加密处理，请认真查看
+        //           <a
+        //             onClick={() => {
+        //               jumpAccessConfig();
+        //             }}
+        //           >
+        //             设备接入配置
+        //           </a>
+        //           中【消息协议】说明
+        //         </span>
+        //       }
+        //     />,
+        //   );
+        // });
         if (
           device?.protocol &&
           device?.accessProvider &&
@@ -1189,13 +1223,24 @@ const Status = observer((props: Props) => {
             }
           }
         }
+        info = {
+          ...info,
+          address: DiagnoseStatusModel.gateway?.channelInfo?.addresses || [],
+          config: DiagnoseStatusModel.configuration.device || [],
+        };
       } else if (providerType === 'child-device') {
       } else if (providerType === 'media') {
       } else if (providerType === 'cloud') {
       } else if (providerType === 'channel') {
       }
-      item.push(<Badge status="default" text="请检查设备是否已开机" />);
-      setDiagnoseData(item);
+      info = {
+        ...info,
+        configValue: device?.configuration || {},
+      };
+      setDiagnoseData({
+        list: [...item],
+        info,
+      });
       setDiagnoseVisible(true);
     } else {
       DiagnoseStatusModel.state = 'success';