1

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',

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 <LeftPanel className="cdth-left layout-v" style={{
+        flex: 1
+    }}>
+        <LittleTitle>指标数据</LittleTitle>
+        <div className='layout-h center'>
+            <Space size={[48, 16]} wrap style={{
+                // marginBottom: 36
+            }}>
+                {datas?.map((data, i) => {
+                    return <div className='layout-v center' key={i} style={{
+                        // marginRight: 16
+                    }}>
+                        <div className='layout-v center' style={{
+                            background: `url(${toPng('草地退化底座')})`,
+                            width: 148,
+                            height: 148
+                        }}>
+                            <div className='value'>{data.value}</div>
+                            <div className='unit'>({data.unit})</div>
+                        </div>
+                        <div className='name layout-h center j-center' style={{
+                            background: `url(${toPng('文字背景')})`,
+                            width: 109,
+                            height: 34
+                        }}>{data.name}</div>
+                    </div>
+                })}
+            </Space>
+        </div>
+    </LeftPanel>;
+}

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;
+    }
+}

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
+                }
+            }
+        ]
+    };
+
+}

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 <div className='fill h0 layout-v'>
+        <LittleTitle>发生区面积统计</LittleTitle>
+        <div ref={ref} className="h0 fill"></div>
+    </div>
+}

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 <LeftPanel className="yhsw-left layout-v" style={{
+        flex: 1
+    }}>
+        <LittleTitle>指标数据</LittleTitle>
+        <div className='layout-h center fill h0' style={{
+            marginBottom: 36
+        }}>
+            <div className='layout-v center'>
+                {datas?.map((data, i) => {
+                    return <div className='layout-h' key={i} style={{
+                        // marginRight: 16
+                        alignItems: "flex-end"
+                    }}>
+                        <div className='layout-v center' style={{
+                            background: `url(${toPng('有害生物底座')})`,
+                            width: 120,
+                            height: 120,
+                        }}>
+                            <img alt='' src={toPng(data.name)} style={{
+                                marginTop: 12
+                            }} />
+                        </div>
+                        <div className='layout-h center j-center' style={{
+                            background: `url(${toPng('有害生物背景')})`,
+                            width: 307,
+                            height: 60,
+                            marginLeft: -45
+                        }}>
+                            <Space size={24} className='layout-h' style={{
+                                paddingBottom: 10
+                            }}>
+                                <div className='name'>{data.name}</div>
+                                <div className='value'>{data.value}</div>
+                                <div className='unit'>({data.unit})</div>
+                            </Space>
+                        </div>
+                    </div>
+                })}
+            </div>
+        </div>
+        <Fsqmjtj />
+    </LeftPanel>;
+}

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;
+    }
+}

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
+                }
+            }
+        ]
+    };
+
+}

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 <div className='fill h0 layout-v'>
+        <LittleTitle>危害区面积统计</LittleTitle>
+        <div ref={ref} className="h0 fill"></div>
+    </div>
+}

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
+                }
+            }
+        ]
+    };
+
+}

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 <div className='fill h0 layout-v' style={{
+        marginBottom: 24,
+        marginTop: 30
+    }}>
+        <LittleTitle>宜生区面积统计</LittleTitle>
+        <div ref={ref} className="h0 fill"></div>
+    </div>
+}

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 <RightPanel className="yhsw-right layout-v" style={{
+        flex: 1
+    }}>
+        <Whqmjtj />
+        <Ysqmjtj />
+    </RightPanel>;
+}

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;
+    }
+}

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 <div className='layout-v main' ref={rootRef}>
-        <div className='header layout-h'>
-            <Header rootRef={rootRef} />
-        </div>
-        <div className='fill'>
-            <Content />
-        </div>
+    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 <div className='main' ref={rootRef}>
+        {style && <div className='layout-v' style={style}>
+            <div className='header layout-h'>
+                <Header rootRef={rootRef} />
+            </div>
+            <div className='fill h0'>
+                <Content />
+            </div>
+        </div>}
     </div>;
 }

src/css/index.less

@@ -1,3 +1,11 @@
+body,
+html {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    ;
+}
+
 .pdl5 {
     padding-left: 5px;
 }

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`);
+    }
+}

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`);
+    }
+}