136 lines
4.7 KiB
JavaScript
136 lines
4.7 KiB
JavaScript
|
import dayjs from 'dayjs';
|
|||
|
|
import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
|
|||
|
|
import ReactECharts from 'echarts-for-react';
|
|||
|
|
import { useEffect, useState, useMemo } from 'react';
|
|||
|
|
|
|||
|
|
const Page = ({ title = '标题' }) => {
|
|||
|
|
const [echart2, setEchart2] = useState(Object())
|
|||
|
|
const [inspectordata, setInspectorData] = useState([{}])
|
|||
|
|
const [plandata, setPlanData] = useState(Object())
|
|||
|
|
const [problemdata, setProblemData] = useState(Object())
|
|||
|
|
const getPlanOption = useMemo((name, data) => {
|
|||
|
|
// let total = 0
|
|||
|
|
// for (let i = 0; i < data.length; i++) {
|
|||
|
|
// total = total + Number(data[i].value)
|
|||
|
|
// }
|
|||
|
|
return {
|
|||
|
|
angleAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['应用服务中心', '技术管理', '综合管理', '进度管理', '质量管理', '安全管理', '其它']
|
|||
|
|
},
|
|||
|
|
radar: [
|
|||
|
|
{
|
|||
|
|
indicator: [
|
|||
|
|
{ text: '' },
|
|||
|
|
{ text: '' },
|
|||
|
|
{ text: '' },
|
|||
|
|
{ text: '' },
|
|||
|
|
{ text: '' },
|
|||
|
|
{ text: '' },
|
|||
|
|
{ text: '' },
|
|||
|
|
],
|
|||
|
|
radius: '80%',
|
|||
|
|
splitNumber: 12,
|
|||
|
|
shape: 'circle',
|
|||
|
|
splitArea: {
|
|||
|
|
areaStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#d4d4d4'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
radiusAxis: {
|
|||
|
|
min: 0,
|
|||
|
|
max: 20,
|
|||
|
|
interval: 2,
|
|||
|
|
// 刻度
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
//刻度数值
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
// 线
|
|||
|
|
axisLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
polar: {},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
stack: 'a',
|
|||
|
|
type: 'pie',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
selectedOffset: 0,
|
|||
|
|
radius: [0, 140],
|
|||
|
|
roseType: 'area',
|
|||
|
|
itemStyle: { //去除饼图的指示折线label
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
borderRadius: 8
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: 40, name: '应用服务中心' },
|
|||
|
|
{ value: 32, name: '技术管理' },
|
|||
|
|
{ value: 30, name: '综合管理' },
|
|||
|
|
{ value: 30, name: '进度管理' },
|
|||
|
|
{ value: 28, name: '质量管理' },
|
|||
|
|
{ value: 28, name: '安全管理' },
|
|||
|
|
{ value: 18, name: '其它' },
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}, [plandata])
|
|||
|
|
console.log(getPlanOption);
|
|||
|
|
|
|||
|
|
const onOk = (event, index) => {
|
|||
|
|
if (event !== null) {
|
|||
|
|
let params = {
|
|||
|
|
stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
|
|||
|
|
etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
|
|||
|
|
}
|
|||
|
|
// getStm(params, index)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
useEffect(() => {
|
|||
|
|
let data = [
|
|||
|
|
{ value: 1048, name: 'Search Engine' },
|
|||
|
|
{ value: 735, name: 'Direct' },
|
|||
|
|
{ value: 580, name: 'Email' },
|
|||
|
|
{ value: 484, name: 'Union Ads' },
|
|||
|
|
{ value: 300, name: 'Video Ads' }
|
|||
|
|
]
|
|||
|
|
setPlanData(data)
|
|||
|
|
})
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
|||
|
|
<div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
|
|||
|
|
<div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
|
|||
|
|
{title}
|
|||
|
|
</div>
|
|||
|
|
<DatePicker.RangePicker
|
|||
|
|
style={{ width: 220, }}
|
|||
|
|
onChange={(e, index) => onOk(e, 2)}
|
|||
|
|
defaultValue={[dayjs().startOf("year"), dayjs()]}
|
|||
|
|
></DatePicker.RangePicker>
|
|||
|
|
</div>
|
|||
|
|
<ReactECharts
|
|||
|
|
ref={(e) => setEchart2(e)}
|
|||
|
|
option={getPlanOption}
|
|||
|
|
style={{ height: 350 }}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
export default Page
|