feats

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

@@ -17,7 +17,7 @@ export default (props) => {
   const { user, menus } = useModel('user');
   const location = useLocation();
   const { meta } = useRoute() || {};
-  const { noLayout = false, noSiderBar = false } = meta || {};
+  const { noLayout = false, noSiderBar = false, noFooter = false } = meta || {};
 
   const splitMenus = useMemo(() => menus.map(x => ({ ...x, children: undefined })), [menus]);
   const siderMenus = useMemo(() => {
@@ -37,7 +37,7 @@ export default (props) => {
                 <Header theme={theme} menus={splitMenus} location={location} />
                 <Layout>
                   { !noSiderBar && <SiderBar theme={theme} menus={siderMenus} location={location} /> }
-                  <Container location={location} />
+                  <Container location={location} noFooter={noFooter} />
                 </Layout>
               </Layout>
             )

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/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,7 @@ 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 用来扩展自定义数据数据
@@ -52,6 +53,7 @@ import MessageDetail from '@/pages/message/detail';
  *    hideInMenu: 布尔值, 如果为 false, 菜单不会显示
  *    noLayout: 布尔值, 如果为 true, 将不会使用默认布局
  *    noSiderBar: 布尔值, 如果为 true, 将没有左侧菜单栏
+ *    noFooter: 布尔值, 如果为 true, 将没有底部 footer 
  *    target: 字符串, 如果为 _blank, 将在新窗口打开
  * }
  */
@@ -241,9 +243,11 @@ export const authRoutes = [
   },
   {
     path: 'static',
-    element: <Container />,
+    element: <StatisCharts />,
     meta: {
       title: '数据分析',
+      noSiderBar: true,
+      noFooter: true,
     },
   },
   {