Merge branch 'master' of http://git.ycjcjy.com/civilized_city/pc-admin

src/pages/home/components/AssignedCharts.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Card } from 'antd';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+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'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [1.8, 3.3, 1.9, 2.9, 2.1, 1.5, 2.3]
+      }
+    ]
+  };
+
+  return (
+    <Card title="上报统计">
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/home/components/Banner.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { UserOutlined } from '@ant-design/icons';
+import { Row, Col, Card, Statistic, Space } from 'antd';
+
+export default (props) => {
+  return (
+    <Row gutter={24}>
+      <Col span={6}>
+        <Card>
+          <Statistic prefix={<UserOutlined />} title="注册用户" value={580239} />
+        </Card>
+      </Col>
+      <Col span={6}>
+        <Card>
+          <Statistic prefix={<UserOutlined />} title="待处理问题单数" value={580239} />
+        </Card>
+      </Col>
+      <Col span={6}>
+        <Card>
+          <Statistic prefix={<UserOutlined />} title="待处理中问题单数" value={580239} />
+        </Card>
+      </Col>
+      <Col span={6}>
+        <Card>
+          <Statistic prefix={<UserOutlined />} title="已办结问题单数" value={580239} />
+        </Card>
+      </Col>
+    </Row>
+  )
+}

src/pages/home/components/EscalationCharts.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Card } from 'antd';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+export default (props) => {
+
+  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' }
+          ])
+        },
+        data: [2, 3, 1]
+      }
+    ]
+  };
+
+  return (
+    <Card title="时间维度">
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/home/components/ProblemCharts.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Card } from 'antd';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+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,
+        },
+        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: [2, 1, 2, 3, 2, 1]
+      }
+    ]
+  };
+
+  return (
+    <Card>
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/home/components/SpotCharts.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Card } from 'antd';
+import * as echarts from 'echarts/core';
+import Chart from '@/components/chart';
+
+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,
+        },
+        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: [2, 1, 2, 3, 2, 1]
+      }
+    ]
+  };
+
+  return (
+    <Card>
+      <Chart option={option} style={props.style}></Chart>
+    </Card>
+  )
+}

src/pages/home/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Row, Col } from 'antd';
+import Banner from './components/Banner';
+import EscalationCharts from './components/EscalationCharts';
+import AssignedCharts from './components/AssignedCharts';
+import ProblemCharts from './components/ProblemCharts';
+import SpotCharts from './components/SpotCharts';
+import Page from '@/components/Page';
+
+export default (props) => {
+
+  const chartStyle = {
+    height: '215px',
+    width: '100%',
+  }
+
+  return (
+    <Page>
+      <Banner />
+
+      <Row gutter={24} style={{ marginTop: '24px' }}>
+        <Col span={12}>
+          <AssignedCharts style={chartStyle} />
+        </Col>
+        <Col span={12}>
+          <EscalationCharts style={chartStyle} />
+        </Col>
+      </Row>
+
+      <Row gutter={24} style={{ marginTop: '24px' }}>
+        <Col span={12}>
+          <ProblemCharts style={chartStyle} />
+        </Col>
+        <Col span={12}>
+          <SpotCharts style={chartStyle} />
+        </Col>
+      </Row>
+    </Page>
+  )
+}
+

src/pages/index.jsx

@@ -1,8 +0,0 @@
-import React from 'react'
-
-export default (props) => {
-  return (
-    <div></div>
-  )
-}
-

src/routes/routes.jsx

@@ -23,7 +23,7 @@ import CheckList from '@/pages/check';
 import CheckEdit from '@/pages/check/Edit';
 import OrgList from "@/pages/org/index";
 
-import Index from '@/pages/index';
+import Index from '@/pages/home/index';
 
 import PositionList from "@/pages/position/list";
 import PositionEdit from "@/pages/position/edit";