fix:蓝牙扫描loading

package-lock.json

@@ -8,6 +8,7 @@
       "name": "outline",
       "version": "0.1.0",
       "dependencies": {
+        "@ant-design/icons": "^6.0.0",
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
         "@reduxjs/toolkit": "^2.6.0",
@@ -174,16 +175,14 @@
       }
     },
     "node_modules/@ant-design/icons": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.6.1.tgz",
-      "integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==",
-      "license": "MIT",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-6.0.0.tgz",
+      "integrity": "sha512-o0aCCAlHc1o4CQcapAwWzHeaW2x9F49g7P3IDtvtNXgHowtRWYb7kiubt8sQPFvfVIVU/jLw2hzeSlNt0FU+Uw==",
       "dependencies": {
-        "@ant-design/colors": "^7.0.0",
+        "@ant-design/colors": "^8.0.0",
         "@ant-design/icons-svg": "^4.4.0",
-        "@babel/runtime": "^7.24.8",
-        "classnames": "^2.2.6",
-        "rc-util": "^5.31.1"
+        "@rc-component/util": "^1.2.1",
+        "classnames": "^2.2.6"
       },
       "engines": {
         "node": ">=8"
@@ -199,6 +198,22 @@
       "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==",
       "license": "MIT"
     },
+    "node_modules/@ant-design/icons/node_modules/@ant-design/colors": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-8.0.0.tgz",
+      "integrity": "sha512-6YzkKCw30EI/E9kHOIXsQDHmMvTllT8STzjMb4K2qzit33RW2pqCJP0sk+hidBntXxE+Vz4n1+RvCTfBw6OErw==",
+      "dependencies": {
+        "@ant-design/fast-color": "^3.0.0"
+      }
+    },
+    "node_modules/@ant-design/icons/node_modules/@ant-design/fast-color": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/fast-color/-/fast-color-3.0.0.tgz",
+      "integrity": "sha512-eqvpP7xEDm2S7dUzl5srEQCBTXZMmY3ekf97zI+M2DHOYyKdJGH0qua0JACHTqbkRnD/KHFQP9J1uMJ/XWVzzA==",
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
     "node_modules/@ant-design/react-slick": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
@@ -3786,6 +3801,23 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@rc-component/util": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@rc-component/util/-/util-1.2.1.tgz",
+      "integrity": "sha512-AUVu6jO+lWjQnUOOECwu8iR0EdElQgWW5NBv5vP/Uf9dWbAX3udhMutRlkVXjuac2E40ghkFy+ve00mc/3Fymg==",
+      "dependencies": {
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/@rc-component/util/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.6.0",
       "resolved": "https://registry.npmmirror.com/@reduxjs/toolkit/-/toolkit-2.6.0.tgz",
@@ -5567,6 +5599,25 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/antd/node_modules/@ant-design/icons": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.6.1.tgz",
+      "integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/icons-svg": "^4.4.0",
+        "@babel/runtime": "^7.24.8",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.31.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "proxy": "http://192.168.1.146:8080",
   "dependencies": {
+    "@ant-design/icons": "^6.0.0",
     "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@reduxjs/toolkit": "^2.6.0",

src/pages/system/Setting.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect } from 'react';
-import { Button, Cascader, Input, message, List, Typography } from 'antd';
+import { Button, Cascader, Input, message } from 'antd';
+import {
+  LoadingOutlined,
+} from '@ant-design/icons';
 import { getOrgListService } from '../../services/ktj/org';
 import { OrgItem } from '../../services/ktjTypes';
 import {bleItem, child, GwdItem, orgCascaderType, systemItem} from './types';
@@ -8,11 +11,11 @@ import {  useAppDispatch, useAppSelector } from "../../utils/hooks";
 import { updateSystemAccountState, updateSystemOrgState } from '../../store/system/systemSlice';
 import {createWebSocket, sharedWsUrl} from "../../services/socket";
 import {start, stop, disconnect, connect} from "../../services/ble/ble";
-import {JointContent} from "antd/es/message/interface";
+
 export default function Setting(){
   useEffect(()=>{
     queryRailData()
-    onBleStart()
+    // onBleStart()
     querySettingData()
     return ()=>{
       onBleStop()
@@ -173,8 +176,11 @@ export default function Setting(){
     });
   }
 
+  const [loading, setLoading] = useState(false);
+
   function onBleStart() {
     start().then(() => {
+      setLoading(true);
       message.success('蓝牙开始扫描')
     })
   }
@@ -220,25 +226,32 @@ export default function Setting(){
 
   const connectionStatus = () => {
     if (!deviceInfo.isConnected) {
-      return (
-          <section className='p-[20px]'>
-            <div>附近设备</div>
-            {bleList.map(item => {
-              return <div key={item.address}>
-                <div className={'flex justify-between w-1/4 pt-2.5'}>
-                  <p >
-                    <p className={'text-[16px] text-gray-400'}>{item.name}</p>
-                    <p className={'text-[12px] text-gray-400'}>{item.address}</p>
-                  </p>
-                  {
-                    item.connect ? <p className={'text-[12px] text-gray-400'}>已连接</p> : <Button loading={item.loading} type={'primary'} onClick={() =>bleConnect(item.address)}>连接</Button>
-                  }
+      if (loading) {
+        return (
+            <section className='p-[20px]'>
+              <div>附近设备 <LoadingOutlined /></div>
+              {bleList.map(item => {
+                return <div key={item.address}>
+                  <div className={'flex justify-between w-1/4 pt-2.5'}>
+                    <p >
+                      <p className={'text-[16px] text-gray-400'}>{item.name}</p>
+                      <p className={'text-[12px] text-gray-400'}>{item.address}</p>
+                    </p>
+                    {
+                      item.connect ? <p className={'text-[12px] text-gray-400'}>已连接</p> : <Button loading={item.loading} type={'primary'} onClick={() =>bleConnect(item.address)}>连接</Button>
+                    }
 
+                  </div>
                 </div>
-              </div>
-            })}
-          </section>
-      );
+              })}
+            </section>
+        );
+      }else {
+        return (
+            <Button className='m-[20px]' onClick={onBleStart}>搜索蓝牙设备</Button>
+        )
+      }
+
     } else {
       if(deviceInfo.connectedType === 'UART_CHANNEL') {
         return (