Merge branch 'master_监控-新平台' into 'release_20230714'

7.14 电子评标室 监控 新平台

See merge request eshop/fe_service_ebtp_frontend!305

public/sdk/enumConstant.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("common requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,(function(e,t){const a={closeTalk:60,TalkHandshakeReq:59,kFileData:1,kInitDecoderReq:0,kUninitDecoderReq:1,kOpenDecoderReq:2,kCloseDecoderReq:3,kFeedDataReq:4,kStartDecodingReq:5,kPauseDecodingReq:6,kInitDecoderRsp:0,kUninitDecoderRsp:1,kOpenDecoderRsp:2,kCloseDecoderRsp:10,kVideoFrame:4,kAudioFrame:5,kDecodeFinishedEvt:8,cmdCallback:11,kGetParamRsp:12,sendDataCallback:13,socketLinkState:14,getHeartBeatRequest:15,DownloaderHeartBeat:16,closeWebsocket:17,fetchStream:18,resetDecoderFifo:19,getSetPlayBackSpeedReq:20,getSetPlayBackStartReq:21,deviceReady:22,getSetPlayBackStartTimeReq:23,responseCurDateTime:24,eventTypeFifoFull:25,eventTypeFifoEnough:26,playbakcRecordList:27,socketActiveClose:28,serverDataTimeout:29,heartPingResp:30,serverDecoderError:31,socketNoActive:32,getHandsharkReq:33,getHandsharkRes:34,recoderStart:35,recoderPause:36,onWasmLoaded:37,getHandshakeReq:38,DownloaderHandshakeReq:39,sendHandshakeReq:40,kVideoDownRep:100,kVideoDownChumksRep:101,getTalkStartReq:50,talkStartRep:51,pcmDataReq:52,kStartTalkEncoderRsq:53,kStartTalkEncoderRsp:54,kGetDeviceInfo:55,kGetAudioDataReq:56,kgetTalkStartRep:57,DestroyTalkReq:58,DestroyTalkRes:61,kStartTalkEncoderdeviceready:62,initTalkEncode:64,_getTalkStartReq:63,PlaybackOver:65,serverDecoderTalkError:66};return e.common=a,a}));

public/sdk/event.js

@@ -0,0 +1 @@
+import Logger from"./logger.js";new Logger("Event").logInfo("Event.js 已加载");export class Events{constructor(e){this.target={},this.eventsQueue={},this.disallowRepeat=!1}add(e=[],t,s){for(let n of e)this.on(n,t,s)}on(e,t,s){if(void 0===this.eventsQueue[e]&&(this.eventsQueue[e]={methods:[]}),"function"==typeof t){if(!this.disallowRepeat||!this.eventsQueue[e].methods.includes(t))return void 0!==s&&(t.once=s),this.eventsQueue[e].methods.push(t),this.target}else logger.error("on","the argument is not function.",t)}once(e,t){this.on(e,t,!0)}off(e,t){let s=this.eventsQueue[e];if(!s)return;let n=s.methods;if(t){let e=n.length;for(;e--;)n[e]===t&&n.splice(e,1)}else delete this.eventsQueue[e];return this.target}emit(e,...t){let s=this.eventsQueue[e];if(s)return s.methods.forEach((s=>{s.apply(this.target,t),s.once&&this.off(e,s)})),this.target}clear(e){delete this.eventsQueue[e]}clearAll(){this.eventsQueue={}}}export const events=e=>new Events(e);const getEvents=function(e){const t=new Events(e);return e=>(t.target=e,t)};export default getEvents;

public/sdk/logger.js

@@ -0,0 +1 @@
+!function(o,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=o.document?t(o,!0):function(o){if(!o.document)throw new Error("Logger requires a window with a document");return t(o)}:t(o)}("undefined"!=typeof window?window:this,(function(o,t){function e(o){this.module=o}return e.prototype.log=function(o){},e.prototype.logError=function(o){},e.prototype.logInfo=function(o){},e.prototype.logDebug=function(o){},e.prototype.currentTimeStr=function(){var o=new Date(Date.now());return o.getFullYear()+"-"+(o.getMonth()+1)+"-"+o.getDate()+" "+o.getHours()+":"+o.getMinutes()+":"+o.getSeconds()+":"+o.getMilliseconds()},o.Logger=e,e}));

src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx

@@ -12,9 +12,13 @@ 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';
-import ReactPlayer from 'react-player/file';
+//import ReactPlayer from 'react-player/file';
 import moment from "moment";
 import { ConsoleSqlOutlined } from '@ant-design/icons';
+import Player from './js/player';
+import JTimeLine from "./js/JtimeLine";
+import '../wasmStyle.less'
+import dayjs from "dayjs";
 
 const statusMap = ["未报道", "已报道"];
 const peopleNumColumns: any[] = [
@@ -58,7 +62,7 @@ const backPeopleNumColumns: any[] = [
         onCell,
         onHeaderCell,
     },
-    {
+    { 
         title: '阈值',
         dataIndex: 'thresholdOfPeople',
         key: 'thresholdOfPeople',
@@ -135,6 +139,10 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     //let basicInfoObj = useState<any>({});
     //异常预警数据
     const [earlyWarnData, setEarlyWarnData] = useState<any>();
+    //陌生人告警数量
+    const [strangerCount, setStrangerCount] = useState<any>();
+    //人数告警数量
+    const [numberCount, setNumberCount] = useState<any>();
 
     //设备列表
     const [caremaList, setCaremaList] = useState<any[]>([]);
@@ -164,10 +172,34 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     const auth = useRef<boolean>(authCheck(["ebtp-watcher", "ebtp-site-supervision", "ebtp-after-supervision"]));
 
     //协议
-    const [protocol, setProtocol] = useState<string>('hls');
+    const [protocol, setProtocol] = useState<string>('ws');
     //码流
     const [streamType, setStreamType] = useState<string>('0');
 
+    //播放器ref
+    const playerRefList = useRef<any[]>([]);
+    
+    //回播组件
+    const jTimeLineRef = useRef<any>();
+    //jTimeLineArr
+    const jTimeLineArr = useRef<any[]>([]);
+    //基础数据ref
+    const basicInfoRef = useRef<any>(null);
+    //回放定时器
+    const timeLineTimerRef = useRef<any>(null);
+    //定时时间
+    const timerMsRef = useRef<any>(1000);
+    //设备ref
+    const deviceInfoRef = useRef<any>(null);
+    //回放进度条长度
+    const [recordWidthRef, setRecordWidthRef] = useState<any>(1000);
+    //进度条大小
+    const currentScaleRef = useRef<any>(0);
+    //倍速
+    const [speed, setSpeed] = useState<any>(1);
+    //倍速序号
+    const speedindexRef = useRef<any>(0);
+
     const onCaremaPlay = (item: any) => {
         setCameraSelect(item.serialNumber);
         //setCameraParams(item.platform);
@@ -176,29 +208,43 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
         // } else {
         //     videoRef.current?.play(item.deviceCode);
         // }
-        onGetLiveStream(basicInfo,item);
+        //onGetLiveStream(basicInfo,item);
+        var i = 0;
+        playerRefList.current.forEach((element) => {
+            onGetLiveStream(basicInfoRef.current,item,element);
+            i++;
+        });
+        
     }
 
-    const onGetLiveStream = (basicInfoObj:any,item: any) =>{
-        
-        if (basicInfoObj?.status == "2") {
-            getRecordPlaybackTime({deviceSn:item.sn,
-                channelNum:item.serialNumber,
-                protocol:protocol,
-                startTime:moment(basicInfoObj?.startDate).format('yyyyMMDDHHmmss'),
-                endTime:moment(basicInfoObj?.endDate).format('yyyyMMDDHHmmss')}).then(res=>{
-                if (res?.code == 200) {
-                    const data = res?.data;
-                    setVideoUrl(data.url);
-                }
-            })
-        }else{
-            getLiveStream({deviceSn:item.sn,channelNum:item.serialNumber,protocol:protocol,streamType:streamType}).then(res=>{
-                if (res?.code == 200) {
-                    const data = res?.data;
-                    setVideoUrl(data.url);
-                }
-            })
+    const onGetLiveStream = (basicInfoObj:any,item: any,player:any) =>{
+        if(item!=null){
+            if (basicInfoObj?.status == "2") {
+                getRecordPlaybackTime({deviceSn:item.sn,
+                    channelNum:item.serialNumber,
+                    protocol:protocol,
+                    startTime:moment(basicInfoObj?.startDate).format('yyyyMMDDHHmmss'),
+                    endTime:moment(basicInfoObj?.endDate).format('yyyyMMDDHHmmss')}).then(res=>{
+                    if (res?.code == 200) {
+                        const data = res?.data;
+                        if(data!=null){
+                            toplayer(data.url,moment(basicInfoObj?.endDate).format('yyyyMMDDHHmmss'),player);
+                        }
+                        
+                        //setVideoUrl(data.url);
+                    }
+                })
+            }else{
+                getLiveStream({deviceSn:item.sn,channelNum:item.serialNumber,protocol:protocol,streamType:streamType}).then(res=>{
+                    if (res?.code == 200) {
+                        const data = res?.data;
+                        //setVideoUrl(data.url);
+                        if(data!=null){
+                            toplayer(data.url,null,player);
+                        }
+                    }
+                })
+            }
         }
     }
 
@@ -236,34 +282,18 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                     data["supplierLength"] = 0;
                 }
                 setBasicInfo(data);
+                basicInfoRef.current = data;
                 getCaremaData(data);//获取监控点列表
                 if (data.status == "2") {//评标结束-回看
                     getBackList("2");//数量预警
                     ((roleCode != "ebtp-site-supervision") && (roleCode != "ebtp-after-supervision")) && getBackList("3");//陌生人预警
                 }
+                
             }
         })
     }
     //获取异常预警数据
     const getWarnInfo = () => {
-        //new
-        // console.log("----------basicInfo2");
-        // console.log(basicInfo);
-        // console.log(deviceInfo);
-        // getAlarmMetadata1({ deviceSn: deviceInfo?.sn,
-        //     startTime:moment(basicInfo?.startDate).format('yyyyMMDDHHmmss'),
-        //     endTime:moment(basicInfo?.endDate).format('yyyyMMDDHHmmss'),
-        //     pageNum:"1",
-        //     pageSize:"200"}).then(res => {
-        //     if (res?.code == 200) {
-        //         const data = res?.data;
-        //         console.log(data);
-        //         if (data && data.length > 0) {
-        //             setStrangerList(data.list);
-        //             setBackStrangerList(data.list);
-        //         }
-        //     }
-        // })
 
         getWarnData({ reserveId: monitorId }).then(res => {
             if (res?.code == 200) {
@@ -283,16 +313,44 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                 setCaremaList(list);
                  if (list.length > 0) {
                     setDeviceInfo(list[0]);
+                    deviceInfoRef.current = list[0];
                     setCameraSelect(list[0].serialNumber);
-                    //setCameraParams(data[0].platform);
-                    setTimeout(() => {
-
-                    }, 1000);
-                    onGetLiveStream(baseData,list[0]);
+                    onCaremaPlay(list[0]);
+                    // var i = 0;
+                    // playerRefList.current.forEach((element) => {
+                    //     onGetLiveStream(baseData,list[i]?list[i]:null,element);
+                    //     i++;
+                    // });
+                    
                  }
             }
         })
     }
+    //播放
+    const toplayer = (url:any,endtime:any,player:any) => {
+        console.log("playerRef.current.getState() :"+player.getState())
+        if (player.getState() != 0) {
+            player.stop();
+            player.talkDestroy();
+        }
+        let options = {
+            url: url,
+            endtime: endtime,
+            isStream: true,
+            encrypted_key: "",
+            encrypted_iv: "",
+            encrypted_type: ""
+        };	
+        setTimeout(() => {
+            player.play(options);
+            if(basicInfoRef?.current.status == "2"){
+                setTimeout(() => {
+                jTimeLinePlayer();
+                }, 1000);
+            }
+          }, 1000);
+        
+    }
     //获取专家报道列表
     const getExpertList = () => {
         getExpertReports({ reserveId: monitorId, pageNo: 1, pageSize: 20 }).then(res => {
@@ -327,6 +385,7 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
             }
         })
     }
+
     //初始化字典
     const initDict = () => {
         //采购方式字典
@@ -371,16 +430,97 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
         }
     }
 
-    useEffect(() => {
+    const handleTimeChange = (nowTime: any) => {
+        playerRefList.current[0].seekTo(nowTime);
+    }
+
+    const jTimeLinePlayer = () =>{
         
-        console.log("----------basicInfo");
-        console.log(basicInfo);
+        var container = document.getElementById("container0");
+        setRecordWidthRef(container?.clientWidth);
+
+        //初始化回播组件
+        jTimeLineRef.current = new JTimeLine();
+        jTimeLineRef.current.init({
+            id: "canvas",
+            onChange: handleTimeChange,
+        });
+
+        jTimeLineRef.current.run({ time: parseInt(playerRefList.current[0].getCurTimestamp()) });  
+        changeTimer();
+    }
+
+    const changeTimer = ()=> {
+        if(timeLineTimerRef.current){
+            clearInterval(timeLineTimerRef.current);
+        }
+
+        timeLineTimerRef.current = setInterval(() => {
+            jTimeLineRef.current.run({ time: parseInt(playerRefList.current[0].getCurTimestamp()) });
+        }, timerMsRef.current);
+    }
+
+    const fullscreen = () => {
+        playerRefList.current[0].fullscreen();
+      }
+    const infoPlayer = () =>{
+        for(var i = 0 ; i < 1 ; i ++){
+            playerRefList.current[i] = new Player(document.getElementById("container"+i),null);
+        }
+    }
+
+    const mathchDot = (currentScale:any) => {
+        var position = 0;
+        switch (currentScale) {
+          case 0:
+            (position = 0), jTimeLineRef.current.changeSize(0);
+            break;
+          case 1:
+            (position = 30), jTimeLineRef.current.changeSize(1);
+            break;
+          case 2:
+            (position = 60), jTimeLineRef.current.changeSize(2);
+            break;
+          case 3:
+            (position = 100), jTimeLineRef.current.changeSize(3);
+        }
+        document.getElementsByClassName("dot-container-dot")[0].style.left = position + "%";
+      }
+
+    const onReduce = () => {
+        currentScaleRef.current > 0 && (--currentScaleRef.current, mathchDot(currentScaleRef.current));
+    }
+    const onAdd = () => {
+        currentScaleRef.current < 3 && (++currentScaleRef.current, mathchDot(currentScaleRef.current));
+    }
+
+    const setSpeedFun = () =>{
+        if (playerRefList.current[0].getState() == 2) return;
+        const arr = ["1", "2", "4", "8", "4", "2", "1", "1/2", "1/4", "1/8", "1/4", "1/2"];
+        const arr2 = [1, 2, 4, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.25, 0.5];
+        speedindexRef.current++;
+        if (speedindexRef.current == 12) {
+            speedindexRef.current=0;
+        }
+        setSpeed(arr[speedindexRef.current]);
+  
+        playerRefList.current[0].setSpeed(arr2[speedindexRef.current] + "");
+        timerMsRef.current = 1000/arr2[speedindexRef.current];
+        changeTimer();
+    }
+
+    useEffect(() => {
+        if(timeLineTimerRef.current){
+            clearInterval(timeLineTimerRef.current);
+        }
+        //初始化播放器
+        infoPlayer();
         if (auth) {
             initDict();
             getRoomData();
             getWarnInfo();
             getExpertList();
-            if (roleCode == "ebtp-site-supervision" || roleCode == "ebtp-after-supervision") { getAllStrangerList(); }
+            if (roleCode == "ebtp-site-supervision" || roleCode == "ebtp-after-supervision") { getAllStrangerList();}
         }
     }, [])
     //定时器
@@ -400,6 +540,7 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
         };
     }, [basicInfo])
 
+
     return (
         <ScreenTitle title="评标室监控">
             <div className="top-main top-main-bottom">
@@ -460,17 +601,50 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                                 </div>
                             </div>
                             <div className="right-content-c">
-                                {/* {cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={basicInfo?.status == "2" ? 1 : 0} />} */}
-                                <ReactPlayer
-                                    url={videoUrl}
-                                    playing={true}
-                                    muted={true}
-                                    loop={true} 
-                                    controls={true}
-                                    width="100%"
-                                    height="100%"
-                                />
-                               
+    
+                            <div id="container0" className="p_container" onDoubleClick={()=>fullscreen()}></div>  
+                            {basicInfo?.status == "2"?<div className="p_bottom_container">
+                                <div id="canvas-container" className="canvas-container">
+                                    <canvas
+                                    id="canvas"
+                                    className="time-line-body"
+                                    height="48px"
+                                    width={recordWidthRef}
+                                    //style="display: inline-block"
+                                    >
+                                    该浏览器不支持canvas
+                                    </canvas>
+                                </div>
+                                <div className="p_bottom">
+                                    <div className="scale">
+                                        <div>
+                                            <i className="ico ico-jian" onClick= {()=>onReduce()}></i>
+                                            <div className="dot-container" >
+                                                <div className="dot-container-dot"></div>
+                                            </div>
+                                            <i className="ico ico-jia" onClick= {()=>onAdd()}></i>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div className="item"  content="倍速" >
+                                            <button  className="speed" onClick= {()=>setSpeedFun()}>{speed}X</button>
+                                            &nbsp;&nbsp;
+                                            <i className="ico ico-quanping" onClick={() => fullscreen()}></i>
+                                        </div>
+                                    </div>  
+                                    </div>
+                                </div>:
+                                <div className="p_bottom_container">
+                                    <div id="canvas-container" className="canvas-container">
+                                    <div className="p_bottom">
+                                        <div className="scale">
+                                        </div>
+                                        <div>
+                                            <i className="ico ico-quanping" onClick={() => fullscreen()}></i>
+                                        </div>
+                                    </div>
+                                    </div>
+                                </div>}
                             </div>
                         </div>
                     </div>
@@ -500,10 +674,11 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                                         <div className="stranger-list-card" key={index}>
                                             <div>
                                                 <p><span>时间：{item.eventTime}</span></p>
-                                                {/* <p><span>时间：{item.alarmTime}</span></p> */}
+                                                <p><span>描述：{item.describeStranger}</span></p>
                                             </div>
                                             <div>
                                                 <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.filePath)} />
+                                                {/* <Image src={item.extend.picFilePath} preview={{ getContainer: "null" }} height={"100%"} /> */}
                                             </div>
                                         </div>
                                     )) : (
@@ -516,11 +691,10 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                                             <div>
                                                 <p><span>时间：{item.eventTime}</span></p>
                                                 <p><span>描述：{item.describeStranger}</span></p>
-                                                {/* <p><span>时间：{item.alarmTime}</span></p>
-                                                <p><span>描述：{item.alarmDescribe}</span></p> */}
                                             </div>
                                             <div>
                                                 <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.filePath)} />
+                                                {/* <Image src={item.picFilePath} preview={{ getContainer: "null" }} height={"100%"} /> */}
                                             </div>
                                         </div>
                                     )) : (
@@ -531,6 +705,7 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                             </div>
                         ) : btnSelect == "1" ? (
                             <ScrollTable columns={basicInfo?.status == "2" ? backPeopleNumColumns : peopleNumColumns} dataSource={basicInfo?.status == "2" ? backNumberList : earlyWarnData?.numberDetails} rowKey="id" ynum={618} />
+                            
                         ) : btnSelect == "2" ? (
                             <ScrollTable columns={staffReportColumns} dataSource={expertList} rowKey="id" ynum={618} />
                         ) : (

src/pages/ElecEvaluation/Monitor/RoomDetail/js/JtimeLine.js

@@ -0,0 +1,447 @@
+var JTimeLine = function() {
+  var status = {
+    isMouseDown: !1,
+    isOver: !1,
+    mousePosition: null,
+    oldTime: null,
+    nowTime: null,
+    moved: null,
+    hoverTime: "2018-12-07 12:00:00",
+    hoverLeft: 0,
+    timeTipShow: !1,
+    timeWidthTbls: [60, 1800, 3600, 86400, 259200],
+    timeUnits: [
+      "范围: 1分钟; 单位: 秒",
+      "范围: 30分钟; 单位: 分钟",
+      "范围: 1小时; 单位: 分钟",
+      "范围: 1天; 单位: 小时",
+      "范围: 3天; 单位: 小时",
+    ],
+    drawPen: null,
+    timeSection: [],
+    canvasWidth: null,
+    canvasHeight: null,
+    timeTips: null,
+  };
+  var _this = this;
+  Object.keys(status).forEach(function(element) {
+    _this[element] = status[element];
+  });
+  this.options = {
+    width: this.canvasWidth,
+    height: 48,
+    time: new Date().getTime(),
+    timeSection: [],
+    timeWidth: 0,
+  };
+  JTimeLine.prototype.subTime = function(time) {
+    return time < 10 ? "0" + time : time;
+  };
+  JTimeLine.prototype.tranTime = function(time) {
+    var stringTime = time;
+    var newDate;
+    if (time) {
+      newDate = new Date(time);
+      stringTime =
+        newDate.getFullYear() +
+        "/" +
+        (newDate.getMonth() + 1) +
+        "/" +
+        newDate.getDate() +
+        " " +
+        this.subTime(newDate.getHours()) +
+        ":" +
+        this.subTime(newDate.getMinutes()) +
+        ":" +
+        this.subTime(newDate.getSeconds());
+    }
+    return stringTime;
+  };
+  JTimeLine.prototype.init = function(params) {
+    var that = this;
+    var opts = this.options;
+    var callback;
+    that.timeWidthTblIndex = opts.timeWidth;
+    var canvas = document.querySelector(".time-line-body");
+    that.drawPen = canvas.getContext("2d");
+    that.nowTime = opts.time || Date.now();
+    that.timeSection = opts.timeSection || [];
+    that.canvasWidth = canvas.offsetWidth;
+    that.canvasHeight = canvas.offsetHeight;
+    that.updata();
+    document
+      .getElementById("canvas")
+      .addEventListener("mousemove", function(e) {
+        that.options.readOnly || that.mousemove(e);
+      });
+    document
+      .getElementById("canvas")
+      .addEventListener("mouseover", function(e) {
+        that.options.readOnly || that.mouseover(e);
+      });
+    document
+      .getElementById("canvas")
+      .addEventListener("mouseleave", function(e) {
+        that.options.readOnly || that.mouseleave(e);
+      });
+    document
+      .getElementById("canvas")
+      .addEventListener("mousedown", function(e) {
+        that.options.readOnly || that.mousedown(e);
+      });
+    document.getElementById("canvas").addEventListener("mouseup", function(e) {
+      if (!that.options.readOnly) {
+        callback = params.onChange;
+        that.mouseUpFn(e, callback);
+      }
+    });
+  };
+  JTimeLine.prototype.mousemove = function(e) {
+    var left;
+    var mouseOffset;
+    var timeOffsetUnit;
+    var currentTime;
+    if (this.isMouseDown && this.isOver) {
+      mouseOffset = this.mousePosition - e.pageX;
+      if (mouseOffset === 0) return;
+      timeOffsetUnit = 0;
+      switch (this.timeWidth) {
+        case 60:
+          timeOffsetUnit = 0.1;
+          break;
+        case 1800:
+        case 3600:
+          timeOffsetUnit = 3;
+          break;
+        case 86400:
+          timeOffsetUnit = 120;
+      }
+      currentTime = new Date(this.oldTime).getTime() + mouseOffset * timeOffsetUnit * 1e3;
+      this.updata({ time: currentTime });
+      this.moved = !0;
+    } else {
+      left = parseInt(
+        document.getElementById("canvas-container").offsetLeft,
+        10
+      );
+      this.mousePosition = e.pageX - left;
+      this.updata();
+    }
+  };
+  JTimeLine.prototype.mousedown = function(e) {
+    this.isMouseDown = !0;
+    this.mousePosition = e.pageX;
+    this.oldTime = this.nowTime;
+  };
+  JTimeLine.prototype.mouseover = function(e) {
+    this.isOver = !0;
+  };
+  JTimeLine.prototype.mouseleave = function(e) {
+    this.isOver = !1;
+    this.isMouseDown = !1;
+    this.updata();
+  };
+  JTimeLine.prototype.changeSize = function(timeWidth) {
+    this.options.timeWidth = timeWidth;
+    this.updata({ timeWidth: timeWidth });
+  };
+  JTimeLine.prototype.mouseUpFn = function(e, callback) {
+    if (this.isMouseDown) {
+      this.isMouseDown = !1;
+      if (this.moved) {
+        this.moved = !1;
+        this.updata({ time: this.nowTime });
+        this.oldTime = this.nowTime;
+        callback(this.nowTime);
+      }
+    }
+  };
+  JTimeLine.prototype.readOnly = function(data) {
+    this.options.readOnly = !0;
+    document.getElementById("canvas").style.cursor = "not-allowed";
+  };
+  JTimeLine.prototype.unReadOnly = function(data) {
+    this.options.readOnly = !1;
+    document.getElementById("canvas").style.cursor = "pointer";
+  };
+  JTimeLine.prototype.run = function(data) {
+    this.isMouseDown || this.updata(data);
+  };
+  JTimeLine.prototype.getTime = function(data) {
+  };
+  JTimeLine.prototype.updata = function(data) {
+    var that = this;
+    data = data || {};
+    that.nowTime = data.time || that.nowTime;
+    that.timeSection = data.timeSection || that.timeSection;
+    that.timeWidthTblIndex = data.timeWidth || that.timeWidthTblIndex;
+    that.timeWidth =
+      that.timeWidthTbls[data.timeWidth || that.timeWidthTblIndex];
+    that.timeUnit = that.timeUnits[data.timeWidth || that.timeWidthTblIndex];
+    if (data.timeWidth === 0) {
+      that.timeWidthTblIndex = 0;
+      that.timeWidth = that.timeWidthTbls[0];
+      that.timeUnit = that.timeUnits[0];
+    }
+    that.drawPen.fillStyle = "#292B36";
+    that.drawPen.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
+    that.drawScale();
+    that.drawRecord();
+    that.drawOtherMsg();
+    document.getElementById("canvas-container").style.width =
+      this.options.width + "px";
+    document.getElementById("canvas").style.width = this.options.width + "px";
+    document.getElementById("canvas-container").style.height =
+      this.options.height + "px";
+    document.getElementById("canvas").style.height = this.options.height + "px";
+  };
+  // 画刻度调用
+  JTimeLine.prototype.drawSolidLine = function(drawLineParams) {
+    let { startX, startY, endX, endY, lineWidth, color } = drawLineParams;
+    this.drawPen.save();
+    this.drawPen.strokeStyle = color;
+    this.drawPen.lineWidth = lineWidth;
+    this.drawPen.beginPath();
+    this.drawPen.moveTo(startX, startY);
+    this.drawPen.lineTo(endX, endY);
+    this.drawPen.stroke();
+    this.drawPen.restore();
+  };
+  JTimeLine.prototype.drawString = function(text, x, y, aling, color) {
+    this.drawPen.font = "12px serif";
+    this.drawPen.fillStyle = color || "#ffffff";
+    this.drawPen.textAlign = aling || "left";
+    this.drawPen.fillText(text, x, y);
+  };
+  // 画刻度
+  JTimeLine.prototype.drawScale = function() {
+    var that = this;
+    var lineColor = "rgba(255,255,255,0.3)";
+    var startDate = new Date(that.nowTime);
+    var starSecond = startDate.getSeconds();
+    var starMin = startDate.getMinutes();
+    var startHours = startDate.getHours();
+    var startDay = startDate.getDate();
+    var startYears = startDate.getFullYear();
+    var OffsetLeft = 60 * starMin + starSecond;
+    var curScale = 0;
+    var params;
+    var timeString;
+    var i;
+    var dotNum;
+    switch (that.timeWidth) {
+      case 60:
+        dotNum = parseInt(that.canvasWidth / 10);
+        startDate.setSeconds(startDate.getSeconds() - parseInt(dotNum / 2, 10));
+        startDay = startDate.getDate();
+        startHours = startDate.getHours();
+        starMin = startDate.getMinutes();
+        starSecond = startDate.getSeconds();
+        for (i = 0; i < dotNum; i++) {
+          curScale = starSecond + i;
+          startDate.setSeconds(curScale);
+          if (curScale % 10 == 0) {
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 1.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+            timeString =
+              this.subTime(startDate.getHours()) +
+              ":" +
+              this.subTime(startDate.getMinutes()) +
+              ":" +
+              this.subTime(startDate.getSeconds());
+            that.drawString(timeString,(i * that.canvasWidth) / dotNum,(that.canvasHeight / 5) * 2.5,"center","rgba(255,255,255,0.3)");
+          } else {
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 0.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+          }
+          startDate.setDate(startDay);
+          startDate.setHours(startHours);
+          startDate.setMinutes(starMin);
+        }
+        break;
+      case 1800:
+        dotNum = parseInt(that.canvasWidth / 20);
+        startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2, 10));
+        startHours = startDate.getHours();
+        starMin = startDate.getMinutes();
+        for (i = 0; i <= dotNum; i++) {
+          curScale = starMin + i;
+          startDate.setMinutes(curScale);
+          if (curScale % 5 == 0) {
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 1.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+            timeString =
+              this.subTime(startDate.getHours()) +
+              ":" +
+              this.subTime(startDate.getMinutes());
+            that.drawString(timeString,(i * that.canvasWidth) / dotNum,(that.canvasHeight / 5) * 2.5,"center","rgba(255,255,255,0.3)");
+          } else {
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 0.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+          }
+          startDate.setHours(startHours);
+        }
+        break;
+      case 3600:
+        dotNum = parseInt(that.canvasWidth / 20);
+        startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2, 10));
+        startHours = startDate.getHours();
+        starMin = startDate.getMinutes();
+        for (i = 0; i <= dotNum; i++) {
+          curScale = starMin + i;
+          startDate.setMinutes(curScale);
+          if (curScale % 10 == 0) {
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 1.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+            timeString =
+              this.subTime(startDate.getHours()) +
+              ":" +
+              this.subTime(startDate.getMinutes());
+            that.drawString(timeString,(i * that.canvasWidth) / dotNum,(that.canvasHeight / 5) * 2.5,"center","rgba(255,255,255,0.3)");
+          } else {
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 0.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+          }
+          startDate.setHours(startHours);
+        }
+        break;
+      case 86400:
+        dotNum = parseInt(that.canvasWidth / 30);
+        startDate.setHours(startDate.getHours() - parseInt(dotNum / 2, 10));
+        starSecond = startDate.getSeconds();
+        starMin = startDate.getMinutes();
+        startHours = startDate.getHours();
+        startDay = startDate.getDate();
+        startYears = startDate.getFullYear();
+        for (i = 0; i <= dotNum; i++) {
+          curScale = startHours + i;
+          startDate.setHours(curScale);
+          if (curScale % 24 != 0) {
+            timeString = this.subTime(startDate.getHours()) + ":00";
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 0.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+          } else {
+            timeString = startDate.toLocaleDateString();
+            params = { startX:(i * that.canvasWidth) / dotNum, startY:0, endX:(i * that.canvasWidth) / dotNum, endY:(that.canvasHeight / 5) * 1, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+          }
+          if (curScale % 2 == 0) {
+            that.drawString(timeString,(i * that.canvasWidth) / dotNum,(that.canvasHeight / 5) * 2,"center","rgba(255,255,255,0.3)");
+          }
+          startDate.setFullYear(startYears);
+          startDate.setDate(startDay);
+          startDate.setHours(startHours);
+        }
+        break;
+      case 259200:
+        startDate.setHours(startDate.getHours() - 36);
+        starSecond = startDate.getSeconds();
+        starMin = startDate.getMinutes();
+        startHours = startDate.getHours();
+        OffsetLeft = 60 * starMin + starSecond;
+        for (i = 0; i <= 72; i++) {
+          curScale = startHours + i;
+          if (curScale >= 24) {
+            curScale %= 24;
+          }
+          curScale === 0? startDate.setHours(24):startDate.setHours(curScale);
+          timeString = this.subTime(startDate.getHours());
+          if (curScale % 3 == 0) {
+            curScale || (timeString = startDate.toLocaleDateString());
+            that.drawString(timeString,((3600 * i - OffsetLeft) * that.canvasWidth) / 259200,(that.canvasHeight / 5) * 2.5,"center","rgba(255,255,255,0.3)");
+            params = { startX:((3600 * i - OffsetLeft) * that.canvasWidth) / 259200, startY:0, endX:((3600 * i - OffsetLeft) * that.canvasWidth) / 259200, endY:(that.canvasHeight / 5) * 1, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+          } else {
+            params = { startX:((3600 * i - OffsetLeft) * that.canvasWidth) / 259200, startY:0, endX:((3600 * i - OffsetLeft) * that.canvasWidth) / 259200, endY:(that.canvasHeight / 5) * 0.5, lineWidth:1, color:lineColor };
+            that.drawSolidLine(params);
+          }
+        }
+    }
+  };
+  JTimeLine.prototype.getRecord = function(timeArr) {
+    this.timeSection = timeArr;
+  };
+  // 画进度条
+  JTimeLine.prototype.drawRecord = function() {
+    var startPosition;
+    var endPosition;
+    function findPosition(time) {
+      var scale = 10;
+      switch (that.timeWidth) {
+        case 60:
+          scale = 10;
+          break;
+        case 1800:
+        case 3600:
+          scale = 20 / 60;
+          break;
+        case 86400:
+          scale = 20 / 60 / 60;
+      }
+      var nowTimePostion = that.canvasWidth / 2;
+      var position = nowTimePostion + ((time - that.nowTime) / 1e3) * scale;
+      if (position > that.canvasWidth) {
+        position = that.canvasWidth;
+      }
+      if (position <= 0) {
+        position = 0;
+      }
+      return position;
+    }
+    var timeArr = this.timeSection || [];
+    var that = this;
+    var drawPen = that.drawPen;
+    var i;
+    for (i = 0; i < timeArr.length; i++) {
+      startPosition = findPosition(timeArr[i].startTime);
+      endPosition = findPosition(timeArr[i].endTime);
+      drawPen.fillStyle = "#FF502E";
+      drawPen.fillRect(
+        startPosition,
+        (that.canvasHeight / 5) * 3,
+        endPosition - startPosition,
+        (that.canvasHeight / 5) * 1.5
+      );
+    }
+  };
+  // 画中间的条
+  JTimeLine.prototype.drawOtherMsg = function() {
+    this.drawPen.shadowColor = "#ffffff";
+    this.drawPen.shadowOffsetX = 0;
+    this.drawPen.shadowOffsetY = 0;
+    this.drawPen.shadowBlur = 10;
+    this.drawPen.beginPath();
+    this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, 0);
+    this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, 0);
+    this.drawPen.lineTo(this.canvasWidth / 2, 4.5);
+    this.drawPen.fillStyle = "#fff";
+    this.drawPen.closePath();
+    this.drawPen.fill();
+    this.drawPen.beginPath();
+    this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, this.canvasHeight);
+    this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, this.canvasHeight);
+    this.drawPen.lineTo(this.canvasWidth / 2, this.canvasHeight - 4.5);
+    this.drawPen.fillStyle = "#fff";
+    this.drawPen.closePath();
+    this.drawPen.fill();
+    var params = { startX:this.canvasWidth / 2, startY:0, endX:this.canvasWidth / 2, endY:this.canvasHeight, lineWidth:2, color:"#ffffff" };
+    this.drawSolidLine(params);
+    this.drawPen.shadowBlur = 0;
+    if (this.isOver) {
+      if (!this.isMouseDown) {
+        this.mouseTime =
+          (this.mousePosition / this.canvasWidth) * this.timeWidth * 1e3 +
+          this.nowTime -
+          (this.timeWidth / 2) * 1e3;
+        this.mouseString = this.tranTime(this.mouseTime);
+        this.hoverTime = this.mouseString;
+        this.hoverLeft = this.mousePosition - 60;
+        this.timeTipShow = !0;
+      } else {
+        this.timeTipShow = !1;
+      }
+    }
+  };
+};
+
+export default JTimeLine;

src/pages/ElecEvaluation/Monitor/service.ts

@@ -366,6 +366,8 @@ export async function getAlarmMetadata2(data: any) {
  */
 export async function getAlarmMetadata(data: any) {
     console.log(data);
+    data["pageNum"]="1";
+    data["pageSize"]="6";
     return request('/api/biz-service-ebtp-evaluation/v1/eval/room/jovision/getAlarmMetadata', {
         method: 'POST',
         data: data,

src/pages/ElecEvaluation/Monitor/wasmStyle.less

@@ -0,0 +1,194 @@
+.p_top {
+    width: 100%;
+    height: 48px;
+    background: #292b36;
+    padding: 14px 21px 0 21px;
+    font-size: 14px;
+    color: #ffffff;
+    letter-spacing: 0;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+  }
+  .p_container {
+    overflow: hidden;
+    position: relative;
+    height: 95%;
+    width: 100%;
+    background: #000;
+    // text-align: center;
+  }
+  .p_bottom_container {
+    position: relative;
+    width: 100%;
+  }
+    .p_bottom {
+      width: 100%;
+      top:-48px;
+      height: 48px;
+      background: #292b36;
+      padding: 14px 21px 0 21px;
+      font-size: 14px;
+      color: #ffffff;
+      letter-spacing: 0;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+
+    }
+	.scale .dot-container {
+        display: inline-block;
+        height: 16px;
+        width: 60px;
+        position: relative;
+        background: #fff;
+        height: 2px;
+        margin: 7px 10px;
+        line-height: 16px;
+        vertical-align: middle;
+
+      }
+	  .dot-container-dot {
+          display: inline-block;
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          background: #fff;
+          border-radius: 100%;
+          top: -3.5px;
+          left: 0;
+     }
+    .current-time {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 12px;
+      z-index: 99;
+      background: #06070b;
+      border-radius: 12px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 14px;
+      color: #ffffff;
+      letter-spacing: 0;
+      text-align: center;
+      width: 176.5px;
+    }
+    .canvas-container {
+      position: absolute;
+      top: -48px;
+      opacity: 0.8;
+      background: #292b36;
+      width: 100%;
+      z-index: 100;
+      height: 48px;
+    }
+
+  .ico {
+    min-width: 22px;
+    min-height: 22px;
+    margin-right: 4px;
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .ico2 {
+    min-width: 3px;
+    min-height: 3px;
+    margin-right: 3px;
+    display: inline-block;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+  }
+  .ico-guanbi {
+    background-image: url("./RoomDetail/assessts/gb.png");
+  }
+  .ico-huifang {
+    background-image: url("./RoomDetail/assessts/hf.png");
+  }
+  .ico-jia {
+    background-image: url("./RoomDetail/assessts/j.png");
+  }
+  .ico-jian {
+    background-image: url("./RoomDetail/assessts/ja.png");
+  }
+  .ico-jietu {
+    background-image: url("./RoomDetail/assessts/jie.png");
+  }
+  .ico-jietu-d {
+    background-image: url("./RoomDetail/assessts/jie_d.png");
+  }
+  .ico-luxiang {
+    background-image: url("./RoomDetail/assessts/lx.png");
+  }
+  .ico-luxiang-d {
+    background-image: url("./RoomDetail/assessts/lx_d.png");
+  }
+  .ico-luxiang_a {
+    background-image: url("./RoomDetail/assessts/luxiang_a.png");
+    background-repeat: no-repeat;
+  }
+  .ico-quanping {
+    background-image: url("./RoomDetail/assessts/qp.png");
+  }
+  .ico-yulan {
+    background-image: url("./RoomDetail/assessts/yl.png");
+  }
+  .ico-zhankai {
+    background-image: url("./RoomDetail/assessts/zk.png");
+  }
+  .ico-dian {
+    background-image: url("./RoomDetail/assessts/dian.png");
+  }
+  .ico-yy {
+    background-image: url("./RoomDetail/assessts/yy.png");
+  }
+  .ico-yy_s {
+    background-image: url("./RoomDetail/assessts/yy_s.png");
+  }
+  .ico-yy_a {
+    background-image: url("./RoomDetail/assessts/yy_a.png");
+  }
+.iconPlay {
+  width: 120px;
+  height: 120px;
+  cursor: pointer;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.speed {
+  background: rgba(255, 255, 255, 0.1);
+  display: inline-block;
+  font-size: 14px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  color: #fff;
+  margin-right: 8px;
+  border: #ccc 1px solid;
+}
+.recordTime {
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  top: 63px;
+  z-index: 9999;
+  color: #fff;
+  opacity: 0.9;
+  background: #292b36;
+  border-radius: 4px;
+  border-radius: 100px;
+  width: 81px;
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+}
+.msgt {
+  font-size: 12px;
+  color: #606266;
+}

src/pages/document.ejs

@@ -27,7 +27,7 @@
   <script type="text/javascript" src="<%= context.config.publicPath +'screen/jsencrypt.min.js'%>"
     charset="utf-8"></script>
   <script type="text/javascript" src="<%= context.config.publicPath +'screen/jsWebControl-1.0.0.min.js'%>"
-    charset="utf-8"></script>
+    charset="utf-8"></script>                         
   <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
   <!-- <link rel="icon" href="./../assets/logo.svg"/> -->
 </head>