From 3b2f6804725e7f192d41d235b5a1cad04f3be667 Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Wed, 1 Feb 2023 16:56:28 +0800 Subject: [PATCH] =?UTF-8?q?2.1=20=E5=A4=A7=E5=B1=8F=E6=94=B9=E9=80=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/router_elecEvaluation.ts | 38 +- src/assets/monitor/number-icon.png | Bin 0 -> 2142 bytes src/assets/monitor/stranger-icon.png | Bin 0 -> 1454 bytes .../ElecBidEvaluation/ScreenVideoPlay.tsx | 29 +- .../Monitor/Exception/index.tsx | 2 +- .../ElecEvaluation/Monitor/Home/index.tsx | 55 +- .../Monitor/OpenToday/index.tsx | 2 +- .../ElecEvaluation/Monitor/Room/index.tsx | 81 ++- .../Monitor/RoomDetail/index.tsx | 495 ++++++++++++++++ .../ElecEvaluation/Monitor/Supplier/index.tsx | 2 +- .../Monitor/TenderAgent/index.tsx | 2 +- src/pages/ElecEvaluation/Monitor/service.ts | 80 +++ src/pages/ElecEvaluation/Monitor/style.less | 539 ++++++++++++++++-- .../Online/components/OnlineSupervision.tsx | 2 +- .../VideoMonitor/Post/index.tsx | 2 +- 15 files changed, 1223 insertions(+), 106 deletions(-) create mode 100644 src/assets/monitor/number-icon.png create mode 100644 src/assets/monitor/stranger-icon.png create mode 100644 src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx diff --git a/config/router_elecEvaluation.ts b/config/router_elecEvaluation.ts index aac32ed..f5f8f5c 100644 --- a/config/router_elecEvaluation.ts +++ b/config/router_elecEvaluation.ts @@ -1,22 +1,22 @@ export const monitorScreen = [ //监控大屏 - { - path: '/ElecMonitorScreen', - routes: [ - {//监控大屏-首页 - path: '/ElecMonitorScreen/Home', - component: './ElecEvaluation/MonitorScreen/Home', - }, - {//监控大屏-评标室列表页 - path: '/ElecMonitorScreen/MonitorRoom', - component: './ElecEvaluation/MonitorScreen/MonitorRoom', - }, - {//监控大屏-评标室详情 - path: '/ElecMonitorScreen/ProjectMonitorRoom', - component: './ElecEvaluation/MonitorScreen/ProjectMonitorRoom', - }, - ], - }, + // { + // path: '/ElecMonitorScreen', + // routes: [ + // {//监控大屏-首页 + // path: '/ElecMonitorScreen/Home', + // component: './ElecEvaluation/MonitorScreen/Home', + // }, + // {//监控大屏-评标室列表页 + // path: '/ElecMonitorScreen/MonitorRoom', + // component: './ElecEvaluation/MonitorScreen/MonitorRoom', + // }, + // {//监控大屏-评标室详情 + // path: '/ElecMonitorScreen/ProjectMonitorRoom', + // component: './ElecEvaluation/MonitorScreen/ProjectMonitorRoom', + // }, + // ], + // }, ] export const monitor = [ @@ -48,6 +48,10 @@ export const monitor = [ path: '/ElecMonitor/Room', component: './ElecEvaluation/Monitor/Room', }, + {//评标室监控-详情 + path: '/ElecMonitor/RoomDetail', + component: './ElecEvaluation/Monitor/RoomDetail', + }, ], }, ] diff --git a/src/assets/monitor/number-icon.png b/src/assets/monitor/number-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..4d6a1655572e0d6d21e0d3b9ff844568aa7e557f GIT binary patch literal 2142 zcmV-k2%-0hP)Px#1am@3R0s$N2z&@+hyVZx2uVaiRA_mr zof$EW5NK-Ah@|?^YMJ5#YF`bBeQOBR#H7U7hSZn7_+Wgqs6~jznzT*YDiL*pT7xry zlw!k_DWt%B@Zr7poU@k?=MHn{ZQ8fejZgw#2z* zn`7rTVTKOGH_zWiW_O$BxyDDnK4@uX}AMt z-vG8kNl@+NfupFr?7QH|Kig$A4f`4vdjGXT9}!OjI}sMAVAB-FP2dndFPyp~JJ?85 zbqig4Dc==j<$ytdBL-B9z~Qi9d*12HovX8cZFHMuGh@YPOxQ#H)3aXkVjL*8XMT8A zq)&FUvt0}#p(4Nu4vjWdGZdh{=c&=x(@N5<3Dzkp9 zu=jQrS&qTJ)9u;kEB#(kXzzGoS2A7GW3n?#v(YkC_~uYs_TYSdPb2ZJdOXcF=>rdV z!YUPxMUD@fqE;qM-KM#`@vJr4ZI(^8kaQhStH9SX9^cJ*^mv+H>^Ti<6(@(g&9XCp znI$wcR(ysgY#~00*cO3B%~3f?UrEC>rU_kpDc@C!c&bK##U%j?QSEH?fHp}UPCb~g zXYHkYSNV6-ga%nTK#gJDGJ(B0kEgO8%VmDG)eNKpUkH>REb{qspm?yH zatf&@K+lQL=P5ff9uEgXP@iG9xKo91Wt1(xvRbA3&}{|={r6uh+**QD?IcI7n)%Qf zuY@taz>dIUwaz_mdEk9#TySuu!W_;5+XJP?Q_eZZA3{f1k5QA9X;MfI&A`rj+A08V zg~o}Qs5)T88UKonn{(Ko6L=(0)_B6(k>j<<5!GwZB*NlI!yPc` z*plmyx`}|_hmH-Nuuhe1na)YCyh?>-A}k`A#uuD1;*5yI8!He1@5aW@i!qm7BNmmB zX#1&bxOlN8%q_W03Ww-U5!w}oW1|QxSK;%%@Sv~Uqe4q*%ZN$V>D!Ux&B!qn8wG<- z6O2d4 zC8K;N>v7jS+k*gEfmM<`kku;uC?E5F$pHz;R9>#aY8BS0aHqnbBIA$IY-ctfv2&Y! zJo>7w)v3bc8D+T$*D=No&d0{_$ni?(7&qAD3%g5(R~zYNfG-BhRcE|dh`Da?Sx#$(k2 zB3 zh;Xk8Ydj$a&cu!fd}WhAe>7tx>(Uvlm=RojT7~U_@{ibfEsXiV8N+708z&xm!V*VT zt5AcLe(5zqEtR-waNdkzXB>-?twDi@vqH-P@$RS@zb!hp`bsC$<6j|}va3pK@h?$K zMD5OJCSokrTkk^Zz)1GcBG93**3)@o-6HUMX#6cUmdM;eeuoNcN>jf`<01hNa`nc{ zvsi>M>$F>j0VgBl7sVJcDvrDWpOX56`AR4$?ajW-f2DZI83&6o7o4$Dg^VQP=UQ(8 zDZc#zF!E}`)im3ji#+gp=y)@9I7>ppb8)i9^Ub;`E5n4VDln2-gB89z5gETMI&PAz zyH~^H6!YiEh|}tP9t1|zgtN`+z<>{2vMxu>ZpFDH&S)25lP^_W!8B}#a8`+F=)L27 zIFf0*Jy4#?d31S+H@!=RC$q}kHAGJh5i_Ws>OiyFSKuBM9to7sd5V(U0De8AZ1U^A z52_hYbwIuRl>tceR5XQUwJIhdAFjJ$$R-L16oRqINHpf47h5^x_mOD zEU$2{)Fh6cSh3+lkK9K& zn8r=t1xKJHw3Om1mCC0w z@MW5A2|aa3c2MAOt!)W#w+c_BMIX5=$Qo$m**x;vuy39e3zef2D?Zq|J1sbv(Your0H3X2R7hKX_K8U~2s!6SWxA ztWRyogsJt}Q)u&+`^3M`ON zb-F$Kycqk_H!EGl*gs#65mf0%Zs)|Rg%YVIsoG&C30Css+b17TCRA+qeA9JW=~|lp zpGaec#2bfgnT@4&+myrl0_4TmAGT#S)*=%ApK4w`pZGry%;XdQcaXWb9sl6-U$g5; UHp65J*8l(j07*qoM6N<$g8!)+(*OVf literal 0 HcmV?d00001 diff --git a/src/assets/monitor/stranger-icon.png b/src/assets/monitor/stranger-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..30336c1b854f88beb9290980f05a1b135f173950 GIT binary patch literal 1454 zcmV;f1yTBmP)Px#1am@3R0s$N2z&@+hyVZuSV=@dRA_!;nI?1Cdsg zW(-LHJhBLXpgM`j1Ri4;Z-g8p(#y1KP2$RtjnX6bf7xQ7K{uc(jP@Yo*t4O zZiF!p9H@?yV8$E)4iUb2h9wIOQty2tTX`77Fi@cSBhR8{2qhIro@<0L#Os%BT(8u` zR9aBevHhsI^4Nm}P*SM5qUqTFN=+&XRMX}|(32>u!>eo}p zuXVfq zJV3k`OO3{h`lybR@LwVSt{}km|IpX{k(zFX&Pe8{t=(=zJIOg9K~Sa@?7W!k7g7MYA!tovbIDcEQu%MDy{>YcPE-vJ{jIp4TQl z+_O(K9^30|(Y)Hh@^sBx(R~024R+UKuIYOF+;|2WcGQNCIc#iVH?quKT#dF}_rWwp z^WpskKdo^h2gs81)*IsVvGO|wD@l?#eFo3;Idz-6QyV@C@l2n=IG*lh&ew*ILJTQ` zYKK#&_rHwpW6JUBP_@G#((2Ud^f|~3hquoRN3$=5NUK3dtOJ*kE*6YE7%}-gInF;4|FeEG9?hH)kBHZk&tQls8{jwLUCP#G4Ogld_DW>67 zSbMzzmfvg8;s(#y2X8E`<`DM)lh_mk+dzFZ)BL3)|?Ck*Cv zWQS|tcDotfxYPQKjE&6(n#-T{6C=VQao8~6KvWSM27>kTVw4QI{8{h=^;2BVgm&1p z8|tbs=csG5zQc27HhpLQ>oVRk)P!p*h4065H0*#41^-t<({A|l>ky)_G5IV!dl{3j zLZ#C@GYX0BaAKC@VH$q!32vu4Bq@Dk_T$3Ui>HSO^Qx(TCb*DFsoNCBD(lBG$AX?N zJ>1YVgTP0D+}`~xjF@UNSe$sZ=)_ycN$|*gR}*PAVGzcs^R^c!TrFC7%T^vDUO&Qv zl~d;kd$iwQDyyvI4ufptIw}XNugozj2banwTXHMK&+a%}HBs(4yi`UCER#^>=j~Ks z%Hy1Yaydp&VbWubCsvhBq?)DT>`qO`_9Oa5&7|cB4^TN+uDLEO9)SNu8Y}ptah = (props) => { const { videoRef, cameraParams, status } = props; const playWnd = useRef(null); let oWebControl: any = null; + let scale = window.innerHeight / 1080; let initCount = 0; let pubKey = ''; @@ -42,7 +43,7 @@ const ScreenVideoPlay: React.FC = (props) => { // cbIntegrationCallBack: cbIntegrationCallBack // }); - oWebControl.JS_CreateWnd("playWnd", playWnd.current.clientWidth, playWnd.current.clientHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定 + oWebControl.JS_CreateWnd("playWnd", playWnd.current.clientWidth * scale, playWnd.current.clientHeight * scale).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定 init(); // 创建播放实例成功后初始化 }); }, function () { // 启动插件服务失败 @@ -108,7 +109,7 @@ const ScreenVideoPlay: React.FC = (props) => { buttonIDs: buttonIDs //自定义工具条按钮 }) }).then(function (oData: any) { - oWebControl.JS_Resize(playWnd.current.clientWidth, playWnd.current.clientHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 + oWebControl.JS_Resize(playWnd.current.clientWidth * scale, playWnd.current.clientHeight * scale); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 }); }); } @@ -147,23 +148,23 @@ const ScreenVideoPlay: React.FC = (props) => { var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0; var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0; - iCoverLeft = (iCoverLeft > playWnd.current.clientWidth) ? playWnd.current.clientWidth : iCoverLeft; - iCoverTop = (iCoverTop > playWnd.current.clientHeight) ? playWnd.current.clientHeight : iCoverTop; - iCoverRight = (iCoverRight > playWnd.current.clientWidth) ? playWnd.current.clientWidth : iCoverRight; - iCoverBottom = (iCoverBottom > playWnd.current.clientHeight) ? playWnd.current.clientHeight : iCoverBottom; + iCoverLeft = (iCoverLeft > playWnd.current.clientWidth * scale) ? playWnd.current.clientWidth * scale : iCoverLeft; + iCoverTop = (iCoverTop > playWnd.current.clientHeight * scale) ? playWnd.current.clientHeight * scale : iCoverTop; + iCoverRight = (iCoverRight > playWnd.current.clientWidth * scale) ? playWnd.current.clientWidth * scale : iCoverRight; + iCoverBottom = (iCoverBottom > playWnd.current.clientHeight * scale) ? playWnd.current.clientHeight * scale : iCoverBottom; - oWebControl.JS_RepairPartWindow(0, 0, playWnd.current.clientWidth + 1, playWnd.current.clientHeight); // 多1个像素点防止还原后边界缺失一个像素条 + oWebControl.JS_RepairPartWindow(0, 0, playWnd.current.clientWidth * scale + 1, playWnd.current.clientHeight * scale); // 多1个像素点防止还原后边界缺失一个像素条 if (iCoverLeft != 0) { - oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, playWnd.current.clientHeight); + oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, playWnd.current.clientHeight * scale); } if (iCoverTop != 0) { - oWebControl.JS_CuttingPartWindow(0, 0, playWnd.current.clientWidth + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条 + oWebControl.JS_CuttingPartWindow(0, 0, playWnd.current.clientWidth * scale + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条 } if (iCoverRight != 0) { - oWebControl.JS_CuttingPartWindow(playWnd.current.clientWidth - iCoverRight, 0, iCoverRight, playWnd.current.clientHeight); + oWebControl.JS_CuttingPartWindow(playWnd.current.clientWidth * scale - iCoverRight, 0, iCoverRight, playWnd.current.clientHeight * scale); } if (iCoverBottom != 0) { - oWebControl.JS_CuttingPartWindow(0, playWnd.current.clientHeight - iCoverBottom, playWnd.current.clientWidth, iCoverBottom); + oWebControl.JS_CuttingPartWindow(0, playWnd.current.clientHeight * scale - iCoverBottom, playWnd.current.clientWidth * scale, iCoverBottom); } } @@ -175,8 +176,8 @@ const ScreenVideoPlay: React.FC = (props) => { var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用 var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） - cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); - cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); + cameraIndexCode = cameraIndexCode?.replace(/(^\s*)/g, ""); + cameraIndexCode = cameraIndexCode?.replace(/(\s*$)/g, ""); if (oWebControl != null) { oWebControl?.JS_RequestInterface({ funcName: "startPreview", @@ -221,7 +222,7 @@ const ScreenVideoPlay: React.FC = (props) => { // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 const resize = () => { if (oWebControl != null) { - oWebControl.JS_Resize(playWnd.current.clientWidth, playWnd.current.clientHeight); + oWebControl.JS_Resize(playWnd.current.clientWidth * scale, playWnd.current.clientHeight * scale); setWndCover(); } }; diff --git a/src/pages/ElecEvaluation/Monitor/Exception/index.tsx b/src/pages/ElecEvaluation/Monitor/Exception/index.tsx index 6e0dfc1..7bbef03 100644 --- a/src/pages/ElecEvaluation/Monitor/Exception/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/Exception/index.tsx @@ -34,7 +34,7 @@ const MonitorException: React.FC<{}> = () => { //selectKey const [selectKey, setSelectKey] = useState(-1); //权限校验 - const auth = useRef(authCheck()); + const auth = useRef(authCheck(["ebtp-watcher"])); //超过1小时未开标数量 const getNoOpenNumber = () => { getNoOpenNumberAPI({ "timeLimit": "1", "dayNumber": "30" }).then(res => { diff --git a/src/pages/ElecEvaluation/Monitor/Home/index.tsx b/src/pages/ElecEvaluation/Monitor/Home/index.tsx index 1a74d47..54eb67f 100644 --- a/src/pages/ElecEvaluation/Monitor/Home/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/Home/index.tsx @@ -58,6 +58,7 @@ export const proviceEnum = { "0065": "新疆", "001000": "集团" } +const weekMap = { 1: "星期一", 2: "星期二", 3: "星期三", 4: "星期四", 5: "星期五", 6: "星期六", 7: "星期日", } function getYearMap() { const year: number = moment().year();//当前年份 const data: { label: string, value: string }[] = []; @@ -583,6 +584,43 @@ export const ScreenLabel = (props: { title: string, extra?: JSX.Element | string ) } +/** + * 当前年月日 星期 时分秒 + * @returns + */ +export const LocalTimer = () => { + const [timeData, setTimeData] = useState<{ date: string, week: string }>(); + const [time, setTime] = useState(""); + useEffect(() => { + const interval = setInterval(function () { + setTimeData(() => ({ date: moment().format("YYYY-MM-DD"), week: weekMap[moment().format("E")] })); + setTime(() => moment().format("HH:mm:ss")); + }, 1000); + return () => { + clearInterval(interval) + }; + }, []) + return ( +
+ {timeData?.date} + {timeData?.week} + {time} +
+ ) +} + +//异常预警 +export const EarlyWarnItem = ({ img, name, num }: { img: string, name: string, num: string | number }) => { + return ( +
+ +
+
{num}
+
{name}
+
+
+ ) +} //大标题和布局 export const ScreenTitle = (props: { title: string, children: any }) => { @@ -612,7 +650,13 @@ export const ScreenTitle = (props: { title: string, children: any }) => {
- {title} +
+
+ {title} +
+
+ +
{children} @@ -1450,14 +1494,15 @@ export const GraphChart = (props: { type: string, chartData: any[], chartColor?: ) } //角色校验 -export const authCheck = () => { +export const authCheck = (authority: string[]) => { //获取角色列表 const authorityList: any[] | undefined = getSessionUserData()?.authorityList; if (isEmpty(authorityList)) { history.replace({ pathname: "/404" }); return false; } - if (authorityList?.findIndex(item => item.roleCode == "ebtp-watcher") == -1) {//监看人员校验 + // if (authorityList?.findIndex(item => authority.includes(item.roleCode)item.roleCode == "ebtp-watcher") == -1) {//监看人员校验 + if (authority.findIndex(item => authorityList?.findIndex(ite => ite.roleCode == item) != -1) == -1) {//角色权限校验 history.replace({ pathname: "/401", query: { code: "405" } }); return false; } @@ -1486,7 +1531,7 @@ const MonitorHome: React.FC<{}> = () => { //今日开标-评标阶段，评标及时率 const [todayInfoData, setTodayInfoData] = useState(); //权限校验 - const auth = useRef(authCheck()); + const auth = useRef(authCheck(["ebtp-watcher"])); //定时器秒数 const _time = 20000; const bidStatusMap = ["准备评标", "正在评标", "评标结束", ""]; @@ -1603,7 +1648,7 @@ const MonitorHome: React.FC<{}> = () => { return; } history.push({ - pathname: "/ElecMonitorScreen/ProjectMonitorRoom", + pathname: "/ElecMonitor/RoomDetail", state: { monitorId: item.id }, }) } diff --git a/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx b/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx index 09a6126..ac646a1 100644 --- a/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx @@ -38,7 +38,7 @@ const OpenToday: React.FC<{}> = () => { //modal title const [modalTitle, setModalTitle] = useState(null); //权限校验 - const auth = useRef(authCheck()); + const auth = useRef(authCheck(["ebtp-watcher"])); //定时器描述 const _time = 60000; //初始化字典 diff --git a/src/pages/ElecEvaluation/Monitor/Room/index.tsx b/src/pages/ElecEvaluation/Monitor/Room/index.tsx index 7c9a017..a24d0bf 100644 --- a/src/pages/ElecEvaluation/Monitor/Room/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/Room/index.tsx @@ -1,7 +1,7 @@ import { Button, Col, Input, List, message, PaginationProps, Row, Tag, Tooltip } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import '../style.less' -import { proviceEnum, ScreenTitle } from '../Home'; +import { authCheck, proviceEnum, ScreenTitle } from '../Home'; import { isNotEmpty } from '@/utils/CommonUtils'; import { history } from "umi"; import { getMonitorList } from '../service'; @@ -19,6 +19,18 @@ const provinceList = [{ "provincesNumber": "0011", "provincesRemark": "北京", }, +{ + "provincesNumber": "0022", + "provincesRemark": "吉林", +}, +{ + "provincesNumber": "0021", + "provincesRemark": "辽宁", +}, +{ + "provincesNumber": "0015", + "provincesRemark": "内蒙古", +}, { "provincesNumber": "0012", "provincesRemark": "天津", @@ -31,18 +43,6 @@ const provinceList = [{ "provincesNumber": "0014", "provincesRemark": "山西", }, -{ - "provincesNumber": "0015", - "provincesRemark": "内蒙古", -}, -{ - "provincesNumber": "0021", - "provincesRemark": "辽宁", -}, -{ - "provincesNumber": "0022", - "provincesRemark": "吉林", -}, { "provincesNumber": "0023", "provincesRemark": "黑龙江", @@ -147,7 +147,7 @@ export const previousClick = () => { history.goBack(); } -const MonitorException: React.FC<{}> = () => { +const MonitorRoom: React.FC<{}> = () => { //状态选择 const [selectBtn, setSelectBtn] = useState(""); const selectStatus = useRef(""); @@ -160,10 +160,10 @@ const MonitorException: React.FC<{}> = () => { const [totalItem, setTotalItem] = useState(0); //当前页数据 const [listData, setListData] = useState([]); - //all expand 展开收起 - const [allExpand, setAllExpand] = useState(false); //关键字搜索条件 const search = useRef(""); + //权限校验 + const auth = useRef(authCheck(["ebtp-watcher"])); //定时刷新间隔 const _time = 60000; const { CheckableTag } = Tag; @@ -202,14 +202,15 @@ const MonitorException: React.FC<{}> = () => { return; } history.push({ - pathname: "/ElecMonitorScreen/ProjectMonitorRoom", + // pathname: "/ElecMonitorScreen/ProjectMonitorRoom", + pathname: "/ElecMonitor/RoomDetail", state: { monitorId: item.id }, }) } const onProvinceMap = (tag: any, index: any) => ( - + handleChange(tag.provincesNumber, checked)} @@ -244,15 +245,15 @@ const MonitorException: React.FC<{}> = () => { }) } - useEffect(() => { - getMonitorRoom(); - }, []) - //定时器 useEffect(() => { - const interval = setInterval(function () { + let interval: any; + if (auth) { getMonitorRoom(); - }, _time); + interval = setInterval(function () { + getMonitorRoom(); + }, _time); + } return () => { clearInterval(interval) }; @@ -265,13 +266,12 @@ const MonitorException: React.FC<{}> = () => {
-
- 选择省分： +
- -
+ + {/*
{provinceList.slice(0, 16).map(onProvinceMap)} @@ -281,6 +281,27 @@ const MonitorException: React.FC<{}> = () => {
{ setAllExpand(ite => !ite) }}>{allExpand ? "收起" : "展开"}{allExpand ? : }
+
*/} +
+
+ 省分： +
+ + {provinceList.map(onProvinceMap)} + + } > + + {provinceList.slice(0, 11).map(onProvinceMap)} + + 全部 + + +
@@ -344,4 +365,4 @@ const MonitorException: React.FC<{}> = () => { ); }; -export default MonitorException; +export default MonitorRoom; diff --git a/src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx b/src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx new file mode 100644 index 0000000..5771c97 --- /dev/null +++ b/src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx @@ -0,0 +1,495 @@ +import { Image, Col, Row, Empty, Drawer } from 'antd'; +import React, { useEffect, useRef, useState } from 'react'; +import '../style.less' +import { authCheck, EarlyWarnItem, onCell, onHeaderCell, ScreenLabel, ScreenTitle, ScrollTable } from '../Home'; +import { history } from "umi"; +import { getAllStranger, getBidRoomData, getCameraList, getExpertReports, getLookBackList, getWarnData } from "../service"; +import ScreenVideoPlay from "@/components/ElecBidEvaluation/ScreenVideoPlay"; +import { pictureDisplayPath } from "@/utils/DownloadUtils"; +import { getURLInformation } from "@/utils/CommonUtils"; +import { getDicData, getSessionRoleData } from "@/utils/session"; +import strangerIcon from '@/assets/monitor/stranger-icon.png'; +import numberIcon from '@/assets/monitor/number-icon.png'; +import { bidStatusMap } from '../Room'; +const statusMap = ["未报道", "已报道"]; +const peopleNumColumns: any[] = [ + { + title: '时间', + dataIndex: 'eventTime', + key: 'eventTime', + align: 'center', + width: "40%", + onCell, + onHeaderCell, + }, + { + title: '阈值', + dataIndex: 'thresholdOfPeople', + key: 'thresholdOfPeople', + align: 'center', + ellipsis: true, + onCell, + onHeaderCell, + render: (_: any, record: any) => `${_}人`, + }, + { + title: '实际人数', + dataIndex: 'realOfPeople', + key: 'realOfPeople', + align: 'center', + onCell, + onHeaderCell, + render: (_: any, record: any) => `${_}人`, + }, +]; + +const backPeopleNumColumns: any[] = [ + { + title: '时间', + dataIndex: 'createDate', + key: 'createDate', + align: 'center', + width: "40%", + onCell, + onHeaderCell, + }, + { + title: '阈值', + dataIndex: 'thresholdOfPeople', + key: 'thresholdOfPeople', + align: 'center', + ellipsis: true, + onCell, + onHeaderCell, + render: (_: any, record: any) => `${record.details?.[0].thresholdOfPeople}人`, + }, + { + title: '实际人数', + dataIndex: 'realOfPeople', + key: 'realOfPeople', + align: 'center', + onCell, + onHeaderCell, + render: (_: any, record: any) => `${record.details?.[0].realOfPeople}人`, + }, +]; + +const staffReportColumns: any[] = [ + { + title: '人员', + dataIndex: 'userName', + key: 'userName', + align: 'center', + ellipsis: true, + onCell, + onHeaderCell, + }, + { + title: '报道状态', + dataIndex: 'status', + key: 'status', + align: 'center', + onCell, + onHeaderCell, + render: (_: any, record: any) => statusMap[_], + }, + { + title: '报道时间', + dataIndex: 'signDate', + key: 'signDate', + align: 'center', + width: "40%", + onCell, + onHeaderCell, + render: (_: any, record: any) => record.signDate || '-', + }, +]; + +export const homeClick = () => { + history.push("/ElecMonitor/Home"); +} +export const previousClick = () => { + history.goBack(); +} + +const MonitorRoomDetail: React.FC<{}> = (props: any) => { + //tooltip visible + // const [visible, setVisible] = useState(false); + //camera select + const [cameraSelect, setCameraSelect] = useState("1"); + //选中的设备参数 + const [cameraParams, setCameraParams] = useState(); + //right btn select + const [btnSelect, setBtnSelect] = useState("0"); + //props state + const monitorId = props.location.state?.monitorId ? props.location.state?.monitorId : getURLInformation("monitorId"); + //基本信息数据 + const [basicInfo, setBasicInfo] = useState({}); + //异常预警数据 + const [earlyWarnData, setEarlyWarnData] = useState(); + //设备列表 + const [caremaList, setCaremaList] = useState([]); + //报道列表 + const [expertList, setExpertList] = useState([]); + //陌生人预警-进行中 + const [strangerList, setStrangerList] = useState([]); + //陌生人预警-回看 + const [backStrangerList, setBackStrangerList] = useState([]); + //人数预警-回看 + const [backNumberList, setBackNumberList] = useState([]); + //采购方式字典 + const [bidMethodObj, setBidMethodObj] = useState(); + //图片查看抽屉显隐 + const [drawerVisible, setDrawerVisible] = useState(false); + //图片查看URL + const [drawerUrl, setDrawerUrl] = useState(''); + //监控视频Ref + const videoRef = useRef(); + //图片展示ref + const zoomImg = useRef(null); + //定时刷新间隔 + const _time = 10000; + //当前登录人角色 + const roleCode = getSessionRoleData()?.roleCode; + //权限校验 + const auth = useRef(authCheck(["ebtp-watcher", "ebtp-site-supervision", "ebtp-after-supervision"])); + + const onCaremaPlay = (item: any) => { + setCameraSelect(item.id); + setCameraParams(item.platform); + if (basicInfo?.status == "2") {//回看 + videoRef.current?.back(item.deviceCode, basicInfo?.startDate, basicInfo?.endDate); + } else { + videoRef.current?.play(item.deviceCode); + } + } + //获取基本信息数据 + const getRoomData = () => { + getBidRoomData(monitorId).then(res => {//获取基本信息 + if (res?.code == 200) { + const data = res?.data; + for (const ite of data.userNumberList) { + if (ite.userType == "manager") {//项目经理 + data["manager"] = ite.userNumber; + } else if (ite.userType == "purchaseExpert") {//专家-招标人代表 + data["purchaseExpert"] = ite.userNumber; + } else if (ite.userType == "expert") {//专家 + data["expert"] = ite.userNumber; + } + } + if (data.sectionPayerList?.length > 0) { + let length = 0 + for (const ite of data.sectionPayerList) { + length += Number(ite.payerNumber); + } + data["supplierLength"] = length; + } else { + data["supplierLength"] = 0; + } + setBasicInfo(data); + getCaremaData(data);//获取监控点列表 + if (data.status == "2") {//评标结束-回看 + getBackList("2");//数量预警 + ((roleCode != "ebtp-site-supervision") && (roleCode != "ebtp-after-supervision")) && getBackList("3");//陌生人预警 + } + } + }) + } + //获取异常预警数据 + const getWarnInfo = () => { + getWarnData({ reserveId: monitorId }).then(res => { + if (res?.code == 200) { + const data = res?.data; + setEarlyWarnData(data); + (((roleCode != "ebtp-site-supervision") && (roleCode != "ebtp-after-supervision")) && data?.strangerDetails) && setStrangerList(data.strangerDetails.slice(0, 5)); + } + }) + } + //获取设备 + const getCaremaData = (baseData: any) => { + getCameraList({ areaId: baseData.placeId }).then(res => { + if (res?.code == 200) { + const data = res?.data; + setCaremaList(data); + if (data?.length > 0) { + setCameraSelect(data[0].id); + setCameraParams(data[0].platform); + setTimeout(() => { + if (baseData.status == "2") {//回看 + videoRef.current?.back(data[0].deviceCode, baseData.startDate, baseData.endDate); + } else { + videoRef.current?.play(data[0].deviceCode); + } + }, 4000); + } + } + }) + } + //获取专家报道列表 + const getExpertList = () => { + getExpertReports({ reserveId: monitorId, pageNo: 1, pageSize: 20 }).then(res => { + if (res?.code == 200) { + const data = res?.data.records; + setExpertList(data); + } + }) + } + //获取告警-回看数据 + const getBackList = (type: string) => { + getLookBackList({ reserveId: monitorId, type, pageNo: 1, pageSize: type == "3" ? 1 : 5 }).then(res => { + if (res?.code == 200) { + const data = res?.data.records; + if (type == "2") {//2-人数预警 + setBackNumberList(data); + } else if (type == "3") {//3-陌生人预警 + data.length > 0 && setBackStrangerList(data[0].details.slice(0, 5)); + } + } + }) + } + //获取陌生人告警-全部告警 + const getAllStrangerList = () => { + getAllStranger({ reserveId: monitorId }).then(res => { + if (res?.code == 200) { + const data = res?.data; + if (data && data.length > 0) { + setStrangerList(data); + setBackStrangerList(data); + } + } + }) + } + //初始化字典 + const initDict = () => { + //采购方式字典 + const getDict: any = getDicData(); + const dictData = JSON.parse(getDict); + const bidMethodArray = dictData["procurement_mode=entrust"] as any[]; + let obj = {}; + for (let i = 0, length = bidMethodArray.length; i < length; i++) { + obj[bidMethodArray[i].code] = bidMethodArray[i].dicName; + } + setBidMethodObj(obj); + } + //图片放大抽屉显示 + const drawerClick = (filePath: string) => { + setDrawerUrl(filePath); + setDrawerVisible(true); + } + //图片放大抽屉关闭 + const drawerClose = () => { + setDrawerVisible(false); + setDrawerUrl(""); + } + const handleImgZoom = (e: { nativeEvent: { deltaY: number; }; }) => { + const { clientWidth, clientHeight, style, height, width } = zoomImg.current + const value = height / width + const num = 50 + const bool = height > width ? clientWidth < 2000 : clientHeight < 1500 + if (e.nativeEvent.deltaY <= 0 && bool) { + style.maxWidth = "none" + style.maxHeight = "none" + style.width = width + num + "px" + style.height = height + (num * value) + "px" + style.left = style.left - 1 % +"px" + style.top = style.top - 1 % +"px" + } else if (e.nativeEvent.deltaY > 0) { + if (width > 200 && height > 100) { + style.width = width - num + "px" + style.height = height - (num * value) + "px" + style.left = style.left + 1 % + "px" + style.top = style.top + 1 % + "px" + } + } + } + + useEffect(() => { + if (auth) { + initDict(); + getRoomData(); + getWarnInfo(); + getExpertList(); + if (roleCode == "ebtp-site-supervision" || roleCode == "ebtp-after-supervision") { getAllStrangerList(); } + } + }, []) + //定时器 + useEffect(() => { + let interval: any + if (auth) { + if (basicInfo?.status && basicInfo?.status != "2") { + interval = setInterval(function () { + getWarnInfo(); + getExpertList(); + if (roleCode == "ebtp-site-supervision" || roleCode == "ebtp-after-supervision") { getAllStrangerList(); } + }, _time); + } + } + return () => { + clearInterval(interval) + }; + }, [basicInfo]) + + return ( + +
+ + +
+ + {/*
*/} +
+

项目名称：{basicInfo?.projectName}

+

项目编号：{basicInfo?.projectNum}

+

标段名称：{basicInfo?.sectionName}

+

评标时间：{basicInfo?.startDate} — {basicInfo?.endDate}

+

代理机构业务经理：{basicInfo?.appManagerName}

+

评标室人数：{basicInfo?.peopleNumber}人  业务经理：{basicInfo?.manager}人  招标人代表：{basicInfo?.purchaseExpert}人  专家：{basicInfo?.expert}人

+
+
+ + + {/*
*/} +
+
+
+
+
+
+ {basicInfo?.areaName} +
+
+
+
+
+ {basicInfo?.status && {bidStatusMap[basicInfo?.status]}} +
+
+
+ + +
+ + {/*
*/} +
+ + +
+
+ + +
+ + +
+
+
+
监控画面
+
+ {caremaList.map((item, index) =>
onCaremaPlay(item)} key={index}>{item.deviceName}
)} +
+
+
+ {cameraParams && } +
+
+
+ + +
+
{ setBtnSelect("0") }}> + 陌生人预警 +
+
{ setBtnSelect("1") }}> + 人数预警 +
+
{ setBtnSelect("2") }}> + 人员报道信息 +
+ {basicInfo?.status == "2" ? ( +
{ setBtnSelect("3") }}> + 供应商信息 +
+ ) : null} +
+
+ {btnSelect == "0" ? ( +
+ {basicInfo?.status == "2" + ? backStrangerList.length > 0 ? backStrangerList.map((item: any, index: any) => ( +
+
+

时间：{item.eventTime}

+
+
+ drawerClick(item.filePath)} /> +
+
+ )) : ( +
+ +
+ ) + : strangerList.length > 0 ? strangerList.map((item: any, index: any) => ( +
+
+

时间：{item.eventTime}

+

描述：{item.describeStranger}

+
+
+ drawerClick(item.filePath)} /> +
+
+ )) : ( +
+ +
+ )} +
+ ) : btnSelect == "1" ? ( + + ) : btnSelect == "2" ? ( + + ) : ( +
+
+ {basicInfo?.sectionPayerList?.[0]?.sectionName}（{basicInfo?.sectionPayerList?.[0]?.payerNumber}） +
+
+ + {basicInfo?.sectionPayerList?.[0]?.payerNames.map((item: any) => ( + +
+ {item} +
+ + ))} + {basicInfo?.sectionPayerList?.[0]?.payerNames.length % 2 != 0 ? ( + +
+
+ + ) : null} + +
+
+ )} + {drawerVisible && +
+ (localYear); diff --git a/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx b/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx index 260f1f8..7ee2d24 100644 --- a/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx @@ -78,7 +78,7 @@ const TenderAgent: React.FC<{}> = () => { //存一份 const selectAgency = useRef(""); //权限校验 - const auth = useRef(authCheck()); + const auth = useRef(authCheck(["ebtp-watcher"])); // const gaugeChartData = [{ value: 20 }] // const gaugeGreenChart = useMemo(() => { // return gaugeChartData && diff --git a/src/pages/ElecEvaluation/Monitor/service.ts b/src/pages/ElecEvaluation/Monitor/service.ts index cdaf9c2..aea2ead 100644 --- a/src/pages/ElecEvaluation/Monitor/service.ts +++ b/src/pages/ElecEvaluation/Monitor/service.ts @@ -266,4 +266,84 @@ export async function getMonitorList(data: any) { method: 'POST', data: data, }); +} +/** + * 评标室监控详情-获取评标室内容数据 + * @param id + * @returns + */ +export async function getBidRoomData(id: any) { + return request('/api/biz-service-ebtp-evaluation/v1/screen/getReviewRoom/' + id, { + method: 'GET', + }); +} + +/** + * 评标室监控详情-设备列表 + * @param params + * @returns + */ +export async function getCameraList(params: any) { + return request('/api/biz-service-ebtp-evaluation/v1/screen/queryAreaCamera', { + method: 'GET', + params: params, + }); +} + +/** + * 评标室监控详情-专家报道列表 + * @param data + * @returns + */ +export async function getExpertReports(data: any) { + return request('/api/biz-service-ebtp-evaluation/v1/screen/queryReportUser', { + method: 'POST', + data: data, + }); +} + +/** + * 评标室监控详情-回看列表 + * @param params + * @returns + */ +export async function getLookBackList(params: any) { + return request('/api/biz-service-ebtp-evaluation/v1/eval/room/alarm/screamOfAlarm/back', { + method: 'POST', + params: params + }); +} + +// /** +// * 评标室监控详情-设备列表（回看） +// * @param id +// * @returns +// */ +// export async function getCaremaBackList(id: any) { +// return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/' + id, { +// method: 'GET', +// }); +// } + +/** + * 评标室监控详情-陌生人预警-查询全部 + * @param params + * @returns + */ +export async function getAllStranger(params: any) { + return request('/api/biz-service-ebtp-evaluation/v1/eval/room/alarm/screamOfAlarm/strangerImg', { + method: 'GET', + params: params + }); +} +/** + * 评标室监控详情-异常预警 + * @param params + * @returns + */ +export async function getWarnData(params?: any) { + return request('/api/biz-service-ebtp-evaluation/v1/eval/room/alarm/screamOfAlarm', { + method: 'GET', + params: { ...params }, + }); } \ No newline at end of file diff --git a/src/pages/ElecEvaluation/Monitor/style.less b/src/pages/ElecEvaluation/Monitor/style.less index cf5bcfd..b527b4d 100644 --- a/src/pages/ElecEvaluation/Monitor/style.less +++ b/src/pages/ElecEvaluation/Monitor/style.less @@ -32,6 +32,25 @@ // left: 50%; } + .screen-global-timep { + margin: 16px 84px 0 0; + text-align: right; + + &>span { + font-size: 22px; + font-weight: normal; + line-height: 34px; + letter-spacing: 0px; + color: #45A2FF; + z-index: 0; + margin-left: 16px; + } + + &>span:last-child { + color: #FFFFFF; + } + } + } @@ -60,8 +79,13 @@ height: 114px; width: 100%; text-align: center; + display: flex; - &>span { + &>div { + flex: 1; + } + + &>div>span { font-size: 38px; font-weight: bold; line-height: 72px; @@ -141,6 +165,391 @@ .monitor-top-flex-space { justify-content: space-around; } + + .monitor-detail-proj-d { + padding: 14px 20px 8px 20px; + + &>p { + margin-bottom: 5px; + color: #FFFFFF; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + + .monitor-detail-room-d { + padding: 14px 20px 8px 20px; + margin-top: 8px; + + &>p { + margin-bottom: 5px; + color: #FFFFFF; + } + } + + .monitor-detail-exception { + height: 184px; + display: flex; + justify-content: space-evenly; + align-items: center; + + .screen-warn-content-item { + display: flex; + justify-content: flex-start; + align-items: flex-end; + color: #fff; + position: relative; + top: -8px; + + .screen-warn-img { + height: 58px; + width: 58px; + } + + .screen-warn-content { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-left: 16px; + } + + .screen-warn-num { + font-size: 36px; + font-weight: normal; + line-height: 44px; + letter-spacing: 0px; + color: #FFD502; + } + + .screen-warn-name { + font-size: 16px; + font-weight: normal; + line-height: 22px; + letter-spacing: 0.8px; + color: #FFFFFF; + } + } + } + + .monitor-detail-bluec { + color: #45a2ff; + } + + .monitor-detail-yellowc { + color: #ffd502; + } + + .monitor-center-global { + height: 100%; + position: relative; + background: rgba(27, 126, 242, 0.12); + + .monitor-center-absolute-center { + width: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + } + + .monitor-detail-bg-card { + background: rgba(27, 126, 242, 0.12); + } + + .monitor-detail-title-bg .screen-label-main .right-rect-2 { + background: rgba(27, 126, 242, 0.12); + } + + .monitor-warning-list { + height: 670px; + + .stranger-list { + // height: calc(100% - 76px); + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + .stranger-list-card { + margin-top: 20px; + padding: 16px; + height: calc(20% - 16px); + background: rgba(27, 126, 242, 0.12); + color: #FFFFFF; + display: flex; + justify-content: space-between; + text-align: left; + + &>div>p { + margin-bottom: 0; + } + + &>div>p>span { + font-size: 16px; + font-weight: normal; + line-height: 40px; + letter-spacing: 0px; + color: #FFFFFF; + } + } + + .stranger-list-card:first-child { + margin-top: 0; + } + + /*设置宽度,轨道颜色*/ + &::-webkit-scrollbar { + width: 6px; + height: 6px; + // padding-right: 3px; + } + + /*滚动条*/ + &::-webkit-scrollbar-thumb { + background: #b9bfd7; + border-radius: 10px; + } + + /*增加悬停样式*/ + &::-webkit-scrollbar-thumb:hover { + background: #dcdfeb; + } + + /*滚动轨道样式*/ + &::-webkit-scrollbar-track-piece { + background: #505e9a; + border-radius: 3px; + } + } + + .ant-drawer-close { + color: #fff; + + &:focus, + &:hover { + color: #fff; + } + } + + .ant-drawer-content { + background-color: rgba(0, 0, 0, 0.35); + } + + .ant-drawer-body { + text-align: center; + padding: 0; + + &>div { + height: 100%; + } + + &>div>img { + position: relative; + top: 50%; + transform: translateY(-50%); + -moz-user-select: 'none'; + /* Firefox私有属性 */ + -webkit-user-select: 'none'; + /* WebKit内核私有属性 */ + -ms-user-select: 'none'; + /* IE私有属性(IE10及以后) */ + user-select: 'none'; + /* CSS3属性 */ + } + } + + .ant-empty-normal { + color: #FFFFFF; + } + + .monitor-supplier-title-global { + height: 54px; + width: 100%; + padding: 10px 0 10px 20px; + overflow-y: auto; + overflow-x: hidden; + + &>span { + font-size: 16px; + font-weight: normal; + line-height: 34px; + letter-spacing: 0px; + color: #29f0f9; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .orange-color { + color: #ffd502; + } + + /*设置宽度,轨道颜色*/ + &::-webkit-scrollbar { + width: 6px; + height: 6px; + // padding-right: 3px; + } + + /*滚动条*/ + &::-webkit-scrollbar-thumb { + background: #b9bfd7; + border-radius: 10px; + } + + /*增加悬停样式*/ + &::-webkit-scrollbar-thumb:hover { + background: #dcdfeb; + } + + /*滚动轨道样式*/ + &::-webkit-scrollbar-track-piece { + background: #505e9a; + border-radius: 3px; + } + } + + .monitor-supplier-list-global { + margin-top: 16px; + height: 600px; + + .monitor-supplier-list { + height: 40px; + padding: 4px 4px 4px 20px; + border-bottom: 1px solid #2384DD; + width: 100%; + + &>span { + font-size: 14px; + font-weight: normal; + line-height: 32px; + letter-spacing: 0px; + color: #FFFFFF; + z-index: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + + .monitor-btn-global { + height: 36px; + display: flex; + justify-content: flex-start; + align-items: center; + + &>div { + background: #1b7ff224; + line-height: 1.5715; + position: relative; + display: inline-block; + font-weight: 400; + white-space: nowrap; + text-align: center; + border: 1px solid transparent; + cursor: pointer; + transition: all .3s cubic-bezier(.645, .045, .355, 1); + user-select: none; + touch-action: manipulation; + height: 36px; + padding: 0px 14px; + margin-left: 2px; + + // border-radius: 2px; + &>span { + font-size: 18px; + font-weight: normal; + line-height: 34px; + letter-spacing: 0px; + /* text/1 */ + color: rgba(255, 255, 255, 0.87); + text-shadow: 0px 2px 24px 0px rgba(27, 126, 242, 0.91); + } + + &:not(.monitor-btn-selected):hover { + background: #1b7ff236; + } + } + + &>div:first-child { + margin-left: 0; + } + + .monitor-btn-selected { + background: #1B7EF2; + } + } + + .monitor-video-global { + // margin-right: 20px; + height: 726px; + + .left-monitor-content { + padding: 12px 12px 12px 20px; + display: flex; + justify-content: flex-start; + height: 100%; + + .left-menu { + width: 12%; + + .left-menu-content { + .left-menu-btn { + height: 44px; + width: 100%; + text-align: center; + cursor: pointer; + background: rgba(27, 126, 242, 0.17); + border: none; + margin-bottom: 16px; + transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s; + font-size: 16px; + font-weight: bold; + line-height: 44px; + letter-spacing: 0px; + color: #29F0F9; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding: 0 2px; + } + + .left-menu-btn:not(.left-menu-btn-select):hover { + background: rgba(27, 126, 242, 0.26); + } + + .left-menu-btn-select { + background: #1B7EF2; + color: #fff; + } + } + + .left-monitor-title { + margin-bottom: 16px; + + &>span { + font-size: 20px; + font-weight: normal; + line-height: 34px; + letter-spacing: 0px; + color: rgba(255, 255, 255, 0.87); + } + } + } + + .right-content-c { + width: 100%; + height: 100%; + position: relative; + left: -1px; + top: -1px; + } + } } .top-main-bottom { @@ -594,12 +1003,51 @@ background: url("~@/assets/monitor/select-third2.png") left top no-repeat; } } + + .monitor-center-room-title { + text-align: center; + width: 388px; + + &>div>span { + font-size: 32px; + font-weight: bold; + line-height: 40px; + letter-spacing: 3.2px; + color: #29F1FA; + } + } + } + + .monitor-center-status { + text-align: center; + margin-top: 12px; + + &>span { + font-size: 18px; + font-weight: normal; + line-height: 26px; + letter-spacing: 0px; + display: inline-block; + padding: 2px 16px; + } + + .blue-status { + color: #0AA7FF; + border: 1px solid #0AA7FF; + background: #0aa7ff2b; + } + + .red-status { + color: #ee6766; + border: 1px solid #ee6766; + background: #ee67661a; + } } .monitor-top-search { position: absolute; - top: 15px; - left: 5%; + top: 16px; + left: 84px; display: flex; justify-content: flex-end; @@ -651,7 +1099,7 @@ .list-card { background: rgba(27, 126, 242, 0.14); border-radius: 4px; - border: 1px solid rgba(27, 126, 242, 0.14); + border: 1px solid #1b7ef2; cursor: pointer; height: 368px; padding: 36px 32px; @@ -859,19 +1307,14 @@ - .top-province-label { + .top-province-label-h { height: 26px; - padding-left: 10px; - - &>span { - font-size: 14px; - color: #fff; - } } .list-content-col { display: flex; align-items: center; + padding: 0 16px; .top-province { display: flex; @@ -879,23 +1322,26 @@ justify-content: flex-start; } - .top-province-expand { - width: 76px; - text-align: center; - position: relative; - top: 28px; + .top-province-label { + width: 5.625rem; - .top-province-all { + &>span { font-size: 0.875rem; - color: #29F1FA; - cursor: pointer; - - &:hover { - text-decoration: underline; - } + color: #fff; } } + .top-province-all { + font-size: 0.875rem; + color: #29F1FA; + padding-left: 10px; + } + + .top-province-col { + display: flex; + align-items: center; + } + .top-province-tag { font-size: 0.875rem; padding: 0 0.5625rem; @@ -904,17 +1350,7 @@ color: #fff; } - .ant-tag-checkable:not(.ant-tag-checkable-checked):hover { - color: #1b7ef2; - } - - .ant-tag-checkable:active { - background-color: transparent; - } - - .ant-tag-checkable-checked { - background-color: #1b7ef2; - } + .monitor-screen-tag-color; } @@ -1623,4 +2059,39 @@ .ant-empty-description { color: #fff; } +} + +.monitor-screen-tag-color { + .ant-tag-checkable:not(.ant-tag-checkable-checked):hover { + color: #1b7ef2; + } + + .ant-tag-checkable:active { + background-color: transparent; + } + + .ant-tag-checkable-checked { + background-color: #1b7ef2; + } +} + +.monitor-screen-tag { + .monitor-screen-tag-color; + padding-top: 0; + + .ant-tooltip-arrow { + display: none; + } + + &>.ant-tooltip-content>.ant-tooltip-inner>p { + margin-bottom: 0; + } +} + +.monitor-top-province-tag { + font-size: 0.875rem; + padding: 0 0.5625rem; + line-height: 1.6875rem; + margin-right: 0; + color: #fff; } \ No newline at end of file diff --git a/src/pages/ElecEvaluation/VideoMonitor/Online/components/OnlineSupervision.tsx b/src/pages/ElecEvaluation/VideoMonitor/Online/components/OnlineSupervision.tsx index 210d64b..0c4430e 100644 --- a/src/pages/ElecEvaluation/VideoMonitor/Online/components/OnlineSupervision.tsx +++ b/src/pages/ElecEvaluation/VideoMonitor/Online/components/OnlineSupervision.tsx @@ -33,7 +33,7 @@ const OnlineSupervision: React.FC<{}> = () => { //在线监督 function supervision(record: any): void { - window.open("/ElecMonitorScreen/ProjectMonitorRoom?monitorId=" + record.id); + window.open("/ElecMonitor/RoomDetail?monitorId=" + record.id); } const columns: ProColumns[] = [ diff --git a/src/pages/ElecEvaluation/VideoMonitor/Post/index.tsx b/src/pages/ElecEvaluation/VideoMonitor/Post/index.tsx index f114adb..7ec7f08 100644 --- a/src/pages/ElecEvaluation/VideoMonitor/Post/index.tsx +++ b/src/pages/ElecEvaluation/VideoMonitor/Post/index.tsx @@ -35,7 +35,7 @@ const PostSupervision: React.FC<{}> = () => { //评标监控回看 function reviewMonitor(record: any): void { - window.open("/ElecMonitorScreen/ProjectMonitorRoom?monitorId=" + record.id); + window.open("/ElecMonitor/RoomDetail?monitorId=" + record.id); } const columns: ProColumns[] = [