feat: 合同概况页

package.json

@@ -177,7 +177,7 @@
     "workbox-webpack-plugin": "4.3.1"
   },
   "dependencies": {
-    "@ant-design/charts": "^1.0.13",
+    "@ant-design/charts": "^1.0.14",
     "@ant-design/icons": "^4.2.2",
     "antd": "^4.6.4",
     "axios": "^0.21.1",

src/assets/css/common.scss

@@ -373,6 +373,7 @@
   width: calc(100vw - 55px - 120px);
   .wrap-content {
     height: calc(100vh - 34px);
+    overflow-y: auto;
   }
 }
 

src/pages/Contract/Content/Summary/components/Content/index.scss

@@ -32,3 +32,18 @@
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
 }
+
+.dual-axes-content {
+  position: relative;
+  width: 100%;
+  // height: 400px;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  & > h5 {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 20px;
+    font-weight: 700;
+  }
+}

src/pages/Contract/Content/Summary/components/Content/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import './index.scss'
-import { Pie, G2, DualAxes  } from '@ant-design/charts'
+import { Pie, G2, DualAxes } from '@ant-design/charts'
 import { PieConfig } from '@ant-design/charts/es/pie'
 import './index.scss'
 import { dayjsFormat, formatMoney } from '@/utils/util'
@@ -29,14 +29,13 @@ interface iContentData {
 type iDualAxes = {
   month: string
   value: number
+  count: number
 }[]
 interface iContentProps {
   data: iContentData
   type: 'expenditure' | 'income'
 }
 const Content:React.FC<iContentProps> = ({ data, type }) => {
-  console.log(data.progress)
-
   const pieConfig:PieConfig = {
     data: data.pieData,
     autoFit: true,
@@ -61,12 +60,81 @@ const Content:React.FC<iContentProps> = ({ data, type }) => {
     theme: 'custom-pie'
   }
 
-  // const dualAxesConfig: DualAxesConfig = {
-
-  // }
+  const dualAxesConfig: DualAxesConfig = {
+    data: [ data.returnDate, data.returnDate ],
+    autoFit: true,
+    padding: 'auto',
+    xField: 'month',
+    yField: [ 'value', 'count' ],
+    slider: true,
+    xAxis: {
+      label: {
+        formatter: (val) => dayjsFormat(val, 'YYYY年M月')
+      }
+    },
+    yAxis: {
+      value: {
+        label: {
+          formatter:(val) => `${val} 元`
+        }
+      },
+      count: {
+        label: {
+          formatter: (val) => `${val} %`
+        }
+      }
+    },
+    tooltip: {
+      formatter: datum => {
+        const obj = { name: '', value: formatMoney(datum.value) }
+        if (datum.count || datum.count === 0) {
+          obj.name = '占总金额比例'
+          obj.value = datum.count + '%'
+          return obj
+        }
+        if (type === 'expenditure') {
+          obj.name = '回款金额'
+        } else {
+          obj.name = '支付金额'
+        }
+        return obj
+      }
+    },
+    geometryOptions: [
+      {
+        geometry: 'column',
+        seriesField: 'value',
+        columnWidthRatio: 0.4,
+        color: type === 'expenditure' ? '#B5C4B1' : '#A27E7E'
+      },
+      {
+        geometry: 'line',
+        color: type === 'expenditure' ? '#965454' : '#8C8C8C',
+        isStack: true,
+        isPercent: true
+        // smooth: true
+      }
+    ],
+    legend: {
+      custom: true,
+      position: 'top',
+      items: [
+        {
+          value: 'value',
+          name: '回款金额',
+          marker: { symbol: 'square', style: { fill: type === 'expenditure' ? '#B5C4B1' : '#A27E7E', r: 5 } }
+        },
+        {
+          value: 'count',
+          name: '占总金额比例',
+          marker: { symbol: 'square', style: { fill: type === 'expenditure' ? '#965454' : '#8C8C8C', r: 5 } }
+        }
+      ]
+    }
+  }
 
   return (
-    <div className="pi-flex-column">
+    <div className="pi-flex-column pi-justify-between">
       <div className="card-body card-border">
         <h5 className="card-title">{type === 'expenditure' ? '收入' : '支出'}合同结算进度</h5>
         <div className="mb-0">
@@ -105,9 +173,9 @@ const Content:React.FC<iContentProps> = ({ data, type }) => {
           </div>
         </div>
       </div>
-      <div className="card-body card-border">
-        <h5 className="">{type === 'expenditure' ? '收入' : '支出'}合同结算趋势</h5>
-        {/* <DualAxes></DualAxes> */}
+      <div className="card-body card-border dual-axes-content pi-mg-bottom-32">
+        {/* <h5>{type === 'expenditure' ? '收入' : '支出'}合同结算趋势</h5> */}
+        <DualAxes {...dualAxesConfig}></DualAxes>
       </div>
     </div>
   )

src/pages/Contract/Content/Summary/index.tsx

@@ -88,7 +88,7 @@ export default function Summary() {
     }
 
     const newDualAxes = dualAxes.map(item => {
-      return { ...item, count: item.value / totalContractPrice * 100 }
+      return { ...item, count: (isNaN(item.value / totalContractPrice) ? 0 : (parseFloat((item.value / totalContractPrice).toFixed(2))) * 100) }
     })
     const progress = totalPaidPriceShow ? (totalPaidPriceShow / totalContractPrice) : 0
     return { pieData, returnDate: newDualAxes, totalContractPrice, totalContractPriceShow, totalPaidPriceShow, progress }
@@ -120,7 +120,7 @@ export default function Summary() {
       }
     }
     const newDualAxes = dualAxes.map(item => {
-      return { ...item, count: item.value / totalContractPrice * 100 }
+      return { ...item, count: (isNaN(item.value / totalContractPrice) ? 0 : (parseFloat((item.value / totalContractPrice).toFixed(2))) * 100) }
     })
     const progress = totalReturnPriceShow ? (totalReturnPriceShow / totalContractPrice) : 0
     return { pieData, returnDate: newDualAxes, totalContractPrice, totalContractPriceShow, totalReturnPriceShow, progress }

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

@@ -2,6 +2,7 @@ import React, { memo } from 'react'
 import { DualAxes } from '@ant-design/charts'
 import { DualAxesConfig } from '@ant-design/charts/es/dualAxes'
 import { SafeColumnCharType, SafeLineChartType } from '@/pages/Safe/Content/Info/Summary'
+import { dayjsFormat } from '@/utils/util'
 // import { SafeColumnCharType, SafeLineChartType } from '.'
 
 interface iColumnChartProps {
@@ -13,9 +14,19 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
     data: [ props.data.columnData, props.data.lineData ],
     xField: 'month',
     yField: [ 'count', 'percentage' ],
-    // xAxis: { label: { autoRotate: false } },
-    // scrollbar: { type: 'vertical' },
-    slider: { start: 0.1, end: 1 },
+    xAxis: {
+      label: {
+        formatter: (val) => dayjsFormat(val, 'YYYY年M月')
+      }
+    },
+    yAxis: {
+      percentage: {
+        label: {
+          formatter: (val) => `${val} %`
+        }
+      }
+    },
+    slider: true,
     tooltip: {
       formatter: datum => {
         const obj = { name: '', value: '' }

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

@@ -2,6 +2,7 @@ import React, { memo } from 'react'
 import { DualAxes } from '@ant-design/charts'
 import { DualAxesConfig } from '@ant-design/charts/es/dualAxes'
 import { SafeColumnCharType, SafeLineChartType } from '.'
+import { dayjsFormat } from '@/utils/util'
 
 interface iColumnChartProps {
   columnData: SafeColumnCharType[]
@@ -12,9 +13,21 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
     data: [ props.data.columnData, props.data.lineData ],
     xField: 'month',
     yField: [ 'count', 'percentage' ],
+    xAxis: {
+      label: {
+        formatter: (val) => dayjsFormat(val, 'YYYY年M月')
+      }
+    },
+    yAxis: {
+      percentage: {
+        label: {
+          formatter: (val) => `${val} %`
+        }
+      }
+    },
     // xAxis: { label: { autoRotate: false } },
     // scrollbar: { type: 'vertical' },
-    slider: { start: 0.1, end: 1 },
+    slider: true,
     tooltip: {
       formatter: datum => {
         const obj = { name: '', value: '' }