zc

.env.production

@@ -12,7 +12,7 @@ VUE_APP_RENEWAL_ENCODING = ''
 # ####################外网接口配置####################
 
 # 现场
-VUE_APP_BASE_API = '172.16.0.65/api'
+VUE_APP_BASE_API = 'labcontrol.nwafu.edu.cn/api'
 
 # 1.8外网地址
 # VUE_APP_BASE_API = 'lab.zjznai.com/labTest'

package.json

@@ -19,6 +19,7 @@
     "js-md5": "^0.8.3",
     "mpegts.js": "^1.7.3",
     "mqtt": "^4.2.8",
+    "node-polyfill-webpack-plugin": "^4.1.0",
     "node-sass": "^7.0.1",
     "qs": "^6.11.0",
     "sass-loader": "^13.0.2",
@@ -35,6 +36,7 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "process": "^0.11.10",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

public/h5player/playctrl1/DecodeWorker.js

@@ -0,0 +1,642 @@
+/**
+ * Created by wangweijie5 on 2016/12/5.
+ */
+(function (event) {
+    const AUDIO_TYPE = 0;	// 音频
+    const VIDEO_TYPE = 1;   // 视频
+    const PRIVT_TYPE = 2;  // 私有帧
+
+    const PLAYM4_AUDIO_FRAME = 100; // 音频帧
+    const PLAYM4_VIDEO_FRAME = 101; // 视频帧
+
+    const PLAYM4_OK = 1;
+    const PLAYM4_ORDER_ERROR = 2;
+    const PLAYM4_DECODE_ERROR = 44 	// 解码失败
+    const PLAYM4_NOT_KEYFRAME = 48; 	// 非关键帧
+    const PLAYM4_NEED_MORE_DATA = 31;   // 需要更多数据才能解析
+    const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
+    const PLAYM4_SYS_NOT_SUPPORT = 16; 	// 不支持
+
+    importScripts('Decoder.js');
+    Module.addOnPostRun(function () {
+        postMessage({ 'function': "loaded" });
+    });
+
+    var iStreamMode = 0;  // 流模式
+
+    var bOpenMode = false;
+    var bOpenStream = false;
+
+    var funGetFrameData = null;
+    var funGetAudFrameData = null;
+
+    var bWorkerPrintLog = false;//worker层log开关
+
+    var g_nPort = -1;
+    var pInputData = null;
+    var inputBufferSize = 40960;
+
+    self.JSPlayM4_RunTimeInfoCallBack = function (nPort, pstRunTimeInfo, pUser) {
+        let port = nPort;
+        let user = pUser;
+        let nRunTimeModule = Module.HEAP32[pstRunTimeInfo >> 2];
+        let nStrVersion = Module.HEAP32[pstRunTimeInfo + 4 >> 2];
+        let nFrameTimeStamp = Module.HEAP32[pstRunTimeInfo + 8 >> 2];
+        let nFrameNum = Module.HEAP32[pstRunTimeInfo + 12 >> 2];
+        let nErrorCode = Module.HEAP32[pstRunTimeInfo + 16 >> 2];
+        // console.log("nRunTimeModule:"+nRunTimeModule+",nFrameNum:"+nFrameNum+",nErrorCode:"+nErrorCode);
+        postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
+    }
+
+    onmessage = function (event) {
+        var eventData = event.data;
+        var res = 0;
+        switch (eventData.command) {
+            case "printLog":
+                let downloadFlag = eventData.data;
+                if (downloadFlag === true) {
+                    bWorkerPrintLog = true;
+                    res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
+                }
+                else {
+                    bWorkerPrintLog = false;
+                    res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
+                }
+
+                if (res !== PLAYM4_OK) {
+                    console.log("DecodeWorker.js: PlayerSDK print log failed,res" + res);
+                    postMessage({ 'function': "printLog", 'errorCode': res });
+                }
+                break;
+            case "SetPlayPosition":
+                let nFrameNumOrTime = eventData.data;
+                let enPosType = eventData.type;
+                // res = Module._SetPlayPosition(nFrameNumOrTime,enPosType);
+                // if (res !== PLAYM4_OK)
+                // {
+                //     postMessage({'function': "SetPlayPosition", 'errorCode': res});
+                //     return;
+                // }
+                // //有没有buffer需要清除
+
+                break;
+            case "SetStreamOpenMode":
+                //获取端口号
+                g_nPort = Module._GetPort();
+                //设置流打开模式
+                iStreamMode = eventData.data;
+                res = Module._SetStreamOpenMode(g_nPort, iStreamMode);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetStreamOpenMode", 'errorCode': res });
+                    return;
+                }
+                bOpenMode = true;
+                break;
+
+            case "OpenStream":
+                // 接收到的数据
+                var iHeadLen = eventData.dataSize;
+                var pHead = Module._malloc(iHeadLen + 4);
+                if (pHead === null) {
+                    return;
+                }
+                var aHead = Module.HEAPU8.subarray(pHead, pHead + iHeadLen);
+                aHead.set(new Uint8Array(eventData.data));
+                res = Module._OpenStream(g_nPort, pHead, iHeadLen, eventData.bufPoolSize);
+                postMessage({ 'function': "OpenStream", 'errorCode': res });
+                if (res !== PLAYM4_OK) {
+                    //释放内存
+                    Module._free(pHead);
+                    pHead = null;
+                    return;
+                }
+                bOpenStream = true;
+                break;
+            case "Play":
+                let resP = Module._Play(g_nPort);
+                if (resP !== PLAYM4_OK) {
+                    return;
+                }
+                break;
+            case "InputData":
+                // 接收到的数据
+                var iLen = eventData.dataSize;
+                if (iLen > 0) {
+                    if (pInputData == null || iLen > inputBufferSize) {
+                        if (pInputData != null) {
+                            Module._free(pInputData);
+                            pInputData = null;
+                        }
+                        if (iLen > inputBufferSize) {
+                            inputBufferSize = iLen;
+                        }
+
+                        pInputData = Module._malloc(inputBufferSize);
+                        if (pInputData === null) {
+                            return;
+                        }
+                    }
+
+                    var inputData = new Uint8Array(eventData.data);
+                    // var aInputData = Module.HEAPU8.subarray(pInputData, pInputData + iLen);
+                    // aInputData.set(inputData);
+                    Module.writeArrayToMemory(inputData, pInputData);
+                    inputData = null;
+                    res = Module._InputData(g_nPort, pInputData, iLen);
+                    if (res !== PLAYM4_OK) {
+                        let errorCode = Module._GetLastError(g_nPort);
+                        let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                        postMessage({ 'function': "InputData", 'errorCode': errorCode, "sourceRemain": sourceRemain });
+                    }
+                    //Module._free(pInputData);
+                    //pInputData = null;
+                } else {
+                    let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                    if (sourceRemain == 0) {
+                        postMessage({ 'function': "InputData", 'errorCode': PLAYM4_NEED_MORE_DATA });
+                        return;
+                    }
+                }
+
+                /////////////////////
+                // if (funGetFrameData === null) {
+                //     funGetFrameData = Module.cwrap('GetFrameData', 'number');
+                // }
+
+                while (bOpenMode && bOpenStream) {
+
+                    var ret = getFrameData();
+                    // 直到获取视频帧或数据不足为止
+                    if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret || PLAYM4_ORDER_ERROR === ret)//PLAYM4_VIDEO_FRAME === ret ||  || PLAYM4_NEED_NEET_LOOP === ret
+                    {
+                        break;
+                    }
+                }
+                break;
+
+            case "SetSecretKey":
+                var keyLen = eventData.nKeyLen;
+                var pKeyData = Module._malloc(keyLen);
+                if (pKeyData === null) {
+                    return;
+                }
+                var nKeySize = eventData.data.length
+                var bufData = stringToBytes(eventData.data);
+                var aKeyData = Module.HEAPU8.subarray(pKeyData, pKeyData + keyLen);
+                let u8array = new Uint8Array(keyLen);
+                aKeyData.set(u8array, 0);
+                aKeyData.set(new Uint8Array(bufData));
+                aKeyData = null;
+                u8array = null;
+
+                res = Module._SetSecretKey(g_nPort, eventData.nKeyType, pKeyData, keyLen);//, nKeySize
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetSecretKey", 'errorCode': res });
+                    Module._free(pKeyData);
+                    pKeyData = null;
+                    return;
+                }
+
+                Module._free(pKeyData);
+                pKeyData = null;
+                break;
+
+            case "GetBMP":
+                var nBMPWidth = eventData.width;
+                var nBMPHeight = eventData.height;
+                var pYUVData = eventData.data;
+                var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
+                var oJpegCropRect = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                var pDataYUV = Module._malloc(nYUVSize);
+                if (pDataYUV === null) {
+                    return;
+                }
+
+                Module.writeArrayToMemory(new Uint8Array(pYUVData, 0, nYUVSize), pDataYUV);
+
+                // 分配BMP空间
+                var nBmpSize = nBMPWidth * nBMPHeight * 4 + 60;
+                var pBmpData = Module._malloc(nBmpSize);
+                var pBmpSize = Module._malloc(4);
+                if (pBmpData === null || pBmpSize === null) {
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+
+                    if (pBmpData != null) {
+                        Module._free(pBmpData);
+                        pBmpData = null;
+                    }
+
+                    if (pBmpSize != null) {
+                        Module._free(pBmpSize);
+                        pBmpSize = null;
+                    }
+                    return;
+                }
+
+                //Module._memset(pBmpSize, nBmpSize, 4); // 防止bmp截图出现输入数据过大的错误码
+                Module.setValue(pBmpSize, nBmpSize, "i32");
+                res = Module._GetBMP(g_nPort, pDataYUV, nYUVSize, pBmpData, pBmpSize,
+                    oBMPCropRect.left, oBMPCropRect.top, oBMPCropRect.right, oBMPCropRect.bottom);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "GetBMP", 'errorCode': res });
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+                    Module._free(pBmpData);
+                    pBmpData = null;
+                    Module._free(pBmpSize);
+                    pBmpSize = null;
+                    return;
+                }
+
+                // 获取BMP图片大小
+                var nBmpDataSize = Module.getValue(pBmpSize, "i32");
+
+                // 获取BMP图片数据
+                var aBmpData = new Uint8Array(nBmpDataSize);
+                aBmpData.set(Module.HEAPU8.subarray(pBmpData, pBmpData + nBmpDataSize));
+
+                postMessage({ 'function': "GetBMP", 'data': aBmpData, 'errorCode': res }, [aBmpData.buffer]);
+                aBmpData = null;
+                if (pDataYUV != null) {
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+                }
+                if (pBmpData != null) {
+                    Module._free(pBmpData);
+                    pBmpData = null;
+                }
+                if (pBmpSize != null) {
+                    Module._free(pBmpSize);
+                    pBmpSize = null;
+                }
+                break;
+
+            case "GetJPEG":
+                var nJpegWidth = eventData.width;
+                var nJpegHeight = eventData.height;
+                var pYUVData1 = eventData.data;
+                var nYUVSize1 = nJpegWidth * nJpegHeight * 3 / 2;
+                var oJpegCropRect = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                var pDataYUV1 = Module._malloc(nYUVSize1);
+                if (pDataYUV1 === null) {
+                    return;
+                }
+
+                Module.writeArrayToMemory(new Uint8Array(pYUVData1, 0, nYUVSize1), pDataYUV1);
+
+                // 分配JPEG空间
+                var pJpegData = Module._malloc(nYUVSize1);
+                var pJpegSize = Module._malloc(4);
+                if (pJpegData === null || pJpegSize === null) {
+                    if (pJpegData != null) {
+                        Module._free(pJpegData);
+                        pJpegData = null;
+                    }
+
+                    if (pJpegSize != null) {
+                        Module._free(pJpegSize);
+                        pJpegSize = null;
+                    }
+
+                    if (pDataYUV1 != null) {
+                        Module._free(pDataYUV1);
+                        pDataYUV1 = null;
+                    }
+                    return;
+                }
+
+                Module.setValue(pJpegSize, nJpegWidth * nJpegHeight * 2, "i32");    // JPEG抓图，输入缓冲长度不小于当前帧YUV大小
+
+                res = Module._GetJPEG(g_nPort, pDataYUV1, nYUVSize1, pJpegData, pJpegSize,
+                    oJpegCropRect.left, oJpegCropRect.top, oJpegCropRect.right, oJpegCropRect.bottom);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "GetJPEG", 'errorCode': res });
+                    if (pJpegData != null) {
+                        Module._free(pJpegData);
+                        pJpegData = null;
+                    }
+
+                    if (pJpegSize != null) {
+                        Module._free(pJpegSize);
+                        pJpegSize = null;
+                    }
+
+                    if (pDataYUV1 != null) {
+                        Module._free(pDataYUV1);
+                        pDataYUV1 = null;
+                    }
+                    return;
+                }
+
+                // 获取JPEG图片大小
+                var nJpegSize = Module.getValue(pJpegSize, "i32");
+
+                // 获取JPEG图片数据
+                var aJpegData = new Uint8Array(nJpegSize);
+                aJpegData.set(Module.HEAPU8.subarray(pJpegData, pJpegData + nJpegSize));
+
+                postMessage({ 'function': "GetJPEG", 'data': aJpegData, 'errorCode': res }, [aJpegData.buffer]);
+
+                nJpegSize = null;
+                aJpegData = null;
+
+                if (pDataYUV1 != null) {
+                    Module._free(pDataYUV1);
+                    pDataYUV1 = null;
+                }
+                if (pJpegData != null) {
+                    Module._free(pJpegData);
+                    pJpegData = null;
+                }
+                if (pJpegSize != null) {
+                    Module._free(pJpegSize);
+                    pJpegSize = null;
+                }
+                break;
+
+            case "SetDecodeFrameType":
+                var nFrameType = eventData.data;
+                res = Module._SetDecodeFrameType(g_nPort, nFrameType);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetDecodeFrameType", 'errorCode': res });
+                    return;
+                }
+                break;
+            case "CloseStream":
+                //stop
+                let resS = Module._Stop(g_nPort);
+                if (resS !== PLAYM4_OK) {
+                    postMessage({ 'function': "Stop", 'errorCode': res });
+                    return;
+                }
+                //closeStream
+                res = Module._CloseStream(g_nPort);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "CloseStream", 'errorCode': res });
+                    return;
+                }
+                //freePort
+                let resF = Module._FreePort(g_nPort);
+                if (resF !== PLAYM4_OK) {
+                    postMessage({ 'function': "FreePort", 'errorCode': res });
+                    return;
+                }
+                if (pInputData != null) {
+                    Module._free(pInputData);
+                    pInputData = null;
+                }
+                break;
+            case "PlaySound":
+                let resPS = Module._PlaySound(g_nPort);
+                if (resPS !== PLAYM4_OK) {
+                    console.log("PlaySound failed");
+                    return;
+                }
+                break;
+            case "StopSound":
+                let resSS = Module._StopSound();
+                if (resSS !== PLAYM4_OK) {
+                    console.log("StopSound failed");
+                    return;
+                }
+                break;
+            case "SetVolume":
+                let resSV = Module._SetVolume(g_nPort, eventData.volume);
+                if (resSV !== PLAYM4_OK) {
+                    console.log("Audio SetVolume failed");
+                    return;
+                }
+                break;
+            case "GetVolume":
+                let volume = Module._GetVolume();
+                if (volume > 0) {
+                    postMessage({ 'function': "GetVolume", 'volume': volume });
+                }
+                else {
+                    console.log("Audio GetVolume failed");
+                    return;
+                }
+                break;
+            case "OnlyPlaySound":
+                let resOPS = Module._OnlyPlaySound(g_nPort);
+                if (resOPS !== PLAYM4_OK) {
+                    console.log("OnlyPlaySound failed");
+                    return;
+                }
+                break;
+            case "Pause":
+                let resPa = Module._Pause(g_nPort, eventData.bPlay);
+                if (resPa !== PLAYM4_OK) {
+                    console.log("Pause failed");
+                    return;
+                }
+            case "PlayRate":
+                Module._SetPlayRate(g_nPort, eventData.playRate);
+                break;
+            case "SetIFrameDecInterval":
+                Module._SetIFrameDecInterval(g_nPort, eventData.data);
+                break;
+            case "SetLostFrameMode":
+                Module._SetLostFrameMode(g_nPort, eventData.data, 0);
+                break;
+            case "SetDemuxModel":
+                Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
+                break;
+            case "SkipErrorData":
+                Module._SkipErrorData(g_nPort, eventData.bSkip);
+                break;
+            case "SetDecodeERC":
+                Module._SetDecodeERC(g_nPort, eventData.nLevel);
+                break;
+            case "SetANRParam":
+                Module._SetANRParam(g_nPort, eventData.nEnable, eventData.nANRLevel);
+                break;
+            case "SetResampleValue":
+                Module._SetResampleValue(g_nPort, eventData.nEnable, eventData.resampleValue);
+                break;
+            case "GetLastError":
+                let errorCode = Module._GetLastError(g_nPort);
+                postMessage({ 'function': "GetLastError", 'errorCode': errorCode });
+                break;
+            case "SetGlobalBaseTime":
+                Module._SetGlobalBaseTime(g_nPort, eventData.year, eventData.month, eventData.day, eventData.hour, eventData.min, eventData.sec, eventData.ms);
+                break;
+            case "SetRunTimeInfoCB":
+                Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
+                break;
+            default:
+                break;
+        }
+    };
+
+    function getOSDTime(oFrameInfo) {
+        var iYear = oFrameInfo.year;
+        var iMonth = oFrameInfo.month;
+        var iDay = oFrameInfo.day;
+        var iHour = oFrameInfo.hour;
+        var iMinute = oFrameInfo.minute;
+        var iSecond = oFrameInfo.second;
+
+        if (iMonth < 10) {
+            iMonth = "0" + iMonth;
+        }
+        if (iDay < 10) {
+            iDay = "0" + iDay;
+        }
+        if (iHour < 10) {
+            iHour = "0" + iHour;
+        }
+        if (iMinute < 10) {
+            iMinute = "0" + iMinute;
+        }
+        if (iSecond < 10) {
+            iSecond = "0" + iSecond;
+        }
+
+        return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
+    }
+    // 获取帧数据
+    function getFrameData() {
+        // function getFrameData() {
+        // 获取帧数据
+        var res = Module._GetFrameData();
+        //var res = fun();
+        if (res === PLAYM4_OK) {
+            var oFrameInfo = Module._GetFrameInfo();
+            switch (oFrameInfo.frameType) {
+                case AUDIO_TYPE:
+                    var iSize = oFrameInfo.frameSize;
+                    if (0 === iSize) {
+                        return -1;
+                    }
+                    var pPCM = Module._GetFrameBuffer();
+                    // var audioBuf = new ArrayBuffer(iSize);
+                    var aPCMData = new Uint8Array(iSize);
+                    aPCMData.set(Module.HEAPU8.subarray(pPCM, pPCM + iSize));
+                    if (bWorkerPrintLog) {
+                        console.log("<<<Worker: audio media Info: nSise:" + oFrameInfo.frameSize + ",nSampleRate:" + oFrameInfo.samplesPerSec + ',channel:' + oFrameInfo.channels + ',bitsPerSample:' + oFrameInfo.bitsPerSample);
+                    }
+                    postMessage({
+                        'function': "GetFrameData", 'type': "audioType", 'data': aPCMData.buffer,
+                        'frameInfo': oFrameInfo, 'errorCode': res
+                    }, [aPCMData.buffer]);
+
+                    oFrameInfo = null;
+                    pPCM = null;
+                    aPCMData = null;
+                    return PLAYM4_AUDIO_FRAME;
+
+                case VIDEO_TYPE:
+                    var szOSDTime = getOSDTime(oFrameInfo);
+
+                    var iWidth = oFrameInfo.width;
+                    var iHeight = oFrameInfo.height;
+
+                    var iYUVSize = iWidth * iHeight * 3 / 2;
+                    if (0 === iYUVSize) {
+                        return -1;
+                    }
+
+                    var pYUV = Module._GetFrameBuffer();
+
+                    // 图像数据渲染后压回，若从主码流切到子码流，存在数组大小与图像大小不匹配现象
+                    var aYUVData = new Uint8Array(iYUVSize);
+                    aYUVData.set(Module.HEAPU8.subarray(pYUV, pYUV + iYUVSize));
+                    if (bWorkerPrintLog) {
+                        console.log("<<<Worker: video media Info: Width:" + oFrameInfo.width + ",Height:" + oFrameInfo.height + ",timeStamp:" + oFrameInfo.timeStamp);
+                    }
+
+                    postMessage({
+                        'function': "GetFrameData", 'type': "videoType", 'data': aYUVData.buffer,
+                        'dataLen': aYUVData.length, 'osd': szOSDTime, 'frameInfo': oFrameInfo, 'errorCode': res
+                    }, [aYUVData.buffer]);
+
+                    oFrameInfo = null;
+                    pYUV = null;
+                    aYUVData = null;
+                    return PLAYM4_VIDEO_FRAME;
+
+                case PRIVT_TYPE:
+                    postMessage({
+                        'function': "GetFrameData", 'type': "", 'data': null,
+                        'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
+                    });
+                    return PLAYM4_SYS_NOT_SUPPORT;
+
+                default:
+                    postMessage({
+                        'function': "GetFrameData", 'type': "", 'data': null,
+                        'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
+                    });
+                    return PLAYM4_SYS_NOT_SUPPORT;
+            }
+        }
+        else {
+            let errorCode = Module._GetLastError(g_nPort);
+            //解码失败返回裸数据
+            if (PLAYM4_DECODE_ERROR === errorCode) {
+                var rawInfo = Module._GetRawDataInfo();
+                var pRawData = Module._GetRawDataBuffer();
+                var aRawData = new Uint8Array(rawInfo.isize);
+                aRawData.set(Module.HEAPU8.subarray(pRawData, pRawData + rawInfo.isize));
+                postMessage({
+                    'function': "GetRawData", 'type': "", 'data': aRawData.buffer,
+                    'rawDataLen': rawInfo.isize, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
+                });
+                rawInfo = null;
+                pRawData = null;
+                aRawData = null;
+            }
+            //需要更多数据
+            if (PLAYM4_NEED_MORE_DATA === errorCode || PLAYM4_SYS_NOT_SUPPORT === errorCode || PLAYM4_NEED_NEET_LOOP === errorCode) {
+                postMessage({
+                    'function': "GetFrameData", 'type': "", 'data': null,
+                    'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
+                });
+            }
+            return errorCode;
+        }
+    }
+
+    // 开始计算时间
+    function startTime() {
+        return new Date().getTime();
+    }
+
+    // 结束计算时间
+    function endTime() {
+        return new Date().getTime();
+    }
+
+    // 字母字符串转byte数组
+    function stringToBytes(str) {
+        var ch, st, re = [];
+        for (var i = 0; i < str.length; i++) {
+            ch = str.charCodeAt(i);  // get char
+            st = [];                 // set up "stack"
+            do {
+                st.push(ch & 0xFF);  // push byte to stack
+                ch = ch >> 8;          // shift value down by 1 byte
+            }
+            while (ch);
+            // add stack contents to result
+            // done because chars have "wrong" endianness
+            re = re.concat(st.reverse());
+        }
+        // return an array of bytes
+        return re;
+    }
+})();

public/h5player/playctrl1simd/DecodeWorker.js

@@ -0,0 +1,642 @@
+/**
+ * Created by wangweijie5 on 2016/12/5.
+ */
+(function (event) {
+    const AUDIO_TYPE = 0;	// 音频
+    const VIDEO_TYPE = 1;   // 视频
+    const PRIVT_TYPE = 2;  // 私有帧
+
+    const PLAYM4_AUDIO_FRAME = 100; // 音频帧
+    const PLAYM4_VIDEO_FRAME = 101; // 视频帧
+
+    const PLAYM4_OK = 1;
+    const PLAYM4_ORDER_ERROR = 2;
+    const PLAYM4_DECODE_ERROR = 44 	// 解码失败
+    const PLAYM4_NOT_KEYFRAME = 48; 	// 非关键帧
+    const PLAYM4_NEED_MORE_DATA = 31;   // 需要更多数据才能解析
+    const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
+    const PLAYM4_SYS_NOT_SUPPORT = 16; 	// 不支持
+
+    importScripts('Decoder.js');
+    Module.addOnPostRun(function () {
+        postMessage({ 'function': "loaded" });
+    });
+
+    var iStreamMode = 0;  // 流模式
+
+    var bOpenMode = false;
+    var bOpenStream = false;
+
+    var funGetFrameData = null;
+    var funGetAudFrameData = null;
+
+    var bWorkerPrintLog = false;//worker层log开关
+
+    var g_nPort = -1;
+    var pInputData = null;
+    var inputBufferSize = 40960;
+
+    self.JSPlayM4_RunTimeInfoCallBack = function (nPort, pstRunTimeInfo, pUser) {
+        let port = nPort;
+        let user = pUser;
+        let nRunTimeModule = Module.HEAP32[pstRunTimeInfo >> 2];
+        let nStrVersion = Module.HEAP32[pstRunTimeInfo + 4 >> 2];
+        let nFrameTimeStamp = Module.HEAP32[pstRunTimeInfo + 8 >> 2];
+        let nFrameNum = Module.HEAP32[pstRunTimeInfo + 12 >> 2];
+        let nErrorCode = Module.HEAP32[pstRunTimeInfo + 16 >> 2];
+        // console.log("nRunTimeModule:"+nRunTimeModule+",nFrameNum:"+nFrameNum+",nErrorCode:"+nErrorCode);
+        postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
+    }
+
+    onmessage = function (event) {
+        var eventData = event.data;
+        var res = 0;
+        switch (eventData.command) {
+            case "printLog":
+                let downloadFlag = eventData.data;
+                if (downloadFlag === true) {
+                    bWorkerPrintLog = true;
+                    res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
+                }
+                else {
+                    bWorkerPrintLog = false;
+                    res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
+                }
+
+                if (res !== PLAYM4_OK) {
+                    console.log("DecodeWorker.js: PlayerSDK print log failed,res" + res);
+                    postMessage({ 'function': "printLog", 'errorCode': res });
+                }
+                break;
+            case "SetPlayPosition":
+                let nFrameNumOrTime = eventData.data;
+                let enPosType = eventData.type;
+                // res = Module._SetPlayPosition(nFrameNumOrTime,enPosType);
+                // if (res !== PLAYM4_OK)
+                // {
+                //     postMessage({'function': "SetPlayPosition", 'errorCode': res});
+                //     return;
+                // }
+                // //有没有buffer需要清除
+
+                break;
+            case "SetStreamOpenMode":
+                //获取端口号
+                g_nPort = Module._GetPort();
+                //设置流打开模式
+                iStreamMode = eventData.data;
+                res = Module._SetStreamOpenMode(g_nPort, iStreamMode);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetStreamOpenMode", 'errorCode': res });
+                    return;
+                }
+                bOpenMode = true;
+                break;
+
+            case "OpenStream":
+                // 接收到的数据
+                var iHeadLen = eventData.dataSize;
+                var pHead = Module._malloc(iHeadLen + 4);
+                if (pHead === null) {
+                    return;
+                }
+                var aHead = Module.HEAPU8.subarray(pHead, pHead + iHeadLen);
+                aHead.set(new Uint8Array(eventData.data));
+                res = Module._OpenStream(g_nPort, pHead, iHeadLen, eventData.bufPoolSize);
+                postMessage({ 'function': "OpenStream", 'errorCode': res });
+                if (res !== PLAYM4_OK) {
+                    //释放内存
+                    Module._free(pHead);
+                    pHead = null;
+                    return;
+                }
+                bOpenStream = true;
+                break;
+            case "Play":
+                let resP = Module._Play(g_nPort);
+                if (resP !== PLAYM4_OK) {
+                    return;
+                }
+                break;
+            case "InputData":
+                // 接收到的数据
+                var iLen = eventData.dataSize;
+                if (iLen > 0) {
+                    if (pInputData == null || iLen > inputBufferSize) {
+                        if (pInputData != null) {
+                            Module._free(pInputData);
+                            pInputData = null;
+                        }
+                        if (iLen > inputBufferSize) {
+                            inputBufferSize = iLen;
+                        }
+
+                        pInputData = Module._malloc(inputBufferSize);
+                        if (pInputData === null) {
+                            return;
+                        }
+                    }
+
+                    var inputData = new Uint8Array(eventData.data);
+                    // var aInputData = Module.HEAPU8.subarray(pInputData, pInputData + iLen);
+                    // aInputData.set(inputData);
+                    Module.writeArrayToMemory(inputData, pInputData);
+                    inputData = null;
+                    res = Module._InputData(g_nPort, pInputData, iLen);
+                    if (res !== PLAYM4_OK) {
+                        let errorCode = Module._GetLastError(g_nPort);
+                        let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                        postMessage({ 'function': "InputData", 'errorCode': errorCode, "sourceRemain": sourceRemain });
+                    }
+                    //Module._free(pInputData);
+                    //pInputData = null;
+                } else {
+                    let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                    if (sourceRemain == 0) {
+                        postMessage({ 'function': "InputData", 'errorCode': PLAYM4_NEED_MORE_DATA });
+                        return;
+                    }
+                }
+
+                /////////////////////
+                // if (funGetFrameData === null) {
+                //     funGetFrameData = Module.cwrap('GetFrameData', 'number');
+                // }
+
+                while (bOpenMode && bOpenStream) {
+
+                    var ret = getFrameData();
+                    // 直到获取视频帧或数据不足为止
+                    if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret || PLAYM4_ORDER_ERROR === ret)//PLAYM4_VIDEO_FRAME === ret ||  || PLAYM4_NEED_NEET_LOOP === ret
+                    {
+                        break;
+                    }
+                }
+                break;
+
+            case "SetSecretKey":
+                var keyLen = eventData.nKeyLen;
+                var pKeyData = Module._malloc(keyLen);
+                if (pKeyData === null) {
+                    return;
+                }
+                var nKeySize = eventData.data.length
+                var bufData = stringToBytes(eventData.data);
+                var aKeyData = Module.HEAPU8.subarray(pKeyData, pKeyData + keyLen);
+                let u8array = new Uint8Array(keyLen);
+                aKeyData.set(u8array, 0);
+                aKeyData.set(new Uint8Array(bufData));
+                aKeyData = null;
+                u8array = null;
+
+                res = Module._SetSecretKey(g_nPort, eventData.nKeyType, pKeyData, keyLen);//, nKeySize
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetSecretKey", 'errorCode': res });
+                    Module._free(pKeyData);
+                    pKeyData = null;
+                    return;
+                }
+
+                Module._free(pKeyData);
+                pKeyData = null;
+                break;
+
+            case "GetBMP":
+                var nBMPWidth = eventData.width;
+                var nBMPHeight = eventData.height;
+                var pYUVData = eventData.data;
+                var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
+                var oJpegCropRect = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                var pDataYUV = Module._malloc(nYUVSize);
+                if (pDataYUV === null) {
+                    return;
+                }
+
+                Module.writeArrayToMemory(new Uint8Array(pYUVData, 0, nYUVSize), pDataYUV);
+
+                // 分配BMP空间
+                var nBmpSize = nBMPWidth * nBMPHeight * 4 + 60;
+                var pBmpData = Module._malloc(nBmpSize);
+                var pBmpSize = Module._malloc(4);
+                if (pBmpData === null || pBmpSize === null) {
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+
+                    if (pBmpData != null) {
+                        Module._free(pBmpData);
+                        pBmpData = null;
+                    }
+
+                    if (pBmpSize != null) {
+                        Module._free(pBmpSize);
+                        pBmpSize = null;
+                    }
+                    return;
+                }
+
+                //Module._memset(pBmpSize, nBmpSize, 4); // 防止bmp截图出现输入数据过大的错误码
+                Module.setValue(pBmpSize, nBmpSize, "i32");
+                res = Module._GetBMP(g_nPort, pDataYUV, nYUVSize, pBmpData, pBmpSize,
+                    oBMPCropRect.left, oBMPCropRect.top, oBMPCropRect.right, oBMPCropRect.bottom);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "GetBMP", 'errorCode': res });
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+                    Module._free(pBmpData);
+                    pBmpData = null;
+                    Module._free(pBmpSize);
+                    pBmpSize = null;
+                    return;
+                }
+
+                // 获取BMP图片大小
+                var nBmpDataSize = Module.getValue(pBmpSize, "i32");
+
+                // 获取BMP图片数据
+                var aBmpData = new Uint8Array(nBmpDataSize);
+                aBmpData.set(Module.HEAPU8.subarray(pBmpData, pBmpData + nBmpDataSize));
+
+                postMessage({ 'function': "GetBMP", 'data': aBmpData, 'errorCode': res }, [aBmpData.buffer]);
+                aBmpData = null;
+                if (pDataYUV != null) {
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+                }
+                if (pBmpData != null) {
+                    Module._free(pBmpData);
+                    pBmpData = null;
+                }
+                if (pBmpSize != null) {
+                    Module._free(pBmpSize);
+                    pBmpSize = null;
+                }
+                break;
+
+            case "GetJPEG":
+                var nJpegWidth = eventData.width;
+                var nJpegHeight = eventData.height;
+                var pYUVData1 = eventData.data;
+                var nYUVSize1 = nJpegWidth * nJpegHeight * 3 / 2;
+                var oJpegCropRect = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                var pDataYUV1 = Module._malloc(nYUVSize1);
+                if (pDataYUV1 === null) {
+                    return;
+                }
+
+                Module.writeArrayToMemory(new Uint8Array(pYUVData1, 0, nYUVSize1), pDataYUV1);
+
+                // 分配JPEG空间
+                var pJpegData = Module._malloc(nYUVSize1);
+                var pJpegSize = Module._malloc(4);
+                if (pJpegData === null || pJpegSize === null) {
+                    if (pJpegData != null) {
+                        Module._free(pJpegData);
+                        pJpegData = null;
+                    }
+
+                    if (pJpegSize != null) {
+                        Module._free(pJpegSize);
+                        pJpegSize = null;
+                    }
+
+                    if (pDataYUV1 != null) {
+                        Module._free(pDataYUV1);
+                        pDataYUV1 = null;
+                    }
+                    return;
+                }
+
+                Module.setValue(pJpegSize, nJpegWidth * nJpegHeight * 2, "i32");    // JPEG抓图，输入缓冲长度不小于当前帧YUV大小
+
+                res = Module._GetJPEG(g_nPort, pDataYUV1, nYUVSize1, pJpegData, pJpegSize,
+                    oJpegCropRect.left, oJpegCropRect.top, oJpegCropRect.right, oJpegCropRect.bottom);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "GetJPEG", 'errorCode': res });
+                    if (pJpegData != null) {
+                        Module._free(pJpegData);
+                        pJpegData = null;
+                    }
+
+                    if (pJpegSize != null) {
+                        Module._free(pJpegSize);
+                        pJpegSize = null;
+                    }
+
+                    if (pDataYUV1 != null) {
+                        Module._free(pDataYUV1);
+                        pDataYUV1 = null;
+                    }
+                    return;
+                }
+
+                // 获取JPEG图片大小
+                var nJpegSize = Module.getValue(pJpegSize, "i32");
+
+                // 获取JPEG图片数据
+                var aJpegData = new Uint8Array(nJpegSize);
+                aJpegData.set(Module.HEAPU8.subarray(pJpegData, pJpegData + nJpegSize));
+
+                postMessage({ 'function': "GetJPEG", 'data': aJpegData, 'errorCode': res }, [aJpegData.buffer]);
+
+                nJpegSize = null;
+                aJpegData = null;
+
+                if (pDataYUV1 != null) {
+                    Module._free(pDataYUV1);
+                    pDataYUV1 = null;
+                }
+                if (pJpegData != null) {
+                    Module._free(pJpegData);
+                    pJpegData = null;
+                }
+                if (pJpegSize != null) {
+                    Module._free(pJpegSize);
+                    pJpegSize = null;
+                }
+                break;
+
+            case "SetDecodeFrameType":
+                var nFrameType = eventData.data;
+                res = Module._SetDecodeFrameType(g_nPort, nFrameType);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetDecodeFrameType", 'errorCode': res });
+                    return;
+                }
+                break;
+            case "CloseStream":
+                //stop
+                let resS = Module._Stop(g_nPort);
+                if (resS !== PLAYM4_OK) {
+                    postMessage({ 'function': "Stop", 'errorCode': res });
+                    return;
+                }
+                //closeStream
+                res = Module._CloseStream(g_nPort);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "CloseStream", 'errorCode': res });
+                    return;
+                }
+                //freePort
+                let resF = Module._FreePort(g_nPort);
+                if (resF !== PLAYM4_OK) {
+                    postMessage({ 'function': "FreePort", 'errorCode': res });
+                    return;
+                }
+                if (pInputData != null) {
+                    Module._free(pInputData);
+                    pInputData = null;
+                }
+                break;
+            case "PlaySound":
+                let resPS = Module._PlaySound(g_nPort);
+                if (resPS !== PLAYM4_OK) {
+                    console.log("PlaySound failed");
+                    return;
+                }
+                break;
+            case "StopSound":
+                let resSS = Module._StopSound();
+                if (resSS !== PLAYM4_OK) {
+                    console.log("StopSound failed");
+                    return;
+                }
+                break;
+            case "SetVolume":
+                let resSV = Module._SetVolume(g_nPort, eventData.volume);
+                if (resSV !== PLAYM4_OK) {
+                    console.log("Audio SetVolume failed");
+                    return;
+                }
+                break;
+            case "GetVolume":
+                let volume = Module._GetVolume();
+                if (volume > 0) {
+                    postMessage({ 'function': "GetVolume", 'volume': volume });
+                }
+                else {
+                    console.log("Audio GetVolume failed");
+                    return;
+                }
+                break;
+            case "OnlyPlaySound":
+                let resOPS = Module._OnlyPlaySound(g_nPort);
+                if (resOPS !== PLAYM4_OK) {
+                    console.log("OnlyPlaySound failed");
+                    return;
+                }
+                break;
+            case "Pause":
+                let resPa = Module._Pause(g_nPort, eventData.bPlay);
+                if (resPa !== PLAYM4_OK) {
+                    console.log("Pause failed");
+                    return;
+                }
+            case "PlayRate":
+                Module._SetPlayRate(g_nPort, eventData.playRate);
+                break;
+            case "SetIFrameDecInterval":
+                Module._SetIFrameDecInterval(g_nPort, eventData.data);
+                break;
+            case "SetLostFrameMode":
+                Module._SetLostFrameMode(g_nPort, eventData.data, 0);
+                break;
+            case "SetDemuxModel":
+                Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
+                break;
+            case "SkipErrorData":
+                Module._SkipErrorData(g_nPort, eventData.bSkip);
+                break;
+            case "SetDecodeERC":
+                Module._SetDecodeERC(g_nPort, eventData.nLevel);
+                break;
+            case "SetANRParam":
+                Module._SetANRParam(g_nPort, eventData.nEnable, eventData.nANRLevel);
+                break;
+            case "SetResampleValue":
+                Module._SetResampleValue(g_nPort, eventData.nEnable, eventData.resampleValue);
+                break;
+            case "GetLastError":
+                let errorCode = Module._GetLastError(g_nPort);
+                postMessage({ 'function': "GetLastError", 'errorCode': errorCode });
+                break;
+            case "SetGlobalBaseTime":
+                Module._SetGlobalBaseTime(g_nPort, eventData.year, eventData.month, eventData.day, eventData.hour, eventData.min, eventData.sec, eventData.ms);
+                break;
+            case "SetRunTimeInfoCB":
+                Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
+                break;
+            default:
+                break;
+        }
+    };
+
+    function getOSDTime(oFrameInfo) {
+        var iYear = oFrameInfo.year;
+        var iMonth = oFrameInfo.month;
+        var iDay = oFrameInfo.day;
+        var iHour = oFrameInfo.hour;
+        var iMinute = oFrameInfo.minute;
+        var iSecond = oFrameInfo.second;
+
+        if (iMonth < 10) {
+            iMonth = "0" + iMonth;
+        }
+        if (iDay < 10) {
+            iDay = "0" + iDay;
+        }
+        if (iHour < 10) {
+            iHour = "0" + iHour;
+        }
+        if (iMinute < 10) {
+            iMinute = "0" + iMinute;
+        }
+        if (iSecond < 10) {
+            iSecond = "0" + iSecond;
+        }
+
+        return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
+    }
+    // 获取帧数据
+    function getFrameData() {
+        // function getFrameData() {
+        // 获取帧数据
+        var res = Module._GetFrameData();
+        //var res = fun();
+        if (res === PLAYM4_OK) {
+            var oFrameInfo = Module._GetFrameInfo();
+            switch (oFrameInfo.frameType) {
+                case AUDIO_TYPE:
+                    var iSize = oFrameInfo.frameSize;
+                    if (0 === iSize) {
+                        return -1;
+                    }
+                    var pPCM = Module._GetFrameBuffer();
+                    // var audioBuf = new ArrayBuffer(iSize);
+                    var aPCMData = new Uint8Array(iSize);
+                    aPCMData.set(Module.HEAPU8.subarray(pPCM, pPCM + iSize));
+                    if (bWorkerPrintLog) {
+                        console.log("<<<Worker: audio media Info: nSise:" + oFrameInfo.frameSize + ",nSampleRate:" + oFrameInfo.samplesPerSec + ',channel:' + oFrameInfo.channels + ',bitsPerSample:' + oFrameInfo.bitsPerSample);
+                    }
+                    postMessage({
+                        'function': "GetFrameData", 'type': "audioType", 'data': aPCMData.buffer,
+                        'frameInfo': oFrameInfo, 'errorCode': res
+                    }, [aPCMData.buffer]);
+
+                    oFrameInfo = null;
+                    pPCM = null;
+                    aPCMData = null;
+                    return PLAYM4_AUDIO_FRAME;
+
+                case VIDEO_TYPE:
+                    var szOSDTime = getOSDTime(oFrameInfo);
+
+                    var iWidth = oFrameInfo.width;
+                    var iHeight = oFrameInfo.height;
+
+                    var iYUVSize = iWidth * iHeight * 3 / 2;
+                    if (0 === iYUVSize) {
+                        return -1;
+                    }
+
+                    var pYUV = Module._GetFrameBuffer();
+
+                    // 图像数据渲染后压回，若从主码流切到子码流，存在数组大小与图像大小不匹配现象
+                    var aYUVData = new Uint8Array(iYUVSize);
+                    aYUVData.set(Module.HEAPU8.subarray(pYUV, pYUV + iYUVSize));
+                    if (bWorkerPrintLog) {
+                        console.log("<<<Worker: video media Info: Width:" + oFrameInfo.width + ",Height:" + oFrameInfo.height + ",timeStamp:" + oFrameInfo.timeStamp);
+                    }
+
+                    postMessage({
+                        'function': "GetFrameData", 'type': "videoType", 'data': aYUVData.buffer,
+                        'dataLen': aYUVData.length, 'osd': szOSDTime, 'frameInfo': oFrameInfo, 'errorCode': res
+                    }, [aYUVData.buffer]);
+
+                    oFrameInfo = null;
+                    pYUV = null;
+                    aYUVData = null;
+                    return PLAYM4_VIDEO_FRAME;
+
+                case PRIVT_TYPE:
+                    postMessage({
+                        'function': "GetFrameData", 'type': "", 'data': null,
+                        'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
+                    });
+                    return PLAYM4_SYS_NOT_SUPPORT;
+
+                default:
+                    postMessage({
+                        'function': "GetFrameData", 'type': "", 'data': null,
+                        'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
+                    });
+                    return PLAYM4_SYS_NOT_SUPPORT;
+            }
+        }
+        else {
+            let errorCode = Module._GetLastError(g_nPort);
+            //解码失败返回裸数据
+            if (PLAYM4_DECODE_ERROR === errorCode) {
+                var rawInfo = Module._GetRawDataInfo();
+                var pRawData = Module._GetRawDataBuffer();
+                var aRawData = new Uint8Array(rawInfo.isize);
+                aRawData.set(Module.HEAPU8.subarray(pRawData, pRawData + rawInfo.isize));
+                postMessage({
+                    'function': "GetRawData", 'type': "", 'data': aRawData.buffer,
+                    'rawDataLen': rawInfo.isize, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
+                });
+                rawInfo = null;
+                pRawData = null;
+                aRawData = null;
+            }
+            //需要更多数据
+            if (PLAYM4_NEED_MORE_DATA === errorCode || PLAYM4_SYS_NOT_SUPPORT === errorCode || PLAYM4_NEED_NEET_LOOP === errorCode) {
+                postMessage({
+                    'function': "GetFrameData", 'type': "", 'data': null,
+                    'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
+                });
+            }
+            return errorCode;
+        }
+    }
+
+    // 开始计算时间
+    function startTime() {
+        return new Date().getTime();
+    }
+
+    // 结束计算时间
+    function endTime() {
+        return new Date().getTime();
+    }
+
+    // 字母字符串转byte数组
+    function stringToBytes(str) {
+        var ch, st, re = [];
+        for (var i = 0; i < str.length; i++) {
+            ch = str.charCodeAt(i);  // get char
+            st = [];                 // set up "stack"
+            do {
+                st.push(ch & 0xFF);  // push byte to stack
+                ch = ch >> 8;          // shift value down by 1 byte
+            }
+            while (ch);
+            // add stack contents to result
+            // done because chars have "wrong" endianness
+            re = re.concat(st.reverse());
+        }
+        // return an array of bytes
+        return re;
+    }
+})();

public/h5player/static/css/bootstrap-theme.css

@@ -0,0 +1,587 @@
+/*!
+ * Bootstrap v3.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-default.disabled,
+.btn-primary.disabled,
+.btn-success.disabled,
+.btn-info.disabled,
+.btn-warning.disabled,
+.btn-danger.disabled,
+.btn-default[disabled],
+.btn-primary[disabled],
+.btn-success[disabled],
+.btn-info[disabled],
+.btn-warning[disabled],
+.btn-danger[disabled],
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-primary,
+fieldset[disabled] .btn-success,
+fieldset[disabled] .btn-info,
+fieldset[disabled] .btn-warning,
+fieldset[disabled] .btn-danger {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+.btn-default {
+  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
+  background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  text-shadow: 0 1px 0 #fff;
+  border-color: #ccc;
+}
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-default.disabled,
+.btn-default[disabled],
+fieldset[disabled] .btn-default,
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #245580;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #265a88;
+  background-position: 0 -15px;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-primary.disabled,
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
+  background-color: #265a88;
+  background-image: none;
+}
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-success.disabled,
+.btn-success[disabled],
+fieldset[disabled] .btn-success,
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled.focus,
+.btn-success[disabled].focus,
+fieldset[disabled] .btn-success.focus,
+.btn-success.disabled:active,
+.btn-success[disabled]:active,
+fieldset[disabled] .btn-success:active,
+.btn-success.disabled.active,
+.btn-success[disabled].active,
+fieldset[disabled] .btn-success.active {
+  background-color: #419641;
+  background-image: none;
+}
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-info.disabled,
+.btn-info[disabled],
+fieldset[disabled] .btn-info,
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled.focus,
+.btn-info[disabled].focus,
+fieldset[disabled] .btn-info.focus,
+.btn-info.disabled:active,
+.btn-info[disabled]:active,
+fieldset[disabled] .btn-info:active,
+.btn-info.disabled.active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info.active {
+  background-color: #2aabd2;
+  background-image: none;
+}
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-warning.disabled,
+.btn-warning[disabled],
+fieldset[disabled] .btn-warning,
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled.focus,
+.btn-warning[disabled].focus,
+fieldset[disabled] .btn-warning.focus,
+.btn-warning.disabled:active,
+.btn-warning[disabled]:active,
+fieldset[disabled] .btn-warning:active,
+.btn-warning.disabled.active,
+.btn-warning[disabled].active,
+fieldset[disabled] .btn-warning.active {
+  background-color: #eb9316;
+  background-image: none;
+}
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-danger.disabled,
+.btn-danger[disabled],
+fieldset[disabled] .btn-danger,
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled.focus,
+.btn-danger[disabled].focus,
+fieldset[disabled] .btn-danger.focus,
+.btn-danger.disabled:active,
+.btn-danger[disabled]:active,
+fieldset[disabled] .btn-danger:active,
+.btn-danger.disabled.active,
+.btn-danger[disabled].active,
+fieldset[disabled] .btn-danger.active {
+  background-color: #c12e2a;
+  background-image: none;
+}
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+  background-color: #e8e8e8;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+  background-color: #2e6da4;
+}
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
+  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
+  background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border-radius: 4px;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+}
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+  }
+}
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #b2dba1;
+}
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #9acfea;
+}
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #f5e79e;
+}
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
+  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dca7a7;
+}
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #286090;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #2b669a;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
+}
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
+  background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
+  background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dcdcdc;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+/*# sourceMappingURL=bootstrap-theme.css.map */

public/h5player/static/js/npm.js

@@ -0,0 +1,13 @@
+// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
+require('../../js/transition.js')
+require('../../js/alert.js')
+require('../../js/button.js')
+require('../../js/carousel.js')
+require('../../js/collapse.js')
+require('../../js/dropdown.js')
+require('../../js/modal.js')
+require('../../js/tooltip.js')
+require('../../js/popover.js')
+require('../../js/scrollspy.js')
+require('../../js/tab.js')
+require('../../js/affix.js')

public/h5player/static/js/zh-cn.js

@@ -0,0 +1,120 @@
+//! moment.js locale configuration
+//! locale : Chinese (China) [zh-cn]
+//! author : suupic : https://github.com/suupic
+//! author : Zeno Zeng : https://github.com/zenozeng
+//! author : uu109 : https://github.com/uu109
+
+import moment from '../moment';
+
+export default moment.defineLocale('zh-cn', {
+    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
+        '_'
+    ),
+    monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(
+        '_'
+    ),
+    weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+    weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
+    weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+    longDateFormat: {
+        LT: 'HH:mm',
+        LTS: 'HH:mm:ss',
+        L: 'YYYY/MM/DD',
+        LL: 'YYYY年M月D日',
+        LLL: 'YYYY年M月D日Ah点mm分',
+        LLLL: 'YYYY年M月D日ddddAh点mm分',
+        l: 'YYYY/M/D',
+        ll: 'YYYY年M月D日',
+        lll: 'YYYY年M月D日 HH:mm',
+        llll: 'YYYY年M月D日dddd HH:mm',
+    },
+    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
+    meridiemHour: function (hour, meridiem) {
+        if (hour === 12) {
+            hour = 0;
+        }
+        if (meridiem === '凌晨' || meridiem === '早上' || meridiem === '上午') {
+            return hour;
+        } else if (meridiem === '下午' || meridiem === '晚上') {
+            return hour + 12;
+        } else {
+            // '中午'
+            return hour >= 11 ? hour : hour + 12;
+        }
+    },
+    meridiem: function (hour, minute, isLower) {
+        var hm = hour * 100 + minute;
+        if (hm < 600) {
+            return '凌晨';
+        } else if (hm < 900) {
+            return '早上';
+        } else if (hm < 1130) {
+            return '上午';
+        } else if (hm < 1230) {
+            return '中午';
+        } else if (hm < 1800) {
+            return '下午';
+        } else {
+            return '晚上';
+        }
+    },
+    calendar: {
+        sameDay: '[今天]LT',
+        nextDay: '[明天]LT',
+        nextWeek: function (now) {
+            if (now.week() !== this.week()) {
+                return '[下]dddLT';
+            } else {
+                return '[本]dddLT';
+            }
+        },
+        lastDay: '[昨天]LT',
+        lastWeek: function (now) {
+            if (this.week() !== now.week()) {
+                return '[上]dddLT';
+            } else {
+                return '[本]dddLT';
+            }
+        },
+        sameElse: 'L',
+    },
+    dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
+    ordinal: function (number, period) {
+        switch (period) {
+            case 'd':
+            case 'D':
+            case 'DDD':
+                return number + '日';
+            case 'M':
+                return number + '月';
+            case 'w':
+            case 'W':
+                return number + '周';
+            default:
+                return number;
+        }
+    },
+    relativeTime: {
+        future: '%s后',
+        past: '%s前',
+        s: '几秒',
+        ss: '%d 秒',
+        m: '1 分钟',
+        mm: '%d 分钟',
+        h: '1 小时',
+        hh: '%d 小时',
+        d: '1 天',
+        dd: '%d 天',
+        w: '1 周',
+        ww: '%d 周',
+        M: '1 个月',
+        MM: '%d 个月',
+        y: '1 年',
+        yy: '%d 年',
+    },
+    week: {
+        // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+        dow: 1, // Monday is the first day of the week.
+        doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+});

public/h5player/transform/systemTransform-worker.js

@@ -0,0 +1,120 @@
+importScripts('libSystemTransform.js');
+    const RECORDRTP = 0;  //录制一份未经过转封装的码流原始数据，用于定位问题
+    let dataType = 1;
+    
+    // 转封装库回调函数
+    self.STCallBack = function (fileIndex,indexLen, data, dataLen)
+    {
+        //stFrameInfo的类型见DETAIL_FRAME_INFO
+		let stFrameInfo = Module._GetDetialFrameInfo();
+        let nIsMp4Index = stFrameInfo.nIsMp4Index;
+		//console.log("FrameType is " , stFrameInfo);	
+		//console.log("nIsMp4Index is " + nIsMp4Index);
+        //debugger
+        var pData = null;
+        pData = new Uint8Array(dataLen);
+        pData.set(Module.HEAPU8.subarray(data, data + dataLen));
+        if (dataType === 1) {
+            if (pData[0] == 0x49 && pData[1] == 0x4d && pData[2] == 0x4b && pData[3] == 0x48) {//码流头丢掉
+                return;
+            }
+            postMessage({type: "outputData", buf: pData, dType: 1});
+            dataType = 2;
+        } else {
+            if (nIsMp4Index) {
+                postMessage({type: "outputData", buf: pData, dType: 6}); //6：索引类型
+            } else {
+                postMessage({type: "outputData", buf: pData, dType: 2}); //2:码流
+            }
+        }
+
+        //stFrameInfo的类型见DETAIL_FRAME_INFO
+		//let stFrameInfo = Module._GetDetialFrameInfo();
+		//let stFrameType = stFrameInfo.nFrameType;
+		//let nFrameNum = stFrameInfo.nFrameNum;
+		//let nTimeStamp = stFrameInfo.nTimeStamp;
+        //let nIsMp4Index = stFrameInfo.nIsMp4Index;
+		
+		//console.log("FrameType is " + stFrameType);	
+		//console.log("nIsMp4Index is " + nIsMp4Index);	
+        
+    }
+
+    // self.Module = { memoryInitializerRequest: loadMemInitFile(), TOTAL_MEMORY: 128*1024*1024 };
+    // importScripts('SystemTransform.js');
+
+    self.Module['onRuntimeInitialized'] = function (){
+        postMessage({type: "loaded"});
+    }
+    onmessage = function (e) {
+        var data = e.data;
+        if ("create" === data.type) {
+            if (RECORDRTP) {
+                postMessage({type: "created"});
+                postMessage({type: "outputData", buf: data.buf, dType: 1});
+            } else {
+                var iHeadLen = data.len;
+                var pHead = Module._malloc(iHeadLen);
+    
+                self.writeArrayToMemory(new Uint8Array(data.buf), pHead);
+                var iTransType = data.packType;//目标格式
+                var iRet = Module._CreatHandle(pHead, iTransType, 4096);
+                if (iRet != 0) {
+                    console.log("_CreatHandle failed!" + iRet);
+                } else {
+                    iRet = Module._SysTransRegisterDataCallBack();			
+                    if(iRet != 0)
+                    {
+                        console.log("_SysTransRegisterDataCallBack Failed:" + iRet);
+                    }
+
+                    iRet = Module._SysTransStart(null, null);
+                    if(iRet != 0)
+                    {
+                        console.log("_SysTransStart Failed:" + iRet);
+                    }
+                    postMessage({type: "created"});
+                }
+            }
+
+        } else if ("inputData" === data.type) {
+            if (RECORDRTP) {
+                var aFileData = new Uint8Array(data.buf);  // 拷贝一份
+                var iBufferLen = aFileData.length;
+                var szBufferLen = iBufferLen.toString(16);
+                if (szBufferLen.length === 1) {
+                    szBufferLen = "000" + szBufferLen;
+                } else if (szBufferLen.length === 2) {
+                    szBufferLen = "00" + szBufferLen;
+                } else if (szBufferLen.length === 3) {
+                    szBufferLen = "0" + szBufferLen;
+                }
+                var aData = [0, 0, parseInt(szBufferLen.substring(0, 2), 16), parseInt(szBufferLen.substring(2, 4), 16)];
+                for(var iIndex = 0, iDataLength = aFileData.length; iIndex < iDataLength; iIndex++) {
+                    aData[iIndex + 4] = aFileData[iIndex]
+                }
+                var dataUint8 = new Uint8Array(aData);
+                postMessage({type: "outputData", buf: dataUint8.buffer, dType: 2});
+            } else {
+                let pInputDataBuf = Module._malloc(data.len);
+                var idataLen = data.len;
+                self.writeArrayToMemory(new Uint8Array(data.buf), pInputDataBuf);
+                    // 输入数据，每次最多2m
+                let pp = Module._SysTransInputData(0, pInputDataBuf, idataLen);
+                if(pp != 0) {
+                    //console.log("InputData Failed:" + pp);
+                }
+                Module._free(pInputDataBuf);
+            }
+        } else if ("release" === data.type) {
+            var iRet = Module._SysTransStop();
+            if (iRet != 0) {
+                console.log("_SysTransStop Failed:", iRet);
+            }
+            Module._SysTransRelease();
+            if (iRet != 0) {
+                console.log("_SysTransRelease Failed:", iRet);
+            }
+            close();
+        }
+    };

public/index.html

@@ -18,4 +18,5 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <script src="./h5player/h5player.min.js" charset="utf-8"></script>
 </html>

src/api/index.js

@@ -29,9 +29,9 @@ export function laboratoryGradeManageList(data) {
     })
 }
 // 查询安全分级列表(不带分页)
-export function laboratoryClassLevelGetList(data) {
+export function laboratoryLevelConfigGetLevelTitleList(data) {
     return request({
-        url: '/laboratory/classLevel/getList',
+        url: '/laboratory/levelConfig/getLevelTitleList',
         method: 'post',
         data: data
     })
@@ -253,6 +253,30 @@ export function iotBigViewDeviceFindByType(data) {
         data: data
     })
 }
+//预警事件-列表
+export function systemWarningNoticeNoMenuList(data) {
+    return request({
+        url: '/system/warningNotice/noMenuList',
+        method: 'post',
+        data: data
+    })
+}
+//预警事件-详情
+export function systemWarningNoticeDetail(query) {
+    return request({
+        url: '/system/warningNotice/detail',
+        method: 'get',
+        params: query
+    })
+}
+//预警事件-视频回放地址查询
+export function iotCameraGetPlaybackURLs(query) {
+    return request({
+        url: '/iot/camera/getPlaybackURLs',
+        method: 'get',
+        params: query
+    })
+}
 
 /*
 应急处置-指定物联设备查询列表
@@ -308,3 +332,73 @@ export function laboratoryPlanCloseRiskPlan(query) {
         params: query
     })
 }
+
+/********************* 视频/应急 *********************/
+
+
+
+//校级-校区-楼栋-楼层-列表
+export function laboratoryLabDeptTreeGetTreeList (data) {
+    return request({
+        url: '/laboratory/labDeptTree/getTreeList',
+        method: 'post',
+        data: data
+    })
+}
+export function laboratoryLabDeptTreeGetRoomList (data) {
+    return request({
+        url: '/laboratory/labDeptTree/getRoomList',
+        method: 'post',
+        data: data
+    })
+}
+/*
+* 获取楼栋楼层实验室打卡在线记录
+* buildId-楼栋
+* floorId-楼层/楼道
+* subId-实验室
+*/
+export function laboratorySubPassOutGetCountByBuildId (data) {
+    return request({
+        url: '/laboratory/subPassOut/getCountByBuildId',
+        method: 'post',
+        data: data
+    })
+}
+
+//获取摄像头流地址
+export function iotCameraFindByCondition(data) {
+    return request({
+        url: '/iot/camera/findByCondition',
+        method: 'post',
+        data: data
+    })
+}
+//根据设备ID获取摄像头流地址
+export function iotCameraGetPreviewURLs(query) {
+    return request({
+        url: '/iot/camera/getPreviewURLs',
+        method: 'get',
+        params: query
+    })
+}
+
+//应急处置-获取楼层布局数据
+export function laboratoryBigViewGetFloorByBigView(query) {
+    return request({
+        url: '/laboratory/bigView/getFloorByBigView',
+        method: 'get',
+        params: query
+    })
+}
+/*
+* 查询楼层-危险源数据
+* floorId-楼层
+*/
+export function laboratoryBigViewHazardStatistics (query) {
+    return request({
+        url: '/laboratory/bigView/hazardStatistics',
+        method: 'get',
+        params: query
+    })
+}

src/assets/iconfont/iconfont.css

@@ -0,0 +1,467 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4287712 */
+  src: url('iconfont.woff2?t=1732669861872') format('woff2'),
+       url('iconfont.woff?t=1732669861872') format('woff'),
+       url('iconfont.ttf?t=1732669861872') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-guangqi:before {
+  content: "\e68e";
+}
+
+.icon-eryanghualiu:before {
+  content: "\e68f";
+}
+
+.icon-yiyanghuadan:before {
+  content: "\e690";
+}
+
+.icon-jiawan:before {
+  content: "\e683";
+}
+
+.icon-yangqi:before {
+  content: "\e684";
+}
+
+.icon-lvqi:before {
+  content: "\e685";
+}
+
+.icon-qingqi:before {
+  content: "\e686";
+}
+
+.icon-VOC:before {
+  content: "\e687";
+}
+
+.icon-yichun:before {
+  content: "\e688";
+}
+
+.icon-tVOC:before {
+  content: "\e689";
+}
+
+.icon-eryanghuatan:before {
+  content: "\e68a";
+}
+
+.icon-jiaquan:before {
+  content: "\e68b";
+}
+
+.icon-guangqi11:before {
+  content: "\e682";
+}
+
+.icon-wendu1:before {
+  content: "\e68d";
+}
+
+.icon-yangan1:before {
+  content: "\e691";
+}
+
+.icon-daqiyali:before {
+  content: "\e692";
+}
+
+.icon-shidu:before {
+  content: "\e68c";
+}
+
+.icon-a-suoxiao1:before {
+  content: "\e680";
+}
+
+.icon-a-fangda2:before {
+  content: "\e681";
+}
+
+.icon-a-guanbi1:before {
+  content: "\e678";
+}
+
+.icon-shiyanshi:before {
+  content: "\e679";
+}
+
+.icon-fangxingxuanzhong-fill:before {
+  content: "\e67a";
+}
+
+.icon-weixian:before {
+  content: "\e67b";
+}
+
+.icon-shoujihaoma:before {
+  content: "\e67c";
+}
+
+.icon-loudong:before {
+  content: "\e67d";
+}
+
+.icon-xiala-shuangjiantou:before {
+  content: "\e67e";
+}
+
+.icon-yinhuan:before {
+  content: "\e67f";
+}
+
+.icon-shishirenshu:before {
+  content: "\e664";
+}
+
+.icon-a-xiangshangyuanjiantouxiajiantou:before {
+  content: "\e665";
+}
+
+.icon-gongsi:before {
+  content: "\e666";
+}
+
+.icon-a-gengduo3:before {
+  content: "\e667";
+}
+
+.icon-weixiantixing:before {
+  content: "\e668";
+}
+
+.icon-geren:before {
+  content: "\e669";
+}
+
+.icon-tianjiarenyuan:before {
+  content: "\e66a";
+}
+
+.icon-xueyuanguanli:before {
+  content: "\e66b";
+}
+
+.icon-a-xiangzuoyuanjiantouzuojiantou:before {
+  content: "\e66c";
+}
+
+.icon-weihu:before {
+  content: "\e66d";
+}
+
+.icon-duanxin:before {
+  content: "\e66e";
+}
+
+.icon-a-xiangzuoyuanjiantouyoujiantou:before {
+  content: "\e66f";
+}
+
+.icon-pdf:before {
+  content: "\e670";
+}
+
+.icon-a-gengduo4:before {
+  content: "\e671";
+}
+
+.icon-weixin:before {
+  content: "\e672";
+}
+
+.icon-youxiang:before {
+  content: "\e673";
+}
+
+.icon-dingding:before {
+  content: "\e674";
+}
+
+.icon-yingjianshebei:before {
+  content: "\e675";
+}
+
+.icon-wulian:before {
+  content: "\e676";
+}
+
+.icon-kaoshishijian:before {
+  content: "\e677";
+}
+
+.icon-xuanzhong:before {
+  content: "\e650";
+}
+
+.icon-shenpiren:before {
+  content: "\e651";
+}
+
+.icon-xiaji:before {
+  content: "\e652";
+}
+
+.icon-xiaoxi:before {
+  content: "\e653";
+}
+
+.icon-a-renyuanguanli1:before {
+  content: "\e654";
+}
+
+.icon-shouye-xuanzhong:before {
+  content: "\e655";
+}
+
+.icon-xiazai:before {
+  content: "\e656";
+}
+
+.icon-xitongxiaoxi:before {
+  content: "\e657";
+}
+
+.icon-yiwen:before {
+  content: "\e658";
+}
+
+.icon-gouxuanxuanzhong:before {
+  content: "\e659";
+}
+
+.icon-huiyuan:before {
+  content: "\e65a";
+}
+
+.icon-huoyanjiance:before {
+  content: "\e65b";
+}
+
+.icon-tianjia:before {
+  content: "\e65c";
+}
+
+.icon-wendu:before {
+  content: "\e65d";
+}
+
+.icon-yangan:before {
+  content: "\e65e";
+}
+
+.icon-baojing:before {
+  content: "\e65f";
+}
+
+.icon-jiankong:before {
+  content: "\e660";
+}
+
+.icon-weixianyuan:before {
+  content: "\e661";
+}
+
+.icon-zhinengjiance:before {
+  content: "\e662";
+}
+
+.icon-wuwangluo:before {
+  content: "\e663";
+}
+
+.icon-xiala:before {
+  content: "\e63c";
+}
+
+.icon-renyuanrenyuanleibie:before {
+  content: "\e63d";
+}
+
+.icon-fangda:before {
+  content: "\e63e";
+}
+
+.icon-shiyanshineirenyuan:before {
+  content: "\e63f";
+}
+
+.icon-loudongguanli:before {
+  content: "\e640";
+}
+
+.icon-a-shanchu:before {
+  content: "\e641";
+}
+
+.icon-zhinengkongzhi:before {
+  content: "\e642";
+}
+
+.icon-daochu:before {
+  content: "\e643";
+}
+
+.icon-yanzhengma:before {
+  content: "\e644";
+}
+
+.icon-mima:before {
+  content: "\e645";
+}
+
+.icon-renyuanguanli:before {
+  content: "\e646";
+}
+
+.icon-zhanghao:before {
+  content: "\e647";
+}
+
+.icon-riqi:before {
+  content: "\e648";
+}
+
+.icon-tixing:before {
+  content: "\e649";
+}
+
+.icon-chengyuanliebiao:before {
+  content: "\e64a";
+}
+
+.icon-shenfenxinxi:before {
+  content: "\e64b";
+}
+
+.icon-a-gengduo1:before {
+  content: "\e64c";
+}
+
+.icon-suoxiao:before {
+  content: "\e64d";
+}
+
+.icon-jiaoshi:before {
+  content: "\e64e";
+}
+
+.icon-daoru:before {
+  content: "\e64f";
+}
+
+.icon-danxuankuang:before {
+  content: "\e62e";
+}
+
+.icon-xuesheng:before {
+  content: "\e62c";
+}
+
+.icon-gengduo:before {
+  content: "\e630";
+}
+
+.icon-a-xiala:before {
+  content: "\e631";
+}
+
+.icon-bianji:before {
+  content: "\e632";
+}
+
+.icon-sousuo:before {
+  content: "\e62d";
+}
+
+.icon-wulianshebei:before {
+  content: "\e62a";
+}
+
+.icon-a-gengduo2:before {
+  content: "\e62b";
+}
+
+.icon-yuyinguangbo:before {
+  content: "\e633";
+}
+
+.icon-yichang_weixian:before {
+  content: "\e634";
+}
+
+.icon-yangqiping:before {
+  content: "\e628";
+}
+
+.icon-shiyanshiguanli:before {
+  content: "\e635";
+}
+
+.icon-yinhuanshu:before {
+  content: "\e636";
+}
+
+.icon-a-kaoshishijian2:before {
+  content: "\e637";
+}
+
+.icon-guanbi:before {
+  content: "\e638";
+}
+
+.icon-dianhua:before {
+  content: "\e639";
+}
+
+.icon-a-xiangshangyuanjiantoushangjiantoumianxing:before {
+  content: "\e63a";
+}
+
+.icon-xiaoxitongzhi:before {
+  content: "\e63b";
+}
+
+.icon-xuanzhong2:before {
+  content: "\e62f";
+}
+
+.icon-xinbiaoliebiao:before {
+  content: "\e629";
+}
+
+.icon-chukujilu:before {
+  content: "\e625";
+}
+
+.icon-qipingshezhi:before {
+  content: "\e626";
+}
+
+.icon-shiyongjilu:before {
+  content: "\e627";
+}
+
+.icon-rukujilu:before {
+  content: "\e622";
+}
+
+.icon-kucunxinxi:before {
+  content: "\e623";
+}
+
+.icon-xinxijilu:before {
+  content: "\e624";
+}
+

src/assets/styles/publicEle.scss

@@ -61,7 +61,7 @@
           background-color: rgba(30,208,248, 0.1);
           border-color: #1ED0F8;
           outline:none;
-          color: #999999;
+          color: #0E9EED;
         }
       }
       /*选择框*/
@@ -84,9 +84,9 @@
       .el-range-editor--small{
         margin-right: 10px;
         height: 40px;
-        color: #0E9EED;
-        background-color: rgba(30,208,248, 0.1);
-        border-color: #0E9EED;
+        color: #999;
+        background-color: rgba(30,208,248, 0.2);
+        border-color: #1ED0F8;
         .el-range-input{
           background-color: rgba(30,208,248, 0);
           color: #0E9EED;
@@ -108,11 +108,14 @@
   }
 }
 .el-select-dropdown{
-  background-color: #043668;
+  background-color: #04607C;
   .el-select-dropdown__item{
-    color:#0E9EED;
+    color:#fff;
   }
 }
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+  background-color: rgba(30,208,248,0.4);
+}
 /*时间控件*/
 .select-big-data-time{
   background-color: #043668;
@@ -339,3 +342,21 @@
     }
   }
 }
+//element 下拉
+.el-cascader__dropdown{
+  background-color: #04607C;
+  border:1px solid #04607C;
+}
+.el-cascader-menu{
+  color:#fff;
+}
+.el-picker-panel{
+  color:#fff;
+  background-color: #04607C;
+}
+.el-date-table th{
+  color:#C0C4CC;
+}
+.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div{
+  background-color: rgba(30,208,248,0.4);
+}

src/components/H5PlayerVideo/H5PlayerVideo.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="H5PlayerVideo">
+    <div :id="videoData.id" :ref="videoData.id"></div>
+    <p class="full-screen-button" @click="fullScreen"></p>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'H5PlayerVideo',
+    props: {
+      videoProps: {}
+    },
+    data() {
+      return {
+        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+        videoData: {},
+      }
+    },
+    created() {
+      this.$set(this, 'videoData', {
+        id: 'video_' + this.generateRandomString(),
+        width: this.videoProps.width ? this.videoProps.width : 600,
+        height: this.videoProps.height ? this.videoProps.height : 338,
+        url: this.videoProps.url,
+      })
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initH5Player(1)
+        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
+        this.initPlayer(this.videoData.url, 0,type)
+      })
+    },
+    methods: {
+      //全屏
+      fullScreen() {
+        if(this.$parent.stopTime){
+          this.$parent.stopTime(this.videoProps.cameraIndexCode);
+        }else{
+          this.myPlugin.JS_FullScreenDisplay(true).then(
+            (res) => {
+              // console.info('JS_FullScreenDisplay success');
+              // do you want...
+            },
+            (err) => {
+              // console.info('JS_FullScreenDisplay failed');
+              // do you want...
+            }
+          );
+        }
+      },
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: this.videoData.id, //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
+          openDebug: true,
+          oStyle: {
+            borderSelect: '#000'
+          },
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          iWidth: this.videoData.width,
+          iHeight: this.videoData.height,
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: split,
+          iCurrentSplit: split
+        })
+        let iWndNum = 1;
+        let InterruptTime = 5;
+        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
+          () => {
+            // console.info('JS_SetInterruptTime success');
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_SetInterruptTime failed');
+            // do you want...
+          }
+        );
+        // 事件回调绑定
+        this.myPlugin.JS_SetWindowControlCallback({
+          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+            // console.log('windowSelect callback: ', iWndIndex)
+          },
+          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+          },
+          windowEventOver: function (iWndIndex) {  //鼠标移过回调
+            //console.log(iWndIndex);
+          },
+          windowEventOut: function (iWndIndex) {  //鼠标移出回调
+            //console.log(iWndIndex);
+          },
+          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+            //console.log(iWndIndex);
+          },
+          windowFullCcreenChange: function (bFull) {  //全屏切换回调
+            // console.log('fullScreen callback: ', bFull)
+          },
+          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
+          },
+          performanceLack: function () {  //性能不足回调
+            // console.log('performanceLack callback: ')
+          }
+        })
+      },
+      initPlayer(url, index, type) {
+        this.myPlugin.JS_Play(url,
+          {
+            playURL: url, // 流媒体播放时必传
+            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
+            // ...
+          },
+          index //当前窗口下标
+        ).then(
+          () => {
+            // console.info('JS_Play success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_Play failed:', err)
+            // do you want...
+          }
+        )
+      },
+      //生成随机ID
+      generateRandomString() {
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+        let randomString = ''
+        for (let i = 0; i < 24; i++) {
+          let randomIndex = Math.floor(Math.random() * chars.length)
+          randomString += chars.charAt(randomIndex)
+        }
+        return randomString
+      },
+      videoOff() {
+        this.myPlugin.JS_StopRealPlayAll().then(
+          () => {
+            // console.info('JS_StopRealPlayAll success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_StopRealPlayAll failed')
+            // do you want...
+          }
+        )
+      }
+    },
+    beforeDestroy() {
+      let self = this
+      self.videoOff()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .H5PlayerVideo {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    position: relative;
+    .full-screen-button {
+      background: url("../../assets/ZDimages/icon_0.png");
+      background-size: 100%;
+      position: absolute;
+      font-size: 20px;
+      height: 30px;
+      width: 30px;
+      line-height: 30px;
+      text-align: center;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
+  }
+</style>

src/components/fullH5PlayerVideo/fullH5PlayerVideo.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="fullH5PlayerVideo">
+    <div style="height:100%;width:100%;" :id="videoData.id+'full'" :ref="videoData.id"></div>
+    <p class="full-failed-button" @click="outFullScreen"></p>
+  </div>
+</template>
+
+<script>
+import { iotCameraGetPreviewURLs } from '@/api/index'
+  export default {
+    name: 'fullH5PlayerVideo',
+    props: {
+      fullVideoProps: {}
+    },
+    data() {
+      return {
+        fullScreenType:false,
+        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+        videoData: {},
+        //全屏相关
+        innerWidth:window.innerWidth,
+        innerHeight:window.innerHeight,
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.iotCameraGetPreviewURLs();
+    },
+    methods: {
+      iotCameraGetPreviewURLs(){
+        let obj = {
+          streamType:0,
+          cameraIndexCode:this.fullVideoProps.cameraIndexCode,
+          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+        }
+        iotCameraGetPreviewURLs(obj).then(response => {
+          this.$set(this, 'videoData', {
+            id: 'video_' + this.generateRandomString(),
+            url: response.data
+          })
+          this.$nextTick(() => {
+            this.initH5Player(1)
+            let type = response.data.indexOf('wss') !== -1?1:0;
+            this.initPlayer(this.videoData.url, 0,type)
+          })
+        })
+      },
+      //全屏
+      fullScreen() {
+        let self = this;
+        if(this.$parent.stopTime){
+          this.$parent.stopTime(JSON.parse(JSON.stringify(this.fullVideoProps)));
+        }else{
+          this.myPlugin.JS_FullScreenDisplay(true).then(
+            (res) => {
+              // console.info('JS_FullScreenDisplay success');
+              // do you want...
+            },
+            (err) => {
+              // console.info('JS_FullScreenDisplay failed');
+              // do you want...
+            }
+          );
+          self.$set(self,'fullScreenType',true);
+        }
+      },
+      //退出全屏
+      outFullScreen() {
+        this.$parent.outFullScreen();
+      },
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: this.videoData.id+'full', //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
+          openDebug: true,
+          oStyle: {
+            borderSelect: '#000'
+          },
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          // iWidth: this.innerWidth,
+          // iHeight: this.innerHeight,
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: split,
+          iCurrentSplit: split
+        })
+        let iWndNum = 1;
+        let InterruptTime = 5;
+        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
+          () => {
+            // console.info('JS_SetInterruptTime success');
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_SetInterruptTime failed');
+            // do you want...
+          }
+        );
+        // 事件回调绑定
+        this.myPlugin.JS_SetWindowControlCallback({
+          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+            // console.log('windowSelect callback: ', iWndIndex)
+          },
+          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+          },
+          windowEventOver: function (iWndIndex) {  //鼠标移过回调
+            //console.log(iWndIndex);
+          },
+          windowEventOut: function (iWndIndex) {  //鼠标移出回调
+            //console.log(iWndIndex);
+          },
+          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+            //console.log(iWndIndex);
+          },
+          windowFullCcreenChange: function (bFull) {  //全屏切换回调
+            // console.log('fullScreen callback: ', bFull)
+          },
+          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
+          },
+          performanceLack: function () {  //性能不足回调
+            // console.log('performanceLack callback: ')
+          }
+        })
+      },
+      initPlayer(url, index, type) {
+        this.myPlugin.JS_Play(url,
+          {
+            playURL: url, // 流媒体播放时必传
+            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
+            // ...
+          },
+          index //当前窗口下标
+        ).then(
+          () => {
+            // console.info('JS_Play success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_Play failed:', err)
+            // do you want...
+          }
+        )
+      },
+      //生成随机ID
+      generateRandomString() {
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+        let randomString = ''
+        for (let i = 0; i < 24; i++) {
+          let randomIndex = Math.floor(Math.random() * chars.length)
+          randomString += chars.charAt(randomIndex)
+        }
+        return randomString
+      },
+      videoOff() {
+        this.myPlugin.JS_StopRealPlayAll().then(
+          () => {
+            // console.info('JS_StopRealPlayAll success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_StopRealPlayAll failed')
+            // do you want...
+          }
+        )
+      }
+    },
+    beforeDestroy() {
+      let self = this
+      self.videoOff()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .fullH5PlayerVideo {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    z-index:9999;
+    height: 100%;
+    width:100%;
+    position: fixed;
+    top:0;
+    left:0;
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    /*position: relative;*/
+    .full-failed-button {
+      background: url("../../assets/ZDimages/icon_1.png");
+      background-size: 100%;
+      position: fixed;
+      font-size: 20px;
+      height: 50px;
+      width: 50px;
+      line-height: 30px;
+      text-align: center;
+      top: 40px;
+      right: 40px;
+      z-index: 12;
+      cursor: pointer;
+    }
+  }
+</style>

src/components/header.vue

@@ -1,29 +1,47 @@
 <template>
-   <div class="header">
+    <div class="header">
         <img class="header_l" :src="rectangleLogo"/>
         <div class="header_c">实验室安全智慧化管控系统</div>
         <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
-   </div>
+        <div class="position-img-button-left-box" @click="topButtonGoPage('video')">
+            <img src="@/assets/image/icon_yjgl_spjk.png">
+            <p>视频监控</p>
+        </div>
+        <div class="position-img-button-right-box" @click="topButtonGoPage('alarm')">
+            <img src="@/assets/image/icon_yjgl_yjpt.png">
+            <p>应急指挥平台</p>
+        </div>
+    </div>
 </template>
 
 <script>
-import {} from "../api/http"
-export default {
-  name: 'heaDer',
-  setup(){
-    return {
-      rectangleLogo:localStorage.getItem('rectangleLogo'),
-    }
-  },
-  methods:{
-    back(){
-      this.$router.push('/home')
-    },
-  },
-  mounted() {
+    import {} from "../api/http"
+
+    export default {
+        name: 'heaDer',
+        setup() {
+            return {
+                rectangleLogo: localStorage.getItem('rectangleLogo'),
+            }
+        },
+        methods: {
+            //跳转视频/应急页面
+            topButtonGoPage(type) {
+                if(type == 'video'){
+                    this.$router.push('/videoSurveillance')
+                }else if(type == 'alarm'){
+                    this.$router.push('/emergencyManagement')
+                }
+            },
+            back() {
+                this.$router.push('/home')
+                // this.$router.go(-1)
+            },
+        },
+        mounted() {
 
-  }
-}
+        }
+    }
 </script>
 
 <style lang="scss" scoped>
@@ -32,6 +50,7 @@ export default {
         margin: 0;
         box-sizing: border-box;
     }
+
     .header {
         width: 100%;
         position: absolute;
@@ -40,10 +59,54 @@ export default {
         z-index: 100;
         display: flex;
         justify-content: flex-start;
-
+        .position-img-button-left-box {
+            cursor: pointer;
+            position: absolute;
+            top: 4px;
+            left: 410px;
+            display: flex;
+            width: 190px;
+            height: 24px;
+            img {
+                width: 24px;
+                height: 18px;
+                display: inline-block;
+                margin: 4px 0;
+            }
+            p {
+                color: #24D1F9;
+                font-size: 16px;
+                line-height: 24px;
+                margin-left: 14px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+            }
+        }
+        .position-img-button-right-box {
+            cursor: pointer;
+            position: absolute;
+            top: 4px;
+            right: 385px;
+            display: flex;
+            width: 190px;
+            height: 24px;
+            img {
+                width: 24px;
+                height: 24px;
+                display: inline-block;
+            }
+            p {
+                color: #24D1F9;
+                font-size: 16px;
+                line-height: 24px;
+                margin-left: 14px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+            }
+        }
         .header_l {
-            width:250px;
-            height:55px;
+            width: 250px;
+            height: 55px;
             margin: 0 0 0 30px;
         }
         .header_c {

src/components/personnelAdmittanceECharts/personnelAdmittanceECharts.vue

@@ -16,10 +16,10 @@
       <!--公共小标题-->
       <div class="small_title">
         <div class="small_title_l">安全准入办理统计</div>
-        <div class="small_title_r" @click="left_b_t_r_btn">
-          <i>准入办理总人数：{{listcount}}</i>
-          <img class="left_b_t_r_btn" src="@/assets/image/index_icon8.png"/>
-        </div>
+        <!--<div class="small_title_r" @click="left_b_t_r_btn">-->
+          <!--<i>准入办理总人数：{{listcount}}</i>-->
+          <!--<img class="left_b_t_r_btn" src="@/assets/image/index_icon8.png"/>-->
+        <!--</div>-->
       </div>
       <div class="left_b_t_r_b" id="left_b_t_r_b"></div>
     </div>
@@ -196,21 +196,24 @@
             let self = this;
             laboratoryBigViewListCollegeApplyColumn({}).then((res) => {
                 if (res.code == 200) {
-                    let illegalX = [];
-                    let illegalData = [];
-                    let data = res.data.listTg;
-                    self.listcount = res.data.listcount;//总数
-                    if (data.length <= 0) {
-                        for (let i = 0; i < 4; i++) {
-                            illegalX.push('其他')
-                            illegalData.push(0)
-                        }
-                    } else {
-                        data.forEach(function (item) {
-                            illegalX.push(item.applyMonth)
-                            illegalData.push(item.applyNum)
-                        })
-                    }
+                    // let illegalX = [];
+                    // let illegalData = [];
+                    // let data = res.data.listTg;
+                    // self.listcount = res.data.listcount;//总数
+                    // if (data.length <= 0) {
+                    //     for (let i = 0; i < 4; i++) {
+                    //         illegalX.push('其他')
+                    //         illegalData.push(0)
+                    //     }
+                    // } else {
+                    //     data.forEach(function (item) {
+                    //         illegalX.push(item.applyMonth)
+                    //         illegalData.push(item.applyNum)
+                    //     })
+                    // }
+
+                    let illegalData = [0,0,0,0,0,62,67,77,71,81,66,94,];
+                    let illegalX = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',];
                     this.admittanceFun(illegalX, illegalData)
                 }
             })

src/components/planAlarm/planAlarm.vue

@@ -9,19 +9,17 @@
                 <div class="planAlarm-name-box">
                     <div class="lv-box"
                          :class="planData.riskPlanLevel == 1?'type-color-a':(planData.riskPlanLevel == 2?'type-color-b':(planData.riskPlanLevel == 3?'type-color-c':(planData.riskPlanLevel == 4?'type-color-d':'')))">
-                        <div>{{planData.riskPlanLevel == 1?'低风险':(planData.riskPlanLevel ==
-                            2?'中风险':(planData.riskPlanLevel == 3?'较高风险':(planData.riskPlanLevel == 4?'高风险':'')))}}
+                        <div>{{planData.riskPlanLevel == 1?'低风险':(planData.riskPlanLevel == 2?'中风险':(planData.riskPlanLevel == 3?'较高风险':(planData.riskPlanLevel == 4?'高风险':'')))}}
                         </div>
                     </div>
-                    <p class="name-p">{{subData.subName}}{{subData.roomNum?'
-                        ('+subData.roomNum+')':''}}：{{planData.eventName}}</p>
+                    <p class="name-p">{{subData.subName}}{{subData.roomNum?'('+subData.roomNum+')':''}}：{{planData.eventName}}</p>
                     <p class="time-p">报警时间：{{parseTime(planData.eventStartTime)}}</p>
                 </div>
                 <div v-if="!lookImgType" class="planAlarm-big-box">
                     <div class="planAlarm-left-box">
-                        <div class="video-box">
-                            <mpegts-video style="display: inline-block" :videoProps="item"
-                                          v-for="(item,index) in videoList" :key="index"></mpegts-video>
+                        <div class="video-box video-box-scrollbar">
+                            <H5PlayerVideo style="margin:0 0 10px 0;"
+                                           v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
                             <p class="null-video-p" v-if="!videoList[0]">实验室未配置摄像头</p>
                         </div>
                         <div class="bugle-box">
@@ -137,6 +135,7 @@
                 </div>
             </div>
         </div>
+      <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
     </div>
 </template>
 <script>
@@ -148,13 +147,18 @@
         laboratorySubRelInfoGetDetailInfo,
         iotBigViewSpeakerPlayText,
         laboratoryPlanCloseRiskPlan,
+        iotCameraFindByCondition,
     } from "@/api/index";
     import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
+    import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
+    import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
 
     export default {
         name: 'planAlarm',
         components: {
             mpegtsVideo,
+            H5PlayerVideo,
+            fullH5PlayerVideo,
         },
         data() {
             return {
@@ -170,8 +174,6 @@
                 internalPerson: {},
                 //实验室人数
                 userList: [],
-                //摄像头
-                videoList: [],
                 //持续时间
                 seconds: null,
                 //定时器
@@ -192,13 +194,21 @@
                 voiceType: false,
                 //短信报警
                 messageType: false,
+                //视频
+                width:640,
+                height:363,
+                videoType:false,
+                videoList:[],
+                videoTotal:0,
+                //全屏视频参数
+                fullVideoProps:{},
+                fullVideoType:false,
             }
         },
         created() {
 
         },
         mounted() {
-
         },
         methods: {
             //查询当前正在发生的预案
@@ -227,7 +237,8 @@
                         //查询实验室喇叭
                         this.iotBigViewDeviceFindByType(),
                         //查询实验室摄像头
-                        this.iotBigViewDeviceList(),
+                        // this.iotBigViewDeviceList(),
+                        this.videoInitialize(),
                         //查询实验室传感器
                         this.iotBigViewDeviceFindBySubId(),
                         //查询预案详情
@@ -325,6 +336,52 @@
                 })
             },
             //查询实验室摄像头
+            videoInitialize(){
+                let self = this;
+                self.$set(self, 'videoType', false);
+                self.$set(self, 'videoList', []);
+                // type 1.楼栋 2.楼层 3.楼道 4.实验室
+                let obj = {
+                    page:1,
+                    pageSize:10,
+                    passageway:'',
+                    subId:[this.planData.subId],
+                    protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
+                    streamType:1,
+                    source:0,
+                };
+                iotCameraFindByCondition(obj).then(response => {
+                    let list = [];
+                    for(let i=0;i<response.data.records.length;i++){
+                        list.push(
+                            {
+                                width: this.width, //(宽度:非必传-默认600)
+                                height: this.height, //(高度:非必传-默认338)
+                                url: response.data.records[i].streamUrl,
+                                cameraIndexCode: response.data.records[i].deviceNo,
+                            }
+                        )
+                    }
+                    this.$set(this,'videoList',list)
+                    this.$set(this,'videoTotal',response.data.total);
+                    this.$nextTick(()=>{
+                        setTimeout(function(){
+                            self.$set(self, 'videoType', true);
+                        },1000);
+                    })
+                });
+            },
+            //全屏开启-关闭轮播
+            stopTime(cameraIndexCode){
+                this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+                this.$set(this,'fullVideoType',true);
+            },
+            //全屏关闭-开启轮播
+            outFullScreen(){
+                this.$set(this,'fullVideoType',false);
+                this.$set(this,'fullVideoProps',{});
+            },
+            //查询实验室摄像头
             iotBigViewDeviceList() {
                 let obj = {
                     page: 1,
@@ -542,6 +599,7 @@
                         .video-box {
                             width: 645px;
                             height: 363px;
+                            overflow-y: scroll;
                             .null-video-p {
                                 line-height: 363px;
                                 text-align: center;
@@ -549,6 +607,25 @@
                                 color: #999;
                             }
                         }
+
+                        .video-box-scrollbar{
+                          overflow-y: scroll;
+                          overflow-x: hidden;
+                        }
+                        .video-box-scrollbar::-webkit-scrollbar {
+                          width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+                          height: 8px;
+                        }
+                        .video-box-scrollbar::-webkit-scrollbar-thumb {
+                          border-radius: 6px;
+                          -webkit-box-shadow: inset 0 0 5px #15827C;
+                          background: #15827C;
+                        }
+                        .video-box-scrollbar::-webkit-scrollbar-track {
+                          -webkit-box-shadow: inset 0 0 6px rgba(3,44,50,0);
+                          border-radius: 0;
+                          background:  rgba(3,44,50,0);
+                        }
                     }
                     .bugle-box {
                         width: 645px;

src/main.js

@@ -5,6 +5,7 @@ import routes from './router';
 import VueRouter from 'vue-router';
 import echarts from 'echarts';
 import ElementUI from 'element-ui';
+import '@/assets/iconfont/iconfont.css';  //阿里矢量库
 import 'element-ui/lib/theme-chalk/index.css';
 import '@/assets/styles/publicEle.scss'
 import '@/utils/browser_patch'

src/router/index.js

@@ -13,6 +13,9 @@ import WarningDetail from '../views/courtyardManage/warningDetail.vue';
 import WorkInfoDetail from '../views/courtyardManage/workInfoDetail.vue'
 import WorkPlanDetail from '../views/courtyardManage/workPlanDetail.vue';
 import ClassifyGradeDetail from '../views/courtyardManage/classifyGradeDetail.vue';
+import EventList from '../views/courtyardManage/eventList.vue';
+import EmergencyManagement from '../views/emergencyManagement/index.vue';
+import VideoSurveillance from '../views/videoSurveillance/index.vue';
 
 const router = [
     {
@@ -55,6 +58,14 @@ const router = [
             title: '分级管控',
         },
     },
+    {
+        path: '/eventList',
+        component: EventList,
+        name: 'eventList',
+        meta: {
+            title: '预警事件',
+        },
+    },
     {
         path: '/dangerDetail',
         component: DangerDetail,
@@ -135,6 +146,22 @@ const router = [
             title: '实验室分类分级',
         },
     },
+    {
+        path: '/emergencyManagement',
+        component: EmergencyManagement,
+        name: 'emergencyManagement',
+        meta: {
+            title: '应急指挥平台',
+        },
+    },
+    {
+        path: '/videoSurveillance',
+        component: VideoSurveillance,
+        name: 'videoSurveillance',
+        meta: {
+            title: '视频监控',
+        },
+    },
     {
         path: '/*',
         redirect: '/',

src/views/courtyardManage/classifyGradeDetail.vue

@@ -93,8 +93,8 @@
                 <div class="right-big-box">
                     <div class="lv-max-box scrollbar-box">
                         <div class="lv-for-box" v-for="(item,index) in lvList" :key="index">
-                            <p :style="'background:'+item.levelColor+';'"></p>
-                            <p>{{item.levelName}}</p>
+                            <p :style="'background:'+item.titleColor+';'"></p>
+                            <p>{{item.titleName}}</p>
                         </div>
                     </div>
                 </div>
@@ -111,7 +111,7 @@
         classTypeListAll
     } from "@/api/index";
     import {
-        laboratoryClassLevelGetList,
+        laboratoryLevelConfigGetLevelTitleList,
         laboratoryBigViewGetFloorListByBigView,
         laboratoryBuildLayoutGetTreeSonList,
         systemBuildingGetTreeList
@@ -153,7 +153,7 @@
         },
         mounted() {
             this.systemBuildingGetTreeList();
-            this.laboratoryClassLevelGetList();
+            this.laboratoryLevelConfigGetLevelTitleList();
         },
         methods: {
             //楼栋选择
@@ -172,22 +172,143 @@
             systemBuildingGetTreeList() {
                 systemBuildingGetTreeList({}).then((response) => {
                     if (response.code == 200) {
-                        let list = [];
-                        for(let i=0;i<response.data.length;i++){
-                            let num = 0;
-                            if(response.data[i].buildFloorVoList[0]){
-                                for(let o=0;o<response.data[i].buildFloorVoList.length;o++){
-                                    if(response.data[i].buildFloorVoList[o].buildFloorVoList[0]){
-                                        for(let x=0;x<response.data[i].buildFloorVoList[o].buildFloorVoList.length;x++){
-                                            num++
-                                        }
-                                    }
-                                }
-                            }
-                            if(num != 0){
-                                list.push(response.data[i]);
-                            }
-                        }
+                        let list = [{
+                            floorNum: null,
+                            groupName: null,
+                            id: "101093843117592688",
+                            imgUrl: null,
+                            name: "南校区",
+                            parentId: "0",
+                            roomNum: null,
+                            sortNo: 1,
+                            type: 1,
+                            buildFloorVoList:[{
+                                "id": "101093843117592803",
+                                "name": "农科楼(资源环境学院)",
+                                "type": 2,
+                                "imgUrl": null,
+                                "parentId": "101093843117592688",
+                                "sortNo": 1,
+                                "floorNum": null,
+                                "roomNum": null,
+                                "groupName": null,
+                                "buildFloorVoList": [{
+                                    "id": "101093843117593020",
+                                    "name": "1层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593021",
+                                    "name": "2层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593022",
+                                    "name": "9层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593023",
+                                    "name": "3层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593024",
+                                    "name": "4层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593025",
+                                    "name": "5层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593026",
+                                    "name": "6层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593027",
+                                    "name": "7层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }, {
+                                    "id": "101093843117593028",
+                                    "name": "8层",
+                                    "type": 3,
+                                    "imgUrl": null,
+                                    "parentId": "101093843117592803",
+                                    "sortNo": 1,
+                                    "floorNum": null,
+                                    "roomNum": null,
+                                    "groupName": null,
+                                    "buildFloorVoList": []
+                                }]
+                            }]
+                        }];
+                        // for(let i=0;i<response.data.length;i++){
+                        //     let num = 0;
+                        //     if(response.data[i].buildFloorVoList[0]){
+                        //         for(let o=0;o<response.data[i].buildFloorVoList.length;o++){
+                        //             if(response.data[i].buildFloorVoList[o].buildFloorVoList[0]){
+                        //                 for(let x=0;x<response.data[i].buildFloorVoList[o].buildFloorVoList.length;x++){
+                        //                     num++
+                        //                 }
+                        //             }
+                        //         }
+                        //     }
+                        //     if(num != 0){
+                        //         list.push(response.data[i]);
+                        //     }
+                        // }
                         this.$set(this,'buildingOptions',list);
                         if(list[0]){
                             this.laboratoryBigViewGetFloorListByBigView(list[0].id,list[0].buildFloorVoList[0].id);
@@ -290,8 +411,8 @@
                 })
             },
             //获取分级数据
-            laboratoryClassLevelGetList() {
-                laboratoryClassLevelGetList({}).then((response) => {
+            laboratoryLevelConfigGetLevelTitleList() {
+                laboratoryLevelConfigGetLevelTitleList({}).then((response) => {
                     if (response.code == 200) {
                         this.$set(this, 'lvList', response.data);
                     }

src/views/courtyardManage/courtyardHome.vue

@@ -11,6 +11,14 @@
                 <i class="schoolName">{{deptName?deptName:'****'}}</i>
                 <img class="header_r1_r" src="@/assets/image/index_icon4.png" @click="openBackManageUrl()"/>
             </div>
+            <div class="position-img-button-left-box" @click="topButtonGoPage('video')">
+                <img src="@/assets/image/icon_yjgl_spjk.png">
+                <p>视频监控</p>
+            </div>
+            <div class="position-img-button-right-box" @click="topButtonGoPage('alarm')">
+                <img src="@/assets/image/icon_yjgl_yjpt.png">
+                <p>应急指挥平台</p>
+            </div>
         </div>
         <div class="left">
             <div class="left_t">
@@ -18,7 +26,7 @@
                 <div class="left_t_l1"></div>
                 <div class="left_t_c">
                     <li :class="{'checked_li':checkedNum==0}" @click="checkedNumButton(0)">校院通知</li>
-                    <li :class="{'checked_li':checkedNum==1}" @click="checkedNumButton(1)">工作计划</li>
+                    <li :class="{'checked_li':checkedNum==1}" @click="checkedNumButton(1)">预警事件</li>
                     <li :class="{'checked_li':checkedNum==2}" @click="checkedNumButton(2)">安全检查</li>
                     <li :class="{'checked_li':checkedNum==3}" @click="checkedNumButton(3)">分级管控</li>
                 </div>
@@ -46,21 +54,22 @@
                         </el-carousel-item>
                         <el-carousel-item class="swiper-wrapper">
                             <div class="swiper-slide">
-                                <!--工作计划-->
+                                <!--预警事件通知-->
                                 <div class="left_t_r2" v-if="planList">
-                                    <!--<div class="left_t_r2_t">
-                    <i>{{planTitle}}</i>
-                  </div>-->
+                                    <div class="left_t_r2_title">
+                                        <p>预警事件通知</p>
+                                        <img src="@/assets/image/index_icon8.png" @click="eventUrl()"/>
+                                    </div>
                                     <div class="left_t_r2_m">
-                                        <i>工作内容</i>
-                                        <i>执行单位</i>
-                                        <i>执行日期</i>
+                                        <i>预警时间</i>
+                                        <i>预警事件</i>
+                                        <i>实验室</i>
                                     </div>
                                     <div class="left_t_r2_b" v-for='(item,index2) in planList' :key="index2">
                                         <li v-if="index2<7" @click="openInfoUrl(item,2)">
-                                            <i class="over">{{item.title}}</i>
-                                            <i>{{item.company}}</i>
-                                            <i>{{parseTime(item.createTime,"{y}-{m}-{d}")}}</i>
+                                            <i class="over">{{parseTime(item.warnTime,"{y}-{m}-{d} {h}:{i}")}}</i>
+                                            <i>{{item.warnContent}}</i>
+                                            <i>{{item.subName}}</i>
                                             <img src="@/assets/image/index_icon8.png"/>
                                         </li>
                                     </div>
@@ -140,135 +149,9 @@
                         </el-carousel-item>
                     </el-carousel>
                 </div>
-                <!--<div class="left_t_n">-->
-                <!--<div class="swiper-container">-->
-                <!--<div class="swiper-wrapper">-->
-                <!--<div class="swiper-slide">-->
-                <!--&lt;!&ndash;院校通知&ndash;&gt;-->
-                <!--<div class="left_t_r" v-if="infoList">-->
-                <!--<li v-for='(item,index) in infoList' :key="index" @click="openInfoUrl(item,1)">-->
-                <!--<div class="left_t_r_t">-->
-                <!--<i>{{item.title}}</i>-->
-                <!--<i>{{item.company}}</i>-->
-                <!--<i>{{parseTime(item.createTime,"{y}-{m}-{d}")}}</i>-->
-                <!--<img class="left_t_r_t_r" src="@/assets/image/index_icon8.png" />-->
-                <!--</div>-->
-                <!--<div class="left_t_r_b over2">{{item.contentText}}</div>-->
-                <!--</li>-->
-                <!--<div v-if="infoList.length<=0" style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据</div>-->
-                <!--</div>-->
-                <!--</div>-->
-                <!--<div class="swiper-slide">-->
-                <!--&lt;!&ndash;工作计划&ndash;&gt;-->
-                <!--<div class="left_t_r2" v-if="planList">-->
-                <!--&lt;!&ndash;<div class="left_t_r2_t">-->
-                <!--<i>{{planTitle}}</i>-->
-                <!--</div>&ndash;&gt;-->
-                <!--<div class="left_t_r2_m">-->
-                <!--<i>工作内容</i>-->
-                <!--<i>执行单位</i>-->
-                <!--<i>执行日期</i>-->
-                <!--</div>-->
-                <!--<div class="left_t_r2_b" v-for='(item,index2) in planList' :key="index2">-->
-                <!--<li v-if="index2<7"  @click="openInfoUrl(item,2)">-->
-                <!--<i class="over">{{item.title}}</i>-->
-                <!--<i>{{item.company}}</i>-->
-                <!--<i>{{parseTime(item.createTime,"{y}-{m}-{d}")}}</i>-->
-                <!--<img src="@/assets/image/index_icon8.png"/>-->
-                <!--</li>-->
-                <!--</div>-->
-                <!--<div v-if="planList.length<=0" style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据</div>-->
-                <!--</div>-->
-                <!--</div>-->
-                <!--<div class="swiper-slide">-->
-                <!--&lt;!&ndash;安全检查&ndash;&gt;-->
-                <!--<div class="left_t_r3">-->
-                <!--<div class="left_t_r2_t">-->
-                <!--<i>安全检查</i>-->
-                <!--<img src="@/assets/image/index_icon8.png" @click="openinspectUrl()"/>-->
-                <!--</div>-->
-                <!--<div class="left_t_r2_t2">-->
-                <!--<i>未开始：{{inspeccheckZs}}</i>-->
-                <!--<i>进行中：{{inspeccheckWzg}}</i>-->
-                <!--<i>已结束：{{inspeccheckYzg}}</i>-->
-                <!--</div>-->
-                <!--<div class="left_t_r2_m">-->
-                <!--<i>计划标题</i>-->
-                <!--<i>检查范围</i>-->
-                <!--<i>检查类型</i>-->
-                <!--<i>任务周期</i>-->
-                <!--<i>状态</i>-->
-                <!--</div>-->
-                <!--<div class="left_t_r2_b" v-if="inspectList">-->
-                <!--<li v-for='(item,index3) in inspectList' :key="index3">-->
-                <!--<i class="over">{{item.title}}</i>-->
-                <!--<i>{{item.checkRange==1?'全校':(item.checkRange==2?'学院':(item.checkRange==3?'实验室':''))}}</i>-->
-                <!--<i>{{item.checkCategory==1?'综合检查':(item.checkCategory==2?'专项检查':'')}}</i>-->
-                <!--<i>{{item.cycleStartTime}}至{{item.cycleEndTime}}</i>-->
-                <!--<i>{{item.checkStatus==1?'未开始':(item.checkStatus==2?'进行中':(item.checkStatus==3?'已结束':''))}}</i>-->
-                <!--</li>-->
-                <!--</div>-->
-                <!--<div v-if="inspectList.length<=0" style="position:relative;left: 44%; top:8%;color:#fff;">暂无数据</div>-->
-                <!--</div>-->
-                <!--</div>-->
-                <!--<div class="swiper-slide">-->
-                <!--&lt;!&ndash;分级管控&ndash;&gt;-->
-                <!--<div class="left_t_r4" v-if="controlList">-->
-                <!--&lt;!&ndash;<div class="left_t_r2_t">&ndash;&gt;-->
-                <!--&lt;!&ndash;<i>{{controlTitle}}</i>&ndash;&gt;-->
-                <!--&lt;!&ndash;<img src="@/assets/image/index_icon8.png"/>&ndash;&gt;-->
-                <!--&lt;!&ndash;</div>&ndash;&gt;-->
-                <!--<div class="left_t_r2_m">-->
-                <!--<i>管控名称</i>-->
-                <!--<i>二级单位</i>-->
-                <!--<i>安全分类</i>-->
-                <!--<i>安全分级</i>-->
-                <!--<i>执行状态</i>-->
-                <!--</div>-->
-                <!--<div class="left_t_r2_b" v-for='(item,index4) in controlList' :key="index4" @click="openInfoUrl(item,3)">-->
-                <!--<li v-if="index4<7">-->
-                <!--<i>{{item.name}}</i>-->
-                <!--<i>{{item.deptName}}</i>-->
-                <!--<i>{{item.typeName}}</i>-->
-                <!--<i>{{item.levelName}}</i>-->
-                <!--<i>{{item.status?'已执行':'未执行'}}</i>-->
-                <!--</li>-->
-                <!--</div>-->
-
-                <!--<div v-if="controlList.length<=0" style="position:relative;left: 44%; top:20%;color:#fff;">暂无数据</div>-->
-                <!--</div>-->
-                <!--</div>-->
-                <!--</div>-->
-                <!--</div>-->
-                <!--</div>-->
             </div>
             <div class="left_b">
                 <personnelAdmittanceECharts v-if="!warningList[1]"></personnelAdmittanceECharts>
-                <!--<div class="left_b_t" v-if="!warningList[1]">-->
-                    <!--<div class="left_b_t_l">-->
-                        <!--&lt;!&ndash;公共小标题&ndash;&gt;-->
-                        <!--<div class="small_title">-->
-                            <!--<div class="small_title_l">人员违规统计-本月</div>-->
-                            <!--<div class="small_title_r">-->
-                                <!--<i>总违规人数：{{resultCount}}</i>-->
-                                <!--<img class="left_b_t_l_btn" src="@/assets/image/index_icon8.png"-->
-                                     <!--@click="left_b_t_l_btn"/>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                        <!--<div class="left_b_t_l_b" id="left_b_t_l_b"></div>-->
-                    <!--</div>-->
-                    <!--<div class="left_b_t_r">-->
-                        <!--&lt;!&ndash;公共小标题&ndash;&gt;-->
-                        <!--<div class="small_title">-->
-                            <!--<div class="small_title_l">安全准入办理统计</div>-->
-                            <!--<div class="small_title_r" @click="left_b_t_r_btn">-->
-                                <!--<i>准入办理总人数：{{listcount}}</i>-->
-                                <!--<img class="left_b_t_r_btn" src="@/assets/image/index_icon8.png"/>-->
-                            <!--</div>-->
-                        <!--</div>-->
-                        <!--<div class="left_b_t_r_b" id="left_b_t_r_b"></div>-->
-                    <!--</div>-->
-                <!--</div>-->
                 <img class="left_b_t1" v-if="!warningList[1]" src="@/assets/image/index_icon12.png"/>
                 <!--实验室信息-->
                 <subSensorComponent v-if="!warningList[0]"></subSensorComponent>
@@ -390,12 +273,12 @@
         laboratoryBigViewListCollegeApplyColumn,
         examBigViewNewStatistics,
         securityBigViewList,
-        securityBigViewPlanStatistics
+        securityBigViewPlanStatistics,
+        systemWarningNoticeNoMenuList
     } from "@/api/index"
     import {
         laboratoryBigViewsSubTypeLevelCount,
         laboratoryBigViewSubHazardCount,
-        laboratoryClassLevelGetList,
         laboratoryClassTypeGetList, securityBigViewCheckOptionCharts,
     } from "@/api/index";
     import Swiper from 'swiper'
@@ -485,6 +368,14 @@
             this.timerPlay();
         },
         methods: {
+            //跳转视频/应急页面
+            topButtonGoPage(type){
+                if(type == 'video'){
+                    this.$router.push('/videoSurveillance')
+                }else if(type == 'alarm'){
+                    this.$router.push('/emergencyManagement')
+                }
+            },
             // 定时器
             timerPlay(){
                 let self = this;
@@ -598,7 +489,11 @@
             openinspectUrl() {
                 // this.$router.push({path: './inspectDetail', query: {key: this.planId}})
                 this.$router.push({path: './inspectDetail',})
-
+            },
+            //预警通知
+            eventUrl() {
+                // this.$router.push({path: './inspectDetail', query: {key: this.planId}})
+                this.$router.push({path: './eventList',})
             },
             //进入实验室人员
             right_b_btn() {
@@ -821,12 +716,12 @@
                     }
                 })
             },
-            //工作计划
+            //预警事件
             workPlanFun: function () {
                 let self = this;
-                systemNotifyList({pageNum: 1, pageSize: 10, notifyType: 3}).then((res) => {
+                systemWarningNoticeNoMenuList({page : 1, pageSize: 6,}).then((res) => {
                     if (res.code == 200) {
-                        this.$set(self, 'planList', res.data);
+                        this.$set(self, 'planList', res.data.records);
                     }
                 })
             },
@@ -963,7 +858,7 @@
 
                     grid: {
                         left: '3%',
-                        right: '4%',
+                        right: '6%',
                         bottom: '3%',
                         top: '14%',
                         containLabel: true
@@ -1367,6 +1262,51 @@
             z-index: 50;
             display: flex;
             justify-content: flex-start;
+            .position-img-button-left-box{
+                cursor: pointer;
+                position: absolute;
+                top: 4px;
+                left: 410px;
+                display: flex;
+                width:190px;
+                height:24px;
+                img{
+                    width:24px;
+                    height:18px;
+                    display: inline-block;
+                    margin:4px 0;
+                }
+                p{
+                    color:#24D1F9;
+                    font-size:16px;
+                    line-height:24px;
+                    margin-left:14px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                }
+            }
+            .position-img-button-right-box{
+                cursor: pointer;
+                position: absolute;
+                top: 4px;
+                right: 385px;
+                display: flex;
+                width:190px;
+                height:24px;
+                img{
+                    width:24px;
+                    height:24px;
+                    display: inline-block;
+                }
+                p{
+                    color:#24D1F9;
+                    font-size:16px;
+                    line-height:24px;
+                    margin-left:14px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                }
+            }
             .header_l {
                 width: 182px;
                 height: 44px;
@@ -1533,7 +1473,7 @@
                             }
                         }
                     }
-                    /*工作计划*/
+                    /*预警通知*/
                     .left_t_r2 {
 
                         width: 672px;
@@ -1565,6 +1505,25 @@
                                 cursor: pointer;
                             }
                         }
+                        .left_t_r2_title{
+                            display: flex;
+                            p{
+                                flex:1;
+                                text-align: center;
+                                font-size:16px;
+                                line-height:18px;
+                                color:#fff;
+                                margin:26px 0;
+                                font-family: Source Han Sans CN;
+                                font-weight: 400;
+                            }
+                            img{
+                                width: 12px;
+                                height: 12px;
+                                cursor: pointer;
+                                margin:28px 10px;
+                            }
+                        }
                         .left_t_r2_m {
                             background: rgba(15, 96, 124, 0.2);
                             height: 50px;
@@ -1584,20 +1543,21 @@
                                 text-overflow: ellipsis;
                             }
                             > i:nth-of-type(1) {
-                                width: 272px;
+                                width: 146px;
                                 margin-left: 22px;
                                 margin-right: 20px;
                             }
                             > i:nth-of-type(2) {
-                                width: 214px;
+                                width: 234px;
                             }
                             > i:nth-of-type(3) {
-                                width: 100px;
+                                width: 200px;
                             }
 
                         }
                         .left_t_r2_b {
                             > li {
+                                cursor: pointer;
                                 height: 40px;
                                 width: 100%;
                                 display: flex;
@@ -1615,16 +1575,17 @@
                                     text-overflow: ellipsis;
                                 }
                                 > i:nth-of-type(1) {
-                                    width: 272px;
+                                    width: 146px;
                                     margin-left: 22px;
-                                    margin-right: 20px;
+                                    margin-right: 10px;
                                 }
                                 > i:nth-of-type(2) {
-                                    width: 214px;
+                                    width: 240px;
+                                    margin-right: 10px;
                                 }
                                 > i:nth-of-type(3) {
                                     // width: 146px;
-                                    width: 100px;
+                                    width: 200px;
                                 }
                                 > img {
                                     width: 12px;
@@ -2150,7 +2111,7 @@
                 .right_m_l {
                     width: 324px;
                     .right_m_l_b {
-                        width: 304px;
+                        width: 324px;
                         height: 214px;
                     }
                 }

src/views/courtyardManage/eventList.vue

@@ -0,0 +1,506 @@
+<template>
+    <div class="main app-container-event">
+        <Header/>
+        <div class="main_t">
+            <div class="main_t_t">
+                <i class="main_t_t_l">当前位置：首页 &gt;</i>
+                <i>预警事件</i>
+            </div>
+        </div>
+        <div class="main_b">
+            <!--查询条件-->
+            <el-form :model="editForm" ref="editForm" class="form-box" :inline="true" style="margin:20px;">
+                <el-form-item label="" prop="queryParamsData1">
+                    <el-input
+                            maxLength="30"
+                            v-model="editForm.searchValue"
+                            placeholder="实验室/房间号/预警事件/姓名"
+                            style="width: 220px"
+                    />
+                </el-form-item>
+                <el-form-item label="" prop="warnType">
+                    <el-select v-model="editForm.warnType" placeholder="请选择类型" style="width: 200px">
+                        <el-option
+                                v-for="item in warnOptions"
+                                :key="item.warnType"
+                                :label="item.warnName"
+                                :value="item.warnType"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="" prop="state" style="margin-top:-2px;">
+                    <el-date-picker
+                            :clearable="false"
+                            v-model="dateRange"
+                            size="small"
+                            style="width: 240px"
+                            value-format="yyyy-MM-dd"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item label-width="0">
+                    <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
+                    <el-button @click="resetForm('searchForm')">重置</el-button>
+                </el-form-item>
+            </el-form>
+            <!--列表-->
+            <div class="table-max-big-box">
+                <el-table :data="tableData" style="width: 100%" height="250" :row-class-name="tableRowClassName">
+                    <el-table-column label="报警时间" prop="createTime" width="180" show-overflow-tooltip>
+                        <template slot-scope="scope">
+                            <span>{{ parseTime(scope.row.warnTime,"{y}-{m}-{d} {h}:{i}") }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="预警类型" prop="content" width="200" show-overflow-tooltip>
+                        <template slot-scope="scope">
+                            <span>{{scope.row.warnType==1?'化学品预警':(scope.row.warnType==2?'气瓶预警':'算法预警')}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="预警事件" prop="warnContent" width="505" show-overflow-tooltip/>
+                    <el-table-column label="学院" prop="deptName" width="200" show-overflow-tooltip/>
+                    <el-table-column label="楼栋楼层" prop="content" width="200" show-overflow-tooltip>
+                        <template slot-scope="scope">
+                            <span>{{scope.row.buildName}}-{{scope.row.floorName}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="实验室" prop="content" width="200" show-overflow-tooltip>
+                        <template slot-scope="scope">
+                            <span>{{scope.row.subName}}{{scope.row.roomNum?' - ('+scope.row.roomNum+')':''}}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="安全员" prop="safeInfoStr" width="200" show-overflow-tooltip/>
+                    <el-table-column label="操作" width="100" show-overflow-tooltip>
+                        <template slot-scope="scope">
+                            <div class="table-button-box">
+                                <p class="table-button-null"></p>
+                                <p class="table-button-p"
+                                   @click="tableButton(scope.row)"
+                                   v-if="scope.row.noticeStatus==0 && scope.row.isHandlePeople==false"
+                                >详情</p>
+                                <p class="table-button-p"
+                                   style="color:#1ED0F8;cursor: pointer"
+                                   @click="tableButton(scope.row)"
+                                   v-if="scope.row.noticeStatus!=0 "
+                                >详情</p>
+                                <p class="table-button-null"></p>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div style="display: flex;padding-bottom:20px;">
+                    <p style="flex:1;"></p>
+                    <el-pagination
+                            style="margin-top: 14px"
+                            background
+                            @current-change="handleCurrentChange"
+                            :page-sizes="[10, 20, 30, 40]"
+                            :current-page.sync="editForm.page"
+                            :page-size="editForm.pageSize"
+                            layout="total,prev, pager, next"
+                            :total="totalNum">
+                    </el-pagination>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {systemWarningNoticeNoMenuList} from "@/api/index"
+    import Header from '@/components/header.vue'
+
+    export default {
+        components: {
+            Header
+        },
+        data() {
+            return {
+                editForm: {
+                    searchValue: '',
+                    warnType: '',
+                    page: 1,
+                    pageSize: 10
+                },
+                labList: [],//实验室
+                totalNum: 0,
+                tableData: [],
+                codeData: '',
+                subOptions: [],
+                warnOptions:[
+                    {warnName:'化学品预警',warnType:'1'},
+                    {warnName:'气瓶预警',warnType:'2'},
+                    {warnName:'算法预警',warnType:'3'},
+                    {warnName:'预案',warnType:'4'},
+                ],
+                //楼栋楼层
+                buildFloorOptions:[],
+                //时间数据
+                dateRange:[],
+            }
+        },
+        methods: {
+            tableButton(item) {
+                this.$router.push(
+                    {
+                        path: './workInfoDetail',
+                        query: {
+                            item: item,
+                            type: 4
+                        },
+                    })
+            },
+            back() {
+                this.$router.push('/home')
+            },
+            tableRowClassName({rowIndex}) {
+                if (rowIndex % 2 === 0) {
+                    return 'success-row';
+                } else {
+
+                    return 'warning-row';
+                }
+            },
+
+            indexMethod(index) {
+                return (this.editForm.page - 1) * this.editForm.pageSize + index + 1;
+            },
+            indexMethod2(index) {
+                return (this.editForm2.page - 1) * this.editForm2.pageSize + index + 1;
+            },
+            //请求列表
+            getAjaxList: function () {
+                let obj = JSON.parse(JSON.stringify(this.editForm))
+                obj.deptId = localStorage.getItem('deptId');
+                if(this.dateRange[0]){
+                    obj.startTime = this.dateRange[0]+'T00:00:00'
+                    obj.endTime = this.dateRange[1]+'T23:59:59'
+                }else{
+                    obj.startTime = "";
+                    obj.endTime = "";
+                }
+                systemWarningNoticeNoMenuList(obj).then((res) => {
+                    if (res.code == 200) {
+                        this.$set(this, 'tableData', res.data.records);
+                        this.$set(this, 'totalNum', res.data.total);
+                    }
+                })
+            },
+            /*查询*/
+            onSearch() {
+
+                this.editForm.page = 1;
+                this.getAjaxList();
+            },
+            /*重置*/
+            resetForm() {
+                this.$set(this,'editForm',{
+                    searchValue: '',
+                    warnType: '',
+                    page: 1,
+                    pageSize: 10
+                });
+                this.$set(this,'dateRange',[]);
+                this.onSearch();
+            },
+            handleCurrentChange(val) {
+                this.editForm.page = val;
+                this.getAjaxList();
+            },
+        },
+        mounted() {
+            this.codeData = this.$route.query.key
+            this.getAjaxList();
+        },
+
+
+    }
+</script>
+<style lang="scss" scoped>
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    .main {
+        width: 1920px;
+        height: 1080px;
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+        background: #062338;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        .main_t {
+            background: #062338;
+            width: 1852px;
+            position: absolute;
+            left: 34px;
+            top: 86px;
+            z-index: 200;
+            .main_t_t {
+                margin: 20px 0 0 18px;
+                > i {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: 16px;
+                }
+                > i:nth-of-type(1) {
+
+                }
+                > i:nth-of-type(2) {
+                    color: #1ED0F8;
+                }
+            }
+        }
+        .main_b {
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            margin-bottom: 40px;
+            //position: absolute;
+            //left: 34px;
+            //top: 138px;
+            //z-index: 200;
+            margin-top: 138px;
+            margin-left: 34px;
+            overflow: hidden;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            .main_b_title {
+                font-size: 24px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 24px;
+                text-align: center;
+                margin-top: 10px;
+            }
+        }
+        .main_b_h {
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 894px;
+            margin-top: 138px;
+            margin-left: 34px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            .main_b_title {
+                font-size: 24px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 24px;
+                text-align: center;
+                margin-top: 10px;
+            }
+        }
+        .main_b2 {
+            background: rgba(9, 55, 81, 0.6);
+            padding: 0 32px;
+            width: 1852px;
+            height: 442px;
+            margin-left: 34px;
+            margin-top: 25px;
+            overflow: hidden;
+            //position: absolute;
+            //left: 34px;
+            //top: 588px;
+            //z-index: 200;
+            .main_b_title {
+                font-size: 24px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #FFFFFF;
+                line-height: 24px;
+                text-align: center;
+                margin-top: 10px;
+            }
+        }
+    }
+</style>
+<style lang="scss">
+    li {
+        list-style: none
+    }
+
+    i, em, b {
+        font-style: normal;
+        font-weight: 100;
+    }
+
+    body {
+        margin: 0
+    }
+
+    .app-container-event {
+        .table-max-big-box {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            .el-table--border {
+                border-bottom: 1px solid #ddd !important;
+            }
+            .table-box-no-height {
+                /*border-right:1px solid #DFE6EC;*/
+                /*background-color: #333333;*/
+                //表头
+                th {
+                    /*background-color: #f5f5f5;*/
+                    .cell {
+                        /*color:#333;*/
+                        font-size: 14px;
+                        font-weight: 700;
+                        text-align: center;
+                    }
+                }
+                td {
+                    .cell {
+                        padding: 0 10px 0 12px;
+                    }
+                    div {
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
+                    //勾选框
+                    .el-checkbox {
+                        display: block;
+                        height: 22px;
+                        width: 14px;
+                        margin: 6px auto;
+                        overflow: hidden;
+                        span {
+                            display: block;
+                            height: 24px;
+                            width: 14px;
+                            overflow: hidden;
+                            span {
+                                height: 14px;
+                                width: 14px;
+                                margin: 0 auto;
+                            }
+                        }
+                    }
+                }
+                //默认对齐方向
+                .cell {
+                    text-align: left;
+                }
+                //向左对齐方向
+                .is-table-left {
+                    .cell {
+                        text-align: left;
+                    }
+                }
+                //居中对齐方向
+                .is-table-center {
+                    .cell {
+                        text-align: center;
+                    }
+                }
+                //向右对齐方向
+                .is-table-right {
+                    .cell {
+                        text-align: right;
+                    }
+                }
+                .caret-wrapper {
+                    height: 20px;
+                }
+                .sort-caret.ascending {
+                    top: -3px;
+                }
+                .sort-caret.descending {
+                    bottom: -1px;
+                }
+                .el-table__header-wrapper {
+                    width: calc(100% - 9px);
+                    /*border-right:1px solid #F5F5F5;*/
+                    height: 40px;
+                    th, td {
+                        padding: 6px 0;
+                    }
+                }
+
+                .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+                    th {
+                        word-break: break-word;
+                        /*background-color: #f8f8f8;*/
+                        /*color: #515A6E;*/
+                        height: 40px;
+                    }
+                }
+                .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
+                    /*color:#333333;*/
+                    /*background-color:#F5F5F5;*/
+                    line-height: 20px;
+                }
+                .el-table__body-wrapper {
+                    /*background-color: #FFFFFF;*/
+                    flex: 1;
+                    overflow-y: scroll !important;
+                    th, td {
+                        padding: 6px 0;
+                    }
+                    .el-button [class*="el-icon-"] + span {
+                        margin-left: 1px;
+                    }
+                }
+                //表格内switch按钮样式
+                .el-switch {
+                    height: 26px;
+                    line-height: 26px;
+                }
+                .switch .el-switch__label {
+                    position: absolute;
+                    display: none;
+                    /*color: #fff !important;*/
+                }
+                .switch .el-switch__label--right {
+                    z-index: 1;
+                }
+                .switch .el-switch__label--right span {
+                    margin-left: 10px;
+                }
+                .switch .el-switch__label--left {
+                    z-index: 1;
+                }
+                .switch .el-switch__label--left span {
+                    margin-left: 24px;
+                }
+                .switch .el-switch__label.is-active {
+                    display: block;
+                }
+                .switch.el-switch .el-switch__core,
+                .el-switch .el-switch__label {
+                    width: 64px !important;
+                    margin: 0;
+                    height: 26px;
+                    line-height: 26px;
+                    border-radius: 14px;
+                }
+                .el-switch__core:after {
+                    top: 4px;
+                    left: 4px;
+                }
+                .el-switch.is-checked .el-switch__core::after {
+                    margin-left: -20px;
+                }
+            }
+        }
+    }
+</style>

src/views/courtyardManage/labPersonDetail.vue

@@ -33,7 +33,7 @@
                     <el-option
                         v-for="item in levelList"
                         :key="item.levelId"
-                        :label="item.levelName"
+                        :label="item.titleName"
                         :value="item.levelId">
                     </el-option>
                   </el-select>
@@ -71,7 +71,7 @@
 <script>
 import {
   laboratoryBigViewSubUserCount,
-  laboratoryClassLevelGetList,
+    laboratoryLevelConfigGetLevelTitleList,
   laboratoryClassTypeGetList,
 } from "@/api/index";
 import Header from '@/components/header.vue'
@@ -129,7 +129,7 @@ export default {
     },
     getListAll() {
       //获取实验室分级列表
-      laboratoryClassLevelGetList({}).then(response => {
+        laboratoryLevelConfigGetLevelTitleList({}).then(response => {
         if (response.code == 200) {
           this.$set(this, 'levelList', response.data)
         }

src/views/courtyardManage/workInfoDetail.vue

@@ -1,59 +1,336 @@
 <template>
-  <div class="main">
+    <div class="main">
         <Header/>
         <div class="main_t">
             <div class="main_t_t">
                 <i class="main_t_t_l">当前位置：首页 &gt;</i>
-                <i>{{type==1?'校院通知':(type==2?'工作通知':(type==3?'分级管控':''))}}</i>
+                <i>{{type==1?'校院通知':(type==2?'预警事件':(type==3?'分级管控':''))}}</i>
             </div>
             <div style="background: rgba(9, 55, 81, 0.6);margin-top:30px;height:900px;padding-top:20px;">
-                <div class="title" v-if="type == 1 || type == 2">{{codeData.title}}</div>
-                <div class="main_t_b" v-if="type == 1 || type == 2">
+                <div class="title" v-if="type == 1">{{codeData.title}}</div>
+                <div class="main_t_b" v-if="type == 1">
                     <p v-html="codeData.content"></p>
                     <div class="unit">{{codeData.company}}</div>
                     <div class="time">{{parseTime(codeData.createTime,"{y}-{m}-{d}")}}</div>
                 </div>
                 <div class="title" v-if="type == 3">{{codeData.name}}</div>
                 <div class="main_t_b" v-if="type == 3">
-                    <p style="margin-bottom:20px;">{{codeData.deptName}} - {{codeData.typeName}} - {{codeData.levelName}}</p>
+                    <p style="margin-bottom:20px;">{{codeData.deptName}} - {{codeData.typeName}} -
+                        {{codeData.levelName}}</p>
                     <p>{{codeData.manageDes}}</p>
                     <div class="unit">{{codeData.status?'已执行':'未执行'}}</div>
                     <div class="time">{{parseTime(codeData.createTime,"{y}-{m}-{d}")}}</div>
                 </div>
+                <div class="content-box" style="margin-top:-20px;" v-if="type == 2 || type == 4">
+                    <div class="top-max-big-box">
+                        <p class="title-p">预警信息</p>
+                        <div class="text-max-box">
+                            <div class="text-left-box">
+                                <p>报警时间：</p>
+                                <p>{{parseTime(infoData.warnTime,"{y}-{m}-{d} {h}:{i}") }}</p>
+                            </div>
+                            <div class="text-center-box">
+                                <p>预警类型：</p>
+                                <p>{{infoData.warnType==1?'化学品预警':(infoData.warnType==2?'气瓶预警':'算法预警')}}</p>
+                            </div>
+                            <div class="text-right-box">
+                                <p>实验室负责人：</p>
+                                <p>{{infoData.adminInfo}}</p>
+                            </div>
+                        </div>
+                        <div class="text-max-box">
+                            <div class="text-left-box">
+                                <p>学院：</p>
+                                <p>{{infoData.deptName}}</p>
+                            </div>
+                            <div class="text-center-box">
+                                <p>实验室：</p>
+                                <p>{{infoData.subName}}{{infoData.roomNum?' ('+infoData.roomNum+')':''}}</p>
+                            </div>
+                            <div class="text-right-box">
+                                <p>安全员：</p>
+                                <p>{{infoData.safeInfo}}</p>
+                            </div>
+                        </div>
+                        <div class="text-max-box" v-if="infoData.chemicalWarnType==6">
+                            <div class="text-center-box"  >
+                                <p>操作人：</p>
+                                <p>{{infoData.operationPerson}}</p>
+                            </div>
+                            <div class="text-right-box">
+                                <p>业务类型：</p>
+                                <p>{{infoData.alarmType}}</p>
+                            </div>
+                            <div class="text-right-box">
+                                <p>化学品柜：</p>
+                                <p>{{infoData.position}}</p>
+                            </div>
+                        </div>
+                        <div class="text-max-big-box">
+                            <div class="text-box">
+                                <p>预警事件：</p>
+                                <p>{{infoData.warnContent}}</p>
+                            </div>
+                        </div>
+                        <p class="top-position-p" :class="infoData.noticeStatus != 0?'position-type':''">{{infoData.noticeStatus == 1?'已处理':'待处理'}}</p>
+                    </div>
+                    <!--化学品预警 -->
+                    <div class="bottom-max-big-box" v-if="infoData.warnType==1  && infoData.chemicalWarnType!=6">
+                        <p class="title-p">化学品信息</p>
+                        <!--列表 化学品1化学品违规带离。2超时未归还-->
+                        <div v-if="infoData.chemicalWarnType==1 || infoData.chemicalWarnType==2">
+                            <div class="text-max-box">
+                                <div class="text-center-box">
+                                    <p style="width:96px;">化学品名称：</p>
+                                    <p>{{infoData.chemicalName}}</p>
+                                </div>
+                                <div class="text-center-box">
+                                    <p>编码：</p>
+                                    <p>{{infoData.rfidCode}}</p>
+                                </div>
+                                <div class="text-center-box">
+                                    <p>规格：</p>
+                                    <p>{{infoData.normsNum}}</p>
+                                </div>
+
+                            </div>
+                            <div class="text-max-box">
+                                <div class="text-left-box">
+                                    <p style="width:96px;">余量：</p>
+                                    <p>{{infoData.surplus}}</p>
+                                </div>
+                                <div class="text-center-box">
+                                    <p>归属人：</p>
+                                    <p>{{infoData.belongName}}</p>
+                                </div>
+                                <div class="text-right-box">
+                                    <p>存放位置：</p>
+                                    <p>{{infoData.position}}层</p>
+                                </div>
+                                <!--            <div class="text-center-box" v-if="infoData.chemicalWarnType==2">
+                                              <p>领用人：</p>
+                                              <p>{{infoData.collectUserName}}</p>
+                                            </div>-->
+                            </div>
+                        </div>
+                        <!--列表 化学品3化学品过期。4化学品即将过期-->
+                        <div class="table-max-big-box" v-if="infoData.chemicalWarnType==3 || infoData.chemicalWarnType==4">
+                            <el-table class="table-box-no-height" style="width: 100%"  v-loading="loading" border :data="infoData.chemicalExpireList">
+                                <el-table-column label="化学品名称" prop="chemicalName" show-overflow-tooltip/>
+                                <el-table-column label="编码" prop="tagCode" show-overflow-tooltip/>
+                                <el-table-column label="规格" prop="normsNum" width="180"  show-overflow-tooltip/>
+                                <el-table-column label="余量" prop="surplus" width="180"  show-overflow-tooltip/>
+                                <el-table-column label="归属人" prop="belongName" width="220"  show-overflow-tooltip/>
+                                <el-table-column label="过期时间" prop="expireTime" width="220"  show-overflow-tooltip>
+                                    <template slot-scope="scope">
+                                        <span>{{ parseTime(scope.row.expireTime,"{y}-{m}-{d} ") }}</span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="存放位置" prop="position" width="220" show-overflow-tooltip/>
+                            </el-table>
+                        </div>
+                        <!--列表 化学品3化学品过期。4化学品即将过期-->
+                        <div class="table-max-big-box" v-if="infoData.chemicalWarnType==5">
+                            <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border :data="infoData.chemicalOverdueStockList">
+                                <el-table-column label="化学品名称" prop="chemicalName" width="280" show-overflow-tooltip/>
+                                <el-table-column label="编码" prop="tagCode" show-overflow-tooltip/>
+                                <el-table-column label="CAS" prop="casNum" width="180"  show-overflow-tooltip/>
+                                <el-table-column label="类别" prop="chemicalCategory" width="180" show-overflow-tooltip/>
+                                <el-table-column label="纯度" prop="chemicalPurity" width="180"  show-overflow-tooltip/>
+                                <el-table-column label="规格" prop="normsNum"  width="180"  show-overflow-tooltip/>
+                                <el-table-column label="数量" prop="applyNum"  width="180" show-overflow-tooltip/>
+                                <el-table-column label="已入库数量" prop="inStockNum"  width="180" show-overflow-tooltip/>
+                                <el-table-column label="状态" prop="isStock"  width="180" show-overflow-tooltip>
+                                    <template slot-scope="scope">
+                                        <span>{{scope.row.isStock?'已入库':'超期未入库'}}</span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="归属人" prop="belongName" width="220"  show-overflow-tooltip/>
+                                <el-table-column label="学院" prop="deptName" width="220"  show-overflow-tooltip/>
+                                <el-table-column label="实验室" prop="subName" width="220"  show-overflow-tooltip/>
+                                <el-table-column label="类型" prop="source" width="220"  show-overflow-tooltip/>
+                                <el-table-column label="入库期限" prop="createTime" width="220"  show-overflow-tooltip>
+                                    <template slot-scope="scope">
+                                        <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                        <!--        <div class="table-max-big-box" v-if="infoData.chemicalWarnType==6">
+                                  <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border :data="infoData.chemicalTimeoutList">
+                                    <el-table-column label="化学品名称" prop="chemicalName"  show-overflow-tooltip/>
+                                    <el-table-column label="编码" prop="tagCode" width="180"  show-overflow-tooltip/>
+                                    <el-table-column label="CAS" prop="casNum" width="180"  show-overflow-tooltip/>
+                                    <el-table-column label="类别" prop="chemicalCategoryName" width="180" show-overflow-tooltip/>
+                                    <el-table-column label="纯度" prop="chemicalPurity" width="180"  show-overflow-tooltip/>
+                                    <el-table-column label="规格" prop="normsNum"  width="180"  show-overflow-tooltip/>
+                                    <el-table-column label="余量" prop="surplus"  width="180" show-overflow-tooltip/>
+                                    <el-table-column label="归属人" prop="belongName" width="220"  show-overflow-tooltip/>
+                                    <el-table-column label="学院" prop="deptName" width="220"  show-overflow-tooltip/>
+                                    <el-table-column label="存储位置" prop="position" width="220"  show-overflow-tooltip/>
+                                  </el-table>
+                                </div>-->
+                    </div>
+                    <!--气瓶预警 -->
+                    <div class="bottom-max-big-box" v-if="infoData.warnType==2">
+                        <p class="title-p">气瓶信息</p>
+                        <div>
+                            <div class="text-max-box">
+                                <div class="text-left-box">
+                                    <p style="width:96px;">气体名称：</p>
+                                    <p>{{infoData.airBottleName}}</p>
+                                </div>
+                                <div class="text-center-box">
+                                    <p>规格：</p>
+                                    <p>{{infoData.normsNum}}</p>
+                                </div>
+                                <div class="text-right-box">
+                                    <p>存放位置：</p>
+                                    <p>{{infoData.position}}</p>
+                                </div>
+                            </div>
+                            <div class="text-max-box">
+                                <div class="text-left-box">
+                                    <p style="width:96px;">余量：</p>
+                                    <p>{{infoData.surplus}}</p>
+                                </div>
+                                <div class="text-center-box">
+                                    <p>定位状态：</p>
+                                    <p>{{infoData.posiStatus}}</p>
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+
+                    <div class="bottom-max-big-box ">
+                        <p class="title-p">通知记录</p>
+                        <div class="table-max-big-box">
+                            <el-table class="table-box-no-height" style="width: 100%" v-loading="loading" border :data="infoData.warningNoticeLogVoList">
+                                <el-table-column label="通知时间" prop="createTime" width="200"  show-overflow-tooltip>
+                                    <template slot-scope="scope">
+                                        <span>{{ parseTime(scope.row.noticeTime,"{y}-{m}-{d} {h}:{i}") }}</span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="通知方式" prop="noticeType" width="180"  show-overflow-tooltip/>
+                                <el-table-column label="报警级别" prop="warningLevel" width="120" show-overflow-tooltip/>
+                                <el-table-column label="通知人" prop="noticePreson" show-overflow-tooltip/>
+                            </el-table>
+                        </div>
+                    </div>
+                    <div class="bottom-max-big-box" v-if="infoData.noticeStatus !=3  && (infoData.warnType==1 || infoData.warnType==2)">
+                        <p class="title-p">预警处理</p>
+                        <div class="text-max-box" v-if="infoData.noticeStatus != 0">
+                            <div class="text-left-box">
+                                <p>处理方式：</p>
+                                <p>{{infoData.handleType==1?'手动处理':(infoData.handleType==2?'归还操作':(infoData.handleType==3?'出库操作':(infoData.handleType==4?'入库操作':'')))}}</p>
+                            </div>
+                            <div class="text-center-box">
+                                <p>处理人：</p>
+                                <p>{{infoData.handlePerson}}-{{infoData.handlePersonPhone}}</p>
+                            </div>
+                            <div class="text-right-box">
+                                <p>处理时间：</p>
+                                <p>{{infoData.handleTime}}</p>
+                            </div>
+                        </div>
+                        <div class="text-max-big-box" v-if="(infoData.warnType == 1 &&infoData.chemicalWarnType == 1) || infoData.warnType == 2">
+                            <div class="text-box">
+                                <p>处理备注：</p>
+                                <p>{{infoData.handleNotes}}</p>
+                            </div>
+                        </div>
+                        <div class="form-max-box" v-if="infoData.noticeStatus == 0">
+                            <div class="text-max-box">
+                                <div class="text-left-box">
+                                    <p>处理方式：</p>
+                                    <p>手动处理</p>
+                                </div>
+                            </div>
+                            <el-form :model="infoDataForm" ref="form" label-width="0">
+                                <el-form-item label="" prop="name">
+                                    <span style="font-size:16px;">处理备注：</span>
+                                    <el-input v-model="infoDataForm.handleNotes" placeholder="请输入名称" maxLength="70" style="width:1325px;"></el-input>
+                                </el-form-item>
+                            </el-form>
+                            <div class="button-bottom-box">
+                                <p></p>
+                                <p class="page-submit-common-style-button" @click="submitForm">处理</p>
+                                <p></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import {notifyplan,} from "../../api/http"
-import Header from '@/components/header.vue'
-export default {
-  components: {
-    Header
-  },
-  data() {
-    return {
-      type:null,
-      codeData:'',
-
-    }
-  },
-  methods: {
-    back(){
-        this.$router.push('/home')
-    },
-
-
-
-  },
-  mounted() {
-      this.$set(this,'type',this.$route.query.type);
-      this.$set(this,'codeData',this.$route.query.item);
-  },
+    import {notifyplan,} from "../../api/http"
+    import Header from '@/components/header.vue'
 
+    import {
+        systemWarningNoticeDetail,
+        iotCameraGetPlaybackURLs
+    } from "@/api/index";
+    export default {
+        components: {
+            Header
+        },
+        data() {
+            return {
+                type: null,
+                codeData: '',
+                //预警信息
+                loading:false,
+                showType:false,
+                infoData:{
+                },
+                infoDataForm:{
+                    noticeId:'',
+                    handleNotes:"",
+                },
+            }
+        },
+        mounted() {
+            this.$set(this, 'type', this.$route.query.type);
+            this.$set(this, 'codeData', this.$route.query.item);
+            this.$nextTick(()=>{
+                if (this.type == 2 || this.type == 4){
+                    this.initialize();
+                }
+            })
+        },
+        methods: {
+            back() {
+                this.$router.go(-1)
+            },
+            //预案详情
+            initialize(){
+                systemWarningNoticeDetail({id:this.codeData.noticeId}).then(response => {
+                    this.$set(this,'infoData',JSON.parse(JSON.stringify(response.data)));
+                    if (this.infoData.adminInfoList[0]){
+                        let list=[];
+                        this.infoData.adminInfoList.forEach(function(item) {
+                            list.push(item.userName+(item.mobile?'-'+item.mobile:''))
+                        })
+                        this.infoData.adminInfo=list.join(',')
+                    }
+                    if (this.infoData.safeInfoList[0]){
+                        let list=[];
+                        this.infoData.safeInfoList.forEach(function(item) {
+                            list.push(item.userName+(item.mobile?'-'+item.mobile:''))
+                        })
+                        this.infoData.safeInfo=list.join(',')
+                    }
+                    this.$set(this.infoDataForm,'noticeId',this.propsData.noticeId);
+                });
+            },
+        },
 
-}
+    }
 </script>
 <style lang="scss" scoped>
     * {
@@ -61,6 +338,7 @@ export default {
         margin: 0;
         box-sizing: border-box;
     }
+
     .main {
         width: 1920px;
         height: 1080px;
@@ -106,30 +384,30 @@ export default {
                 margin-top: 18px;
             }
         }
-        .main_t{
+        .main_t {
             width: 1852px;
             height: 975px;
             position: absolute;
             left: 34px;
             top: 86px;
             z-index: 200;
-            .main_t_t{
+            .main_t_t {
                 margin: 20px 0 0 18px;
-                >i{
+                > i {
                     font-size: 16px;
                     font-family: Microsoft YaHei;
                     font-weight: bold;
                     color: #FFFFFF;
                     line-height: 16px;
                 }
-                >i:nth-of-type(1){
+                > i:nth-of-type(1) {
 
                 }
-                >i:nth-of-type(2){
+                > i:nth-of-type(2) {
                     color: #1ED0F8;
                 }
             }
-            .title{
+            .title {
                 width: 100%;
                 font-size: 18px;
                 font-family: Source Han Sans CN;
@@ -139,22 +417,22 @@ export default {
                 margin-top: 44px;
                 text-align: center;
             }
-            .main_t_b{
+            .main_t_b {
                 width: 1852px;
                 height: 800px;
                 margin-top: 40px;
-                padding:0 390px;
+                padding: 0 390px;
                 box-sizing: border-box;
                 overflow-y: auto;
-                >p{
+                > p {
                     font-size: 16px;
                     font-family: Source Han Sans CN;
                     font-weight: 400;
                     color: #FFFFFF;
-                    line-height:30px;
-                    text-indent:2em;
+                    line-height: 30px;
+                    text-indent: 2em;
                 }
-                .unit{
+                .unit {
                     font-size: 16px;
                     font-family: Source Han Sans CN;
                     font-weight: 400;
@@ -163,7 +441,7 @@ export default {
                     margin-top: 38px;
                     text-align: right;
                 }
-                .time{
+                .time {
                     font-size: 16px;
                     font-family: Source Han Sans CN;
                     font-weight: 400;
@@ -173,12 +451,349 @@ export default {
                     text-align: right;
                 }
             }
+            .content-box{
+                margin:0 auto;
+                width:1690px;
+                display: flex;
+                flex-direction: column;
+                height:790px;
+                overflow-x: hidden;
+                overflow-y: scroll;
+                .top-max-big-box , .bottom-max-big-box{
+                    padding:25px 80px;
+                    .title-p{
+                        line-height:48px;
+                        font-size:16px;
+                        font-weight: 700;
+                        color:#fff;
+                    }
+                    .text-max-box{
+                        color:#fff;
+                        display: flex;
+                        .text-left-box{
+                            width:390px;
+                            display: flex;
+                            padding:16px 0;
+                            p{
+                                font-size:16px;
+                                line-height:24px;
+                                /*单行省略号*/
+                                display:block;
+                                overflow:hidden;
+                                text-overflow:ellipsis;
+                                white-space:nowrap;
+                            }
+                            p:nth-child(1){
+                                width:80px;
+                                text-align: right;
+                            }
+                            p:nth-child(2){
+                                flex:1;
+                            }
+                        }
+                        .text-center-box{
+                            width:410px;
+                            display: flex;
+                            padding:16px 0;
+                            p{
+                                font-size:16px;
+                                line-height:24px;
+                                /*单行省略号*/
+                                display:block;
+                                overflow:hidden;
+                                text-overflow:ellipsis;
+                                white-space:nowrap;
+                            }
+                            p:nth-child(1){
+                                width:90px;
+                                text-align: right;
+                            }
+                            p:nth-child(2){
+                                flex:1;
+                            }
+                        }
+                        .text-right-box{
+                            width:610px;
+                            display: flex;
+                            padding:16px 0;
+                            p{
+                                font-size:16px;
+                                line-height:24px;
+                                /*单行省略号*/
+                                display:block;
+                                overflow:hidden;
+                                text-overflow:ellipsis;
+                                white-space:nowrap;
+                            }
+                            p:nth-child(1){
+                                width:120px;
+                                text-align: right;
+                            }
+                            p:nth-child(2){
+                                flex:1;
+                            }
+                        }
+                    }
+                    .text-max-big-box{
+                        display: flex;
+                        .text-box{
+                            flex: 1;
+                            display: flex;
+                            padding:16px 0;
+                            color:#fff;
+                            p{
+                                font-size:16px;
+                                line-height:24px;
+                                /*单行省略号*/
+                                display:block;
+                                overflow:hidden;
+                                text-overflow:ellipsis;
+                                white-space:nowrap;
+                            }
+                            p:nth-child(1){
+                                width:80px;
+                                text-align: right;
+                            }
+                            p:nth-child(2){
+                                flex:1;
+                            }
+                        }
+                    }
+                    .img-list-box{
+                        padding-top:12px;
+                        img{
+                            cursor: pointer;
+                            display:inline-block;
+                            width:130px;
+                            height:130px;
+                            margin-right:10px;
+                            margin-bottom:10px;
+                        }
+                    }
+                    .table-max-big-box{
+                        padding:12px 0;
+                        height:260px!important;
+                        display: flex;
+                        flex-direction: column;
+                        overflow: hidden;
+                    }
+                    .button-bottom-box{
+                        display: flex;
+                        p:nth-child(1){
+                            flex:1;
+                        }
+                        p:nth-child(2){
+                            width:100px;
+                        }
+                        p:nth-child(3){
+                            flex:1;
+                        }
+                    }
+                }
+                .top-max-big-box{
+                    position: relative;
+                    .top-position-p{
+                        position: absolute;
+                        top:0;
+                        right:0;
+                        width:100px;
+                        height:40px;
+                        border-bottom-left-radius:20px;
+                        background-color: #FFA200;
+                        color:#fff;
+                        font-size:16px;
+                        text-align: center;
+                        line-height:40px;
+                    }
+                    .position-type{
+                        background-color: #0183FA;
+                    }
+                }
+                .bottom-max-big-box{
+                    border-top:1px solid #F5F5F5;
+                }
+            }
         }
 
     }
 </style>
 <style lang="scss">
-li{list-style:none}
-i,em,b{font-style:normal;font-weight:100;}
-body{margin: 0}
+    li {
+        list-style: none
+    }
+
+    i, em, b {
+        font-style: normal;
+        font-weight: 100;
+    }
+
+    body {
+        margin: 0
+    }
+    .table-max-big-box{
+        .el-table--border{
+            border-bottom:1px solid #ddd!important;
+        }
+        .table-box-no-height{
+            /*border-right:1px solid #DFE6EC;*/
+            /*background-color: #333333;*/
+            //表头
+            th{
+                /*background-color: #f5f5f5;*/
+                .cell{
+                    /*color:#333;*/
+                    font-size:14px;
+                    font-weight:700;
+                    /*text-align: center;*/
+                    text-align: left;
+                }
+            }
+            td{
+                .cell{
+                    padding:0 10px 0 12px;
+                }
+                div{
+                    font-size:14px;
+                    font-weight:500;
+                }
+                //勾选框
+                .el-checkbox{
+                    display: block;
+                    height:22px;
+                    width:14px;
+                    margin: 6px auto;
+                    overflow: hidden;
+                    span{
+                        display: block;
+                        height: 24px;
+                        width: 14px;
+                        overflow: hidden;
+                        span{
+                            height: 14px;
+                            width: 14px;
+                            margin: 0 auto;
+                        }
+                    }
+                }
+            }
+            //默认对齐方向
+            .cell{
+                text-align: left;
+            }
+            //向左对齐方向
+            .is-table-left{
+                .cell{
+                    text-align: left;
+                }
+            }
+            //居中对齐方向
+            .is-table-center{
+                .cell{
+                    text-align: center;
+                }
+            }
+            //向右对齐方向
+            .is-table-right{
+                .cell{
+                    text-align: right;
+                }
+            }
+            .caret-wrapper{
+                height:20px;
+            }
+            .sort-caret.ascending{
+                top:-3px;
+            }
+            .sort-caret.descending{
+                bottom:-1px;
+            }
+            .el-table__header-wrapper{
+                width: calc(100% - 9px);
+                /*border-right:1px solid #F5F5F5;*/
+                height:40px;
+                th, td{
+                    padding:6px 0;
+                }
+            }
+
+            .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+                th {
+                    word-break: break-word;
+                    /*background-color: #f8f8f8;*/
+                    /*color: #515A6E;*/
+                    height: 40px;
+                }
+            }
+            .el-table__header-wrapper th, .el-table__fixed-header-wrapper th{
+                /*color:#333333;*/
+                /*background-color:#F5F5F5;*/
+                line-height:20px;
+            }
+            .el-table__body-wrapper {
+                /*background-color: #FFFFFF;*/
+                flex: 1;
+                overflow-y: scroll!important;
+                th, td{
+                    padding:6px 0;
+                }
+                .el-button [class*="el-icon-"] + span {
+                    margin-left: 1px;
+                }
+            }
+            //表格内switch按钮样式
+            .el-switch{
+                height:26px;
+                line-height: 26px;
+            }
+            .switch .el-switch__label {
+                position: absolute;
+                display: none;
+                /*color: #fff !important;*/
+            }
+            .switch .el-switch__label--right {
+                z-index: 1;
+            }
+            .switch .el-switch__label--right span{
+                margin-left: 10px;
+            }
+            .switch .el-switch__label--left {
+                z-index: 1;
+            }
+            .switch .el-switch__label--left span{
+                margin-left: 24px;
+            }
+            .switch .el-switch__label.is-active {
+                display: block;
+            }
+            .switch.el-switch .el-switch__core,
+            .el-switch .el-switch__label {
+                width: 64px !important;
+                margin: 0;
+                height:26px;
+                line-height: 26px;
+                border-radius:14px;
+            }
+            .el-switch__core:after{
+                top: 4px;
+                left: 4px;
+            }
+            .el-switch.is-checked .el-switch__core::after{
+                margin-left:-20px;
+            }
+        }
+        //表格滚动条样式
+        .el-table__body-wrapper::-webkit-scrollbar{
+            width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+            height: 6px;
+        }
+        .el-table__body-wrapper::-webkit-scrollbar-thumb{
+            border-radius: 5px;
+            background: #D3D7D4;
+        }
+        .el-table__body-wrapper::-webkit-scrollbar-track{
+            -webkit-box-shadow: inset 0 0 5px #072F46;
+            border-radius: 0;
+            background: #072F46;
+        }
+    }
 </style>