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

调整建设大屏的样式

release_0.0.1
dengyinhuan 3 years ago
parent
76a0b8d55b
commit
7c38745c2d
4 changed files with 315 additions and 286 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 304
      web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
  2. 260
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  3. 29
      web/client/src/sections/quanju/containers/footer/build/index.js
  4. 8
      web/client/src/sections/quanju/containers/footer/build/style.less

304
web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
View File

@ -3,11 +3,19 @@ import './style.less'
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react'; // import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
function Leftbottom() { function Leftbottom(props) {
// const { const { width, height, data, total, text } = props
// safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
// } = props;
const chartRef = useRef(null); const chartRef = useRef(null);
let colorList = [
"rgba(7,185,254,1)",
"rgba(28,96,254,1)",
"rgba(4,251,240,1)",
]
let underColorList = [
"rgba(7,185,254,0.5)",
"rgba(28,96,254,0.5)",
"rgba(4,251,240,0.5)",
]
const safetyData = [ const safetyData = [
{name: '县道', value: 72}, {name: '县道', value: 72},
{name: '乡道', value: 17}, {name: '乡道', value: 17},
@ -15,145 +23,201 @@ function Leftbottom() {
] ]
const chartTitle = '道路总公里'; const chartTitle = '道路总公里';
const title = '基础设施安全监测版块'; const title = '基础设施安全监测版块';
// const number = 2738; let name = [], emptyName = []
// const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝'] // const name = data?.map(d)
const rightLegend = ['县道', '乡道', '村道'] data?.forEach(d => {
const legendColor = undefined; name.push(d.name)
const width = undefined emptyName.push({
const height = undefined name: '',
var titleNum = 15 value: d.value
let safetyOption = { })
})
// let safetyOption = {
// tooltip: {
// show: true,
// trigger: 'item',
// position: 'right',
// backgroundColor: 'rgba(0,0,0,0.7)',
// textStyle: {
// color: '#fff',
// },
// formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`,
// },
// // title: {
// // text:titleNum,//主标题文本
// // left:'10%',
// // top:'35%',
// // subtext:chartTitle,//副标题文本
// // textStyle:{
// // fontFamily : "YouSheBiaoTiHei",
// // fontSize: 20,
// // color:'#FFFFFF',
// // marginLeft:'20%',
// // align:'center'
// // },
// // subtextStyle:{
// // fontFamily : "PingFangSC-Medium PingFang SC",
// // fontSize: 12,
// // fontWeight:500,
// // color:'#E9F7FF',
// // }
// // },
// legend: [
// {
// orient: 'vertical',
// textStyle: {
// color: '#DDEFFF',
// fontFamily: 'SourceHanSansCN-Regular',
// fontSize: 12,
// },
// right: 0,
// top: 'center',
// align: 'left',
// itemWidth: 10,
// itemHeight: 10,
// data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
// formatter: (name) => {
// for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
// if (name === safetyOption.series[0].data[i].name) {
// return `${name} \t ${safetyOption.series[0].data[i].value}`;
// }
// }
// },
// },
// ],
// series: [
// {
// name: '道路统计',
// type: 'pie',
// radius: ['50%', '63%'],
// center: ["30%", "50%"],
// // emphasis: { // 设置高亮时显示标签
// // label: {
// // show: true
// // },
// // // scale: true, // 设置高亮时放大图形
// // // scaleSize: 20
// // },
// label: {
// show: false,
// },
// // selectedMode: 'single',
// data: safetyData,
// itemStyle: {
// normal: {
// color: (color) => {
// const colorList = legendColor || [
// '#98D8CA',
// '#9494FF',
// '#2A43FF',
// '#FFD39F',
// '#9D5F8B',
// '#ADDE81',
// '#F8EBA2',
// '#5F8EFD',
// '#2BB4D3',
// '#1488C8',
// ];
// return colorList[color.dataIndex];
// },
// },
// },
// },
// ],
// };
const option = {
tooltip: { tooltip: {
show: true, trigger: "item",
trigger: 'item', },
position: 'right', legend: {
backgroundColor: 'rgba(0,0,0,0.7)', orient: "vertical",
itemWidth: 10,
itemHeight: 10,
right: '30%',
top: 'center',
align: 'left',
data: name,
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`,
}, },
// title: { grid: {
// text:titleNum,//主标题文本 left: '10%'
// left:'10%', },
// top:'35%',
// subtext:chartTitle,//副标题文本
// textStyle:{
// fontFamily : "YouSheBiaoTiHei",
// fontSize: 20,
// color:'#FFFFFF',
// marginLeft:'20%',
// align:'center'
// },
// subtextStyle:{
// fontFamily : "PingFangSC-Medium PingFang SC",
// fontSize: 12,
// fontWeight:500,
// color:'#E9F7FF',
// }
// },
legend: [
series: [
{ {
orient: 'vertical', name: "底层背景",
textStyle: { type: "pie",
color: '#DDEFFF', hoverAnimation: false,
fontFamily: 'SourceHanSansCN-Regular', legendHoverLink: false,
fontSize: 12, radius: ["50%", "62%"],
center: ['25%', '50%'],
color: underColorList,
label: {
show: false
}, },
right: 0, labelLine: {
top: 'center', show: false
align: 'left',
itemWidth: 10,
itemHeight: 10,
data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
formatter: (name) => {
for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
if (name === safetyOption.series[0].data[i].name) {
return `${name} \t ${safetyOption.series[0].data[i].value}`;
}
}
}, },
tooltip: {
show: false,
},
data: emptyName,
}, },
],
series: [
{ {
name: '道路统计', name: "道路统计",
type: 'pie', type: "pie",
radius: ['50%', '63%'], radius: ["57%", "70%"],
center: ["30%", "50%"], center: ['25%', '50%'],
// emphasis: { // 设置高亮时显示标签 color: colorList,
// label: {
// show: true
// },
// // scale: true, // 设置高亮时放大图形
// // scaleSize: 20
// },
label: { label: {
show: false, show: false
},
// selectedMode: 'single',
data: safetyData,
itemStyle: {
normal: {
color: (color) => {
const colorList = legendColor || [
'#98D8CA',
'#9494FF',
'#2A43FF',
'#FFD39F',
'#9D5F8B',
'#ADDE81',
'#F8EBA2',
'#5F8EFD',
'#2BB4D3',
'#1488C8',
];
return colorList[color.dataIndex];
},
},
}, },
data: data,
}, },
], ],
}; };
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
useEffect(() => { useEffect(() => {
let myChart = echarts.init(chartRef.current); let myChart = echarts.init(chartRef.current);
const highlightPie = () =>{ // 取消所有高亮并高亮当前图形 // const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
for(var idx in safetyOption.series[0].data) // for(var idx in safetyOption.series[0].data)
// 遍历饼图数据，取消所有图形的高亮效果 // // 遍历饼图数据，取消所有图形的高亮效果
myChart.dispatchAction({ // myChart.dispatchAction({
type: 'downplay', // type: 'downplay',
seriesIndex: 0, // seriesIndex: 0,
dataIndex: idx // dataIndex: idx
}); // });
// 高亮当前图形 // // 高亮当前图形
myChart.dispatchAction({ // myChart.dispatchAction({
type: 'highlight', // type: 'highlight',
seriesIndex: 0, // seriesIndex: 0,
dataIndex: currentIndex // dataIndex: currentIndex
}); // });
// myChart.dispatchAction({ // // myChart.dispatchAction({
// type: 'showTip', // // type: 'showTip',
// seriesIndex: 0, // // seriesIndex: 0,
// dataIndex: currentIndex, // // dataIndex: currentIndex,
// }); // // });
} // }
const selectPie=() =>{ // 高亮效果切换到下一个图形 // const selectPie=() =>{ // 高亮效果切换到下一个图形
var dataLen = safetyOption.series[0].data.length; // var dataLen = safetyOption.series[0].data.length;
currentIndex = (currentIndex + 1) % dataLen; // currentIndex = (currentIndex + 1) % dataLen;
highlightPie(); // highlightPie();
} // }
let changePieInterval = setInterval(selectPie, 1000); // let changePieInterval = setInterval(selectPie, 1000);
myChart.onChartReady = (instance) => { myChart.onChartReady = (instance) => {
chartRef.current.safetyChart = instance; chartRef.current.safetyChart = instance;
} }
myChart.setOption(safetyOption); myChart.setOption(option);
return ()=>{ return ()=>{
clearInterval(changePieInterval) // clearInterval(changePieInterval)
} }
}, []); }, []);

260
web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
View File

@ -4,194 +4,134 @@ import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react'; // import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
function Rightbottom() { function Rightbottom(props) {
// const { const { width, height, data, total, text } = props
// safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
// } = props;
const chartRef = useRef(null); const chartRef = useRef(null);
const safetyData = [ let colorList = [
{name: '一级公路', value: 42}, "rgba(7,185,254,1)",
{name: '二级公路', value: 17}, "rgba(28,96,254,1)",
{name: '三级公路', value: 17}, "rgba(4,251,240,1)",
{name: '四级公路', value: 30}, "rgba(255,194,20,1)"
{name: '等外公路', value: 30}, ]
let underColorList = [
"rgba(7,185,254,0.5)",
"rgba(28,96,254,0.5)",
"rgba(4,251,240,0.5)",
"rgba(255,194,20,0.5)"
] ]
let name = [], emptyName = []
// const name = data?.map(d)
// const safetyData = [
// {name: '一级公路', value: 42},
// {name: '二级公路', value: 17},
// {name: '三级公路', value: 17},
// {name: '四级公路', value: 30},
// {name: '等外公路', value: 30},
// ]
data?.forEach(d => {
name.push(d.name)
emptyName.push({
name: '',
value: d.value
})
})
const chartTitle = '道路总公里'; const chartTitle = '道路总公里';
const title = '基础设施安全监测版块'; const title = '基础设施安全监测版块';
// const number = 2738; // const number = 2738;
// const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝'] // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路'] const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路']
const legendColor = undefined; const legendColor = undefined;
const width = undefined
const height = undefined
var titleNum = 15 var titleNum = 15
let safetyOption = { const option = {
tooltip: { tooltip: {
show: true, trigger: "item",
trigger: 'item', },
position: 'right', legend: {
backgroundColor: 'rgba(0,0,0,0.7)', orient: "vertical",
itemWidth: 10,
itemHeight: 10,
right: '30%',
top: 'center',
align: 'left',
textStyle: { textStyle: {
color: '#fff', color: "#fff",
}, },
formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`,
}, },
// title: { grid: {
// text:titleNum,//主标题文本 left: '10%'
// left:'center', },
// top:'35%',
// subtext:chartTitle,//副标题文本
// textStyle:{
// fontFamily : "YouSheBiaoTiHei",
// fontSize: 20,
// color:'#FFFFFF',
// // align:'center'
// },
// subtextStyle:{
// fontFamily : "PingFangSC-Medium PingFang SC",
// fontSize: 12,
// fontWeight:500,
// color:'#E9F7FF',
// }
// },
// graphic: {
// elements: [
// {
// type: 'text',
// style: {
// text: chartTitle || '安全\n监测',
// align: 'center',
// fill: '#fff',
// z: -999,
// zlevel: -999,
// font: '20px "YouSheBiaoTiHei", sans-serif',
// },
// left: 'center',
// top: 'center',
// position: [100, 100],
// },
// ],
// },
legend: [
// { series: [
// orient: 'vertical',
// left: 'left',
// top: 'center',
// textStyle: {
// color: '#DDEFFF',
// fontFamily: 'SourceHanSansCN-Regular',
// fontSize: 12,
// },
// itemWidth: 10,
// itemHeight: 10,
// data: leftLegend || ['基坑', '桥梁', '地铁', '边坡', '建筑物'],
// formatter: (name) => {
// for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
// if (name === safetyOption.series[0].data[i].name) {
// return `${name} \t ${safetyOption.series[0].data[i].value}`;
// }
// }
// },
// },
{ {
orient: 'vertical', name: "底层背景",
textStyle: { type: "pie",
color: '#DDEFFF', hoverAnimation: false,
fontFamily: 'SourceHanSansCN-Regular', legendHoverLink: false,
fontSize: 12, radius: ["50%", "62%"],
center: ['25%', '50%'],
color: underColorList,
label: {
show: false
},
labelLine: {
show: false
}, },
right: 0, tooltip: {
top: 'center', show: false,
align: 'left',
itemWidth: 10,
itemHeight: 10,
data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
formatter: (name) => {
for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
if (name === safetyOption.series[0].data[i].name) {
return `${name} \t ${safetyOption.series[0].data[i].value}`;
}
}
}, },
data: emptyName,
}, },
],
series: [
{ {
name: '公路等级统计', name: "公路等级统计",
type: 'pie', type: "pie",
radius: ['50%', '63%'], radius: ["57%", "70%"],
center:['30%','50%'], center: ['25%', '50%'],
// emphasis: { // 设置高亮时显示标签 color: colorList,
// label: {
// show: true
// },
// // scale: true, // 设置高亮时放大图形
// // scaleSize: 20
// },
label: { label: {
show: false, show: false
},
// selectedMode: 'single',
data: safetyData,
itemStyle: {
normal: {
color: (color) => {
const colorList = legendColor || [
'#98D8CA',
'#9494FF',
'#2A43FF',
'#FFD39F',
'#9D5F8B',
'#ADDE81',
'#F8EBA2',
'#5F8EFD',
'#2BB4D3',
'#1488C8',
];
return colorList[color.dataIndex];
},
},
}, },
data: data,
}, },
], ],
}; };
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
useEffect(() => { useEffect(() => {
let myChart = echarts.init(chartRef.current); let myChart = echarts.init(chartRef.current);
const highlightPie = () =>{ // 取消所有高亮并高亮当前图形 // const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
for(var idx in safetyOption.series[0].data) // for(var idx in safetyOption.series[0].data)
// 遍历饼图数据，取消所有图形的高亮效果 // // 遍历饼图数据，取消所有图形的高亮效果
myChart.dispatchAction({ // myChart.dispatchAction({
type: 'downplay', // type: 'downplay',
seriesIndex: 0, // seriesIndex: 0,
dataIndex: idx // dataIndex: idx
}); // });
// 高亮当前图形 // // 高亮当前图形
myChart.dispatchAction({ // myChart.dispatchAction({
type: 'highlight', // type: 'highlight',
seriesIndex: 0, // seriesIndex: 0,
dataIndex: currentIndex // dataIndex: currentIndex
}); // });
// myChart.dispatchAction({ // // myChart.dispatchAction({
// type: 'showTip', // // type: 'showTip',
// seriesIndex: 0, // // seriesIndex: 0,
// dataIndex: currentIndex, // // dataIndex: currentIndex,
// }); // // });
} // }
const selectPie=() =>{ // 高亮效果切换到下一个图形 // const selectPie=() =>{ // 高亮效果切换到下一个图形
var dataLen = safetyOption.series[0].data.length; // var dataLen = safetyOption.series[0].data.length;
currentIndex = (currentIndex + 1) % dataLen; // currentIndex = (currentIndex + 1) % dataLen;
highlightPie(); // highlightPie();
} // }
let changePieInterval = setInterval(selectPie, 1000); // let changePieInterval = setInterval(selectPie, 1000);
myChart.onChartReady = (instance) => { // myChart.onChartReady = (instance) => {
chartRef.current.safetyChart = instance; // chartRef.current.safetyChart = instance;
} // }
myChart.setOption(safetyOption); myChart.setOption(option);
return ()=>{ return ()=>{
clearInterval(changePieInterval) clearInterval(changePieInterval)
} }

29
web/client/src/sections/quanju/containers/footer/build/index.js
View File

@ -14,6 +14,19 @@ import './style.less'
import {getdaolutongji} from '../../../actions/example' import {getdaolutongji} from '../../../actions/example'
const Build = (props) => { const Build = (props) => {
const { dispatch } = props const { dispatch } = props
let data = [
{ value: 435, name: "县道" },
{ value: 679, name: "乡道" },
{ value: 848, name: "村道" },
]
const safetyData = [
{name: '一级公路', value: 42},
{name: '二级公路', value: 17},
{name: '三级公路', value: 17},
{name: '四级公路', value: 30},
]
const [buildingnumber,setbuildingnumber] = useState(0) const [buildingnumber,setbuildingnumber] = useState(0)
const requestbuildingnumber = async ()=>{ const requestbuildingnumber = async ()=>{
const res = await dispatch(getdaolutongji()); const res = await dispatch(getdaolutongji());
@ -97,7 +110,15 @@ const Build = (props) => {
<Module title={"道路统计"} style={{ width: "100%", <Module title={"道路统计"} style={{ width: "100%",
height:" 30%",marginTop:'3%' height:" 30%",marginTop:'3%'
}} customize = {true}> }} customize = {true}>
<LeftBottom/> <LeftBottom
data={data}
width='100%'
height='100%'
text='道路总公里'
total={2344.13}
// colorList={colorList}
// underColorList={underColorList}
/>
</Module> </Module>
</div> </div>
@ -118,7 +139,11 @@ const Build = (props) => {
<Module title={"公路等级统计"} style={{ width: "100%", <Module title={"公路等级统计"} style={{ width: "100%",
height:" 30%",marginTop:'3%' height:" 30%",marginTop:'3%'
}} customize = {true}> }} customize = {true}>
<RightBottom/> <RightBottom width='100%'
height='100%'
text='道路总公里'
total={2344.13}
data={safetyData}/>
</Module> </Module>
</div> </div>
</div> </div>

8
web/client/src/sections/quanju/containers/footer/build/style.less
View File

@ -171,7 +171,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
left: 27%; left: 16%;
top:38%; top:38%;
h2{ h2{
font-size: 1.25rem; font-size: 1.25rem;
@ -190,7 +190,7 @@
img{ img{
width: 19%; width: 19%;
position: absolute; position: absolute;
left: 26.5%; left: 16%;
top:29% top:29%
} }
@ -268,7 +268,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
left: 27%; left: 16%;
top:38%; top:38%;
h2{ h2{
font-size: 1.25rem; font-size: 1.25rem;
@ -287,7 +287,7 @@
img{ img{
width: 19%; width: 19%;
position: absolute; position: absolute;
left: 26.5%; left: 16%;
top:29% top:29%
} }
} }

Write Preview
Loading…
Cancel
Save