feats

src/pages/home/components/AssignedCharts.jsx

@@ -1,74 +1,113 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Card } from 'antd';
 import * as echarts from 'echarts/core';
+import RangeDate from './RangeDate';
+import * as dayjs from 'dayjs';
 import Chart from '@/components/chart';
+import { getStatIssue } from "@/service/stat";
 
-export default (props) => {
-  const option = {
-    title: {
-      text: '上报统计'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#0A9071'
-        }
-      }
-    },
-    grid: {
-      left: '3%',
-      bottom: '3%',
-      width: '90%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: ['12/01', '12/02', '12/03', '12/04', '12/05', '12/06', '12/07']
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        minInterval: 1
-      }
-    ],
-    series: [
-      {
-        type: 'line',
-        stack: 'Total',
-        smooth: true,
-        lineStyle: {
-          width: 0
-        },
-        showSymbol: false,
-        areaStyle: {
-          opacity: 1,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1.1, [
-            {
-              offset: 0,
-              color: '#0A9071'
-            },
-            {
-              offset: 1,
-              color: '#FFF'
+export default React.forwardRef((props, ref) => {
+  const [option, setOption] = useState({});
+
+  const [condition, setCondition] = useState();
+
+  React.useEffect(() => {
+    if (!condition) return;
+
+    getStatIssue(condition).then((res) => {
+      setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#0A9071'
             }
-          ])
+          }
         },
-        emphasis: {
-          focus: 'series'
+        grid: {
+          left: '3%',
+          bottom: '3%',
+          width: '92%',
+          height: '90%',
+          containLabel: true
         },
-        data: [1.8, 3.3, 1.9, 2.9, 2.1, 1.5, 2.3]
-      }
-    ]
-  };
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: res.map(x => x.name)
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            minInterval: 1
+          }
+        ],
+        series: [
+          {
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1.1, [
+                {
+                  offset: 0,
+                  color: '#0A9071'
+                },
+                {
+                  offset: 1,
+                  color: '#FFF'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: res.map(x => x.name)
+          }
+        ]
+      })
+    })
+  }, [condition]);
+
+  const onChange = (dt, typ) => {
+    if (typ == 1) {
+      setCondition({
+        num: 7,
+        statType: 'issue_daily',
+        startDate: dt[0].format('YY-MM-DD'),
+        endDate: dt[1].format('YY-MM-DD'),
+      })
+    } else if (typ == 2) {
+      setCondition({
+        num: dt[0].daysInMonth(),
+        statType: 'issue_daily',
+        startDate: dt[0].format('YY-MM-DD'),
+        endDate: dt[1].format('YY-MM-DD'),
+      })
+    } else if (typ == 3) {
+      setCondition({
+        num: 365,
+        statType: 'issue_daily',
+        startDate: dt[0].format('YY-MM-DD'),
+        endDate: dt[1].format('YY-MM-DD'),
+      })
+    }
+
+    console.log('dt天数', dt[0].format('MM-DD'));
+    // console.log('dt,typ', dt, typ);
+  }
 
   return (
-    <Card title="上报统计">
+    <Card title="上报统计" extra={<RangeDate onChange={onChange} />}>
       <Chart option={option} style={props.style}></Chart>
     </Card>
   )
-}
+});

src/pages/home/components/Banner.jsx

@@ -1,28 +1,37 @@
-import React from 'react';
-import { UserOutlined } from '@ant-design/icons';
-import { Row, Col, Card, Statistic, Space } from 'antd';
+import React, { useState } from 'react';
+import { UserOutlined, ShrinkOutlined, DoubleRightOutlined, CarryOutOutlined } from '@ant-design/icons';
+import { Row, Col, Card, Statistic } from 'antd';
+import { getStatBanner } from "@/service/stat";
 
 export default (props) => {
+  const [sum, setSum] = useState({});
+  React.useEffect(() => {
+    getStatBanner().then((res) => {
+      // console.log('user', res)
+      setSum(res)
+    });
+  }, [0]);
+
   return (
     <Row gutter={24}>
       <Col span={6}>
         <Card>
-          <Statistic prefix={<UserOutlined />} title="注册用户" value={580239} />
+          <Statistic prefix={<UserOutlined />} title="注册用户" value={sum.user_num} />
         </Card>
       </Col>
       <Col span={6}>
         <Card>
-          <Statistic prefix={<UserOutlined />} title="待处理问题单数" value={580239} />
+          <Statistic prefix={<ShrinkOutlined />} title="待处理问题单数" value={sum.published_num} />
         </Card>
       </Col>
       <Col span={6}>
         <Card>
-          <Statistic prefix={<UserOutlined />} title="待处理中问题单数" value={580239} />
+          <Statistic prefix={<DoubleRightOutlined />} title="处理中问题单数" value={sum.assigned_num} />
         </Card>
       </Col>
       <Col span={6}>
         <Card>
-          <Statistic prefix={<UserOutlined />} title="已办结问题单数" value={580239} />
+          <Statistic prefix={<CarryOutOutlined />} title="已办结问题单数" value={sum.unassigned_num} />
         </Card>
       </Col>
     </Row>

src/pages/home/components/EscalationCharts.jsx

@@ -1,66 +1,94 @@
-import React from 'react';
-import { Card } from 'antd';
+import React, { useState } from 'react';
+import { Card, Select } from 'antd';
 import * as echarts from 'echarts/core';
 import Chart from '@/components/chart';
+import { getStatEscalation } from "@/service/stat";
+import { getSysOrg } from "@/service/sysorg";
 
 export default (props) => {
+  const [option, setOption] = useState({});
+  // const [id, setId] = useState({});
+  const [orgList, setOrgList] = useState([]);
+  const [orgId, setOrgId] = useState();
+  console.log('orgId', orgId);
 
-  const option = {
-    title: {
-      text: '交办统计'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#F772D1'
-        }
-      }
-    },
-    grid: {
-      left: '3%',
-      bottom: '3%',
-      width: '90%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: ['已处理', '未处理', '逾期'],
-        boundaryGap: true,
-        name: '状态',
-        axisTick: {
-          alignWithLabel: true,
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        minInterval: 1,
-        name: '交办次数'
-      }
-    ],
-    series: [
-      {
-        type: 'bar',
-        barWidth: '15%',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#F772D1' },
-            { offset: 0.5, color: '#C872F2' },
-            { offset: 1, color: '#E5BEF8' }
-          ])
+  React.useEffect(() => {
+    getSysOrg({ pageSize: 500 }).then((res) => {
+      setOrgList(res.records || [])
+    })
+  }, []);
+
+  React.useEffect(() => {
+    getStatEscalation({ orgId: orgId }).then((res) => {
+      setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#F772D1'
+            }
+          }
         },
-        data: [2, 3, 1]
-      }
-    ]
-  };
+        grid: {
+          left: '3%',
+          bottom: '3%',
+          width: '90%',
+          height: '90%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: res.map(x => x.name),
+            boundaryGap: true,
+            name: '状态',
+            axisTick: {
+              alignWithLabel: true,
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            minInterval: 1,
+            name: '交办次数'
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: '15%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#F772D1' },
+                { offset: 0.5, color: '#C872F2' },
+                { offset: 1, color: '#E5BEF8' }
+              ])
+            },
+            data: res.map(x => x.value),
+          }
+        ]
+      })
+    })
+  }, [orgId]);
 
   return (
-    <Card title="时间维度">
+    <Card
+      title="交办统计"
+      extra={
+        <Select style={{ width: "200px" }} placeholder="请选择单位" value={orgId} onChange={e => setOrgId(e)}>
+          {
+            orgList.map((item) => (
+              <Select.Option key={item.orgId} value={item.orgId}>
+                {item.name}
+              </Select.Option>
+            )
+            )
+          }
+        </Select>
+      }
+    >
       <Chart option={option} style={props.style}></Chart>
     </Card>
   )

src/pages/home/components/ProblemCharts.jsx

@@ -1,65 +1,73 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Card } from 'antd';
 import * as echarts from 'echarts/core';
 import Chart from '@/components/chart';
+import { getStatProblem } from "@/service/stat";
 
 export default (props) => {
 
-  const option = {
-    title: {
-      text: '问题分类'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#FB9900'
-        }
-      }
-    },
-    grid: {
-      left: '3%',
-      bottom: '3%',
-      width: '90%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        data: ['公益宣传', '环境卫生', '基础设施', '文明素养', '公共秩序', '其他'],
-        // boundaryGap: true,
-        axisTick: {
-          alignWithLabel: true,
+  const [option, setOption] = useState({});
+  console.log('---------->', option)
+
+  React.useEffect(() => {
+    getStatProblem().then((res) => {
+      console.log('====================>', res.map(x => x.name))
+      setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#FB9900'
+            }
+          }
         },
-        axisLabel: {
-          interval: 0,
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        minInterval: 1
-      }
-    ],
-    series: [
-      {
-        type: 'bar',
-        barWidth: '20%',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#FB9900' },
-            { offset: 1, color: '#FFD38F' }
-          ])
+        grid: {
+          left: '3%',
+          bottom: '3%',
+          height: '90%',
+          width: '90%',
+          containLabel: true
         },
-        data: [2, 1, 2, 3, 2, 1]
-      }
-    ]
-  };
+        xAxis: [
+          {
+            type: 'category',
+            data: res.map(x => x.name),
+            // boundaryGap: true,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLabel: {
+              interval: 0,
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            minInterval: 1
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: '20%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FB9900' },
+                { offset: 1, color: '#FFD38F' }
+              ])
+            },
+            data: res.map(x => x.value),
+          }
+        ]
+      });
+    });
+  }, [0]);
+
 
   return (
-    <Card>
+    <Card title="问题分类">
       <Chart option={option} style={props.style}></Chart>
     </Card>
   )

src/pages/home/components/RangeDate.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Card, DatePicker, Button } from 'antd';
+import * as dayjs from 'dayjs';
+// import * as isLeapYear from 'dayjs/plugin/isLeapYear' // 导入插件
+// import 'dayjs/locale/zh-cn' // 导入本地化语言
+
+export default (props) => {
+
+  const { onChange } = props;
+
+  const { RangePicker } = DatePicker;
+  const [date, setDate] = useState([]);
+
+  const updateDate = (dt, typ) => {
+    if (onChange) {
+      onChange(dt, typ);
+    }
+
+    setDate(dt);
+  }
+
+  const onWeek = () => {
+    updateDate(
+      [
+        dayjs().startOf('week').add(1, 'day'),
+        dayjs().endOf('week').add(1, 'day')
+      ],
+      1
+    );
+  }
+
+  const onMonth = () => {
+    updateDate([
+      dayjs().startOf('month'),
+      dayjs().endOf('month')
+    ], 2)
+    // console.log('fangfang', dayjs().endOf('month'));
+  }
+
+  const onYear = () => {
+    updateDate([
+      dayjs().startOf('year'),
+      dayjs().endOf('year')
+    ], 3)
+    // console.log('fangfang', dayjs().endOf('year'));
+  }
+
+  const onRange = (e) => {
+    updateDate(e, 0);
+  }
+
+  // console.log('data', data)
+  return (
+    <div>
+      <Button onClick={onWeek} type="text">本周</Button>
+      <Button onClick={onMonth} type="text">本月</Button>
+      <Button onClick={onYear} type="text">本年</Button>
+      <RangePicker onChange={onRange} value={date} />
+    </div>
+  )
+}

src/pages/home/components/SpotCharts.jsx

@@ -6,9 +6,6 @@ import Chart from '@/components/chart';
 export default (props) => {
 
   const option = {
-    title: {
-      text: '点位分类'
-    },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -21,7 +18,8 @@ export default (props) => {
     grid: {
       left: '3%',
       bottom: '3%',
-      width: '90%',
+      width: '92%',
+      height: '90%',
       containLabel: true
     },
     xAxis: [
@@ -59,7 +57,7 @@ export default (props) => {
   };
 
   return (
-    <Card>
+    <Card title="点位分类" extra={'只显示本年度问题数前10的点位'}>
       <Chart option={option} style={props.style}></Chart>
     </Card>
   )

src/pages/home/index.jsx

@@ -10,7 +10,12 @@ import Page from '@/components/Page';
 export default (props) => {
 
   const chartStyle = {
-    height: '215px',
+    height: '260px',
+    width: '100%',
+  }
+
+  const chartStyle2 = {
+    height: '200px',
     width: '100%',
   }
 
@@ -19,19 +24,22 @@ export default (props) => {
       <Banner />
 
       <Row gutter={24} style={{ marginTop: '24px' }}>
-        <Col span={12}>
+        <Col span={24}>
           <AssignedCharts style={chartStyle} />
         </Col>
-        <Col span={12}>
-          <EscalationCharts style={chartStyle} />
-        </Col>
       </Row>
 
       <Row gutter={24} style={{ marginTop: '24px' }}>
         <Col span={12}>
-          <ProblemCharts style={chartStyle} />
+          <ProblemCharts style={chartStyle2} />
         </Col>
         <Col span={12}>
+          <EscalationCharts style={chartStyle2} />
+        </Col>
+
+      </Row>
+      <Row gutter={24} style={{ marginTop: '24px' }}>
+        <Col span={24}>
           <SpotCharts style={chartStyle} />
         </Col>
       </Row>

src/service/stat.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request';
+
+export const getStat = (duty) => request('/api/ma/index-stat', { duty });
+
+/*
+ * 查询问题(图表)
+ */
+export const getStatProblem = (params) => request('/api/stat/issue/type', { params });
+
+/*
+ * 查询交办(图表)
+ */
+export const getStatEscalation = (params) => request('/api/stat/issue/org', { params });
+
+/*
+ * 查询首页统计
+ */
+export const getStatBanner = (params) => request('/api/stat/admin/index-banner', { params });
+
+/*
+ * 查询上报统计
+ */
+export const getStatIssue = (params) => request('/api/stat/issue', { params });