diff --git a/src/assets/images/V-2504/female.png b/src/assets/images/V-2504/female.png new file mode 100644 index 0000000000000000000000000000000000000000..934b6365e4719e81aec99f845e9e5a291a4eb13a Binary files /dev/null and b/src/assets/images/V-2504/female.png differ diff --git a/src/assets/images/V-2504/femaleActive.png b/src/assets/images/V-2504/femaleActive.png new file mode 100644 index 0000000000000000000000000000000000000000..11f2a3ca7ca8e8defd9949a18b32a54498d0d24b Binary files /dev/null and b/src/assets/images/V-2504/femaleActive.png differ diff --git a/src/assets/images/V-2504/male.png b/src/assets/images/V-2504/male.png new file mode 100644 index 0000000000000000000000000000000000000000..d5282269ee0af17770a22db363cc36c013139b86 Binary files /dev/null and b/src/assets/images/V-2504/male.png differ diff --git a/src/assets/images/V-2504/maleActive.png b/src/assets/images/V-2504/maleActive.png new file mode 100644 index 0000000000000000000000000000000000000000..ed8c487b7b2539c3d1b02e37cf71015427924760 Binary files /dev/null and b/src/assets/images/V-2504/maleActive.png differ diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent.less deleted file mode 100644 index 7770540ff68aa737199bb26b2a430374b2c203fe..0000000000000000000000000000000000000000 --- a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent.less +++ /dev/null @@ -1,42 +0,0 @@ -.container { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} - -.header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 24px; -} - -.content { - flex: 1; - background: rgba(7, 28, 67, 0.5); - border-radius: 12px; - border: 1px solid rgba(24, 144, 255, 0.3); - padding: 20px; - display: flex; - flex-direction: column; - gap: 20px; -} - -.placeholder { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: #fff; - font-size: 24px; - text-align: center; - - p { - margin-top: 20px; - font-size: 16px; - color: rgba(255, 255, 255, 0.7); - } -} \ No newline at end of file diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersAge/index.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersAge/index.less new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersAge/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersAge/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..7fc264b2e5af55b8e1dc190c4cf651178f3e7c81 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersAge/index.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import './index.less' +import HncyCard from '@/pages/Home_v_2504/components/common/Card' + +export default function WorkersAge() { + return ( + + <> + + ) +} diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.less new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..8b1e2868a177ca827cec7a3f595e855b55dc5668 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersArea/index.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import './index.less' +import HncyCard from '@/pages/Home_v_2504/components/common/Card' + +export default function WorkersArea() { + return ( + + <> + + ) +} diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderPieChart/index.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderPieChart/index.less new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderPieChart/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderPieChart/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1ffd869265a7b8d8322b3b562f6398cafe0b8640 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderPieChart/index.tsx @@ -0,0 +1,126 @@ +import React, { useEffect, useRef } from 'react' +import * as echarts from 'echarts'; +import './index.less' + +export default function GenderPieChart() { + + const chartRef = useRef(null); + + useEffect(() => { + if (chartRef.current) { + const myChart = echarts.init(chartRef.current); + + const option = { + // title: { + // // text: `{a|总共}\n{b|${5.8}}{c|万人}`, + // formatter: [ + // '{a|总共}', + // `{b|${5.8}}这段用默认样式{x|万人}` + // ].join('\n'), + // left: 'center', + // top: 'center', + // // textStyle.rich() + // textStyle: { + // a: { + // fontSize: 16, + // fontWeight: 400, + // color: '#BCCEE9', + // }, + // b: { + // fontSize: 24, + // fontWeight: 700, + // color: '#FFFFFF' + // }, + // c: { + // fontSize: 14, + // fontWeight: 400, + // color: '#BCCEE9', + // } + // } + // }, + label: { + formatter: [ + '{a|总共}', + `{b|${5.8}}{x|万人}` + ].join('\n'), + rich: { + a: { + fontFamily: '微软雅黑', + fontSize: 16, + fontWeight: 400, + color: '#BCCEE9', + }, + b: { + fontFamily: 'D-DIN', + fontSize: 24, + fontWeight: 700, + color: '#FFFFFF', + padding: [8, 8, 0, 0] + }, + x: { + fontFamily: '微软雅黑', + fontSize: 14, + fontWeight: 400, + color: '#BCCEE9', + padding: [10, 0, 0, 0] + }, + } + }, + series: [ + + { + type: 'pie', + radius: ['65%', '70%'], + padAngle: 1, + silent: true, // 禁用交互 + itemStyle: { + borderRadius: 0 + }, + label: { + show: true, + position: 'center' + }, + labelLine: { + show: false + }, + data: [ + { value: 1048, name: 'Search Engine', itemStyle: { color: '#26D5FF' } }, + { value: 735, name: 'Direct', itemStyle: { color: '#FF9155' } } + ] + }, + { + type: 'pie', + radius: ['45%', '70%'], + padAngle: 1, + silent: true, // 禁用交互 + label: { + show: false, + position: 'center' + }, + labelLine: { + show: false + }, + data: [ + { + value: 1048, + name: 'Search Engine', + itemStyle: { color: 'rgb(38, 213, 255, .2)' } + }, + { + value: 735, + name: 'Direct', + itemStyle: { color: 'rgb(255, 145, 85, .2)' } + } + ] + } + ] + }; + myChart.setOption(option); + } + }, []); + + + return ( +
+ ) +} diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderProportion/index.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderProportion/index.less new file mode 100644 index 0000000000000000000000000000000000000000..fd9d52ed2c6b947efc643ea7cdc07919187e3602 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderProportion/index.less @@ -0,0 +1,15 @@ +.percentage { + display: flex; + align-items: center; + gap: 6px; + margin-top: 15px; + margin-bottom: 11px; + + .male, + .female { + img { + width: 10px; + height: 25px; + } + } +} \ No newline at end of file diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderProportion/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderProportion/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..77268a0746bf76d36bc5232373837c8c356b0a37 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/components/GenderProportion/index.tsx @@ -0,0 +1,85 @@ +import React, { useMemo } from 'react' +import DescriptionItem from '@/components/DescriptionItem' +import male from '@/assets/images/V-2504/male.png' +import female from '@/assets/images/V-2504/female.png' +import maleActive from '@/assets/images/V-2504/maleActive.png' +import femaleActive from '@/assets/images/V-2504/femaleActive.png' +import './index.less' + +type GenderProportionProps = { + value: number, + percentage: number, + type: 'male' | 'female' +} + +export default function GenderProportion({ + value, + percentage, + type +}: GenderProportionProps) { + + const activeNums = useMemo(() => { + return Math.ceil(percentage / 100 * 7) + }, [percentage]) + + + return ( +
+ +
+ {/* 根据activeNums 和 type 类型，渲染高亮的 maleActive 或者 femaleActive 的图片数量 */} + { + Array.from({ length: 7 }).map((_, index) => { + return ( +
+ { + index < activeNums ? ( + + ) : ( + + ) + } +
+ ) + }) + } +
+ +
+ ) +} diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/index.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/index.less new file mode 100644 index 0000000000000000000000000000000000000000..8530073bba0274b71e3bf2cf47d813e8114454c7 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/index.less @@ -0,0 +1,34 @@ + + +.gender-wrapper { + display: flex; + align-items: center; + gap: 13px; + padding-right: 26px; + + div { + display: flex; + align-items: center; + gap: 8px; + + .dot { + width: 12px; + height: 12px; + border-radius: 50%; + } + + .blue { + background-image: linear-gradient(to bottom, #33FFDC, #0095FF); + } + + .yellow { + background-image: linear-gradient(to bottom, #FF9494, #FFCC7A); + } + } +} + +.children { + display: flex; + align-items: center; + gap: 34px; +} \ No newline at end of file diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..f606f137ee4b06239227d91578ae21f1b249a916 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersGender/index.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import './index.less' +import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs' +import HncyCard from '@/pages/Home_v_2504/components/common/Card' +import GenderProportion from './components/GenderProportion' +import GenderPieChart from './components/GenderPieChart' + +export default function WorkersGender() { + return ( + +
+
+ 男 +
+
+
+ 女 +
+
+ } + > +
+
+ +
+
+ +
+
+ +
+
+ + ) +} diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersType/index.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersType/index.less new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersType/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersType/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..3ca3950b0a0fc5b3e1c3782fabebd5f9af446544 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/components/WorkersType/index.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import './index.less' +import HncyCard from '@/pages/Home_v_2504/components/common/Card' + +export default function WorkersType() { + return ( + + <> + + ) +} diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.less new file mode 100644 index 0000000000000000000000000000000000000000..b06b11c10131c0e1b0575a63174f38676f362577 --- /dev/null +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.less @@ -0,0 +1,25 @@ +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background: rgba(7, 28, 67, 0.5); +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + // margin-bottom: 24px; +} + +.content { + // flex: 1; + border-radius: 12px; + // border: 1px solid rgba(24, 144, 255, 0.3); + padding: 15px; + display: flex; + flex-wrap: wrap; + // flex-direction: column; + gap: 15px; +} \ No newline at end of file diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.tsx similarity index 66% rename from src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent.tsx rename to src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.tsx index 61e33089ea628979edfd8e85553a6dad8a8aab95..31399f66edaedb6a68fcb57c55b63e6af06d0bbf 100644 --- a/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent.tsx +++ b/src/pages/Home_v_2504/components/SubPages/Environment/components/LeftContent/index.tsx @@ -1,7 +1,11 @@ import React from 'react'; import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle'; import DateSelector from '@/components/V2504/DateSelector'; -import styles from './LeftContent.less'; +import styles from './index.less'; +import WorkersGender from './components/WorkersGender'; +import WorkersType from './components/WorkersType'; +import WorkersArea from './components/WorkersArea'; +import WorkersAge from './components/WorkersAge'; /** * 环卫行业子页面 - 左侧内容组件 @@ -17,19 +21,19 @@ const LeftContent: React.FC = () => {
{/* 标题 */}
- - + {/* + /> */}
-
- 环卫行业左侧内容 -

这是一个示例组件，实际使用时需要根据业务需求实现

-
+ + + +
); diff --git a/src/pages/Home_v_2504/components/SubPages/Environment/index.tsx b/src/pages/Home_v_2504/components/SubPages/Environment/index.tsx index 741c63188ca58c0fc6b2c702588ca5a37e888b71..bfc7f56e32c6c3809d3ebee0e883fec3b9241839 100644 --- a/src/pages/Home_v_2504/components/SubPages/Environment/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/Environment/index.tsx @@ -3,7 +3,7 @@ import SubPageTemplate from '../SubPageTemplate'; import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes'; // 引入业务组件 -import LeftContent from './components/LeftContent'; +import LeftContent from './components/LeftContent/LeftContent'; import RightContent from './components/RightContent'; interface EnvironmentProps { diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx index 761c61e76e3f974a6b2409074bff74fd3733187c..b50291622dd9173c840972817422e5f6a6a8b372 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; import SubPageTemplate from '../SubPageTemplate'; import RightContent from './components/RightContent'; -import LeftContent from './components/LeftContent'; +// import LeftContent from './components/LeftContent'; +import LeftContent from '../Environment/components/LeftContent'; import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes'; interface RestaurantOilProps { diff --git a/src/pages/Home_v_2504/components/common/Card/index.less b/src/pages/Home_v_2504/components/common/Card/index.less new file mode 100644 index 0000000000000000000000000000000000000000..c325758e334822c77bde3afd57bc2bc5bbe5b8b8 --- /dev/null +++ b/src/pages/Home_v_2504/components/common/Card/index.less @@ -0,0 +1,11 @@ +.workers-wrapper { + width: 530px; + min-height: 192px; + background: linear-gradient(180.00deg, rgba(77, 107, 178, 0.3), rgba(8, 153, 255, 0.01) 100%); + border-radius: 15px; +} + +.content { + height: calc(100% - 52px); + padding: 0px 36px 20px 36px; +} \ No newline at end of file diff --git a/src/pages/Home_v_2504/components/common/Card/index.tsx b/src/pages/Home_v_2504/components/common/Card/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..8d61a0478069a88c56fca5b7ab732d92908b1a11 --- /dev/null +++ b/src/pages/Home_v_2504/components/common/Card/index.tsx @@ -0,0 +1,34 @@ +import React, { Children, CSSProperties, ReactNode } from 'react' +import './index.less' +import ModuleTitleWithTabs from '../ModuleTitleWithTabs' + +type CardProps ={ + title: string, + extra?: ReactNode, + children: ReactNode, + style?: CSSProperties +} +export default function HncyCard({ + title, + extra, + children, + style +}: CardProps) { + return ( +
+
+ + {extra} +
+
+ {children} +
+
+ ) +}