feats

src/pages/statis/charts.jsx

 import Sumary from './components/Sumary';
 import Task from './components/Task';
 import DeviceType from './components/DeviceType';
-import StoreCost from './components/StoreCost';
+import StoreType from './components/StoreType';
 import User from './components/User';
+import StoreCost from './components/StoreCost';
 import Styles from './style.module.less';
 
 const mtp = {
       </Row>
       <Row gutter={gutter} style={mtp}>
         <Col span={12}>
-          <StoreCost />
+          <StoreType />
         </Col>
         <Col span={12}>
           <User />
       </Row>
       <Row gutter={gutter} style={mtp}>
         <Col span={24}>
-          <Task />
+          <StoreCost />
         </Col>
       </Row>
     </div>

src/pages/statis/components/Age.jsx

 import React from 'react';
 import * as echarts from 'echarts/core';
 import Chart from '@/components/chart';
+import { getUserAge } from '@/services/statis';
 
 let dataIndex = 0;
 export default (props) => {
 
   const chartRef = React.useRef();
-  const option = getOption({"20(含)至29岁": 10, "20(含)至39岁": 20, "40(含)至49岁": 30, "50(含)岁以上": 40});
+  const [option, setOption] = React.useState({});
 
   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);
+    getUserAge().then(res => {
+      // [{ age: 'xxx', cnt: 12 }] => { 'xxx': 12 }
+      const dataSource = (res || []).reduce((acc, x) => ({ ...acc, [x.age]: x.cnt }), {});
+      setOption(getOption(dataSource));
+
+      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;

src/pages/statis/components/DeviceType.jsx

 import * as echarts from 'echarts/core';
 import icon from '@/assets/images/statistic/设备分类统计.png';
 import Chart from '@/components/chart';
+import { getDeviceType } from '@/services/statis';
 import StatisCard from './StatisCard';
 
 let dataIndex = 0;
 export default (props) => {
 
   const chartRef = React.useRef();
-  const option = getOption({ "制餐设备": 20, "运输设备": 33, "野外保障设备": 10 });
+  const [option, setOption] = React.useState({});
 
   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);
+    getDeviceType().then(res => {
+      // 转换 [{ name: 'aaa', cnt: 10 }] 为 { 'aa': 10 }
+      const dataSource = (res || []).reduce((acc, x) => ({ ...acc, [x.name]: x.cnt }), {})
+      setOption(getOption(dataSource));
+
+      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;

src/pages/statis/components/Edu.jsx

 import React from 'react';
 import * as echarts from 'echarts/core';
 import Chart from '@/components/chart';
+import { getUserEdu } from '@/services/statis';
 
 export default (props) => {
 
-  const option = getOption(["本科以上", "本科及大专", "大专以下"], [10, 20, 30]);
+  const [option, setOption] = React.useState({});
+
+  React.useEffect(() => {
+    getUserEdu().then(res => {
+      const keys = (res || []).map(x => x.name);
+      const vals = (res || []).map(x => x.cnt);
+      setOption(getOption(keys, vals));
+    });
+  }, [])
 
   return (
     <Chart option={option} style={{ height: '300px' }} />

src/pages/statis/components/Filter.jsx

 import locale from 'antd/es/date-picker/locale/zh_CN';
 
 const { RangePicker } = DatePicker;
-const radioOptions = [
+const radioDateOptions = [
   { label: '本月', value: '1' },
   // { label: '本季', value: '2' },
   { label: '本年', value: '3' },
 ];
+const radioUnitOptions = [
+  { label: '按天', value: '1' },
+  { label: '按月', value: '2' },
+];
 
-export const last30Days = [
-  moment().subtract(30, 'days'),
+export const lastDays = [
+  moment().subtract(15, 'days'),
   moment(),
 ];
 
 ]
 
 export default (props) => {
-  const [dateRange, setDateRange] = React.useState([]);
+  const [dateRange, setDateRange] = React.useState(lastDays);
   const [radioValue, setRadioValue] = React.useState();
-
-  const onChange = (val) => {
-    console.log(val);
-    if (typeof props.onChange === 'function') {
-      props.onChange(getStrValue(val));
-    }
-  }
+  const [unitValue, setUnitValue] = React.useState('1');
 
   const onPickerChange = val => {
     setDateRange(val);
     setRadioValue();
-    onChange(val);
   }
 
   const onRadioChange = e => {
         break;
       case '3':
         dateRange = yearRange;
+        setUnitValue('2');
         break;
       default:
         break;
     }
     
     setDateRange(dateRange);
-    onChange(dateRange);
   }
 
+  const onUnitChange = e => {
+    const val = e.target.value;
+    setUnitValue(val);
+  }
+
+  React.useEffect(() => {
+    if (typeof props.onChange === 'function') {
+      const dt = getStrValue(dateRange);
+      props.onChange({
+        startDate: dt[0],
+        endDate: dt[1],
+        unit: unitValue,
+      });
+    }
+  }, [dateRange, unitValue, props.onChange]);
+
   return (
-    <Row style={{ width: '460px' }} gutter={8}>
-      <Col span={14}>
-        <RangePicker locale={locale} value={dateRange} onChange={onPickerChange} />
+    <Row style={{ width: '500px' }} gutter={8}>
+      <Col span={7}>
+        {
+          !props.hideUnit && (
+            <Radio.Group
+              options={radioUnitOptions}
+              value={unitValue}
+              onChange={onUnitChange}
+            />
+          )
+        }
       </Col>
       <Col span={10}>
+        <RangePicker locale={locale} value={dateRange} onChange={onPickerChange} />
+      </Col>
+      <Col span={7}>
         <Radio.Group
-          options={radioOptions}
+          options={radioDateOptions}
           value={radioValue}
           onChange={onRadioChange}
           optionType="button"

src/pages/statis/components/StoreCost.jsx

 import React from 'react';
-import icon from '@/assets/images/statistic/社会保障机构分类统计.png';
+import * as echarts from 'echarts/core';
+import icon from '@/assets/images/statistic/任务统计.png';
 import Chart from '@/components/chart';
+import { getStoreCosts } from '@/services/statis';
 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])
+  const [filter, setFilter] = React.useState();
+  const [option, setOption] = 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])
+
+  React.useEffect(() => {
+    if (filter) {
+      getStoreCosts(filter).then(res => {
+        const { purchase, taskCosts } = res;
+
+        const keys = (purchase || []).map(x => x.dt);
+        const data1 = (purchase || []).map(x => x.price / 100); // 数据返回的单位是 分
+        const data2 = (taskCosts || []).map(x => x.price / 100);
+  
+        const opt = getOption(keys, data1, data2);
+        const dataZoom = keys.length > 31 ? { show: true, height: 20, bottom: 6 } : { show: false };
+  
+        setOption({ ...opt, dataZoom });
+      });
+    }
+  }, [filter]);
 
   return (
     <StatisCard
       title="成本分析"
       icon={icon}
-      extra={<Filter />}
+      extra={<Filter onChange={setFilter} />}
     >
       <Chart option={option} style={{ height: '300px' }} />
     </StatisCard>
   )
 }
 
-function getOption(xAxisData, seriesData) {
+function getOption(xAxisData, data1, data2) {
   var axisLabel = {
     fontSize: 14,
-    color: 'rgba(255,255,255, .6)'
+    color: 'rgba(255,255,255, .6)',
   };
   var lineStyle = {
     color: 'rgba(255,255,255, .16)',
   };
 
   return {
+    tooltip : {
+      trigger: 'axis',
+      axisPointer : {
+        type : 'shadow'
+      },
+      valueFormatter: v => `￥ ${v}`
+    },
     xAxis: {
       type: 'category',
-      axisLabel: Object.assign({
-        rotate: 45
-      }, axisLabel),
+      axisLabel: { ...axisLabel, rotate: 45 },
       axisLine: {
         show: true,
         lineStyle: lineStyle
       },
       data: xAxisData
     },
-    yAxis: {
-      axisLabel: axisLabel,
-      axisLine: {
-        show: true,
-        lineStyle: lineStyle
-      },
-      splitLine: {
-        lineStyle: lineStyle
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: axisLabel,
+        axisLine: {
+          show: true,
+          lineStyle: lineStyle
+        },
+        splitLine: {
+          lineStyle: lineStyle
+        },
       },
-      type: 'value'
-    },
-    tooltip : {
-      trigger: 'axis',
-      axisPointer : {
-        type : 'shadow'
-      }
-    },
+    ],
+    // dataZoom: [
+    //   {
+    //     show: true,
+    //   }
+    // ],
     grid: {
       top: 20,
       left: 50,
       right: 20,
-      bottom: 70,
+      bottom: 100,
     },
-    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;
+        name: '用料成本',
+        data: data1,
+        type: 'line',
+        smooth: true,
+        itemStyle: {
+          color: '#1EAED1'
+        }
+      },
+      {
+        name: '采购成本',
+        data: data2,
+        type: 'line',
+        smooth: true,
+        itemStyle: {
+          color: '#6F39B9'
         }
       }
     ]

src/pages/statis/components/StoreType.jsx

+import React from 'react';
+import icon from '@/assets/images/statistic/社会保障机构分类统计.png';
+import Chart from '@/components/chart';
+import { getStoreType } from '@/services/statis';
+import StatisCard from './StatisCard';
+import Filter from './Filter';
+
+export default (props) => {
+
+  const [filter, setFilter] = React.useState();
+  const [option, setOption] = React.useState({});
+
+  React.useEffect(() => {
+    if (filter) {
+      getStoreType(filter).then(res => {
+        const keys = (res || []).map(x => x.name);
+        const vals = (res || []).map(x => x.cnt);
+        
+        const dataZoom = res.length > 31 ? { show: true, height: 20, bottom: 6 } : { show: false };
+        const opt = getOption(keys, vals);
+
+        setOption({ ...opt, dataZoom });
+      });
+    }
+  }, [filter]);
+
+  return (
+    <StatisCard
+      title="物资分析"
+      icon={icon}
+      extra={<Filter hideUnit onChange={setFilter} />}
+    >
+      <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/Task.jsx

 import Chart from '@/components/chart';
 import { getTaskInfo } from '@/services/statis';
 import StatisCard from './StatisCard';
-import Filter, { last30Days, getStrValue } from './Filter';
+import Filter from './Filter';
 
-const defaultValue = getStrValue(last30Days);
 export default (props) => {
 
-  const [dateRange, setDateRange] = React.useState(defaultValue);
+  const [filter, setFilter] = React.useState();
   const [option, setOption] = 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])
 
   React.useEffect(() => {
-    getTaskInfo({ startDate: dateRange[0], endDate: dateRange[1] }).then(res => {
-      const keys = res.map(x => x.dt);
-      const vals = res.map(x => x.cnt);
-
-      const opt = getOption(keys, vals);
-
-      setOption(res.length > 30 ? { ...opt, dataZoom: { height: 20, bottom: 6 } } : opt);
-    });
-  }, [dateRange]);
+    if (filter) {
+      getTaskInfo(filter).then((res = []) => {
+        const keys = res.map(x => x.dt);
+        const vals = res.map(x => x.cnt);
+  
+        const opt = getOption(keys, vals);
+        const dataZoom = res.length > 31 ? { show: true, height: 20, bottom: 6 } : { show: false };
+  
+        setOption({ ...opt, dataZoom });
+      });
+    }
+  }, [filter]);
 
   return (
     <StatisCard
       title="任务统计"
       icon={icon}
-      extra={<Filter onChange={setDateRange} />}
+      extra={<Filter onChange={setFilter} />}
     >
       <Chart option={option} style={{ height: '300px' }} />
     </StatisCard>

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

     border-bottom: none;
   }
 
-  .ant-picker, .ant-radio-button-wrapper, .ant-picker-separator {
+  .ant-picker, .ant-radio-wrapper, .ant-radio-button-wrapper, .ant-picker-separator {
     background: transparent !important;
     color: #bbb !important;
   }

src/pages/stock/edit/index.jsx

             allowClear={false}
             width={460}
           />
+          <ProFormText
+            initialValue={1}
+            name="warnAmount"
+            label="预警库存"
+            extra="库存低于此设置将会自动预警"
+            placeholder="请输入预警库存"
+            allowClear={false}
+            width={460}
+          />
           <ProFormText
             name="amount"
             label="库存"

src/pages/stockClassification/list/index.jsx

       title: '分类名称',
       dataIndex: 'name',
     },
-
     {
-      title: '排序',
+      title: '是否食材',
       dataIndex: 'isFood',
-      search: false,
       valueEnum: {
         1: '是',
         0: '否',
       },
     },
-
+    {
+      title: '是否设备',
+      dataIndex: 'isDevice',
+      valueEnum: {
+        1: '是',
+        0: '否',
+      },
+    },
     {
       title: '操作',
       valueType: 'option',

src/pages/user/Edit.jsx

             style={{ width: '100%' }}
             placeholder="请选择文化程度"
           >
-            <Option value="半文盲">半文盲</Option>
-            <Option value="文盲">文盲</Option>
-            <Option value="小学">小学</Option>
-            <Option value="初中">初中</Option>
-            <Option value="高中">高中</Option>
-            <Option value="中专">中专</Option>
-            <Option value="大专">大专</Option>
-            <Option value="本科">本科</Option>
-            <Option value="硕士">硕士</Option>
-            <Option value="博士">博士</Option>
-            <Option value="博士后">博士后</Option>
+            <Option value="90">文盲/半文盲</Option>
+            <Option value="80">小学</Option>
+            <Option value="70">初中</Option>
+            <Option value="60">高中</Option>
+            <Option value="40">中专</Option>
+            <Option value="30">大专</Option>
+            <Option value="20">本科</Option>
+            <Option value="10">硕士</Option>
+            <Option value="1">博士/博士后</Option>
           </Select>
         </Form.Item>
         <Form.Item

src/services/statis.js

 export const getSummary = () => request('/statis/summary', { successTip: false });
 
 export const getTaskInfo = (params) => request('/statis/taskInfo', { params, successTip: false });
+
+export const getDeviceType = () => request('/statis/deviceType', { successTip: false });
+
+export const getStoreType = (params) => request('/statis/deviceType', { params, successTip: false });
+
+export const getUserEdu = () => request('/statis/userEdu', { successTip: false });
+
+export const getUserAge = () => request('/statis/userAge', { successTip: false });
+
+export const getStoreCosts = (params) => request('/statis/store-cost', { params, successTip: false });