tieshengkeji/template-visual
1
0
Fork 0
Code Pull Requests Releases Activity

pref：优化页面

Browse Source
This commit is contained in:
Qingtian239113
2022-03-30 16:03:44 +08:00
parent 6afcaa96fe
commit 02b0262560
8 changed files with 110 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/imgs/titleBorder3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
public/imgs/titleBorder4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

44
src/components/RightPage/BarChart/index.jsx
View File

@@ -1,25 +1,24 @@
import {useEffect, useRef, useState} from "react"; import React, {useEffect, useRef, useState} from "react";
import rightPageApi from "@/https/apis/rightPageApi"; import rightPageApi from "@/https/apis/rightPageApi";
const {Bar} = window.charts; const {Bar} = window.charts;
const DemoBar = ({requestDate,onClick}) => { const DemoBar = ({requestDate, onClick}) => {
const [list, setList] = useState([])
const [list,setList] = useState([])
const pieRef = useRef(); const pieRef = useRef();
useEffect(()=>{ useEffect(() => {
getCollegeCount() getCollegeCount()
clickPie(pieRef?.current?.getChart()) clickPie(pieRef?.current?.getChart())
},[requestDate]) }, [requestDate])
const getCollegeCount = () => { const getCollegeCount = () => {
rightPageApi.collegeCount(requestDate.format("YYYY-MM-DD")).then(res=>{ rightPageApi.collegeCount(requestDate.format("YYYY-MM-DD")).then(res => {
if(res.code == 200){ if (res.code == 200) {
setList(res.data.map(it => { 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) => { const clickPie = (plot) => {
plot.off("plot:click"); plot.off("plot:click");
plot.on('plot:click', (...args) => { 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', xField: 'sales',
yField: 'collegeName', yField: 'collegeName',
color: '#3B90FF', color: '#3B90FF',
xAxis:{ autoFit: true,
label:{ xAxis: {
style:{ label: {
fill:'#F2F2F2' style: {
fill: '#F2F2F2'
} }
} }
}, },
barStyle: { barStyle: {
fill: 'l(180) 0:#3B90FF 1:rgba(47, 253, 239, 0)', fill: 'l(180) 0:#3B90FF 1:rgba(47, 253, 239, 0)',
}, },
yAxis:{ yAxis: {
label:{ label: {
style:{ style: {
fill:'#F2F2F2' fill: '#F2F2F2'
} }
} }
}, },
@@ -62,14 +62,12 @@ const DemoBar = ({requestDate,onClick}) => {
sales: { sales: {
alias: '违规总数', alias: '违规总数',
}, },
no:{ no: {
alias:'编号' alias: '编号'
} }
}, },
minBarWidth: 25,
maxBarWidth: 25,
}; };
return <Bar ref={pieRef} {...config}/>; return <Bar style={{height: '100%'}} ref={pieRef} {...config}/>;
}; };
export default DemoBar export default DemoBar

31
src/components/RightPage/ColumnChart/index.jsx
View File

@@ -1,21 +1,21 @@
import rightPageApi from "@/https/apis/rightPageApi"; 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 DemoColumn = ({onClick}) => {
const [dataCount,setDataCount] = useState([]) const [dataCount, setDataCount] = useState([])
useEffect(()=>{ useEffect(() => {
getSevenCount() getSevenCount()
},[]) }, [])
const getSevenCount = () => { const getSevenCount = () => {
rightPageApi.sevenCount().then(res=>{ rightPageApi.sevenCount().then(res => {
if(res.code == 200){ if (res.code == 200) {
setDataCount(res.data.map(it=>{ setDataCount(res.data.map(it => {
return {type:it.week.substr(5,5),sales:parseInt(it.count,10)} return {type: it.week.substr(5, 5), sales: parseInt(it.count, 10)}
})) }))
} }
}) })
@@ -33,6 +33,7 @@ const DemoColumn = ({onClick}) => {
xField: 'type', xField: 'type',
yField: 'sales', yField: 'sales',
color: '#4AE7E0', color: '#4AE7E0',
autoFit: true,
label: { label: {
// 可手动配置 label 数据标签位置 // 可手动配置 label 数据标签位置
position: 'middle', position: 'middle',
@@ -43,7 +44,7 @@ const DemoColumn = ({onClick}) => {
}, },
}, },
xAxis: { xAxis: {
name:'type', name: 'type',
label: { label: {
autoHide: true, autoHide: true,
autoRotate: false, autoRotate: false,
@@ -55,10 +56,10 @@ const DemoColumn = ({onClick}) => {
barStyle: { barStyle: {
fill: 'red', fill: 'red',
}, },
yAxis:{ yAxis: {
label:{ label: {
style:{ style: {
fill:'#F2F2F2' fill: '#F2F2F2'
} }
} }
}, },
@@ -71,7 +72,7 @@ const DemoColumn = ({onClick}) => {
}, },
}, },
}; };
return <Column {...config} onReady={clickColumn}/>; return <Column style={{height: '100%'}} {...config} onReady={clickColumn}/>;
}; };
export default DemoColumn export default DemoColumn

5
src/components/RightPage/PieChart/index.jsx
View File

@@ -1,5 +1,5 @@
import rightPageApi from "@/https/apis/rightPageApi"; import rightPageApi from "@/https/apis/rightPageApi";
import {useEffect, useState} from "react"; import React, {useEffect, useState} from "react";
const {Pie, G2} = window.charts; const {Pie, G2} = window.charts;
const G = G2.getEngine('canvas'); const G = G2.getEngine('canvas');
@@ -10,6 +10,7 @@ const cfg = {
colorField: 'type', colorField: 'type',
radius: 0.75, radius: 0.75,
legend: false, legend: false,
autoFit: true,
label: { label: {
type: 'spider', type: 'spider',
labelHeight: 40, labelHeight: 40,
@@ -76,7 +77,7 @@ const DemoPie = ({onClick}) => {
}) })
} }
return <Pie {...cfg} data={dataCount} onReady={clickPie}/>; return <Pie style={{height: '100%'}} {...cfg} data={dataCount} onReady={clickPie}/>;
}; };
export default DemoPie export default DemoPie

87
src/components/RightPage/index.jsx
View File

@@ -1,12 +1,13 @@
import React, {useEffect, useState} from "react"; import React, {useState} from "react";
import style from './index.less' import style from './index.less'
import BarChart from './BarChart' import BarChart from './BarChart'
import ColumnChart from './ColumnChart' import ColumnChart from './ColumnChart'
import PieChart from './PieChart' import PieChart from './PieChart'
import dayjs from "dayjs"; import dayjs from "dayjs";
import Flex from "@/components/Flex"; import Flex from "@/components/Flex";
import TitleView from "@/components/TitleView";
const monthList = [] const monthList = [];
for (let i = 1; i < 13; i++) { for (let i = 1; i < 13; i++) {
monthList.push({ monthList.push({
name: i + '月', name: i + '月',
@@ -16,57 +17,45 @@ for (let i = 1; i < 13; i++) {
const rightPage = ({onPieClick}) => { const rightPage = ({onPieClick}) => {
const [dateNum, setDate] = useState(dayjs()) const [copyDate, setCopyDate] = useState(dayjs());
const [copyDate, setCopyDate] = useState(dayjs()) const [dataBoxVisible, setDataBoxVisible] = useState(false);
const [dataBoxVisible, setDataBoxVisible] = useState(false)
const {middle_box, bottom_box, title_box} = style;
///////////////////////////////////////// 页面渲染 ///////////////////////////////////////// 页面渲染
return <Flex direction={"column"} className={style.container}> return <Flex direction={"column"} className={style.container}>
<div className={style.top_box}>
<div className={style.title_box}> <Flex className={style.top_box} direction={"column"} itemGrow={1}>
<img style={{left: 10, height: '56px', position: 'absolute'}}
src={require('@/assets/titleBorder3.png')}/> <TitleView
<span style={{position: "absolute", left: '4vh', top: 12, fontSize: '18px'}}>学院违章排行</span> title={'学院违章排行'} bgUrl={"./imgs/titleBorder3.png"} bgStyle={{width: 187, height: 53}}
<div onClick={() => setDataBoxVisible(!dataBoxVisible)} className={style.time_box}>{copyDate.format("YYYY-MM")} extra={
</div> <Flex
</div> className={style.time_box}
<div style={{height: 300}}><BarChart requestDate={copyDate} onClick={onPieClick}/></div> onClick={() => setDataBoxVisible(!dataBoxVisible)}
</div> >{copyDate.format("YYYY-MM")}
<div className={middle_box}> </Flex>
<div className={title_box}> }
<img style={{left: 20, width: '178px', height: '56px', position: 'absolute'}} />
src={require('@/assets/titleBorder4.png')}/>
<span style={{position: "absolute", left: '4.5vh', top: 14, fontSize: '18px'}}>车辆违规统计</span> <BarChart requestDate={copyDate} onClick={onPieClick}/>
</div>
<div style={{height: 300}}><ColumnChart onClick={(args) => onPieClick(args)}/></div> </Flex>
</div>
<div className={bottom_box} style={{height: 300}}><PieChart onClick={(args) => onPieClick(args)}/></div>
{ <Flex direction={"column"} className={style.middle_box} itemGrow={1}>
dataBoxVisible && <div className={style.dataBox}> <TitleView
<div className={style.data_title}> title={'车辆违规统计'} bgUrl={'./imgs/titleBorder4.png'} bgStyle={{width: 187, height: 53}}
<span style={{fontSize: 26, cursor: 'pointer'}} />
onClick={() => setDate(dateNum.add(-1, 'year'))}>&laquo;</span> <Flex itemGrow={1} style={{height: 0}}>
<span style={{lineHeight: 2.5}}>{dateNum.format('YYYY')}</span> <ColumnChart onClick={(args) => onPieClick(args)}/>
<span style={{fontSize: 26, cursor: 'pointer'}} </Flex>
onClick={() => setDate(dateNum.add(1, 'year'))}>&raquo;</span> </Flex>
</div>
<div className={style.data_body}> <Flex itemGrow={1} style={{height: 0}}>
{ <PieChart onClick={(args) => onPieClick(args)}/>
monthList.map(it => { </Flex>
return <div className={style.data_box} onClick={(e) => {
setDataBoxVisible(false)
setCopyDate(dayjs(dateNum.format("YYYY-") + it.value + "-01"));
}} key={it.value}>{it.name}</div>
})
}
</div>
</div>
}
</Flex> </Flex>
} };
export default rightPage export default rightPage

76
src/components/RightPage/index.less
View File

@@ -1,72 +1,53 @@
.container { .container {
width: 400px; width: 440px;
height: 100%; height: 100vh;
color:#fff; color: #fff;
font-size:16px; padding: 20px;
background-color: rgba(0,0,0,0.1); font-size: 16px;
background-color: rgba(0, 0, 0, 0.1);
.top_box { .top_box {
width: 100%; width: 100%;
height: 35%; height: 0;
padding: 18px; margin-bottom: 20px;
.title_box { .time_box {
position: relative; text-align: center;
height:18%; padding: 1px 8px 1.5px 8px;
overflow: hidden; font-size: 16px;
transform: translateY(10px);
background-size: 100%;
background: url("../../assets/time_box.png") no-repeat;
cursor: pointer;
.time_box { &:hover {
text-align: center; background-color: rgba(169, 169, 169, .2);
position: absolute; transition: all 0.2s;
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;
}
} }
} }
} }
.middle_box { .middle_box {
position: relative; position: relative;
width: 100%; width: 100%;
height: 35%; height: 0;
padding: 18px; margin-bottom: 20px;
//background-color: white;
.title_box { .title_box {
position: relative; position: relative;
height:18%; height: 18%;
.time_box { .time_box {
position: absolute; position: absolute;
width:80px; width: 80px;
height:30px; height: 30px;
transform: translateY(10px); 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 { @keyframes fadeInDown {
0% { 0% {
-webkit-transform: matrix3d(.7, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(.7, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
@@ -173,12 +154,13 @@
} }
} }
.dataBox { .dataBox {
top: 58px; top: 58px;
right: 32px; right: 32px;
position: absolute; position: absolute;
width: 250px; width: 250px;
background-color: rgba(0,0,0,.9); background-color: rgba(0, 0, 0, .9);
border-radius: 15px; border-radius: 15px;
animation: fadeInDown .3s; animation: fadeInDown .3s;
@@ -189,6 +171,7 @@
margin: 10px 0; margin: 10px 0;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
} }
.data_body { .data_body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -203,6 +186,7 @@
line-height: 40px; line-height: 40px;
cursor: pointer; cursor: pointer;
vertical-align: center; vertical-align: center;
&:hover { &:hover {
color: black; color: black;
background-color: grey; background-color: grey;

15
src/pages/index.jsx
View File

@@ -1,21 +1,13 @@
import React, {useRef, useState} from "react"; import React from "react";
import less from './index.less' import less from './index.less'
import LeftPage from '../components/LeftPage' import LeftPage from '../components/LeftPage'
import RightPage from '../components/RightPage' 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"; import Flex from "@/components/Flex";
const width = 2120, height = 1295;
const bgUrl = window.sessionStorage.getItem('core_3d_map_bg'); const bgUrl = window.sessionStorage.getItem('core_3d_map_bg');
export default () => { export default () => {
const carModalPageRef = useRef();
///////////////////////////////////////// 页面渲染 ///////////////////////////////////////// 页面渲染
return <Flex className={less.body} style={{backgroundImage: `url(${bgUrl})`}}> return <Flex className={less.body} style={{backgroundImage: `url(${bgUrl})`}}>
@@ -26,10 +18,7 @@ export default () => {
</Flex> </Flex>
<Flex> <RightPage/>
<RightPage/>
</Flex>
</Flex> </Flex>