397 lines
14 KiB
TypeScript
397 lines
14 KiB
TypeScript
|
import { Col, Descriptions, Radio, Row, Table } from 'antd';
|
|||
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|||
|
|
import './style.less';
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
import warn_icon_01 from '@/assets/screen/warn_icon_01.png'
|
|||
|
|
import warn_icon_02 from '@/assets/screen/warn_icon_02.png'
|
|||
|
|
import moment from 'moment';
|
|||
|
|
|
|||
|
|
const onCell = (_: any, rowIndex: any) => ({ className: rowIndex % 2 == 0 ? "screen-table-odd-content" : "screen-table-even-content", });
|
|||
|
|
const onHeaderCell = () => ({ className: "screen-table-header", });
|
|||
|
|
|
|||
|
|
const evalColumn: any[] = [
|
|||
|
|
{
|
|||
|
|
title: '项目名称',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
key: 'name',
|
|||
|
|
ellipsis: true,
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '时间',
|
|||
|
|
dataIndex: 'time',
|
|||
|
|
key: 'time',
|
|||
|
|
align: 'center',
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '所属单位',
|
|||
|
|
dataIndex: 'unit',
|
|||
|
|
key: 'unit',
|
|||
|
|
align: 'center',
|
|||
|
|
ellipsis: true,
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '评标地点',
|
|||
|
|
dataIndex: 'place',
|
|||
|
|
key: 'place',
|
|||
|
|
align: 'center',
|
|||
|
|
ellipsis: true,
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '专家人数',
|
|||
|
|
dataIndex: 'number',
|
|||
|
|
key: 'number',
|
|||
|
|
align: 'center',
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
const todayEvalColumn: any[] = [
|
|||
|
|
{
|
|||
|
|
title: '项目名称',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
key: 'name',
|
|||
|
|
ellipsis: true,
|
|||
|
|
width: '20%',
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '中标供应商名称',
|
|||
|
|
dataIndex: 'supplierName',
|
|||
|
|
key: 'supplierName',
|
|||
|
|
ellipsis: true,
|
|||
|
|
align: 'center',
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '拟签约金额',
|
|||
|
|
dataIndex: 'money',
|
|||
|
|
key: 'money',
|
|||
|
|
align: 'center',
|
|||
|
|
ellipsis: true,
|
|||
|
|
width: '25%',
|
|||
|
|
onCell,
|
|||
|
|
onHeaderCell,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const dataSource = [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
name: '中国联通集团股份有限公司',
|
|||
|
|
time: "11:00",
|
|||
|
|
unit: '北京',
|
|||
|
|
place: '评标地点',
|
|||
|
|
number: '5',
|
|||
|
|
supplierName: '通信工程局有限责任公司',
|
|||
|
|
money: '100000',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '2',
|
|||
|
|
name: '中国联通集团股份有限公司',
|
|||
|
|
time: "11:00",
|
|||
|
|
unit: '北京',
|
|||
|
|
place: '评标地点',
|
|||
|
|
number: '7',
|
|||
|
|
supplierName: '通信工程局有限责任公司',
|
|||
|
|
money: '100000',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '3',
|
|||
|
|
name: '中国联通集团股份有限公司',
|
|||
|
|
time: "11:00",
|
|||
|
|
unit: '北京',
|
|||
|
|
place: '评标地点',
|
|||
|
|
number: '7',
|
|||
|
|
supplierName: '通信工程局有限责任公司',
|
|||
|
|
money: '100000',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '4',
|
|||
|
|
name: '中国联通集团股份有限公司',
|
|||
|
|
time: "11:00",
|
|||
|
|
unit: '北京',
|
|||
|
|
place: '评标地点',
|
|||
|
|
number: '7',
|
|||
|
|
supplierName: '通信工程局有限责任公司',
|
|||
|
|
money: '100000',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '5',
|
|||
|
|
name: '中国联通集团股份有限公司',
|
|||
|
|
time: "11:00",
|
|||
|
|
unit: '北京',
|
|||
|
|
place: '评标地点',
|
|||
|
|
number: '7',
|
|||
|
|
supplierName: '通信工程局有限责任公司',
|
|||
|
|
money: '100000',
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
const GraphChart = (props: { type: string }) => {
|
|||
|
|
const { type } = props;
|
|||
|
|
const random = Math.random().toString();
|
|||
|
|
useEffect(() => {
|
|||
|
|
type EChartsOption = echarts.EChartsOption;
|
|||
|
|
const chartDom = document.getElementById(random)!;
|
|||
|
|
const myChart = echarts.init(chartDom);
|
|||
|
|
const categoryOption: any = {
|
|||
|
|
legend: { top: '3%', textStyle: { color: '#fff' } },
|
|||
|
|
tooltip: {},
|
|||
|
|
grid: { left: '8%', right: '4%', top: '16%', bottom: 60 },
|
|||
|
|
dataset: {
|
|||
|
|
dimensions: ['product', '专家人数', '专家签到数量'],
|
|||
|
|
source: [
|
|||
|
|
{ product: '招标项目', '专家人数': 43.3, '专家签到数量': 85.8, },
|
|||
|
|
{ product: '公开比选', '专家人数': 83.1, '专家签到数量': 73.4, },
|
|||
|
|
{ product: '公开询价', '专家人数': 86.4, '专家签到数量': 65.2, },
|
|||
|
|
{ product: '公开招募', '专家人数': 72.4, '专家签到数量': 53.9, },
|
|||
|
|
{ product: '竞争性谈判', '专家人数': 72.4, '专家签到数量': 53.9, },
|
|||
|
|
{ product: '单一来源', '专家人数': 72.4, '专家签到数量': 53.9, },
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
xAxis: { type: 'category', axisLabel: { interval: 0, color: '#fff' } },
|
|||
|
|
yAxis: { axisLabel: { color: '#fff' } },
|
|||
|
|
// Declare several bar series, each will be mapped
|
|||
|
|
// to a column of dataset.source by default.
|
|||
|
|
series: [{ type: 'bar' }, { type: 'bar' }]
|
|||
|
|
};
|
|||
|
|
const pieOption: any = {
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
right: '3%',
|
|||
|
|
top: 'middle',
|
|||
|
|
textStyle: { color: '#fff' }
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
dataset: {
|
|||
|
|
source: [
|
|||
|
|
['product', 'today', 'tomorrow', 'total'],
|
|||
|
|
['招标项目', 86.5, 92.1, 85.7],
|
|||
|
|
['公开比选', 41.1, 30.4, 65.1],
|
|||
|
|
['公开询价', 24.1, 67.2, 79.5],
|
|||
|
|
['公开招募', 55.2, 67.1, 69.2],
|
|||
|
|
['竞争性谈判', 86.4, 65.2, 82.5],
|
|||
|
|
['单一来源', 72.4, 53.9, 39.1],
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['44%', '77%'],
|
|||
|
|
center: ['15%', '45%'],
|
|||
|
|
// No encode specified, by default, it is 'today'.
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'center'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 24,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['44%', '77%'],
|
|||
|
|
center: ['45%', '45%'],
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'center'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 24,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
encode: {
|
|||
|
|
itemName: 'product',
|
|||
|
|
value: 'tomorrow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['44%', '77%'],
|
|||
|
|
center: ['75%', '45%'],
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'center'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: '20px',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
encode: {
|
|||
|
|
itemName: 'product',
|
|||
|
|
value: 'total'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const option: EChartsOption = type == "pie" ? pieOption : categoryOption;
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
}, [])
|
|||
|
|
return (
|
|||
|
|
<div id={random} style={{ width: '100%', height: '100%' }}></div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default () => {
|
|||
|
|
const [time, setTime] = useState<string>('');
|
|||
|
|
useEffect(() => {
|
|||
|
|
|
|||
|
|
const interval = setInterval(function () {
|
|||
|
|
const date = moment().format("YYYY-MM-DD HH:mm:ss");
|
|||
|
|
setTime(date);
|
|||
|
|
}, 1000);
|
|||
|
|
return () => {
|
|||
|
|
clearInterval(interval)
|
|||
|
|
};
|
|||
|
|
}, [])
|
|||
|
|
//异常预警
|
|||
|
|
const EarlyWarn = ({ img, name, num }: { img: string, name: string, num: string | number }) => {
|
|||
|
|
return (
|
|||
|
|
<div className='screen-warn-content'>
|
|||
|
|
<img src={img} className='screen-warn-img' />
|
|||
|
|
<div className='screen-warn-content'>
|
|||
|
|
<div className='screen-warn-num'>{num}</div>
|
|||
|
|
<div>{name}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<div className="screen-bg">
|
|||
|
|
<div className='top-block'>
|
|||
|
|
</div>
|
|||
|
|
<div className='top'>
|
|||
|
|
<Row>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<div className='top-left'>
|
|||
|
|
<span>当前时间：2022-07-14 07:00:00</span>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<div className='top-title'>
|
|||
|
|
<span>数字化评标监控平台</span>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6}>
|
|||
|
|
<div className='top-right'>
|
|||
|
|
<span>当前时间：{time}</span>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
<Row className="screen-content">
|
|||
|
|
<Col span={18}>
|
|||
|
|
<Row>
|
|||
|
|
<Col span={8} className='screen-right4'>
|
|||
|
|
<div className='screen-card'>
|
|||
|
|
<div className='card-title'>
|
|||
|
|
<span>今日评标专家数量</span>
|
|||
|
|
</div>
|
|||
|
|
<GraphChart type="category" />
|
|||
|
|
</div>
|
|||
|
|
<div className='screen-card screen-top8'>
|
|||
|
|
<div className='card-title'>
|
|||
|
|
<span>评标室监控</span>
|
|||
|
|
</div>
|
|||
|
|
<Descriptions size="small" column={2}>
|
|||
|
|
<Descriptions.Item label="项目名称" span={2}>监控及相关设备IT服务建设购置项目</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="标段名称">监控及相关设备IT服务建设购置项目（标段一）</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="监控设备名称">摄像头1</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="评标室名称">集团第一评标室</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="省分">北京</Descriptions.Item>
|
|||
|
|
</Descriptions>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={16} className='screen-left4 screen-right4'>
|
|||
|
|
<div className='middle-c'>
|
|||
|
|
<div className='map-bg'>
|
|||
|
|
大屏地图
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={24} className='screen-top8 screen-right4'>
|
|||
|
|
<div className='screen-card'>
|
|||
|
|
<div className='screen-graph-top'>
|
|||
|
|
<span className='screen-graph-title'>今日项目数量：50</span>
|
|||
|
|
<span className='screen-graph-title'>明日项目数量：40</span>
|
|||
|
|
<span className='screen-graph-title'>累计项目数量：500</span>
|
|||
|
|
<Radio.Group defaultValue="a" buttonStyle="solid" size='small'>
|
|||
|
|
<Radio.Button value="a">当月</Radio.Button>
|
|||
|
|
<Radio.Button value="b">年</Radio.Button>
|
|||
|
|
</Radio.Group>
|
|||
|
|
</div>
|
|||
|
|
<div className='screen-graph-chart'>
|
|||
|
|
<GraphChart type="pie" />
|
|||
|
|
</div>
|
|||
|
|
<div className='screen-graph-end'>
|
|||
|
|
<span>>>项目列表</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={6} className='screen-left4'>
|
|||
|
|
<div className='screen-card'>
|
|||
|
|
<div className='card-title'>
|
|||
|
|
<span>异常预警</span>
|
|||
|
|
</div>
|
|||
|
|
<div className='screen-warn'>
|
|||
|
|
<EarlyWarn name="陌生人预警" img={warn_icon_01} num={10} />
|
|||
|
|
<EarlyWarn name="评标室人数预警" img={warn_icon_02} num={20} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='screen-card screen-top8'>
|
|||
|
|
<div className='card-title'>
|
|||
|
|
<span>评标中项目（20）</span>
|
|||
|
|
</div>
|
|||
|
|
<Table
|
|||
|
|
pagination={false}
|
|||
|
|
className="screen-table"
|
|||
|
|
rowKey="id"
|
|||
|
|
size="small"
|
|||
|
|
dataSource={dataSource}
|
|||
|
|
columns={evalColumn}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className='screen-card screen-top8'>
|
|||
|
|
<div className='card-title'>
|
|||
|
|
<span>今日中标项目信息（10）</span>
|
|||
|
|
</div>
|
|||
|
|
<Table
|
|||
|
|
pagination={false}
|
|||
|
|
className="screen-table"
|
|||
|
|
rowKey="id"
|
|||
|
|
size="small"
|
|||
|
|
dataSource={dataSource}
|
|||
|
|
columns={todayEvalColumn}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};;
|