feat: 安全巡检概括页加入环形图、柱线混合图

src/pages/Safe/Content/Info/Summary/columnChart.tsx

@@ -0,0 +1,80 @@
+import React, { memo } from 'react'
+import { DualAxes } from '@ant-design/charts'
+import { DualAxesConfig } from '@ant-design/charts/es/dualAxes'
+import { SafeColumnCharType, SafeLineChartType } from '.'
+
+interface iColumnChartProps {
+  columnData: SafeColumnCharType[]
+  lineData: SafeLineChartType[]
+}
+const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
+  const config: DualAxesConfig = {
+    data: [ props.data.columnData, props.data.lineData ],
+    xField: 'month',
+    yField: [ 'count', 'percentage' ],
+    // xAxis: { label: { autoRotate: false } },
+    // scrollbar: { type: 'vertical' },
+    tooltip: {
+      formatter: datum => {
+        const obj = { name: '', value: '' }
+        if (datum.percentage) {
+          obj.name = '整改占总数比例'
+          obj.value = datum.percentage + '%'
+        } else if (datum.name && datum.name === 'rectifyed') {
+          obj.name = '完成整改'
+          obj.value = datum.count
+        } else {
+          obj.name = '提交巡检'
+          obj.value = datum.count
+        }
+        return obj
+      }
+    },
+    geometryOptions: [
+      {
+        geometry: 'column',
+        isGroup: true,
+        seriesField: 'name',
+
+        columnWidthRatio: 0.4,
+        color: ({ name }) => {
+          if (name === 'rectifyed') {
+            return '#D8CAAF'
+          }
+          return '#B5C4B1'
+        },
+        label: {}
+      },
+      {
+        geometry: 'line',
+        color: '#A06666',
+        isStack: true
+        // smooth: true
+      }
+    ],
+    legend: {
+      custom: true,
+      position: 'top',
+      items: [
+        {
+          value: 'submit',
+          name: '提交巡检',
+          marker: { symbol: 'square', style: { fill: '#B5C4B1', r: 5 } }
+        },
+        {
+          value: 'rectifyed',
+          name: '完成整改',
+          marker: { symbol: 'square', style: { fill: '#D8CAAF', r: 5 } }
+        },
+        {
+          value: 'bill',
+          name: '整改占总数比例',
+          marker: { symbol: 'square', style: { fill: '#A06666', r: 5 } }
+        }
+      ]
+    }
+  }
+  return <DualAxes {...config} />
+}
+
+export default memo(ColumnChart)

src/pages/Safe/Content/Info/Summary/index.scss

@@ -20,3 +20,12 @@
   width: 100%;
   height: 300px;
 }
+
+.echarts-column-chart {
+  width: 100%;
+  height: 450px;
+  & > h5 {
+    margin: 0;
+    font-weight: 700;
+  }
+}

src/pages/Safe/Content/Info/Summary/index.tsx

@@ -2,16 +2,23 @@ import Header from '@/components/Header'
 import { tenderStore } from '@/store/mobx'
 import consts from '@/utils/consts'
 import dayjs from 'dayjs'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useMemo } from 'react'
 import { useActivate } from 'react-activation'
 import { Link } from 'react-router-dom'
 import { apiGetSafeSurvey } from './api'
+import ColumnChart from './columnChart'
 import './index.scss'
 import PieChart from './pieChart'
-interface charListType {
-  [key: string]: number
+export interface SafeColumnCharType {
+  name: 'rectifyed' | 'submit'
+  month: string
+  count: number
 }
 
+export interface SafeLineChartType {
+  month: string
+  percentage: number
+}
 interface iRectifyData {
   auditName: string
   createTime: string
@@ -22,22 +29,25 @@ interface iRectifyData {
 interface iSummaryState {
   approvalTotal: number
   rectifyTotal: number
-  rectifyedData: charListType
   rectifyedTotal: number
   rectifylist: iRectifyData[]
-  submitData: charListType
+  columnarData: SafeColumnCharType[]
+  lineData: SafeLineChartType[]
 }
 const Summary: React.FC<{}> = () => {
   useEffect(() => {
     initData()
   }, [])
+  useActivate(() => {
+    initData()
+  })
   const [ state, setState ] = useState<iSummaryState>({
     approvalTotal: 0,
     rectifyTotal: 0,
     rectifyedTotal: 0,
-    rectifyedData: {},
     rectifylist: [],
-    submitData: {}
+    columnarData: [],
+    lineData: []
   })
   useActivate(() => initData())
   const initData = async () => {
@@ -47,6 +57,27 @@ const Summary: React.FC<{}> = () => {
     }
   }
 
+  const pieData = useMemo(() => {
+    const data = [
+      {
+        type: '审批中',
+        value: state.approvalTotal
+      },
+      {
+        type: '整改中',
+        value: state.rectifyTotal
+      },
+      {
+        type: '已整改',
+        value: state.rectifyedTotal
+      }
+    ]
+    return data
+  }, [ state.approvalTotal, state.rectifyTotal, state.rectifyedTotal ])
+
+  const columnCharData = useMemo(() => {
+    return { columnData: state.columnarData, lineData: state.lineData }
+  }, [ state.columnarData, state.lineData ])
   const handleDate = (createTime: string) => {
     return dayjs(new Date()).diff(dayjs(createTime), 'day') + '天'
   }
@@ -72,10 +103,15 @@ const Summary: React.FC<{}> = () => {
             </div>
           </div>
           <div className="pi-flex-treble pi-mg-left-30 card">
-              <PieChart></PieChart>
+            <PieChart data={pieData}></PieChart>
+          </div>
+        </div>
+        <div className="card echarts-column-chart mt-3">
+          <h5 className="pi-fz-25 pi-fw-5">整改趋势</h5>
+          <div className="pi-width-100P">
+            <ColumnChart data={columnCharData}></ColumnChart>
           </div>
         </div>
-        <div className="card h-400 mt-3"></div>
       </div>
     </div>
   )

src/pages/Safe/Content/Info/Summary/pieChart.tsx

@@ -1,55 +1,38 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Pie, G2  } from '@ant-design/charts'
 import { PieConfig } from '@ant-design/charts/es/pie'
 import './index.scss'
-const G = G2.getEngine('canvas')
 G2.registerTheme('custom-pie', {
   colors10: [ '#C7B8A1', '#9CA8B8', '#7B8B6F' ],
   colors29: [ '#DACAB1', '#ABB8CA', '#87987A' ]
 })
-const DemoPie: React.FC = () => {
 
-  const data = [
-    {
-      type: '审批中',
-      value: 27
-    },
-    {
-      type: '整改中',
-      value: 25
-    },
-    {
-      type: '已整改',
-      value: 18
-    }
-  ]
-  const config:PieConfig = {
+type iPieChartProps = {
+  type: string
+  value: number
+}[]
+const DemoPie: React.FC<{data: iPieChartProps}> = ({ data }) => {
+  console.log(data)
 
+  const config:PieConfig = {
     appendPadding: 10,
-    data: data,
+    data,
     padding: 'auto',
     angleField: 'value',
     colorField: 'type',
     radius: 1,
-    renderer: 'svg',
+    renderer: 'canvas',
     innerRadius: 0.7,
     className: 'echarts-pie',
-    // meta: {
-    //   value: {
-    //     formatter: function formatter(v) {
-    //       return ''.concat(v, ' \xA5')
-    //     }
-    //   }
-    // },
     label: {
       type: 'outer',
       autoRotate: false,
-      content: '{name}: {value} - {percentage}'
+      content: '{name}: {percentage}'
     },
     interactions: [
-      { type: 'element-selected' },
-      { type: 'pie-legend-active' },
-      { type: 'element-active' }
+      // { type: 'element-selected' },
+      { type: 'pie-legend-active' }
+      // { type: 'element-active' }
       // { type: 'pie-statistic-active' }
     ],
     legend: {
@@ -60,4 +43,4 @@ const DemoPie: React.FC = () => {
   }
   return <Pie {...config} />
 }
-export default DemoPie
+export default memo(DemoPie)