Przeglądaj źródła

新增依赖、新增直播流播放功能、修复部分BUG、修复部分字段错误、修改样式

yangxiao 3 lat temu
rodzic
commit
4fae858df8

+ 1 - 0
package.json

@@ -19,6 +19,7 @@
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "html2canvas": "^1.0.0-rc.7",
+    "jquery": "^3.6.0",
     "jspdf": "^2.3.1",
     "stompjs": "^2.3.3",
     "three": "^0.129.0",

+ 4 - 0
public/index.html

@@ -5,6 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="./static/js/videoPlayer/adapter.js"></script>
+    <script src="./static/js/videoPlayer/platform.js"></script>
+    <script src="./static/js/videoPlayer/h5splayer.js"></script>
+    <script src="./static/js/videoPlayer/h5splayerhelper.js"></script>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

Plik diff jest za duży
+ 4917 - 0
public/static/js/videoPlayer/adapter.js


Plik diff jest za duży
+ 2377 - 0
public/static/js/videoPlayer/bootstrap.js


Plik diff jest za duży
+ 7 - 0
public/static/js/videoPlayer/bootstrap.min.js


Plik diff jest za duży
+ 22 - 0
public/static/js/videoPlayer/flowplayer-3.2.13.min.js


Plik diff jest za duży
+ 7 - 0
public/static/js/videoPlayer/flv.min.js


+ 33 - 0
public/static/js/videoPlayer/h5scluster.js

@@ -0,0 +1,33 @@
+function H5SClusterHttpGet(url)
+{
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", url, false );
+    xmlHttp.send( null );
+    return xmlHttp.responseText;
+}
+
+function H5SClusterGetConf(conf)
+{
+    var strStatusUrl =  conf.protocol + '//' + conf.host + conf.rootpath +
+                'api/v1/cluster/GetClusterStatus';
+    console.log(strStatusUrl);        
+    var strStatus = H5SClusterHttpGet(strStatusUrl);
+    console.log(strStatus);
+    var strStatusJson = JSON.parse(strStatus);
+    if (strStatusJson["bEnable"] == true)
+    {
+        console.log("Cluster enable");
+        var strProtocol = "http";
+        if (conf.protocol == "https:")
+        {
+            strProtocol = "https";
+        }
+        var strAddrUrl =  conf.protocol + '//' + conf.host + conf.rootpath +
+                    'api/v1/cluster/GetServiceAddr?service=' + strProtocol + '&token=' + conf.token;
+        var strAddr = H5SClusterHttpGet(strAddrUrl);
+        console.log(strAddr);
+        var strAddrJson = JSON.parse(strAddr);
+        conf.host = strAddrJson["strAddr"] + ':' + strAddrJson["nPort"];
+        console.log("Cluster get play host", conf.host);
+    }
+}

+ 184 - 0
public/static/js/videoPlayer/h5sevent.js

@@ -0,0 +1,184 @@
+/** 
+ *=================Event API
+ *
+ */
+/** 
+ * Interface with h5s Event API
+ * @constructor
+ * @param 
+ var conf = {
+	protocol: window.location.protocol, // {string} - 'http:' or 'https:'
+	host: window.location.host, //{string} - 'localhost:8080'
+	rootpath:window.location.pathname, // {string} - path of the app running
+	callback: EventCB, //{function}(event(string), userdata(object)) 
+	userdata: user data // user data
+	session:'c1782caf-b670-42d8-ba90-2244d0b0ee83', //{string} - session got from login
+	consolelog: 'true' // 'true' or 'false' enable/disable console.log
+};
+*/
+
+function H5sEvent(conf)
+{
+	this.wsSocket;
+	this.keepaliveTimerId;
+	this.bNeedReconnect = false;
+	this.bDisConnected = false;
+	
+	this._debug = true;	
+	if (conf.consolelog !== undefined)
+	{
+		if (conf.consolelog === 'false')
+		{
+			this._debug = false;	
+		}
+	}	
+	
+
+	this._conf = conf;	
+}
+
+H5sEvent.prototype.ReconnectFunction = function() 
+{
+	//if(this._debug === true) console.log('Try Reconnect...', this.bNeedReconnect);
+	if (this.bNeedReconnect === true)
+	{
+		if(this._debug === true) console.log('Reconnect...');
+		
+		this.setupWebSocket(this._token);
+		this.bNeedReconnect = false;
+	}
+	//if(this._debug === true) console.log('Try Reconnect...', this.bNeedReconnect);
+}
+	
+	
+H5sEvent.prototype.H5SWebSocketClient = function(h5spath) 
+{
+	var socket;
+	if(this._debug === true) console.log("H5SWebSocketClient");
+	try {
+		//alert(this._conf.protocol);
+		if (this._conf.protocol == "http:") 
+		{
+			if (typeof MozWebSocket != "undefined")
+			{
+				socket = new MozWebSocket('ws://' + this._conf.host  +  h5spath);
+			}else
+			{
+				socket = new WebSocket('ws://' + this._conf.host +  h5spath);
+			}
+		}
+		if (this._conf.protocol == "https:")
+		{	
+			//alert(this._conf.host);
+			if(this._debug === true) console.log(this._conf.host);
+			if (typeof MozWebSocket != "undefined")
+			{
+				socket = new MozWebSocket('wss://' + this._conf.host +  h5spath);
+			}else
+			{
+				socket = new WebSocket('wss://' + this._conf.host + h5spath);
+			}				
+		}
+		if(this._debug === true) console.log(this._conf.host);
+	} catch (e) {
+		alert('error');
+		return;
+	}
+	return socket;
+}
+
+H5sEvent.prototype.keepaliveTimer = function()	
+{
+	try {
+		var j = {};
+		j.type = "keepalive";
+		this.wsSocket.send(JSON.stringify(j));
+	} catch (e) {
+	  if(this._debug === true) console.log(e);
+	}
+}
+
+
+H5sEvent.prototype.onWebSocketData = function(msg)	
+{
+	
+	if (this._conf.callback != undefined)
+	{
+		this._conf.callback(msg.data, this._conf.userdata);
+	}
+} 
+	
+
+H5sEvent.prototype.setupWebSocket = function(token)	
+{	
+	var h5spath = "api/v1/h5seventapi";
+
+	h5spath = this._conf.rootpath + h5spath + '?session=' + this._conf.session;
+	
+	if(this._debug === true) console.log(h5spath);
+	
+	this.wsSocket = this.H5SWebSocketClient(h5spath);
+	if(this._debug === true) console.log("setupWebSocket", this.wsSocket);
+	this.wsSocket.binaryType = 'arraybuffer';
+	this.wsSocket.h5 = this;
+	this.wsSocket.onmessage = this.onWebSocketData.bind(this);
+	
+	this.wsSocket.onopen = function()
+	{
+		if(this.h5._debug === true) console.log("wsSocket.onopen", this.h5);
+		
+		this.h5.keepaliveTimerId = setInterval(this.h5.keepaliveTimer.bind(this.h5), 1000);
+
+	}
+	
+	this.wsSocket.onclose = function () {
+		if(this.h5._debug === true) console.log("wsSocket.onclose", this.h5);
+		if (this.h5.bDisConnected === true)
+		{
+			if(this.h5._debug === true) console.log("wsSocket.onclose disconnect");
+		}else
+		{
+			this.h5.bNeedReconnect = true;
+		}
+		
+		this.h5.CleanupWebSocket(this.h5);
+	}
+
+}
+
+
+H5sEvent.prototype.CleanupWebSocket = function(h5sPlayer)
+{
+	if(h5sPlayer._debug === true) console.log('CleanupWebSocket', h5sPlayer);
+	clearInterval(h5sPlayer.keepaliveTimerId);
+	h5sPlayer.emptyBuffCnt = 0;
+	h5sPlayer.lastBuffTime = 0;
+	h5sPlayer.buffTimeSameCnt = 0;
+}
+
+
+/** 
+ * Connect a websocket Stream to videoElement 
+*/
+H5sEvent.prototype.connect = function() {
+	/* start connect to server */
+	this.setupWebSocket(this._token);
+	this.reconnectTimerId = setInterval(this.ReconnectFunction.bind(this), 3000);
+}
+
+
+/** 
+ * Disconnect a websocket Stream and clear videoElement source
+*/
+H5sEvent.prototype.disconnect = function() {
+	if(this._debug === true) console.log("disconnect", this);
+	this.bDisConnected = true;
+	clearInterval(this.reconnectTimerId);
+	
+	if (this.wsSocket != null)
+	{
+		this.wsSocket.close();
+		this.wsSocket = null;
+	}
+	if(this._debug === true) console.log("disconnect", this);
+} 

+ 278 - 0
public/static/js/videoPlayer/h5spbcontrol.js

@@ -0,0 +1,278 @@
+/** 
+ * Interface with h5s websocket pb ctonrol API
+ * @constructor
+ * @param 
+ var pbconf1 = {
+	begintime: '2019-03-23T120101+08',//{string} begintime 0 for fileplayback
+	endtime: '2019-03-23T150101+08',//{string} endtime 0 for fileplayback
+	serverpb: 'true', //'true' or 'false' playback from h5stream record, default false 
+	filename: 'token1.mp4', // file name need to playback (begintime == 0 & endtime == 0 and serverpb is true)
+	callback: PlaybackCB, //{function}(event(string), userdata(object)) 
+	userdata:  user data // user data
+};
+ 
+ var conf = {
+	protocol: window.location.protocol, // {string} - 'http:' or 'https:'
+	host: window.location.host, //{string} - 'localhost:8080'
+	rootpath:window.location.pathname, // {string} - path of the app running
+	token:'token1', // {string} - token of stream
+	streamprofile: 'main', // {string} - stream profile, main/sub or other predefine transcoding profile
+	pbconf: pbconf1, //This is optional, if no pbconf, this will be live.
+	session:'c1782caf-b670-42d8-ba90-2244d0b0ee83', //{string} - session got from login
+	consolelog: 'true' // 'true' or 'false' enable/disable console.log
+};                     
+*/
+
+function H5sPbControl(conf)
+{
+	this.wsSocket;
+	this.keepaliveTimerId;
+	this.bDisConnected = false;
+	
+	this._debug = true;	
+	if (conf.consolelog !== undefined)
+	{
+		if (conf.consolelog === 'false')
+		{
+			this._debug = false;	
+		}
+	}	
+	
+	this._conf = conf;
+	if(this._debug === true) console.log("[PBCONTROL] Websocket Conf:", conf);
+	
+	this._pbconf = conf.pbconf;
+	
+	this._token = conf.token;
+}
+	
+H5sPbControl.prototype.H5SWebSocketClient = function(h5spath) 
+{
+	var socket;
+	if(this._debug === true) console.log("[PBCONTROL] H5SWebSocketClient");
+	try {
+		//alert(this._conf.protocol);
+		if (this._conf.protocol == "http:") 
+		{
+			if (typeof MozWebSocket != "undefined")
+			{
+				socket = new MozWebSocket('ws://' + this._conf.host  +  h5spath);
+			}else
+			{
+				socket = new WebSocket('ws://' + this._conf.host +  h5spath);
+			}
+		}
+		if (this._conf.protocol == "https:")
+		{	
+			//alert(this._conf.host);
+			if(this._debug === true) console.log(this._conf.host);
+			if (typeof MozWebSocket != "undefined")
+			{
+				socket = new MozWebSocket('wss://' + this._conf.host +  h5spath);
+			}else
+			{
+				socket = new WebSocket('wss://' + this._conf.host + h5spath);
+			}				
+		}
+		if(this._debug === true) console.log(this._conf.host);
+	} catch (e) {
+		alert('error');
+		return;
+	}
+	return socket;
+}
+
+H5sPbControl.prototype.keepaliveTimer = function()	
+{
+	try {
+		var j = {};
+		j.cmd = "H5_KEEPALIVE";
+		this.wsSocket.send(JSON.stringify(j));
+	} catch (e) {
+	  if(this._debug === true) console.log(e);
+	}
+}
+
+H5sPbControl.prototype.onWebSocketData = function(msg)	
+{	
+	if(typeof msg.data === 'string')
+	{
+		if(this._debug === true) console.log("[PBCONTROL] string");
+		if (this._pbconf != undefined && this._pbconf.callback != undefined)
+		{
+			this._pbconf.callback(msg.data, this._pbconf.userdata);
+		}
+		return;
+	}
+	
+	if (this.bDisConnected === true)
+	{
+		return;
+	}
+} 
+
+H5sPbControl.prototype.setupWebSocket = function(token)	
+{
+	var h5spath = "api/v1/h5spbcontrolapi";
+	var streamprofile = 'main';
+	if (this._conf.streamprofile === undefined)
+	{}else 
+	{
+		streamprofile = this._conf.streamprofile;
+	}
+	
+	if (this._pbconf === undefined)
+	{
+		h5spath = this._conf.rootpath + h5spath + "?token=" + token 
+						+ "&profile=" + streamprofile + '&session=' + this._conf.session;
+	}else 
+	{
+		var serverpb = 'false';
+		var filename = 'fake';
+		if (this._pbconf.serverpb === undefined)
+		{}else 
+		{
+			serverpb = this._pbconf.serverpb;
+		}
+
+		if (this._pbconf.filename === undefined)
+		{}else 
+		{
+			filename = this._pbconf.filename;
+		}		
+		
+		h5spath = this._conf.rootpath + h5spath + "?token=" + token 
+								+ "&playback=true"
+								+ '&profile=' + streamprofile
+								+ "&serverpb=" + serverpb
+								+ "&begintime=" + encodeURIComponent(this._pbconf.begintime)//this._pbconf.begintime
+								+ "&endtime=" + encodeURIComponent(this._pbconf.endtime)//this._pbconf.endtime
+								+ "&filename=" + filename//file name
+								+ '&session=' + this._conf.session;
+	}				+ '&session=' + this._conf.session;
+
+	
+	
+	if(this._debug === true) console.log(h5spath);
+	
+	this.wsSocket = this.H5SWebSocketClient(h5spath);
+	if(this._debug === true) console.log("[PBCONTROL] setupWebSocket", this.wsSocket);
+	this.wsSocket.binaryType = 'arraybuffer';
+	this.wsSocket.h5 = this;
+	this.wsSocket.onmessage = this.onWebSocketData.bind(this);
+	
+	this.wsSocket.onopen = function()
+	{
+		if(this.h5._debug === true) console.log("[PBCONTROL] wsSocket.onopen", this.h5);
+		this.h5.keepaliveTimerId = setInterval(this.h5.keepaliveTimer.bind(this.h5), 1000);
+
+		var j = {};
+		j.type = "H5S_WS_CONNECTED";
+		if (this.h5._pbconf != undefined && this.h5._pbconf.callback != undefined)
+		{
+			this.h5._pbconf.callback(JSON.stringify(j), this.h5._pbconf.userdata);
+		}
+	}
+	
+	this.wsSocket.onclose = function () {
+		if(this.h5._debug === true) console.log("[PBCONTROL] wsSocket.onclose", this.h5);
+		
+		var j = {};
+		j.type = "H5S_WS_DISCONNECTED";
+		if (this.h5._pbconf != undefined && this.h5._pbconf.callback != undefined)
+		{
+			this.h5._pbconf.callback(JSON.stringify(j), this.h5._pbconf.userdata);
+		}
+		
+		this.h5.CleanupWebSocket(this.h5);
+	}
+
+}
+	
+H5sPbControl.prototype.CleanupWebSocket = function(h5sPlayer)
+{
+	if(h5sPlayer._debug === true) console.log('[PBCONTROL] CleanupWebSocket', h5sPlayer);
+	clearInterval(h5sPlayer.keepaliveTimerId);
+}
+
+
+/** 
+ * Connect a websocket Stream to videoElement 
+*/
+H5sPbControl.prototype.connect = function() {
+	/* start connect to server */
+	this.setupWebSocket(this._token);
+}
+
+
+/** 
+ * Disconnect a websocket Stream and clear videoElement source
+*/
+H5sPbControl.prototype.disconnect = function() {
+	if(this._debug === true) console.log("[PBCONTROL] disconnect", this);
+	this.bDisConnected = true;
+	clearInterval(this.reconnectTimerId);
+	
+	try {
+		if (this.wsSocket != null)
+		{
+			this.wsSocket.close();
+			this.wsSocket = null;
+		}
+	}
+	catch (e){}
+	
+	if(this._debug === true) console.log("[PBCONTROL] disconnect", this);
+}
+
+H5sPbControl.prototype.start = function(){
+	try {
+		var j = {};
+		j.cmd = "H5_START";
+		this.wsSocket.send(JSON.stringify(j));
+	} catch (e) {
+	  if(this._debug === true) console.log(e);
+	}
+}
+
+H5sPbControl.prototype.pause = function(){
+	try {
+		var j = {};
+		j.cmd = "H5_PAUSE";
+		this.wsSocket.send(JSON.stringify(j));
+	} catch (e) {
+	  if(this._debug === true) console.log(e);
+	}
+}
+
+H5sPbControl.prototype.resume = function(){
+	try {
+		var j = {};
+		j.cmd = "H5_RESUME";
+		this.wsSocket.send(JSON.stringify(j));
+	} catch (e) {
+	  if(this._debug === true) console.log(e);
+	}
+}
+
+H5sPbControl.prototype.seek = function(nTime){
+	try {
+		var j = {};
+		j.cmd = "H5_SEEK";
+		j.nSeekTime = nTime;
+		this.wsSocket.send(JSON.stringify(j));
+	} catch (e) {
+	  if(this._debug === true) console.log(e);
+	}
+}
+
+H5sPbControl.prototype.speed = function(nSpeed){
+	try {
+		var j = {};
+		j.cmd = "H5_SPEED";
+		j.nSpeed = nSpeed;
+		this.wsSocket.send(JSON.stringify(j));
+	} catch (e) {
+	  if(this._debug === true) console.log(e);
+	}
+}

Plik diff jest za duży
+ 1 - 0
public/static/js/videoPlayer/h5splayer.js


+ 110 - 0
public/static/js/videoPlayer/h5splayerhelper.js

@@ -0,0 +1,110 @@
+/** 
+ * Check platform and OS
+	(platform.name); // 'Safari'
+	(platform.version); // '11.1'
+	(platform.product); // 'iPad'
+	(platform.manufacturer); // 'Apple'
+	(platform.layout); // 'WebKit'
+	(platform.os.family); // 'iOS'
+	(platform.description);// 'Safari 11.1 on Apple iPad (iOS 11.0)'
+ 
+*/
+function H5siOS() {
+    var browserName=platform.os.family;  
+    if(/ios/i.test(browserName) ){  
+        return true;  
+    } 
+	return false;
+}
+
+function H5sChromeBrowser(){  
+    var browserName=platform.name;  
+    if(/chrome/i.test(browserName) ){  
+        return true;  
+    }  
+    return false;
+}  
+
+
+function H5sEdgeBrowser(){  
+    var browserName=platform.name;  
+    if(/edge/i.test(browserName) ){  
+        return true;  
+    }  
+    return false;
+} 
+
+function H5sSafariBrowser(){  
+    var browserName=platform.name;  
+	console.log(browserName);
+    if(/safari/i.test(browserName) ){  
+        return true;  
+    }  
+    return false;
+}
+
+function H5sAndriodPlatform(){  
+    var browserName=platform.os.family;  
+    if(/android/i.test(browserName) ){  
+        return true;  
+    }  
+    return false;
+}
+
+/** 
+ *=================H5Player Create
+ *
+ */
+ 
+function H5sPlayerCreate(conf) {
+	var player;
+
+	if (H5siOS())
+	{
+        player = new H5sPlayerRTC(conf);
+	}else{
+        player = new H5sPlayerWS(conf);
+	}
+	return player;
+}
+
+
+function GetURLParameter(sParam)
+{
+    var sPageURL = window.location.search.substring(1);
+    var sURLVariables = sPageURL.split('&');
+    for (var i = 0; i < sURLVariables.length; i++) 
+    {
+        var sParameterName = sURLVariables[i].split('=');
+        if (sParameterName[0] == sParam) 
+        {
+            return sParameterName[1];
+        }
+    }
+}
+
+
+function H5sSnapshot(vid, fileName)
+{
+	var video = vid;
+	var w = video.videoWidth;//video.videoWidth * scaleFactor;
+	var h = video.videoHeight;//video.videoHeight * scaleFactor;
+	var canvas = document.createElement('canvas');
+	canvas.width = w;
+	canvas.height = h;
+	var ctx = canvas.getContext('2d');
+	ctx.drawImage(video, 0, 0, w, h);
+	var MIME_TYPE = "image/png";
+	var imgURL = canvas.toDataURL(MIME_TYPE);
+
+	var dlLink = document.createElement('a');
+	dlLink.download = fileName;
+	dlLink.href = imgURL;
+	dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
+
+	document.body.appendChild(dlLink);
+	dlLink.click();
+	document.body.removeChild(dlLink);           
+}
+ 
+

+ 214 - 0
public/static/js/videoPlayer/jQuery.md5.js

@@ -0,0 +1,214 @@
+	/**
+	 * jQuery MD5 hash algorithm function
+	 * 
+	 * 	<code>
+	 * 		Calculate the md5 hash of a String 
+	 * 		String $.md5 ( String str )
+	 * 	</code>
+	 * 
+	 * Calculates the MD5 hash of str using the » RSA Data Security, Inc. MD5 Message-Digest Algorithm, and returns that hash. 
+	 * MD5 (Message-Digest algorithm 5) is a widely-used cryptographic hash function with a 128-bit hash value. MD5 has been employed in a wide variety of security applications, and is also commonly used to check the integrity of data. The generated hash is also non-reversable. Data cannot be retrieved from the message digest, the digest uniquely identifies the data.
+	 * MD5 was developed by Professor Ronald L. Rivest in 1994. Its 128 bit (16 byte) message digest makes it a faster implementation than SHA-1.
+	 * This script is used to process a variable length message into a fixed-length output of 128 bits using the MD5 algorithm. It is fully compatible with UTF-8 encoding. It is very useful when u want to transfer encrypted passwords over the internet. If you plan using UTF-8 encoding in your project don't forget to set the page encoding to UTF-8 (Content-Type meta tag). 
+	 * This function orginally get from the WebToolkit and rewrite for using as the jQuery plugin.
+	 * 
+	 * Example
+	 * 	Code
+	 * 		<code>
+	 * 			$.md5("I'm Persian."); 
+	 * 		</code>
+	 * 	Result
+	 * 		<code>
+	 * 			"b8c901d0f02223f9761016cfff9d68df"
+	 * 		</code>
+	 * 
+	 * @alias Muhammad Hussein Fattahizadeh < muhammad [AT] semnanweb [DOT] com >
+	 * @link http://www.semnanweb.com/jquery-plugin/md5.html
+	 * @see http://www.webtoolkit.info/
+	 * @license http://www.gnu.org/licenses/gpl.html [GNU General Public License]
+	 * @param {jQuery} {md5:function(string))
+	 * @return string
+	 */
+	(function($){
+		var rotateLeft = function(lValue, iShiftBits) {
+			return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
+		}
+		var addUnsigned = function(lX, lY) {
+			var lX4, lY4, lX8, lY8, lResult;
+			lX8 = (lX & 0x80000000);
+			lY8 = (lY & 0x80000000);
+			lX4 = (lX & 0x40000000);
+			lY4 = (lY & 0x40000000);
+			lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
+			if (lX4 & lY4) return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
+			if (lX4 | lY4) {
+				if (lResult & 0x40000000) return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
+				else return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
+			} else {
+				return (lResult ^ lX8 ^ lY8);
+			}
+		}
+		var F = function(x, y, z) {
+			return (x & y) | ((~ x) & z);
+		}
+		var G = function(x, y, z) {
+			return (x & z) | (y & (~ z));
+		}
+		var H = function(x, y, z) {
+			return (x ^ y ^ z);
+		}
+		var I = function(x, y, z) {
+			return (y ^ (x | (~ z)));
+		}
+		var FF = function(a, b, c, d, x, s, ac) {
+			a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac));
+			return addUnsigned(rotateLeft(a, s), b);
+		};
+		var GG = function(a, b, c, d, x, s, ac) {
+			a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac));
+			return addUnsigned(rotateLeft(a, s), b);
+		};
+		var HH = function(a, b, c, d, x, s, ac) {
+			a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac));
+			return addUnsigned(rotateLeft(a, s), b);
+		};
+		var II = function(a, b, c, d, x, s, ac) {
+			a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac));
+			return addUnsigned(rotateLeft(a, s), b);
+		};
+		var convertToWordArray = function(string) {
+			var lWordCount;
+			var lMessageLength = string.length;
+			var lNumberOfWordsTempOne = lMessageLength + 8;
+			var lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64;
+			var lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16;
+			var lWordArray = Array(lNumberOfWords - 1);
+			var lBytePosition = 0;
+			var lByteCount = 0;
+			while (lByteCount < lMessageLength) {
+				lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+				lBytePosition = (lByteCount % 4) * 8;
+				lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
+				lByteCount++;
+			}
+			lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+			lBytePosition = (lByteCount % 4) * 8;
+			lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
+			lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
+			lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
+			return lWordArray;
+		};
+		var wordToHex = function(lValue) {
+			var WordToHexValue = "", WordToHexValueTemp = "", lByte, lCount;
+			for (lCount = 0; lCount <= 3; lCount++) {
+				lByte = (lValue >>> (lCount * 8)) & 255;
+				WordToHexValueTemp = "0" + lByte.toString(16);
+				WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2);
+			}
+			return WordToHexValue;
+		};
+		var uTF8Encode = function(string) {
+			string = string.replace(/\x0d\x0a/g, "\x0a");
+			var output = "";
+			for (var n = 0; n < string.length; n++) {
+				var c = string.charCodeAt(n);
+				if (c < 128) {
+					output += String.fromCharCode(c);
+				} else if ((c > 127) && (c < 2048)) {
+					output += String.fromCharCode((c >> 6) | 192);
+					output += String.fromCharCode((c & 63) | 128);
+				} else {
+					output += String.fromCharCode((c >> 12) | 224);
+					output += String.fromCharCode(((c >> 6) & 63) | 128);
+					output += String.fromCharCode((c & 63) | 128);
+				}
+			}
+			return output;
+		};
+		$.extend({
+			md5: function(string) {
+				var x = Array();
+				var k, AA, BB, CC, DD, a, b, c, d;
+				var S11=7, S12=12, S13=17, S14=22;
+				var S21=5, S22=9 , S23=14, S24=20;
+				var S31=4, S32=11, S33=16, S34=23;
+				var S41=6, S42=10, S43=15, S44=21;
+				string = uTF8Encode(string);
+				x = convertToWordArray(string);
+				a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
+				for (k = 0; k < x.length; k += 16) {
+					AA = a; BB = b; CC = c; DD = d;
+					a = FF(a, b, c, d, x[k+0],  S11, 0xD76AA478);
+					d = FF(d, a, b, c, x[k+1],  S12, 0xE8C7B756);
+					c = FF(c, d, a, b, x[k+2],  S13, 0x242070DB);
+					b = FF(b, c, d, a, x[k+3],  S14, 0xC1BDCEEE);
+					a = FF(a, b, c, d, x[k+4],  S11, 0xF57C0FAF);
+					d = FF(d, a, b, c, x[k+5],  S12, 0x4787C62A);
+					c = FF(c, d, a, b, x[k+6],  S13, 0xA8304613);
+					b = FF(b, c, d, a, x[k+7],  S14, 0xFD469501);
+					a = FF(a, b, c, d, x[k+8],  S11, 0x698098D8);
+					d = FF(d, a, b, c, x[k+9],  S12, 0x8B44F7AF);
+					c = FF(c, d, a, b, x[k+10], S13, 0xFFFF5BB1);
+					b = FF(b, c, d, a, x[k+11], S14, 0x895CD7BE);
+					a = FF(a, b, c, d, x[k+12], S11, 0x6B901122);
+					d = FF(d, a, b, c, x[k+13], S12, 0xFD987193);
+					c = FF(c, d, a, b, x[k+14], S13, 0xA679438E);
+					b = FF(b, c, d, a, x[k+15], S14, 0x49B40821);
+					a = GG(a, b, c, d, x[k+1],  S21, 0xF61E2562);
+					d = GG(d, a, b, c, x[k+6],  S22, 0xC040B340);
+					c = GG(c, d, a, b, x[k+11], S23, 0x265E5A51);
+					b = GG(b, c, d, a, x[k+0],  S24, 0xE9B6C7AA);
+					a = GG(a, b, c, d, x[k+5],  S21, 0xD62F105D);
+					d = GG(d, a, b, c, x[k+10], S22, 0x2441453);
+					c = GG(c, d, a, b, x[k+15], S23, 0xD8A1E681);
+					b = GG(b, c, d, a, x[k+4],  S24, 0xE7D3FBC8);
+					a = GG(a, b, c, d, x[k+9],  S21, 0x21E1CDE6);
+					d = GG(d, a, b, c, x[k+14], S22, 0xC33707D6);
+					c = GG(c, d, a, b, x[k+3],  S23, 0xF4D50D87);
+					b = GG(b, c, d, a, x[k+8],  S24, 0x455A14ED);
+					a = GG(a, b, c, d, x[k+13], S21, 0xA9E3E905);
+					d = GG(d, a, b, c, x[k+2],  S22, 0xFCEFA3F8);
+					c = GG(c, d, a, b, x[k+7],  S23, 0x676F02D9);
+					b = GG(b, c, d, a, x[k+12], S24, 0x8D2A4C8A);
+					a = HH(a, b, c, d, x[k+5],  S31, 0xFFFA3942);
+					d = HH(d, a, b, c, x[k+8],  S32, 0x8771F681);
+					c = HH(c, d, a, b, x[k+11], S33, 0x6D9D6122);
+					b = HH(b, c, d, a, x[k+14], S34, 0xFDE5380C);
+					a = HH(a, b, c, d, x[k+1],  S31, 0xA4BEEA44);
+					d = HH(d, a, b, c, x[k+4],  S32, 0x4BDECFA9);
+					c = HH(c, d, a, b, x[k+7],  S33, 0xF6BB4B60);
+					b = HH(b, c, d, a, x[k+10], S34, 0xBEBFBC70);
+					a = HH(a, b, c, d, x[k+13], S31, 0x289B7EC6);
+					d = HH(d, a, b, c, x[k+0],  S32, 0xEAA127FA);
+					c = HH(c, d, a, b, x[k+3],  S33, 0xD4EF3085);
+					b = HH(b, c, d, a, x[k+6],  S34, 0x4881D05);
+					a = HH(a, b, c, d, x[k+9],  S31, 0xD9D4D039);
+					d = HH(d, a, b, c, x[k+12], S32, 0xE6DB99E5);
+					c = HH(c, d, a, b, x[k+15], S33, 0x1FA27CF8);
+					b = HH(b, c, d, a, x[k+2],  S34, 0xC4AC5665);
+					a = II(a, b, c, d, x[k+0],  S41, 0xF4292244);
+					d = II(d, a, b, c, x[k+7],  S42, 0x432AFF97);
+					c = II(c, d, a, b, x[k+14], S43, 0xAB9423A7);
+					b = II(b, c, d, a, x[k+5],  S44, 0xFC93A039);
+					a = II(a, b, c, d, x[k+12], S41, 0x655B59C3);
+					d = II(d, a, b, c, x[k+3],  S42, 0x8F0CCC92);
+					c = II(c, d, a, b, x[k+10], S43, 0xFFEFF47D);
+					b = II(b, c, d, a, x[k+1],  S44, 0x85845DD1);
+					a = II(a, b, c, d, x[k+8],  S41, 0x6FA87E4F);
+					d = II(d, a, b, c, x[k+15], S42, 0xFE2CE6E0);
+					c = II(c, d, a, b, x[k+6],  S43, 0xA3014314);
+					b = II(b, c, d, a, x[k+13], S44, 0x4E0811A1);
+					a = II(a, b, c, d, x[k+4],  S41, 0xF7537E82);
+					d = II(d, a, b, c, x[k+11], S42, 0xBD3AF235);
+					c = II(c, d, a, b, x[k+2],  S43, 0x2AD7D2BB);
+					b = II(b, c, d, a, x[k+9],  S44, 0xEB86D391);
+					a = addUnsigned(a, AA);
+					b = addUnsigned(b, BB);
+					c = addUnsigned(c, CC);
+					d = addUnsigned(d, DD);
+				}
+				var tempValue = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);
+				return tempValue.toLowerCase();
+			}
+		});
+	})(jQuery);

Plik diff jest za duży
+ 10220 - 0
public/static/js/videoPlayer/jquery-3.1.1.js


Plik diff jest za duży
+ 1 - 0
public/static/js/videoPlayer/linkplayer.js


Plik diff jest za duży
+ 1217 - 0
public/static/js/videoPlayer/platform.js


Plik diff jest za duży
+ 26804 - 0
public/static/js/videoPlayer/video.js


+ 0 - 2
src/views/HealthControl/HealthTab4.vue

@@ -163,7 +163,6 @@ export default {
     },
     // 消缺跟踪
     onClickTrack(row){
-      console.warn('onClickTrack');
       this.requestTrack(row);
       
     },
@@ -241,7 +240,6 @@ export default {
         success(res) {
           if (res.code == 200) {
             that.trackDate = res.data
-            console.warn(that.trackDate);
             that.dialogVisible = true
           }
         },

+ 156 - 73
src/views/HealthControl/infotrack2.vue

@@ -44,7 +44,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="推荐理由:">
-                <el-input type="textarea" :rows="3" v-model="form.description" placeholder="推荐理由" readonly></el-input>
+                <el-input type="textarea" resize="none" :rows="3" v-model="form.description" placeholder="推荐理由"
+                  readonly></el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -75,14 +76,15 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="排查方法:">
-                <el-input type="textarea" :rows="3" v-model="form.gzpc" placeholder="排查方法" readonly></el-input>
+                <el-input type="textarea" resize="none" :rows="3" v-model="form.gzpc" placeholder="排查方法" readonly></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
               <el-form-item label="处理方法:">
-                <el-input type="textarea" :rows="3" v-model="form.repairedcomment" placeholder="处理方法" readonly></el-input>
+                <el-input type="textarea" resize="none" :rows="3" v-model="form.repairedcomment" placeholder="处理方法"
+                  readonly></el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -113,7 +115,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="验收意见:">
-                <el-input type="textarea" :rows="3" v-model="form.checkdeptopinion" placeholder="验收意见" readonly></el-input>
+                <el-input type="textarea" resize="none" :rows="3" v-model="form.checkdeptopinion" placeholder="验收意见"
+                  readonly></el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -122,52 +125,44 @@
     </div>
     <div class="evaluate">
       <div class="white">评价</div>
-      <div class="evaluate-item">
+      <div class="evaluate-item" :class="(form.rwfpsc > form.rwfppjsc ? ' warColor' : '')">
         <div class="evaluate-label">任务分配时长</div>
-        <el-input-number class="input-number" v-model="form.rwfpsc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.rwfpsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
       <div class="evaluate-item">
         <div class="evaluate-label">任务分配平均时长</div>
-        <el-input-number class="input-number" v-model="form.rwfppjsc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.rwfppjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
-      <div class="evaluate-item">
+      <div class="evaluate-item" :class="(form.ddxcsc > form.ddxcpjsc ? ' warColor' : '')">
         <div class="evaluate-label">到达现场时长</div>
-        <el-input-number class="input-number" v-model="form.ddxcsc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.ddxcsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
       <div class="evaluate-item">
         <div class="evaluate-label">到达现场平均时长</div>
-        <el-input-number class="input-number" v-model="form.ddxcpjsc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.ddxcpjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
-      <div class="evaluate-item">
+      <div class="evaluate-item" :class="(form.qxclsc > form.qxclpjsc ? ' warColor' : '')">
         <div class="evaluate-label">缺陷处理时长</div>
-        <el-input-number class="input-number" v-model="form.qxclsc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.qxclsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
       <div class="evaluate-item">
         <div class="evaluate-label">缺陷处理平均时长</div>
-        <el-input-number class="input-number" v-model="form.qxclpjsc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.qxclpjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
-      <div class="evaluate-item">
+      <div class="evaluate-item" :class="(form.yssc > form.yspjsc ? ' warColor' : '')">
         <div class="evaluate-label">验收时长</div>
-        <el-input-number class="input-number" v-model="form.yssc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.yssc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
       <div class="evaluate-item">
         <div class="evaluate-label">验收平均时长</div>
-        <el-input-number class="input-number" v-model="form.yspjsc" :controls="false" controls-position="right" :min="0"
-          :max="1000" readonly></el-input-number>
+        <el-input v-model="form.yspjsc" style="width: 62px;text-align: center;" placeholder="" readonly></el-input>
         <div class="evaluate-unit">min</div>
       </div>
     </div>
@@ -184,7 +179,7 @@
     <defect-elimination-tracking ref="det" :show="false" :formdata="formdata"></defect-elimination-tracking>
     <div class="dialog-box">
       <el-dialog title="消缺历史" v-model="dialogVisible" width="1200px" height='800px' custom-class="modal"
-        :close-on-click-modal="false" :before-close="handleClose">
+        :close-on-click-modal="false">
         <div class="diamain">
           <div class="left">
             <el-tree :data="data" :props="defaultProps" node-key="id" :default-expand-all="true" custom-class="modal"
@@ -198,6 +193,10 @@
         </div>
       </el-dialog>
     </div>
+    <el-dialog title="查看监控视频" v-model="videoBoxShow" width="80%" height='800px' custom-class="modal"
+      :close-on-click-modal="true">
+      <video class="videoPlayer" id="videoPlayer" muted autoplay webkit-playsinline playsinline></video>
+    </el-dialog>
   </div>
 </template>
 
@@ -205,6 +204,7 @@
 import ComTable from "@com/coms/table/table.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import DefectEliminationTracking from "../HealthControl/defect-elimination-tracking.vue"; //手环监控
+import $ from 'jquery';
 export default {
   components: {
     SvgIcon, ComTable,
@@ -215,6 +215,7 @@ export default {
   },
   data () {
     return {
+      videoBoxShow: false,
       location: '',
       tableData: {
         column: [
@@ -359,57 +360,55 @@ export default {
         gzpc: null,
         gzjx: null,
         prodtdepttime: null,
-        checkdeptopinion: null,
-        rwfpsc: 0.0,
-        rwfppjsc: 1066.0,
-        ddxcsc: 0.0,
-        ddxcpjsc: 0.0,
-        qxclsc: 0.0,
-        qxclpjsc: 0.0,
-        yssc: 0.0,
-        yspjsc: 0.0,
-        workHours: null,
-        rwfpsc: 0,
-        rwfppjsc: 0,
-        ddxcsc: 0,
-        ddxcpjsc: 0,
-        qxclsc: 0,
-        qxclpjsc: 0,
-        yssc: 0,
-        yspjsc: 0,
-        workHours: 0,
+        checkdeptopinion: null
       },
+
+      videoConfigHost: '10.155.32.4:9984', // 视频 host
+      // videoConfigHost: 'localhost:9984', // 视频 host
+      videoConfigToken: 'stream-1', // 视频 token
+      videoConfigStreamprofile: 'Profile_1', // 视频流文件
+      videoPlayer: null // 视频播放实例
     };
   },
   created () {
-    this.form = this.formdata;
-    console.warn(this.form);
-    console.warn(this.statu(this.form));
-    this.form.tjss = this.form.tjss
-      ? new Date(this.form.tjss).formatDate("yyyy-MM-dd hh:mm:ss")
-      : null;
-    this.form.prodtdepttime = this.form.prodtdepttime
-      ? new Date(this.form.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss")
-      : null;
-    this.form.departuretime = this.form.departuretime
-      ? new Date(this.form.departuretime).formatDate("yyyy-MM-dd hh:mm:ss")
-      : null;
-    this.form.arrivaltime = this.form.arrivaltime
-      ? new Date(this.form.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss")
-      : null;
-    this.form.repairedtime = this.form.repairedtime
-      ? new Date(this.form.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss")
-      : null;
-    this.form.checktime = this.form.checktime
-      ? new Date(this.form.checktime).formatDate("yyyy-MM-dd hh:mm:ss")
-      : null;
+    console.log(11111)
+    this.setData();
+  },
+
+  updated () {
+    console.log(22222)
+    this.setData();
+  },
+
+  onmounted () {
+    this.cancelPlay();
   },
 
   // 函数
   methods: {
+    setData () {
+      this.form = this.formdata;
+      this.form.tjss = this.form.tjss
+        ? new Date(this.form.tjss).formatDate("yyyy-MM-dd hh:mm:ss")
+        : null;
+      this.form.prodtdepttime = this.form.prodtdepttime
+        ? new Date(this.form.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss")
+        : null;
+      this.form.departuretime = this.form.departuretime
+        ? new Date(this.form.departuretime).formatDate("yyyy-MM-dd hh:mm:ss")
+        : null;
+      this.form.arrivaltime = this.form.arrivaltime
+        ? new Date(this.form.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss")
+        : null;
+      this.form.repairedtime = this.form.repairedtime
+        ? new Date(this.form.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss")
+        : null;
+      this.form.checktime = this.form.checktime
+        ? new Date(this.form.checktime).formatDate("yyyy-MM-dd hh:mm:ss")
+        : null;
+    },
     handleNodeClick (data) {
       this.location = data.id
-      console.log(data);
       this.searchTab(data.id)
     },
     DateformatDate (val) {
@@ -455,7 +454,6 @@ export default {
       this.dialogVisible = true
       this.data = data.data
       this.location = data.data[0].id
-      console.warn(data);
       this.searchTab()
     },
     async searchTab () {
@@ -470,13 +468,76 @@ export default {
           location: this.location
         },
       })
-      console.warn(data);
       this.tableData.data = data.data
     },
+    showVideoBox () {
+      this.videoBoxShow = true;
+      this.$nextTick(() => {
+        this.listenEvent();
+        this.resetVideo();
+      });
+    },
+    // 销毁播放实例
+    cancelPlay () {
+      $('.videoPlayer').attr('poster', "").attr('src', "");
+      this.videoPlayer && this.videoPlayer.disconnect() && (this.videoPlayer = null);
+    },
+
+    // 监听视频被暂停和被播放
+    listenEvent () {
+      let that = this;
+
+      //判断设备
+      if (H5siOS() === true || H5sSafariBrowser() === true) {
+        $('.videoPlayer').prop('controls', true);
+      }
+
+      //如果是暂停状态,就让它开始;如果是开始就让他暂停。每次开始之前都先清空参数
+      $('.videoPlayer').on('click', function () {
+        if ($(this).get(0).paused) {
+          that.resetVideo();
+        } else {
+          that.videoPlayer.disconnect();
+          $(this).get(0).pause();
+          this.BASE.showMsg({
+            type: "success",
+            msg: "暂停播放"
+          });
+        }
+      });
+    },
+
+    // 重置视频播放状态
+    resetVideo () {
+      this.$nextTick(() => {
+        let videoConfig = {
+          videoid: 'videoPlayer',//跟上面video标签的id一致
+          protocol: 'http:', //'http:' or 'https:'
+          host: this.videoConfigHost, //'localhost:8080'自己内部的网址
+          rootpath: '/', // '/' or window.location.pathname
+          token: this.videoConfigToken,//可变参数
+          // streamprofile: this.videoConfigStreamprofile, // {string} - stream profile, main/sub or other predefine transcoding profile
+          hlsver: 'v1', //v1 is for ts, v2 is for fmp4
+          session: 'e312287e-d809-4b4b-a5d6-336e5006199f' //session got from login可变参数
+        };
+
+        this.cancelPlay();
+        this.videoPlayer = new H5sPlayerRTC(videoConfig);
+        this.videoPlayer.connect();
+
+        this.BASE.showMsg({
+          type: "success",
+          msg: "播放组件初始化中...请稍后..."
+        });
+
+      });
+    },
     selectTab: function (tab, index) {
       this.activeTab = index;
       if (index == 1) {
         this.showDet();
+      } else if (index === 2) {
+        this.showVideoBox();
       }
       if (tab.text == '消缺历史') {
         this.searchH()
@@ -628,13 +689,15 @@ export default {
   }
   .evaluate {
     flex: 0 0 240px;
-
     margin-left: 30px;
     .evaluate-item {
       display: flex;
+      justify-content: space-between;
       align-items: center;
       margin-top: 8px;
-
+      .el-input__inner {
+        text-align: center;
+      }
       .evaluate-label {
         width: 120px;
         text-align: right;
@@ -653,7 +716,6 @@ export default {
   }
   .tabs {
     flex: 0 0 200px;
-
     height: 619px;
     margin-left: 20px;
     border-left: 1px solid #53626833;
@@ -667,8 +729,7 @@ export default {
         display: flex;
         align-items: center; // justify-content: center;
         font-size: @fontsize-l;
-        cursor: pointer;
-        // width: 120px;
+        cursor: pointer; // width: 120px;
         padding: 8px;
         margin-bottom: 16px;
         &.active {
@@ -694,4 +755,26 @@ export default {
     }
   }
 }
+.videoPlayer {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: pointer;
+}
+</style>
+<style lang="less">
+.evaluate {
+  .evaluate-item {
+    .el-input__inner {
+      padding: 0 15px;
+      text-align: center;
+    }
+  }
+
+  .evaluate-item.warColor {
+    .el-input__inner {
+      color: #f25656;
+    }
+  }
+}
 </style>