feats

src/pages/statis/components/Filter.jsx

@@ -11,6 +11,11 @@ const radioOptions = [
   { label: '本年', value: '3' },
 ];
 
+export const last30Days = [
+  moment().subtract(30, 'days'),
+  moment(),
+];
+
 export const yearRange = [
   moment().startOf('year'),
   moment(),
@@ -29,6 +34,7 @@ export default (props) => {
   const [radioValue, setRadioValue] = React.useState();
 
   const onChange = (val) => {
+    console.log(val);
     if (typeof props.onChange === 'function') {
       props.onChange(getStrValue(val));
     }
@@ -37,7 +43,7 @@ export default (props) => {
   const onPickerChange = val => {
     setDateRange(val);
     setRadioValue();
-    onChange(getStrValue(val));
+    onChange(val);
   }
 
   const onRadioChange = e => {
@@ -59,7 +65,7 @@ export default (props) => {
     }
     
     setDateRange(dateRange);
-    onChange(getStrValue(dateRange));
+    onChange(dateRange);
   }
 
   return (

src/pages/statis/components/Sumary.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Row, Col } from 'antd';
 import classNames from 'classnames';
+import { getSummary } from '@/services/statis';
 import icon1 from '@/assets/images/statistic/数字统计.png';
 import icon2 from '@/assets/images/statistic/接待军人总数.png';
 import icon3 from '@/assets/images/statistic/保障机构数.png';
@@ -8,33 +9,44 @@ import icon4 from '@/assets/images/statistic/设备数量.png';
 import Styles from './style.module.less';
 
 const DataCard = (props) => {
-  const { className, icon } = props;
+  const { className, icon, title, value = 0, size } = props;
 
   const cls = classNames(Styles['data-card'], className);
 
+  const valStyle = React.useMemo(() => {
+    return size ? { fontSize: size } : {}
+  }, [size]);
+
   return (
     <dl className={cls}>
-      <dt>0</dt>
-      <dd>任务总数</dd>
+      <dt style={valStyle}>{value}</dt>
+      <dd>{title}</dd>
       <img src={icon} alt="" />
     </dl>
   )
 }
 
 export default (props) => {
+  
+  const [data, setData] = React.useState({});
+
+  React.useEffect(() => {
+    getSummary().then(setData);
+  }, []);
+
   return (
     <Row gutter={props.gutter} justify="space-between">
       <Col span={6}>
-        <DataCard icon={icon1} className={Styles['bk1']} />
+        <DataCard title="任务总数" value={data.taskCount} icon={icon1} className={Styles['bk1']} />
       </Col>
       <Col span={6}>
-        <DataCard icon={icon2} className={Styles['bk2']} />
+        <DataCard title="接待军人总数" value={data.personNum} icon={icon2} className={Styles['bk2']} />
       </Col>
       <Col span={6}>
-        <DataCard icon={icon3} className={Styles['bk3']} />
+        <DataCard title="总体评价" value={data.evaValue} icon={icon3} className={Styles['bk3']} size="24px" />
       </Col>
       <Col span={6}>
-        <DataCard icon={icon4} className={Styles['bk4']} />
+        <DataCard title="设备数量" value={data.deviceNum} icon={icon4} className={Styles['bk4']} />
       </Col>
     </Row>
   )

src/pages/statis/components/Task.jsx

@@ -2,18 +2,33 @@ import React from 'react';
 import * as echarts from 'echarts/core';
 import icon from '@/assets/images/statistic/任务统计.png';
 import Chart from '@/components/chart';
+import { getTaskInfo } from '@/services/statis';
 import StatisCard from './StatisCard';
-import Filter from './Filter';
+import Filter, { last30Days, getStrValue } from './Filter';
 
+const defaultValue = getStrValue(last30Days);
 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])
+  const [dateRange, setDateRange] = React.useState(defaultValue);
+  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: {} } : opt);
+    });
+  }, [dateRange]);
 
   return (
     <StatisCard
       title="任务统计"
       icon={icon}
-      extra={<Filter />}
+      extra={<Filter onChange={setDateRange} />}
     >
       <Chart option={option} style={{ height: '300px' }} />
     </StatisCard>
@@ -39,7 +54,7 @@ function getOption(xAxisData, seriesData) {
     },
     xAxis: {
       type: 'category',
-      axisLabel: axisLabel,
+      axisLabel: { ...axisLabel, rotate: 45 },
       axisLine: {
         show: true,
         lineStyle: lineStyle
@@ -57,11 +72,16 @@ function getOption(xAxisData, seriesData) {
       },
       type: 'value'
     },
+    // dataZoom: [
+    //   {
+    //     show: true,
+    //   }
+    // ],
     grid: {
       top: 20,
       left: 50,
       right: 20,
-      bottom: 50,
+      bottom: 100,
     },
     series: [
       {

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

@@ -14,17 +14,18 @@
 
   dt {
     font-size: 36px;
+    line-height: 55px;
   }
 
   dd {
     font-size: 16px;
+    line-height: 1.53846;
   }
 
   dt, dd {
     padding: 0;
     font-weight: 400;
     color: rgb(255, 255, 255);
-    line-height: 1.53846;
   }
 
   img {

src/routes/routes.jsx

@@ -75,7 +75,7 @@ export const authRoutes = [
         path: "guaranteeTask",
         element: <GuaranteeTaskList />,
         meta: {
-          title: "军供通报",
+          title: "任务通报",
         },
       },
       {

src/services/statis.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request';
+
+export const getSummary = () => request('/statis/summary', { successTip: false });
+
+export const getTaskInfo = (params) => request('/statis/taskInfo', { params, successTip: false });