fix: 首页及产品新增提示框

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

@@ -3,10 +3,11 @@ import { service } from '@/pages/device/Product';
 import type { ProductItem } from '@/pages/device/Product/typings';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { RadioCard, UploadImage } from '@/components';
-import { Col, Form, Input, Modal, Row, TreeSelect } from 'antd';
-import { useRequest } from 'umi';
+import { Button, Col, Form, Input, Modal, Row, TreeSelect } from 'antd';
+import { useHistory, useRequest } from 'umi';
 import { debounce } from 'lodash';
 import { onlyMessage } from '@/utils/util';
+import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
 
 interface Props {
   visible: boolean;
@@ -21,6 +22,7 @@ const Save = (props: Props) => {
   const intl = useIntl();
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const history = useHistory<Record<string, string>>();
   const { data: classOptions, run: classRequest } = useRequest(service.category, {
     manual: true,
     formatResult: (response) => {
@@ -70,6 +72,47 @@ const Save = (props: Props) => {
     }
   }, [visible]);
 
+  const messageModel = (id: string) => {
+    return Modal.success({
+      title: <div style={{ fontWeight: 600 }}>产品创建成功</div>,
+      width: 600,
+      okText: '关闭',
+      content: (
+        <>
+          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
+            <div>产品ID: {id}</div>
+            <Button
+              type="link"
+              onClick={() => {
+                history.push(`${getMenuPathByParams(MENUS_CODE['device/Product/Detail'], id)}`);
+                Modal.destroyAll();
+              }}
+            >
+              查看详情
+            </Button>
+          </div>
+          <div>接下来推荐操作:</div>
+          <div style={{ fontWeight: 600 }}> 1、配置产品接入方式</div>
+          <div style={{ color: '#757575' }}>
+            点击具体产品的查看按钮，进入“设备接入”tab页，并参照设备铭牌说明选择匹配的接入方式
+          </div>
+          <div style={{ fontWeight: 600 }}>2、添加测试设备：</div>
+          <div style={{ color: '#757575' }}>
+            进入设备列表，添加单个设备，用于验证产品模型是否配置正确
+          </div>
+          <div style={{ fontWeight: 600 }}> 3、功能调试：</div>
+          <div style={{ color: '#757575' }}>
+            点击查看具体设备，进入“设备诊断”对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确
+          </div>
+          <div style={{ fontWeight: 600 }}> 4、批量添加设备：</div>
+          <div style={{ color: '#757575' }}>
+            进入设备列表页面，点击批量导入设备，批量添加同一产品下的设备
+          </div>
+        </>
+      ),
+    });
+  };
+
   const handleSave = async () => {
     const formData = await form.validateFields();
     if (formData) {
@@ -79,18 +122,36 @@ const Save = (props: Props) => {
       const { deviceTypeId, ...extraFormData } = formData;
       extraFormData.deviceType = formData.deviceTypeId;
       setLoading(true);
-      const res = await service.update(extraFormData);
-      setLoading(false);
-      if (res.status === 200) {
-        onlyMessage('保存成功');
-        if (props.reload) {
-          props.reload();
+      if (props.model === 'add') {
+        const res: any = await service.save(extraFormData);
+        setLoading(false);
+        if (res.status === 200) {
+          // onlyMessage('保存成功');
+          messageModel(res.result.id);
+          if (props.reload) {
+            props.reload();
+          }
+          props.close();
+          form.resetFields();
+          if ((window as any).onTabSaveSuccess) {
+            (window as any).onTabSaveSuccess(res);
+            setTimeout(() => window.close(), 300);
+          }
         }
-        props.close();
-        form.resetFields();
-        if ((window as any).onTabSaveSuccess) {
-          (window as any).onTabSaveSuccess(res);
-          setTimeout(() => window.close(), 300);
+      } else {
+        const res = await service.update(extraFormData);
+        setLoading(false);
+        if (res.status === 200) {
+          onlyMessage('保存成功');
+          if (props.reload) {
+            props.reload();
+          }
+          props.close();
+          form.resetFields();
+          if ((window as any).onTabSaveSuccess) {
+            (window as any).onTabSaveSuccess(res);
+            setTimeout(() => window.close(), 300);
+          }
         }
       }
     }

src/pages/home/components/GuideHome.tsx

@@ -0,0 +1,82 @@
+import './index.less';
+import { message } from 'antd';
+import useHistory from '@/hooks/route/useHistory';
+import Title from './Title';
+
+const Image = {
+  1: require('/public/images/home/home-1.png'),
+  2: require('/public/images/home/home-2.png'),
+  3: require('/public/images/home/home-3.png'),
+};
+
+interface GuideProps {
+  title: string;
+  data: GuideItemProps[];
+}
+
+interface GuideItemProps {
+  key: string;
+  name: string;
+  english: string;
+  url: string;
+  param?: Record<string, any>;
+  index?: number;
+  auth: boolean;
+  img?: string;
+}
+
+const GuideItem = (props: GuideItemProps) => {
+  const history = useHistory();
+
+  const jumpPage = () => {
+    if (props.url && props.auth) {
+      history.push(`${props.url}`, props.param);
+    } else {
+      message.warning('暂无权限，请联系管理员');
+    }
+  };
+
+  return (
+    <div
+      className={'home-guide-item step-bar'}
+      onClick={jumpPage}
+      style={{ marginTop: 12, padding: 10, border: '1px solid #eee' }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div>
+          <img src={props.img} />
+        </div>
+        <div>
+          <div className={'item-english'}>{`STP${props.index}`}</div>
+          <div
+            className={'item-title'}
+            style={{
+              margin: 0,
+              fontSize: '18px',
+            }}
+          >
+            {props.name}
+          </div>
+        </div>
+      </div>
+      <div className={`item-index`} style={{ width: 37 }}>
+        <img src={Image[props.index!]} />
+      </div>
+    </div>
+  );
+};
+
+const GuideHome = (props: GuideProps) => {
+  return (
+    <div className={'home-guide'}>
+      <Title title={props.title} />
+      <div>
+        {props.data.map((item, index) => (
+          <GuideItem {...item} index={index + 1} key={item.key} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default GuideHome;

src/pages/home/components/index.less

@@ -86,6 +86,7 @@
 
 .home-body {
   .home-base;
+  min-height: 440px;
 
   margin-bottom: @margin;
   padding-bottom: 26.5%;

src/pages/home/comprehensive/index.tsx

@@ -3,7 +3,7 @@ import useHistory from '@/hooks/route/useHistory';
 import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import { Col, message, Row, Tooltip } from 'antd';
 import Body from '../components/Body';
-import Guide from '../components/Guide';
+// import Guide from '../components/Guide';
 import Statistics from '../components/Statistics';
 import Steps from '../components/Steps';
 import { service } from '..';
@@ -14,6 +14,7 @@ import Pie from '../components/Pie';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import ProductChoose from '../components/ProductChoose';
 import DeviceChoose from '../components/DeviceChoose';
+import GuideHome from '../components/GuideHome';
 
 const Comprehensive = () => {
   const [subscribeTopic] = useSendWebsocketMessage();
@@ -91,6 +92,7 @@ const Comprehensive = () => {
     {
       key: 'product',
       name: '创建产品',
+      img: require('/public/images/home/guide-home1.png'),
       english: 'CREATE PRODUCT',
       auth: !!productPermission.add,
       url: 'device/Product',
@@ -102,6 +104,7 @@ const Comprehensive = () => {
       key: 'device',
       name: '创建设备',
       english: 'CREATE DEVICE',
+      img: require('/public/images/home/guide-home2.png'),
       auth: !!devicePermission.add,
       url: 'device/Instance',
       param: {
@@ -112,6 +115,7 @@ const Comprehensive = () => {
       key: 'rule-engine',
       name: '规则引擎',
       english: 'RULE ENGINE',
+      img: require('/public/images/home/guide-home3.png'),
       auth: !!rulePermission.add,
       url: 'rule-engine/Instance',
       param: {
@@ -124,6 +128,7 @@ const Comprehensive = () => {
     {
       key: 'access',
       name: '设备接入配置',
+      img: require('/public/images/home/guide-home4.png'),
       english: 'DEVICE ACCESS CONFIGURATION',
       auth: !!accessPermission,
       url: 'link/AccessConfig',
@@ -132,6 +137,7 @@ const Comprehensive = () => {
       key: 'logger',
       name: '日志排查',
       english: 'LOG SCREEN',
+      img: require('/public/images/home/guide-home5.png'),
       auth: !!logPermission,
       url: 'Log',
       param: {
@@ -141,6 +147,7 @@ const Comprehensive = () => {
     {
       key: 'realtime',
       name: '实时监控',
+      img: require('/public/images/home/guide-home6.png'),
       english: 'REAL-TIME MONITORING',
       auth: !!linkPermission,
       url: 'link/DashBoard',
@@ -152,80 +159,84 @@ const Comprehensive = () => {
 
   return (
     <Row gutter={24}>
-      <Col span={14}>
-        <Guide title="物联网引导" data={guideList} />
+      <Col span={6}>
+        <GuideHome title="物联网引导" data={guideList} />
+        <GuideHome title="运维引导" data={guideOpsList} />
       </Col>
-      <Col span={10}>
-        <Statistics
-          data={[
-            {
-              name: '产品数量',
-              value: productCount,
-              children: '',
-            },
-            {
-              name: '设备数量',
-              value: deviceCount,
-              children: '',
-            },
-          ]}
-          title="设备统计"
-          extra={
-            <div style={{ fontSize: 14, fontWeight: 400 }}>
-              <a
-                onClick={() => {
-                  const url = getMenuPathByCode(MENUS_CODE['device/DashBoard']);
-                  if (!!url) {
-                    history.push(`${url}`);
-                  } else {
-                    message.warning('暂无权限，请联系管理员');
-                  }
-                }}
-              >
-                详情
-              </a>
-            </div>
-          }
-        />
-      </Col>
-      <Col span={14}>
-        <Guide title="运维引导" data={guideOpsList} />
-      </Col>
-      <Col span={10}>
-        <Statistics
-          data={[
-            {
-              name: 'CPU使用率',
-              value: String(cpuValue) + '%',
-              children: <Pie value={cpuValue} />,
-            },
-            {
-              name: 'JVM内存',
-              value: String(jvmValue) + '%',
-              children: <Pie value={jvmValue} />,
-            },
-          ]}
-          title="基础统计"
-          extra={
-            <div style={{ fontSize: 14, fontWeight: 400 }}>
-              <a
-                onClick={() => {
-                  const url = getMenuPathByCode(MENUS_CODE['link/DashBoard']);
-                  if (!!url) {
-                    history.push(`${url}`);
-                  } else {
-                    message.warning('暂无权限，请联系管理员');
-                  }
-                }}
-              >
-                详情
-              </a>
-            </div>
-          }
-        />
-      </Col>
-      <Col span={24}>
-        <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
+      <Col span={18}>
+        <Row gutter={24}>
+          <Col span={12}>
+            <Statistics
+              data={[
+                {
+                  name: '产品数量',
+                  value: productCount,
+                  children: '',
+                },
+                {
+                  name: '设备数量',
+                  value: deviceCount,
+                  children: '',
+                },
+              ]}
+              title="设备统计"
+              extra={
+                <div style={{ fontSize: 14, fontWeight: 400 }}>
+                  <a
+                    onClick={() => {
+                      const url = getMenuPathByCode(MENUS_CODE['device/DashBoard']);
+                      if (!!url) {
+                        history.push(`${url}`);
+                      } else {
+                        message.warning('暂无权限，请联系管理员');
+                      }
+                    }}
+                  >
+                    详情
+                  </a>
+                </div>
+              }
+            />
+          </Col>
+          <Col span={12}>
+            <Statistics
+              data={[
+                {
+                  name: 'CPU使用率',
+                  value: String(cpuValue) + '%',
+                  children: <Pie value={cpuValue} />,
+                },
+                {
+                  name: 'JVM内存',
+                  value: String(jvmValue) + '%',
+                  children: <Pie value={jvmValue} />,
+                },
+              ]}
+              title="基础统计"
+              extra={
+                <div style={{ fontSize: 14, fontWeight: 400 }}>
+                  <a
+                    onClick={() => {
+                      const url = getMenuPathByCode(MENUS_CODE['link/DashBoard']);
+                      if (!!url) {
+                        history.push(`${url}`);
+                      } else {
+                        message.warning('暂无权限，请联系管理员');
+                      }
+                    }}
+                  >
+                    详情
+                  </a>
+                </div>
+              }
+            />
+          </Col>
+        </Row>
+        <Row gutter={24}>
+          <Col span={24} style={{ marginTop: 24 }}>
+            <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
+          </Col>
+        </Row>
       </Col>
       <Col span={24}>
         <Steps