From 5749cdd16cd79890c659775de9b1cb7e7ffda5b1 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期四, 29 十月 2020 10:45:23 +0800
Subject: [PATCH] Merge pull request #6 from lawrencehj/master

---
 src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java                        |    8 
 src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java            |    8 
 src/main/java/com/genersoft/iot/vmp/vmanager/play/PlayController.java                          |   72 +-
 src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java                |    2 
 src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java                         |   18 
 web_src/src/components/gb28181/devicePlayer.vue                                                |  848 ++++++++++++++++++++--------------------
 src/main/java/com/genersoft/iot/vmp/gb28181/transmit/request/impl/MessageRequestProcessor.java |  234 ++++++----
 src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java          |    8 
 src/main/java/com/genersoft/iot/vmp/vmanager/playback/PlaybackController.java                  |   29 
 9 files changed, 646 insertions(+), 581 deletions(-)

diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java
index 047918c..a33678c 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java
@@ -329,7 +329,7 @@
 			streamInfo.setSsrc(ssrc);
 			streamInfo.setCahnnelId(channelId);
 			streamInfo.setDeviceID(device.getDeviceId());
-			boolean b = storager.startPlayBlack(streamInfo);
+			boolean b = storager.startPlayback(streamInfo);
 			return streamInfo;
 
 		} catch ( SipException | ParseException | InvalidArgumentException e) {
diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/request/impl/MessageRequestProcessor.java b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/request/impl/MessageRequestProcessor.java
index ec19cd5..e0b3211 100644
--- a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/request/impl/MessageRequestProcessor.java
+++ b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/request/impl/MessageRequestProcessor.java
@@ -35,51 +35,51 @@
 import com.genersoft.iot.vmp.utils.redis.RedisUtil;
 import org.springframework.util.StringUtils;
 
-/**    
+/**
  * @Description:MESSAGE璇锋眰澶勭悊鍣�
  * @author: swwheihei
- * @date:   2020骞�5鏈�3鏃� 涓嬪崍5:32:41     
+ * @date: 2020骞�5鏈�3鏃� 涓嬪崍5:32:41
  */
 public class MessageRequestProcessor extends SIPRequestAbstractProcessor {
-	
+
 	private final static Logger logger = LoggerFactory.getLogger(MessageRequestProcessor.class);
-	
+
 	private SIPCommander cmder;
-	
+
 	private IVideoManagerStorager storager;
-	
+
 	private EventPublisher publisher;
-	
+
 	private RedisUtil redis;
-	
+
 	private DeferredResultHolder deferredResultHolder;
-	
+
 	private DeviceOffLineDetector offLineDetector;
-	
+
 	private final static String CACHE_RECORDINFO_KEY = "CACHE_RECORDINFO_";
-	
+
 	private static final String MESSAGE_KEEP_ALIVE = "Keepalive";
 	private static final String MESSAGE_CONFIG_DOWNLOAD = "ConfigDownload";
 	private static final String MESSAGE_CATALOG = "Catalog";
 	private static final String MESSAGE_DEVICE_INFO = "DeviceInfo";
 	private static final String MESSAGE_ALARM = "Alarm";
 	private static final String MESSAGE_RECORD_INFO = "RecordInfo";
-//	private static final String MESSAGE_BROADCAST = "Broadcast";
-//	private static final String MESSAGE_DEVICE_STATUS = "DeviceStatus";
-//	private static final String MESSAGE_MOBILE_POSITION = "MobilePosition";
-//	private static final String MESSAGE_MOBILE_POSITION_INTERVAL = "Interval";
-	
-	/**   
+	// private static final String MESSAGE_BROADCAST = "Broadcast";
+	// private static final String MESSAGE_DEVICE_STATUS = "DeviceStatus";
+	// private static final String MESSAGE_MOBILE_POSITION = "MobilePosition";
+	// private static final String MESSAGE_MOBILE_POSITION_INTERVAL = "Interval";
+
+	/**
 	 * 澶勭悊MESSAGE璇锋眰
-	 *  
+	 * 
 	 * @param evt
-	 */  
+	 */
 	@Override
 	public void process(RequestEvent evt) {
 
 		try {
 			Element rootElement = getRootElement(evt);
-			String cmd = XmlUtil.getText(rootElement,"CmdType");
+			String cmd = XmlUtil.getText(rootElement, "CmdType");
 
 			if (MESSAGE_KEEP_ALIVE.equals(cmd)) {
 				logger.info("鎺ユ敹鍒癒eepAlive娑堟伅");
@@ -103,9 +103,10 @@
 			e.printStackTrace();
 		}
 	}
-	
+
 	/**
 	 * 鏀跺埌deviceInfo璁惧淇℃伅璇锋眰 澶勭悊
+	 * 
 	 * @param evt
 	 */
 	private void processMessageDeviceInfo(RequestEvent evt) {
@@ -113,32 +114,38 @@
 			Element rootElement = getRootElement(evt);
 			Element deviceIdElement = rootElement.element("DeviceID");
 			String deviceId = deviceIdElement.getText().toString();
-			
+
 			Device device = storager.queryVideoDevice(deviceId);
 			if (device == null) {
 				return;
 			}
-			device.setName(XmlUtil.getText(rootElement,"DeviceName"));
-			device.setManufacturer(XmlUtil.getText(rootElement,"Manufacturer"));
-			device.setModel(XmlUtil.getText(rootElement,"Model"));
-			device.setFirmware(XmlUtil.getText(rootElement,"Firmware"));
-			if (StringUtils.isEmpty(device.getStreamMode())){
+			device.setName(XmlUtil.getText(rootElement, "DeviceName"));
+			device.setManufacturer(XmlUtil.getText(rootElement, "Manufacturer"));
+			device.setModel(XmlUtil.getText(rootElement, "Model"));
+			device.setFirmware(XmlUtil.getText(rootElement, "Firmware"));
+			if (StringUtils.isEmpty(device.getStreamMode())) {
 				device.setStreamMode("UDP");
 			}
 			storager.updateDevice(device);
-			
+
 			RequestMessage msg = new RequestMessage();
 			msg.setDeviceId(deviceId);
 			msg.setType(DeferredResultHolder.CALLBACK_CMD_DEVICEINFO);
 			msg.setData(device);
 			deferredResultHolder.invokeResult(msg);
-		} catch (DocumentException e) {
+			// 鍥炲200 OK
+			responseAck(evt);
+			if (offLineDetector.isOnline(deviceId)) {
+				publisher.onlineEventPublish(deviceId, VideoManagerConstants.EVENT_ONLINE_KEEPLIVE);
+			}
+		} catch (DocumentException | SipException | InvalidArgumentException | ParseException e) {
 			e.printStackTrace();
 		}
 	}
-	
+
 	/***
 	 * 鏀跺埌catalog璁惧鐩綍鍒楄〃璇锋眰 澶勭悊
+	 * 
 	 * @param evt
 	 */
 	private void processMessageCatalogList(RequestEvent evt) {
@@ -171,34 +178,43 @@
 					DeviceChannel deviceChannel = new DeviceChannel();
 					deviceChannel.setName(channelName);
 					deviceChannel.setChannelId(channelDeviceId);
-					if(status.equals("ON") || status.equals("On")) {
+					if (status.equals("ON") || status.equals("On")) {
 						deviceChannel.setStatus(1);
 					}
-					if(status.equals("OFF") || status.equals("Off")) {
+					if (status.equals("OFF") || status.equals("Off")) {
 						deviceChannel.setStatus(0);
 					}
 
-					deviceChannel.setManufacture(XmlUtil.getText(itemDevice,"Manufacturer"));
-					deviceChannel.setModel(XmlUtil.getText(itemDevice,"Model"));
-					deviceChannel.setOwner(XmlUtil.getText(itemDevice,"Owner"));
-					deviceChannel.setCivilCode(XmlUtil.getText(itemDevice,"CivilCode"));
-					deviceChannel.setBlock(XmlUtil.getText(itemDevice,"Block"));
-					deviceChannel.setAddress(XmlUtil.getText(itemDevice,"Address"));
-					deviceChannel.setParental(itemDevice.element("Parental") == null? 0:Integer.parseInt(XmlUtil.getText(itemDevice,"Parental")));
-					deviceChannel.setParentId(XmlUtil.getText(itemDevice,"ParentID"));
-					deviceChannel.setSafetyWay(itemDevice.element("SafetyWay") == null? 0:Integer.parseInt(XmlUtil.getText(itemDevice,"SafetyWay")));
-					deviceChannel.setRegisterWay(itemDevice.element("RegisterWay") == null? 1:Integer.parseInt(XmlUtil.getText(itemDevice,"RegisterWay")));
-					deviceChannel.setCertNum(XmlUtil.getText(itemDevice,"CertNum"));
-					deviceChannel.setCertifiable(itemDevice.element("Certifiable") == null? 0:Integer.parseInt(XmlUtil.getText(itemDevice,"Certifiable")));
-					deviceChannel.setErrCode(itemDevice.element("ErrCode") == null? 0:Integer.parseInt(XmlUtil.getText(itemDevice,"ErrCode")));
-					deviceChannel.setEndTime(XmlUtil.getText(itemDevice,"EndTime"));
-					deviceChannel.setSecrecy(XmlUtil.getText(itemDevice,"Secrecy"));
-					deviceChannel.setIpAddress(XmlUtil.getText(itemDevice,"IPAddress"));
-					deviceChannel.setPort(itemDevice.element("Port") == null? 0:Integer.parseInt(XmlUtil.getText(itemDevice,"Port")));
-					deviceChannel.setPassword(XmlUtil.getText(itemDevice,"Password"));
-					deviceChannel.setLongitude(itemDevice.element("Longitude") == null? 0.00:Double.parseDouble(XmlUtil.getText(itemDevice,"Longitude")));
-					deviceChannel.setLatitude(itemDevice.element("Latitude") == null? 0.00:Double.parseDouble(XmlUtil.getText(itemDevice,"Latitude")));
-					deviceChannel.setPTZType(itemDevice.element("PTZType") == null? 0:Integer.parseInt(XmlUtil.getText(itemDevice,"PTZType")));
+					deviceChannel.setManufacture(XmlUtil.getText(itemDevice, "Manufacturer"));
+					deviceChannel.setModel(XmlUtil.getText(itemDevice, "Model"));
+					deviceChannel.setOwner(XmlUtil.getText(itemDevice, "Owner"));
+					deviceChannel.setCivilCode(XmlUtil.getText(itemDevice, "CivilCode"));
+					deviceChannel.setBlock(XmlUtil.getText(itemDevice, "Block"));
+					deviceChannel.setAddress(XmlUtil.getText(itemDevice, "Address"));
+					deviceChannel.setParental(itemDevice.element("Parental") == null ? 0
+							: Integer.parseInt(XmlUtil.getText(itemDevice, "Parental")));
+					deviceChannel.setParentId(XmlUtil.getText(itemDevice, "ParentID"));
+					deviceChannel.setSafetyWay(itemDevice.element("SafetyWay") == null ? 0
+							: Integer.parseInt(XmlUtil.getText(itemDevice, "SafetyWay")));
+					deviceChannel.setRegisterWay(itemDevice.element("RegisterWay") == null ? 1
+							: Integer.parseInt(XmlUtil.getText(itemDevice, "RegisterWay")));
+					deviceChannel.setCertNum(XmlUtil.getText(itemDevice, "CertNum"));
+					deviceChannel.setCertifiable(itemDevice.element("Certifiable") == null ? 0
+							: Integer.parseInt(XmlUtil.getText(itemDevice, "Certifiable")));
+					deviceChannel.setErrCode(itemDevice.element("ErrCode") == null ? 0
+							: Integer.parseInt(XmlUtil.getText(itemDevice, "ErrCode")));
+					deviceChannel.setEndTime(XmlUtil.getText(itemDevice, "EndTime"));
+					deviceChannel.setSecrecy(XmlUtil.getText(itemDevice, "Secrecy"));
+					deviceChannel.setIpAddress(XmlUtil.getText(itemDevice, "IPAddress"));
+					deviceChannel.setPort(itemDevice.element("Port") == null ? 0
+							: Integer.parseInt(XmlUtil.getText(itemDevice, "Port")));
+					deviceChannel.setPassword(XmlUtil.getText(itemDevice, "Password"));
+					deviceChannel.setLongitude(itemDevice.element("Longitude") == null ? 0.00
+							: Double.parseDouble(XmlUtil.getText(itemDevice, "Longitude")));
+					deviceChannel.setLatitude(itemDevice.element("Latitude") == null ? 0.00
+							: Double.parseDouble(XmlUtil.getText(itemDevice, "Latitude")));
+					deviceChannel.setPTZType(itemDevice.element("PTZType") == null ? 0
+							: Integer.parseInt(XmlUtil.getText(itemDevice, "PTZType")));
 					deviceChannel.setHasAudio(true); // 榛樿鍚湁闊抽锛屾挱鏀炬椂鍐嶆鏌ユ槸鍚︽湁闊抽鍙婃槸鍚AC
 					storager.updateChannel(device.getDeviceId(), deviceChannel);
 				}
@@ -208,21 +224,20 @@
 				msg.setType(DeferredResultHolder.CALLBACK_CMD_CATALOG);
 				msg.setData(device);
 				deferredResultHolder.invokeResult(msg);
-
-				// 鍥炲200
+				// 鍥炲200 OK
+				responseAck(evt);
 				if (offLineDetector.isOnline(deviceId)) {
-					responseAck(evt);
 					publisher.onlineEventPublish(deviceId, VideoManagerConstants.EVENT_ONLINE_KEEPLIVE);
 				}
-
 			}
 		} catch (DocumentException | SipException | InvalidArgumentException | ParseException e) {
 			e.printStackTrace();
 		}
 	}
-	
+
 	/***
 	 * 鏀跺埌alarm璁惧鎶ヨ淇℃伅 澶勭悊
+	 * 
 	 * @param evt
 	 */
 	private void processMessageAlarm(RequestEvent evt) {
@@ -230,37 +245,45 @@
 			Element rootElement = getRootElement(evt);
 			Element deviceIdElement = rootElement.element("DeviceID");
 			String deviceId = deviceIdElement.getText().toString();
-			
+
 			Device device = storager.queryVideoDevice(deviceId);
 			if (device == null) {
 				// TODO 涔熷彲鑳芥槸閫氶亾
-//				storager.queryChannel(deviceId)
+				// storager.queryChannel(deviceId)
 				return;
 			}
-			device.setName(XmlUtil.getText(rootElement,"DeviceName"));
-			device.setManufacturer(XmlUtil.getText(rootElement,"Manufacturer"));
-			device.setModel(XmlUtil.getText(rootElement,"Model"));
-			device.setFirmware(XmlUtil.getText(rootElement,"Firmware"));
-			if (StringUtils.isEmpty(device.getStreamMode())){
+			device.setName(XmlUtil.getText(rootElement, "DeviceName"));
+			device.setManufacturer(XmlUtil.getText(rootElement, "Manufacturer"));
+			device.setModel(XmlUtil.getText(rootElement, "Model"));
+			device.setFirmware(XmlUtil.getText(rootElement, "Firmware"));
+			if (StringUtils.isEmpty(device.getStreamMode())) {
 				device.setStreamMode("UDP");
 			}
 			storager.updateDevice(device);
 			cmder.catalogQuery(device);
-		} catch (DocumentException e) {
+			// 鍥炲200 OK
+			responseAck(evt);
+			if (offLineDetector.isOnline(deviceId)) {
+				publisher.onlineEventPublish(deviceId, VideoManagerConstants.EVENT_ONLINE_KEEPLIVE);
+			}
+		} catch (DocumentException | SipException | InvalidArgumentException | ParseException e) {
+			// } catch (DocumentException e) {
 			e.printStackTrace();
 		}
 	}
-	
+
 	/***
 	 * 鏀跺埌keepalive璇锋眰 澶勭悊
+	 * 
 	 * @param evt
 	 */
-	private void processMessageKeepAlive(RequestEvent evt){
+	private void processMessageKeepAlive(RequestEvent evt) {
 		try {
 			Element rootElement = getRootElement(evt);
-			String deviceId = XmlUtil.getText(rootElement,"DeviceID");
+			String deviceId = XmlUtil.getText(rootElement, "DeviceID");
+			// 鍥炲200 OK
+			responseAck(evt);
 			if (offLineDetector.isOnline(deviceId)) {
-				responseAck(evt);
 				publisher.onlineEventPublish(deviceId, VideoManagerConstants.EVENT_ONLINE_KEEPLIVE);
 			} else {
 			}
@@ -268,58 +291,66 @@
 			e.printStackTrace();
 		}
 	}
-	
+
 	/***
-	 * 鏀跺埌catalog璁惧鐩綍鍒楄〃璇锋眰 澶勭悊
-	 * TODO 杩囨湡鏃堕棿鏆傛椂鍐欐180绉掞紝鍚庣画涓嶥eferredResult瓒呮椂鏃堕棿淇濇寔涓�鑷�
+	 * 鏀跺埌catalog璁惧鐩綍鍒楄〃璇锋眰 澶勭悊 TODO 杩囨湡鏃堕棿鏆傛椂鍐欐180绉掞紝鍚庣画涓嶥eferredResult瓒呮椂鏃堕棿淇濇寔涓�鑷�
+	 * 
 	 * @param evt
 	 */
 	private void processMessageRecordInfo(RequestEvent evt) {
 		try {
+			// 鍥炲200 OK
+			responseAck(evt);
 			RecordInfo recordInfo = new RecordInfo();
 			Element rootElement = getRootElement(evt);
 			Element deviceIdElement = rootElement.element("DeviceID");
 			String deviceId = deviceIdElement.getText().toString();
 			recordInfo.setDeviceId(deviceId);
-			recordInfo.setName(XmlUtil.getText(rootElement,"Name"));
-			recordInfo.setSumNum(Integer.parseInt(XmlUtil.getText(rootElement,"SumNum")));
-			String sn = XmlUtil.getText(rootElement,"SN");
+			recordInfo.setName(XmlUtil.getText(rootElement, "Name"));
+			recordInfo.setSumNum(Integer.parseInt(XmlUtil.getText(rootElement, "SumNum")));
+			String sn = XmlUtil.getText(rootElement, "SN");
 			Element recordListElement = rootElement.element("RecordList");
 			if (recordListElement == null) {
+				logger.info("鏃犲綍鍍忔暟鎹�");
+				// responseAck(evt);
 				return;
 			}
-			
+
 			Iterator<Element> recordListIterator = recordListElement.elementIterator();
 			List<RecordItem> recordList = new ArrayList<RecordItem>();
 			if (recordListIterator != null) {
 				RecordItem record = new RecordItem();
+				logger.info("澶勭悊褰曞儚鍒楄〃鏁版嵁...");
 				// 閬嶅巻DeviceList
 				while (recordListIterator.hasNext()) {
 					Element itemRecord = recordListIterator.next();
 					Element recordElement = itemRecord.element("DeviceID");
 					if (recordElement == null) {
+						logger.info("璁板綍涓虹┖锛屼笅涓�涓�...");
 						continue;
 					}
 					record = new RecordItem();
-					record.setDeviceId(XmlUtil.getText(itemRecord,"DeviceID"));
-					record.setName(XmlUtil.getText(itemRecord,"Name"));
-					record.setFilePath(XmlUtil.getText(itemRecord,"FilePath"));
-					record.setAddress(XmlUtil.getText(itemRecord,"Address"));
-					record.setStartTime(DateUtil.ISO8601Toyyyy_MM_dd_HH_mm_ss(XmlUtil.getText(itemRecord,"StartTime")));
-					record.setEndTime(DateUtil.ISO8601Toyyyy_MM_dd_HH_mm_ss(XmlUtil.getText(itemRecord,"EndTime")));
-					record.setSecrecy(itemRecord.element("Secrecy") == null? 0:Integer.parseInt(XmlUtil.getText(itemRecord,"Secrecy")));
-					record.setType(XmlUtil.getText(itemRecord,"Type"));
-					record.setRecorderId(XmlUtil.getText(itemRecord,"RecorderID"));
+					record.setDeviceId(XmlUtil.getText(itemRecord, "DeviceID"));
+					record.setName(XmlUtil.getText(itemRecord, "Name"));
+					record.setFilePath(XmlUtil.getText(itemRecord, "FilePath"));
+					record.setAddress(XmlUtil.getText(itemRecord, "Address"));
+					record.setStartTime(
+							DateUtil.ISO8601Toyyyy_MM_dd_HH_mm_ss(XmlUtil.getText(itemRecord, "StartTime")));
+					record.setEndTime(DateUtil.ISO8601Toyyyy_MM_dd_HH_mm_ss(XmlUtil.getText(itemRecord, "EndTime")));
+					record.setSecrecy(itemRecord.element("Secrecy") == null ? 0
+							: Integer.parseInt(XmlUtil.getText(itemRecord, "Secrecy")));
+					record.setType(XmlUtil.getText(itemRecord, "Type"));
+					record.setRecorderId(XmlUtil.getText(itemRecord, "RecorderID"));
 					recordList.add(record);
 				}
-//				recordList.sort(Comparator.naturalOrder());
+				// recordList.sort(Comparator.naturalOrder());
 				recordInfo.setRecordList(recordList);
 			}
-			
+
 			// 瀛樺湪褰曞儚涓斿鏋滃綋鍓嶅綍鍍忔槑缁嗕釜鏁板皬浜庢�绘潯鏁帮紝璇存槑鎷嗗寘杩斿洖锛岄渶瑕佺粍瑁咃紝鏆備笉杩斿洖
 			if (recordInfo.getSumNum() > 0 && recordList.size() > 0 && recordList.size() < recordInfo.getSumNum()) {
 				// 涓洪槻姝㈣繛缁姹傝璁惧鐨勫綍鍍忔暟鎹紝杩斿洖鏁版嵁閿欎贡锛岀壒澧炲姞sn杩涜鍖哄垎
-				String cacheKey = CACHE_RECORDINFO_KEY+deviceId+sn;
+				String cacheKey = CACHE_RECORDINFO_KEY + deviceId + sn;
 				// TODO 鏆傛椂鐩存帴鎿嶄綔redis瀛樺偍锛屽悗缁皝瑁呬笓鐢ㄧ紦瀛樻帴鍙o紝鏀逛负鏈湴鍐呭瓨缂撳瓨
 				if (redis.hasKey(cacheKey)) {
 					List<RecordItem> previousList = (List<RecordItem>) redis.get(cacheKey);
@@ -328,24 +359,28 @@
 					}
 					// 鏈垎鏀〃绀哄綍鍍忓垪琛ㄨ鎷嗗寘锛屼笖鍔犱笂涔嬪墠鐨勬暟鎹繕鏄笉澶�,淇濆瓨缂撳瓨杩斿洖锛岀瓑寰呬笅涓寘鍐嶅鐞�
 					if (recordList.size() < recordInfo.getSumNum()) {
-						redis.set(cacheKey, recordList, 180);
+						logger.info("宸茶幏鍙�" + recordList.size() + "椤瑰綍鍍忔暟鎹紝鍏�" + recordInfo.getSumNum() + "椤�");
+						redis.set(cacheKey, recordList, 90);
 						return;
 					} else {
 						// 鏈垎鏀〃绀哄綍鍍忚鎷嗗寘锛屼絾鍔犱笂涔嬪墠鐨勬暟鎹瓒冲锛岃繑鍥炲搷搴�
 						// 鍥犺澶囧績璺虫湁鐩戝惉redis杩囨湡鏈哄埗锛屼负鎻愰珮鎬ц兘锛屾澶勬墜鍔ㄥ垹闄�
+						logger.info("褰曞儚鏁版嵁宸插叏閮ㄨ幏鍙�");
 						redis.del(cacheKey);
 					}
 				} else {
 					// 鏈垎鏀湁涓ょ鍙兘锛�1銆佸綍鍍忓垪琛ㄨ鎷嗗寘锛屼笖鏄涓�涓寘,鐩存帴淇濆瓨缂撳瓨杩斿洖锛岀瓑寰呬笅涓寘鍐嶅鐞�
-					//             2銆佷箣鍓嶆湁鍖咃紝浣嗚秴鏃舵竻绌轰簡锛岄偅涔堣繖娆n鎵规鐨勫搷搴旀暟鎹凡缁忎笉瀹屾暣锛岀瓑寰呰繃鏈熸椂闂村悗redis鑷姩娓呯┖鏁版嵁
-					redis.set(cacheKey, recordList, 180);
+					// 2銆佷箣鍓嶆湁鍖咃紝浣嗚秴鏃舵竻绌轰簡锛岄偅涔堣繖娆n鎵规鐨勫搷搴旀暟鎹凡缁忎笉瀹屾暣锛岀瓑寰呰繃鏈熸椂闂村悗redis鑷姩娓呯┖鏁版嵁
+					logger.info("绛夊緟鍚庣画鐨勫寘...");
+
+					redis.set(cacheKey, recordList, 90);
 					return;
 				}
-				
+
 			}
 			// 璧板埌杩欓噷锛屾湁浠ヤ笅鍙兘锛�1銆佹病鏈夊綍鍍忎俊鎭�,绗竴娆℃敹鍒皉ecordinfo鐨勬秷鎭嵆杩斿洖鍝嶅簲鏁版嵁锛屾棤redis鎿嶄綔
-			//               2銆佹湁褰曞儚鏁版嵁锛屼笖绗竴娆″嵆鏀跺埌瀹屾暣鏁版嵁锛岃繑鍥炲搷搴旀暟鎹紝鏃爎edis鎿嶄綔
-			//	             3銆佹湁褰曞儚鏁版嵁锛屽湪瓒呮椂鏃堕棿鍐呮敹鍒板娆″寘缁勮鍚庢暟閲忚冻澶燂紝杩斿洖鏁版嵁
+			// 2銆佹湁褰曞儚鏁版嵁锛屼笖绗竴娆″嵆鏀跺埌瀹屾暣鏁版嵁锛岃繑鍥炲搷搴旀暟鎹紝鏃爎edis鎿嶄綔
+			// 3銆佹湁褰曞儚鏁版嵁锛屽湪瓒呮椂鏃堕棿鍐呮敹鍒板娆″寘缁勮鍚庢暟閲忚冻澶燂紝杩斿洖鏁版嵁
 
 			// 瀵硅褰曡繘琛屾帓搴�
 			RequestMessage msg = new RequestMessage();
@@ -355,16 +390,17 @@
 			recordInfo.getRecordList().sort(Comparator.naturalOrder());
 			msg.setData(recordInfo);
 			deferredResultHolder.invokeResult(msg);
-		} catch (DocumentException e) {
+			logger.info("澶勭悊瀹屾垚锛岃繑鍥炵粨鏋�");
+		} catch (DocumentException | SipException | InvalidArgumentException | ParseException e) {
 			e.printStackTrace();
 		}
 	}
-	
+
 	private void responseAck(RequestEvent evt) throws SipException, InvalidArgumentException, ParseException {
-		Response response = getMessageFactory().createResponse(Response.OK,evt.getRequest());
+		Response response = getMessageFactory().createResponse(Response.OK, evt.getRequest());
 		getServerTransaction(evt).sendResponse(response);
 	}
-	
+
 	private Element getRootElement(RequestEvent evt) throws DocumentException {
 		Request request = evt.getRequest();
 		SAXReader reader = new SAXReader();
diff --git a/src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java b/src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
index 6fd4cf5..bb111a3 100644
--- a/src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
+++ b/src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
@@ -142,7 +142,7 @@
 			storager.startPlay(streamInfoForPlay);
 		}
 
-		StreamInfo streamInfoForPlayBack = storager.queryPlayBlackBySSRC(ssrc);
+		StreamInfo streamInfoForPlayBack = storager.queryPlaybackBySSRC(ssrc);
 		if ("rtp".equals(app) && streamInfoForPlayBack != null ) {
 			MediaServerConfig mediaInfo = storager.getMediaInfo();
 			streamInfoForPlayBack.setFlv(String.format("http://%s:%s/rtp/%s.flv", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
@@ -150,7 +150,7 @@
 			streamInfoForPlayBack.setRtmp(String.format("rtmp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtmpPort(), streamId));
 			streamInfoForPlayBack.setHls(String.format("http://%s:%s/rtp/%s/hls.m3u8", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
 			streamInfoForPlayBack.setRtsp(String.format("rtsp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtspPort(), streamId));
-			storager.startPlayBlack(streamInfoForPlayBack);
+			storager.startPlayback(streamInfoForPlayBack);
 		}
 
 		// TODO Auto-generated method stub
@@ -261,7 +261,12 @@
 		String ssrc = new DecimalFormat("0000000000").format(Integer.parseInt(streamId, 16));
 		StreamInfo streamInfo = storager.queryPlayBySSRC(ssrc);
 		if ("rtp".equals(app) && !regist ) {
-			storager.stopPlay(streamInfo);
+			if (streamInfo!=null){
+				storager.stopPlay(streamInfo);
+			}else{
+				streamInfo = storager.queryPlaybackBySSRC(ssrc);
+				storager.stopPlayback(streamInfo);
+			}
 		}
 
 
@@ -288,6 +293,13 @@
 		String ssrc = String.format("%010d", numb); 
 		
 		cmder.streamByeCmd(ssrc);
+		StreamInfo streamInfo = storager.queryPlayBySSRC(ssrc);
+		if (streamInfo!=null){
+			storager.stopPlay(streamInfo);
+		}else{
+			streamInfo = storager.queryPlaybackBySSRC(ssrc);
+			storager.stopPlayback(streamInfo);
+		}
 		
 		JSONObject ret = new JSONObject();
 		ret.put("code", 0);
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java b/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
index 2680922..fdf4bc3 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
@@ -184,11 +184,11 @@
 
 	Map<String, StreamInfo> queryPlayByDeviceId(String deviceId);
 
-	boolean startPlayBlack(StreamInfo streamInfo);
+	boolean startPlayback(StreamInfo streamInfo);
 
-	boolean stopPlayBlack(StreamInfo streamInfo);
+	boolean stopPlayback(StreamInfo streamInfo);
 
-	StreamInfo queryPlayBlackByDevice(String deviceId, String channelId);
+	StreamInfo queryPlaybackByDevice(String deviceId, String channelId);
 
-	StreamInfo queryPlayBlackBySSRC(String ssrc);
+	StreamInfo queryPlaybackBySSRC(String ssrc);
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java b/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
index de94f86..75b9c92 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
@@ -195,22 +195,22 @@
 	}
 
 	@Override
-	public boolean startPlayBlack(StreamInfo streamInfo) {
+	public boolean startPlayback(StreamInfo streamInfo) {
 		return false;
 	}
 
 	@Override
-	public boolean stopPlayBlack(StreamInfo streamInfo) {
+	public boolean stopPlayback(StreamInfo streamInfo) {
 		return false;
 	}
 
 	@Override
-	public StreamInfo queryPlayBlackByDevice(String deviceId, String channelId) {
+	public StreamInfo queryPlaybackByDevice(String deviceId, String channelId) {
 		return null;
 	}
 
 	@Override
-	public StreamInfo queryPlayBlackBySSRC(String ssrc) {
+	public StreamInfo queryPlaybackBySSRC(String ssrc) {
 		return null;
 	}
 }
diff --git a/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java b/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
index e6a680b..7c3a2fc 100644
--- a/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
+++ b/src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
@@ -409,7 +409,7 @@
 	}
 
 	@Override
-	public StreamInfo queryPlayBlackBySSRC(String ssrc) {
+	public StreamInfo queryPlaybackBySSRC(String ssrc) {
 //		List<Object> playLeys = redis.keys(String.format("%S_%s_*", VideoManagerConstants.PLAYER_PREFIX, ssrc));
 		List<Object> playLeys = redis.scan(String.format("%S_%s_*", VideoManagerConstants.PLAY_BLACK_PREFIX, ssrc));
 		if (playLeys == null || playLeys.size() == 0) return null;
@@ -505,14 +505,14 @@
 
 
 	@Override
-	public boolean startPlayBlack(StreamInfo stream) {
+	public boolean startPlayback(StreamInfo stream) {
 		return redis.set(String.format("%S_%s_%s_%s", VideoManagerConstants.PLAY_BLACK_PREFIX, stream.getSsrc(),stream.getDeviceID(), stream.getCahnnelId()),
 				stream);
 	}
 
 
 	@Override
-	public boolean stopPlayBlack(StreamInfo streamInfo) {
+	public boolean stopPlayback(StreamInfo streamInfo) {
 		if (streamInfo == null) return false;
 		DeviceChannel deviceChannel = queryChannel(streamInfo.getDeviceID(), streamInfo.getCahnnelId());
 		if (deviceChannel != null) {
@@ -527,7 +527,7 @@
 	}
 
 	@Override
-	public StreamInfo queryPlayBlackByDevice(String deviceId, String code) {
+	public StreamInfo queryPlaybackByDevice(String deviceId, String code) {
 		String format = String.format("%S_*_%s_%s", VideoManagerConstants.PLAY_BLACK_PREFIX,
 				deviceId,
 				code);
diff --git a/src/main/java/com/genersoft/iot/vmp/vmanager/play/PlayController.java b/src/main/java/com/genersoft/iot/vmp/vmanager/play/PlayController.java
index 64fb8f8..00f268c 100644
--- a/src/main/java/com/genersoft/iot/vmp/vmanager/play/PlayController.java
+++ b/src/main/java/com/genersoft/iot/vmp/vmanager/play/PlayController.java
@@ -26,32 +26,32 @@
 @RestController
 @RequestMapping("/api")
 public class PlayController {
-	
+
 	private final static Logger logger = LoggerFactory.getLogger(PlayController.class);
-	
+
 	@Autowired
 	private SIPCommander cmder;
-	
+
 	@Autowired
 	private IVideoManagerStorager storager;
 
 	@Autowired
 	private ZLMRESTfulUtils zlmresTfulUtils;
-	
+
 	@GetMapping("/play/{deviceId}/{channelId}")
-	public ResponseEntity<String> play(@PathVariable String deviceId,@PathVariable String channelId){
-		
+	public ResponseEntity<String> play(@PathVariable String deviceId, @PathVariable String channelId) {
+
 		Device device = storager.queryVideoDevice(deviceId);
 		StreamInfo streamInfo = storager.queryPlayByDevice(deviceId, channelId);
 
 		if (streamInfo == null) {
 			streamInfo = cmder.playStreamCmd(device, channelId);
-		}else {
+		} else {
 			String streamId = String.format("%08x", Integer.parseInt(streamInfo.getSsrc())).toUpperCase();
 			JSONObject rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
 			if (rtpInfo.getBoolean("exist")) {
-				return new ResponseEntity<String>(JSON.toJSONString(streamInfo),HttpStatus.OK);
-			}else {
+				return new ResponseEntity<String>(JSON.toJSONString(streamInfo), HttpStatus.OK);
+			} else {
 				storager.stopPlay(streamInfo);
 				streamInfo = cmder.playStreamCmd(device, channelId);
 			}
@@ -60,34 +60,40 @@
 		String streamId = String.format("%08x", Integer.parseInt(streamInfo.getSsrc())).toUpperCase();
 		// 绛夊緟鎺ㄦ祦, TODO 榛樿瓒呮椂30s
 		boolean lockFlag = true;
+		boolean rtpPushed = false;
 		long startTime = System.currentTimeMillis();
+		JSONObject rtpInfo = null;
 
 		while (lockFlag) {
 			try {
-				if (System.currentTimeMillis() - startTime > 30 * 1000) {
+				if (System.currentTimeMillis() - startTime > 60 * 1000) {
 					storager.stopPlay(streamInfo);
 					logger.info("鎾斁绛夊緟瓒呮椂");
-					return new ResponseEntity<String>("timeout",HttpStatus.OK);
-				}else {
+					return new ResponseEntity<String>("timeout", HttpStatus.OK);
+				} else {
 					streamInfo = storager.queryPlayByDevice(deviceId, channelId);
-					JSONObject rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
-					if (rtpInfo != null && rtpInfo.getBoolean("exist") && streamInfo != null && streamInfo.getFlv() != null){
-						logger.info("RTP宸叉帹娴侊紝鏌ヨ缂栫爜淇℃伅锛�"+streamInfo.getFlv());
+					if (!rtpPushed) {
+						logger.info("鏌ヨRTP鎺ㄦ祦淇℃伅...");
+						rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
+					}
+					if (rtpInfo != null && rtpInfo.getBoolean("exist") && streamInfo != null && streamInfo.getFlv() != null) {
+						logger.info("鏌ヨ娴佺紪鐮佷俊鎭細" + streamInfo.getFlv());
+						rtpPushed = true;
 						Thread.sleep(2000);
 						JSONObject mediaInfo = zlmresTfulUtils.getMediaInfo("rtp", "rtmp", streamId);
 						if (mediaInfo.getInteger("code") == 0 && mediaInfo.getBoolean("online")) {
 							lockFlag = false;
-							logger.info("濯掍綋缂栫爜淇℃伅宸茶幏鍙�");
+							logger.info("娴佺紪鐮佷俊鎭凡鑾峰彇");
 							JSONArray tracks = mediaInfo.getJSONArray("tracks");
 							streamInfo.setTracks(tracks);
 							storager.startPlay(streamInfo);
-						}else {
-							logger.info("濯掍綋缂栫爜淇℃伅鏈幏鍙栵紝2绉掑悗閲嶈瘯...");
+						} else {
+							logger.info("娴佺紪鐮佷俊鎭湭鑾峰彇锛�2绉掑悗閲嶈瘯...");
 						}
-					}else {
+					} else {
 						Thread.sleep(2000);
 						continue;
-					};
+					}
 				}
 			} catch (InterruptedException e) {
 				e.printStackTrace();
@@ -95,33 +101,35 @@
 		}
 
 		if (logger.isDebugEnabled()) {
-			logger.debug(String.format("璁惧棰勮 API璋冪敤锛宒eviceId锛�%s 锛宑hannelId锛�%s",deviceId, channelId));
-			logger.debug("璁惧棰勮 API璋冪敤锛宻src锛�"+streamInfo.getSsrc()+",ZLMedia streamId:"+Integer.toHexString(Integer.parseInt(streamInfo.getSsrc())));
+			logger.debug(String.format("璁惧棰勮 API璋冪敤锛宒eviceId锛�%s 锛宑hannelId锛�%s", deviceId, channelId));
+			logger.debug("璁惧棰勮 API璋冪敤锛宻src锛�" + streamInfo.getSsrc() + ",ZLMedia streamId:"
+					+ Integer.toHexString(Integer.parseInt(streamInfo.getSsrc())));
 		}
-		
-		if(streamInfo!=null) {
-			return new ResponseEntity<String>(JSON.toJSONString(streamInfo),HttpStatus.OK);
+
+		if (streamInfo != null) {
+			return new ResponseEntity<String>(JSON.toJSONString(streamInfo), HttpStatus.OK);
 		} else {
 			logger.warn("璁惧棰勮API璋冪敤澶辫触锛�");
 			return new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR);
 		}
 	}
-	
+
 	@PostMapping("/play/{ssrc}/stop")
-	public ResponseEntity<String> playStop(@PathVariable String ssrc){
-		
+	public ResponseEntity<String> playStop(@PathVariable String ssrc) {
+
 		cmder.streamByeCmd(ssrc);
 		StreamInfo streamInfo = storager.queryPlayBySSRC(ssrc);
-		if (streamInfo == null) return new ResponseEntity<String>(HttpStatus.PAYMENT_REQUIRED);
+		if (streamInfo == null)
+			return new ResponseEntity<String>(HttpStatus.PAYMENT_REQUIRED);
 		storager.stopPlay(streamInfo);
 		if (logger.isDebugEnabled()) {
 			logger.debug(String.format("璁惧棰勮鍋滄API璋冪敤锛宻src锛�%s", ssrc));
 		}
-		
-		if(ssrc!=null) {
+
+		if (ssrc != null) {
 			JSONObject json = new JSONObject();
 			json.put("ssrc", ssrc);
-			return new ResponseEntity<String>(json.toString(),HttpStatus.OK);
+			return new ResponseEntity<String>(json.toString(), HttpStatus.OK);
 		} else {
 			logger.warn("璁惧棰勮鍋滄API璋冪敤澶辫触锛�");
 			return new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR);
diff --git a/src/main/java/com/genersoft/iot/vmp/vmanager/playback/PlaybackController.java b/src/main/java/com/genersoft/iot/vmp/vmanager/playback/PlaybackController.java
index e53cbbf..56d1c7b 100644
--- a/src/main/java/com/genersoft/iot/vmp/vmanager/playback/PlaybackController.java
+++ b/src/main/java/com/genersoft/iot/vmp/vmanager/playback/PlaybackController.java
@@ -52,7 +52,7 @@
 		}
 
 		Device device = storager.queryVideoDevice(deviceId);
-		StreamInfo streamInfo = storager.queryPlayBlackByDevice(deviceId, channelId);
+		StreamInfo streamInfo = storager.queryPlaybackByDevice(deviceId, channelId);
 
 		if (streamInfo != null) {
 			cmder.streamByeCmd(streamInfo.getSsrc());
@@ -64,7 +64,7 @@
 //			if (rtpInfo.getBoolean("exist")) {
 //				return new ResponseEntity<String>(JSON.toJSONString(streamInfo),HttpStatus.OK);
 //			}else {
-//				storager.stopPlayBlack(streamInfo);
+//				storager.stopPlayback(streamInfo);
 //				streamInfo = cmder.playbackStreamCmd(device, channelId, startTime, endTime);
 //			}
 //		}
@@ -77,29 +77,40 @@
 		}
 		// 绛夊緟鎺ㄦ祦, TODO 榛樿瓒呮椂15s
 		boolean lockFlag = true;
+		boolean rtpPushed = false;
 		long lockStartTime = System.currentTimeMillis();
+		JSONObject rtpInfo = null;
+
 		while (lockFlag) {
 			try {
 				if (System.currentTimeMillis() - lockStartTime > 75 * 1000) {
-					storager.stopPlayBlack(streamInfo);
+					storager.stopPlayback(streamInfo);
+					logger.info("鎾斁绛夊緟瓒呮椂");
 					return new ResponseEntity<String>("timeout",HttpStatus.OK);
 				}else {
-					streamInfo = storager.queryPlayBlackByDevice(deviceId, channelId);
-					JSONObject rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
-					if (rtpInfo != null && rtpInfo.getBoolean("exist") && streamInfo.getFlv() != null){
+					streamInfo = storager.queryPlaybackByDevice(deviceId, channelId);
+					if (!rtpPushed) {
+						logger.info("鏌ヨRTP鎺ㄦ祦淇℃伅...");
+						rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
+					}
+					if (rtpInfo != null && rtpInfo.getBoolean("exist") && streamInfo != null && streamInfo.getFlv() != null){
+						logger.info("鏌ヨ娴佺紪鐮佷俊鎭細"+streamInfo.getFlv());
+						rtpPushed = true;
+						Thread.sleep(2000);
 						JSONObject mediaInfo = zlmresTfulUtils.getMediaInfo("rtp", "rtmp", streamId);
 						if (mediaInfo.getInteger("code") == 0 && mediaInfo.getBoolean("online")) {
 							lockFlag = false;
+							logger.info("娴佺紪鐮佷俊鎭凡鑾峰彇");
 							JSONArray tracks = mediaInfo.getJSONArray("tracks");
 							streamInfo.setTracks(tracks);
-							storager.startPlayBlack(streamInfo);
+							storager.startPlayback(streamInfo);
 						}else {
-
+							logger.info("娴佺紪鐮佷俊鎭湭鑾峰彇锛�2绉掑悗閲嶈瘯...");
 						}
 					}else {
 						Thread.sleep(2000);
 						continue;
-					};
+					}
 				}
 			} catch (InterruptedException e) {
 				e.printStackTrace();
diff --git a/web_src/src/components/gb28181/devicePlayer.vue b/web_src/src/components/gb28181/devicePlayer.vue
index 8502ee1..8c23ced 100644
--- a/web_src/src/components/gb28181/devicePlayer.vue
+++ b/web_src/src/components/gb28181/devicePlayer.vue
@@ -1,195 +1,191 @@
 <template>
-	<div id="devicePlayer">
-		<el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
-      <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live ></LivePlayer>
-			<div id="shared" style="text-align: right; margin-top: 1rem;">
-				<el-tabs v-model="tabActiveName">
-					<el-tab-pane label="瀹炴椂瑙嗛" name="media">
-						<div style="margin-bottom: 0.5rem;">
-<!--							<el-button type="primary" size="small" @click="playRecord(true, '')">鎾斁</el-button>-->
-<!--							 <el-button type="primary" size="small" @click="startRecord()">褰曞埗</el-button>-->
-<!--							 <el-button type="primary" size="small" @click="stopRecord()">鍋滄褰曞埗</el-button>-->
-						</div>
-						<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
-							<span style="width: 5rem; line-height: 2.5rem; text-align: right;">鎾斁鍦板潃锛�</span>
-							<el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
-						</div>
-						<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
-							<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe锛�</span>
-							<el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
-						</div>
-						<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
-							<span style="width: 5rem; line-height: 2.5rem; text-align: right;">璧勬簮鍦板潃锛�</span>
-							<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
-						</div>
-					</el-tab-pane>
-					<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
-					<el-tab-pane label="褰曞儚鏌ヨ" name="record">
-						<el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="鏃ユ湡"
-						 @change="queryRecords()"></el-date-picker>
-<!--            <el-slider style="margin: 0 1rem 1rem 1rem;"-->
-<!--                       v-model="timeVal"-->
-<!--                       :min="timeMin"-->
-<!--                       :max="timeMax"-->
-<!--                       :step="5"-->
-<!--                       :marks="getTimeMakrs()"-->
-<!--                       :format-tooltip="formatTooltip">-->
-<!--            </el-slider>-->
-<!--            <range-slider :min="timeMin"-->
-<!--                          :max="timeMax"-->
-<!--                          :step="5"></range-slider>-->
+<div id="devicePlayer">
+    <el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
+        <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer>
+        <div id="shared" style="text-align: right; margin-top: 1rem;">
+            <el-tabs v-model="tabActiveName">
+                <el-tab-pane label="瀹炴椂瑙嗛" name="media">
+                    <div style="margin-bottom: 0.5rem;">
+                        <!--		<el-button type="primary" size="small" @click="playRecord(true, '')">鎾斁</el-button>-->
+                        <!--		 <el-button type="primary" size="small" @click="startRecord()">褰曞埗</el-button>-->
+                        <!--		 <el-button type="primary" size="small" @click="stopRecord()">鍋滄褰曞埗</el-button>-->
+                    </div>
+                    <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+                        <span style="width: 5rem; line-height: 2.5rem; text-align: right;">鎾斁鍦板潃锛�</span>
+                        <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
+                    </div>
+                    <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+                        <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe锛�</span>
+                        <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
+                    </div>
+                    <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+                        <span style="width: 5rem; line-height: 2.5rem; text-align: right;">璧勬簮鍦板潃锛�</span>
+                        <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
+                    </div>
+                </el-tab-pane>
+                <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
+                <el-tab-pane label="褰曞儚鏌ヨ" name="record">
+                    <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="鏃ユ湡" @change="queryRecords()"></el-date-picker>
+                    <!--            <el-slider style="margin: 0 1rem 1rem 1rem;"-->
+                    <!--                       v-model="timeVal"-->
+                    <!--                       :min="timeMin"-->
+                    <!--                       :max="timeMax"-->
+                    <!--                       :step="5"-->
+                    <!--                       :marks="getTimeMakrs()"-->
+                    <!--                       :format-tooltip="formatTooltip">-->
+                    <!--            </el-slider>-->
+                    <!--            <range-slider :min="timeMin"-->
+                    <!--                          :max="timeMax"-->
+                    <!--                          :step="5"></range-slider>-->
 
-<!--						<el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="缁撴潫鏃堕棿"-->
-<!--						 @change="recordList()"></el-date-picker>-->
-						<el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading">
-							<el-table-column label="鍚嶇О" prop="name"></el-table-column>
-							<el-table-column label="鏂囦欢" prop="filePath"></el-table-column>
-							<el-table-column label="寮�濮嬫椂闂�" prop="startTime" :formatter="timeFormatter"></el-table-column>
-							<el-table-column label="缁撴潫鏃堕棿" prop="endTime" :formatter="timeFormatter"></el-table-column>
+                    <!--		<el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="缁撴潫鏃堕棿"-->
+                    <!--		 @change="recordList()"></el-date-picker>-->
+                    <el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading">
+                        <el-table-column label="鍚嶇О" prop="name"></el-table-column>
+                        <el-table-column label="鏂囦欢" prop="filePath"></el-table-column>
+                        <el-table-column label="寮�濮嬫椂闂�" prop="startTime" :formatter="timeFormatter"></el-table-column>
+                        <el-table-column label="缁撴潫鏃堕棿" prop="endTime" :formatter="timeFormatter"></el-table-column>
 
-							<el-table-column label="鎿嶄綔" >
-								<template slot-scope="scope">
-									<el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">鎾斁</el-button>
-								</template>
-							</el-table-column>
-						</el-table>
-					</el-tab-pane>
-					<!--閬ユ帶鐣岄潰-->
-					<el-tab-pane label="浜戝彴鎺у埗" name="control">
-						<div style="display: flex; justify-content: center;">
-							<div class="control-wrapper">
-								<div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
-									<i class="el-icon-caret-top"></i>
-									<div class="control-inner-btn control-inner"></div>
-								</div>
-								<div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
-									<i class="el-icon-caret-left"></i>
-									<div class="control-inner-btn control-inner"></div>
-								</div>
-								<div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
-									<i class="el-icon-caret-bottom"></i>
-									<div class="control-inner-btn control-inner"></div>
-								</div>
-								<div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
-									<i class="el-icon-caret-right"></i>
-									<div class="control-inner-btn control-inner"></div>
-								</div>
-								<div class="control-round">
-									<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
-								</div>
-								<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i
-									 class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
-								<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
-								 @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
-							</div>
-						</div>
+                        <el-table-column label="鎿嶄綔">
+                            <template slot-scope="scope">
+                                <el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">鎾斁</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+                <!--閬ユ帶鐣岄潰-->
+                <el-tab-pane label="浜戝彴鎺у埗" name="control">
+                    <div style="display: flex; justify-content: center;">
+                        <div class="control-wrapper">
+                            <div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
+                                <i class="el-icon-caret-top"></i>
+                                <div class="control-inner-btn control-inner"></div>
+                            </div>
+                            <div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
+                                <i class="el-icon-caret-left"></i>
+                                <div class="control-inner-btn control-inner"></div>
+                            </div>
+                            <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
+                                <i class="el-icon-caret-bottom"></i>
+                                <div class="control-inner-btn control-inner"></div>
+                            </div>
+                            <div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
+                                <i class="el-icon-caret-right"></i>
+                                <div class="control-inner-btn control-inner"></div>
+                            </div>
+                            <div class="control-round">
+                                <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
+                            </div>
+                            <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
+                            <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
+                        </div>
+                    </div>
 
-					</el-tab-pane>
-				</el-tabs>
-			</div>
-		</el-dialog>
-	</div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </el-dialog>
+</div>
 </template>
 
 <script>
-	import LivePlayer from '@liveqing/liveplayer'
-	export default {
-		name: 'devicePlayer',
-		props: {},
-		components: {
-			LivePlayer
-		},
-		computed: {
-			getPlayerShared: function() {
+import LivePlayer from '@liveqing/liveplayer'
+export default {
+    name: 'devicePlayer',
+    props: {},
+    components: {
+        LivePlayer
+    },
+    computed: {
+        getPlayerShared: function () {
+            return {
+                sharedUrl: window.location.host + '/' + this.videoUrl,
+                sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
+                sharedRtmp: this.videoUrl
+            };
+        }
+    },
+    created() {},
+    data() {
         return {
-					sharedUrl: window.location.host + '/' + this.videoUrl,
-					sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
-					sharedRtmp: this.videoUrl
-				};
-			}
-		},
-		created() {
-		},
-		data() {
-			return {
-				video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
-				videoUrl: '',
-				videoHistory: {
-					date: '',
-					searchHistoryResult: [] //濯掍綋娴佸巻鍙茶褰曟悳绱㈢粨鏋�
-				},
-        timeMakrs:{
-          // 0	: "0:00",
-          // // 60	: "1:00",
-          // 120	: "2:00",
-          // // 180	: "3:00",
-          // 240	: "4:00",
-          // // 300 : "5:00",
-          // 360	: "6:00",
-          // // 420	: "7:00",
-          // 480	: "8:00",
-          // 540	: "9:00",
-          600: "10:00",
-          // 660	: "11:00",
-          720	: "12:00",
-          // 780	: "13:00",
-          840	: "14:00",
-          // 900 : "15:00",
-          960	: "16:00",
-          // 1020	: "17:00",
-          1080	: "18:00",
-          // 1140	: "19:00",
-          // 1200  : "20:00",
-          // // 1260	: "21:00",
-          // 1320	: "22:00",
-          // // 1380	: "23:00",
-          // 1440	: "24:00"
+            video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
+            videoUrl: '',
+            videoHistory: {
+                date: '',
+                searchHistoryResult: [] //濯掍綋娴佸巻鍙茶褰曟悳绱㈢粨鏋�
+            },
+            timeMakrs: {
+                // 0	: "0:00",
+                // // 60	: "1:00",
+                // 120	: "2:00",
+                // // 180	: "3:00",
+                // 240	: "4:00",
+                // // 300 : "5:00",
+                // 360	: "6:00",
+                // // 420	: "7:00",
+                // 480	: "8:00",
+                // 540	: "9:00",
+                600: "10:00",
+                // 660	: "11:00",
+                720: "12:00",
+                // 780	: "13:00",
+                840: "14:00",
+                // 900 : "15:00",
+                960: "16:00",
+                // 1020	: "17:00",
+                1080: "18:00",
+                // 1140	: "19:00",
+                // 1200  : "20:00",
+                // // 1260	: "21:00",
+                // 1320	: "22:00",
+                // // 1380	: "23:00",
+                // 1440	: "24:00"
+            },
+            showVideoDialog: false,
+            ssrc: '',
+            deviceId: '',
+            channelId: '',
+            tabActiveName: 'media',
+            hasaudio: false,
+            loadingRecords: false,
+            recordsLoading: false,
+            timeVal: 0,
+            timeMin: 0,
+            timeMax: 1440,
+
+        };
+    },
+    methods: {
+        openDialog: function (tab, deviceId, channelId, param) {
+            this.tabActiveName = tab;
+            this.channelId = channelId;
+            this.deviceId = deviceId;
+            this.ssrc = "";
+            this.videoUrl = ""
+            if (!!this.$refs.videoPlayer) {
+                this.$refs.videoPlayer.pause();
+            }
+
+            switch (tab) {
+                case "media":
+                    this.play(param.streamInfo, param.hasAudio)
+                    break;
+                case "record":
+                    this.showVideoDialog = true;
+
+                    this.videoHistory.date = param.date;
+                    this.queryRecords()
+                    break;
+                case "control":
+                    break;
+            }
         },
-				showVideoDialog: false,
-				ssrc: '',
-				deviceId: '',
-				channelId: '',
-				tabActiveName: 'media',
-        hasaudio: false,
-        loadingRecords: false,
-        recordsLoading: false,
-        timeVal: 0,
-        timeMin: 0,
-        timeMax: 1440,
-
-			};
-		},
-		methods: {
-		  openDialog: function (tab, deviceId, channelId, param) {
-		    this.tabActiveName = tab;
-		    this.channelId = channelId;
-		    this.deviceId = deviceId;
-		    this.ssrc = "";
-		    this.videoUrl = ""
-        if (!!this.$refs.videoPlayer) {
-          this.$refs.videoPlayer.pause();
-        }
-
-		    switch(tab) {
-		      case "media":
-		        this.play(param.streamInfo, param.hasAudio)
-		        break;
-		      case "record":
-            this.showVideoDialog = true;
-
-            this.videoHistory.date = param.date;
-            this.queryRecords()
-		        break;
-		      case "control":
-		        break;
-        }
-      },
-      timeAxisSelTime:function (val) {
-        console.log(val)
-      },
-      getTimeMakrs(){
-        return this.timeMakrs;
-      },
+        timeAxisSelTime: function (val) {
+            console.log(val)
+        },
+        getTimeMakrs() {
+            return this.timeMakrs;
+        },
         play: function (streamInfo, hasAudio) {
             this.hasaudio = hasAudio;
             // 鏍规嵁濯掍綋娴佷俊鎭簩娆″垽鏂�
@@ -236,276 +232,278 @@
             );
         },
 
-      queryRecords: function() {
-				if (!this.videoHistory.date) {
-					return;
-				}
-				this.recordsLoading = true;
-				let that = this;
-				var startTime = this.videoHistory.date + " 00:00:00";
-				var endTime = this.videoHistory.date + " 23:59:59";
-				this.$axios({
-					method: 'get',
-					url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
-        }).then(function(res) {
-					// 澶勭悊鏃堕棿淇℃伅
-          that.videoHistory.searchHistoryResult = res.data.recordList;
-          that.recordsLoading = false;
-				}).catch(function(e) {
-					// that.videoHistory.searchHistoryResult = falsificationData.recordData;
-				});
+        queryRecords: function () {
+            if (!this.videoHistory.date) {
+                return;
+            }
+            this.recordsLoading = true;
+            this.videoHistory.searchHistoryResult = [];
+            let that = this;
+            var startTime = this.videoHistory.date + " 00:00:00";
+            var endTime = this.videoHistory.date + " 23:59:59";
+            this.$axios({
+                method: 'get',
+                url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
+            }).then(function (res) {
+                // 澶勭悊鏃堕棿淇℃伅
+                that.videoHistory.searchHistoryResult = res.data.recordList;
+                that.recordsLoading = false;
+            }).catch(function (e) {
+                console.log(e.message);
+                // that.videoHistory.searchHistoryResult = falsificationData.recordData;
+            });
 
-			},
-      onTimeChange: function (video) {
-        // this.queryRecords()
-      },
-			playRecord: function(row) {
-				let that = this;
-				if (that.ssrc  != "") {
-          that.stopPlayRecord(function (){
-            that.ssrc = "",
-            that.playRecord(row);
-          })
-        }else {
-          this.$axios({
-            method: 'get',
-            url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
-              row.endTime
-          }).then(function(res) {
-            var streamInfo = res.data;
-            that.ssrc = streamInfo.ssrc;
-            that.videoUrl = streamInfo.ws_flv;
-          });
-        }
-			},
-      stopPlayRecord: function (callback) {
-        this.$refs.videoPlayer.pause();
-        this.videoUrl = '';
-        this.$axios({
-          method: 'get',
-          url: '/api/playback/' + this.ssrc + '/stop'
-        }).then(function(res) {
-          if (callback) callback()
-        });
-      },
-			ptzCamera: function(leftRight, upDown, zoom) {
-				console.log('浜戝彴鎺у埗锛�' + leftRight + ' : ' + upDown + " : " + zoom);
-				let that = this;
-				this.$axios({
-					method: 'post',
-					url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
-						'&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
-				}).then(function(res) {});
-			},
-			//////////////////////鎾斁鍣ㄤ簨浠跺鐞�//////////////////////////
-			videoError:function(e){
-				console.log("鎾斁鍣ㄩ敊璇細"+JSON.stringify(e));
-			},
-      formatTooltip:function(val) {
-			  var h = parseInt(val/60);
-			  var hStr = h< 10 ? ("0" + h):h;
-			  var s = val%60;
-        var sStr = s< 10 ? ("0" + s):s;
-        return h + ":" + sStr;
-      },
-      timeFormatter: function (row, column, cellValue, index) {
-        return cellValue.split( " ")[1];
-      },
-      mergeTime: function (timeArray) {
-        var resultArray = [];
-        for (let i = 0; i < timeArray.length; i++) {
-          var startTime = new Date(timeArray[i].startTime);
-          var endTime = new Date(timeArray[i].endTime);
-          if (i ==0) {
-            resultArray[0] = {
-              startTime: startTime,
-              endTime: endTime
+        },
+        onTimeChange: function (video) {
+            // this.queryRecords()
+        },
+        playRecord: function (row) {
+            let that = this;
+            if (that.ssrc != "") {
+                that.stopPlayRecord(function () {
+                    that.ssrc = "",
+                        that.playRecord(row);
+                })
+            } else {
+                this.$axios({
+                    method: 'get',
+                    url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
+                        row.endTime
+                }).then(function (res) {
+                    var streamInfo = res.data;
+                    that.ssrc = streamInfo.ssrc;
+                    that.videoUrl = streamInfo.ws_flv;
+                });
             }
-          }
-          for (let j = 0; j < resultArray.length; j++) {
-            if (startTime > resultArray[j].endTime  ) { // 鍚堝苟
-              if (startTime - resultArray[j].endTime <= 1000){
-                resultArray[j].endTime = endTime;
-              }else {
-                resultArray[resultArray.length] = {
-                  startTime: startTime,
-                  endTime: endTime
+        },
+        stopPlayRecord: function (callback) {
+            this.$refs.videoPlayer.pause();
+            this.videoUrl = '';
+            this.$axios({
+                method: 'get',
+                url: '/api/playback/' + this.ssrc + '/stop'
+            }).then(function (res) {
+                if (callback) callback()
+            });
+        },
+        ptzCamera: function (leftRight, upDown, zoom) {
+            console.log('浜戝彴鎺у埗锛�' + leftRight + ' : ' + upDown + " : " + zoom);
+            let that = this;
+            this.$axios({
+                method: 'post',
+                url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
+                    '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
+            }).then(function (res) {});
+        },
+        //////////////////////鎾斁鍣ㄤ簨浠跺鐞�//////////////////////////
+        videoError: function (e) {
+            console.log("鎾斁鍣ㄩ敊璇細" + JSON.stringify(e));
+        },
+        formatTooltip: function (val) {
+            var h = parseInt(val / 60);
+            var hStr = h < 10 ? ("0" + h) : h;
+            var s = val % 60;
+            var sStr = s < 10 ? ("0" + s) : s;
+            return h + ":" + sStr;
+        },
+        timeFormatter: function (row, column, cellValue, index) {
+            return cellValue.split(" ")[1];
+        },
+        mergeTime: function (timeArray) {
+            var resultArray = [];
+            for (let i = 0; i < timeArray.length; i++) {
+                var startTime = new Date(timeArray[i].startTime);
+                var endTime = new Date(timeArray[i].endTime);
+                if (i == 0) {
+                    resultArray[0] = {
+                        startTime: startTime,
+                        endTime: endTime
+                    }
                 }
-              }
-            }else if(resultArray[j].startTime > endTime ) { // 鍚堝苟
-              if (resultArray[j].startTime - endTime <= 1000) {
-                resultArray[j].startTime = startTime;
-              }else {
-                resultArray[resultArray.length] = {
-                  startTime: startTime,
-                  endTime: endTime
+                for (let j = 0; j < resultArray.length; j++) {
+                    if (startTime > resultArray[j].endTime) { // 鍚堝苟
+                        if (startTime - resultArray[j].endTime <= 1000) {
+                            resultArray[j].endTime = endTime;
+                        } else {
+                            resultArray[resultArray.length] = {
+                                startTime: startTime,
+                                endTime: endTime
+                            }
+                        }
+                    } else if (resultArray[j].startTime > endTime) { // 鍚堝苟
+                        if (resultArray[j].startTime - endTime <= 1000) {
+                            resultArray[j].startTime = startTime;
+                        } else {
+                            resultArray[resultArray.length] = {
+                                startTime: startTime,
+                                endTime: endTime
+                            }
+                        }
+                    }
                 }
-              }
             }
-          }
+            console.log(resultArray)
+            return resultArray;
         }
-        console.log(resultArray)
-        return resultArray;
-      }
-		}
-	};
+    }
+};
 </script>
 
 <style>
-	.control-wrapper {
-		position: relative;
-		width: 6.25rem;
-		height: 6.25rem;
-		max-width: 6.25rem;
-		max-height: 6.25rem;
-		margin: 0 auto;
-		border-radius: 100%;
-		float: left;
-	}
+.control-wrapper {
+    position: relative;
+    width: 6.25rem;
+    height: 6.25rem;
+    max-width: 6.25rem;
+    max-height: 6.25rem;
+    margin: 0 auto;
+    border-radius: 100%;
+    float: left;
+}
 
-	.control-btn {
-		display: flex;
-		justify-content: center;
-		position: absolute;
-		width: 44%;
-		height: 44%;
-		border-radius: 5px;
-		border: 1px solid #78aee4;
-		box-sizing: border-box;
-		transition: all 0.3s linear;
-	}
+.control-btn {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    width: 44%;
+    height: 44%;
+    border-radius: 5px;
+    border: 1px solid #78aee4;
+    box-sizing: border-box;
+    transition: all 0.3s linear;
+}
 
-	.control-btn i {
-		font-size: 20px;
-		color: #78aee4;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+.control-btn i {
+    font-size: 20px;
+    color: #78aee4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
-	.control-round {
-		position: absolute;
-		top: 21%;
-		left: 21%;
-		width: 58%;
-		height: 58%;
-		background: #fff;
-		border-radius: 100%;
-	}
+.control-round {
+    position: absolute;
+    top: 21%;
+    left: 21%;
+    width: 58%;
+    height: 58%;
+    background: #fff;
+    border-radius: 100%;
+}
 
-	.control-round-inner {
-		position: absolute;
-		left: 15%;
-		top: 15%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 70%;
-		height: 70%;
-		font-size: 40px;
-		color: #78aee4;
-		border: 1px solid #78aee4;
-		border-radius: 100%;
-		transition: all 0.3s linear;
-	}
+.control-round-inner {
+    position: absolute;
+    left: 15%;
+    top: 15%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 70%;
+    height: 70%;
+    font-size: 40px;
+    color: #78aee4;
+    border: 1px solid #78aee4;
+    border-radius: 100%;
+    transition: all 0.3s linear;
+}
 
-	.control-inner-btn {
-		position: absolute;
-		width: 60%;
-		height: 60%;
-		background: #fafafa;
-	}
+.control-inner-btn {
+    position: absolute;
+    width: 60%;
+    height: 60%;
+    background: #fafafa;
+}
 
-	.control-top {
-		top: -8%;
-		left: 27%;
-		transform: rotate(-45deg);
-		border-radius: 5px 100% 5px 0;
-	}
+.control-top {
+    top: -8%;
+    left: 27%;
+    transform: rotate(-45deg);
+    border-radius: 5px 100% 5px 0;
+}
 
-	.control-top i {
-		transform: rotate(45deg);
-		border-radius: 5px 100% 5px 0;
-	}
+.control-top i {
+    transform: rotate(45deg);
+    border-radius: 5px 100% 5px 0;
+}
 
-	.control-top .control-inner {
-		left: -1px;
-		bottom: 0;
-		border-top: 1px solid #78aee4;
-		border-right: 1px solid #78aee4;
-		border-radius: 0 100% 0 0;
-	}
+.control-top .control-inner {
+    left: -1px;
+    bottom: 0;
+    border-top: 1px solid #78aee4;
+    border-right: 1px solid #78aee4;
+    border-radius: 0 100% 0 0;
+}
 
-	.control-top .fa {
-		transform: rotate(45deg) translateY(-7px);
-	}
+.control-top .fa {
+    transform: rotate(45deg) translateY(-7px);
+}
 
-	.control-left {
-		top: 27%;
-		left: -8%;
-		transform: rotate(45deg);
-		border-radius: 5px 0 5px 100%;
-	}
+.control-left {
+    top: 27%;
+    left: -8%;
+    transform: rotate(45deg);
+    border-radius: 5px 0 5px 100%;
+}
 
-	.control-left i {
-		transform: rotate(-45deg);
-	}
+.control-left i {
+    transform: rotate(-45deg);
+}
 
-	.control-left .control-inner {
-		right: -1px;
-		top: -1px;
-		border-bottom: 1px solid #78aee4;
-		border-left: 1px solid #78aee4;
-		border-radius: 0 0 0 100%;
-	}
+.control-left .control-inner {
+    right: -1px;
+    top: -1px;
+    border-bottom: 1px solid #78aee4;
+    border-left: 1px solid #78aee4;
+    border-radius: 0 0 0 100%;
+}
 
-	.control-left .fa {
-		transform: rotate(-45deg) translateX(-7px);
-	}
+.control-left .fa {
+    transform: rotate(-45deg) translateX(-7px);
+}
 
-	.control-right {
-		top: 27%;
-		right: -8%;
-		transform: rotate(45deg);
-		border-radius: 5px 100% 5px 0;
-	}
+.control-right {
+    top: 27%;
+    right: -8%;
+    transform: rotate(45deg);
+    border-radius: 5px 100% 5px 0;
+}
 
-	.control-right i {
-		transform: rotate(-45deg);
-	}
+.control-right i {
+    transform: rotate(-45deg);
+}
 
-	.control-right .control-inner {
-		left: -1px;
-		bottom: -1px;
-		border-top: 1px solid #78aee4;
-		border-right: 1px solid #78aee4;
-		border-radius: 0 100% 0 0;
-	}
+.control-right .control-inner {
+    left: -1px;
+    bottom: -1px;
+    border-top: 1px solid #78aee4;
+    border-right: 1px solid #78aee4;
+    border-radius: 0 100% 0 0;
+}
 
-	.control-right .fa {
-		transform: rotate(-45deg) translateX(7px);
-	}
+.control-right .fa {
+    transform: rotate(-45deg) translateX(7px);
+}
 
-	.control-bottom {
-		left: 27%;
-		bottom: -8%;
-		transform: rotate(45deg);
-		border-radius: 0 5px 100% 5px;
-	}
+.control-bottom {
+    left: 27%;
+    bottom: -8%;
+    transform: rotate(45deg);
+    border-radius: 0 5px 100% 5px;
+}
 
-	.control-bottom i {
-		transform: rotate(-45deg);
-	}
+.control-bottom i {
+    transform: rotate(-45deg);
+}
 
-	.control-bottom .control-inner {
-		top: -1px;
-		left: -1px;
-		border-bottom: 1px solid #78aee4;
-		border-right: 1px solid #78aee4;
-		border-radius: 0 0 100% 0;
-	}
+.control-bottom .control-inner {
+    top: -1px;
+    left: -1px;
+    border-bottom: 1px solid #78aee4;
+    border-right: 1px solid #78aee4;
+    border-radius: 0 0 100% 0;
+}
 
-	.control-bottom .fa {
-		transform: rotate(-45deg) translateY(7px);
-	}
+.control-bottom .fa {
+    transform: rotate(-45deg) translateY(7px);
+}
 </style>

--
Gitblit v1.8.0