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

9.15 大屏详情页改造

Browse Source
This commit is contained in:
jl-zhoujl2
2022-09-15 15:26:49 +08:00
parent e27b34d2bc
commit e4aa7d9ffb
7 changed files with 189 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/screen/content_title_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

3
src/components/ElecBidEvaluation/BidEvalAppointment.tsx
View File

@ -229,7 +229,8 @@ const BidEvalAppointment: React.FC<BidEvalAppointmentProps> = (props) => {
columns={columns}
actionRef={actionRef}
bordered={false}
request={async (params: any) => {
params={{ areaType: "eval_room" }}
request={async (params) => {
return await getBidEvalRoom(params).then(res => {
if (res?.code == 200) {
return {

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

@ -220,7 +220,7 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
target = chartData[i].value;
}
}
let v = ((target / total) * 100).toFixed(0);
let v = total == 0 ? 0 : ((target / total) * 100).toFixed(0);
return `${name} ${target}个，占比${v}%`;
},
},
@ -666,14 +666,14 @@ export default () => {
<Radio.Button value="2"> 年 </Radio.Button>
</Radio.Group>}
</div>
<div className='screen-graph-chart' style={{ display: 'flex' }}>
<div style={{ flex: 1 }}>
<div className='screen-graph-chart'>
<div className='screen-graph-layout'>
<PieChart data={evalApplData?.reserveNumber} title="已预约" />
</div>
<div style={{ flex: 1 }}>
<div className='screen-graph-layout'>
<PieChart data={evalApplData?.ingNumber} title="评审中" />
</div>
<div style={{ flex: 1 }}>
<div className='screen-graph-layout'>
<PieChart data={evalApplData?.endNumber} title="评审结束" />
</div>
</div>

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

@ -139,19 +139,25 @@
font-size: 0.875rem;
line-height: 0.875rem;
position: absolute;
bottom: 0.5rem;
width: 100%;
bottom: 4%;
width: 33.33333333%;
// padding-top: 0.75rem;
.screen-graph-title {
display: inline-block;
width: 20%;
width: 60%;
text-align: center;
}
}
.screen-graph-chart {
height: 100%;
.screen-graph-layout {
display: inline-block;
width: 33.33333333%;
height: 100%;
}
}
// .screen-graph-end {

3
src/pages/ElecEvaluation/MonitorScreen/MonitorRoom/style.less
View File

@ -413,7 +413,8 @@
// border: none;
background: none;
border: 1px solid #8de3f3;
margin-right: 0.5rem;
// margin-right: 0.5rem;
margin: 0 0.5rem 0 0;
&>a {
color: #8de3f3;

41
src/pages/ElecEvaluation/MonitorScreen/ProjectMonitorRoom/index.tsx
View File

@ -332,15 +332,16 @@ export default (props: any) => {
<Row>
<Col span={6}>
<div className="left-content-g">
<p>{bidMethodObj?.[basicInfo?.procurementMode]}</p>
<p>项目名称：{basicInfo?.projectName}</p>
<p>项目编号：{basicInfo?.projectNum}</p>
<p>标段名称：{basicInfo?.sectionName}</p>
<p>评标时间：{basicInfo?.startDate} —— {basicInfo?.endDate}</p>
<p>代理机构业务经理：{basicInfo?.appManagerName}</p>
<p>评标室人数：{basicInfo?.peopleNumber}人</p>
{/* <p>{bidMethodObj?.[basicInfo?.procurementMode]}</p> */}
<p className="left-content-title">{bidMethodObj?.[basicInfo?.procurementMode]}</p>
<p><span className="left-content-label">项目名称：</span>{basicInfo?.projectName}</p>
<p><span className="left-content-label">项目编号：</span>{basicInfo?.projectNum}</p>
<p><span className="left-content-label">标段名称：</span>{basicInfo?.sectionName}</p>
<p><span className="left-content-label">评标时间：</span>{basicInfo?.startDate} —— {basicInfo?.endDate}</p>
<p><span className="left-content-label">代理机构业务经理：</span>{basicInfo?.appManagerName}</p>
<p><span className="left-content-label">评标室人数：</span>{basicInfo?.peopleNumber}人</p>
<div className="left-content-people">
<span><Tag color="rgba(2,125,180,1)">人员信息</Tag>业务经理：{basicInfo?.manager}人 招标人代表：{basicInfo?.purchaseExpert}人 专家：{basicInfo?.expert}人</span>
<span><span className="people-title">人员信息</span>&nbsp;&nbsp;&nbsp;<span className="left-content-label">业务经理：</span>{basicInfo?.manager}人&nbsp;&nbsp;&nbsp;<span className="left-content-label">招标人代表：</span>{basicInfo?.purchaseExpert}人&nbsp;&nbsp;&nbsp;<span className="left-content-label">专家：</span>{basicInfo?.expert}人</span>
</div>
</div>
</Col>
@ -349,7 +350,7 @@ export default (props: any) => {
<div className="top-title-global">
<div className="top-title-left"></div>
<div className="top-title-center"><span>{basicInfo?.areaName}</span></div>
<div className="top-title-right"><span>{bidStatusMap[basicInfo?.status]}</span></div>
<div className="top-title-right"><div className={basicInfo?.status == "1" ? "ing-status" : "end-status"}>{bidStatusMap[basicInfo?.status]}</div></div>
</div>
<div><a className="top-back" onClick={() => previousClick()}></a></div>
</Col>
@ -376,14 +377,16 @@ export default (props: any) => {
<Row>
<Col span={17}>
<div className="left-monitor">
<div className="left-menu">
<div className="left-menu-title">监控画面：</div>
<div className="left-menu-content">
{caremaList.map(item => <div className={cameraSelect == item.id ? "left-menu-btn left-menu-btn-select" : "left-menu-btn"} onClick={() => onCaremaPlay(item)} key={item.id}>{item.deviceName}</div>)}
<div className="left-monitor-title"><div><span>监控画面</span></div></div>
<div className="left-monitor-content">
<div className="left-menu">
<div className="left-menu-content">
{caremaList.map(item => <div className={cameraSelect == item.id ? "left-menu-btn left-menu-btn-select" : "left-menu-btn"} onClick={() => onCaremaPlay(item)} key={item.id}>{item.deviceName}</div>)}
</div>
</div>
<div className="right-content-c">
{cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={basicInfo?.status == "2" ? 1 : 0} />}
</div>
</div>
<div className="right-content-c">
{cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={basicInfo?.status == "2" ? 1 : 0} />}
</div>
</div>
</Col>
@ -400,7 +403,7 @@ export default (props: any) => {
? backStrangerList.slice(0, 5).map((item: any, index: any) => (
<div className="stranger-list-card" key={index}>
<div>
<p>时间：{item.createDate}</p>
<p><span>时间：</span>{item.createDate}</p>
</div>
<div>
<Image src={pictureDisplayPath + "?filePath=" + item.details[0].filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.details[0].filePath)} />
@ -410,8 +413,8 @@ export default (props: any) => {
: earlyWarnData?.strangerDetails?.map((item: any, index: any) => (
<div className="stranger-list-card" key={index}>
<div>
<p>时间：{item.eventTime}</p>
<p>描述：{item.describeStranger}</p>
<p><span>时间：</span>{item.eventTime}</p>
<p><span>描述：</span>{item.describeStranger}</p>
</div>
<div>
<Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.filePath)} />

206
src/pages/ElecEvaluation/MonitorScreen/ProjectMonitorRoom/style.less
View File

@ -14,21 +14,41 @@
width: 100%;
&>p {
color: #94edf7;
color: #99f6ff;
margin-bottom: 0;
line-height: 1.6;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:first-child {
color: #F59A23;
color: #FFCC00;
margin-bottom: 2px;
}
}
.left-content-people {
.left-content-title {
background-image: url('@{screen-img-url}/content_title_bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 7.5rem;
padding-left: 0.75rem;
line-height: 1.625rem;
font-size: 0.9rem;
}
.left-content-label {
color: #fff;
margin-top: 8px;
}
.left-content-people {
color: #99f6ff;
// margin-top: 8px;
.people-title {
color: #FFCC00;
}
}
}
@ -48,24 +68,44 @@
&>span {
font-size: 22px;
line-height: 22px;
line-height: 24px;
}
}
.top-title-right {
.screen-flex-center;
flex: 1;
color: #facd91;
justify-content: center;
&>div {
border-radius: 2px;
padding: 0.2rem 0.7rem;
line-height: 1.375rem;
}
.ing-status {
border: 1px solid #FFCC00;
color: #FFCC00;
}
.end-status {
border: 1px solid #ee6666;
color: #ee6666;
}
}
}
.right-warn-title {
font-size: 20px;
line-height: 20px;
color: #ee6766;
padding-bottom: 1rem;
background-image: url('@{screen-img-url}/content_title_bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 7.8rem;
line-height: 1.725rem;
text-align: center;
color: #FFCC00;
font-size: 1rem;
margin-bottom: 1rem;
}
.right-warn-content {
@ -78,18 +118,18 @@
}
.answer-supplier {
margin: 8px 0;
margin: 10px 0 8px;
&>span {
color: #fff;
margin-bottom: 0;
&:first-child {
color: #81d3f8;
color: #FFCC00;
}
&>a {
color: #00e1ff;
color: #99f6ff;
margin-left: 8px;
}
}
@ -107,7 +147,7 @@
.left-monitor,
.right-warn-list {
height: 83vh;
height: 82.6vh;
}
}
@ -115,7 +155,7 @@
.left-monitor,
.right-warn-list {
height: 80.2vh;
height: 79.6vh;
}
}
@ -123,7 +163,7 @@
.left-monitor,
.right-warn-list {
height: 76vh;
height: 75.6vh;
}
}
@ -131,7 +171,7 @@
.left-monitor,
.right-warn-list {
height: 70vh;
height: 69.6vh;
}
}
@ -144,61 +184,97 @@
}
.left-monitor {
border: 1px solid #fff;
margin-right: 4px;
padding: 12px;
display: flex;
justify-content: flex-start;
border: 1px solid #5c6aa2;
border-radius: 4px;
margin-right: 8px;
.left-menu {
color: #fff;
width: 15%;
.left-monitor-title {
display: flex;
justify-content: center;
.left-menu-title {
font-size: 18px;
padding-bottom: 16px;
&>div {
width: 375px;
height: 36px;
background-image: url('@{screen-img-url}/title_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
}
.left-menu-content {
.left-menu-btn {
height: 40px;
width: 100%;
line-height: 40px;
text-align: center;
cursor: pointer;
background: none;
}
.left-menu-btn-select {
background-color: #81d3f8;
}
&>div>span {
color: #ffcd00;
line-height: 36px;
font-size: 1rem;
}
}
.right-content-c {
width: 100%;
height: 100%;
border: 1px solid #fff;
.left-monitor-content {
padding: 8px 12px;
display: flex;
justify-content: flex-start;
height: calc(100% - 36px);
.left-menu {
color: #72c1dd;
width: 12%;
.left-menu-content {
.left-menu-btn {
height: 36px;
width: 100%;
line-height: 36px;
text-align: center;
cursor: pointer;
background: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border: 1px solid #72c1dd;
border-right: none;
margin-bottom: 1rem;
transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s
}
.left-menu-btn-select {
background-color: #72c1dd;
color: #fff;
}
}
}
.right-content-c {
width: 100%;
height: 100%;
position: relative;
left: -1px;
top: -1px;
}
}
}
.right-warn-list {
border: 1px solid #fff;
margin-left: 4px;
border: 1px solid #5c6aa2;
border-radius: 4px;
margin-left: 8px;
padding: 12px;
text-align: center;
.stranger-list {
height: calc(100% - 76px);
.stranger-list-card {
border: 1px solid #2B5093;
background-color: #051666;
// border: 1px solid #2B5093;
// background-color: #051666;
border-bottom: 1px solid #5c6aa2;
height: 20%;
margin-top: 8px;
padding: 8px;
color: #fff;
color: #99f6ff;
display: flex;
justify-content: space-between;
&>div>p>span {
color: #fff;
}
}
}
@ -241,25 +317,41 @@
}
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
background: #02A7F0;
border-color: #02A7F0;
background: #72c1dd;
border-color: #72c1dd;
&:hover {
background: #02A7F0;
border-color: #02A7F0;
background: #72c1dd;
border-color: #72c1dd;
}
}
.ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child {
border-right-color: #02A7F0;
border-right-color: #72c1dd;
}
.ant-radio-button-wrapper:hover {
color: #02A7F0;
color: #72c1dd;
}
.ant-radio-button-wrapper {
color: #72c1dd;
border: 1px solid #72c1dd;
border-left-width: 0;
border-top-width: 1.02px;
background: none;
}
.ant-radio-button-wrapper:first-child {
border-left: 1px solid #72c1dd;
}
.ant-radio-button-wrapper:not(:first-child)::before {
background-color: #72c1dd;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before,
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
background-color: #02A7F0;
background-color: #72c1dd;
}
}