8.10 首页基本完成
This commit is contained in:
jl-zhoujl2
BIN
src/assets/screen/crown_01.png
Normal file
BIN
src/assets/screen/crown_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/screen/crown_02.png
Normal file
BIN
src/assets/screen/crown_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/screen/crown_03.png
Normal file
BIN
src/assets/screen/crown_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
46
src/pages/MonitorScreen/Home/china.js
Normal file
46
src/pages/MonitorScreen/Home/china.js
Normal file
File diff suppressed because one or more lines are too long
@ -1,9 +1,13 @@
|
||||
import { Col, Descriptions, Radio, Row, Table } from 'antd';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState, useMemo } from 'react';
|
||||
import './style.less';
|
||||
import './china'
|
||||
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 crown_01 from '@/assets/screen/crown_01.png'
|
||||
import crown_02 from '@/assets/screen/crown_02.png'
|
||||
import crown_03 from '@/assets/screen/crown_03.png'
|
||||
import moment from 'moment';
|
||||
|
||||
const onCell = (_: any, rowIndex: any) => ({ className: rowIndex % 2 == 0 ? "screen-table-odd-content" : "screen-table-even-content", });
|
||||
@ -139,11 +143,17 @@ const dataSource = [
|
||||
const GraphChart = (props: { type: string }) => {
|
||||
const { type } = props;
|
||||
const random = Math.random().toString();
|
||||
/**
|
||||
* 地图数据
|
||||
*/
|
||||
const randomData = () => {
|
||||
return Math.round(Math.random() * 1000);
|
||||
}
|
||||
useEffect(() => {
|
||||
type EChartsOption = echarts.EChartsOption;
|
||||
const chartDom = document.getElementById(random)!;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const categoryOption: any = {
|
||||
const categoryOption: EChartsOption = {
|
||||
legend: { top: '3%', textStyle: { color: '#fff' } },
|
||||
tooltip: {},
|
||||
grid: { left: '8%', right: '4%', top: '16%', bottom: 60 },
|
||||
@ -164,7 +174,7 @@ const GraphChart = (props: { type: string }) => {
|
||||
// to a column of dataset.source by default.
|
||||
series: [{ type: 'bar' }, { type: 'bar' }]
|
||||
};
|
||||
const pieOption: any = {
|
||||
const pieOption: EChartsOption = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '3%',
|
||||
@ -188,7 +198,6 @@ const GraphChart = (props: { type: string }) => {
|
||||
type: 'pie',
|
||||
radius: ['44%', '77%'],
|
||||
center: ['15%', '45%'],
|
||||
// No encode specified, by default, it is 'today'.
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
@ -196,10 +205,14 @@ const GraphChart = (props: { type: string }) => {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 24,
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
encode: {
|
||||
itemName: 'product',
|
||||
value: 'today'
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -213,7 +226,7 @@ const GraphChart = (props: { type: string }) => {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 24,
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
color: '#fff'
|
||||
}
|
||||
@ -246,19 +259,140 @@ const GraphChart = (props: { type: string }) => {
|
||||
}
|
||||
]
|
||||
};
|
||||
const mapOption: EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
showDelay: 0,
|
||||
transitionDuration: 0.2,
|
||||
padding: [5, 10],
|
||||
formatter: (params: any) => {
|
||||
return `<div style="display:flex;justify-content:flex-start;align-items:center;font-weight:600">
|
||||
<div style="width:8px;height:8px;border-radius:8px;background:#FFCC00;margin-right:8px"></div>${params.data.name}
|
||||
</div>
|
||||
<div style="margin-top:8px;margin-left:16px;">
|
||||
评标室间数：${params.data.value}
|
||||
</div>
|
||||
<div style="margin-top:8px;margin-left:16px;">
|
||||
正在评标：${params.data.value}
|
||||
</div>
|
||||
<div style="margin-top:8px;margin-left:16px;">
|
||||
评标专家：${params.data.value}
|
||||
</div>
|
||||
<div style="margin-top:8px;margin-left:16px;">
|
||||
累计评标次数：${params.data.value}
|
||||
</div>`
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
inRange: {
|
||||
color: [
|
||||
'#ECF3F4',
|
||||
'#E3F4FF',
|
||||
'#D1ECFD',
|
||||
'#A0D6F8',
|
||||
'#5DCAF2',
|
||||
'#09A6F7',
|
||||
'#0081C4',
|
||||
'#26519E',
|
||||
'#052D74',
|
||||
'#001F53',
|
||||
]
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '累计评标次数',
|
||||
type: 'map',
|
||||
roam: false,
|
||||
map: 'china',
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#FFCC00'
|
||||
}
|
||||
},
|
||||
select: {
|
||||
disabled: true,
|
||||
},
|
||||
data: [
|
||||
{ name: "上海", value: randomData() },
|
||||
{ name: "北京", value: 200 },
|
||||
{ name: "天津", value: randomData() },
|
||||
{ name: "重庆", value: randomData() },
|
||||
{ name: "河北", value: randomData() },
|
||||
{ name: "河南", value: randomData() },
|
||||
{ name: "云南", value: randomData() },
|
||||
{ name: "辽宁", value: randomData() },
|
||||
{ name: "黑龙江", value: randomData() },
|
||||
{ name: "湖南", value: randomData() },
|
||||
{ name: "安徽", value: randomData() },
|
||||
{ name: "山东", value: randomData() },
|
||||
{ name: "新疆", value: randomData() },
|
||||
{ name: "江苏", value: randomData() },
|
||||
{ name: "浙江", value: randomData() },
|
||||
{ name: "江西", value: randomData() },
|
||||
{ name: "湖北", value: randomData() },
|
||||
{ name: "广西", value: randomData() },
|
||||
{ name: "甘肃", value: randomData() },
|
||||
{ name: "山西", value: randomData() },
|
||||
{ name: "内蒙古", value: randomData() },
|
||||
{ name: "陕西", value: randomData() },
|
||||
{ name: "吉林", value: randomData() },
|
||||
{ name: "福建", value: randomData() },
|
||||
{ name: "贵州", value: randomData() },
|
||||
{ name: "广东", value: randomData() },
|
||||
{ name: "青海", value: randomData() },
|
||||
{ name: "西藏", value: randomData() },
|
||||
{ name: "四川", value: randomData() },
|
||||
{ name: "宁夏", value: randomData() },
|
||||
{ name: "海南", value: randomData() },
|
||||
{ name: "台湾", value: randomData() },
|
||||
{ name: "香港", value: randomData() },
|
||||
{ name: "澳门", value: randomData() },
|
||||
{ name: "南海诸岛", value: randomData() }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const option: EChartsOption = type == "pie" ? pieOption : categoryOption;
|
||||
const option: EChartsOption = type == "pie" ? pieOption : type == "map" ? mapOption : categoryOption;
|
||||
myChart.setOption(option);
|
||||
}, [])
|
||||
return (
|
||||
<div id={random} style={{ width: '100%', height: '100%' }}></div>
|
||||
<div id={random} style={{ width: '100%', height: '100%', zIndex: 99 }}></div>
|
||||
)
|
||||
}
|
||||
|
||||
//异常预警
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const [time, setTime] = useState<string>('');
|
||||
const categoryChart = useMemo(() => {
|
||||
return <GraphChart type="category" />
|
||||
}, [])
|
||||
const pieChart = useMemo(() => {
|
||||
return <GraphChart type="pie" />
|
||||
}, [])
|
||||
const mapChart = useMemo(() => {
|
||||
return <GraphChart type="map" />
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
|
||||
const interval = setInterval(function () {
|
||||
const date = moment().format("YYYY-MM-DD HH:mm:ss");
|
||||
setTime(date);
|
||||
@ -267,18 +401,7 @@ export default () => {
|
||||
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'>
|
||||
@ -287,7 +410,7 @@ export default () => {
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<div className='top-left'>
|
||||
<span>当前时间：2022-07-14 07:00:00</span>
|
||||
{/* <span>当前时间：2022-07-14 07:00:00</span> */}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
@ -310,7 +433,7 @@ export default () => {
|
||||
<div className='card-title'>
|
||||
<span>今日评标专家数量</span>
|
||||
</div>
|
||||
<GraphChart type="category" />
|
||||
{categoryChart}
|
||||
</div>
|
||||
<div className='screen-card screen-top8'>
|
||||
<div className='card-title'>
|
||||
@ -328,7 +451,25 @@ export default () => {
|
||||
<Col span={16} className='screen-left4 screen-right4'>
|
||||
<div className='middle-c'>
|
||||
<div className='map-bg'>
|
||||
大屏地图
|
||||
{mapChart}
|
||||
<div className='map-total-num'>
|
||||
<span>当前全国评标数量：50</span>
|
||||
</div>
|
||||
<div className='map-grand'>
|
||||
<div className='map-grand-title'>累计评标</div>
|
||||
<div>
|
||||
<img src={crown_01} className='map-grand-img' />
|
||||
<span>北京：100</span>
|
||||
</div>
|
||||
<div className='map-grand-content'>
|
||||
<img src={crown_02} className='map-grand-img' />
|
||||
<span>浙江：90</span>
|
||||
</div>
|
||||
<div className='map-grand-content'>
|
||||
<img src={crown_03} className='map-grand-img' />
|
||||
<span>辽宁：80</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
@ -340,11 +481,11 @@ export default () => {
|
||||
<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.Button value="b"> 年 </Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div className='screen-graph-chart'>
|
||||
<GraphChart type="pie" />
|
||||
{pieChart}
|
||||
</div>
|
||||
<div className='screen-graph-end'>
|
||||
<span>>>项目列表</span>
|
||||
|
||||
@ -121,6 +121,28 @@
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||
color: #fff;
|
||||
background: #72c1db;
|
||||
border-color: #72c1db;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
|
||||
background-color: #72c1db;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper {
|
||||
color: #72c1db;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-graph-chart {
|
||||
@ -129,14 +151,6 @@
|
||||
|
||||
.screen-graph-end {
|
||||
color: #2cdbf5;
|
||||
// display: flex;
|
||||
// justify-content: flex-end;
|
||||
|
||||
// &>span {
|
||||
// width: 9%;
|
||||
// position: relative;
|
||||
// top: -6px;
|
||||
// }
|
||||
position: absolute;
|
||||
right: 4%;
|
||||
bottom: 2px;
|
||||
@ -225,7 +239,54 @@
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 3rem rgba(100, 200, 255, .5) inset;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-sizing: border-box;
|
||||
|
||||
.map-total-num {
|
||||
color: #9cf040;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.map-grand {
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
|
||||
.map-grand-title {
|
||||
color: #2bddf4;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
padding-left: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #2bddf4;
|
||||
}
|
||||
}
|
||||
|
||||
.map-grand-content {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.map-grand-img {
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
vertical-align: text-bottom;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user