更新一波

src/pages/B1Plan/B1LookCity/index.module.scss

@@ -0,0 +1,31 @@
+.B1LookCity {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+  :global {
+    .B1Ltop {
+      display: flex;
+      justify-content: space-between;
+      padding: 15px 24px;
+      border-bottom: 1px solid #ccc;
+      .B1LtopL {
+        & > span {
+          position: relative;
+          top: 2px;
+          display: inline-block;
+          margin-left: 20px;
+          font-weight: 700;
+          font-size: 20px;
+        }
+      }
+    }
+    .tableMain {
+      .ant-table-body {
+        height: 590px;
+      }
+    }
+  }
+}

src/pages/B1Plan/B1LookCity/index.tsx

@@ -0,0 +1,207 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Table } from 'antd'
+import { B1tableAreaType } from '@/types'
+import history from '@/utils/history'
+import PlanModal from '../PlanModal'
+import { B1_APIgetlistAreaSon } from '@/store/action/B1Plan'
+import dayjs from 'dayjs'
+import ExportJsonExcel from 'js-export-excel'
+import { MessageFu } from '@/utils/message'
+
+type Props = {
+  closeSon: () => void
+  city1: string
+}
+
+function B1LookCity({ closeSon, city1 }: Props) {
+  // 表格数据
+  const [tabList, setTabList] = useState<B1tableAreaType[]>([])
+
+  const getListFu = useCallback(async () => {
+    const res = await B1_APIgetlistAreaSon({ province: city1 })
+
+    if (res.code === 0) {
+      let arr: B1tableAreaType[] = res.data.region || []
+
+      arr = arr.map((v, i) => ({
+        ...v,
+        id: i + ''
+      }))
+
+      setTabList(arr)
+    }
+  }, [city1])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  // 跳到 机房管理 或者 场景审核
+  const skipUrlFu = useCallback((val: string, url: '/psychz' | '/scene') => {
+    if (val.includes('其他')) history.push(encodeURI(`${url}?N=1`))
+    else history.push(encodeURI(`${url}?C=${val}`))
+  }, [])
+
+  // 点击 按日期统计
+  const [modalTitle, setModalTitle] = useState('')
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: '站址地区',
+        render: (item: B1tableAreaType) => item.city || '空'
+      },
+      {
+        title: '机房总数',
+        render: (item: B1tableAreaType) => (
+          <span
+            onClick={() => skipUrlFu(city1 + '/' + item.city, '/psychz')}
+            className='B1tableClick'
+          >
+            {item.pcsRoom || 0}
+          </span>
+        )
+      },
+      {
+        title: '上传机房',
+        render: (item: B1tableAreaType) => item.pcsSceneDistinct || 0
+      },
+      {
+        title: '上传场景',
+        render: (item: B1tableAreaType) => (
+          <span
+            onClick={() => skipUrlFu(city1 + '/' + item.city, '/scene')}
+            className='B1tableClick'
+          >
+            {item.pcsScene || 0}
+          </span>
+        )
+      },
+      {
+        title: '完成场景计算',
+        render: (item: B1tableAreaType) => item.pcsCalculate || 0
+      },
+      {
+        title: '审核驳回',
+        render: (item: B1tableAreaType) => item.pcsReject || 0
+      },
+      {
+        title: '初审通过',
+        render: (item: B1tableAreaType) => item.pcsFirst || 0
+      },
+      {
+        title: '审核通过',
+        render: (item: B1tableAreaType) => item.pcsPass || 0
+      },
+
+      {
+        title: '场景推送成功',
+        render: (item: B1tableAreaType) => item.pcsPushScene || 0
+      },
+      {
+        title: '链接推送成功',
+        render: (item: B1tableAreaType) => item.pcsPushLink || 0
+      },
+      {
+        title: 'Json推送成功',
+        render: (item: B1tableAreaType) => item.pcsPushJson || 0
+      },
+      {
+        title: '操作',
+        render: (item: B1tableAreaType) => (
+          <>
+            <Button size='small' type='text' onClick={() => setModalTitle(city1 + '/' + item.city)}>
+              按日期统计
+            </Button>
+          </>
+        )
+      }
+    ]
+  }, [city1, skipUrlFu])
+
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    if (tabList.length > 30000)
+      return MessageFu.warning('只支持导出最多30000条数据。请增加筛选条件，并重新尝试')
+
+    if (tabList.length === 0) return MessageFu.warning('当前搜索条件没有数据!')
+    const name = `进度统计-${city1}` + dayjs(new Date()).format('YYYY-MM-DD HH:mm')
+
+    const option = {
+      fileName: name,
+      datas: [
+        {
+          sheetData: tabList.map((v: B1tableAreaType) => ({
+            ...v,
+            city: city1 + '-' + v.city
+          })),
+          sheetName: name,
+          sheetFilter: [
+            'city',
+            'pcsRoom',
+            'pcsSceneDistinct',
+            'pcsScene',
+            'pcsCalculate',
+            'pcsReject',
+            'pcsFirst',
+            'pcsPass',
+            'pcsPushScene',
+            'pcsPushLink',
+            'pcsPushJson'
+          ],
+          sheetHeader: [
+            '站址地区',
+            '机房总数',
+            '上传机房',
+            '上传场景',
+            '完成场景计算',
+            '审核驳回',
+            '初审通过',
+            '审核通过',
+            '场景推送成功',
+            '链接推送成功',
+            'Json推送成功'
+          ],
+          columnWidths: [10, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5]
+        }
+      ]
+    }
+
+    const toExcel = new ExportJsonExcel(option) //new
+    toExcel.saveExcel() //保存
+  }, [city1, tabList])
+
+  return (
+    <div className={styles.B1LookCity}>
+      <div className='B1Ltop'>
+        <div className='B1LtopL'>
+          <Button onClick={closeSon}>返回</Button>
+          <span>进度统计-{city1}</span>
+        </div>
+
+        <Button type='primary' onClick={deriveFu}>
+          导出表格
+        </Button>
+      </div>
+      {/* 表格主体 */}
+      <div className='tableMain'>
+        <Table
+          size='small'
+          scroll={{ y: 590 }}
+          dataSource={tabList}
+          columns={columns}
+          rowKey='id'
+          pagination={false}
+        />
+      </div>
+
+      {/* 点击 按日期查看 出来的页面 */}
+      {modalTitle ? <PlanModal title={modalTitle} closePageFu={() => setModalTitle('')} /> : null}
+    </div>
+  )
+}
+
+const MemoB1LookCity = React.memo(B1LookCity)
+
+export default MemoB1LookCity

src/pages/B1Plan/B1tab1.tsx

@@ -10,6 +10,7 @@ import dayjs from 'dayjs'
 import ExportJsonExcel from 'js-export-excel'
 import PlanModal from './PlanModal'
 import history from '@/utils/history'
+import B1LookCity from './B1LookCity'
 
 const tableSelectTemp: B2FromDataArer = {
   // 按机房统计
@@ -140,10 +141,9 @@ function B1tab1() {
               按日期统计
             </Button>
             {['上海市', '北京市', '天津市', '重庆市', '其他'].includes(item.cityAll) ? null : (
-              <Button size='small' type='text'>
+              <Button size='small' type='text' onClick={() => setLookCity(item.cityAll)}>
                 查看城市
               </Button>
-              // 待完善
             )}
           </>
         )
@@ -203,9 +203,12 @@ function B1tab1() {
     toExcel.saveExcel() //保存
   }, [B1TableList.list, B1TableList.total])
 
-  // 点击 按日期查看
+  // 点击 按日期统计
   const [modalTitle, setModalTitle] = useState('')
 
+  // 点击 查看城市
+  const [lookCity, setLookCity] = useState('')
+
   return (
     <>
       <div className='pageTitle'>
@@ -243,6 +246,13 @@ function B1tab1() {
 
       {/* 点击 按日期查看 出来的页面 */}
       {modalTitle ? <PlanModal title={modalTitle} closePageFu={() => setModalTitle('')} /> : null}
+
+      {/* 点击查看城市 */}
+      {lookCity ? (
+        <div className='cityListBox'>
+          <B1LookCity closeSon={() => setLookCity('')} city1={lookCity} />
+        </div>
+      ) : null}
     </>
   )
 }

src/pages/B1Plan/index.module.scss

@@ -44,6 +44,18 @@
         color: var(--themeColor);
       }
     }
+    // 点击查看城市
+    .cityListBox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+      padding: 50px;
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: 10px;
+    }
   }
 }
 

src/store/action/B1Plan.ts

@@ -2,7 +2,7 @@ import http from '@/utils/http'
 import { AppDispatch } from '..'
 
 /**
- * 获取 进度统计 表格列表（存到仓库）-按区域
+ * 获取 进度统计 --表格列表（存到仓库
  */
 export const B1_APIgetlistArea = (data: any): any => {
   return async (dispatch: AppDispatch) => {
@@ -34,7 +34,14 @@ export const B1_APIgetlistArea = (data: any): any => {
 }
 
 /**
- * 获取 区域 里面的 按日期查看 列表
+ *  获取 进度统计 --表格列表
+ */
+export const B1_APIgetlistAreaSon = (data: { province: string }) => {
+  return http.post('cms/schedule/report/region', data)
+}
+
+/**
+ * 获取 进度统计 按日期查看 列表
  */
 export const B1_APIgetTimeList = (data: any) => {
   return http.post('cms/schedule/report/trend', data)

src/types/api/B1Plan.d.ts

@@ -12,4 +12,6 @@ export type B1tableAreaType = {
   pcsScene: number
   region: string
   pcsSceneDistinct: number
+
+  city: string
 }