feat: add stat page

Author: rayadaschn

src/components/QuestionComponents/QuestionCheckbox/StatComponent.tsx

@@ -12,7 +12,7 @@ import { QuestionCheckboxStatPropsType } from './type'
 
 const StatComponent: FC<QuestionCheckboxStatPropsType> = ({ stat }) => {
   return (
-    <div style={{ width: '400px', height: '300px' }}>
+    <div style={{ width: '300px', height: '300px' }}>
       <ResponsiveContainer width="100%" height="100%">
         <BarChart
           width={400}

src/components/QuestionComponents/QuestionRadio/StatComponent.tsx

@@ -22,8 +22,8 @@ const StatComponent: FC<QuestionRadioStatPropsType> = ({ stat = [] }) => {
           <Pie
             dataKey="count"
             data={stat}
-            cx="50%" // x 轴的偏移
-            cy="50%" // y 轴的偏移
+            cx="40%" // x 轴的偏移
+            cy="40%" // y 轴的偏移
             outerRadius={50} // 饼图的直径
             fill="#8884d8"
             label={(i) => `${i.name}: ${format(i.count / sum)}%`}

src/pages/question/stat/components/StatContainer.tsx

@@ -4,16 +4,31 @@ import StatContainerCenter from './centerPanel'
 import StatContainerRight from './rightPanel'
 
 const StatContainer: FC = () => {
+  // 状态提升 selectedId type
+  const [selectedComponentId, setSelectedComponentId] = useState('')
+  const [selectedComponentType, setSelectedComponentType] = useState('')
+
   return (
     <div className="mx-6 h-full flex">
       <div className="w-73 bg-white px-3">
-        <StatContainerLeft />
+        <StatContainerLeft
+          selectedComponentId={selectedComponentId}
+          setSelectedComponentId={setSelectedComponentId}
+          setSelectedComponentType={setSelectedComponentType}
+        />
       </div>
-      <div className="relative flex-1 overflow-hidden">
-        <StatContainerCenter />
+      <div className="relative mx-3 flex-1 overflow-hidden">
+        <StatContainerCenter
+          selectedComponentId={selectedComponentId}
+          setSelectedComponentId={setSelectedComponentId}
+          setSelectedComponentType={setSelectedComponentType}
+        />
       </div>
       <div className="w-75 bg-white px-3">
-        <StatContainerRight />
+        <StatContainerRight
+          selectedComponentId={selectedComponentId}
+          selectedComponentType={selectedComponentType}
+        />
       </div>
     </div>
   )

src/pages/question/stat/components/centerPanel/index.tsx

@@ -1,7 +1,104 @@
 import { FC } from 'react'
+import { Pagination, Spin, Table, Typography } from 'antd'
+import { STAT_PAGE_SIZE } from '@/constant'
+import { getQuestionStatListService } from '@/api'
+import { useGetComponentInfo } from '@/hooks'
 
-const StatContainerCenter: FC = () => {
-  return <>StatContainerCenter</>
+const { Title } = Typography
+
+interface PropsType {
+  selectedComponentId: string
+  setSelectedComponentId: (id: string) => void
+  setSelectedComponentType: (type: string) => void
+}
+
+const StatContainerCenter: FC<PropsType> = (props: PropsType) => {
+  const {
+    selectedComponentId,
+    setSelectedComponentId,
+    setSelectedComponentType,
+  } = props
+
+  const { id = '' } = useParams()
+
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(STAT_PAGE_SIZE)
+  const [total, setTotal] = useState(0)
+  const [list, setList] = useState([])
+  const { loading } = useRequest(
+    async () => {
+      const res = await getQuestionStatListService(id, { page, pageSize })
+      return res
+    },
+    {
+      refreshDeps: [id, page, pageSize],
+      onSuccess(res) {
+        const { total, list = [] } = res
+        setTotal(total)
+        setList(list)
+      },
+    },
+  )
+
+  const { componentList } = useGetComponentInfo()
+  const columns = componentList.map((c) => {
+    const { fe_id, title, props = {}, type } = c
+
+    const colTitle = props!.title || title
+
+    return {
+      // title: colTitle,
+      title: (
+        <div
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            setSelectedComponentId(fe_id)
+            setSelectedComponentType(type)
+          }}
+        >
+          <span
+            style={{
+              color: fe_id === selectedComponentId ? '#1890ff' : 'inherit',
+            }}
+          >
+            {colTitle}
+          </span>
+        </div>
+      ),
+      dataIndex: fe_id,
+    }
+  })
+
+  const dataSource = list.map((i: any) => ({ ...i, key: i._id }))
+  const TableElem = (
+    <>
+      <Table columns={columns} dataSource={dataSource} pagination={false} />
+      <div style={{ textAlign: 'center', marginTop: '18px' }}>
+        <Pagination
+          total={total}
+          pageSize={pageSize}
+          current={page}
+          onChange={(page) => setPage(page)}
+          onShowSizeChange={(page, pageSize) => {
+            setPage(page)
+            setPageSize(pageSize)
+          }}
+        />
+      </div>
+    </>
+  )
+
+  return (
+    <div>
+      <Title level={3}>答卷数量: {!loading && total}</Title>
+      {loading && (
+        <div style={{ textAlign: 'center' }}>
+          <Spin />
+        </div>
+      )}
+      {!loading && TableElem}
+    </div>
+  )
 }
 
 export default StatContainerCenter

src/pages/question/stat/components/leftPanel/ComponentLayer.tsx

@@ -1,34 +1,60 @@
+import { getComponentConfByType } from '@/components/QuestionComponents'
+import { useGetComponentInfo } from '@/hooks'
+import classNames from 'classnames'
 import { FC } from 'react'
-import { Tabs } from 'antd'
-import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'
-import ComponentLib from './ComponentLib'
-import ComponentLayer from './ComponentLayer'
-
-const StatContainerLeft: FC = () => {
-  const tabsItems = [
-    {
-      key: 'componentLib',
-      label: (
-        <span>
-          <AppstoreOutlined />
-          组件库
-        </span>
-      ),
-      children: <ComponentLib />,
-    },
-    {
-      key: 'layers',
-      label: (
-        <span>
-          <BarsOutlined />
-          图层
-        </span>
-      ),
-      children: <ComponentLayer />,
-    },
-  ]
-
-  return <Tabs defaultActiveKey="componentLib" items={tabsItems} />
+
+interface PropsType {
+  selectedComponentId: string
+  setSelectedComponentId: (id: string) => void
+  setSelectedComponentType: (type: string) => void
+}
+
+const StatContainerLeft: FC<PropsType> = (props) => {
+  const {
+    selectedComponentId,
+    setSelectedComponentId,
+    setSelectedComponentType,
+  } = props
+  const { componentList } = useGetComponentInfo()
+
+  return (
+    <div className="min-h-full overflow-y-auto bg-white">
+      {componentList
+        .filter((c) => !c.isHidden) // 过滤隐藏的组件
+        .map((c) => {
+          const { fe_id, props, type } = c
+
+          const componentConf = getComponentConfByType(type)
+          if (componentConf == null) return null
+
+          const { Component } = componentConf
+
+          // 拼接 class name
+          const wrapperDefaultClassName =
+            'm-3 border-solid border-white px-2 py-3 b-rounded hover:border-blueGray'
+          const selectedClassName = 'border-gray'
+          const wrapperClassName = classNames({
+            [wrapperDefaultClassName]: true,
+            [selectedClassName]: fe_id === selectedComponentId, // 是否选中
+          })
+
+          return (
+            <div
+              className={wrapperClassName}
+              key={fe_id}
+              onClick={() => {
+                setSelectedComponentId(fe_id)
+                setSelectedComponentType(type)
+              }}
+            >
+              <div className="pointer-events-none opacity-[0.8]">
+                <Component {...props} />
+              </div>
+            </div>
+          )
+        })}
+    </div>
+  )
 }
 
 export default StatContainerLeft