diff --git a/public/images/文字背景.png b/public/images/文字背景.png new file mode 100644 index 0000000..54c100d Binary files /dev/null and b/public/images/文字背景.png differ diff --git a/public/images/有害生物底座.png b/public/images/有害生物底座.png new file mode 100644 index 0000000..00d0a09 Binary files /dev/null and b/public/images/有害生物底座.png differ diff --git a/public/images/有害生物背景.png b/public/images/有害生物背景.png new file mode 100644 index 0000000..8f8c532 Binary files /dev/null and b/public/images/有害生物背景.png differ diff --git a/public/images/标准地.png b/public/images/标准地.png new file mode 100644 index 0000000..da308f9 Binary files /dev/null and b/public/images/标准地.png differ diff --git a/public/images/草地退化底座.png b/public/images/草地退化底座.png new file mode 100644 index 0000000..520c440 Binary files /dev/null and b/public/images/草地退化底座.png differ diff --git a/public/images/踏查点.png b/public/images/踏查点.png new file mode 100644 index 0000000..e5c9910 Binary files /dev/null and b/public/images/踏查点.png differ diff --git a/public/images/踏查路线.png b/public/images/踏查路线.png new file mode 100644 index 0000000..a9bb16e Binary files /dev/null and b/public/images/踏查路线.png differ diff --git a/src/components/Main/Content/index.js b/src/components/Main/Content/index.js index e1698c7..c6dedbf 100644 --- a/src/components/Main/Content/index.js +++ b/src/components/Main/Content/index.js @@ -6,6 +6,9 @@ import { FilterOutlined } from '@ant-design/icons' import Left from '../components/Home/Left'; import CdzyLeft from '../components/Cdzy/CdzyLeft'; import CdzyRight from '../components/Cdzy/CdzyRight'; +import CdthLeft from '../components/Cdth/CdthLeft'; +import YhswLeft from '../components/Yhsw/YhswLeft'; +import YhswRight from '../components/Yhsw/YhswRight'; const items = [{ name: '草地资源', @@ -15,11 +18,12 @@ const items = [{ }, { name: '草地退化', key: 'cdth', - LeftPanel: props => 2 + LeftPanel: CdthLeft, }, { name: '有害生物', key: 'yhsw', - LeftPanel: props => 3 + LeftPanel: YhswLeft, + RightPanel: YhswRight }, { name: '生态修复工程', key: 'stxfgc', diff --git a/src/components/Main/components/Cdth/CdthLeft/index.js b/src/components/Main/components/Cdth/CdthLeft/index.js new file mode 100644 index 0000000..b7dca17 --- /dev/null +++ b/src/components/Main/components/Cdth/CdthLeft/index.js @@ -0,0 +1,48 @@ +import { useState, useEffect } from 'react' +import LeftPanel from '../../../../common/LeftPanel'; +import LittleTitle from '../../../../common/LittleTitle'; +import HomeApi from '../../../../../utils/apis/HomeApi'; +import { toPng } from '../../../../../utils/helper/helper'; +import './index.less'; +import { Space } from 'antd'; +import CdthApi from '../../../../../utils/apis/CdthApi'; +export default function CdthLeft(props) { + + const [datas, setDatas] = useState(); + useEffect(() => { + HomeApi.item('cdth').then(resp => { + setDatas(resp.data); + }) + }, []) + + return + 指标数据 +
+ + {datas?.map((data, i) => { + return
+
+
{data.value}
+
({data.unit})
+
+
{data.name}
+
+ })} + +
+ ; +} \ No newline at end of file diff --git a/src/components/Main/components/Cdth/CdthLeft/index.less b/src/components/Main/components/Cdth/CdthLeft/index.less new file mode 100644 index 0000000..63e17ff --- /dev/null +++ b/src/components/Main/components/Cdth/CdthLeft/index.less @@ -0,0 +1,24 @@ +.cdth-left { + .value { + font-size: 24px; + font-family: Adobe Heiti Std; + font-weight: bold; + color: #6ACBFF; + padding-top: 20px; + background: linear-gradient(0deg, #01BEFC 0%, #FFFFFF 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .name { + margin-top: -10px; + font-size: 18px; + color: #EFF0F1; + } + + .unit { + color: #DAEEF9; + opacity: 0.8; + font-size: 16px; + } +} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswLeft/Fsqmjtj/echartsOptions.js b/src/components/Main/components/Yhsw/YhswLeft/Fsqmjtj/echartsOptions.js new file mode 100644 index 0000000..f3ec0bd --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswLeft/Fsqmjtj/echartsOptions.js @@ -0,0 +1,72 @@ +import * as echarts from 'echarts' +import _ from 'lodash'; +export const getOption = (datas) => { + datas = datas?.reverse(); + let max = _.max(datas?.map(data => data.acreage)); + max = max * 1.2 + const colors = ['#0CEAFC', '#4A76F8', '#E3A41C', '#1E58FC']; + const sum = _.sumBy(datas, 'acreage'); + return { + legend: { + show: true, + orient: 'vertical', + right: 'center', + icon: 'circle', + itemWidth: 10, + itemHeight: 10, + top: 'bottom', + textStyle: { + color: '#fff', + fontSize: 14, + }, + itemGap: 16, + formatter: function (name) { + let index = datas.findIndex((item) => item.name === name); + const item = datas[index]; + if (!item) { + return null; + } + const unit = item.unit; + const valueText = item.acreage + return `${item.name} 面积：${valueText} ${unit} 占比：${Math.round(valueText / sum * 10000) / 100}%`; + }, + }, + series: [ + { + name: 'Nightingale Chart', + type: 'pie', + radius: ['0', '100'], + center: ['50%', '40%'], + // roseType: 'area', + color: colors, + label: { + show: false + }, + data: datas?.map?.(data => { + return { + name: data.name, + value: data.acreage + } + }) + }, + { + type: 'pie', + radius: ['112', '114'], + data: [ + { + value: 50, + name: '', + itemStyle: { + color: '#ffffff4d' + } + }, + ], + center: ['50%', '40%'], + label: { + show: false + } + } + ] + }; + +} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswLeft/Fsqmjtj/index.js b/src/components/Main/components/Yhsw/YhswLeft/Fsqmjtj/index.js new file mode 100644 index 0000000..499e9da --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswLeft/Fsqmjtj/index.js @@ -0,0 +1,27 @@ +import { useState, useEffect, useRef } from 'react' +import useEcharts from '../../../../../hooks/useEcharts'; +import CdzyApi from '../../../../../../utils/apis/CdzyApi'; +import { getOption } from './echartsOptions'; +import LittleTitle from '../../../../../common/LittleTitle'; +import YhswApi from '../../../../../../utils/apis/YhswApi'; + +export default function Fsqmjtj(props) { + const [data, setData] = useState(); + const ref = useRef(); + const chart = useEcharts(ref.current); + useEffect(() => { + YhswApi.fsq().then(resp => { + setData(resp.data); + }) + }, []); + useEffect(() => { + if (chart && data) { + const options = getOption(data); + chart.setOption(options); + } + }, [chart, data]); + return
+ 发生区面积统计 +
+
+} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswLeft/index.js b/src/components/Main/components/Yhsw/YhswLeft/index.js new file mode 100644 index 0000000..53dafba --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswLeft/index.js @@ -0,0 +1,62 @@ +import { useState, useEffect } from 'react' +import LeftPanel from '../../../../common/LeftPanel'; +import LittleTitle from '../../../../common/LittleTitle'; +import HomeApi from '../../../../../utils/apis/HomeApi'; +import { toPng } from '../../../../../utils/helper/helper'; +import './index.less'; +import { Space } from 'antd'; +import CdthApi from '../../../../../utils/apis/CdthApi'; +import Fsqmjtj from './Fsqmjtj'; +export default function YhswLeft(props) { + + const [datas, setDatas] = useState(); + useEffect(() => { + HomeApi.item('yhsw').then(resp => { + setDatas(resp.data); + }) + CdthApi.acreageCount() + }, []) + + return + 指标数据 +
+
+ {datas?.map((data, i) => { + return
+
+ +
+
+ +
{data.name}
+
{data.value}
+
({data.unit})
+ +
+
+ })} +
+
+ + ; +} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswLeft/index.less b/src/components/Main/components/Yhsw/YhswLeft/index.less new file mode 100644 index 0000000..558b413 --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswLeft/index.less @@ -0,0 +1,22 @@ +.yhsw-left { + .value { + font-size: 24px; + font-family: Adobe Heiti Std; + font-weight: bold; + color: #6ACBFF; + background: linear-gradient(0deg, #01BEFC 0%, #FFFFFF 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .name { + font-size: 18px; + color: #EFF0F1; + } + + .unit { + color: #DAEEF9; + opacity: 0.8; + font-size: 16px; + } +} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswRight/Whqmjtj/echartsOptions.js b/src/components/Main/components/Yhsw/YhswRight/Whqmjtj/echartsOptions.js new file mode 100644 index 0000000..8f88a39 --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswRight/Whqmjtj/echartsOptions.js @@ -0,0 +1,80 @@ +import * as echarts from 'echarts' +import _ from 'lodash'; +export const getOption = (datas) => { + datas = datas?.reverse(); + let max = _.max(datas?.map(data => data.acreage)); + max = max * 1.2 + const colors = ['#0CEAFC', '#4A76F8', '#E3A41C', '#1E58FC']; + const sum = _.sumBy(datas, 'acreage'); + return { + legend: { + show: true, + orient: 'vertical', + right: 'center', + icon: 'circle', + itemWidth: 10, + itemHeight: 10, + top: 'bottom', + textStyle: { + color: '#fff', + fontSize: 14, + }, + itemGap: 16, + formatter: function (name) { + let index = datas.findIndex((item) => item.name === name); + const item = datas[index]; + if (!item) { + return null; + } + const unit = item.unit; + const valueText = item.acreage + return `${item.name} 面积：${valueText} ${unit} 占比：${Math.round(valueText / sum * 10000) / 100}%`; + }, + }, + series: [ + { + showEmptyCircle: true, + name: '', + type: 'pie', + minAngle: 10, + radius: ['70', '100'], + center: ['50%', '40%'], + // roseType: 'area', + color: colors, + label: { + show: false + }, + + // itemStyle: { + // borderRadius: 5, + // borderColor: '#ffffff00', + // borderWidth: 5 + // }, + data: datas?.map?.(data => { + return { + name: data.name, + value: data.acreage + } + }) + }, + { + type: 'pie', + radius: ['112', '114'], + data: [ + { + value: 50, + name: '', + itemStyle: { + color: '#ffffff4d' + } + }, + ], + center: ['50%', '40%'], + label: { + show: false + } + } + ] + }; + +} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswRight/Whqmjtj/index.js b/src/components/Main/components/Yhsw/YhswRight/Whqmjtj/index.js new file mode 100644 index 0000000..e13f0b6 --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswRight/Whqmjtj/index.js @@ -0,0 +1,27 @@ +import { useState, useEffect, useRef } from 'react' +import useEcharts from '../../../../../hooks/useEcharts'; +import CdzyApi from '../../../../../../utils/apis/CdzyApi'; +import { getOption } from './echartsOptions'; +import LittleTitle from '../../../../../common/LittleTitle'; +import YhswApi from '../../../../../../utils/apis/YhswApi'; + +export default function Whqmjtj(props) { + const [data, setData] = useState(); + const ref = useRef(); + const chart = useEcharts(ref.current); + useEffect(() => { + YhswApi.whq().then(resp => { + setData(resp.data); + }) + }, []); + useEffect(() => { + if (chart && data) { + const options = getOption(data); + chart.setOption(options); + } + }, [chart, data]); + return
+ 危害区面积统计 +
+
+} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswRight/Ysqmjtj/echartsOptions.js b/src/components/Main/components/Yhsw/YhswRight/Ysqmjtj/echartsOptions.js new file mode 100644 index 0000000..f3ec0bd --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswRight/Ysqmjtj/echartsOptions.js @@ -0,0 +1,72 @@ +import * as echarts from 'echarts' +import _ from 'lodash'; +export const getOption = (datas) => { + datas = datas?.reverse(); + let max = _.max(datas?.map(data => data.acreage)); + max = max * 1.2 + const colors = ['#0CEAFC', '#4A76F8', '#E3A41C', '#1E58FC']; + const sum = _.sumBy(datas, 'acreage'); + return { + legend: { + show: true, + orient: 'vertical', + right: 'center', + icon: 'circle', + itemWidth: 10, + itemHeight: 10, + top: 'bottom', + textStyle: { + color: '#fff', + fontSize: 14, + }, + itemGap: 16, + formatter: function (name) { + let index = datas.findIndex((item) => item.name === name); + const item = datas[index]; + if (!item) { + return null; + } + const unit = item.unit; + const valueText = item.acreage + return `${item.name} 面积：${valueText} ${unit} 占比：${Math.round(valueText / sum * 10000) / 100}%`; + }, + }, + series: [ + { + name: 'Nightingale Chart', + type: 'pie', + radius: ['0', '100'], + center: ['50%', '40%'], + // roseType: 'area', + color: colors, + label: { + show: false + }, + data: datas?.map?.(data => { + return { + name: data.name, + value: data.acreage + } + }) + }, + { + type: 'pie', + radius: ['112', '114'], + data: [ + { + value: 50, + name: '', + itemStyle: { + color: '#ffffff4d' + } + }, + ], + center: ['50%', '40%'], + label: { + show: false + } + } + ] + }; + +} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswRight/Ysqmjtj/index.js b/src/components/Main/components/Yhsw/YhswRight/Ysqmjtj/index.js new file mode 100644 index 0000000..db9b4da --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswRight/Ysqmjtj/index.js @@ -0,0 +1,30 @@ +import { useState, useEffect, useRef } from 'react' +import useEcharts from '../../../../../hooks/useEcharts'; +import CdzyApi from '../../../../../../utils/apis/CdzyApi'; +import { getOption } from './echartsOptions'; +import LittleTitle from '../../../../../common/LittleTitle'; +import YhswApi from '../../../../../../utils/apis/YhswApi'; + +export default function Ysqmjtj(props) { + const [data, setData] = useState(); + const ref = useRef(); + const chart = useEcharts(ref.current); + useEffect(() => { + YhswApi.fsq().then(resp => { + setData(resp.data); + }) + }, []); + useEffect(() => { + if (chart && data) { + const options = getOption(data); + chart.setOption(options); + } + }, [chart, data]); + return
+ 宜生区面积统计 +
+
+} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswRight/index.js b/src/components/Main/components/Yhsw/YhswRight/index.js new file mode 100644 index 0000000..71ca5a6 --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswRight/index.js @@ -0,0 +1,29 @@ +import { useState, useEffect } from 'react' +import LeftPanel from '../../../../common/LeftPanel'; +import LittleTitle from '../../../../common/LittleTitle'; +import HomeApi from '../../../../../utils/apis/HomeApi'; +import { toPng } from '../../../../../utils/helper/helper'; +import './index.less'; +import { Space } from 'antd'; +import CdthApi from '../../../../../utils/apis/CdthApi'; +import Fsqmjtj from './Whqmjtj'; +import RightPanel from '../../../../common/RightPanel'; +import Whqmjtj from './Whqmjtj'; +import Ysqmjtj from './Ysqmjtj'; +export default function YhswRight(props) { + + const [datas, setDatas] = useState(); + useEffect(() => { + HomeApi.item('yhsw').then(resp => { + setDatas(resp.data); + }) + CdthApi.acreageCount() + }, []) + + return + + + ; +} \ No newline at end of file diff --git a/src/components/Main/components/Yhsw/YhswRight/index.less b/src/components/Main/components/Yhsw/YhswRight/index.less new file mode 100644 index 0000000..558b413 --- /dev/null +++ b/src/components/Main/components/Yhsw/YhswRight/index.less @@ -0,0 +1,22 @@ +.yhsw-left { + .value { + font-size: 24px; + font-family: Adobe Heiti Std; + font-weight: bold; + color: #6ACBFF; + background: linear-gradient(0deg, #01BEFC 0%, #FFFFFF 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .name { + font-size: 18px; + color: #EFF0F1; + } + + .unit { + color: #DAEEF9; + opacity: 0.8; + font-size: 16px; + } +} \ No newline at end of file diff --git a/src/components/Main/index.js b/src/components/Main/index.js index 4115dca..b87fdd0 100644 --- a/src/components/Main/index.js +++ b/src/components/Main/index.js @@ -3,21 +3,61 @@ import GlobalContext from '../../utils/GlobalContext'; import './index.less'; import Header from './Header'; import Content from './Content'; +import { useSize } from 'ahooks' export default function Main(props) { const { siteTitle } = useContext(GlobalContext); - const rootRef = useRef(); + // const rootRef = useRef(); useEffect(() => { if (siteTitle) { document.title = siteTitle; } }, [siteTitle]) - return
-
-
-
-
- -
+ const [style, setStyle] = useState(); + const rootRef = useRef(); + const size = useSize(rootRef) + + useEffect(() => { + // let screenSize = defaultSize; + // if (!screenSize) { + let screenSize = [1920, 1080] + // } + // screenSize[1] = (document.body.offsetHeight / document.body.offsetWidth) * screenSize[0]; + screenSize[0] = (document.body.offsetWidth / document.body.offsetHeight) * screenSize[1]; + // console.log(rootRef?.current?.offsetWidth / rootRef?.current?.offsetHeight) + if (size) { + const { width, height } = size; + const resw = screenSize[0] / width; + const resh = screenSize[1] / height; + let res = Math.max(resw, resh); + + let scale = 1 / res; + + const realWidth = screenSize[0] * scale; + const realHeight = screenSize[1] * scale; + + let left = (width - realWidth) / 2; + let top = (height - realHeight) / 2; + setStyle({ + transform: `scale(${scale})`, + left: left, + top: top, + scale, + width: screenSize[0], + height: screenSize[1], + transformOrigin: '0 0' + }) + } + }, [size]); + + return
+ {style &&
+
+
+
+
+ +
+
}
; } \ No newline at end of file diff --git a/src/css/index.less b/src/css/index.less index 2a605de..71c840e 100644 --- a/src/css/index.less +++ b/src/css/index.less @@ -1,3 +1,11 @@ +body, +html { + width: 100%; + height: 100%; + margin: 0; + ; +} + .pdl5 { padding-left: 5px; } diff --git a/src/utils/apis/CdthApi.js b/src/utils/apis/CdthApi.js new file mode 100644 index 0000000..ca25510 --- /dev/null +++ b/src/utils/apis/CdthApi.js @@ -0,0 +1,10 @@ + + +import _ from 'lodash'; +import FetchHelper from '../helper/fetch-helper'; + +export default class CdthApi { + static acreageCount() { + return FetchHelper.getJson(`/openApi/cdth/acreageCount`); + } +} \ No newline at end of file diff --git a/src/utils/apis/YhswApi.js b/src/utils/apis/YhswApi.js new file mode 100644 index 0000000..765e74f --- /dev/null +++ b/src/utils/apis/YhswApi.js @@ -0,0 +1,13 @@ + + +import _ from 'lodash'; +import FetchHelper from '../helper/fetch-helper'; + +export default class YhswApi { + static fsq() { + return FetchHelper.getJson(`/openApi/yhsw/fsq`); + } + static whq() { + return FetchHelper.getJson(`/openApi/yhsw/whq`); + } +} \ No newline at end of file