+
+
+
+
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
index d774030c..720a27d8 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
+++ b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
@@ -5,76 +5,111 @@ 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,
- },
+ const option = {
+ title: {
+ text: '75%',
+ top:'35%',
+ textStyle: {
+ fontSize: "1.375rem",
+ fontFamily: 'PingFangSC-Medium, PingFang SC',
+ fontWeight: 500,
+ // marginTop:-60,
+ color: '#FFFFFF'
},
- {
- text: "2333",
- x: "center",
- y: "35%",
- textStyle: {
- fontSize: "30",
- color: "#FFFFFF",
- fontFamily: "YouSheBiaoTiHei",
- },
+ subtext: '已处理',
+ subtextStyle: {
+ fontSize: "1rem",
+ fontFamily: "PingFangSC-Regular, PingFang SC",
+ fontWeight: 400,
+ color: 'rgba(216,240,255,0.8000)'
+ },
+ // itemGap: -2, // 主副标题距离
+ left: 'center',
+ // top: 'center'
+ },
+ angleAxis: {
+ max: 100, // 满分
+ clockwise: false, // 逆时针
+ // 隐藏刻度线
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
},
- ],
- polar: {
- radius: ["78%", "86%"],
- center: ["50%", "50%"],
- },
- angleAxis: {
- max: 100,
- show: false,
- },
- radiusAxis: {
- type: "category",
- show: true,
axisLabel: {
- show: false,
+ show: false
},
+ splitLine: {
+ show: false
+ }
+ },
+ radiusAxis: {
+ type: 'category',
+ // 隐藏刻度线
axisLine: {
- show: false,
+ show: false
},
axisTick: {
- show: false,
+ show: false
+ },
+ axisLabel: {
+ show: false
},
+ splitLine: {
+ 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",
- },
- ]),
+ polar: {
+ center: ['50%', '50%'],
+ radius: '180%' //图形大小
+ // radius: ["78%", "86%"],
+ },
+ series: [{
+ type: 'bar',
+ data: [{
+ name: '已处理',
+ value: 75,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ {
+ offset: 0,
+ color: "#00D5FF",
+ },
+ {
+ offset: 1,
+ color: "#1978E5",
+ }])
+ }
},
- },
- },
- ],
- };
- chartInstance.setOption(seasonOption);
+ }],
+ coordinateSystem: 'polar',
+ roundCap: true,
+ barWidth: 8,
+ barGap: '-100%', // 两环重叠
+ z: 2,
+ },{ // 灰色环
+ type: 'bar',
+ data: [{
+ value: 100,
+ itemStyle: {
+ color: '#092B7B ',
+ shadowColor: 'rgba(0, 0, 0, 0.2)',
+ shadowBlur: 5,
+ shadowOffsetY: 2
+ }
+ }],
+ coordinateSystem: 'polar',
+ roundCap: true,
+ barWidth: 8,
+ barGap: '-100%', // 两环重叠
+ z: 1
+ }]
+ }
+
+
+
+ chartInstance.setOption(option);
}, [])
return (
@@ -84,7 +119,9 @@ export default function LeftItem() {
已处理
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/style.less b/web/client/src/sections/quanju/containers/footer/guanli/style.less
index c225f744..ac6fba18 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/style.less
+++ b/web/client/src/sections/quanju/containers/footer/guanli/style.less
@@ -1,3 +1,8 @@
+@media screen and (max-width:1281px){
+ html{
+ font-size: 10px;
+ }
+}
.guanli{
// box-sizing: border-box;
padding: 0 15px 0 15px;
@@ -19,13 +24,13 @@
justify-content: space-between;
border: 2px solid rgba(28,96,254,0.5000);
.guanli-left-item-left{
- width: 30%;
- height: 70%;
+ width: 45%;
+ height: 60%;
display: flex;
flex-direction: column;
align-items: center;
span{
- font-size: 20px;
+ font-size: 1.25rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216,240,255,0.8000);
@@ -34,16 +39,16 @@
display: flex;
justify-content: center;
// align-items: ;
- font-size: 34px;
+ font-size: 2.125rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
- height: 60%;
+ height: 70%;
width: 100%;
background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
background-size: 100% 80%;
background-position: center bottom;
span{
- font-size: 16px;
+ font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
padding-top: 10%;
@@ -56,7 +61,20 @@
}
.guanli-left-item-right{
width: 40%;
- height: 60%;
+ height: 50%;
+ position: relative;
+ span{
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ background-color: #fff;
+ top: 1.5%;
+ left: 50%;
+ z-index: 10;
+ border-radius: 4px;
+ display: block;
+ }
+
// background-color: pink;
}
// background-color: pink;
@@ -130,12 +148,12 @@
justify-content: space-around;
// background: rgba(21,77,160,0.2000);
span{
- font-size: 14px;
+ font-size: 0.875rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216,240,255,0.8000);
line-height: 20px;
- flex:1;
+ // flex:1;
text-align: center;
// &:nth-child(1){
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js
index b9d6d319..540c3f39 100644
--- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js
+++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js
@@ -1,12 +1,27 @@
import React from 'react'
import Module from '../../../public/module'
+import Centerleftecharts from "./echarts/centerleftecharts"
+import Bottomlunbo from './lunbo/bottomlunbo'
+import Leftlunbo from './lunbo/toplunbo'
const Leftbottom = () => {
const style = { height: "28%", marginTop: "2%" }
return (
<>
-
+ 出租车
+
+ 危险货运
+公里数Km
{title || []}
*/} +
+ {item.name}
+
+ 路况
+畅通
+
+ 平均时速
+55.2Km/h
+
+ 预测明日
+55.2Km/h
+
+ 已处理192件
+ 车牌号
+超限
+处罚
+日期
+