472 lines
12 KiB
TypeScript
472 lines
12 KiB
TypeScript
import {Modal, Tabs, Switch} from 'antd'
|
||
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({});
|
||
|
||
const [qslEchart, setQslEchart] = useState({});
|
||
|
||
useEffect(()=>{
|
||
var echartData = [
|
||
{
|
||
value: 16,
|
||
name: '水库'
|
||
}, {
|
||
value: 90,
|
||
name: '河流'
|
||
}, {
|
||
value: 47,
|
||
name: '溪沟'
|
||
}, {
|
||
value: 15,
|
||
name: '塘坝'
|
||
}];
|
||
|
||
const option = {
|
||
title: {
|
||
text:'168',
|
||
subtext: '水源总数',
|
||
x: '24%',
|
||
top:'33%',
|
||
padding:[24,0],
|
||
textStyle:{
|
||
color:'#fff',
|
||
fontSize:20,
|
||
align:'center',
|
||
},
|
||
subtextStyle: {
|
||
color: '#A6AFC0',
|
||
fontSize: 16,
|
||
padding:[24,0],
|
||
},
|
||
},
|
||
legend: {
|
||
//data: [echartData[0].name],
|
||
orient: 'vertical',
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 15,
|
||
},
|
||
top:"24%",
|
||
right:"15%",
|
||
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);
|
||
|
||
const optionGxnl = {
|
||
grid: {
|
||
top: "22%",
|
||
bottom: "27%"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
label: {
|
||
show: true
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ["水源总量", "生产总量", "需水总量"],
|
||
top: "2%",
|
||
right: "14%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14
|
||
}
|
||
},
|
||
xAxis: {
|
||
data: ["朝阳寺镇", "曲江镇", "忠堡镇", "清坪镇", "活龙坪乡", "小乡村", "高乐山镇", "唐崖镇", "大路坝区", "坪坝营镇", "黄金洞乡"],
|
||
axisLine: {
|
||
show: true, //隐藏X轴轴线
|
||
lineStyle: {
|
||
color: '#fff',
|
||
width:2
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true //隐藏X轴刻度
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff", //X轴文字颜色
|
||
fontSize: 13
|
||
},
|
||
rotate: 60, // 角度值：Number
|
||
fontSize: 11, // 顺便调小一点字体大小
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
|
||
}
|
||
}
|
||
},
|
||
yAxis: [{
|
||
type: "value",
|
||
name: "(m³)",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 13
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#fff',
|
||
width:2
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 13
|
||
}
|
||
},
|
||
|
||
},
|
||
{
|
||
type: "value",
|
||
name: "(m³)",
|
||
max:500,
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 13
|
||
},
|
||
position: "right",
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",//#8C95A6
|
||
fontSize: 13
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: "水源总量",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
data: [5800, 5800, 5800, 6400, 6100, 6100, 6100, 5500, 6100, 6100, 6400],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#006DC2",
|
||
barBorderRadius: [0, 0, 0, 0]
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: "生产总量",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
data: [6200, 5800, 5800, 6200, 6000, 6000, 6000, 5200, 6000, 6000, 6200],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#18B586",
|
||
barBorderRadius: [0, 0, 0, 0]
|
||
}
|
||
},
|
||
},
|
||
{
|
||
name: "需水总量",
|
||
type: "line",
|
||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||
smooth: false, //平滑曲线显示
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
color: "#FFD700",
|
||
width:1,
|
||
},
|
||
data: [340, 330, 330, 380, 340, 320, 340, 300, 340, 320, 340]
|
||
}
|
||
]
|
||
};
|
||
setEchartsOptionGxnl(optionGxnl);
|
||
|
||
const data0 = [1, 1, 1, 1, 1];
|
||
const qslOption = {
|
||
tooltip: {
|
||
// 在鼠标悬停时触发显示
|
||
trigger: 'axis',
|
||
},
|
||
textStyle: {
|
||
color: "#C9C9C9",
|
||
},
|
||
legend: {
|
||
data: ['取水量'],
|
||
type: "scroll",
|
||
orient: 'vertical',
|
||
selectedMode: false,
|
||
right: "40%",
|
||
top: "2%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
left: "3%",
|
||
top: "20%",
|
||
bottom: "0%",
|
||
right: "0%",
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [
|
||
"2018",
|
||
"2019",
|
||
"2020",
|
||
"2021",
|
||
"2022",
|
||
],
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#ffffff",
|
||
opacity: 0.9,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
margin: 20, //刻度标签与轴线之间的距离。
|
||
textStyle: {
|
||
fontFamily: "Microsoft YaHei",
|
||
color: "#FFF",
|
||
},
|
||
fontSize: 12,
|
||
fontStyle: "bold"
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "(m³)",
|
||
max: 500,
|
||
min: 0,
|
||
nameTextStyle: {
|
||
color: '#fff',
|
||
opacity: 0.9
|
||
},
|
||
type: "value",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#ffffff",
|
||
opacity: 0.9,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontFamily: "Microsoft YaHei",
|
||
color: "#FFF",
|
||
},
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [250, 370, 370, 370, 370],
|
||
name:"取水量",
|
||
barMaxWidth: "auto",
|
||
barWidth: 30,
|
||
itemStyle: {
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
type: "linear",
|
||
global: false,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: "#00A9FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#66DDFF",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
// color: [, "#018bc1", "#96e092", "#DE9FB1", "#f06e90", "#f89e92",],
|
||
{//一蓝底
|
||
data: data0,
|
||
type: "pictorialBar",
|
||
barMaxWidth: "20",
|
||
symbol: "diamond",
|
||
color: "#66DDFF",
|
||
symbolOffset: ['0', "50%"],
|
||
symbolSize: [30, 10],
|
||
zlevel: 2,
|
||
tooltip: {
|
||
show: false // 不显示数据2的tooltip
|
||
}
|
||
},
|
||
{//一蓝盖
|
||
data: [250, 370, 370, 370, 370],
|
||
type: "pictorialBar",
|
||
barMaxWidth: "20",
|
||
symbol: "diamond",
|
||
symbolPosition: "end",
|
||
color: "#77C9FF",
|
||
symbolOffset: ['0', "-45%"],
|
||
symbolSize: [30, 10],
|
||
zlevel: 2,
|
||
tooltip: {
|
||
show: false // 不显示数据2的tooltip
|
||
}
|
||
},
|
||
|
||
],
|
||
|
||
markArea: {
|
||
silent: true,
|
||
|
||
},
|
||
|
||
};
|
||
setQslEchart(qslOption);
|
||
},[])
|
||
|
||
return (
|
||
<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: '25vh' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>近五年取水量</div>
|
||
</div>
|
||
<div className="tqyb-box1">
|
||
{/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
|
||
<ReactEcharts
|
||
option={qslEchart}
|
||
style={{width: "100%", height: 'calc( 100% - 10px )'}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>水源覆盖人口情况</div>
|
||
</div>
|
||
<div className="tqyb-box">
|
||
{/*<img src={`${process.env.PUBLIC_URL}/assets/syfgrkqk.png`} alt=""/>*/}
|
||
</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='map'>
|
||
<img style={{width:"100%",transform:"scale(2.6)",marginTop:"60px"}} src={`${process.env.PUBLIC_URL}/assets/sygl-map.png`} alt=""/>
|
||
</div>
|
||
|
||
<div className='right-box'>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>各乡镇供需能力</div>
|
||
</div>
|
||
{/*<div className="tqyb-box2">
|
||
<img src={`${process.env.PUBLIC_URL}/assets/gxzgxnl.png`} alt=""/>
|
||
</div>*/}
|
||
<div className="tqyb-box1">
|
||
{/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
|
||
<ReactEcharts
|
||
option={echartsOptionGxnl}
|
||
style={{width: "100%", height: 'calc( 100% - 10px )'}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>水质监测</div>
|
||
</div>
|
||
<div className="tqyb-box3">
|
||
{/*<img src={`${process.env.PUBLIC_URL}/assets/szjc.png`} alt=""/>*/}
|
||
</div>
|
||
</div>
|
||
<div className='box'>
|
||
<div className='box-title'>
|
||
<div className='title-item'>安防监测</div>
|
||
</div>
|
||
<div className="szjc-box">
|
||
{/*<img src={`${process.env.PUBLIC_URL}/assets/afjc.png`} alt=""/>*/}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default SyglPage |