页面调整
weiying
parent
a54a83bf6d
commit
2e62008066
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 630 KiB |
|
|
@ -35,6 +35,7 @@
|
|||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.txt{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
.sygl-box{
|
||||
.center-map{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding:5px 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.title-item{
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.img-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
img{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
.img-txt{
|
||||
display: flex;
|
||||
}
|
||||
.color{
|
||||
color: #12FEFF;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.tqyb-box{
|
||||
margin-top:8px;
|
||||
img{
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
.tqyb-box1{
|
||||
margin-top:8px;
|
||||
img{
|
||||
width: 86%;
|
||||
}
|
||||
}
|
||||
.szjc-box{
|
||||
padding-left: 20px;
|
||||
margin-top:8px;
|
||||
img{
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.echarts-box{
|
||||
width: calc( 100% - 30px );
|
||||
height: 26vh;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,341 @@
|
|||
import {Modal, Tabs, Switch} from 'antd'
|
||||
import React, {useMemo, useState} from 'react';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import ReactEcharts from "echarts-for-react";
|
||||
import "./index.less"
|
||||
|
||||
const SyglPage: React.FC = () => {
|
||||
const [echartsOption, setEchartsOption] = useState({});
|
||||
|
||||
const [echartsOptionGxnl, setEchartsOptionGxnl] = useState({});
|
||||
|
||||
useEffect(()=>{
|
||||
var echartData = [
|
||||
{
|
||||
value: 16,
|
||||
name: '水厂'
|
||||
}, {
|
||||
value: 38,
|
||||
name: '河流'
|
||||
}, {
|
||||
value: 47,
|
||||
name: '溪沟'
|
||||
}, {
|
||||
value: 7,
|
||||
name: '塘坝'
|
||||
}];
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text:'168',
|
||||
subtext: '水源总数',
|
||||
x: '22%',
|
||||
top:'33%',
|
||||
padding:[24,0],
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize:20,
|
||||
align:'center',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#A6AFC0',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
//data: [echartData[0].name],
|
||||
orient: 'vertical',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
top:"10%",
|
||||
right:"10%",
|
||||
formatter: (name:any) => {
|
||||
//console.log(name);
|
||||
//console.log(chartData);
|
||||
let item:any = echartData.find((i) => {
|
||||
return i.name == name;
|
||||
});
|
||||
let p = item.value;
|
||||
return name + '：' + p;
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '水源总数',
|
||||
type: 'pie',
|
||||
radius: ['60%', '80%'],
|
||||
center: ['30%', '52%'],
|
||||
hoverAnimation: false,
|
||||
color: ['#EDDB37', '#ED7037', '#29DC6D', '#00A3ED'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: echartData
|
||||
}]
|
||||
};
|
||||
setEchartsOption(option);
|
||||
|
||||
let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
|
||||
let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
|
||||
let chartData = [
|
||||
{
|
||||
name: "水库：100个水厂",
|
||||
value: 15,
|
||||
unit: '万吨'
|
||||
},
|
||||
{
|
||||
name: "河流：54个水厂",
|
||||
value: 8,
|
||||
unit: '万吨'
|
||||
},
|
||||
{
|
||||
name: "塘坝：29个水厂",
|
||||
value: 15,
|
||||
unit: '万吨'
|
||||
},
|
||||
{
|
||||
name: "溪沟：30个水厂",
|
||||
value: 2,
|
||||
unit: '万吨'
|
||||
}
|
||||
];
|
||||
let arrName = [];
|
||||
let arrValue = [];
|
||||
let sum = 0;
|
||||
let pieSeries:any = [],
|
||||
lineYAxis:any = [];
|
||||
|
||||
// 数据处理
|
||||
chartData.forEach((v, i) => {
|
||||
arrName.push(v.name);
|
||||
arrValue.push(v.value);
|
||||
sum = sum + v.value;
|
||||
})
|
||||
|
||||
// 图表option整理
|
||||
chartData.forEach((v, i) => {
|
||||
pieSeries.push({
|
||||
name: '学历',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
|
||||
center: ["30%", "50%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: v.value,
|
||||
name: v.name
|
||||
}, {
|
||||
value: sum - v.value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)"
|
||||
}
|
||||
}]
|
||||
});
|
||||
pieSeries.push({
|
||||
name: '',
|
||||
type: 'pie',
|
||||
silent: true,
|
||||
z: 1,
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
|
||||
center: ["30%", "50%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: 7.5,
|
||||
itemStyle: {
|
||||
color: "#E3F0FF"
|
||||
}
|
||||
}, {
|
||||
value: 2.5,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)"
|
||||
}
|
||||
}]
|
||||
});
|
||||
//@ts-ignore
|
||||
v.percent = (v.value / sum * 100).toFixed(1) + "%";
|
||||
lineYAxis.push({
|
||||
value: i,
|
||||
textStyle: {
|
||||
rich: {
|
||||
circle: {
|
||||
color: color[i],
|
||||
padding: [0, 5]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const optionGxnl = {
|
||||
color: color,
|
||||
grid: {
|
||||
top: '15%',
|
||||
bottom: '54%',
|
||||
left: "30%",
|
||||
containLabel: false
|
||||
},
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: function(params:any) {
|
||||
let item = chartData[params];
|
||||
console.log(item)
|
||||
//@ts-ignore
|
||||
return '{line|}{circle|●}{name|'+ item.name +'}{value|'+ item.value+'}{unit|万吨}'
|
||||
},
|
||||
interval: 0,
|
||||
inside: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 13,
|
||||
rich: {
|
||||
line: {
|
||||
width: 30,
|
||||
height: 4,
|
||||
backgroundColor: {image: dashedPic}
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
},
|
||||
bd: {
|
||||
color: '#ccc',
|
||||
padding: [0, 5],
|
||||
fontSize: 13,
|
||||
},
|
||||
percent:{
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
},
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
unit: {
|
||||
fontSize: 13
|
||||
}
|
||||
}
|
||||
},
|
||||
show: true
|
||||
},
|
||||
data: lineYAxis
|
||||
}],
|
||||
xAxis: [{
|
||||
show: false
|
||||
}],
|
||||
series: pieSeries
|
||||
};
|
||||
setEchartsOptionGxnl(optionGxnl);
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div className=''>
|
||||
水源管理
|
||||
<div className='content sygl-box'>
|
||||
<div className='left-box'>
|
||||
<div className='box'>
|
||||
<div className='box-title'>
|
||||
<div className='title-item'>水源概况</div>
|
||||
<div className="echarts-box">
|
||||
<ReactEcharts
|
||||
option={echartsOption}
|
||||
style={{ width:"100%", height: 'calc( 100% - 10px )' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='box'>
|
||||
<div className='box-title'>
|
||||
<div className='title-item'>重点水源</div>
|
||||
<div className="tqyb-box1">
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/zdsy.png`} alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='box'>
|
||||
<div className='box-title'>
|
||||
<div className='title-item'>天气预报</div>
|
||||
<div className="tqyb-box">
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/tqyb.png`} alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='center-map'>
|
||||
<iframe
|
||||
src="http://127.0.0.1:8080/source.html"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameBorder={0}//边框设置
|
||||
scrolling="no"//滚动设置
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div className='right-box'>
|
||||
<div className='box'>
|
||||
<div className='box-title'>
|
||||
<div className='title-item'>近五年取水量</div>
|
||||
<div className="tqyb-box1">
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='box'>
|
||||
<div className='box-title'>
|
||||
<div className='title-item'>供需能力</div>
|
||||
<div className="img-box">
|
||||
<div style={{marginTop:"30px"}}>
|
||||
<div className="img-txt">
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/gxnl1.png`} alt=""/>
|
||||
<span>
|
||||
<span className="color">500</span>万吨
|
||||
<span>水源总量</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="img-txt">
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/gxnl2.png`} alt=""/>
|
||||
<span>
|
||||
<span className="color">500</span>万吨
|
||||
<span>需水总量</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="echarts-box">
|
||||
<ReactEcharts
|
||||
option={echartsOptionGxnl}
|
||||
style={{ width:"100%", height: 'calc( 100% - 10px )' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='box'>
|
||||
<div className='box-title'>
|
||||
<div className='title-item'>水质监测</div>
|
||||
<div className="szjc-box">
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/szjc.png`} alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.right-box{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.box{
|
||||
|
|
|
|||
Loading…
Reference in New Issue