fix: 引导页及部分首页

package.json

@@ -82,6 +82,7 @@
     "braft-editor": "^2.3.9",
     "classnames": "^2.3.1",
     "dexie": "^3.0.3",
+    "driver.js": "^0.9.8",
     "echarts": "^5.3.2",
     "event-source-polyfill": "^1.0.25",
     "isomorphic-form-data": "^2.0.0",

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

@@ -231,7 +231,7 @@ const Save = (props: Props) => {
                     productName: node.label,
                   });
                 }}
-                placeholder={'请选择所属产品'}
+                placeholder={'请选择状态为正常的产品'}
                 filterOption={(input, option) => option.label.includes(input)}
               />
             </Form.Item>

src/pages/device/Product/Detail/Access/index.less

@@ -30,3 +30,44 @@
   padding: 20px;
   background-color: #e6e6e6;
 }
+
+.driver {
+  .driver-next-btn {
+    background-color: #2F54EB !important;
+    color: #fff !important;
+    text-shadow: 0 0 black !important;
+    font-size: 14px !important;
+    line-height: 22px !important;
+  }
+
+  .driver-prev-btn {
+    font-size: 14px !important;
+    line-height: 22px !important;
+    background-color: #fff !important;
+  }
+  .driver-prev-btn.driver-disabled{
+    display: none !important;
+  }
+
+  .driver-close-btn {
+    background-color: #fff !important;
+    border: none !important;
+    color: #828282 !important;
+    font-size: 14px !important;
+    padding: 5px 0 0 0 !important;
+  }
+
+  .driver-popover-description {
+    margin-bottom: 10px !important;
+  }
+
+  .driver-popover-title {
+    display: flex !important;
+    justify-content: space-between !important;
+
+    #guide {
+      margin-top: 3px;
+      font-size: 14px
+    }
+  }
+}

src/pages/device/Product/Detail/Access/index.tsx

@@ -24,6 +24,9 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import TitleComponent from '@/components/TitleComponent';
 import usePermissions from '@/hooks/permission';
 import { onlyMessage } from '@/utils/util';
+import Driver from 'driver.js';
+import 'driver.js/dist/driver.min.css';
+import './index.less';
 
 const componentMap = {
   string: 'Input',
@@ -38,6 +41,7 @@ const Access = () => {
   const { permission } = usePermissions('device/Product');
   const [dataSource, setDataSource] = useState<any[]>([]);
 
+
   const MetworkTypeMapping = new Map();
   MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
   MetworkTypeMapping.set('http-server-gateway', 'HTTP_SERVER');
@@ -53,6 +57,77 @@ const Access = () => {
 
   const [metadata, setMetadata] = useState<ConfigMetadata[]>([]);
 
+  const steps = [
+    {
+      element: '#metadata-driver',
+      popover: {
+        className: 'driver',
+        title: `<div id='title'>配置物模型</div><div id='guide'>1/3</div>`,
+        description: `配置产品物模型，实现设备在云端的功能描述。`,
+        position: 'bottom',
+
+      }
+    },
+    {
+      element: '.ant-switch',
+      popover: {
+        className: 'driver',
+        title: `<div id='title'>启用产品</div><div id='guide'>2/3</div>`,
+        description: '启用产品后，可在产品下新增设备。',
+        position: 'bottom'
+      }
+    },
+    {
+      element: '.ant-descriptions-item-label',
+      popover: {
+        className: 'driver',
+        title: `<div id='title'>添加设备</div><div id='guide'>3/3</div>`,
+        description: '添加设备，并连接到平台。',
+        position: 'bottom'
+      }
+    }
+  ]
+  const steps1 = [
+    {
+      element: '#driver-config',
+      popover: {
+        className: 'driver',
+        title: `<div id='title'>填写配置</div><div id='guide'>1/4</div>`,
+        description: `填写设备接入所需的配置参数。`,
+        position: 'right',
+
+      }
+    },
+    {
+      element: '#metadata-driver',
+      popover: {
+        className: 'driver',
+        title: `<div id='title'>配置物模型</div><div id='guide'>2/4</div>`,
+        description: `配置产品物模型，实现设备在云端的功能描述。`,
+        position: 'bottom',
+
+      }
+    },
+    {
+      element: '.ant-switch',
+      popover: {
+        className: 'driver',
+        title: `<div id='title'>启用产品</div><div id='guide'>3/4</div>`,
+        description: '启用产品后，可在产品下新增设备。',
+        position: 'bottom'
+      }
+    },
+    {
+      element: '.ant-descriptions-item-label',
+      popover: {
+        className: 'driver',
+        title: `<div id='title'>添加设备</div><div id='guide'>4/4</div>`,
+        description: '添加设备，并连接到平台。',
+        position: 'bottom'
+      }
+    }
+  ]
+
   const queryAccessDetail = (id: string) => {
     service
       .queryGatewayDetail({
@@ -202,15 +277,45 @@ const Access = () => {
   const id = productModel.current?.id;
 
   useEffect(() => {
-    if (id) {
-      productService
-        .getConfigMetadata(id)
-        .then((resp: { result: SetStateAction<ConfigMetadata[]> }) => {
-          setMetadata(resp.result);
-        });
-    }
+    const driver = new Driver({
+      allowClose: false,
+      doneBtnText: '我知道了',
+      closeBtnText: '不在提示',
+      nextBtnText: '下一步',
+      prevBtnText: '上一步',
+      // onDeselected:(e)=>{
+      //   console.log(e)
+      // },
+      onNext:()=>{
+        console.log('下一步')
+      },
+      onPrevious:()=>{
+        console.log('上一步')
+      },
+      onReset:()=>{
+        console.log('关闭')
+      },
+      // onDeselected:()=>{
+      //   console.log('oncolse')
+      // }
+    
+    });
     setVisible(!!productModel.current?.accessId);
     if (productModel.current?.accessId) {
+      if (id) {
+        productService
+          .getConfigMetadata(id)
+          .then((resp: { result: SetStateAction<ConfigMetadata[]> }) => {
+            setMetadata(resp.result);
+            if (resp.result && resp.result.length > 0) {
+              driver.defineSteps(steps1)
+              driver.start();
+            } else {
+              driver.defineSteps(steps)
+              driver.start();
+            }
+          });
+      }
       queryAccessDetail(productModel.current?.accessId);
       getConfigDetail(
         productModel.current?.messageProtocol || '',
@@ -221,9 +326,35 @@ const Access = () => {
           setDataSource(resp.result);
         }
       });
+    } else {
+      if (id) {
+        productService
+          .getConfigMetadata(id)
+          .then((resp: { result: SetStateAction<ConfigMetadata[]> }) => {
+            setMetadata(resp.result);
+          });
+      }
     }
   }, [productModel.current]);
 
+  // useEffect(() => {
+  //   console.log(productModel.current)
+  //   console.log(productModel.current?.accessId)
+  //   const driver = new Driver({
+  //     allowClose: false,
+  //     doneBtnText: '我知道了',
+  //     closeBtnText: '不在提示',
+  //     nextBtnText: '下一步',
+  //     prevBtnText: '上一步'
+  //   });
+  //   if (productModel.current?.accessId) {
+  //     setTimeout(() => {
+  //       driver.defineSteps(steps)
+  //       driver.start();
+  //     }, 1000)
+  //   }
+  // }, [])
+
   const form = createForm({
     validateFirst: true,
     initialValues: productModel.current?.configuration,
@@ -257,11 +388,11 @@ const Access = () => {
         enum:
           item?.type?.type === 'enum' && item?.type?.elements
             ? (item?.type?.elements || []).map((t: { value: string; text: string }) => {
-                return {
-                  label: t.text,
-                  value: t.value,
-                };
-              })
+              return {
+                label: t.text,
+                value: t.value,
+              };
+            })
             : [],
       };
     });
@@ -298,12 +429,12 @@ const Access = () => {
               title: (
                 <TitleComponent
                   data={
-                    <span>
+                    <div className='config'>
                       {item.name}
                       <Tooltip title="此配置来自于该产品接入方式所选择的协议">
                         <QuestionCircleOutlined />
                       </Tooltip>
-                    </span>
+                    </div>
                   }
                 />
               ),
@@ -354,6 +485,10 @@ const Access = () => {
     );
   };
 
+  // useEffect(() => {
+
+  // }, [])
+
   return (
     <div>
       {!visible ? (
@@ -447,14 +582,14 @@ const Access = () => {
                 <TitleComponent data={'连接信息'} />
                 {(access?.channelInfo?.addresses || []).length > 0
                   ? (access?.channelInfo?.addresses || []).map((item: any) => (
-                      <div key={item.address}>
-                        <Badge color={item.health === -1 ? 'red' : 'green'} text={item.address} />
-                      </div>
-                    ))
+                    <div key={item.address}>
+                      <Badge color={item.health === -1 ? 'red' : 'green'} text={item.address} />
+                    </div>
+                  ))
                   : '暂无连接信息'}
               </div>
 
-              <div className={styles.item}>{renderConfigCard()}</div>
+              <div className={styles.item} id='driver-config'>{renderConfigCard()}</div>
             </div>
           </Col>
           {config?.routes && config?.routes?.length > 0 && (
@@ -463,7 +598,7 @@ const Access = () => {
                 <div>
                   <div style={{ fontWeight: '600', marginBottom: 10 }}>
                     {access?.provider === 'mqtt-server-gateway' ||
-                    access?.provider === 'mqtt-client-gateway'
+                      access?.provider === 'mqtt-client-gateway'
                       ? 'topic'
                       : 'URL信息'}
                   </div>

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

@@ -54,7 +54,7 @@ const ProductDetail = observer(() => {
     {
       key: 'metadata',
       tab: (
-        <>
+        <div id='metadata-driver'>
           {intl.formatMessage({
             id: 'pages.device.instanceDetail.metadata',
             defaultMessage: '物模型',
@@ -82,7 +82,7 @@ const ProductDetail = observer(() => {
           >
             <QuestionCircleOutlined style={{ marginLeft: 5 }} />
           </Tooltip>
-        </>
+        </div>
       ),
       component: <Metadata type="product" />,
     },

src/pages/home/components/Steps.tsx

@@ -7,17 +7,19 @@ interface StepItemProps {
   content: string | React.ReactNode;
   onClick: () => void;
   url?: string;
+  after?: any
 }
 
 interface StepsProps {
   title: string | React.ReactNode;
   data: StepItemProps[];
+  style?: any
 }
 
 const ItemDefaultImg = require('/public/images/home/bottom-1.png');
 const StepsItem = (props: StepItemProps) => {
   return (
-    <div className={'step-item step-bar arrow-1'}>
+    <div className={props.after ? 'step-item step-bar ' : 'step-item step-bar arrow-1'}>
       <div className={'step-item-title'} onClick={props.onClick}>
         <div className={'step-item-img'}>
           <img src={props.url || ItemDefaultImg} />
@@ -35,9 +37,13 @@ const Steps = (props: StepsProps) => {
       <Title title={props.title} />
       <div
         className={'home-step-items'}
-        style={{ gridTemplateColumns: `repeat(${props.data ? props.data.length : 1}, 1fr)` }}
+        style={{
+          gridTemplateColumns: `repeat(${props.data ? props.data.length : 1}, 1fr)`,
+          minHeight: props.style.height,
+          gridColumnGap:props.style.gridColumnGap
+        }}
       >
-        {props.data && props.data.map((item) => <StepsItem {...item} />)}
+        {props.data && props.data.map((item) => <StepsItem {...item} after={props.style ? true : false} />)}
       </div>
     </div>
   );

src/pages/home/comprehensive/index.tsx

@@ -171,7 +171,7 @@ const Comprehensive = () => {
                 {
                   name: '产品数量',
                   value: productCount,
-                  children: '',
+                  children:require('/public/images/home/top-2.png'),
                 },
                 {
                   name: '设备数量',

src/pages/home/device/index.tsx

@@ -79,8 +79,12 @@ const Device = () => {
 
   return (
     <Row gutter={24}>
-      <Col span={24}>
+      <Col span={18}>
         <Steps
+          style={{
+            height:275,
+            gridColumnGap:20
+          }}
           title={
             <span>
               设备接入推荐步骤
@@ -159,24 +163,10 @@ const Device = () => {
           ]}
         />
       </Col>
-      <Col span={18} style={{ marginTop: 24 }}>
-        <Body
-          title={'平台架构图'}
-          english={'PLATFORM ARCHITECTURE DIAGRAM'}
-          url={require('/public/images/home/content1.png')}
-        />
-        {/* <Guide
-          title="物联网引导"
-          data={guideList}
-        // jump={(auth: boolean, url: string, param: string) => {
-        //   pageJump(auth, url, param);
-        // }}
-        /> */}
-      </Col>
-      <Col span={6} style={{ marginTop: 24 }}>
+      <Col span={6}>
         <Statistics
           style={{ gridTemplateColumns: 'repeat(1, 1fr)' }}
-          height={448}
+          // height={448}
           data={[
             {
               name: '产品数量',
@@ -208,9 +198,9 @@ const Device = () => {
           }
         />
       </Col>
-      {/* <Col span={24}>
+      <Col span={24} style={{marginTop:24}}>
         <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
-      </Col> */}
+      </Col>
 
       <ProductChoose
         visible={productVisible}