Merge branch 'dev' of http://192.168.1.41:3000/lanjianrong/management into dev

# Conflicts:
#	.gitignore
#	.vscode/settings.json

.eslintignore

@@ -5,3 +5,4 @@
 /src/serviceWorker.ts
 /src/setupTests.ts
 /scripts
+/.vscode

.gitignore

@@ -4,5 +4,6 @@ build
 dist
 /package-lock.json
 /deploy.config.js
+.vscode
 /.vscode
 .vscode

src/pages/Quality/Content/Info/Summary/api.ts

@@ -0,0 +1,10 @@
+import request from "@/utils/common/request"
+
+/**
+ * 获取安全概述
+ * @param bid 标段id
+ */
+export async function apiGetqualitySurvey(bid: string) {
+  const { data } = await request.get('/api/quality/survey', { bidsectionId: bid })
+  return data
+}

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

@@ -0,0 +1,81 @@
+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 { 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' },
+    slider: { start: 0.1, end: 1 },
+    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/Quality/Content/Info/Summary/index.scss

@@ -15,3 +15,17 @@
 .card.h400 {
   height: 400px;
 }
+
+.echarts-pie {
+  width: 100%;
+  height: 300px;
+}
+
+.echarts-column-chart {
+  width: 100%;
+  height: 450px;
+  & > h5 {
+    margin: 0;
+    font-weight: 700;
+  }
+}

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

@@ -1,44 +1,117 @@
 import Header from '@/components/Header'
-import React from 'react'
-import { RouteProps } from 'react-router'
+import { tenderStore } from '@/store/mobx'
+import consts from '@/utils/consts'
+import dayjs from 'dayjs'
+import React, { useEffect, useState, useMemo } from 'react'
+import { useActivate } from 'react-activation'
+import { Link } from 'react-router-dom'
+import { apiGetqualitySurvey } from './api'
+import ColumnChart from './columnChart'
 import './index.scss'
+import PieChart from './pieChart'
+export interface QualityColumnCharType {
+  name: 'rectifyed' | 'submit'
+  month: string
+  count: number
+}
 
+export interface QualityLineChartType {
+  month: string
+  percentage: number
+}
+interface iRectifyData {
+  auditName: string
+  createTime: string
+  id: string
+  inspectionDetail: string
+  status: number
+}
+interface iSummaryState {
+  approvalTotal: number
+  rectifyTotal: number
+  rectifyedTotal: number
+  rectifylist: iRectifyData[]
+  columnarData: QualityColumnCharType[]
+  lineData: QualityLineChartType[]
+}
+const Summary: React.FC<{}> = () => {
+  const [ state, setState ] = useState<iSummaryState>({
+    approvalTotal: 0,
+    rectifyTotal: 0,
+    rectifyedTotal: 0,
+    rectifylist: [],
+    columnarData: [],
+    lineData: []
+  })
+  useEffect(() => {
+    initData()
+  }, [ tenderStore.bid ])
+  useActivate(() => {
+    initData()
+  })
+  useActivate(() => initData())
+  const initData = async () => {
+    const { data, code = -1 } = await apiGetqualitySurvey(tenderStore.bid)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, ...data })
+    }
+  }
 
-const Summary:React.FC<RouteProps> = (props) => {
-  // console.log(props.location?.state)
-
-  // useActivate(() => {
-  //   BidHander()
-  // })
-  // useEffect(() => {
-  //   BidHander()
-  // }, [])
-  // const BidHander = () => {
-  //   if (Object.keys(props.location?.state as object).length) {
-  //     // console.log(props.location?.state)
+  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 { id = '', name = '' } = props.location?.state as {id: string;name: string}
-  //     id && (tenderStore.saveBidsectionId(id))
-  //     name && (tenderStore.saveName(name))
-  //   }
-  // }
+  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') + '天'
+  }
   return (
     <div className="wrap-contaniner">
       <Header title="巡检概况"></Header>
       <div className="wrap-content m-3 pi-flex-column pi-justify-start">
         <div className="pi-justify-start">
           <div className="pi-flex-twice card pi-flex-column">
-            <header className="card-title">整改中 (23) </header>
+            <header className="card-title">整改中 ({state.rectifyTotal}) </header>
             <div>
-              <p>检查路面清洗，路面污染严重</p>
-              <p>检查路面清洗，路面污染严重</p>
-              <p>检查路面清洗，路面污染严重</p>
-              <p>检查路面清洗，路面污染严重</p>
+              {state.rectifylist.map(item => {
+                return (
+                  <div key={item.id} className="pi-justify-between pi-lh-18 pi-height-18">
+                    <Link to={{ pathname: '/console/quality/content/detail/info', state: { saveId: item.id } }}>{item.inspectionDetail}</Link>
+                    <div className="pi-align-center">
+                      <span className="pi-mg-right-5">{item.auditName}</span>
+                      <span className="pi-badge danger">{handleDate(item.createTime)}</span>
+                    </div>
+                  </div>
+                )
+              })}
             </div>
           </div>
-          <div className="pi-flex-treble pi-mg-left-30 card"></div>
+          <div className="pi-flex-treble pi-mg-left-30 card">
+            <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/Quality/Content/Info/Summary/pieChart.tsx

@@ -0,0 +1,45 @@
+import React, { memo } from 'react'
+import { Pie, G2  } from '@ant-design/charts'
+import { PieConfig } from '@ant-design/charts/es/pie'
+import './index.scss'
+G2.registerTheme('custom-pie', {
+  colors10: [ '#C7B8A1', '#9CA8B8', '#7B8B6F' ],
+  colors29: [ '#DACAB1', '#ABB8CA', '#87987A' ]
+})
+
+type iPieChartProps = {
+  type: string
+  value: number
+}[]
+const DemoPie: React.FC<{data: iPieChartProps}> = ({ data }) => {
+  const config:PieConfig = {
+    appendPadding: 10,
+    data,
+    padding: 'auto',
+    angleField: 'value',
+    colorField: 'type',
+    radius: 1,
+    renderer: 'canvas',
+    innerRadius: 0.7,
+    className: 'echarts-pie',
+
+    label: {
+      type: 'outer',
+      autoRotate: false,
+      content: '{name}: {percentage}'
+    },
+    interactions: [
+      { type: 'element-selected' },
+      { type: 'pie-legend-active' },
+      // { type: 'element-active' }
+      { type: 'pie-statistic-active' }
+    ],
+    legend: {
+      layout: 'horizontal',
+      position: 'top-left'
+    },
+    theme: 'custom-pie'
+  }
+  return <Pie {...config} />
+}
+export default memo(DemoPie)

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

@@ -14,6 +14,7 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
     yField: [ 'count', 'percentage' ],
     // xAxis: { label: { autoRotate: false } },
     // scrollbar: { type: 'vertical' },
+    slider: { start: 0.1, end: 1 },
     tooltip: {
       formatter: datum => {
         const obj = { name: '', value: '' }
@@ -35,7 +36,6 @@ const ColumnChart: React.FC<{ data: iColumnChartProps }> = props => {
         geometry: 'column',
         isGroup: true,
         seriesField: 'name',
-
         columnWidthRatio: 0.4,
         color: ({ name }) => {
           if (name === 'rectifyed') {

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

@@ -12,8 +12,6 @@ type iPieChartProps = {
   value: number
 }[]
 const DemoPie: React.FC<{data: iPieChartProps}> = ({ data }) => {
-  console.log(data)
-
   const config:PieConfig = {
     appendPadding: 10,
     data,
@@ -24,16 +22,17 @@ const DemoPie: React.FC<{data: iPieChartProps}> = ({ data }) => {
     renderer: 'canvas',
     innerRadius: 0.7,
     className: 'echarts-pie',
+
     label: {
       type: 'outer',
       autoRotate: false,
       content: '{name}: {percentage}'
     },
     interactions: [
-      // { type: 'element-selected' },
-      { type: 'pie-legend-active' }
+      { type: 'element-selected' },
+      { type: 'pie-legend-active' },
       // { type: 'element-active' }
-      // { type: 'pie-statistic-active' }
+      { type: 'pie-statistic-active' }
     ],
     legend: {
       layout: 'horizontal',