free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

管理的UI大屏开发

release_0.0.1
dengyinhuan 3 years ago
parent
06c5b51278
commit
d35c171831
3 changed files with 137 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
  2. 9
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  3. 177
      web/client/src/sections/quanju/containers/footer/guanli/style.less

91
web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
View File

@ -0,0 +1,91 @@
import React, { useEffect, useRef } from 'react';
import './style.less'
import * as echarts from 'echarts';
export default function LeftItem() {
const seasonChartRef = useRef(null);
useEffect(() => {
let chartInstance = echarts.init(seasonChartRef.current);
const seasonOption = {
title: [
{
text: "已处理",
x: "center",
top: "55%",
textStyle: {
color: "#E9F7FF",
fontSize: 14,
},
},
{
text: "2333",
x: "center",
y: "35%",
textStyle: {
fontSize: "30",
color: "#FFFFFF",
fontFamily: "YouSheBiaoTiHei",
},
},
],
polar: {
radius: ["78%", "86%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 30,
showBackground: true,
data: [40],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#AAC8FF",
},
{
offset: 1,
color: "#0041BB",
},
]),
},
},
},
],
};
chartInstance.setOption(seasonOption);
}, [])
return (
<div className='guanli-left-item'>
<div className='guanli-left-item-left'>
<span>莲塘镇</span>
<div>244 <span>个</span></div>
</div>
<div className='guanli-left-item-right'>
<div ref={seasonChartRef} style={{ height: "100%", width: "100%" }}></div>
</div>
</div>
)
}

9
web/client/src/sections/quanju/containers/footer/guanli/index.js
View File

@ -2,9 +2,11 @@ import React from 'react'
import { Carousel } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent'
import Module from '../../public/module'
import LeftItem from './LeftItem'
import './style.less'
const Guanli = () => {
const datas = new Array(35)
const itemlist = [1,2,3]
const renderContent = () => {
datas.fill({
chepaihao:'苏LD1112121',
@ -27,7 +29,12 @@ const Guanli = () => {
renderContent()
return (
<div className='guanli'>
<div className='guanli-left'>
<div className='guanli-left'>
<Module style={{height:"100%"}} title="检测点治超处理占比">
{itemlist.map((item,index)=>
<LeftItem key={index}></LeftItem>
)}
</Module>
</div>
<div className='guanli-right'>
<Module style={{height:"100%"}} title="治超详情">

177
web/client/src/sections/quanju/containers/footer/guanli/style.less
View File

@ -8,159 +8,58 @@
.guanli-left{
width: 25%;
height: 100%;
background-color: pink;
.guanli-left-top{
height: 100%;
width: 100%;
.guanli-left-item{
box-sizing: border-box;
width: 85%;
height: 30%;
margin: 0 auto 3%;
display: flex;
justify-content: center;
align-items: center;
.guanli-left-top-center{
width: 174px;
height: 146px;
margin: 0 10px;
}
.guanli-left-top-item{
width: 25%;
height: 50%;
background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
background-size: 95%;
background-repeat: no-repeat;
padding: 0 10%;
justify-content: space-between;
border: 2px solid rgba(28,96,254,0.5000);
.guanli-left-item-left{
width: 30%;
height: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// text-align: center;
div{
&:nth-child(1){
display: flex;
justify-content: center;
align-items: center;
span{
&:nth-child(1){
width: 8px;
height: 8px;
margin-right: 5px;
background: #07B9FE;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
transform: rotate(134deg);
}
&:nth-child(2){
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #E9F7FF;
line-height: 22px;
}
}
}
&:nth-child(2){
// width: 80%;
// height: 100%;
// margin: 1% auto 0;
font-size: 38px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
text-align: center;
// line-height: 49px;
text-shadow: 0px 2px 4px #1C60FE;
}
span{
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216,240,255,0.8000);
}
}
}
.guanli-left-center{
width: 100%;
height: 100%;
.guanli-left-center-top{
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
div{
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
img{
height: 50px;
width: 78px;
}
div{
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
margin-left: 10px;
span{
&:nth-child(1){
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #C2EEFF;
letter-spacing: 1px;
}
&:nth-child(2){
font-size: 28px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 36px;
text-shadow: 0px 0px 4px #07B9FE;
}
}
}
}
// background-color: pink;
}
.guanli-left-center-titile{
display: flex;
margin-bottom: 10px;
span{
flex:1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
// align-items: ;
font-size: 34px;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 16px;
}
}
.guanli-left-center-content{
width: 100%;
height: 100px!important;
.guanli-left-center-item{
display: flex !important;
width: 100%!important;
height: 28px!important;
height: 60%;
width: 100%;
background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
background-size: 100% 80%;
background-position: center bottom;
span{
flex:1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 16px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
padding-top: 10%;
margin-left: 5px;
// height: 0;
color: rgba(216,240,255,0.8000);
}
}
.slick-list{
height: 128px !important;
}
// background-color: pink;
}
}
.guanli-left-bottom{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.guanli-left-item-right{
width: 40%;
height: 60%;
// background-color: pink;
}
// background-color: pink;
}
}
.guanli-right{

Write Preview
Loading…
Cancel
Save