From 02b0262560feb2558e0f93526eac5e08f67f9d4e Mon Sep 17 00:00:00 2001 From: Qingtian239113 <980287353@qq.com> Date: Wed, 30 Mar 2022 16:03:44 +0800 Subject: [PATCH] =?UTF-8?q?pref=EF=BC=9A=E4=BC=98=E5=8C=96=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/imgs/titleBorder3.png | Bin 0 -> 7634 bytes public/imgs/titleBorder4.png | Bin 0 -> 7086 bytes src/components/RightPage/BarChart/index.jsx | 44 +++++---- .../RightPage/ColumnChart/index.jsx | 31 ++++--- src/components/RightPage/PieChart/index.jsx | 5 +- src/components/RightPage/index.jsx | 87 ++++++++---------- src/components/RightPage/index.less | 76 ++++++--------- src/pages/index.jsx | 15 +-- 8 files changed, 110 insertions(+), 148 deletions(-) create mode 100644 public/imgs/titleBorder3.png create mode 100644 public/imgs/titleBorder4.png diff --git a/public/imgs/titleBorder3.png b/public/imgs/titleBorder3.png new file mode 100644 index 0000000000000000000000000000000000000000..8d40f7ec109a4b8c12d56d7aea7a375bd7a618fb GIT binary patch literal 7634 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 Aa{vGU literal 0 HcmV?d00001 diff --git a/public/imgs/titleBorder4.png b/public/imgs/titleBorder4.png new file mode 100644 index 0000000000000000000000000000000000000000..51dc6e17163d916a6cd1e0b7db647d3e0ac8d155 GIT binary patch literal 7086 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 { +const DemoBar = ({requestDate, onClick}) => { - - const [list,setList] = useState([]) + const [list, setList] = useState([]) const pieRef = useRef(); - useEffect(()=>{ + useEffect(() => { getCollegeCount() clickPie(pieRef?.current?.getChart()) - },[requestDate]) + }, [requestDate]) const getCollegeCount = () => { - rightPageApi.collegeCount(requestDate.format("YYYY-MM-DD")).then(res=>{ - if(res.code == 200){ + rightPageApi.collegeCount(requestDate.format("YYYY-MM-DD")).then(res => { + if (res.code == 200) { setList(res.data.map(it => { - return {collegeName:it.collegeName.substr(0,10), sales: parseInt(it.count,10),collegeNo:it.collegeNo} + return {collegeName: it.collegeName.substr(0, 10), sales: parseInt(it.count, 10), collegeNo: it.collegeNo} })) } }) @@ -28,7 +27,7 @@ const DemoBar = ({requestDate,onClick}) => { const clickPie = (plot) => { plot.off("plot:click"); plot.on('plot:click', (...args) => { - onClick && onClick(args[0]?.data?.data,requestDate.format('YYYY-MM')) + onClick && onClick(args[0]?.data?.data, requestDate.format('YYYY-MM')) }) } @@ -38,20 +37,21 @@ const DemoBar = ({requestDate,onClick}) => { xField: 'sales', yField: 'collegeName', color: '#3B90FF', - xAxis:{ - label:{ - style:{ - fill:'#F2F2F2' + autoFit: true, + xAxis: { + label: { + style: { + fill: '#F2F2F2' } } }, barStyle: { fill: 'l(180) 0:#3B90FF 1:rgba(47, 253, 239, 0)', }, - yAxis:{ - label:{ - style:{ - fill:'#F2F2F2' + yAxis: { + label: { + style: { + fill: '#F2F2F2' } } }, @@ -62,14 +62,12 @@ const DemoBar = ({requestDate,onClick}) => { sales: { alias: '违规总数', }, - no:{ - alias:'编号' + no: { + alias: '编号' } }, - minBarWidth: 25, - maxBarWidth: 25, }; - return ; + return ; }; export default DemoBar diff --git a/src/components/RightPage/ColumnChart/index.jsx b/src/components/RightPage/ColumnChart/index.jsx index 927f6bd..eacf4fa 100644 --- a/src/components/RightPage/ColumnChart/index.jsx +++ b/src/components/RightPage/ColumnChart/index.jsx @@ -1,21 +1,21 @@ import rightPageApi from "@/https/apis/rightPageApi"; -import {useEffect, useState} from "react"; +import React, {useEffect, useState} from "react"; -const { Column } = window.charts; +const {Column} = window.charts; const DemoColumn = ({onClick}) => { - const [dataCount,setDataCount] = useState([]) + const [dataCount, setDataCount] = useState([]) - useEffect(()=>{ + useEffect(() => { getSevenCount() - },[]) + }, []) const getSevenCount = () => { - rightPageApi.sevenCount().then(res=>{ - if(res.code == 200){ - setDataCount(res.data.map(it=>{ - return {type:it.week.substr(5,5),sales:parseInt(it.count,10)} + rightPageApi.sevenCount().then(res => { + if (res.code == 200) { + setDataCount(res.data.map(it => { + return {type: it.week.substr(5, 5), sales: parseInt(it.count, 10)} })) } }) @@ -33,6 +33,7 @@ const DemoColumn = ({onClick}) => { xField: 'type', yField: 'sales', color: '#4AE7E0', + autoFit: true, label: { // 可手动配置 label 数据标签位置 position: 'middle', @@ -43,7 +44,7 @@ const DemoColumn = ({onClick}) => { }, }, xAxis: { - name:'type', + name: 'type', label: { autoHide: true, autoRotate: false, @@ -55,10 +56,10 @@ const DemoColumn = ({onClick}) => { barStyle: { fill: 'red', }, - yAxis:{ - label:{ - style:{ - fill:'#F2F2F2' + yAxis: { + label: { + style: { + fill: '#F2F2F2' } } }, @@ -71,7 +72,7 @@ const DemoColumn = ({onClick}) => { }, }, }; - return ; + return ; }; export default DemoColumn diff --git a/src/components/RightPage/PieChart/index.jsx b/src/components/RightPage/PieChart/index.jsx index cdbe4c4..5584f2e 100644 --- a/src/components/RightPage/PieChart/index.jsx +++ b/src/components/RightPage/PieChart/index.jsx @@ -1,5 +1,5 @@ import rightPageApi from "@/https/apis/rightPageApi"; -import {useEffect, useState} from "react"; +import React, {useEffect, useState} from "react"; const {Pie, G2} = window.charts; const G = G2.getEngine('canvas'); @@ -10,6 +10,7 @@ const cfg = { colorField: 'type', radius: 0.75, legend: false, + autoFit: true, label: { type: 'spider', labelHeight: 40, @@ -76,7 +77,7 @@ const DemoPie = ({onClick}) => { }) } - return ; + return ; }; export default DemoPie diff --git a/src/components/RightPage/index.jsx b/src/components/RightPage/index.jsx index 3427adb..cdca04f 100644 --- a/src/components/RightPage/index.jsx +++ b/src/components/RightPage/index.jsx @@ -1,12 +1,13 @@ -import React, {useEffect, useState} from "react"; +import React, {useState} from "react"; import style from './index.less' import BarChart from './BarChart' import ColumnChart from './ColumnChart' import PieChart from './PieChart' import dayjs from "dayjs"; import Flex from "@/components/Flex"; +import TitleView from "@/components/TitleView"; -const monthList = [] +const monthList = []; for (let i = 1; i < 13; i++) { monthList.push({ name: i + '月', @@ -16,57 +17,45 @@ for (let i = 1; i < 13; i++) { const rightPage = ({onPieClick}) => { - const [dateNum, setDate] = useState(dayjs()) - const [copyDate, setCopyDate] = useState(dayjs()) - const [dataBoxVisible, setDataBoxVisible] = useState(false) - - const {middle_box, bottom_box, title_box} = style; - + const [copyDate, setCopyDate] = useState(dayjs()); + const [dataBoxVisible, setDataBoxVisible] = useState(false); ///////////////////////////////////////// 页面渲染 return -
-
- - 学院违章排行 -
setDataBoxVisible(!dataBoxVisible)} className={style.time_box}>{copyDate.format("YYYY-MM")} -
-
-
-
-
-
- - 车辆违规统计 -
-
onPieClick(args)}/>
-
-
onPieClick(args)}/>
- { - dataBoxVisible &&
-
- setDate(dateNum.add(-1, 'year'))}>« - {dateNum.format('YYYY')} - setDate(dateNum.add(1, 'year'))}>» -
-
- { - monthList.map(it => { - return
{ - setDataBoxVisible(false) - setCopyDate(dayjs(dateNum.format("YYYY-") + it.value + "-01")); - }} key={it.value}>{it.name}
- }) - } -
-
- } + + + + setDataBoxVisible(!dataBoxVisible)} + >{copyDate.format("YYYY-MM")} + + } + /> + + + + + + + + + + onPieClick(args)}/> + + + + + onPieClick(args)}/> + + -} +}; export default rightPage diff --git a/src/components/RightPage/index.less b/src/components/RightPage/index.less index 1add0a7..6eb6bc8 100644 --- a/src/components/RightPage/index.less +++ b/src/components/RightPage/index.less @@ -1,72 +1,53 @@ .container { - width: 400px; - height: 100%; - color:#fff; - font-size:16px; - background-color: rgba(0,0,0,0.1); + width: 440px; + height: 100vh; + color: #fff; + padding: 20px; + font-size: 16px; + background-color: rgba(0, 0, 0, 0.1); .top_box { width: 100%; - height: 35%; - padding: 18px; + height: 0; + margin-bottom: 20px; - .title_box { - position: relative; - height:18%; - overflow: hidden; + .time_box { + text-align: center; + padding: 1px 8px 1.5px 8px; + font-size: 16px; + transform: translateY(10px); + background-size: 100%; + background: url("../../assets/time_box.png") no-repeat; + cursor: pointer; - .time_box { - text-align: center; - position: absolute; - right: 15px; - padding: 1px 8px 1.5px 8px; - font-size: 16px; - overflow: hidden; - transform: translateY(10px); - background-size: 100%; - background: url("../../assets/time_box.png") no-repeat; - cursor: pointer; - &:hover { - background-color: rgba(169,169,169,.2); - transition: all 0.2s; - } + &:hover { + background-color: rgba(169, 169, 169, .2); + transition: all 0.2s; } } } + .middle_box { position: relative; width: 100%; - height: 35%; - padding: 18px; - //background-color: white; + height: 0; + margin-bottom: 20px; .title_box { position: relative; - height:18%; + height: 18%; .time_box { position: absolute; - width:80px; - height:30px; + width: 80px; + height: 30px; transform: translateY(10px); } - - } - - .middle_box { - height: 20%; - background-color: chocolate; } - //background-color: saddlebrown; } - .bottom_box { - width: 100%; - height: 30%; - //background-color: crimson; - padding: 18px; - } + @keyframes fadeInDown { 0% { -webkit-transform: matrix3d(.7, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); @@ -173,12 +154,13 @@ } } + .dataBox { top: 58px; right: 32px; position: absolute; width: 250px; - background-color: rgba(0,0,0,.9); + background-color: rgba(0, 0, 0, .9); border-radius: 15px; animation: fadeInDown .3s; @@ -189,6 +171,7 @@ margin: 10px 0; border-bottom: 1px solid grey; } + .data_body { display: flex; flex-wrap: wrap; @@ -203,6 +186,7 @@ line-height: 40px; cursor: pointer; vertical-align: center; + &:hover { color: black; background-color: grey; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index a23ba9b..2353cb6 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,21 +1,13 @@ -import React, {useRef, useState} from "react"; +import React from "react"; import less from './index.less' import LeftPage from '../components/LeftPage' import RightPage from '../components/RightPage' -import MiddlePage from '../components/MiddlePage' -import {BorderBox6} from "@jiaminghi/data-view-react"; -import CarModalPage from "@/components/CarModalPage"; -import ModalPage from "@/components/UserModalPage"; import Flex from "@/components/Flex"; -const width = 2120, height = 1295; const bgUrl = window.sessionStorage.getItem('core_3d_map_bg'); export default () => { - const carModalPageRef = useRef(); - - ///////////////////////////////////////// 页面渲染 return @@ -26,10 +18,7 @@ export default () => { - - - - +