diff --git a/src/assets/images/administPunish/star1.png b/src/assets/images/administPunish/star1.png new file mode 100644 index 0000000000000000000000000000000000000000..47afc2c6f55a7aa820e25389878a69321ba6d664 Binary files /dev/null and b/src/assets/images/administPunish/star1.png differ diff --git a/src/assets/images/administPunish/star2.png b/src/assets/images/administPunish/star2.png new file mode 100644 index 0000000000000000000000000000000000000000..4804da6c174e53915dbe8e0e8d587202fd44286d Binary files /dev/null and b/src/assets/images/administPunish/star2.png differ diff --git a/src/assets/images/administPunish/star3.png b/src/assets/images/administPunish/star3.png new file mode 100644 index 0000000000000000000000000000000000000000..185055c3e76d43e86dba56c4138663ff541948c6 Binary files /dev/null and b/src/assets/images/administPunish/star3.png differ diff --git a/src/assets/images/administPunish/starBg1.png b/src/assets/images/administPunish/starBg1.png new file mode 100644 index 0000000000000000000000000000000000000000..4867cc6024989e1d4abbbbe51c76d0d8b865f8da Binary files /dev/null and b/src/assets/images/administPunish/starBg1.png differ diff --git a/src/assets/images/administPunish/starBg2.png b/src/assets/images/administPunish/starBg2.png new file mode 100644 index 0000000000000000000000000000000000000000..72da12e08508da3693e7700d5f3386239ed591d8 Binary files /dev/null and b/src/assets/images/administPunish/starBg2.png differ diff --git a/src/assets/images/administPunish/starBg3.png b/src/assets/images/administPunish/starBg3.png new file mode 100644 index 0000000000000000000000000000000000000000..fbf547833f56911c89f70249e907f82adc55c157 Binary files /dev/null and b/src/assets/images/administPunish/starBg3.png differ diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/index.less b/src/pages/GlobalModalServices/modals/AdministPunish/index.less index 6751b54c39d5f52fa01c8ca1825ccd23ad46d921..014fa280f78b18cf11d07ea3c09325b5e001a501 100644 --- a/src/pages/GlobalModalServices/modals/AdministPunish/index.less +++ b/src/pages/GlobalModalServices/modals/AdministPunish/index.less @@ -25,7 +25,7 @@ .content { margin-top: 10px; - .item { + .itemS { display: flex; justify-content: space-between; height: 90px; diff --git a/src/pages/GlobalModalServices/modals/AdministPunish/index.tsx b/src/pages/GlobalModalServices/modals/AdministPunish/index.tsx index 38d666c53387c27dcbfa131f5122f4929e35147f..0447c16c4c6eabdcc542f19ba51f0ea6bb5abb9c 100644 --- a/src/pages/GlobalModalServices/modals/AdministPunish/index.tsx +++ b/src/pages/GlobalModalServices/modals/AdministPunish/index.tsx @@ -56,7 +56,7 @@ const AdministPunish = () => {
总体情况
{ dispatch.push('AdministPunishList', { headerLeft: () => { @@ -103,7 +103,7 @@ const AdministPunish = () => {
{ dispatch.push('AdministPunishList', { diff --git a/src/pages/GlobalModalServices/modals/AreaSynergy/TimeLineCharts/index.tsx b/src/pages/GlobalModalServices/modals/AreaSynergy/TimeLineCharts/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..f006fd83c85d46e462159b323d5709e5d3abbcb4 --- /dev/null +++ b/src/pages/GlobalModalServices/modals/AreaSynergy/TimeLineCharts/index.tsx @@ -0,0 +1,76 @@ +import { CSSProperties, useMemo } from 'react' +import ReactEcharts from 'echarts-for-react'; +const LineCharts = ({ data,style }: { data: any[],style:CSSProperties }) => { + + const option = useMemo(() => { + const chartData: any = [60, 50, 60, 70, 50, 70, 50, 60, 70, 50, 80, 50, 60, 70, 50, 60, 50, 60, 70, 50] + const showXAis = true + return { + xAxis: { + type: 'category', + boundaryGap: false, + show: showXAis, + data: showXAis ? data?.map(item => item.name) : [], + axisLabel: { + color: '#CBEDFF', + interval: 3 // 设置为0以显示所有坐标点 + }, + axisLine: { + show: false, + }, + }, + yAxis: { + type: 'value', + show: false, + }, + grid: { + left: '0', // 左边距 + right: '0', // 右边距 + top: '0', // 上边距 + bottom: '0' // 下边距 + }, + series: [ + { + data: chartData, + symbol: "none", + type: 'line', + lineStyle: { + color: "#f0c85e", + }, + + // areaStyle: { + // // 区域填充样式。设置后显示成区域面积图。 + // color: { + // type: 'linear', + // x: 0, + // y: 1, + // x2: 0, + // y2: 0.2, + // colorStops: [ + // { + // offset: 0, + // color: 'rgba(87, 239, 229, 0)', // 0% 处的颜色 + // }, + + // { + // offset: 1, + // color: 'rgba(87, 239, 229, 0.4)', // 100% 处的颜色 + // }, + // ], + // global: false, // 缺省为 false + // }, + // }, + }, + ], + } + }, [data]) + + return ( + + ) +} + +export default LineCharts \ No newline at end of file diff --git a/src/pages/GlobalModalServices/modals/AreaSynergy/index.less b/src/pages/GlobalModalServices/modals/AreaSynergy/index.less index cebc3a3414c0ba753b7e80d88cf3621c81368462..2a1f70247e432f13c68fd3931b10eb08f6ce5082 100644 --- a/src/pages/GlobalModalServices/modals/AreaSynergy/index.less +++ b/src/pages/GlobalModalServices/modals/AreaSynergy/index.less @@ -2,7 +2,240 @@ width: 100%; height: 695px; + display: flex; + justify-content: space-between; + .leftWarp { + width: 569px; - + .dispose { + width: 569px; + height: 157px; + background-color: rgba(57, 122, 183, 0.2); + + border-radius: 20px; + padding: 20px; + + .title { + font-size: 22px; + color: rgb(203, 237, 255); + + display: flex; + justify-content: space-between; + + .tLeft { + font-family: '钉钉进步体'; + + .count { + color: rgb(255, 255, 255); + margin-left: 10px; + margin-right: 5px; + } + } + + .tRignt { + color: rgb(188, 206, 233); + font-size: 16px; + + .count { + color: rgb(29, 187, 138); + font-size: 18px; + font-weight: 700; + } + } + } + } + + .scoreType { + width: 569px; + height: 377px; + background-color: rgba(57, 122, 183, 0.2); + margin-top: 20px; + border-radius: 20px; + padding: 20px; + + .title { + font-size: 22px; + color: rgb(203, 237, 255); + font-family: '钉钉进步体'; + display: flex; + justify-content: space-between; + align-items: center; + } + } + + .timeFrame { + width: 569px; + height: 147px; + background-color: rgba(57, 122, 183, 0.2); + margin-top: 20px; + border-radius: 20px; + padding: 20px; + + .title { + font-size: 22px; + color: rgb(203, 237, 255); + + font-family: '钉钉进步体'; + + } + } + } + + .rightWarp { + width: 731px; + + .top3 { + width: 731px; + height: 244px; + background-color: rgba(57, 122, 183, 0.2); + + border-radius: 20px; + padding: 20px; + + .title { + font-size: 22px; + color: rgb(203, 237, 255); + + font-family: '钉钉进步体'; + } + + .content { + display: flex; + justify-content: space-between; + width: 100%; + height: 160px; + align-items: flex-end; + + .starItem { + width: 215px; + height: 130px; + border-radius: 22px; + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + padding: 0 17px 29px 22px; + + .img { + width: 50px; + height: 65px; + position: absolute; + left: 39%; + top: -25px; + } + + .info { + display: flex; + align-items: center; + + .name { + font-size: 24px; + color: rgb(255, 255, 255); + font-weight: 700; + } + + .count { + font-size: 26px; + color: rgb(89, 238, 255); + font-weight: 700; + margin-left: 8px; + margin-right: 8px; + } + + .unit { + color: rgb(188, 206, 233); + font-size: 18px; + line-height: 1.1; + } + } + + .works { + color: rgb(153, 193, 233); + } + } + } + } + + .areaTop5 { + width: 731px; + height: 460px; + background-color: rgba(57, 122, 183, 0.2); + border-radius: 20px; + padding: 20px; + margin-top: 20px; + + .tabs { + display: flex; + color: rgb(255, 255, 255); + font-size: 22px; + font-family: '钉钉进步体'; + cursor: pointer; + } + } + } + + .content { + margin-top: 10px; + height: 280px; + overflow: auto; + + } + + .litsItem { + margin-bottom: 18px; + + &:last-child { + margin-bottom: 0px; + } + } + + .name { + color: rgb(228, 237, 255); + font-family: 微软雅黑; + font-size: 20px; + font-weight: 400; + line-height: 1; + } + + .num { + :first-child { + color: rgb(89, 238, 255); + font-family: D-DIN; + font-size: 26px; + font-weight: 700; + line-height: 1; + } + + :last-child { + color: rgb(228, 237, 255); + font-size: 18px; + line-height: 1; + } + } + + .rankIng { + background-color: rgba(221, 221, 221, 0.4); + color: rgb(255, 255, 255); + display: flex; + align-items: center; + justify-content: center; + padding: 6px 10px; + border-radius: 50px; + } + + .proportion { + background: #009dff48; + border-radius: 50px; + padding: 3px 10px; + display: flex; + align-items: center; + justify-content: center; + width: 52px; + } + .tableUnit{ + color: rgb(188, 206, 233); + font-size: 14px; + margin-left: 5px; + } } \ No newline at end of file diff --git a/src/pages/GlobalModalServices/modals/AreaSynergy/index.tsx b/src/pages/GlobalModalServices/modals/AreaSynergy/index.tsx index 8c3e0f722316df81175d413a92cef594d78e5be4..9aa4698bf9ccfe6a75ba442a3c0a47c8046904fe 100644 --- a/src/pages/GlobalModalServices/modals/AreaSynergy/index.tsx +++ b/src/pages/GlobalModalServices/modals/AreaSynergy/index.tsx @@ -1,30 +1,418 @@ -import DescriptionItem from '@/components/DescriptionItem'; -import PieChart from '@/components/PieChart'; +import BlueTable from '@/components/BlueTable'; import Tabs from '@/components/Tabs'; import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; import { Flex, Progress, Space } from 'antd'; -import { memo, useMemo } from 'react'; +import { memo, useMemo, useState } from 'react'; import { useGlobalModalServices } from '../../provider'; -import styles from './index.less'; import LineCharts from '../AdministPunish/LineCharts'; +import styles from './index.less'; +import TimeLineCharts from './TimeLineCharts'; /**行政处罚modal */ const AreaSynergy = () => { const { dispatch } = useGlobalModalServices(); - const commonValueStyle = { - background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)', - WebkitBackgroundClip: 'text', - WebkitTextFillColor: 'transparent', - fontFamily: 'D-DIN', - fontSize: '36px', - fontWeight: 700, - lineHeight: 1.1, - }; - - + const [activeKey, setActiveKey] = useState('1'); + const tp3List = useMemo(() => { + return [ + { + key: '2', + name: '李守勇', + count: 12, + works: '西安路街道城管执法中队', + bg: require('@/assets/images/administPunish/starBg2.png'), + icon: require('@/assets/images/administPunish/star2.png'), + }, + { + key: '1', + name: '李守勇', + count: 12, + works: '西安路街道城管执法中队', + bg: require('@/assets/images/administPunish/starBg1.png'), + icon: require('@/assets/images/administPunish/star1.png'), + }, + { + key: '3', + name: '李守勇', + count: 12, + works: '西安路街道城管执法中队', + bg: require('@/assets/images/administPunish/starBg3.png'), + icon: require('@/assets/images/administPunish/star3.png'), + }, + ]; + }, []); + const top5Items = [ + { + key: '1', + label: '区域排行榜TOP5', + }, + { + key: '2', + label: '部门排行榜TOP5', + }, + ]; return (
- +
+
+
+
+ 巡查处置问题总数 + 4672 + 件 +
+
+ 环比 + + + + + 0.25 + % +
+
+ +
+ +
+
+ 高发类型TOP5 + {}} + itemkey={'key'} + items={[ + { + key: 'mainClass', + label: '大类', + }, + { + key: 'subClass', + label: '小类', + }, + ]} + /> +
+ +
+ {[{ percent: 80, value: 20, name: '高新区' }].map((item, index) => { + return ( +
+ +
{item.name}
+ +
+ {item?.value} + 件 +
+
+ {Number(item?.percent ?? 0).toFixed(2)} + % +
+ + + + +
+ ); + })} +
+
+ +
+
高发时段分析
+ +
+
+
+
+
工作之星
+
+ {tp3List?.map((item) => { + return ( +
+ +
+ {item.name} + {item.count} + 件 +
+
{item.works}
+
+ ); + })} +
+
+
+
+ {top5Items?.map((item) => { + return ( +
{ + setActiveKey(item.key); + }} + style={{ + marginRight: 10, + color: + activeKey === item.key + ? 'rgb(255, 255, 255)' + : 'rgb(119, 168, 194)', + }} + > + {item.label} +
+ ); + })} +
+ {}} + itemkey={'key'} + items={[ + { + key: 'mainClass', + label: '全部', + }, + { + key: 'subClass', + label: '中心城区', + }, + { + key: '1', + label: '城市新区', + }, + { + key: '2', + label: '郊区新城', + }, + ]} + /> + {activeKey === '1' ? ( +
+ { + return ( +
TOP{index + 1}
+ ); + }, + }, + { + title: '区域', + dataIndex: 'area', + key: 'area', + width: 150, + ellipsis: true, + }, + { + title: '占比', + dataIndex: 'zb', + key: 'zb', + width: 120, + ellipsis: true, + render: () => { + return
20%
; + }, + }, + { + title: '巡查处置问题数', + dataIndex: 'total', + key: 'total', + width: 200, + ellipsis: true, + render: () => { + return ( +
+ 16件 +
+ ); + }, + }, + ]} + pagination={false} + /> +
+ ) : ( +
+ { + return ( +
TOP{index + 1}
+ ); + }, + }, + { + title: '上报部门', + dataIndex: 'area', + key: 'area', + width: 250, + ellipsis: true, + }, + { + title: '所属区域', + dataIndex: 'area', + key: 'area', + width: 100, + ellipsis: true, + }, + { + title: '占比', + dataIndex: 'zb', + key: 'zb', + width: 100, + ellipsis: true, + render: () => { + return
20%
; + }, + }, + { + title: '巡查处置问题数', + dataIndex: 'total', + key: 'total', + width: 100, + ellipsis: true, + render: () => { + return ( +
+ 16件 +
+ ); + }, + }, + ]} + pagination={false} + /> +
+ )} +
+
); }; diff --git a/src/pages/GlobalModalServices/registry.tsx b/src/pages/GlobalModalServices/registry.tsx index a20c66b8a422afde3b7b2acc6637ce9e2d6f2b29..d09410c506bb0597e5a779e662d1c26ab638e6d2 100644 --- a/src/pages/GlobalModalServices/registry.tsx +++ b/src/pages/GlobalModalServices/registry.tsx @@ -101,7 +101,7 @@ const Registry = { }, AreaSynergy: { defaultConfig: { - w: 1480, + w: 1380, h: 858, title: '日常巡查', }, diff --git a/src/utils/request.tsx b/src/utils/request.tsx index 7df39dadffb8f037650e4268efcc0d9c7dc40394..342616a4f87e3b129af242f3feb02858a5b0ec26 100644 --- a/src/utils/request.tsx +++ b/src/utils/request.tsx @@ -1,6 +1,7 @@ import { message } from '@/layouts/messageStore'; import type { RequestConfig } from '@umijs/max'; import { getCookie } from './cookie'; +import { handleLogout } from './loginUtil/SSO'; export const codeMessage: Record = { 200: '服务器成功返回请求的数据。',