diff --git a/public/assets/gxnl1.png b/public/assets/gxnl1.png new file mode 100644 index 0000000..9cc3feb Binary files /dev/null and b/public/assets/gxnl1.png differ diff --git a/public/assets/gxnl2.png b/public/assets/gxnl2.png new file mode 100644 index 0000000..c34f438 Binary files /dev/null and b/public/assets/gxnl2.png differ diff --git a/public/assets/jwnqsl.png b/public/assets/jwnqsl.png new file mode 100644 index 0000000..1a3dbb6 Binary files /dev/null and b/public/assets/jwnqsl.png differ diff --git a/public/assets/szjc.png b/public/assets/szjc.png new file mode 100644 index 0000000..8c752fe Binary files /dev/null and b/public/assets/szjc.png differ diff --git a/public/assets/tqyb.png b/public/assets/tqyb.png new file mode 100644 index 0000000..197c405 Binary files /dev/null and b/public/assets/tqyb.png differ diff --git a/public/assets/zdsy.png b/public/assets/zdsy.png new file mode 100644 index 0000000..2e2087e Binary files /dev/null and b/public/assets/zdsy.png differ diff --git a/src/components/DashboardLayout/style.less b/src/components/DashboardLayout/style.less index 95a5703..c8466ce 100644 --- a/src/components/DashboardLayout/style.less +++ b/src/components/DashboardLayout/style.less @@ -35,6 +35,7 @@ position: absolute; top:0; left:0; + z-index: 100; display: flex; justify-content: space-between; .txt{ diff --git a/src/views/Sygl/index.less b/src/views/Sygl/index.less index e69de29..f6a5dd6 100644 --- a/src/views/Sygl/index.less +++ b/src/views/Sygl/index.less @@ -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; + } +} diff --git a/src/views/Sygl/index.tsx b/src/views/Sygl/index.tsx index 50cd6ca..52d8331 100644 --- a/src/views/Sygl/index.tsx +++ b/src/views/Sygl/index.tsx @@ -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 ( -
- 水源管理 +
+
+
+
+
水源概况
+
+ +
+
+
+
+
+
重点水源
+
+ +
+
+
+
+
+
天气预报
+
+ +
+
+
+
+ +
+ +
+ +
+
+
+
近五年取水量
+
+ +
+
+
+
+
+
供需能力
+
+
+
+ + + 500万吨 + 水源总量 + +
+
+ + + 500万吨 + 需水总量 + +
+
+
+ +
+
+
+
+
+
+
水质监测
+
+ +
+
+
+
) } diff --git a/src/views/Zhsy/index.less b/src/views/Zhsy/index.less index 1a08ac9..943f3c1 100644 --- a/src/views/Zhsy/index.less +++ b/src/views/Zhsy/index.less @@ -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{