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

治超详情

dev
yangsen 3 years ago
parent
4c64617822
commit
cb765f028d
4 changed files with 2341 additions and 189 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. 6
      api/log/development.log
  2. BIN
      web/client/assets/images/quanju/all.png
  3. 375
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  4. 2147
      web/log/development.txt

6
api/log/development.log
View File

@ -10815,4 +10815,10 @@ headers: {}
2022-07-30 17:48:40.061 - debug: [FS-LOGGER] Init. 2022-07-30 17:48:40.061 - debug: [FS-LOGGER] Init.
2022-07-30 17:48:40.152 - info: [FS-ATTACHMENT] Inject attachment mw into router. 2022-07-30 17:48:40.152 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-07-30 17:48:40.152 - info: [FS-AUTH] Inject auth and api mv into router. 2022-07-30 17:48:40.152 - info: [FS-AUTH] Inject auth and api mv into router.
<<<<<<< Updated upstream
>>>>>>> d8f96cea72338cf7a61dea293bd6d0cd5da48bb0 >>>>>>> d8f96cea72338cf7a61dea293bd6d0cd5da48bb0
=======
2022-08-11 09:02:08.616 - debug: [FS-LOGGER] Init.
2022-08-11 09:02:08.699 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-11 09:02:08.699 - info: [FS-AUTH] Inject auth and api mv into router.
>>>>>>> Stashed changes

BIN
web/client/assets/images/quanju/all.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

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

@ -4,198 +4,209 @@ 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(props) { function Rightbottom (props) {
const { width, height, total,data, text } = props const { width, height, total, data, text } = props
const chartRef = useRef(null); const chartRef = useRef(null);
let colorList = [ let colorList = [
"rgba(7,185,254,1)", "rgba(7,185,254,1)",
"rgba(28,96,254,1)", "rgba(28,96,254,1)",
"rgba(4,251,240,1)", "rgba(4,251,240,1)",
"rgba(255,194,20,1)", "rgba(255,194,20,1)",
'rgba(255,255,255,1)' 'rgba(255,255,255,1)'
] ]
let underColorList = [ let underColorList = [
"rgba(7,185,254,0.5)", "rgba(7,185,254,0.5)",
"rgba(28,96,254,0.5)", "rgba(28,96,254,0.5)",
"rgba(4,251,240,0.5)", "rgba(4,251,240,0.5)",
"rgba(255,194,20,0.5)", "rgba(255,194,20,0.5)",
'rgba(255,255,255,0.5)', 'rgba(255,255,255,0.5)',
] ]
let name = [], emptyName = [] let name = [], emptyName = []
// const name = data?.map(d) // const name = data?.map(d)
// const safetyData = [ // const safetyData = [
// {name: '一级公路', value: 42}, // {name: '一级公路', value: 42},
// {name: '二级公路', value: 17}, // {name: '二级公路', value: 17},
// {name: '三级公路', value: 17}, // {name: '三级公路', value: 17},
// {name: '四级公路', value: 30}, // {name: '四级公路', value: 30},
// {name: '等外公路', value: 30}, // {name: '等外公路', value: 30},
// ] // ]
const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路'] const rightLegend = ['一级公路', '二级公路', '三级公路', '四级公路', '等外公路']
// let data=[ // const rightLegend = ['三级及以上','四级']
// {name: "四级公路", value: 2969}, // let data=[
// {name: "等外公路", value: 171}, // {name: "四级公路", value: 2969},
// {name: "三级公路", value: 103}, // {name: "等外公路", value: 171},
// {name: "二级公路", value: 15}, // {name: "三级公路", value: 103},
// ] // {name: "二级公路", value: 15},
// console.log(data.map(i=>i.name),'jjj') // ]
let dataq = rightLegend.map((item,index)=>{ // console.log(data.map(i=>i.name),'jjj')
if(data.map(i=>i.name).includes(item)){ console.log(data);
return {name:item,value:data.filter(i1=>i1.name===item)[0].value} let dataq = rightLegend.map((item, index) => {
}else{ console.log(item, index);
return {name:item,value:0} if (data.map(i => i.name).includes(item)) {
} console.log(item);
}) console.log(1);
console.log(dataq,'数据') return { name: item, value: data.filter(i1 => i1.name === item)[0].value }
dataq?.sort((a,b)=>b.value - a.value) } else {
dataq?.forEach(d => { console.log(2);
name.push(d.name) return { name: item, value: 0 }
emptyName.push({ }
name: '',
value: d.value
}) })
}) console.log(dataq, '数据')
const chartTitle = '道路总公里'; dataq?.sort((a, b) => b.value - a.value)
const title = '基础设施安全监测版块'; dataq?.forEach(d => {
// const number = 2738; name.push(d.name)
// const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝'] emptyName.push({
name: '',
const legendColor = undefined; value: d.value
})
})
const chartTitle = '道路总公里';
const title = '基础设施安全监测版块';
// const number = 2738;
// const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
var titleNum = 15 const legendColor = undefined;
const option = {
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>段`,
},
legend: {
orient: "vertical",
itemWidth: 10,
itemHeight: 10,
// right: '30%',
left: '50%',
top: 'center',
align: 'left',
data: name,
formatter: (name) => {
for (let i = 0; i < option.series[1].data.length; i += 1) {
if (name === option.series[1].data[i].name) {
let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
return arr.join('\t');
}
}
},
textStyle: {
rich: {
a: {
color: '#E9F7FF',
fontSize: 14,
padding:[0,10]
},
b: {
fontSize: 16,
fontFamily: 'YouSheBiaoTiHei',
color: '#fff',
padding:[0,0,0,15]
},
}
}
},
grid: {
left: '10%'
},
series: [ var titleNum = 15
{ const option = {
name: "底层背景",
type: "pie",
hoverAnimation: false,
legendHoverLink: false,
radius: ["50%", "62%"],
center: ['25%', '50%'],
color: underColorList,
label: {
show: false
},
labelLine: {
show: false
},
tooltip: { tooltip: {
show: false, 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>段`,
}, },
// legend: {
data: emptyName, // orient: "vertical",
}, // itemWidth: 10,
{ // itemHeight: 10,
name: "公路等级统计", // // right: '30%',
type: "pie", // left: '50%',
radius: ["57%", "70%"], // top: 'center',
center: ['25%', '50%'], // align: 'left',
color: colorList, // data: name,
label: { // formatter: (name) => {
show: false // for (let i = 0; i < option.series[1].data.length; i += 1) {
// if (name === option.series[1].data[i].name) {
// let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
// return arr.join('\t');
// }
// }
// },
// textStyle: {
// rich: {
// a: {
// color: '#E9F7FF',
// fontSize: 14,
// padding:[0,10]
// },
// b: {
// fontSize: 16,
// fontFamily: 'YouSheBiaoTiHei',
// color: '#fff',
// padding:[0,0,0,15]
// },
// }
// }
// },
grid: {
left: '10%'
}, },
data: dataq,
},
],
};
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
useEffect(() => {
let myChart = echarts.init(chartRef.current);
// const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
// for(var idx in safetyOption.series[0].data)
// // 遍历饼图数据，取消所有图形的高亮效果
// myChart.dispatchAction({
// type: 'downplay',
// seriesIndex: 0,
// dataIndex: idx
// });
// // 高亮当前图形
// myChart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// dataIndex: currentIndex
// });
// // myChart.dispatchAction({
// // type: 'showTip',
// // seriesIndex: 0,
// // dataIndex: currentIndex,
// // });
// }
// const selectPie=() =>{ // 高亮效果切换到下一个图形
// var dataLen = safetyOption.series[0].data.length;
// currentIndex = (currentIndex + 1) % dataLen;
// highlightPie();
// }
// let changePieInterval = setInterval(selectPie, 1000);
// myChart.onChartReady = (instance) => { series: [
// chartRef.current.safetyChart = instance; {
// } name: "底层背景",
myChart.setOption(option); type: "pie",
return ()=>{ hoverAnimation: false,
// clearInterval(changePieInterval) legendHoverLink: false,
} radius: ["50%", "62%"],
}, [data]); center: ['25%', '50%'],
color: underColorList,
label: {
show: false
},
labelLine: {
show: false
},
tooltip: {
show: false,
},
data: emptyName,
},
{
name: "公路等级统计",
type: "pie",
radius: ["57%", "70%"],
center: ['25%', '50%'],
color: colorList,
label: {
show: false
},
data: dataq,
},
],
};
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
useEffect(() => {
let myChart = echarts.init(chartRef.current);
// const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
// for(var idx in safetyOption.series[0].data)
// // 遍历饼图数据，取消所有图形的高亮效果
// myChart.dispatchAction({
// type: 'downplay',
// seriesIndex: 0,
// dataIndex: idx
// });
// // 高亮当前图形
// myChart.dispatchAction({
// type: 'highlight',
// seriesIndex: 0,
// dataIndex: currentIndex
// });
// // myChart.dispatchAction({
// // type: 'showTip',
// // seriesIndex: 0,
// // dataIndex: currentIndex,
// // });
// }
// const selectPie=() =>{ // 高亮效果切换到下一个图形
// var dataLen = safetyOption.series[0].data.length;
// currentIndex = (currentIndex + 1) % dataLen;
// highlightPie();
// }
// let changePieInterval = setInterval(selectPie, 1000);
// myChart.onChartReady = (instance) => {
// chartRef.current.safetyChart = instance;
// }
// myChart.setOption(option);
return () => {
// clearInterval(changePieInterval)
}
}, [data]);
return ( return (
<div className='build-right-bottom'> <div className='build-right-bottom'>
<span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span> {/* <span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span> */}
<div className='build-right-bottom-title'> <div className='build-right-bottom-title'>
<h2>{total||0}</h2> <h2>{total || 0}</h2>
<span>道路总公里</span> <span>道路总公里</span>
</div> </div>
<img src='/assets/images/quanju/chart-circle.png'></img> <div className='img1'>
<div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div> <img src='/assets/images/quanju/all.png' />
</div> </div>
); <div className='img2'>
<img src='/assets/images/quanju/chart-circle.png' />
</div>
<div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
</div>
);
} }
export default Rightbottom export default Rightbottom

2147
web/log/development.txt
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save