diff --git a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js index 12d2bbdd..9130ae70 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js @@ -1,7 +1,164 @@ -import React from 'react' + import './style.less' -export default function Leftbottom() { +import { Col, Progress, Row } from 'antd'; +import React, { useEffect, useRef } from 'react'; +// import ReactEcharts from 'echarts-for-react'; +import * as echarts from 'echarts'; +function Leftbottom() { + // const { + // safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height, + // } = props; + const chartRef = useRef(null); + const safetyData = [ + {name: '县道', value: 72}, + {name: '乡道', value: 17}, + {name: '村道', value: 4}, + ] + const chartTitle = '道路总公里'; + const title = '基础设施安全监测版块'; + // const number = 2738; + // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝'] + const rightLegend = ['县道', '乡道', '村道'] + const legendColor = undefined; + const width = undefined + const height = undefined + var titleNum = 15 + let safetyOption = { + tooltip: { + show: true, + trigger: 'item', + position: 'right', + backgroundColor: 'rgba(0,0,0,0.7)', + textStyle: { + color: '#fff', + }, + formatter: (values) => `${values.seriesName}
${values.marker} ${values.name} ${values.value}个(${values.percent}%)`, + }, + title: { + text:titleNum,//主标题文本 + 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', + } + }, + 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%', '65%'], + // 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]; + }, + }, + }, + }, + ], + }; + + 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(safetyOption); + return ()=>{ + clearInterval(changePieInterval) + } +}, []); + return ( -
Leftbottom
- ) +
+
+
+ ); } +export default Leftbottom \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js index 2ac56f4e..9cb9151c 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js @@ -1,7 +1,205 @@ -import React from 'react' + import './style.less' -export default function Rightbottom() { +import { Col, Progress, Row } from 'antd'; +import React, { useEffect, useRef } from 'react'; +// import ReactEcharts from 'echarts-for-react'; +import * as echarts from 'echarts'; +function Leftbottom() { + // const { + // safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height, + // } = props; + const chartRef = useRef(null); + const safetyData = [ + {name: '一级公路', value: 42}, + {name: '二级公路', value: 17}, + {name: '三级公路', value: 17}, + {name: '四级公路', value: 30}, + {name: '等外公路', value: 30}, + + ] + const chartTitle = '道路总公里'; + const title = '基础设施安全监测版块'; + // const number = 2738; + // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝'] + const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路'] + const legendColor = undefined; + const width = undefined + const height = undefined + var titleNum = 15 + let safetyOption = { + tooltip: { + show: true, + trigger: 'item', + position: 'right', + backgroundColor: 'rgba(0,0,0,0.7)', + textStyle: { + color: '#fff', + }, + formatter: (values) => `${values.seriesName}
${values.marker} ${values.name} ${values.value}个(${values.percent}%)`, + }, + title: { + text:titleNum,//主标题文本 + 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: [ + + // { + // 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', + 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%', '65%'], + // 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]; + }, + }, + }, + }, + ], + }; + + 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(safetyOption); + return ()=>{ + clearInterval(changePieInterval) + } +}, []); + return ( -
Rightbottom
- ) +
+
+
+ ); } +export default Leftbottom \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/build/index.js b/web/client/src/sections/quanju/containers/footer/build/index.js index 7653fb63..d613f54e 100644 --- a/web/client/src/sections/quanju/containers/footer/build/index.js +++ b/web/client/src/sections/quanju/containers/footer/build/index.js @@ -1,12 +1,13 @@ import React from 'react' // import LeftTop from './Lefttop' // import LeftCenter from './Leftcenter' -// import LeftBottom from './Leftbottom' +import LeftBottom from './Leftbottom' // import RightTop from './Righttop' // import Rightcenter from './Rightcenter' // import Rightbottom from './Rightbottom' import { Carousel } from 'antd' import Module from '../../public/module' +import RightBottom from './Rightbottom' import './style.less' const Build = () => { return ( @@ -98,7 +99,9 @@ const Build = () => { + }}> + +
@@ -115,7 +118,9 @@ const Build = () => { }}> + }}> + +
) diff --git a/web/client/src/sections/quanju/containers/footer/build/style.less b/web/client/src/sections/quanju/containers/footer/build/style.less index 2c87a47d..3f6da806 100644 --- a/web/client/src/sections/quanju/containers/footer/build/style.less +++ b/web/client/src/sections/quanju/containers/footer/build/style.less @@ -155,8 +155,10 @@ } .build-left-bottom{ width: 100%; - height: 30%; - background-color: rgba(0,33,98,0.8); + height: 100%; + display: flex; + justify-content: center; + align-items: center; } } @@ -199,8 +201,10 @@ } .build-right-bottom{ width: 100%; - height: 30%; - background-color: pink; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } } }