liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

9.14 首页饼图修改

Browse Source
This commit is contained in:
jl-zhoujl2
2022-09-14 17:07:24 +08:00
parent 84fd5af936
commit af2a801580
2 changed files with 83 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/pages/ElecEvaluation/MonitorScreen/Home/index.tsx
View File

@ -56,7 +56,7 @@ export const proviceEnum = {
"001000": "集团"
}
function dealWithData() {
var geoCoordMap = {
let geoCoordMap = {
长春: [125.35, 43.88, 20],
沈阳: [123.38, 41.8, 19],
集团: [116.26, 39.92, 18],
@ -89,8 +89,8 @@ function dealWithData() {
合肥: [117.27, 31.86, 10],
武汉: [114.31, 30.52, 10],
};
var data = [];
for (var key in geoCoordMap) {
let data = [];
for (let key in geoCoordMap) {
data.push({ name: key, value: geoCoordMap[key] });
}
return data;
@ -152,10 +152,17 @@ export const LocalTime = () => {
<span>当前时间：{time}</span>
)
}
/**
* 评标室项目情况-跳转
*/
const projectClick = () => {
history.push("/ElecMonitorScreen/MonitorRoom");
}
/**
* echarts图表
* @param props
* @returns
*/
const GraphChart = (props: { type: string, chartData: any[] }) => {
const { type, chartData } = props;
const random = Math.random().toString();
@ -176,9 +183,9 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
// to a column of dataset.source by default.
series: [{ type: 'bar' }, { type: 'bar' }]
};
var dataValue = dealWithData();
var data1 = dataValue.splice(0, 3);
var index = 0;
let dataValue = dealWithData();
let data1 = dataValue.splice(0, 3);
let index = 0;
const autoTooltip = () => {
const dataLength = data1.length;
setTimeout(() => {
@ -202,17 +209,30 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
orient: 'vertical',
right: '3%',
top: 'middle',
textStyle: { color: '#fff' }
textStyle: { color: '#fff' },
icon: 'circle',
formatter: (name) => {
let total = 0; // 用于计算总数
let target; // 遍历拿到数据
for (let i = 0, chartLength = chartData.length; i < chartLength; i++) {
total += chartData[i].value;
if (chartData[i].name == name) {
target = chartData[i].value;
}
}
let v = ((target / total) * 100).toFixed(0);
return `${name} ${target}个，占比${v}%`;
},
tooltip: {},
dataset: {
source: chartData
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
center: ['15%', '50%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
@ -225,52 +245,10 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
color: '#fff'
}
},
encode: {
itemName: 'product',
value: 'reserve'
}
labelLine: {
show: false
},
{
type: 'pie',
radius: ['40%', '70%'],
center: ['45%', '50%'],
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20px',
fontWeight: 'bold',
color: '#fff'
}
},
encode: {
itemName: 'product',
value: 'ing'
}
},
{
type: 'pie',
radius: ['40%', '70%'],
center: ['75%', '50%'],
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20px',
fontWeight: 'bold',
color: '#fff'
}
},
encode: {
itemName: 'product',
value: 'end'
}
data: chartData,
}
]
};
@ -418,6 +396,38 @@ export const EarlyWarn = ({ img, name, num }: { img: string, name: string, num:
</div>
)
}
//饼图数据格式化
const formatPieData = (data: any[]) => {
const list = [{ name: "招标项目", value: Number(data[0].number) + Number(data[1].number) }];//招标项目=公开招标+邀请招标
for (const ite of data) {
if (method.includes(ite.bidMethod)) {
list.push({ name: ite.bidMethod, value: Number(ite.number) });
}
}
var str = list.splice(3, 1);
list.push(str[0]);
return list;
}
//单个饼图
const PieChart = (props: { data: any[], title: string }) => {
const { data, title } = props;
const pieChart = useMemo(() => {
if (data && data.length > 0) {
const pieData = formatPieData(data);
return <GraphChart type="pie" chartData={pieData} />
}
return false;
}, [data])
return (
<div className='screen-graph-chart'>
{pieChart}
<div className="screen-graph-bottom">
<span className='screen-graph-title'>{title}</span>
</div>
</div>
);
}
const randomData = () => Math.round(Math.random() * 100);
@ -431,7 +441,7 @@ export default () => {
//今日评标专家数量数据
const [todayExpertNum, setTodayExpertNum] = useState<any[]>([]);
//评标室应用情况数据
const [evalApplData, setEvalApplData] = useState<any[]>([]);
const [evalApplData, setEvalApplData] = useState<any>();
//当前播放的设备参数
const [cameraParams, setCameraParams] = useState<any>();
//当月&年转换
@ -445,9 +455,6 @@ export default () => {
const categoryChart = useMemo(() => {
return todayExpertNum.length > 0 && <GraphChart type="category" chartData={todayExpertNum} />
}, [todayExpertNum])
const pieChart = useMemo(() => {
return evalApplData.length > 0 && <GraphChart type="pie" chartData={evalApplData} />
}, [evalApplData])
const mapChart = useMemo(() => {
return centerMapData?.list && <GraphChart type="map" chartData={centerMapData?.list} />
}, [centerMapData])
@ -514,58 +521,8 @@ export default () => {
getApplicationData({ type }).then(res => {
if (res?.code == 200) {
// const data = res?.data;
const data = { "type": null, "reserveNumber": [{ "bidMethod": "公开招标", "number": "3" }, { "bidMethod": "邀请招标", "number": randomData() }, { "bidMethod": "公开比选", "number": randomData() }, { "bidMethod": "公开招募", "number": randomData() }, { "bidMethod": "竞争性谈判", "number": randomData() }, { "bidMethod": "单一来源", "number": randomData() }, { "bidMethod": "公开询价", "number": randomData() }, { "bidMethod": "竞拍", "number": randomData() }, { "bidMethod": "单一来源简化流程", "number": randomData() }], "ingNumber": [{ "bidMethod": "公开招标", "number": "1" }, { "bidMethod": "邀请招标", "number": randomData() }, { "bidMethod": "公开比选", "number": randomData() }, { "bidMethod": "公开招募", "number": randomData() }, { "bidMethod": "竞争性谈判", "number": randomData() }, { "bidMethod": "单一来源", "number": randomData() }, { "bidMethod": "公开询价", "number": randomData() }, { "bidMethod": "竞拍", "number": randomData() }, { "bidMethod": "单一来源简化流程", "number": randomData() }], "endNumber": [{ "bidMethod": "公开招标", "number": "1" }, { "bidMethod": "邀请招标", "number": randomData() }, { "bidMethod": "公开比选", "number": randomData() }, { "bidMethod": "公开招募", "number": "1" }, { "bidMethod": "竞争性谈判", "number": "1" }, { "bidMethod": "单一来源", "number": randomData() }, { "bidMethod": "公开询价", "number": randomData() }, { "bidMethod": "竞拍", "number": randomData() }, { "bidMethod": "单一来源简化流程", "number": randomData() }] };
let formatData = [['product', 'reserve', 'ing', 'end'], ['招标项目', String(Number(data.reserveNumber[0].number) + Number(data.reserveNumber[1].number)), String(Number(data.ingNumber[0].number) + Number(data.ingNumber[1].number)), String(Number(data.endNumber[0].number) + Number(data.endNumber[1].number))]];
let comp = ['公开比选'];
let inqu = ['公开询价'];
let rect = ['公开招募'];
let nego = ['竞争性谈判'];
let only = ['单一来源'];
for (const ite of data.reserveNumber) {
if (ite.bidMethod == method[0]) {
comp.push(ite.number)
} else if (ite.bidMethod == method[1]) {
inqu.push(ite.number)
} else if (ite.bidMethod == method[2]) {
rect.push(ite.number)
} else if (ite.bidMethod == method[3]) {
nego.push(ite.number)
} else if (ite.bidMethod == method[4]) {
only.push(ite.number)
}
}
for (const ite of data.ingNumber) {
if (ite.bidMethod == method[0]) {
comp.push(ite.number)
} else if (ite.bidMethod == method[1]) {
inqu.push(ite.number)
} else if (ite.bidMethod == method[2]) {
rect.push(ite.number)
} else if (ite.bidMethod == method[3]) {
nego.push(ite.number)
} else if (ite.bidMethod == method[4]) {
only.push(ite.number)
}
}
for (const ite of data.endNumber) {
if (ite.bidMethod == method[0]) {
comp.push(ite.number)
} else if (ite.bidMethod == method[1]) {
inqu.push(ite.number)
} else if (ite.bidMethod == method[2]) {
rect.push(ite.number)
} else if (ite.bidMethod == method[3]) {
nego.push(ite.number)
} else if (ite.bidMethod == method[4]) {
only.push(ite.number)
}
}
formatData.push(comp);
formatData.push(inqu);
formatData.push(rect);
formatData.push(nego);
formatData.push(only);
setEvalApplData(formatData);
const data = { "type": null, "reserveNumber": [{ "bidMethod": "公开招标", "number": "5" }, { "bidMethod": "邀请招标", "number": "2" }, { "bidMethod": "公开比选", "number": "4" }, { "bidMethod": "公开招募", "number": "4" }, { "bidMethod": "竞争性谈判", "number": "6" }, { "bidMethod": "单一来源", "number": "7" }, { "bidMethod": "公开询价", "number": "5" }, { "bidMethod": "竞拍", "number": "3" }, { "bidMethod": "单一来源简化流程", "number": "2" }], "ingNumber": [{ "bidMethod": "公开招标", "number": "1" }, { "bidMethod": "邀请招标", "number": "2" }, { "bidMethod": "公开比选", "number": "3" }, { "bidMethod": "公开招募", "number": "6" }, { "bidMethod": "竞争性谈判", "number": "1" }, { "bidMethod": "单一来源", "number": "5" }, { "bidMethod": "公开询价", "number": "7" }, { "bidMethod": "竞拍", "number": "4" }, { "bidMethod": "单一来源简化流程", "number": "6" }], "endNumber": [{ "bidMethod": "公开招标", "number": "5" }, { "bidMethod": "邀请招标", "number": "4" }, { "bidMethod": "公开比选", "number": "7" }, { "bidMethod": "公开招募", "number": "4" }, { "bidMethod": "竞争性谈判", "number": "6" }, { "bidMethod": "单一来源", "number": "8" }, { "bidMethod": "公开询价", "number": "7" }, { "bidMethod": "竞拍", "number": "5" }, { "bidMethod": "单一来源简化流程", "number": "6" }] }
setEvalApplData(data);
}
})
}
@ -704,22 +661,22 @@ export default () => {
<div className='screen-graph-left-title'>
评标室应用情况统计
</div>
{evalApplData.length > 0 && <Radio.Group buttonStyle="solid" size='small' value={radioSelect} onChange={onRadioChange}>
{evalApplData && <Radio.Group buttonStyle="solid" size='small' value={radioSelect} onChange={onRadioChange}>
<Radio.Button value="1">当月</Radio.Button>
<Radio.Button value="2"> 年 </Radio.Button>
</Radio.Group>}
</div>
<div className='screen-graph-chart'>
{pieChart}
<div className='screen-graph-chart' style={{ display: 'flex' }}>
<div style={{ flex: 1 }}>
<PieChart data={evalApplData?.reserveNumber} title="已预约" />
</div>
<div style={{ flex: 1 }}>
<PieChart data={evalApplData?.ingNumber} title="评审中" />
</div>
<div style={{ flex: 1 }}>
<PieChart data={evalApplData?.endNumber} title="评审结束" />
</div>
<div className='screen-graph-bottom'>
<span className='screen-graph-title'>已预约</span>
<span className='screen-graph-title'>评审中</span>
<span className='screen-graph-title'>评审结束</span>
</div>
{/* <div className='screen-graph-end'>
<span>&gt;&gt;项目列表</span>
</div> */}
</div>
</Col>
</Row>

4
src/pages/ElecEvaluation/MonitorScreen/Home/style.less
View File

@ -145,13 +145,13 @@
.screen-graph-title {
display: inline-block;
width: 30%;
width: 20%;
text-align: center;
}
}
.screen-graph-chart {
height: calc(~"100%");
height: 100%;
}
// .screen-graph-end {