asder

package.json

@@ -20,6 +20,7 @@
     ]
   },
   "dependencies": {
+    "@ant-design/pro-components": "^2.3.30",
     "@ant-design/pro-layout": "^6.5.0",
     "ahooks": "^3.7.2",
     "color-thief-react": "^2.1.0",
@@ -28,7 +29,9 @@
     "express-http-proxy": "^1.6.3",
     "react": "17.x",
     "react-amap": "^1.2.8",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "17.x",
+    "react-resizable": "^3.0.4",
     "umi": "^3.5.35",
     "umi-request": "^1.4.0"
   },

src/components/AutoTable/Resizecell/index.jsx

+import React, { Component } from 'react';
+import { Resizable } from 'react-resizable';
+
+function Resizecell({ onResize, onResizeStop, width, onClick, ...restProps }) {
+  return (
+    <Resizable
+      width={width ?? 1}
+      height={0}
+      onResize={onResize}
+      onResizeStop={onResizeStop}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+}
+
+export default Resizecell;

src/global.less

@@ -912,7 +912,60 @@ body,
 }
 
 .diyinput {
-  input {
-    background-color: rgba(255, 255, 255, 0.5) !important;
+  font-size: 2rem;
+  text-align: center;
+  color: #ffffff;
+  position: relative;
+  &::before {
+    content: '';
+    width: 2vw;
+    height: 2vw;
+    position: absolute;
+    top: -1vw;
+    left: -2vw;
+    border: 0.5vw solid #ffffff;
+    border-right: none;
+    border-bottom: none;
+  }
+  &::after {
+    content: '';
+    width: 2vw;
+    height: 2vw;
+    position: absolute;
+    bottom: -1vw;
+    right: -2vw;
+    border: 0.5vw solid #ffffff;
+    border-left: none;
+    border-top: none;
+  }
+}
+
+// protable 默认样式覆盖
+.ant-pro-table .ant-pro-table-search,
+.ant-pro-card-body {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.ant-pro-table-list-toolbar-container {
+  padding-top: 0 !important;
+  padding-bottom: 24px !important;
+}
+
+.ant-pro-table-list-toolbar-right {
+  flex: 1 !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+}
+.ant-pro-card-body {
+  padding-top: 0.8rem !important;
+  * {
+    font-size: 0.8rem !important;
+  }
+  .anticon-download {
+    * {
+      font-size: 1rem !important;
+    }
   }
 }

src/layouts/footer.jsx

 import React, { useState } from 'react';
 import { Col, Row } from 'antd';
+import { history } from 'umi';
 
-const ContentList = (props) => {
-  const { title, listData } = props;
+const ContentList = ({ title, listData }) => {
   return (
     <div className="footer-content">
       <h2>{title}</h2>
       <div>
         {listData.map((item, index) => (
-          <li>
-            <a href={item.link}>{item.text}</a>
+          <li
+            onClick={() => {
+              history.replace({
+                pathname: item.link,
+                query: item?.query ?? {},
+              });
+            }}
+          >
+            <a>{item.text}</a>
           </li>
         ))}
       </div>
@@ -20,65 +27,74 @@ const ContentList = (props) => {
 export default () => {
   const list1 = [
     {
-      link: '#',
+      link: '/about/insert',
       text: '走进南高',
     },
     {
-      link: '#',
+      link: '/about/honer',
       text: '南高荣誉',
     },
     {
-      link: '#',
+      link: '/about/news',
       text: '南高资讯',
     },
     {
-      link: '#',
+      link: '/about/join',
       text: '加入南高',
     },
   ];
 
   const list2 = [
     {
-      link: '#',
+      link: '/factory/typea/mes',
       text: 'MES智能制造管理系统',
     },
     {
-      link: '#',
+      link: '/factory/typea/wms',
       text: 'WMS智能仓储管理系统',
     },
     {
-      link: '#',
+      link: '/factory/typea/ems',
       text: 'EMS设备运维管理系统',
     },
     {
-      link: '#',
+      link: '/factory/typea/iot',
       text: 'IOT数据采集系统',
     },
     {
-      link: '#',
+      link: '/factory/typea/plm',
       text: 'PLM产品生命周期管理系统',
     },
     {
-      link: '#',
+      link: '/factory/typea/pdm',
       text: 'PDM产品数据管理系统',
     },
     {
-      link: '#',
+      link: '/factory/typeb/datagate',
       text: '智能网关',
     },
   ];
 
   const list3 = [
     {
-      link: '#',
+      link: '/download',
+      query: {
+        key: '1',
+      },
       text: '硬件产品资料',
     },
     {
-      link: '#',
+      link: '/download',
+      query: {
+        key: '2',
+      },
       text: '软件产品资料',
     },
     {
-      link: '#',
+      link: '/download',
+      query: {
+        key: '3',
+      },
       text: '宣传画册及其他',
     },
   ];
@@ -97,7 +113,13 @@ export default () => {
           </Col>
           <Col xs={24} sm={24} xl={24} xxl={6}>
             <div className="footer-content">
-              <button>联系我们</button>
+              <button
+                onClick={() => {
+                  history.push('/about/contact');
+                }}
+              >
+                联系我们
+              </button>
               <div className="contact">
                 <li>电话&nbsp;&nbsp;&nbsp;&nbsp;025-86111901</li>
                 <li>邮箱&nbsp;&nbsp;&nbsp;&nbsp;center@jsnangao.com</li>

src/layouts/index.jsx

-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
 import styles from './index.less';
-import { Menu, Grid, Drawer, Tooltip } from 'antd';
+import { Menu, Grid, Drawer, Tooltip, Row, Col } from 'antd';
 import { history, Helmet } from 'umi';
 import routes from '../../routes';
-import { MenuOutlined, PlayCircleFilled } from '@ant-design/icons';
+import {
+  MenuOutlined,
+  PlayCircleFilled,
+  PhoneFilled,
+  WechatFilled,
+} from '@ant-design/icons';
+import { Scrollbars } from 'react-custom-scrollbars';
 import Footer from './footer';
+
 const { useBreakpoint } = Grid;
+
+const colc = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
+  col = { xs: 24, sm: 24, md: 10, lg: 10, xl: 10, xxl: 10 },
+  cold = { xs: 24, sm: 24, md: 8, lg: 8, xl: 8, xxl: 8 },
+  colds = { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 8 },
+  cols = { xs: 24, sm: 24, md: 14, lg: 14, xl: 14, xxl: 14 };
+
 const mapTree = (org) => {
   const haveChildren = Array.isArray(org.routes) && org.routes.length > 0;
   if (!org.name || org.hideInMenu) return;
@@ -38,6 +52,7 @@ const MenuRender = ({ arrs, mode, activeKey }) => {
 
 function Layout({ children, location }) {
   const [collspan, setcollspan] = useState(false);
+  const scrollRef = useRef();
   const screens = useBreakpoint();
   const arrs = useMemo(() => {
     let arr = [];
@@ -49,6 +64,14 @@ function Layout({ children, location }) {
     return arr;
   }, []);
 
+  useEffect(() => {
+    scrollRef.current.view.scroll({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  }, [location.pathname]);
+
   return (
     <div className={styles.container}>
       <Helmet encodeSpecialCharacters={false}>
@@ -121,8 +144,31 @@ function Layout({ children, location }) {
           )}
         </div>
       </header>
-      <div className="content">{children}</div>
-      <Footer></Footer>
+      <Scrollbars
+        thumbMinSize={10}
+        autoHide
+        style={{
+          width: '100%',
+          height: 'calc(100vh - 80px)',
+          overflowX: 'hidden',
+        }}
+        hideTracksWhenNotNeeded={true}
+        ref={scrollRef}
+      >
+        <div className="content">{children}</div>
+        <div className={styles.navbar}>
+          <Row>
+            <Col {...cold}>
+              <PhoneFilled />
+            </Col>
+            <Col {...cold}>
+              <WechatFilled />
+            </Col>
+            <Col {...cold}></Col>
+          </Row>
+        </div>
+        <Footer></Footer>
+      </Scrollbars>
     </div>
   );
 }

src/layouts/index.less

 .container {
   height: 100%;
+  overflow: hidden;
   li {
     span {
       text-align: center !important;

src/pages/download/index.jsx

 import React, { useState, useEffect } from 'react';
 import { Input, Space, Tabs } from 'antd';
+import AutoTable from '@/components/AutoTable';
+import { DownloadOutlined } from '@ant-design/icons';
+import { history } from 'umi';
 
-const { Search } = Input;
-function Download() {
-  const onSearch = (value) => {
-    console.log(value);
-  };
+function Tables({ extraparams }) {
+  return (
+    <AutoTable
+      path="/fileCenter/getFileCenterPage"
+      extraparams={{ ...extraparams }}
+      resizeable={false}
+      columns={[
+        {
+          title: '文件名称',
+          dataIndex: 'fileName',
+          key: 'fileName',
+        },
+        {
+          title: '文件分类',
+          dataIndex: 'typeName',
+          key: 'typeName',
+          search: false,
+        },
+        {
+          title: '语言',
+          dataIndex: 'languageName',
+          key: 'languageName',
+          search: false,
+        },
+        {
+          title: '下载',
+          dataIndex: 'fileList',
+          key: 'fileList',
+          search: false,
+          render: (dom, row) => {
+            return (
+              <a href={row?.fileList[0]?.url} download={row?.fileList[0]?.name}>
+                <DownloadOutlined style={{ fontSize: '0.8rem' }} />
+              </a>
+            );
+          },
+        },
+      ]}
+    />
+  );
+}
+
+function Download({ location: { query } }) {
+  const [fileType, setfileType] = useState(query.key);
 
   const items = [
-    { label: '宣传画册及其他', key: '1', children: 'Content 1' }, // remember to pass the key prop
-    { label: '硬件产品资料', key: '2', children: 'Content 2' },
-    { label: '软件产品资料', key: '3', children: 'Content 2' },
+    {
+      label: '硬件产品资料',
+      key: '1',
+      children: (
+        <Tables
+          extraparams={{
+            fileType,
+          }}
+        />
+      ),
+    },
+    {
+      label: '软件产品资料',
+      key: '2',
+      children: (
+        <Tables
+          extraparams={{
+            fileType,
+          }}
+        />
+      ),
+    },
+    {
+      label: '宣传画册及其他',
+      key: '3',
+      children: (
+        <Tables
+          extraparams={{
+            fileType,
+          }}
+        />
+      ),
+    },
   ];
 
+  useEffect(() => {
+    setfileType(query.key);
+  }, [query]);
+
   return (
     <div id="mesContainer">
       <div style={{ position: 'relative' }}>
@@ -31,21 +107,27 @@ function Download() {
             bottom: 0,
             margin: 'auto',
             width: '20vw',
-            height: 42,
+            height: '3rem',
             minWidth: 320,
           }}
         >
-          <Search
-            placeholder="输入关键词搜索"
-            onSearch={onSearch}
-            enterButton
-            size="large"
-            style={{ borderRadius: 6, overflow: 'hidden' }}
-          />
+          下载中心
         </div>
       </div>
       <div className="section">
-        <Tabs items={items} />
+        <Tabs
+          activeKey={fileType}
+          onChange={(val) => {
+            history.push({
+              pathname: '/download',
+              query: {
+                key: val,
+              },
+            });
+            setfileType(val);
+          }}
+          items={items}
+        />
       </div>
     </div>
   );