页面搭建

lsf-dev
xielei 2024-09-30 11:23:26 +08:00
parent 5db2dd767f
commit f296c3c785
5 changed files with 53 additions and 13 deletions

View File

@ -96,7 +96,7 @@ const onExport = () => {
<div className='time-line-item'>
<div style={{width:100}}>
<span>{item.eventsDate}</span>
<div className='dsj'>大事记</div>
<div className='dsj'>{item.typeName}</div>
</div>
<div className='item-right'>

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import { Form, Select, Button, DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
@ -25,8 +25,10 @@ const ToolBar = ({ setSearchVal, onExport, storeData, role }) => {
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="名称" name="name">
<Input allowClear style={{ width: '150px' }} />
<Form.Item label="类型" name="types">
<Select options={[
{value:1,label:'大事记'}, {value:2,label:'调度指令'}, {value:3,label:'维修养护'},{value:4,label:'安全鉴定'}, {value:5,label:"除险加固"}, {value:6,label:'白蚁普查'}
]} allowClear mode='tags' style={{ width: "400px" }}/>
</Form.Item>
<Form.Item label="发生日期" name="tm">
<RangePicker

View File

@ -36,18 +36,31 @@ const Page = ({ title = '标题' }) => {
}
},
series: {
name: '圆环图系列名称',
name: '执行情况',
type: 'pie',
// center: ['50%', '50%'],
// radius: ['35%', '50%'],
hoverAnimation: true,
// hoverAnimation: true,
data: plandata,
label: {
normal: {
show: true,
position: 'outside',
formatter: '{c}'
formatter: '{c}',
}
},
itemStyle:{
color: function (colors) {
var colorList = [
'#5b8ff9',
'#5ad8a6',
'#5d7092',
'#f6bd16',
'#6f5ef9',
];
return colorList[colors.dataIndex];
}
}
}

View File

@ -49,18 +49,30 @@ const Page = ({ title = '标题' }) => {
}
},
series: {
name: '圆环图系列名称',
name: '案件来源',
type: 'pie',
center: ['50%', '50%'],
radius: ['60%', '80%'],
hoverAnimation: true,
// hoverAnimation: true,
data: plandata,
label: {
normal: {
show: true,
position: 'outside',
formatter: '{c}'
}
formatter: '{c}',
},
},
itemStyle:{
color: function (colors) {
var colorList = [
'#5b8ff9',
'#5ad8a6',
'#5d7092',
'#f6bd16',
'#6f5ef9',
];
return colorList[colors.dataIndex];
}
}
}

View File

@ -29,12 +29,14 @@ const Page = ({ title = '标题' }) => {
// }
return {
legend: {
data: Object.values(obj)
data: Object.values(obj),
type:'scroll'
},
angleAxis: {
type: 'category',
data: Object.values(obj)
},
tooltip: {},
// radar: [
// {
// indicator: [
@ -81,6 +83,7 @@ const Page = ({ title = '标题' }) => {
polar: {},
series: [
{
name:'案件类型',
stack: 'a',
type: 'pie',
center: ['50%', '50%'],
@ -92,7 +95,17 @@ const Page = ({ title = '标题' }) => {
label: {
show: false,
},
borderRadius: 8
borderRadius: 8,
color: function (colors) {
var colorList = [
'#5b8ff9',
'#5ad8a6',
'#5d7092',
'#f6bd16',
'#6f5ef9',
];
return colorList[colors.dataIndex];
}
},
},
data: plandata