master
Swanky
2 years ago
parent
894a132122
commit
ed2b91f3bb
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,246 @@ |
|||||||
|
import * as echarts from 'echarts' |
||||||
|
import { } from 'echarts-gl' |
||||||
|
import _ from 'lodash'; |
||||||
|
export const getOption = (datas) => { |
||||||
|
const colors = ['#0053CF', '#F8B551'] |
||||||
|
let selectedIndex = ''; |
||||||
|
let hoveredIndex = ''; |
||||||
|
const sum = _.sumBy(datas, 'value'); |
||||||
|
let option = getPie3D( |
||||||
|
datas?.map((data, i) => { |
||||||
|
return { |
||||||
|
name: data.name, |
||||||
|
value: data.value, |
||||||
|
itemStyle: { |
||||||
|
color: colors[i], |
||||||
|
}, |
||||||
|
} |
||||||
|
}), |
||||||
|
0.4 |
||||||
|
); |
||||||
|
// 生成扇形的曲面参数方程
|
||||||
|
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { |
||||||
|
// 计算
|
||||||
|
const midRatio = (startRatio + endRatio) / 2; |
||||||
|
|
||||||
|
const startRadian = startRatio * Math.PI * 2; |
||||||
|
const endRadian = endRatio * Math.PI * 2; |
||||||
|
const midRadian = midRatio * Math.PI * 2; |
||||||
|
|
||||||
|
// 如果只有一个扇形，则不实现选中效果。
|
||||||
|
if (startRatio === 0 && endRatio === 1) { |
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
isSelected = false; |
||||||
|
} |
||||||
|
|
||||||
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
k = typeof k !== 'undefined' ? k : 1 / 3; |
||||||
|
|
||||||
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||||
|
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; |
||||||
|
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; |
||||||
|
|
||||||
|
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||||
|
const hoverRate = isHovered ? 1.05 : 1; |
||||||
|
|
||||||
|
// 返回曲面参数方程
|
||||||
|
return { |
||||||
|
u: { |
||||||
|
min: -Math.PI, |
||||||
|
max: Math.PI * 3, |
||||||
|
step: Math.PI / 32, |
||||||
|
}, |
||||||
|
|
||||||
|
v: { |
||||||
|
min: 0, |
||||||
|
max: Math.PI * 2, |
||||||
|
step: Math.PI / 20, |
||||||
|
}, |
||||||
|
|
||||||
|
x(u, v) { |
||||||
|
if (u < startRadian) { |
||||||
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate; |
||||||
|
} |
||||||
|
if (u > endRadian) { |
||||||
|
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate; |
||||||
|
} |
||||||
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; |
||||||
|
}, |
||||||
|
|
||||||
|
y(u, v) { |
||||||
|
if (u < startRadian) { |
||||||
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate; |
||||||
|
} |
||||||
|
if (u > endRadian) { |
||||||
|
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate; |
||||||
|
} |
||||||
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; |
||||||
|
}, |
||||||
|
|
||||||
|
z(u, v) { |
||||||
|
if (u < -Math.PI * 0.5) { |
||||||
|
return Math.sin(u); |
||||||
|
} |
||||||
|
if (u > Math.PI * 2.5) { |
||||||
|
return Math.sin(u) * h * 0.1; |
||||||
|
} |
||||||
|
// 当前图形的高度是Z根据h（每个value的值决定的）
|
||||||
|
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
// 生成模拟 3D 饼图的配置项
|
||||||
|
function getPie3D(pieData, internalDiameterRatio) { |
||||||
|
const series = []; |
||||||
|
// 总和
|
||||||
|
let sumValue = 0; |
||||||
|
let startValue = 0; |
||||||
|
let endValue = 0; |
||||||
|
const legendData = []; |
||||||
|
const k = |
||||||
|
typeof internalDiameterRatio !== 'undefined' |
||||||
|
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) |
||||||
|
: 1 / 3; |
||||||
|
|
||||||
|
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||||
|
for (let i = 0; i < pieData.length; i += 1) { |
||||||
|
sumValue += pieData[i].value; |
||||||
|
|
||||||
|
const seriesItem = { |
||||||
|
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name, |
||||||
|
type: 'surface', |
||||||
|
parametric: true, |
||||||
|
wireframe: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
pieData: pieData[i], |
||||||
|
pieStatus: { |
||||||
|
selected: false, |
||||||
|
hovered: false, |
||||||
|
k, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
if (typeof pieData[i].itemStyle !== 'undefined') { |
||||||
|
const { itemStyle } = pieData[i]; |
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null; |
||||||
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
typeof pieData[i].itemStyle.opacity !== 'undefined' |
||||||
|
? (itemStyle.opacity = pieData[i].itemStyle.opacity) |
||||||
|
: null; |
||||||
|
|
||||||
|
seriesItem.itemStyle = itemStyle; |
||||||
|
} |
||||||
|
series.push(seriesItem); |
||||||
|
} |
||||||
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||||
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||||
|
console.log(series); |
||||||
|
for (let i = 0; i < series.length; i += 1) { |
||||||
|
endValue = startValue + series[i].pieData.value; |
||||||
|
|
||||||
|
series[i].pieData.startRatio = startValue / sumValue; |
||||||
|
series[i].pieData.endRatio = endValue / sumValue; |
||||||
|
series[i].parametricEquation = getParametricEquation( |
||||||
|
series[i].pieData.startRatio, |
||||||
|
series[i].pieData.endRatio, |
||||||
|
false, |
||||||
|
false, |
||||||
|
k, |
||||||
|
// 我这里做了一个处理，使除了第一个之外的值都是10
|
||||||
|
series[i].pieData.value === series[0].pieData.value ? 35 : 10 |
||||||
|
); |
||||||
|
|
||||||
|
startValue = endValue; |
||||||
|
|
||||||
|
legendData.push(series[i].name); |
||||||
|
} |
||||||
|
|
||||||
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||||
|
return { |
||||||
|
// animation: false,
|
||||||
|
tooltip: { |
||||||
|
formatter: (params) => { |
||||||
|
if (params.seriesName !== 'mouseoutSeries') { |
||||||
|
return `${params.seriesName |
||||||
|
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color |
||||||
|
};"></span>${option.series[params.seriesIndex].pieData.value}`; |
||||||
|
} |
||||||
|
return ''; |
||||||
|
}, |
||||||
|
}, |
||||||
|
xAxis3D: { |
||||||
|
min: -1.0, |
||||||
|
max: 1.0, |
||||||
|
}, |
||||||
|
yAxis3D: { |
||||||
|
min: -1.0, |
||||||
|
max: 1.0, |
||||||
|
}, |
||||||
|
zAxis3D: { |
||||||
|
min: -0.5, |
||||||
|
max: 0.01, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
data: datas?.map(data => data.name), |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
fontSize: 15, |
||||||
|
lineHeight: 20 |
||||||
|
// rich: richObj
|
||||||
|
}, |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 10, |
||||||
|
itemGap: 20, |
||||||
|
icon: 'circle', |
||||||
|
formatter: function (name) { |
||||||
|
|
||||||
|
let index = datas.findIndex((item) => item.name === name); |
||||||
|
const item = datas[index]; |
||||||
|
const p = Math.round(item.value / sum * 10000) / 100 |
||||||
|
return `${item.name}： ${p}% \r\n${item.value} ${item.unit}`; |
||||||
|
}, |
||||||
|
right: '50', |
||||||
|
top: '80', //居右显示
|
||||||
|
}, |
||||||
|
grid3D: { |
||||||
|
show: false, |
||||||
|
boxHeight: 5, |
||||||
|
top: -40, |
||||||
|
left: -120, |
||||||
|
viewControl: { |
||||||
|
// 3d效果可以放大、旋转等，请自己去查看官方配置
|
||||||
|
alpha: 25, |
||||||
|
beta: 0, |
||||||
|
rotateSensitivity: 1, |
||||||
|
zoomSensitivity: 0, |
||||||
|
panSensitivity: 0, |
||||||
|
distance: 300, |
||||||
|
}, |
||||||
|
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
|
||||||
|
postEffect: { |
||||||
|
// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
|
||||||
|
enable: false, |
||||||
|
bloom: { |
||||||
|
enable: true, |
||||||
|
bloomIntensity: 0.1, |
||||||
|
}, |
||||||
|
SSAO: { |
||||||
|
enable: true, |
||||||
|
quality: 'medium', |
||||||
|
radius: 2, |
||||||
|
}, |
||||||
|
// temporalSuperSampling: {
|
||||||
|
// enable: true,
|
||||||
|
// },
|
||||||
|
}, |
||||||
|
}, |
||||||
|
series, |
||||||
|
}; |
||||||
|
} |
||||||
|
return option; |
||||||
|
} |
||||||
@ -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 HomeApi from '../../../../../../utils/apis/HomeApi'; |
||||||
|
|
||||||
|
export default function Zbsj(props) { |
||||||
|
const [data, setData] = useState(); |
||||||
|
const ref = useRef(); |
||||||
|
const chart = useEcharts(ref.current); |
||||||
|
useEffect(() => { |
||||||
|
|
||||||
|
HomeApi.item('cdzhy').then(resp => { |
||||||
|
setData(resp.data); |
||||||
|
}) |
||||||
|
}, []); |
||||||
|
useEffect(() => { |
||||||
|
if (chart && data) { |
||||||
|
const options = getOption(data); |
||||||
|
chart.setOption(options); |
||||||
|
} |
||||||
|
}, [chart, data]); |
||||||
|
return <> |
||||||
|
<LittleTitle>指标数据</LittleTitle> |
||||||
|
<div ref={ref} className="" style={{ |
||||||
|
height: 350 |
||||||
|
}}></div> |
||||||
|
</> |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
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 Zbsj from './Zbsj'; |
||||||
|
export default function CdzzyLeft(props) { |
||||||
|
|
||||||
|
|
||||||
|
return <LeftPanel className="cdzy-left layout-v" style={{ |
||||||
|
flex: 1 |
||||||
|
}}> |
||||||
|
<Zbsj /> |
||||||
|
</LeftPanel>; |
||||||
|
} |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
.cdzy-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: #A6DFFD; |
||||||
|
opacity: 0.8; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
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 = ['#1F68E2', '#E2C334', '#00E9CB', '#44DA84', '#747DF8', '#31B9FF']; |
||||||
|
const sum = _.sumBy(datas, 'acreage'); |
||||||
|
return { |
||||||
|
tooltip:{}, |
||||||
|
legend: { |
||||||
|
show: true, |
||||||
|
orient: 'vertical', |
||||||
|
right: '0', |
||||||
|
icon: 'circle', |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 10, |
||||||
|
top: 'center', |
||||||
|
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}`; |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
showEmptyCircle: true, |
||||||
|
name: '', |
||||||
|
type: 'pie', |
||||||
|
minAngle: 10, |
||||||
|
radius: ['50', '80'], |
||||||
|
center: ['30%', '50%'], |
||||||
|
// 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: ['92', '94'], |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 50, |
||||||
|
name: '', |
||||||
|
itemStyle: { |
||||||
|
color: '#ffffff4d' |
||||||
|
} |
||||||
|
}, |
||||||
|
], |
||||||
|
center: ['30%', '50%'], |
||||||
|
label: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
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'; |
||||||
|
import StxhApi from '../../../../../../utils/apis/StxhApi'; |
||||||
|
|
||||||
|
export default function Mjtj(props) { |
||||||
|
const [data, setData] = useState(); |
||||||
|
const ref = useRef(); |
||||||
|
const chart = useEcharts(ref.current); |
||||||
|
useEffect(() => { |
||||||
|
StxhApi.acreageCount().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> |
||||||
|
} |
||||||
@ -0,0 +1,73 @@ |
|||||||
|
import * as echarts from 'echarts' |
||||||
|
import _ from 'lodash'; |
||||||
|
export const getOption = (datas) => { |
||||||
|
datas = datas?.reverse(); |
||||||
|
let max = _.max(datas?.map(data => data.money)); |
||||||
|
max = max * 1.2 |
||||||
|
const colors = ['#1F68E2', '#E2C334', '#00E9CB', '#44DA84', '#747DF8', '#31B9FF']; |
||||||
|
const sum = _.sumBy(datas, 'money'); |
||||||
|
return { |
||||||
|
tooltip:{}, |
||||||
|
legend: { |
||||||
|
show: true, |
||||||
|
orient: 'vertical', |
||||||
|
right: '0', |
||||||
|
icon: 'circle', |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 10, |
||||||
|
top: 'center', |
||||||
|
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.money |
||||||
|
return `${item.name} ${valueText} ${unit}`; |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
type: 'pie', |
||||||
|
radius: ['0', '80'], |
||||||
|
center: ['30%', '50%'], |
||||||
|
// roseType: 'area',
|
||||||
|
color: colors, |
||||||
|
label: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
data: datas?.map?.(data => { |
||||||
|
return { |
||||||
|
name: data.name, |
||||||
|
value: data.money |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'pie', |
||||||
|
radius: ['92', '94'], |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 50, |
||||||
|
name: '', |
||||||
|
itemStyle: { |
||||||
|
color: '#ffffff4d' |
||||||
|
} |
||||||
|
}, |
||||||
|
], |
||||||
|
center: ['30%', '50%'], |
||||||
|
label: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
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'; |
||||||
|
import StxhApi from '../../../../../../utils/apis/StxhApi'; |
||||||
|
|
||||||
|
export default function Tzjetj(props) { |
||||||
|
const [data, setData] = useState(); |
||||||
|
const ref = useRef(); |
||||||
|
const chart = useEcharts(ref.current); |
||||||
|
useEffect(() => { |
||||||
|
StxhApi.moneyCount().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> |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import { useState, useEffect } from 'react' |
||||||
|
import LeftPanel from '../../../../common/LeftPanel'; |
||||||
|
import LittleTitle from '../../../../common/LittleTitle'; |
||||||
|
import HomeApi from '../../../../../utils/apis/HomeApi'; |
||||||
|
import { Space } from 'antd'; |
||||||
|
import { toPng } from '../../../../../utils/helper/helper'; |
||||||
|
import './index.less'; |
||||||
|
import Mjtj from './Mjtj'; |
||||||
|
import Tzjetj from './Tzjetj'; |
||||||
|
export default function StxfgcLeft(props) { |
||||||
|
|
||||||
|
const [datas, setDatas] = useState(); |
||||||
|
useEffect(() => { |
||||||
|
HomeApi.item('stxh').then(resp => { |
||||||
|
setDatas(resp.data); |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
return <LeftPanel className="stxfgc-left layout-v" style={{ |
||||||
|
flex: 1 |
||||||
|
}}> |
||||||
|
<LittleTitle>指标数据</LittleTitle> |
||||||
|
<div className='layout-h center fill h0' style={{ |
||||||
|
marginBottom: 24, |
||||||
|
marginTop: 16 |
||||||
|
}}> |
||||||
|
<div className='layout-v center'> |
||||||
|
{datas?.map((data, i) => { |
||||||
|
return <div className='layout-h' key={i} style={{ |
||||||
|
// marginRight: 16
|
||||||
|
alignItems: "flex-end", |
||||||
|
marginBottom: 16 |
||||||
|
}}> |
||||||
|
<img alt='' src={toPng('生态修复工程图标')} style={{ |
||||||
|
width: 72, |
||||||
|
height: 72, |
||||||
|
paddingBottom: 3 |
||||||
|
}} /> |
||||||
|
<div className='layout-h' style={{ |
||||||
|
background: `url(${toPng('生态修复工程背景')})`, |
||||||
|
width: 387, |
||||||
|
height: 70, |
||||||
|
marginLeft: -45 |
||||||
|
}}> |
||||||
|
<Space className='layout-h' style={{ |
||||||
|
paddingBottom: 10, |
||||||
|
paddingLeft: 60 |
||||||
|
}}> |
||||||
|
<div className='name'>{data.name}</div> |
||||||
|
<div className='value'>{data.value}</div> |
||||||
|
<div className='unit'>({data.unit})</div> |
||||||
|
</Space> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Mjtj /> |
||||||
|
<Tzjetj /> |
||||||
|
</LeftPanel>; |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
.stxfgc-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; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
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'; |
||||||
|
export default function WlwsbLeft(props) { |
||||||
|
|
||||||
|
const [datas, setDatas] = useState(); |
||||||
|
useEffect(() => { |
||||||
|
HomeApi.item('wlw').then(resp => { |
||||||
|
setDatas(resp.data); |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
return <LeftPanel className="wlwsb-left layout-v" style={{ |
||||||
|
flex: 1 |
||||||
|
}}> |
||||||
|
<LittleTitle>指标数据</LittleTitle> |
||||||
|
<div className='layout-h center' style={{ |
||||||
|
marginBottom: 36 |
||||||
|
}}> |
||||||
|
{datas?.map((data, i) => { |
||||||
|
return <div className='layout-v center' key={i} style={{ |
||||||
|
marginRight: 16 |
||||||
|
}}> |
||||||
|
<div className='layout-h center j-center' style={{ |
||||||
|
background: `url(${toPng('物联网底座')})`, |
||||||
|
width: 100, |
||||||
|
height: 100 |
||||||
|
}}> |
||||||
|
<div className='layout-h center j-center' style={{ |
||||||
|
background: `url(${toPng(data.name)})`, |
||||||
|
width: 58, |
||||||
|
height: 58, |
||||||
|
paddingBottom: 10 |
||||||
|
}}> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className='name'>{data.name}</div> |
||||||
|
<div className='layout-h center'> |
||||||
|
<div className='value'>{data.value}</div> |
||||||
|
<div className='unit'> ({data.unit})</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</LeftPanel>; |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
.wlwsb-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; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.unit { |
||||||
|
color: #A6DFFD; |
||||||
|
opacity: 0.8; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
|
||||||
|
|
||||||
|
import _ from 'lodash'; |
||||||
|
import FetchHelper from '../helper/fetch-helper'; |
||||||
|
|
||||||
|
export default class StxhApi { |
||||||
|
static acreageCount() { |
||||||
|
return FetchHelper.getJson(`/openApi/stxh/acreageCount`); |
||||||
|
} |
||||||
|
static moneyCount() { |
||||||
|
return FetchHelper.getJson(`/openApi/stxh/moneyCount`); |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue