From cb83c207022e6ead866739013e18ed9af9e3412a Mon Sep 17 00:00:00 2001 From: wang_yp <357754663@qq.com> Date: Thu, 10 Oct 2024 15:20:39 +0800 Subject: [PATCH] fix(amap):core --- package-lock.json | 21 + package.json | 1 + src/components/org/OrgChart.less | 171 +++++++ src/components/org/OrgChart.tsx | 23 + .../org/components/OrgChartNode.tsx | 188 ++++++++ .../org/components/OrgChartNodeRow.tsx | 27 ++ src/components/org/index.ts | 5 + src/components/org/interface.ts | 32 ++ src/pages/OrgChart.tsx | 439 +++--------------- src/pages/home/homeLeft/pover.tsx | 5 +- src/pages/poverDetail/index.tsx | 41 +- src/pages/poverPage/index.tsx | 63 +-- src/pages/poverPage/pvTable.tsx | 88 ++-- src/pages/training/task_archives.tsx | 2 +- src/router/routers/home_router.tsx | 4 +- src/store/user.ts | 16 + 16 files changed, 682 insertions(+), 444 deletions(-) create mode 100644 src/components/org/OrgChart.less create mode 100644 src/components/org/OrgChart.tsx create mode 100644 src/components/org/components/OrgChartNode.tsx create mode 100644 src/components/org/components/OrgChartNodeRow.tsx create mode 100644 src/components/org/index.ts create mode 100644 src/components/org/interface.ts diff --git a/package-lock.json b/package-lock.json index 2deb258..36d6c1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@tinymce/tinymce-react": "^4.3.0", + "@twp0217/react-org-chart": "^1.1.2", "@types/jest": "^27.5.2", "@types/node": "^16.11.65", "@types/react": "^18.0.21", @@ -4472,6 +4473,18 @@ "resolved": "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==" }, + "node_modules/@twp0217/react-org-chart": { + "version": "1.1.2", + "resolved": "https://registry.npmmirror.com/@twp0217/react-org-chart/-/react-org-chart-1.1.2.tgz", + "integrity": "sha512-Jjr9p26L/CVYsa3QIygAMduhEqxJUiSOWFZdmWsOti/URVhBG5+SCzcZpWbWH1rdm+lNKVAJTgZGlfSyES6I3w==", + "dependencies": { + "classnames": "^2.3.1" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, "node_modules/@types/aria-query": { "version": "5.0.4", "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz", @@ -36495,6 +36508,14 @@ "resolved": "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==" }, + "@twp0217/react-org-chart": { + "version": "1.1.2", + "resolved": "https://registry.npmmirror.com/@twp0217/react-org-chart/-/react-org-chart-1.1.2.tgz", + "integrity": "sha512-Jjr9p26L/CVYsa3QIygAMduhEqxJUiSOWFZdmWsOti/URVhBG5+SCzcZpWbWH1rdm+lNKVAJTgZGlfSyES6I3w==", + "requires": { + "classnames": "^2.3.1" + } + }, "@types/aria-query": { "version": "5.0.4", "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz", diff --git a/package.json b/package.json index 23ca623..0face37 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@tinymce/tinymce-react": "^4.3.0", + "@twp0217/react-org-chart": "^1.1.2", "@types/jest": "^27.5.2", "@types/node": "^16.11.65", "@types/react": "^18.0.21", diff --git a/src/components/org/OrgChart.less b/src/components/org/OrgChart.less new file mode 100644 index 0000000..865b779 --- /dev/null +++ b/src/components/org/OrgChart.less @@ -0,0 +1,171 @@ +@node-color: #1890ff; +@line-width: 1px; +@line-color: @node-color; +@expand-icon-size: 16px; + +.text-overflow-ellipsis() { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.org-chart { + &-container { + display: inline-block; + } + + &-table { + border-collapse: separate; + border-spacing: 0; + line-height: 1.5715; + + .expand-icon { + display: inline-block; + width: @expand-icon-size; + height: @expand-icon-size; + border-radius: 50%; + background-color: @line-color; + position: absolute; + left: 50%; + bottom: 0; + margin-left: -@expand-icon-size / 2; + margin-bottom: -@expand-icon-size / 2; + z-index: 99; + cursor: pointer; + + &-expanded, + &-collapsed { + &::before { + content: ''; + width: 8px; + height: 2px; + background-color: #fff; + position: absolute; + top: 7px; + left: 4px; + } + } + + &-collapsed { + &::after { + content: ''; + width: 2px; + height: 8px; + background-color: #fff; + position: absolute; + top: 4px; + left: 7px; + } + } + + &:hover { + background-color: darken(@line-color, 5%); + } + } + + td { + text-align: center; + padding: 0; + vertical-align: top; + + &.hidden { + display: none !important; + } + } + + &-node { + display: inline-block; + border: 1px solid @node-color; + padding: 0.5rem; + margin: 0 5px; + cursor: pointer; + } + + &-line { + height: 20px; + position: relative; + + &:not(&-children) { + &:before { + content: ''; + position: absolute; + top: 0; + width: @line-width; + height: 100%; + background-color: @line-color; + } + } + + &-children { + &:nth-child(odd) { + border-right: @line-width solid @line-color; + } + + &:not(:first-child, :last-child) { + border-top: @line-width solid @line-color; + } + } + } + + // 水平 + &&-horizontal { + .expand-icon { + top: 50%; + bottom: auto; + left: auto; + right: 0; + margin-left: auto; + margin-right: -@expand-icon-size / 2; + margin-top: -@expand-icon-size / 2; + margin-bottom: auto; + } + td { + vertical-align: middle; + } + + tr { + &:nth-child(odd) { + > .org-chart-table-line-children { + border-bottom: @line-width solid @line-color; + } + } + &:not(:first-child, :last-child) { + > .org-chart-table-line-children { + border-left: @line-width solid @line-color; + } + } + } + + .org-chart-table { + &-node { + margin: 5px 0; + width: 120px; + + &-content { + } + } + + &-line { + height: auto; + width: 20px; + + &:not(&-children) { + &:before { + top: auto; + left: 0; + width: 100%; + height: @line-width; + } + } + + &-children { + &:nth-child(odd), + &:not(:first-child, :last-child) { + border: none; + } + } + } + } + } + } +} diff --git a/src/components/org/OrgChart.tsx b/src/components/org/OrgChart.tsx new file mode 100644 index 0000000..4e977a2 --- /dev/null +++ b/src/components/org/OrgChart.tsx @@ -0,0 +1,23 @@ +import classNames from 'classnames'; +import React from 'react'; +import { OrgChartProps } from './interface'; +import OrgChartNode from './components/OrgChartNode'; +import './OrgChart.less'; + +const OrgChart = (props: OrgChartProps) => { + const { data, className, style, ...otherProps } = props; + + return !!data ? ( +
+ +
+ ) : null; +}; + +OrgChart.defaultProps = { + direction: 'vertical', + expandAll: true, + expandable: false, +}; + +export default OrgChart; diff --git a/src/components/org/components/OrgChartNode.tsx b/src/components/org/components/OrgChartNode.tsx new file mode 100644 index 0000000..090afe9 --- /dev/null +++ b/src/components/org/components/OrgChartNode.tsx @@ -0,0 +1,188 @@ +import classNames from 'classnames'; +import React from 'react'; +import { + OrgChartNodeDataType, + OrgChartNodeProps, + RowProps, +} from '../interface'; +import OrgChartNodeRow from './OrgChartNodeRow'; + +const OrgChartNode = (props: OrgChartNodeProps) => { + const { + data, + expandAll, + expandable, + direction, + renderNode, + onExpand, + onClick, + } = props; + + const [expanded, setExpanded] = React.useState(false); + + const handleExpandChange = () => { + const newExpanded = !expanded; + setExpanded(newExpanded); + onExpand?.(newExpanded, data); + }; + + const getOrgNodeRow = ( + span: number, + data: OrgChartNodeDataType, + ): RowProps => { + const contentNode: React.ReactNode = ( +
+ {data.label} +
+ ); + + return [ + { + span, + content: ( + +
onClick?.(data)} + > + {!!renderNode ? renderNode(data, contentNode) : contentNode} +
+ + ), + }, + ]; + }; + + const getLineRow = (span: number): RowProps => { + return [ + { + span, + content: ( + + {expandable ? ( +
handleExpandChange()} + >
+ ) : null} + + ), + }, + ]; + }; + + const getChildrenLineRow = (span: number, itemSpan: number): RowProps => { + const cells: RowProps = []; + for (let index = 0; index < span; index = index + itemSpan) { + cells.push({ + span: 1, + content: ( + +   + + ), + }); + } + return cells; + }; + + const getChildrenNode = ( + datas: OrgChartNodeDataType[] = [], + itemSpan: number, + ): RowProps => { + const cells: RowProps = []; + datas.forEach((data, index) => { + cells[itemSpan * index] = { + span: itemSpan, + content: ( + + + + ), + }; + }); + return cells; + }; + + const getRows = (): RowProps[] => { + if (data) { + const rows: RowProps[] = []; + const childrenLength = data?.children?.length || 0; + const span = childrenLength * 2; + + rows.push(getOrgNodeRow(span, data)); + // 判断是否有子节点 + if (data.children?.length ?? 0 > 0) { + rows.push(getLineRow(span)); + rows.push(getChildrenLineRow(span, 1)); + rows.push(getChildrenNode(data.children, 2)); + } + + if (direction === 'horizontal') { + const newRow: RowProps[] = []; + rows.forEach((row, rowIndex) => { + row.forEach((cell, cellIndex) => { + newRow[cellIndex] = newRow[cellIndex] || []; + newRow[cellIndex][rowIndex] = cell; + }); + }); + return newRow; + } + return rows; + } + return []; + }; + + const rows = React.useMemo(() => { + return getRows(); + }, [data, expanded]); + + React.useEffect(() => { + if (expandable === true) { + setExpanded(!!expandAll); + } else { + setExpanded(true); + } + }, [expandAll, expandable]); + + return ( + + + {rows.map((row, index) => ( + + ))} + +
+ ); +}; + +export default OrgChartNode; diff --git a/src/components/org/components/OrgChartNodeRow.tsx b/src/components/org/components/OrgChartNodeRow.tsx new file mode 100644 index 0000000..cb25fe2 --- /dev/null +++ b/src/components/org/components/OrgChartNodeRow.tsx @@ -0,0 +1,27 @@ +import { OrgChartNodeProps, RowProps } from '../interface'; +import React from 'react'; + +export interface OrgChartNodeRowProps + extends Pick { + className?: string; + index: number; + row: RowProps; +} + +const OrgChartNodeRow = (props: OrgChartNodeRowProps) => { + const { className, index, row, direction } = props; + + return ( + + {row.map((cell, cellIndex) => { + return React.cloneElement(cell.content, { + key: cellIndex, + ...(direction === 'horizontal' ? { rowSpan: cell.span } : {}), + ...(direction === 'vertical' ? { colSpan: cell.span } : {}), + }); + })} + + ); +}; + +export default OrgChartNodeRow; diff --git a/src/components/org/index.ts b/src/components/org/index.ts new file mode 100644 index 0000000..4a16b8a --- /dev/null +++ b/src/components/org/index.ts @@ -0,0 +1,5 @@ +import { OrgChartNodeDataType, OrgChartProps } from './interface'; +import OrgChart from './OrgChart'; + +export type { OrgChartNodeDataType, OrgChartProps }; +export default OrgChart; diff --git a/src/components/org/interface.ts b/src/components/org/interface.ts new file mode 100644 index 0000000..a8730e0 --- /dev/null +++ b/src/components/org/interface.ts @@ -0,0 +1,32 @@ +export interface CellProps { + span: number; + content: React.ReactElement; +} + +export type RowProps = CellProps[]; + +export interface OrgChartNodeDataType { + key: string | number; + label: string; + children?: OrgChartNodeDataType[]; + className?: string; + style?: React.CSSProperties; +} + +export interface OrgChartNodeProps { + data: OrgChartNodeDataType; + expandAll?: boolean; + expandable?: boolean; + direction?: 'horizontal' | 'vertical'; + renderNode?: ( + node: OrgChartNodeDataType, + originNode: React.ReactNode, + ) => React.ReactNode; + onExpand?: (expanded: boolean, node: OrgChartNodeDataType) => void; + onClick?: (node: OrgChartNodeDataType) => void; +} + +export interface OrgChartProps extends Partial { + className?: string; + style?: React.CSSProperties; +} diff --git a/src/pages/OrgChart.tsx b/src/pages/OrgChart.tsx index f899e35..8ee9bce 100644 --- a/src/pages/OrgChart.tsx +++ b/src/pages/OrgChart.tsx @@ -1,372 +1,75 @@ import "./org_chart.less"; -const OrgChart = () => { - const getArrayDepth=(arr)=> { - let maxDepth = 0; - let maxUser =0; - function dfs(currentArr, currentDepth) { - currentDepth++; - for (let i = 0; i < currentArr.length; i++) { - if (Array.isArray(currentArr[i].children)) { - dfs(currentArr[i].children, currentDepth); - } else { - maxUser = Math.max(maxUser, currentArr[i].userList.length); - maxDepth = Math.max(maxDepth, currentDepth); - } - } - } - - dfs(arr, 0); - return maxUser; - } - - // 示例代码 - // const arr = [[1, 2, [3, 4]], [[5], 6], 7]; - // console.log(getArrayDepth(arr)); // 输出: 3 - const data = [ - { - depName: "镇武装部党委", - depId: 1, - userList: [ - { - position: "武装部长", - userName: "李部长", - userId: 1, - }, - { - position: "教导员", - userName: "王教导", - userId: 2, - }, - ], - children: [ - { - depName: " 武装力量党支部", - depId: 2, - children: [ - { - depName: " 文武社区支部", - depId: 3, - children: [ - { - depName: " 一小组", - depId: 6, - userList: [ - { - position: "一小组长", - userName: "一小组长1", - userId: 6, - }, - { - position: "二小组长12", - userName: "二小组长2", - userId: 8, - }, - { - position: "战士", - userName: "王小三3", - userId: 11, - }, - { - position: "战士", - userName: "王小四4", - userId: 12, - }, - { - position: "二小组长34", - userName: "二小组长5", - userId: 8, - }, - { - position: "战士", - userName: "王小三6", - userId: 11, - }, - { - position: "战士", - userName: "王小四7", - userId: 13, - }, - ], - }, - { - depName: " 二小组", - depId: 7, - userList: [ - { - position: "二小组长8", - userName: "二小组长9", - userId: 7, - }, - { - position: "二小组长10", - userName: "二小组长11", - userId: 8, - }, - { - position: "战士", - userName: "王小三14", - userId: 11, - }, - { - position: "战士", - userName: "王小四", - userId: 12, - }, - ], - }, - ], - userList: [ - { - position: "文武社区支部书记", - userName: "书记名称", - userId: 3, - }, - ], - }, - { - depName: " 花龙村支部", - depId: 4, - children: [ - { - depName: " 一小组", - depId: 7, - userList: [ - { - position: "一小组长", - userName: "一小组长", - userId: 7, - }, - { - position: "二小组长2", - userName: "二小组长11", - userId: 8, - }, - { - position: "战士", - userName: "王小三", - userId: 11, - }, - { - position: "战士", - userName: "王小四12", - userId: 12, - }, - { - position: "二小组长3", - userName: "二小组长", - userId: 8, - }, - - { - position: "战士", - userName: "王小四32", - userId: 12, - }, - ], - }, - { - depName: " 二小组", - depId: 8, - userList: [ - { - position: "二小组长4", - userName: "二小组长4", - userId: 8, - }, - { - position: "战士", - userName: "王小三", - userId: 11, - }, - { - position: "战士", - userName: "王小四12", - userId: 12, - }, - { - position: "战士", - userName: "王小五", - userId: 13, - }, - ], - }, - ], - userList: [ - { - position: "花龙村支部书记", - userName: "书记名称", - userId: 4, - }, - ], - }, - { - depName: " 云华社区支部", - depId: 5, - children: [ - { - depName: " 一小组", - depId: 8, - userList: [ - { - position: "一小组长", - userName: "小组长", - userId: 8, - }, - { - position: "战士", - userName: "王喜哦", - userId: 12, - }, - { - position: "战士", - userName: "王喜吃", - userId: 13, - }, - ], - }, - { - depName: " 二小组", - depId: 9, - userList: [ - { - position: "二小组长5", - userName: "小组长", - userId: 9, - }, - { - position: "战士", - userName: "王小二", - userId: 10, - }, - { - position: "战士", - userName: "王小三", - userId: 11, - }, - { - position: "战士", - userName: "王小四3", - userId: 12, - }, - { - position: "战士", - userName: "王小五", - userId: 13, - }, - ], - }, - ], - userList: [ - { - position: "云华社区支部书记", - userName: "书记名称", - userId: 5, - }, - ], - }, - ], - }, - ], - }, - ]; -const dc = (v)=>{ - let max = getArrayDepth(data) - if (v.depId===1){ - return 70*max-40 - } - if (v.children.length>0){ - return v.children.length*70-40 - } -} -const lf = (v)=>{ - let max = getArrayDepth(data) - if (v.depId===1){ - return -30*max+20 - } - if (v.children.length>0){ - return -30*v.children.length+20 - } - -} - const renderTree = (list: Array) => { - return ( -
- {list?.map((v, _) => { - if (v.children) { - return ( -
- {v.depId !== 2 ? ( - - {v.depName} - - ) : null} - {v.depId === 1 ? ( -
- {v.userList?.map((v1, _) => { - return ( -
- - {v1.userName} -
- ); - })} -
- ) : ( - v.userList?.map((v1, _) => { - return ( -
- - {v1.userName} -
- ); - }) - )} - {v.depId !== 2 ? ( -
-
-
-
- ) : null} - {renderTree(v.children)} -
- ); - } - return ( -
- {v.userList?.map((v1, _) => { - return ( -
- - {v1.userName} -
- ); - })} -
- ); - })} -
- ); +import OrgChart from "@/components/org/OrgChart"; +import { OrgChartNodeDataType } from "@/components/org"; + +const OrgChartSelf = () => { + const data: OrgChartNodeDataType = { + key: 0, + label: "科技有限公司", + children: [ + { + key: 1, + label: "研发部", + children: [ + { key: 11, label: "开发-前端" }, + { key: 12, label: "开发-后端" }, + { key: 13, label: "UI设计" }, + { key: 14, label: "产品经理" ,}, + ], + }, + { + key: 2, + label: "销售部", + children: [ + { key: 21, label: "销售一部" }, + { key: 22, label: "销售二部" }, + ], + }, + { key: 3, label: "财务部" }, + { key: 4, label: "人事部" }, + ], }; - return
{renderTree(data)}
; + + return ( + <> + + + ); }; -export default OrgChart; +export default OrgChartSelf; + +// import React from 'react'; +// import OrgChart, { + +// OrgChartProps, +// } from '@twp0217/react-org-chart'; + +// import OrgChartNodeDataType from '@twp0217/react-org-chart'; + +// export default () => { +// const data: OrgChartNodeDataType = require('./data.json'); + +// const [direction, setDirection] = +// React.useState('horizontal'); + +// return ( +//
+//
+// +// +//
+// +//
+// ); +// }; diff --git a/src/pages/home/homeLeft/pover.tsx b/src/pages/home/homeLeft/pover.tsx index 5b2032b..49b2456 100644 --- a/src/pages/home/homeLeft/pover.tsx +++ b/src/pages/home/homeLeft/pover.tsx @@ -13,7 +13,7 @@ const Pover = (props: Store) => { var option = { xAxis: { type: "category", - data: data.map((item) => item.dep_name), + data: data.map((item) => item.dep_name), axisLabel: { show: true, interval: 0, @@ -45,11 +45,12 @@ const Pover = (props: Store) => { }; option && myChart.setOption(option); }; - + useEffect(() => { homeStore.getAf().then((res) => { initChart(res?.data?.record); }); + }, [homeStore]); const openPoverHander = () => { setIsModalOpen(true); diff --git a/src/pages/poverDetail/index.tsx b/src/pages/poverDetail/index.tsx index a6af1cc..d45f64e 100644 --- a/src/pages/poverDetail/index.tsx +++ b/src/pages/poverDetail/index.tsx @@ -1,63 +1,68 @@ +import { inject, observer } from "mobx-react"; import "./pvd.less"; -const PoverDetail = () => { +import { Store } from "antd/es/form/interface"; +const PoverDetail = (props:Store) => { + const {usrStore} = props return (
- + - - + + - + - + - + - + - + - + - + - + - + - + - + - + - +
姓名王永平{usrStore.userDetail?.user_name} 性别男所属队伍{usrStore.userDetail?.sex===1?'男':'女'} + +
出生年月2024-09-12{usrStore.userDetail?.sex===1} 贯籍广州{usrStore.userDetail?.porig}
政治面貌中共党员{usrStore.userDetail?.political_affil} 民族汉族{usrStore.userDetail?.eth}
通讯地址四川省成都市双流区{usrStore.userDetail?.mail_addr}
联系电话 13208266337 邮箱wang_yp2023@qq.com{usrStore.userDetail?.email}
学历本科{usrStore.userDetail?.eduLevel} 专业应急消防{usrStore.userDetail?.spec}
服役部队中国人民武装警察部队四川省总队凉山消防支队{usrStore.userDetail?.serv_unit}
工作单位及职务中国人民武装警察部队四川省总队凉山消防支队{usrStore.userDetail?.serv_unit}
立功受奖情况中国人民武装警察部队四川省总队凉山消防支队{usrStore.userDetail?.honors_rec}
专业情况中国人民武装警察部队四川省总队凉山消防支队{usrStore.userDetail?.spec}
个人证书中国人民武装警察部队四川省总队凉山消防支队
@@ -65,4 +70,4 @@ const PoverDetail = () => { ); }; -export default PoverDetail; +export default inject("usrStore")(observer(PoverDetail)); diff --git a/src/pages/poverPage/index.tsx b/src/pages/poverPage/index.tsx index 4d1e08a..137324b 100644 --- a/src/pages/poverPage/index.tsx +++ b/src/pages/poverPage/index.tsx @@ -1,12 +1,15 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import * as echarts from "echarts"; import "./pv.less"; import { SnippetsTwoTone } from "@ant-design/icons"; import { inject, observer } from "mobx-react"; import { Store } from "antd/es/form/interface"; import PvTable from "./pvTable"; -const PoverPage = (props:Store) => { - const initChart = (id: string) => { +import PoverDetail from "../poverDetail"; +const PoverPage = (props: Store) => { + const { usrStore } = props; + const [poverData, setPover] = useState(); + const initChart = (id: string, count: number, total: number) => { var myChart = echarts.init(document.getElementById(id)); var option = { title: { @@ -25,14 +28,13 @@ const PoverPage = (props:Store) => { center: ["50%", "50%"], color: "#000", data: [ - // itemSyle是单项的背景颜色设置。 { - value: 30, + value: count, itemStyle: { color: "#254e99", borderRadius: 100 }, emphasis: { scale: false }, }, { - value: 100, + value: total, itemStyle: { color: "#f5f5f5" }, emphasis: { scale: false }, }, @@ -49,65 +51,70 @@ const PoverPage = (props:Store) => { option && myChart.setOption(option); }; useEffect(() => { - initChart("pover_jg"); - initChart("pover_jgs"); - initChart("pover1"); - initChart("pover2"); - }, []); - + usrStore.getPover().then((e) => { + initChart("pover_jg",e.data.o_type_nums,e.data.total); + initChart("pover_jgs",e.data.o_type_num,e.data.total); + initChart("pover1",e.data.a_member,e.data.total); + initChart("pover2",e.data.p_team,e.data.total); + setPover(e.data); + }); + }, [usrStore]); + return (
-
-
- 机关单位 -
+
+
+ 机关单位 +
-
120人
+
{poverData?.militia_meber}人
基干民兵
-
120人
+
{poverData?.easy_meber}人
普通民兵
-
120人
+
{poverData?.vet_meber}人
退役军人
-
120人
+
{poverData?.c_member}人
社干力量
-
120人
+
{poverData?.o_member}人
三方力量
-
-
+
+
{ + usrStore.setPoverDe(false) + }}>
- 机关单位 + 企事业单位

- 企事业单位 + 积极力量

@@ -116,8 +123,10 @@ const PoverPage = (props:Store) => {
-

双流区黄水镇人民武装部基干民兵力量

- +

+ 双流区黄水镇人民武装部基干民兵力量 +

+ {usrStore.poverDetail? : }
diff --git a/src/pages/poverPage/pvTable.tsx b/src/pages/poverPage/pvTable.tsx index f701c76..f87b09e 100644 --- a/src/pages/poverPage/pvTable.tsx +++ b/src/pages/poverPage/pvTable.tsx @@ -1,4 +1,33 @@ -const PvTable = () => { +import { Store } from "antd/es/form/interface"; +import { inject, observer } from "mobx-react"; +import { useEffect } from "react"; + +const PvTable = (props: Store) => { + const { teamStore, persMgmtStore, usrStore } = props; + useEffect(() => { + teamStore.getlist(); + persMgmtStore.getlist(); + usrStore.getlist(); + + }, [teamStore,persMgmtStore,usrStore]); + const folders = (id,list) => { + let has = false + list.forEach(element => { + if (element.team_identity === id) { + has = true + } + }); + return
{has?'√':'x'}
+ }; + const foldersp = (id,list) => { + let has = false + list.forEach(element => { + if (element.pers_identity === id) { + has = true + } + }); + return
{has?'√':'x'}
+ }; return (
@@ -8,38 +37,45 @@ const PvTable = () => { - - + + - - - - - - - - + {teamStore.list?.map((e) => { + return ; + })} + {persMgmtStore.list?.map((e) => { + return ; + })} - console.log(e)}> - - - - - - - - - - - - - + {usrStore.list?.map((us,i) => { + return ( + { + usrStore.setUserDetaul(us) + usrStore.setPoverDe(true) + }}> + + + + + {teamStore.list?.map((e) => { + return ; + })} + {persMgmtStore.list?.map((e) => { + return ; + })} + + ); + })}
姓名 政治面貌 所属集结点所属队伍个人身份所属队伍个人身份
消防救援灭火处突企事业治保社区退役{e.name}{e.name}
1wang_yp党员杨公社区√√√√√
{i+1}{us.user_name}{us.political_affil}{us.dep_identity}{folders(e.identity,us.team)}{foldersp(e.identity,us.pers)}
); }; -export default PvTable; +export default inject( + "teamStore", + "persMgmtStore", + "usrStore" +)(observer(PvTable)); diff --git a/src/pages/training/task_archives.tsx b/src/pages/training/task_archives.tsx index 3906190..a244183 100644 --- a/src/pages/training/task_archives.tsx +++ b/src/pages/training/task_archives.tsx @@ -62,7 +62,7 @@ const TaskArchives = (props: TaskArchivesProps) => { list: imlist, category_identity: category_identity, }; - let res = await trainingStore?.addAcieves(data); + await trainingStore?.addAcieves(data); message.success("档案已保存到当前文件夹"); }; const handleSelect = async (identity) => { diff --git a/src/router/routers/home_router.tsx b/src/router/routers/home_router.tsx index 2fe7536..121b7ad 100644 --- a/src/router/routers/home_router.tsx +++ b/src/router/routers/home_router.tsx @@ -19,9 +19,9 @@ import Training from "@/pages/training"; import PoverPage from "@/pages/poverPage"; import PoverDetail from "@/pages/poverDetail"; import SystemPage from "@/pages/system"; -import OrgChart from "@/pages/OrgChart"; import ArchiveBox from "@/pages/archives/index_box"; import FileListPage from "@/pages/archives/file_list"; +import OrgChartSelf from "@/pages/OrgChart"; export const homeRouter = [ { path: "/", @@ -40,7 +40,7 @@ export const homeRouter = [ { path: "/admin/orgChart", index: true, - element: , + element: , }, { path: "/admin/poverDetail", diff --git a/src/store/user.ts b/src/store/user.ts index 460aa8c..ba2aee3 100644 --- a/src/store/user.ts +++ b/src/store/user.ts @@ -9,13 +9,16 @@ class UserConfig { static ADD: string = "user" static DELETE: string = "user" static EDIT: string = "user" + static pover: string = "user/userPower" static team: string = "team/list" static per: string = "persMgmt/list" } class UserStore extends BaseStore { _userinfo: UserInfos = {}; // 用户信息 + userDetail = {} isNeedLogin: boolean = false; // 是否需要登录 + poverDetail:boolean = false; // 是否展示民兵详情 constructor() { super(UserConfig) @@ -24,8 +27,12 @@ class UserStore extends BaseStore { login: action, getTeam:action, getPer:action, + setPoverDe:action, + setUserDetaul:action, _userinfo: observable, isNeedLogin: observable, + poverDetail: observable, + userDetail: observable, openLoginDilog: action, userInfo: computed, }) @@ -36,6 +43,9 @@ class UserStore extends BaseStore { async getPer(){ return await baseHttp.get(UserConfig.per, null) } + async getPover(){ + return await baseHttp.get(UserConfig.pover, null) + } get userInfo(): UserInfos { if (!this._userinfo.token) { let token = window.localStorage.getItem("token") @@ -70,6 +80,12 @@ class UserStore extends BaseStore { closeLoginDilog() { this.isNeedLogin = false; } + setPoverDe(status:boolean){ + this.poverDetail = status + } + setUserDetaul(data){ + this.userDetail = data + } } const userStore = new UserStore(); export default userStore; \ No newline at end of file