feats

src/components/UploadFile/index.jsx

@@ -1,64 +1,85 @@
-import React, { useCallback, useState } from 'react'
-import { UploadOutlined } from '@ant-design/icons';
-import { Upload, Button } from 'antd';
-import { uploadFile } from '@/services/rotationChart';
+import React, { useCallback, useState } from "react";
+import { UploadOutlined } from "@ant-design/icons";
+import { Upload, Button } from "antd";
+import { uploadFile } from "@/services/rotationChart";
 
 const customRequest = ({ file, onError, onSuccess }) => {
   const data = new FormData();
-  data.append('file', file);
+  data.append("file", file);
 
-  uploadFile(data).then((res) => {
-    onSuccess(res.url)
-  }).catch((err) => {
-    onError(err);
-  })
+  uploadFile(data)
+    .then((res) => {
+      onSuccess(res.url);
+    })
+    .catch((err) => {
+      onError(err);
+    });
 
   return {
     abort() {
-      console.log('upload progress is aborted.');
+      console.log("upload progress is aborted.");
     },
   };
-}
+};
 
 export default (props) => {
   const { value, onChange, preview, ...inputProps } = props;
   const [loading, setLoading] = useState(false);
 
-  const onUpload = useCallback((e) => {
-    const { files } = e.target;
-    if (!files || files.length < 1) return;
-
-    setLoading(true);
-    const data = new FormData();
-    data.append('file', files[0]);
+  const onUpload = useCallback(
+    (e) => {
+      const { files } = e.target;
+      if (!files || files.length < 1) return;
 
-    uploadFile(data).then((res) => {
-      setLoading(false);
-      if (typeof onChange === 'function') {
-        onChange(res.url)
-      }
-    }).catch((err) => {
-      setLoading(false);
-      // onError(err);
-    })
+      setLoading(true);
+      const data = new FormData();
+      data.append("file", files[0]);
 
-  }, [onChange])
+      uploadFile(data)
+        .then((res) => {
+          setLoading(false);
+          if (typeof onChange === "function") {
+            onChange(res.url);
+          }
+        })
+        .catch((err) => {
+          setLoading(false);
+          // onError(err);
+        });
+    },
+    [onChange]
+  );
 
   const onClick = () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    Object.assign(input, inputProps);    
-    input.addEventListener('change', onUpload);
+    const input = document.createElement("input");
+    input.type = "file";
+    Object.assign(input, inputProps);
+    input.addEventListener("change", onUpload);
     // input.removeEventListener('change', onUpload);
     input.click();
-  }
+  };
 
   return (
     <div>
-      <Button icon={<UploadOutlined />} onClick={onClick}>上传文件</Button>
-      {
-        value && typeof preview === 'function' && preview(value)
-      }
+      <Button icon={<UploadOutlined />} onClick={onClick}>
+        上传文件
+      </Button>
+      {value &&
+        preview &&
+        (typeof preview === "function" ? (
+          preview(value)
+        ) : (
+          <div style={{ marginTop: "1em" }}>
+            <a
+              href={`${value}`}
+              download
+              // rel="noopener noreferrer"
+              // key="link"
+            >
+              {value?.substring(value?.lastIndexOf("/") + 1)}
+            </a>
+          </div>
+        ))}
     </div>
-  )
-}
+  );
+};

src/components/Wangeditor/index.jsx

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from "react";
 import "@wangeditor/editor/dist/css/style.css";
 import { Editor, Toolbar } from "@wangeditor/editor-for-react";
 
+// 工具栏配置参考
+// https://www.cnblogs.com/-roc/p/16400965.html
+
 function MyEditor(props) {
   const {
     value,
@@ -10,11 +13,9 @@ function MyEditor(props) {
     },
     toolbarConfig = {
       excludeKeys: [
-        "insertImage",
-        "viewImageLink",
-        "editImage",
-        "uploadImage",
-        "uploadVideo",
+
+        "group-image",
+        "group-video",
       ],
     },
     editorConfig = {
@@ -27,7 +28,10 @@ function MyEditor(props) {
   console.log(props, "MyEditor");
   // 模拟 ajax 请求，异步设置 html
   useEffect(() => {
-    console.log(editor     );
+    if(editor){
+      console.log(editor,editor.getConfig(),editor.getAllMenuKeys(),editor.getMenuConfig('image')) ;
+    }
+   
 
     setHtml(value);
   }, [value]);

src/components/chart/index.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, } from 'react';
 
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
 import * as echarts from 'echarts/core';
@@ -51,7 +51,7 @@ echarts.use([
 ]);
 
 export default (props) => {
-  const { className, style, option } = props;
+  const { className, style, option, onInited, onRendered } = props;
 
   const domRef = useRef();
   const chartRef = useRef();
@@ -59,6 +59,10 @@ export default (props) => {
   useEffect(() => {
     if (!chartRef.current) {
       chartRef.current = echarts.init(domRef.current);
+
+      if (typeof onInited === 'function') {
+        onInited(chartRef.current);
+      }
     }
 
     const resize = () => {
@@ -71,6 +75,10 @@ export default (props) => {
     chartRef.current.setOption(option);
     resize();
 
+    if (typeof onRendered === 'function') {
+      onRendered(chartRef.current);
+    }
+
     window.addEventListener('resize', resize);    
     return () => window.removeEventListener('resize', resize);
   }, [option]);
@@ -78,4 +86,4 @@ export default (props) => {
   return (
     <div className={className} style={style} ref={domRef}></div>
   )
-}
+};

src/layouts/AuthLayout/components/Container.jsx

@@ -13,7 +13,7 @@ export default (props) => {
   
   useEffect(() => {
     const containerHeight = containerRef.current.offsetHeight;
-    const footerHeight = document.querySelector('.ant-layout-footer').offsetHeight;
+    const footerHeight = (document.querySelector('.ant-layout-footer') || {}).offsetHeight || 0;
     setMinHeight(containerHeight - footerHeight);
   }, []);
 
@@ -24,7 +24,7 @@ export default (props) => {
           <Outlet />
         {/* </PageTransition> */}
       </Content>
-      <Footer />
+      {!props.noFooter && <Footer />}      
     </div>
   )
 }

src/layouts/AuthLayout/index.jsx

@@ -16,7 +16,8 @@ export default (props) => {
   const { theme } = useModel('system');
   const { user, menus } = useModel('user');
   const location = useLocation();
-  const currentRoute = useRoute();
+  const { meta } = useRoute() || {};
+  const { noLayout = false, noSiderBar = false, noFooter = false } = meta || {};
 
   const splitMenus = useMemo(() => menus.map(x => ({ ...x, children: undefined })), [menus]);
   const siderMenus = useMemo(() => {
@@ -29,14 +30,14 @@ export default (props) => {
       <HtmlTitle />
       <RequireLogin>
         {
-          currentRoute && currentRoute.meta && currentRoute.meta.noLayout
+          noLayout
             ? <Outlet />
             : (
               <Layout style={{ minHeight: '100vh' }}>
                 <Header theme={theme} menus={splitMenus} location={location} />
                 <Layout>
-                  <SiderBar theme={theme} menus={siderMenus} location={location} />
-                  <Container location={location} />
+                  { !noSiderBar && <SiderBar theme={theme} menus={siderMenus} location={location} /> }
+                  <Container location={location} noFooter={noFooter} />
                 </Layout>
               </Layout>
             )

src/pages/cms/emergencyPlan/detail/index.jsx

@@ -15,6 +15,7 @@ export default (props) => {
   const [searchParams] = useSearchParams();
   const id = searchParams.get("id");
   const [data, setData] = useState({});
+  const [url, setUrl] = useState("");
   const navigate = useNavigate();
 
   const formRef = useRef();
@@ -23,16 +24,29 @@ export default (props) => {
     if (id) {
       getPostsDetail(id).then((res) => {
         setData(res);
+        setUrl(res.filesList[0]?.fileAddr);
       });
     }
   }, [id]);
 
   return (
-    <Card extra={<Button onClick={()=>navigate(-1)}> 返回</Button>}>
+    <Card extra={<Button onClick={() => navigate(-1)}> 返回</Button>}>
       <Title level={2} style={{ marginBottom: "2em" }}>
         {data.title}
       </Title>
       <div dangerouslySetInnerHTML={{ __html: data?.detail }}></div>
+      {url && (
+        <div style={{marginTop:"2em"}}>
+          <a
+            href={`${url}`}
+            download
+            // rel="noopener noreferrer"
+            // key="link"
+          >
+            {url?.substring(url?.lastIndexOf("/") + 1)}
+          </a>
+        </div>
+      )}
     </Card>
   );
 };

src/pages/cms/emergencyPlan/edit/index.jsx

@@ -19,21 +19,14 @@ export default (props) => {
   const navigate = useNavigate();
 
   const formRef = useRef();
-  // useEffect(() => {
-  //   getStoreList({ isDish: 1, pageSize: 9999 }).then((res) => {
-  //     setFoodDict(
-  //       res?.records?.map((x) => ({
-  //         label: x.name,
-  //         value: x.id,
-  //       }))
-  //     );
-  //   });
-  // }, [id]);
 
   useEffect(() => {
     if (id) {
       getPostsDetail(id).then((res) => {
-        formRef.current.setFieldsValue(res);
+        formRef.current.setFieldsValue({
+          ...res,
+          filesList: res.filesList?.map((x) => x.fileAddr)[0]||null,
+        });
       });
     }
   }, [id]);
@@ -41,17 +34,31 @@ export default (props) => {
   const onFinish = async (values) => {
     console.log(values, "===");
 
-    if (id) {
-      updatePosts(id, { ...values, status: Number(values.status) }).then(
-        (res) => {
-          navigate(-1);
-        }
-      );
-    } else {
-      savePosts({ ...values, status: Number(values.status) }).then((res) => {
-        navigate(-1);
-      });
-    }
+    // if (id) {
+    //   updatePosts(id, { ...values, status: Number(values.status) }).then(
+    //     (res) => {
+    //       navigate(-1);
+    //     }
+    //   );
+    // } else {
+    savePosts({
+      ...values,
+      filesList: values.filesList
+        ? [
+            {
+              fileAddr: values.filesList,
+              fileName: values.filesList?.substring(
+                values.filesList?.lastIndexOf("/") + 1
+              ),
+            },
+          ]
+        : null,
+      status: Number(values.status),
+      ...(id?{id}:{}),
+    }).then((res) => {
+      navigate(-1);
+    });
+    // }
 
     return false;
   };
@@ -98,28 +105,8 @@ export default (props) => {
           >
             <Wangeditor></Wangeditor>
           </ProForm.Item>
-          <ProForm.Item
-            name="file"
-            label="文件"
-   
-           
-          >
-            <UploadFile
-              preview={(value) => {
-                return (
-                  <div style={{ marginTop: "2em" }}>
-                    <a
-                      href={value}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      key="link"
-                    >
-                      {value}
-                    </a>
-                  </div>
-                );
-              }}
-            ></UploadFile>
+          <ProForm.Item name="filesList" label="文件">
+            <UploadFile preview={true}></UploadFile>
           </ProForm.Item>
 
           <ProFormSelect

src/pages/cms/emergencyPlan/list/index.jsx

@@ -64,7 +64,7 @@ const EmergencyPlanList = (props) => {
       width: 200,
       render: (_, record) => [
         <Button
-          key={3}
+          key={4}
           style={{ padding: 0 }}
           type="link"
           onClick={() => {

src/pages/cms/files/list/addFiles.jsx

@@ -1,55 +1,56 @@
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from "@ant-design/icons";
 import {
   ModalForm,
   ProForm,
   ProFormDateRangePicker,
   ProFormSelect,
   ProFormText,
-} from '@ant-design/pro-components';
-import { Button, Form, message } from 'antd';
+} from "@ant-design/pro-components";
+import { Button, Form, message } from "antd";
+import { getPostsFilesList, savePostsFiles } from "@/services/posts";
+import UploadFile from "@/components/UploadFile";
 
-
-
-export default () => {
+export default ({onsuccess=()=>{}}) => {
   const [form] = Form.useForm();
 
+  const onFinish = async (values) => {
+    console.log(values);
+    // await waitTime(2000);
 
-  const onFinish = ()=>{
-
-  }
+    await savePostsFiles(values);
+    onsuccess()
+    return true;
+  };
 
   return (
     <ModalForm
-      title="新建表单"
-      trigger={
-        <Button type="primary">
-          <PlusOutlined />
-          新建表单
-        </Button>
-      }
+      title="新增文件"
+      trigger={<Button type="primary">新增</Button>}
       form={form}
-      autoFocusFirstInput
+      layout={"horizontal"}
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 12 }}
       modalProps={{
         destroyOnClose: true,
-        onCancel: () => console.log('run'),
+        onCancel: () => console.log("run"),
       }}
       submitTimeout={2000}
-      onFinish={async (values) => {
-        await waitTime(2000);
-        console.log(values.name);
-        message.success('提交成功');
-        return true;
-      }}
+      onFinish={onFinish}
     >
-    
-        <ProFormText
-          width="md"
-          name="name"
-          label="文件名称"
-
-          placeholder="请输入名称"
-        />
-
+      <ProFormText
+        width="md"
+        name="fileName"
+        label="文件名称"
+        rules={[{ required: true, message: "请输入文件名称" }]}
+        placeholder="请输入名称"
+      />
+      <ProForm.Item
+        name="fileAddr"
+        label="文件"
+        rules={[{ required: true, message: "请上传文件" }]}
+      >
+        <UploadFile preview={true}></UploadFile>
+      </ProForm.Item>
     </ModalForm>
   );
-};
+};

src/pages/cms/files/list/index.jsx

@@ -1,157 +1,68 @@
-import { getPostsList, deletePosts, updatePosts } from "@/services/posts";
+import { getPostsFilesList, deletePostsFiles } from "@/services/posts";
 import { queryTable } from "@/utils/request";
 import { PageContainer, ProTable, ProList } from "@ant-design/pro-components";
 import { useNavigate } from "react-router-dom";
 import { Button, message, Popconfirm } from "antd";
 import { useRef, useState, useEffect } from "react";
 import { floatMultiply, floatDivide } from "@/utils";
-import AddFiles from './addFiles'
+import AddFiles from "./addFiles";
 
 const FilesList = (props) => {
-
   const [showDetail, setShowDetail] = useState(false);
   const [activeKey, setActiveKey] = useState("");
   const actionRef = useRef();
   const navigate = useNavigate();
 
-
-  const updata = (row) => {
-    if (row.id) {
-      updatePosts(row.id, { status: row.status === 1 ? 0 : 1 }).then((res) => {
-        actionRef.current.reload();
-      });
-    }
-  };
-
   const handleDelete = (id) => {
     if (id) {
-      deletePosts(id).then((res) => {
+      deletePostsFiles(id).then((res) => {
         actionRef.current.reload();
       });
     }
   };
 
-  const columns = [
-    {
-      title: "内容名称",
-      dataIndex: "title",
-    },
-
-    {
-      title: "状态",
-      dataIndex: "status",
-      valueType: "select",
-      valueEnum: {
-        0: { text: "未发布", status: "Error" },
-        1: { text: "已发布", status: "Processing" },
-      },
-    },
-    {
-      title: "发布人",
-      dataIndex: "createPerson",
-      search: false,
-    },
-    {
-      title: "操作",
-      valueType: "option",
-      width: 200,
-      render: (_, record) => [
-        <Button
-          key={3}
-          style={{ padding: 0 }}
-          type="link"
-          onClick={() => {
-            updata(record);
-          }}
-        >
-          {record.status === 1 ? "下架" : "发布"}
-        </Button>,
-        <Button
-          key={1}
-          style={{ padding: 0 }}
-          type="link"
-          onClick={() => {
-            navigate(`/cms/emergency-plan/detail?id=${record.id}`);
-          }}
-        >
-          详情
-        </Button>,
-        <Button
-          key={2}
-          style={{ padding: 0 }}
-          type="link"
-          onClick={() => {
-            navigate(`/cms/emergency-plan/edit?id=${record.id}`);
-          }}
-        >
-          修改
-        </Button>,
-        <Popconfirm
-          key={3}
-          title="您是否确认删除 ?"
-          onConfirm={() => handleDelete(record.id)}
-          okText="确定"
-          cancelText="取消"
-        >
-          {/* manualPush */}
-          <Button style={{ padding: 0 }} type="link">
-            删除
-          </Button>
-        </Popconfirm>,
-      ],
-    },
-  ];
-
   return (
     <PageContainer>
       <ProList
         toolBarRender={() => {
           return [
-           <AddFiles />,
+            <AddFiles
+              onsuccess={() => {
+                actionRef.current.reload();
+              }}
+            />,
           ];
         }}
+        actionRef={actionRef}
+        request={queryTable(getPostsFilesList)}
         search={{}}
         rowKey="id"
         // headerTitle="基础列表"
-        pagination={{
-          pageSize: 5,
-        }}
-        showActions="hover"
+        pagination={true}
+        // showActions="hover"
         metas={{
           title: {
             dataIndex: "fileName",
             title: "文件名称",
           },
-          description: {
-            dataIndex: "title",
-            search: false,
-          },
+
           actions: {
             render: (text, row) => [
-              <a
-                href={row.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                key="link"
-              >
-                链路
-              </a>,
-              <a
-                href={row.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                key="warning"
-              >
-                报警
+              <a href={row.fileAddr} download>
+                下载
               </a>,
-              <a
-                href={row.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                key="view"
+              <Popconfirm
+                key={3}
+                title="您是否确认删除 ?"
+                onConfirm={() => handleDelete(row.id)}
+                okText="确定"
+                cancelText="取消"
               >
-                查看
-              </a>,
+                {/* manualPush */}
+                <Button style={{ padding: 0 }} type="link">
+                  删除
+                </Button>
+              </Popconfirm>,
             ],
             search: false,
           },

src/pages/guaranteeTask/index.jsx

@@ -1,11 +1,14 @@
-import { deleteGuaranteeTask, getGuaranteeTaskList } from '@/services/guaranteeTask';
-import { queryTable } from '@/utils/request';
-import { PageContainer, ProTable } from '@ant-design/pro-components';
-import { Link, useNavigate } from 'react-router-dom';
+import {
+  deleteGuaranteeTask,
+  getGuaranteeTaskList,
+} from "@/services/guaranteeTask";
+import { queryTable } from "@/utils/request";
+import { PageContainer, ProTable } from "@ant-design/pro-components";
+import { Link, useNavigate } from "react-router-dom";
 
-import { Button, message, Popconfirm } from 'antd';
-import moment from 'moment';
-import { useRef, useState } from 'react';
+import { Button, message, Popconfirm } from "antd";
+import moment from "moment";
+import { useRef, useState } from "react";
 
 const GuaranteeTaskList = (props) => {
   const navigate = useNavigate();
@@ -18,7 +21,7 @@ const GuaranteeTaskList = (props) => {
   const handleDelete = (id) => {
     if (id) {
       deleteGuaranteeTask(id).then((res) => {
-        message.success('删除成功');
+        message.success("删除成功");
         actionRef.current.reload();
       });
     }
@@ -31,47 +34,47 @@ const GuaranteeTaskList = (props) => {
 
   const columns = [
     {
-      title: '保障序号',
-      dataIndex: 'guaranteeNo',
+      title: "保障序号",
+      dataIndex: "guaranteeNo",
     },
     {
-      title: '受领人',
-      dataIndex: 'receiver',
+      title: "受领人",
+      dataIndex: "receiver",
     },
     {
-      title: '时间区间',
-      dataIndex: 'dateRange',
-      valueType: 'dateRange',
+      title: "时间区间",
+      dataIndex: "dateRange",
+      valueType: "dateRange",
       search: {
         transform: (value) => {
-          console.log(value, value[0].valueOf(), 'valuevalue');
+          console.log(value, value[0].valueOf(), "valuevalue");
 
           return {
-            startDate: moment(value[0]).format('yyyy-MM-DD'),
-            endDate: moment(value[1]).format('yyyy-MM-DD'),
+            startDate: moment(value[0]).format("yyyy-MM-DD"),
+            endDate: moment(value[1]).format("yyyy-MM-DD"),
           };
         },
       },
     },
     {
-      title: '保障地点',
-      dataIndex: 'address',
+      title: "保障地点",
+      dataIndex: "address",
       search: false,
     },
     {
-      title: '保障人数',
-      dataIndex: 'totalPersonNum',
+      title: "保障人数",
+      dataIndex: "totalPersonNum",
       search: false,
     },
     {
-      title: '伙食标准',
-      dataIndex: 'standard',
+      title: "伙食标准",
+      dataIndex: "standard",
       search: false,
     },
 
     {
-      title: '操作',
-      valueType: 'option',
+      title: "操作",
+      valueType: "option",
       width: 200,
       render: (_, record) => [
         <Button
@@ -97,13 +100,13 @@ const GuaranteeTaskList = (props) => {
             删除
           </Button>
         </Popconfirm>,
-        <Button
+        <a
           key={4}
-          style={{ padding: 0 }}
-          type="link"
+          href={`${window.location.pathname}#/task/guaranteeTask/print?id=${record.id}`}
+          target="_blank"
         >
-          <Link target="_blank" to={`/task/guaranteeTask/print?id=${record.id}`}>打印</Link>
-        </Button>,
+          执行
+        </a>,
       ],
     },
   ];
@@ -125,7 +128,7 @@ const GuaranteeTaskList = (props) => {
             key="2"
             type="primary"
             onClick={() => {
-              history.push('/guaranteeTask/edit');
+              navigate(`/task/guaranteeTask/edit`);
             }}
           >
             新增

src/pages/message/detail.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, Card, Typography } from 'antd';
+import { useSearchParams, Link } from 'react-router-dom';
+import { getMessage } from '@/services/message';
+import useBool from '@/utils/hooks/useBool';
+
+export default (props) => {
+  const [searchParams] = useSearchParams();
+  const [loading, startLoading, cancelLoading] = useBool(false);
+
+  const [detail, setDetail] = React.useState({});
+  const id = searchParams.get('id');
+
+  React.useEffect(() => {
+    if (id) {
+      startLoading()
+      getMessage(id).then((res) => {
+        setDetail(res);
+        cancelLoading();
+      }).catch(() => {
+        cancelLoading();
+      });
+    }
+  }, [id]);
+
+  return (
+    <Card
+      loading={loading}
+      title={detail.createDate}
+      actions={[
+        <Button key={1} type="link" disabled={detail.isReaded}>设为已读</Button>,
+        <Link>去处理</Link>
+      ]}
+    >
+      <Typography.Paragraph>
+        {detail.message}
+      </Typography.Paragraph>
+    </Card>
+  )
+}

src/pages/message/index.jsx

@@ -1,24 +1,28 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { queryTable } from '@/utils/request';
 import { ProTable } from '@ant-design/pro-components';
 import { Button, message, Popconfirm } from 'antd';
-import { getMessageList } from '@/services/message';
+import { getMessageList, setMessageReaded } from '@/services/message';
 
 const queryMessage = queryTable(getMessageList);
 
 export default (props) => {
+  const actionRef = React.useRef();
+
+  const setReaded = (id) => {
+    setMessageReaded(id).then(() => {
+      actionRef.current.reset();
+    })
+  }
+
   const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: false,
-    },
     {
       title: '时间',
       dataIndex: 'createDate',
       valueType: 'date',
       search: false,
+      width: 160,
     },
     {
       title: '时间',
@@ -42,12 +46,13 @@ export default (props) => {
       title: '状态',
       dataIndex: 'isReaded',
       search: false,
+      width: 120,
       valueEnum: {
-        1: {
+        true: {
           text: '已读',
           status: 'Processing',
         },
-        0: {
+        false: {
           text: '未读',
           status: 'Error',
         },
@@ -57,24 +62,34 @@ export default (props) => {
       title: '操作',
       valueType: 'option',
       width: 200,
-      render: (_, record) => [
-        <Button
-          key={2}
-          style={{ padding: 0 }}
-          type="link"
-          onClick={() => {
-            navigate(`/system/message/detail?id=${record.id}`);
-          }}
-        >
-          详情
-        </Button>,
-      ],
+      render: (_, record) => {
+        const doUrl = record.targetType === 'store' ?
+        `/stock/list?id=${record.targetId}` : undefined;
+
+        return [
+          <Button
+            key={1}
+            type="link"
+            disabled={record.isReaded}
+            onClick={() => setReaded(record.id)}
+          >
+            设为已读
+          </Button>,
+          <Link
+            key={2}
+            to={doUrl}
+          >
+            去处理
+          </Link>,
+        ]
+      },
     },
   ]
 
   return (
     <ProTable
       rowKey="id"
+      actionRef={actionRef}
       request={queryMessage}
       columns={columns}
     />

src/pages/statis/charts.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import Sumary from './components/Sumary';
+import Task from './components/Task';
+import DeviceType from './components/DeviceType';
+import StoreCost from './components/StoreCost';
+import User from './components/User';
+import Styles from './style.module.less';
+
+const mtp = {
+  marginTop: '24px',
+}
+
+export default (props) => {
+  const gutter = 24;
+
+  return (
+    <div className={Styles['chart-page']}>
+      <Sumary gutter={gutter} />
+      <Row gutter={gutter} style={mtp}>
+        <Col span={18}>
+          <Task />
+        </Col>
+        <Col span={6}>
+          <DeviceType />
+        </Col>
+      </Row>
+      <Row gutter={gutter} style={mtp}>
+        <Col span={12}>
+          <StoreCost />
+        </Col>
+        <Col span={12}>
+          <User />
+        </Col>
+      </Row>
+      <Row gutter={gutter} style={mtp}>
+        <Col span={24}>
+          <Task />
+        </Col>
+      </Row>
+    </div>
+  )
+}

src/pages/statis/components/Age.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+let dataIndex = 0;
+export default (props) => {
+
+  const chartRef = React.useRef();
+  const option = getOption({"20(含)至29岁": 10, "20(含)至39岁": 20, "40(含)至49岁": 30, "50(含)岁以上": 40});
+
+  React.useEffect(() => {
+    const t = setTimeout(() => {
+      const chart = chartRef.current;
+      chart.on('mousemove', function(e) {
+        chart.dispatchAction({ type: 'downplay', dataIndex });
+        chart.dispatchAction({ type: 'highlight', dataIndex: e.dataIndex });
+        dataIndex = e.dataIndex
+      });
+      chart.dispatchAction({ type: 'highlight', dataIndex });
+      clearTimeout(t);
+    }, 300);
+  }, []);
+
+  const onInited = (chart) => chartRef.current = chart;
+
+  return (
+    <Chart option={option} style={{ height: '270px' }} onInited={onInited} />
+  )
+}
+
+function getOption(seriesData) {
+  const data = Object.keys(seriesData).map(function(key) {
+    return {
+      value: seriesData[key],
+      name: key
+    }
+  });
+
+  return {
+    title: {
+      show: true,
+      top: '6%',
+      left: 'center',
+      text: '人员年龄统计',
+      textStyle: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: 'normal'
+      }
+    },
+    color: ['#3DE0A4', '#FF8940', '#3FC9F4', '#CB55E9'],
+    series: [
+      {
+        type: 'pie',
+        top: '10%',
+        radius: ['60%', '70%'],
+        label: {
+          show: false,
+          position: 'center',
+          lineHeight: 28,
+          borderRadius: [100, 100, 100, 100],
+          borderColor: '#FD8F00',
+          borderWidth: 2,
+          padding: 16,
+          width: 100,
+          height: 100,
+          formatter: [
+            '{s1|{d}%}',
+            '{s2|{b}}',
+            '{s3|{c}}',
+          ].join('\n'),
+          rich: {
+            s1: {
+              color: '#FD8F00',
+              fontSize: 24,
+            },
+            s2: {
+              color: 'rgba(255, 255, 255, .7)',
+              fontSize: 16,
+            },
+            s3: {
+              color: '#fff',
+              fontSize: 18,
+            },
+          }
+        },
+        emphasis: {
+          scaleSize: 10,
+          label: {
+            show: true,
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data,
+      },
+    ]
+  };
+}

src/pages/statis/components/DeviceType.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import * as echarts from 'echarts/core';
+import icon from '@/assets/images/statistic/设备分类统计.png';
+import Chart from '@/components/chart';
+import StatisCard from './StatisCard';
+
+let dataIndex = 0;
+
+export default (props) => {
+
+  const chartRef = React.useRef();
+  const option = getOption({ "制餐设备": 20, "运输设备": 33, "野外保障设备": 10 });
+
+  React.useEffect(() => {
+    const t = setTimeout(() => {
+      const chart = chartRef.current;
+      chart.on('mousemove', function(e) {
+        chart.dispatchAction({ type: 'downplay', dataIndex });
+        chart.dispatchAction({ type: 'highlight', dataIndex: e.dataIndex });
+        dataIndex = e.dataIndex
+      });
+      chart.dispatchAction({ type: 'highlight', dataIndex });
+      clearTimeout(t);
+    }, 300);
+  }, []);
+
+  const onInited = (chart) => chartRef.current = chart;
+
+  return (
+    <StatisCard
+      title="设备分类统计"
+      icon={icon}
+    >
+      <Chart option={option} style={{ height: '300px' }} onInited={onInited} />
+    </StatisCard>
+  )
+}
+
+function getOption(seriesData) {
+  const data = Object.keys(seriesData).map(function(key) {
+    return {
+      value: seriesData[key],
+      name: key
+    }
+  });
+
+  return {
+    color: ['#3DE0A4', '#FF8940', '#3FC9F4', '#CB55E9'],
+    series: [
+      {
+        name: '设备分类统计',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#071C51',
+          borderWidth: 4
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          scaleSize: 16,
+          label: {
+            show: true,
+            color: '#ffffff',
+            fontSize: 16,
+            fontWeight: 'bold',
+            lineHeight: 24,
+            formatter: function (params) {
+              return params.name + '\n' + params.value
+            },
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: data,
+      }
+    ]
+  };
+}

src/pages/statis/components/Edu.jsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+export default (props) => {
+
+  const option = getOption(["本科以上", "本科及大专", "大专以下"], [10, 20, 30]);
+
+  return (
+    <Chart option={option} style={{ height: '300px' }} />
+  )
+}
+
+function getOption(yAxisData, seriesData) {
+  var maxValue = seriesData.slice().sort().reverse()[0] - 0 + 10
+
+  var title = {
+    show: true,
+    top: '6%',
+    left: 'center',
+    text: '人员学历统计',
+    textStyle: {
+      color: '#fff',
+      fontSize: 18,
+      fontWeight: 'normal'
+    }
+  }
+
+  // 实际上是绘制了 seriesData.length 个的柱图
+  var percent = 100 / seriesData.length
+  var grid = seriesData.map(function (_, index) {
+    return {
+      top: (20 + index * 20 ) + '%',
+      height: percent + '%',
+    }
+  })
+
+  var xAxis = seriesData.map(function (_, index) {
+    return { type: 'value', show: false, gridIndex: index }
+  })
+
+  var yAxis = yAxisData.map(function(_, index) {
+    return {
+      type: 'category',
+      position: 'right',
+      gridIndex: index,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 16,
+        formatter: function () {
+          return seriesData[index];
+        }
+      }
+    }
+  })
+
+  var colors = [
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: '#87E8C5' },
+      { offset: 1, color: '#15E096' }
+    ]),
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: '#00BFFA' },
+      { offset: 1, color: '#0160EB' }
+    ]),
+    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: '#FFBE4E' },
+      { offset: 1, color: '#F77C30' }
+    ]),
+  ]
+
+  var barGaps = []; // 用来做背景
+  var pictorialBar = []; // 尾部的圆
+  var series = seriesData.map(function(dt, index) {
+    barGaps.push({
+      type: 'bar',
+      silent: true,
+      name: yAxisData[index],
+      xAxisIndex: index,
+      yAxisIndex: index,
+      barWidth: 16,
+      barGap: '-180%',
+      data: [maxValue],
+      label: {
+        show: true,
+        position: [0, '-160%'],
+        formatter: '{a}',
+        color: '#fff',
+        fontSize: 16,
+      },
+      itemStyle: {
+        color: 'rgba(255, 255, 255, 0.05)',
+        borderColor: 'rgba(255, 255, 255, 0.2)',
+        borderWidth: 1
+      }
+    })
+
+    pictorialBar.push({
+      silent: true,
+      type: 'pictorialBar',
+      xAxisIndex: index,
+      yAxisIndex: index,
+      data: [dt],
+      symbol: 'circle',
+      symbolSize: [10, 10],
+      symbolPosition: 'end',
+      symbolOffset: ['50%', '-25%'],
+    })
+
+    return {
+      data: [dt],
+      type: 'bar',
+      barWidth: 6,
+      xAxisIndex: index,
+      yAxisIndex: index,
+    }
+  })
+
+  var option = {
+    title: title,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    grid: grid,
+    color: colors,
+    series: series.concat(barGaps).concat(pictorialBar)
+  }
+
+  // console.log(option)
+  return option
+}

src/pages/statis/components/Filter.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Row, Col, Radio, DatePicker } from 'antd';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/locale/zh_CN';
+
+const { RangePicker } = DatePicker;
+const radioOptions = [
+  { label: '本月', value: '1' },
+  // { label: '本季', value: '2' },
+  { label: '本年', value: '3' },
+];
+
+export const yearRange = [
+  moment().startOf('year'),
+  moment(),
+]
+export const quarterRange = [
+  moment().startOf('quarter'),
+  moment(),
+]
+export const monthRange = [
+  moment().startOf('quarter'),
+  moment(),
+]
+
+export default (props) => {
+  const [dateRange, setDateRange] = React.useState([]);
+  const [radioValue, setRadioValue] = React.useState();
+
+  const onChange = (val) => {
+    if (typeof props.onChange === 'function') {
+      props.onChange(getStrValue(val));
+    }
+  }
+
+  const onPickerChange = val => {
+    setDateRange(val);
+    setRadioValue();
+    onChange(getStrValue(val));
+  }
+
+  const onRadioChange = e => {
+    const val = e.target.value;
+    setRadioValue(val);
+    let dateRange = [];
+    switch (val) {
+      case '1':
+        dateRange = monthRange;
+        break;
+      case '2':
+        dateRange = quarterRange;
+        break;
+      case '3':
+        dateRange = yearRange;
+        break;
+      default:
+        break;
+    }
+    
+    setDateRange(dateRange);
+    onChange(getStrValue(dateRange));
+  }
+
+  return (
+    <Row style={{ width: '460px' }} gutter={8}>
+      <Col span={14}>
+        <RangePicker locale={locale} value={dateRange} onChange={onPickerChange} />
+      </Col>
+      <Col span={10}>
+        <Radio.Group
+          options={radioOptions}
+          value={radioValue}
+          onChange={onRadioChange}
+          optionType="button"
+          buttonStyle="solid"
+        />
+      </Col>
+    </Row>
+  )
+}
+
+export function getStrValue(range) {
+  return [
+    range[0].format('YYYY-MM-DD'),
+    range[1].format('YYYY-MM-DD'),
+  ];
+}

src/pages/statis/components/StatisCard.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Card } from 'antd';
+import './style.global.less';
+
+const Header = props => {
+  return (
+    <div className="statis-card-header">
+      <img src={props.icon} />
+      <span>{props.children}</span>
+    </div>
+  )
+}
+
+export default (props) => {
+  const { icon, title, extra } = props;
+
+  return (
+    <Card
+      className="statis-card"
+      title={<Header icon={icon}>{title}</Header>}
+      extra={extra}
+    >
+      {props.children}
+    </Card>
+  )
+}

src/pages/statis/components/StoreCost.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import icon from '@/assets/images/statistic/社会保障机构分类统计.png';
+import Chart from '@/components/chart';
+import StatisCard from './StatisCard';
+import Filter from './Filter';
+
+export default (props) => {
+
+  const [year, setYear] = React.useState();
+  const option = getOption(["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], [0, 0, 0, 0, 0, 0, 8, 9, 10, 1, 1, 6])
+
+  return (
+    <StatisCard
+      title="成本分析"
+      icon={icon}
+      extra={<Filter />}
+    >
+      <Chart option={option} style={{ height: '300px' }} />
+    </StatisCard>
+  )
+}
+
+function getOption(xAxisData, seriesData) {
+  var axisLabel = {
+    fontSize: 14,
+    color: 'rgba(255,255,255, .6)'
+  };
+  var lineStyle = {
+    color: 'rgba(255,255,255, .16)',
+    type: 'dashed'
+  };
+
+  return {
+    xAxis: {
+      type: 'category',
+      axisLabel: Object.assign({
+        rotate: 45
+      }, axisLabel),
+      axisLine: {
+        show: true,
+        lineStyle: lineStyle
+      },
+      data: xAxisData
+    },
+    yAxis: {
+      axisLabel: axisLabel,
+      axisLine: {
+        show: true,
+        lineStyle: lineStyle
+      },
+      splitLine: {
+        lineStyle: lineStyle
+      },
+      type: 'value'
+    },
+    tooltip : {
+      trigger: 'axis',
+      axisPointer : {
+        type : 'shadow'
+      }
+    },
+    grid: {
+      top: 20,
+      left: 50,
+      right: 20,
+      bottom: 70,
+    },
+    color: ['#9242D1'],
+    animationEasing: 'elasticOut',
+    series: [
+      {
+        data: seriesData,
+        type: 'pictorialBar',
+        barWidth: 16,
+        symbol: 'rect',
+        symbolRepeat: true,
+        animationDuration: 6000,
+        animationDelay: function (dataIndex, params) {
+          return params.index * 30;
+        }
+      }
+    ]
+  }
+}

src/pages/statis/components/Sumary.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import classNames from 'classnames';
+import icon1 from '@/assets/images/statistic/数字统计.png';
+import icon2 from '@/assets/images/statistic/接待军人总数.png';
+import icon3 from '@/assets/images/statistic/保障机构数.png';
+import icon4 from '@/assets/images/statistic/设备数量.png';
+import Styles from './style.module.less';
+
+const DataCard = (props) => {
+  const { className, icon } = props;
+
+  const cls = classNames(Styles['data-card'], className);
+
+  return (
+    <dl className={cls}>
+      <dt>0</dt>
+      <dd>任务总数</dd>
+      <img src={icon} alt="" />
+    </dl>
+  )
+}
+
+export default (props) => {
+  return (
+    <Row gutter={props.gutter} justify="space-between">
+      <Col span={6}>
+        <DataCard icon={icon1} className={Styles['bk1']} />
+      </Col>
+      <Col span={6}>
+        <DataCard icon={icon2} className={Styles['bk2']} />
+      </Col>
+      <Col span={6}>
+        <DataCard icon={icon3} className={Styles['bk3']} />
+      </Col>
+      <Col span={6}>
+        <DataCard icon={icon4} className={Styles['bk4']} />
+      </Col>
+    </Row>
+  )
+}

src/pages/statis/components/Task.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import * as echarts from 'echarts/core';
+import icon from '@/assets/images/statistic/任务统计.png';
+import Chart from '@/components/chart';
+import StatisCard from './StatisCard';
+import Filter from './Filter';
+
+export default (props) => {
+
+  const option = getOption(["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], [0, 0, 0, 0, 0, 0, 8, 9, 10, 1, 1, 6])
+
+  return (
+    <StatisCard
+      title="任务统计"
+      icon={icon}
+      extra={<Filter />}
+    >
+      <Chart option={option} style={{ height: '300px' }} />
+    </StatisCard>
+  )
+}
+
+function getOption(xAxisData, seriesData) {
+  var axisLabel = {
+    fontSize: 14,
+    color: 'rgba(255,255,255, .6)',
+  };
+  var lineStyle = {
+    color: 'rgba(255,255,255, .16)',
+    type: 'dashed'
+  };
+
+  return {
+    tooltip : {
+      trigger: 'axis',
+      axisPointer : {
+        type : 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel: axisLabel,
+      axisLine: {
+        show: true,
+        lineStyle: lineStyle
+      },
+      data: xAxisData
+    },
+    yAxis: {
+      axisLabel: axisLabel,
+      axisLine: {
+        show: true,
+        lineStyle: lineStyle
+      },
+      splitLine: {
+        lineStyle: lineStyle
+      },
+      type: 'value'
+    },
+    grid: {
+      top: 20,
+      left: 50,
+      right: 20,
+      bottom: 50,
+    },
+    series: [
+      {
+        data: seriesData,
+        type: 'bar',
+        barWidth: 16,
+        itemStyle: {
+          borderRadius: [16, 16, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#1EAED1' },
+            { offset: 1, color: '#6F39B9' }
+          ])
+        }
+      }
+    ]
+  }
+}

src/pages/statis/components/User.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import icon from '@/assets/images/statistic/人员统计.png';
+import StatisCard from './StatisCard';
+import Edu from './Edu';
+import Age from './Age';
+
+
+export default (props) => {
+  return (
+    <StatisCard
+      title="人员统计"
+      icon={icon}
+    >
+      <Row>
+        <Col span={12}>
+          <Edu />
+        </Col>
+        <Col span={12}>
+          <Age />
+        </Col>
+      </Row>
+    </StatisCard>
+  )
+}

src/pages/statis/components/style.global.less

@@ -0,0 +1,101 @@
+@chart-card-bg: #071C51;
+@chart-card-radius: 20px;
+
+.statis-card {
+	position: relative;
+	border-radius: @chart-card-radius;
+  background: transparent;
+  box-shadow: none;
+  border-color: transparent;
+  z-index: 0;
+
+  .ant-card-head {
+    border-bottom: none;
+  }
+
+  .ant-picker, .ant-radio-button-wrapper, .ant-picker-separator {
+    background: transparent !important;
+    color: #bbb !important;
+  }
+
+  .ant-radio-button-wrapper-checked {
+    background: #1890ff !important;
+    color: #fff !important;
+  }
+
+  .ant-picker-input {
+    & > input {
+      color: #bbb !important;
+    }
+  }
+
+  .ant-select-selector {
+    background: transparent !important;
+    border: none !important;
+    color: #bbb;
+    font-size: 1.4em;
+  }
+
+  .ant-select-arrow {
+    color: #bbb;
+  }
+  
+  &, &::before, &::after {
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  @keyframes chart-card-rotate {
+    100% {
+      transform: rotate(1turn);
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -2;
+    left: -450%;
+    top: -450%;
+    width: 1000%;
+    height: 1000%;
+    background-color: #1E5983;
+    background-repeat: no-repeat;
+    background-position: 0 0, 100% 100%;
+    background-image: conic-gradient(from 0, transparent, rgba(168, 239, 255, 1), transparent 20%),
+    conic-gradient(from 180deg,transparent, rgba(168, 239, 255, 1), transparent 20%);
+    animation: chart-card-rotate 10s linear infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    left: 2px;
+    top: 2px;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    background: @chart-card-bg;
+    border-radius: @chart-card-radius - 2px;
+    box-shadow: 2px 2px 10px rgba(255,255,255, .2) inset, -2px -2px 10px rgba(255,255,255, .2) inset;
+  }
+
+  .statis-card-header {
+    img {
+      width: 28px;
+      height: 28px;
+      vertical-align: middle;
+      display: inline-block;
+      margin-right: .5em;
+    }
+    span {
+      font-size: 22px;
+      font-weight: 500;
+      color: transparent;
+      background-image: linear-gradient(0deg, #6F39B9 0%, #1EAED1 100%);
+      vertical-align: middle;
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+  }
+}

src/pages/statis/components/style.module.less

@@ -0,0 +1,75 @@
+@chart-card-bg: #071C51;
+@chart-card-radius: 20px;
+
+.data-card {
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 3px;
+  box-sizing: border-box;
+  padding: 24px 0px 36px;
+  padding-left: 150px;
+  // box-sizing: border-box;
+  // padding-left: 150px;
+
+  dt {
+    font-size: 36px;
+  }
+
+  dd {
+    font-size: 16px;
+  }
+
+  dt, dd {
+    padding: 0;
+    font-weight: 400;
+    color: rgb(255, 255, 255);
+    line-height: 1.53846;
+  }
+
+  img {
+    position: absolute;
+    display: block;
+    top: 24px;
+    left: 30px;
+    width: 88px;
+    height: 88px;
+  }
+
+  &::before,&::after {
+    content: "";
+    position: absolute;
+    background: #FFFFFF;
+    opacity: 0.1;
+    border-radius: 50%;
+    font-size: 0;
+  }
+
+  &::before {
+    width: 166px;
+    height: 140px;
+    left: calc(100% - 88px);
+    top: -40px;
+  }
+  
+  &::after {
+    width: 281px;
+    height: 177px;
+    border-radius: 50%;
+    left: calc(100% - 160px);
+    top: 81px;
+  }
+
+  &.bk1 {
+    background: linear-gradient(90deg, #3886D6, #003789);
+  }
+  &.bk2 {
+    background: linear-gradient(90deg, #29A0B1, #3C1A63);
+  }
+  &.bk3 {
+    background: linear-gradient(90deg, #1570AB, #343894);
+  }
+  &.bk4 {
+    background: linear-gradient(90deg, #2788B6, #083A8C);
+  }
+}

src/pages/statis/style.module.less

@@ -0,0 +1,74 @@
+
+@chart-card-bg: #071C51;
+@chart-card-radius: 20px;
+
+
+.chart-page {
+  width: 100%;
+  height: calc(100vh - var(--header-height));
+  overflow-y: auto;
+  background: @chart-card-bg;
+  box-sizing: border-box;
+  padding: 24px;
+
+  .count {
+    border-radius: 20px;
+    
+    dl {
+      overflow: hidden;
+      position: relative;
+      box-sizing: border-box;
+      padding-left: 150px;
+
+      dt, dd {
+        padding: 0;
+      }
+
+      img {
+        position: absolute;
+        display: block;
+        top: 24px;
+        left: 30px;
+        width: 88px;
+        height: 88px;
+      }
+
+      &::before,&::after {
+        content: "";
+        position: absolute;
+        background: #FFFFFF;
+        opacity: 0.1;
+        border-radius: 50%;
+        font-size: 0;
+      }
+
+      &::before {
+        width: 166px;
+        height: 140px;
+        left: calc(100% - 88px);
+        top: -40px;
+      }
+      
+      &::after {
+        width: 281px;
+        height: 177px;
+        border-radius: 50%;
+        left: calc(100% - 160px);
+        top: 81px;
+      }
+
+      &:nth-child(1) {
+        background: linear-gradient(90deg, #3886D6, #003789);
+      }
+      &:nth-child(2) {
+        background: linear-gradient(90deg, #29A0B1, #3C1A63);
+      }
+      &:nth-child(3) {
+        background: linear-gradient(90deg, #1570AB, #343894);
+      }
+      &:nth-child(4) {
+        background: linear-gradient(90deg, #2788B6, #083A8C);
+      }
+    }
+  }
+}

src/pages/stock/list/index.jsx

@@ -1,29 +1,21 @@
 import { deleteStore, getStoreList, getStoreTypeList, storeExport } from '@/services/stock';
 import { queryDict, queryTable } from '@/utils/request';
 import { PageContainer, ProTable } from '@ant-design/pro-components';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Button, message, Modal, Popconfirm } from 'antd';
 import { useRef, useState } from 'react';
 import OutAndIn from '../outAndIn';
+import './style.less';
 
 const StockList = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [modalData, setModalData] = useState({});
-  // const [storeTypeDict, setStoreTypeDict] = useState([]);
   const actionRef = useRef();
   const formRef = useRef();
   const navigate = useNavigate();
-  
-  // useEffect(() => {
-  //   getStoreTypeList({ pageSize: 9999, pageNum: 1 }).then((res) => {
-  //     setStoreTypeDict(
-  //       res?.records?.map((x) => ({
-  //         label: x.name,
-  //         value: x.id,
-  //       })) || [],
-  //     );
-  //   });
-  // }, []);
+  const [searchParams] = useSearchParams();
+
+  const id = searchParams.get('id');
 
   const handleDelete = (id) => {
     if (id) {
@@ -44,14 +36,10 @@ const StockList = (props) => {
   };
 
   const columns = [
-    // {
-    //   title: 'id',
-    //   dataIndex: 'id',
-    //   search: false,
-    // },
     {
       title: '名称',
       dataIndex: 'name',
+      render: (t, row) => row.warnAmount >= row.amount ? `${t} (库存不足)` : t
     },
     {
       title: '单位',
@@ -70,7 +58,6 @@ const StockList = (props) => {
       dataIndex: 'amount',
       search: false,
     },
-
     {
       title: '操作',
       valueType: 'option',
@@ -120,7 +107,9 @@ const StockList = (props) => {
       <ProTable
         actionRef={actionRef}
         formRef={formRef}
+        params={{ id }}
         rowKey="id"
+        rowClassName={(row) => row.warnAmount >= row.amount ? 'store-danger' : ''}
         toolBarRender={() => [
           <Button
             key="2"

src/pages/stock/list/style.less

@@ -0,0 +1,4 @@
+
+.store-danger {
+  color: #ff4d4f;
+}

src/pages/stockClassification/edit/index.jsx

@@ -65,7 +65,7 @@ export default (props) => {
         >
           <ProFormText
             name="name"
-            label="名称"
+            label="分类名称"
             placeholder="请输入名称"
             width={460}
             allowClear={false}
@@ -73,7 +73,7 @@ export default (props) => {
           />
           <ProFormSelect
             name="isFood"
-            label="食材"
+            label="是否食材"
             options={[
               { label: '是', value: 1 },
               { label: '否', value: 0 },
@@ -83,6 +83,18 @@ export default (props) => {
             allowClear={false}
             rules={[{ required: true, message: '请选择是否食材' }]}
           />
+          <ProFormSelect
+            name="isDevice"
+            label="是否设备"
+            options={[
+              { label: '是', value: 1 },
+              { label: '否', value: 0 },
+            ]}
+            placeholder="请选择"
+            width={460}
+            allowClear={false}
+            rules={[{ required: true, message: '请选择是否设备' }]}
+          />
         </ProForm>
       </Card>
     </PageContainer>

src/routes/routes.jsx

@@ -44,6 +44,8 @@ import EmergencyPlanEdit from "@/pages/cms/emergencyPlan/edit";
 import EmergencyPlanDetail from "@/pages/cms/emergencyPlan/detail";
 import FilesList from "@/pages/cms/files/list";
 import MessageList from '@/pages/message';
+import MessageDetail from '@/pages/message/detail';
+import StatisCharts from '@/pages/statis/charts';
 
 /**
  * meta 用来扩展自定义数据数据
@@ -51,157 +53,166 @@ import MessageList from '@/pages/message';
  *    title: 用于页面或者菜单的标题, 没有此字段, 菜单不会显示
  *    hideInMenu: 布尔值, 如果为 false, 菜单不会显示
  *    noLayout: 布尔值, 如果为 true, 将不会使用默认布局
+ *    noSiderBar: 布尔值, 如果为 true, 将没有左侧菜单栏
+ *    noFooter: 布尔值, 如果为 true, 将没有底部 footer 
  *    target: 字符串, 如果为 _blank, 将在新窗口打开
  * }
  */
 
 export const authRoutes = [
   {
-    path: 'task',
+    path: "task",
     element: <Container />,
     meta: {
-      title: '军供任务',
+      title: "军供任务",
       icon: <AppstoreOutlined />,
     },
     children: [
       {
         index: true,
-        element: <Navigate to='guaranteeTask' replace />,
+        element: <Navigate to="guaranteeTask" replace />,
       },
       {
-        path: 'guaranteeTask',
+        path: "guaranteeTask",
         element: <GuaranteeTaskList />,
         meta: {
-          title: '军供通报',
+          title: "军供通报",
         },
       },
       {
-        path: 'guaranteeTask/edit',
+        path: "guaranteeTask/edit",
         element: <GuaranteeTaskEdit />,
         meta: {
-          title: '任务配置',
+          title: "任务配置",
         },
       },
       {
-        path: 'guaranteeTask/print',
+        path: "guaranteeTask/print",
         element: <GuaranteeTaskPrint />,
         meta: {
           hideInMenu: true,
           noLayout: true,
-          target: '_blank',
-          title: '任务执行',
+          target: "_blank",
+          title: "任务执行",
         },
-      }
-    ]
+      },
+      {
+        path: "guaranteeTask/print",
+        element: <GuaranteeTaskPrint />,
+        meta: {
+          title: "任务评价",
+        },
+      },
+    ],
   },
   {
-    path: 'material',
+    path: "material",
     element: <Container />,
     meta: {
-      title: '物资管理',
+      title: "物资管理",
       icon: <AppstoreOutlined />,
     },
     children: [
       {
         index: true,
-        element: <Navigate to='dish/list' replace />,
+        element: <Navigate to="dish/list" replace />,
       },
       {
-        path: 'dish/list',
+        path: "dish/list",
         element: <DishList />,
         meta: {
-          title: '菜肴管理',
+          title: "菜肴管理",
         },
       },
       {
-        path: 'dish/edit',
+        path: "dish/edit",
         element: <DishEdit />,
         meta: {
           hideInMenu: true,
-          title: '菜肴维护',
+          title: "菜肴维护",
         },
       },
       {
-        path: 'package/list',
+        path: "package/list",
         element: <PackageList />,
         meta: {
-          title: '套餐管理',
+          title: "套餐管理",
         },
       },
-    ]
+    ],
   },
   {
-    path: 'stock',
+    path: "stock",
     element: <Container />,
     meta: {
-      title: '库存管理',
+      title: "库存管理",
       icon: <AppstoreOutlined />,
     },
     children: [
       {
         index: true,
-        element: <Navigate to='list' replace />,
+        element: <Navigate to="list" replace />,
       },
       {
-        path: 'list',
+        path: "list",
         element: <StockList />,
         meta: {
-          title: '库存列表',
+          title: "库存列表",
         },
       },
       {
-        path: 'add',
+        path: "add",
         element: <StockEdit />,
         meta: {
-          title: '库存维护',
+          title: "库存维护",
         },
       },
     ],
   },
   {
-    path: 'cms',
+    path: "cms",
     element: <Container />,
     meta: {
-      title: '公告文件',
+      title: "公告文件",
     },
     children: [
       {
         index: true,
-        element: <Navigate to='rotationChart/list' replace />,
+        element: <Navigate to="rotationChart/list" replace />,
       },
       {
-        path: 'station',
+        path: "station",
         element: null,
         meta: {
-          title: '本站信息',
+          title: "本站信息",
         },
       },
       {
-        path: 'rotationChart/list',
+        path: "rotationChart/list",
         element: <RotationChartList />,
         meta: {
-          title: '公告内容',
+          title: "公告内容",
         },
       },
       {
-        path: 'rotationChart/add',
+        path: "rotationChart/add",
         element: <RotationChartEdit />,
         meta: {
-          title: '公告维护',
+          title: "公告维护",
         },
       },
       {
-        path: 'rotationChart/introduction',
+        path: "rotationChart/introduction",
         element: <RotationChartIntroduction />,
         meta: {
-          title: '本站信息简介',
+          title: "本站信息简介",
         },
       },
       {
         path: 'regulation',
         element: <RegulationList />,
         meta: {
-          title: '规章制度',
+          title: "规章制度",
         },
       },
       {
@@ -243,78 +254,87 @@ export const authRoutes = [
           title: "文件管理",
         },
       },
-
     ],
   },
   {
     path: 'static',
-    element: <Container />,
+    element: <StatisCharts />,
     meta: {
       title: '数据分析',
+      noSiderBar: true,
+      noFooter: true,
     },
   },
   {
-    path: 'system',
+    path: "system",
     element: <Container />,
     meta: {
-      title: '系统管理',
+      title: "系统管理",
     },
     children: [
       {
         index: true,
-        element: <Navigate to='stockClassification/list' replace />,
+        element: <Navigate to="stockClassification/list" replace />,
       },
       {
-        path: 'stockClassification/list',
+        path: "stockClassification/list",
         element: <StockClassificationList />,
         meta: {
-          title: '库存分类管理',
+          title: "库存分类",
         },
       },
       {
-        path: 'stockClassification/edit',
+        path: "stockClassification/edit",
         element: <StockClassificationEdit />,
         meta: {
-          title: '库存分类维护',
+          title: "库存分类维护",
           hideInMenu: true,
         },
       },
       {
-        path: 'log',
+        path: "log",
         element: <StockLog />,
         meta: {
-          title: '库存操作日志',
+          title: "操作日志",
         },
       },
       {
-        path: 'roles',
+        path: "roles",
         element: <Roles />,
         meta: {
-          title: '系统角色管理',
+          title: "角色管理",
         },
       },
       {
-        path: 'user',
+        path: "user",
         element: <UserList />,
         meta: {
-          title: '系统用户管理',
+          title: "用户管理",
         },
       },
       {
-        path: 'user/edit',
+        path: "user/edit",
         element: <UserEdit />,
         meta: {
           hideInMenu: true,
-          title: '系统用户编辑',
+          title: "系统用户编辑",
         },
       },
       {
-        path: 'message',
+        path: "message",
         element: <MessageList />,
         meta: {
-          title: '消息列表',
+          title: "消息列表",
         },
-      }
+      },
+      {
+        path: "message/detail",
+        element: <MessageDetail />,
+        meta: {
+          title: "消息详情",
+          hideInMenu: true,
+        },
+      },
     ],
   },
   {
@@ -375,11 +395,11 @@ export const authRoutes = [
       },
     ],
   },
-]
+];
 
 export const defaultRoutes = [
   {
-    path: '/',
+    path: "/",
     element: <AuthLayout />,
     children: [
       {
@@ -387,27 +407,27 @@ export const defaultRoutes = [
         element: <Home />,
       },
       {
-        path: 'home',
+        path: "home",
         element: <Home />,
         meta: {
-          title: '首页',
+          title: "首页",
           icon: <DesktopOutlined />,
         },
       },
       {
-        path: '*',
-        element: <Page404 />
-      }
+        path: "*",
+        element: <Page404 />,
+      },
     ],
   },
   {
-    path: '/login',
+    path: "/login",
     element: <Login />,
   },
   {
-    path: '*',
-    element: <Page404 />
-  }
+    path: "*",
+    element: <Page404 />,
+  },
 ];
 
 export function mergeAuthRoutes (r1, r2) {
@@ -419,22 +439,22 @@ export function mergeAuthRoutes (r1, r2) {
 
 // 全部路由
 export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
-
-function getPath (parent = '/', current = '') {
-  if (current.indexOf('/') === 0 || current.indexOf('http') === 0) return current;
-  return `${parent}/${current}`.replace(/\/\//g, '/');
+function getPath (parent = "/", current = "") {
+  if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
+    return current;
+  return `${parent}/${current}`.replace(/\/\//g, "/");
 }
 
 // 路由数组, 一维数组
 export const routeArr = (() => {
-  const flatten = (routes, parentPath = '/') => {
+  const flatten = (routes, parentPath = "/") => {
     return routes.reduce((acc, route) => {
       const path = getPath(parentPath, route.path);
       const children = route.children ? flatten(route.children, path) : [];
 
       return acc.concat([{ ...route, path }].concat(children));
     }, []);
-  }
+  };
 
   return flatten(routes);
 })();

src/services/dish.js

@@ -5,7 +5,7 @@ import request from '@/utils/request';
  * @param {*} params
  * @returns
  */
-export const getDishList = (params) => request('/dishes', { params });
+export const getDishList = (params) => request('/dishes', { params,successTip:false });
 
 /**
  * 查询食材列表

src/services/guaranteeTask.js

@@ -50,7 +50,7 @@ import request from '@/utils/request';
  * @param {*} params
  * @returns
  */
-export const getGuaranteeTaskList = (params) => request('/guaranteeTask', { params });
+export const getGuaranteeTaskList = (params) => request('/guaranteeTask', { params,successTip:false });
 
 /**
  * 删除

src/services/message.js

@@ -1,9 +1,13 @@
-import { restful } from '@/utils/request';
+import request, { restful } from '@/utils/request';
 
 const [
   getMessageList,
+  getMessage,
 ] = restful("/noticeMessage");
 
 export {
   getMessageList,
+  getMessage,
 }
+
+export const setMessageReaded = id => request.put(`/noticeMessage/${id}/readed`)

src/services/package.js

@@ -5,7 +5,7 @@ import request from '@/utils/request';
  * @param {*} params
  * @returns
  */
-export const getPackageList = (params) => request('/package', { params });
+export const getPackageList = (params) => request('/package', { params,successTip:false });
 
 
 /**

src/services/posts.js

@@ -7,4 +7,24 @@ import { restful } from "@/utils/request";
 const [getPostsList, getPostsDetail, savePosts, updatePosts, deletePosts] =
   restful("/posts");
 
-export { getPostsList, getPostsDetail, savePosts, updatePosts, deletePosts };
+const [
+  getPostsFilesList,
+  getPostsFilesDetail,
+  savePostsFiles,
+  updatePostsFiles,
+  deletePostsFiles,
+] = restful("/postsFiles");
+
+export {
+  getPostsList,
+  getPostsDetail,
+  savePosts,
+  updatePosts,
+  deletePosts,
+  
+  getPostsFilesList,
+  getPostsFilesDetail,
+  savePostsFiles,
+  updatePostsFiles,
+  deletePostsFiles,
+};

vite.config.js

@@ -9,7 +9,7 @@ export default defineConfig({
     proxy: {
       '/api/': {
         // 要代理的地址
-        target: 'http://192.168.89.147:8087',
+        target: 'http://jgz.njyunzhi.com',
         // 配置了这个可以从 http 代理到 https
         // 依赖 origin 的功能可能需要这个，比如 cookie
         changeOrigin: true,