From 5d0ae87e23e997960bf607340570f7bbeb7160b4 Mon Sep 17 00:00:00 2001
From: czt <czt18638530771@163.com>
Date: 星期二, 09 十二月 2025 19:10:57 +0800
Subject: [PATCH] 安防页面提交1
---
fzzy-igdss-web/src/main/resources/templates/security/video-aerial.html | 77 +
fzzy-igdss-web/src/main/resources/static/js/plugins/drag/drag-drop.js | 1
fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/SecurityController.java | 104 ++
fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/file/FileController.java | 11
fzzy-igdss-web/src/main/resources/static/security/video-webrtc.js | 242 +++++
fzzy-igdss-web/src/main/resources/static/img/web/security/sp-arrow.png | 0
fzzy-igdss-web/src/main/resources/static/security/video-list.css | 613 +++++++++++++
fzzy-igdss-view/pom.xml | 34
fzzy-igdss-web/src/main/resources/static/security/video-aerial.js | 165 +++
fzzy-igdss-web/src/main/resources/static/security/video-webrtc.css | 579 ++++++++++++
fzzy-igdss-web/src/main/resources/static/img/web/security/ca-4.png | 0
fzzy-igdss-view/src/main/java/com/fzzy/igds/Dept.view.xml | 29
/dev/null | 10
fzzy-igdss-view/src/main/java/com/fzzy/igds/FileUploadManage.java | 16
fzzy-igdss-web/src/main/resources/static/img/web/security/tit-redBg.png | 0
fzzy-igdss-web/src/main/resources/static/security/video-list.js | 204 ++++
fzzy-igdss-web/src/main/java/com/fzzy/sys/manager/security/SecManager.java | 82 +
fzzy-igdss-web/src/main/resources/templates/security/video-list.html | 236 +++++
fzzy-igdss-web/src/main/resources/templates/common/preview-img.html | 50 +
fzzy-igdss-web/src/main/resources/templates/security/video-webrtc.html | 210 ++++
fzzy-igdss-core/src/main/java/com/fzzy/igds/domain/Dept.java | 10
fzzy-igdss-core/src/main/java/com/fzzy/igds/constant/CameraPlayType.java | 38
22 files changed, 2,644 insertions(+), 67 deletions(-)
diff --git a/fzzy-igdss-core/src/main/java/com/fzzy/igds/constant/CameraPlayType.java b/fzzy-igdss-core/src/main/java/com/fzzy/igds/constant/CameraPlayType.java
new file mode 100644
index 0000000..c337f24
--- /dev/null
+++ b/fzzy-igdss-core/src/main/java/com/fzzy/igds/constant/CameraPlayType.java
@@ -0,0 +1,38 @@
+package com.fzzy.igds.constant;
+
+import lombok.Getter;
+
+/**
+ * @Description 鎶撴媿鏂瑰紡
+ * @Author CZT
+ * @Date 2024/12/10 16:48
+ */
+@Getter
+public enum CameraPlayType {
+
+ PLAY_TYPE_DEFAULT("DEFAULT", "绯荤粺榛樿"),
+ PLAY_TYPE_WEB_RTC("WEB_RTC", "WEB-RTC鎾斁"),
+ PLAY_TYPE_VLC("VLC", "VLC鎻掍欢"),
+ PLAY_TYPE_HIK_WEB4("HIK_WEB4", "娴峰悍web鎻掍欢"),
+ PLAY_TYPE_HIK_MEDIA("MEDIA_HIK", "娴峰悍缁煎悎瀹夐槻骞冲彴");
+
+ private String code;
+ private String name;
+
+ private CameraPlayType(String code, String name) {
+ this.code = code;
+ this.name = name;
+ }
+
+ public static String getName(String code){
+ if(null == code) {
+ return null;
+ }
+ if(CameraPlayType.PLAY_TYPE_DEFAULT.getCode().equals(code)) return CameraPlayType.PLAY_TYPE_DEFAULT.getName();
+ if(CameraPlayType.PLAY_TYPE_WEB_RTC.getCode().equals(code)) return CameraPlayType.PLAY_TYPE_WEB_RTC.getName();
+ if(CameraPlayType.PLAY_TYPE_VLC.getCode().equals(code)) return CameraPlayType.PLAY_TYPE_VLC.getName();
+ if(CameraPlayType.PLAY_TYPE_HIK_WEB4.getCode().equals(code)) return CameraPlayType.PLAY_TYPE_HIK_WEB4.getName();
+ if(CameraPlayType.PLAY_TYPE_HIK_MEDIA.getCode().equals(code)) return CameraPlayType.PLAY_TYPE_HIK_MEDIA.getName();
+ return code;
+ }
+}
diff --git a/fzzy-igdss-core/src/main/java/com/fzzy/igds/domain/Dept.java b/fzzy-igdss-core/src/main/java/com/fzzy/igds/domain/Dept.java
index ce248a9..999e00d 100644
--- a/fzzy-igdss-core/src/main/java/com/fzzy/igds/domain/Dept.java
+++ b/fzzy-igdss-core/src/main/java/com/fzzy/igds/domain/Dept.java
@@ -72,12 +72,12 @@
/**
* --------楦熺灠鍥句俊鎭�--------
**/
- @Column(name = "img_id", columnDefinition = "varchar(50) COMMENT '楦熺灠鍥緄d'")
- @TableField("img_id")
- private String imgId;
+ @Column(name = "img_path", columnDefinition = "varchar(100) COMMENT '楦熺灠鍥惧叏璺緞'")
+ @TableField("img_path")
+ private String imgPath;
- @Column(name = "file_name", columnDefinition = "varchar(50) COMMENT '楦熺灠鍥惧悕绉�'")
- @TableField("file_name")
+ @Column(name = "img_name", columnDefinition = "varchar(50) COMMENT '楦熺灠鍥惧悕绉�'")
+ @TableField("img_name")
private String imgName;
}
\ No newline at end of file
diff --git a/fzzy-igdss-view/pom.xml b/fzzy-igdss-view/pom.xml
index 38c1a6e..7bc96d8 100644
--- a/fzzy-igdss-view/pom.xml
+++ b/fzzy-igdss-view/pom.xml
@@ -97,40 +97,16 @@
</dependency>
<dependency>
- <groupId>com.bstek.dorado</groupId>
- <artifactId>dorado-uploader</artifactId>
- <version>1.0.20</version>
- <exclusions>
- <exclusion>
- <artifactId>slf4j-jcl</artifactId>
- <groupId>org.slf4j</groupId>
- </exclusion>
- <exclusion>
- <artifactId>slf4j-log4j12</artifactId>
- <groupId>org.slf4j</groupId>
- </exclusion>
- <exclusion>
- <artifactId>log4j</artifactId>
- <groupId>log4j</groupId>
- </exclusion>
- <exclusion>
- <artifactId>slf4j-jdk14</artifactId>
- <groupId>org.slf4j</groupId>
- </exclusion>
- </exclusions>
- </dependency>
-
- <dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-jexl</artifactId>
<version>2.1.1</version>
</dependency>
-
+
<dependency>
- <groupId>com.thoughtworks.paranamer</groupId>
- <artifactId>paranamer</artifactId>
- <version>2.3</version>
-</dependency>
+ <groupId>com.thoughtworks.paranamer</groupId>
+ <artifactId>paranamer</artifactId>
+ <version>2.3</version>
+ </dependency>
</dependencies>
diff --git a/fzzy-igdss-view/src/main/java/com/fzzy/igds/Dept.view.xml b/fzzy-igdss-view/src/main/java/com/fzzy/igds/Dept.view.xml
index a04ea00..c8b02cd 100644
--- a/fzzy-igdss-view/src/main/java/com/fzzy/igds/Dept.view.xml
+++ b/fzzy-igdss-view/src/main/java/com/fzzy/igds/Dept.view.xml
@@ -111,9 +111,9 @@
<Property name="label">鏇存柊浜�</Property>
<Property name="readOnly">true</Property>
</PropertyDef>
- <PropertyDef name="imgId">
+ <PropertyDef name="imgPath">
<Property></Property>
- <Property name="label">楦熺灠鍥緄d</Property>
+ <Property name="label">鍥捐矾寰�</Property>
</PropertyDef>
<PropertyDef name="imgName">
<Property></Property>
@@ -122,20 +122,20 @@
</DataType>
</Model>
<View layout="padding:10">
- <ClientEvent name="onClick">/**
+ <ClientEvent name="onClick">
/**
* 棰勮鍥剧墖
*/
showImg = function(){
var cur = view.get("#dsMain.data:#");
- var imgName = cur.get("imgId");
+ var imgName = cur.get("imgName");
if(!imgName){
- $alert("娌℃湁涓婁紶瑙嗛淇℃伅锛屾棤娉曢瑙堛��");
+ $alert("娌℃湁涓婁紶楦熺灠鍥句俊鎭紝鏃犳硶棰勮銆�");
return;
}
- var id = cur.get("id");
+ var imgPath = cur.get("imgPath");

- view.get("#iFrameImg").set("path", "./basic/file/dept-img?id=" + id);
+ view.get("#iFrameImg").set("path", "/file/dept-img?imgPath=" + imgPath);
view.get("#dialogImg").show();

};</ClientEvent>
@@ -345,9 +345,18 @@
<Container>
<Button layoutConstraint="left">
<Property name="action">uploadFileImg</Property>
- <Property name="caption">楦熺灠鍥句笂浼�...</Property>
+ <Property name="caption">楦熺灠鍥句笂浼�</Property>
<Property name="exClassName">btn2</Property>
<Property name="iconClass">fa fa-cloud-upload</Property>
+ </Button>
+ <Label layoutConstraint="left">
+ <Property name="width">10px</Property>
+ </Label>
+ <Button layoutConstraint="left">
+ <ClientEvent name="onClick">showImg();</ClientEvent>
+ <Property name="caption">楦熺灠鍥鹃瑙�</Property>
+ <Property name="exClassName">btn4</Property>
+ <Property name="iconClass">fa fa-picture-o</Property>
</Button>
</Container>
<Link>
@@ -453,9 +462,9 @@
</Container>
</CustomDropDown>
<UploadAction id="uploadFileImg">
- <ClientEvent name="onFileUploaded">var imgId = arg.returnValue;
+ <ClientEvent name="onFileUploaded">var imgPath = arg.returnValue;
var data = view.get("#dsMain.data:#");
- data.set("imgId",imgId);
+ data.set("imgPath",imgPath);
data.set("imgName",arg.file.name);</ClientEvent>
<Property name="fileResolver">fileUploadManage#imgFile</Property>
<Property name="maxFileSize">50MB</Property>
diff --git a/fzzy-igdss-view/src/main/java/com/fzzy/igds/FileUploadManage.java b/fzzy-igdss-view/src/main/java/com/fzzy/igds/FileUploadManage.java
index 8066365..a32b382 100644
--- a/fzzy-igdss-view/src/main/java/com/fzzy/igds/FileUploadManage.java
+++ b/fzzy-igdss-view/src/main/java/com/fzzy/igds/FileUploadManage.java
@@ -4,6 +4,7 @@
import com.bstek.dorado.uploader.annotation.FileResolver;
import com.fzzy.igds.service.FileService;
import com.fzzy.igds.utils.ContextUtil;
+import com.ruoyi.common.config.FrameworkConfig;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.apache.commons.lang.time.DateFormatUtils;
@@ -13,7 +14,6 @@
import java.io.IOException;
import java.util.Date;
import java.util.Map;
-
/**
* @Description Dorado7 闄勪欢涓婁紶鍏叡绠＄悊灞�
@@ -38,16 +38,22 @@
@FileResolver
public String imgFile(UploadFile file, Map<String, Object> parameter) {
- String fileId = null;
+ String filePath = null;
try {
String basePath = fileService.getFileSavePath("DEPT");
- fileId = "aerial-" + ContextUtil.subDeptId(null)
+ //鏂版枃浠跺悕
+ String fileId = "aerial-" + ContextUtil.subDeptId(null)
+ file.getFileName().substring(
file.getFileName().lastIndexOf("."));
+ //鏂囦欢鍏ㄨ矾寰�
+ filePath = basePath + fileId;
+ //淇濆瓨
+ file.transferTo(new File(filePath));
- file.transferTo(new File(basePath + fileId));
+ //鏇挎崲鍚庢枃浠跺叏璺緞
+ filePath = filePath.replace(FrameworkConfig.getProfile(), "/profile/");
} catch (IllegalStateException e) {
e.printStackTrace();
@@ -55,7 +61,7 @@
e.printStackTrace();
}
- return fileId;
+ return filePath;
}
/**
diff --git a/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/file/FileController.java b/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/file/FileController.java
index 7678b97..d60c74e 100644
--- a/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/file/FileController.java
+++ b/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/file/FileController.java
@@ -23,7 +23,7 @@
*/
@Slf4j
@Controller
-@RequestMapping("basic/file")
+@RequestMapping("file")
public class FileController {
@Resource
@@ -35,15 +35,12 @@
* @return
*/
@RequestMapping("/dept-img")
- public String deptImg(@RequestParam(value = "id", required = true) String id,
+ public String deptImg(@RequestParam(value = "imgPath", required = true) String imgPath,
ModelMap view) {
- if(StringUtils.isNotEmpty(id)){
- String imgPath = fileManager.getDeptFile(id);;
- view.put("imgPath", imgPath);
- }
+ view.put("imgPath", imgPath);
- return "web/common/preview-img";
+ return "common/preview-img";
}
diff --git a/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/SecurityController.java b/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/SecurityController.java
index 6b07a28..c51a6d2 100644
--- a/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/SecurityController.java
+++ b/fzzy-igdss-web/src/main/java/com/fzzy/sys/controller/security/SecurityController.java
@@ -1,8 +1,25 @@
package com.fzzy.sys.controller.security;
+import com.fzzy.igds.constant.CameraPlayType;
+import com.fzzy.igds.constant.Constant;
+import com.fzzy.igds.data.PageResponse;
+import com.fzzy.igds.domain.Camera;
+import com.fzzy.igds.domain.Dept;
+import com.fzzy.igds.service.CoreDeptService;
+import com.fzzy.igds.utils.ContextUtil;
+import com.fzzy.sys.manager.security.SecManager;
+import com.ruoyi.common.core.domain.entity.SysUser;
import lombok.extern.slf4j.Slf4j;
+import com.ruoyi.common.utils.StringUtils;
import org.springframework.stereotype.Controller;
+import org.springframework.ui.ModelMap;
+import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import javax.annotation.Resource;
+import java.util.List;
/**
* @Description 瀹夐槻controller灞�
@@ -11,15 +28,100 @@
*/
@Slf4j
@Controller
-@RequestMapping("/security")
+@RequestMapping("security")
public class SecurityController {
private static final String prefix = "security";
+ @Resource
+ private SecManager secManager;
+ @Resource
+ private CoreDeptService deptService;
+
+ /**
+ * 鐩戞帶姒傝
+ *
+ * @param type 1.琛ㄧず2.5D楦熺灠鍥鹃〉闈㈤瑙堬紱2.琛ㄧず鍒楄〃棰勮椤甸潰
+ * @return
+ */
+ @RequestMapping("/aerial-video")
+ public String aerialVideo(
+ @RequestParam(value = "type", required = false) String type,
+ ModelMap view) {
+
+ SysUser user = ContextUtil.getLoginUser();
+ view.put(Constant.MODEL_KEY_LOGIN_USER, user);
+
+ String deptId = ContextUtil.subDeptId(user);
+ List<Camera> listCamera = secManager.listCamera(deptId, user.getCompanyId());
+
+ view.put("deptId", deptId);
+ view.put("listCamera", listCamera);
+
+ //榛樿鐩戞帶鍒楄〃椤甸潰
+ String viewUrl = prefix + "/video-list";
+
+ if (StringUtils.isNotBlank( type) && "1".equals(type)) {
+ Dept dept = deptService.getDeptById(deptId);
+ if (dept != null && StringUtils.isNotEmpty(dept.getImgPath())) {
+ view.put("backgroundImg", dept.getImgPath());
+ viewUrl = prefix + "/video-aerial";
+ }
+
+ }
+ return viewUrl;
+ }
+ /**
+ * 楦熺灠鍥鹃〉闈� -- 瑙嗛鎾斁锛岄�氳繃鎾斁鍙傛暟涓嶅悓璺宠浆涓嶅悓椤甸潰鎾斁
+ *
+ * @param cameraId 鎽勫儚鏈虹郴缁烮D
+ * @param playType 閰嶇疆鐨勬挱鏀炬柟寮�
+ * @param time 鏃堕棿鍙傛暟锛屾棤鍏蜂綋鍚箟
+ * @return
+ */
+ @RequestMapping("/video-play")
+ public String play(@RequestParam(value = "cameraId", required = true) String cameraId,
+ @RequestParam(value = "playType", required = false) String playType,
+ @RequestParam(value = "time", required = false) String time,
+ ModelMap view) {
+ SysUser user = ContextUtil.getLoginUser();
+ // 璁剧疆榛樿鎾斁鏂瑰紡
+ if (org.apache.commons.lang3.StringUtils.isEmpty(playType)) {
+ playType = CameraPlayType.PLAY_TYPE_VLC.getCode();
+ }
+ // 璁剧疆鎽勫儚澶翠俊鎭�
+ Camera camera = secManager.getCameraById(null, cameraId);
+ if (camera == null) {
+ view.put("errorMsg", "鑾峰彇瑙嗛璁惧鍑洪敊锛岃鍏堝埛鏂扮紦瀛橈紒");
+ }
+ view.put("cameraData", camera);
+
+ String viewUrl = prefix + "/video-webrtc";
+
+ //WEB-RTC澶у崕鎾斁
+ if (CameraPlayType.PLAY_TYPE_WEB_RTC.getCode().equals(playType)) {
+ viewUrl = prefix + "/video-webrtc";
+ }
+
+ return viewUrl;
+ }
+
+ /***
+ * 瑙嗛楦熺灠鍥句腑鏇存敼鎽勫儚澶翠綅缃�
+ *
+ * @param params
+ * @return
+ */
+ @RequestMapping("/update-pos")
+ @ResponseBody
+ public PageResponse<String> updatePos(
+ @RequestBody List<Camera> params) {
+ return secManager.updatePos(params);
+ }
}
diff --git a/fzzy-igdss-web/src/main/java/com/fzzy/sys/manager/security/SecManager.java b/fzzy-igdss-web/src/main/java/com/fzzy/sys/manager/security/SecManager.java
new file mode 100644
index 0000000..dfaa182
--- /dev/null
+++ b/fzzy-igdss-web/src/main/java/com/fzzy/sys/manager/security/SecManager.java
@@ -0,0 +1,82 @@
+package com.fzzy.sys.manager.security;
+
+import com.fzzy.igds.constant.RespCodeEnum;
+import com.fzzy.igds.data.PageResponse;
+import com.fzzy.igds.domain.Camera;
+import com.fzzy.igds.service.SecCameraService;
+import com.fzzy.igds.utils.ContextUtil;
+import com.ruoyi.common.utils.StringUtils;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * @Description
+ * @Author CZT
+ * @Date 2025/12/9 9:19
+ */
+@Slf4j
+@Component
+public class SecManager {
+
+ @Resource
+ private SecCameraService secCameraService;
+
+ /**
+ *
+ * @param deptId
+ * @param companyId
+ * @return
+ */
+ public List<Camera> listCamera(String deptId, String companyId) {
+ if (null == deptId){
+ return null;
+ }
+
+ List<Camera> list = secCameraService.getCameraByDeptId(companyId, deptId);
+
+ if (null == list || list.isEmpty()){
+ return null;
+ }
+
+ return list;
+ }
+
+ /**
+ * 鏍规嵁鐩戞帶ID鑾峰彇鐩戞帶淇℃伅
+ * @param companyId
+ * @param cameraId
+ * @return
+ */
+ public Camera getCameraById(String companyId, String cameraId) {
+ if (StringUtils.isEmpty(companyId)) {
+ companyId = ContextUtil.getCompanyId();
+ }
+ if (StringUtils.isEmpty(cameraId)){
+ return null;
+ }
+ return secCameraService.getCameraById(companyId, cameraId);
+ }
+
+ /**
+ *
+ * @param params
+ * @return
+ */
+ public PageResponse<String> updatePos(List<Camera> params) {
+
+ if (null == params || params.isEmpty()) {
+ return new PageResponse<>(RespCodeEnum.CODE_2000.getCode(),
+ "褰撳墠娌℃湁闇�瑕佹墽琛岀殑淇℃伅锛�");
+ }
+
+ for (Camera param : params) {
+ secCameraService.updatePos(param);
+ }
+
+ secCameraService.refreshCache(ContextUtil.getCompanyId());
+ return new PageResponse<>(RespCodeEnum.CODE_0000, "鎵ц鎴愬姛锛侊紒");
+ }
+}
diff --git a/fzzy-igdss-web/src/main/java/com/fzzy/sys/manager/security/SecurityManager.java b/fzzy-igdss-web/src/main/java/com/fzzy/sys/manager/security/SecurityManager.java
deleted file mode 100644
index d4110fb..0000000
--- a/fzzy-igdss-web/src/main/java/com/fzzy/sys/manager/security/SecurityManager.java
+++ /dev/null
@@ -1,18 +0,0 @@
-package com.fzzy.sys.manager.security;
-
-import lombok.extern.slf4j.Slf4j;
-import org.springframework.stereotype.Component;
-
-/**
- * @Description
- * @Author CZT
- * @Date 2025/12/9 9:19
- */
-@Slf4j
-@Component
-public class SecurityManager {
-
-
-
-
-}
diff --git a/fzzy-igdss-web/src/main/resources/static/img/web/security/ca-4.png b/fzzy-igdss-web/src/main/resources/static/img/web/security/ca-4.png
new file mode 100644
index 0000000..af25ca7
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/img/web/security/ca-4.png
Binary files differ
diff --git a/fzzy-igdss-web/src/main/resources/static/img/web/security/sp-arrow.png b/fzzy-igdss-web/src/main/resources/static/img/web/security/sp-arrow.png
new file mode 100644
index 0000000..6df3964
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/img/web/security/sp-arrow.png
Binary files differ
diff --git a/fzzy-igdss-web/src/main/resources/static/img/web/security/tit-redBg.png b/fzzy-igdss-web/src/main/resources/static/img/web/security/tit-redBg.png
new file mode 100644
index 0000000..fc302b7
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/img/web/security/tit-redBg.png
Binary files differ
diff --git a/fzzy-igdss-web/src/main/resources/static/js/plugins/drag/drag-drop.js b/fzzy-igdss-web/src/main/resources/static/js/plugins/drag/drag-drop.js
new file mode 100644
index 0000000..fc13c6d
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/js/plugins/drag/drag-drop.js
@@ -0,0 +1 @@
+Dragdrop=function(window){var doc=window.document;var E={on:function(el,type,fn){el.addEventListener?el.addEventListener(type,fn,false):el.attachEvent?el.attachEvent("on"+type,fn):el['on'+type]=fn},un:function(el,type,fn){el.removeEventListener?el.removeEventListener(type,fn,false):el.detachEvent?el.detachEvent("on"+type,fn):el['on'+type]=null},evt:function(e){return e||window.event}};return function(opt){var conf=null,defaultConf,diffX,diffY;function Config(opt){this.target=opt.target;this.bridge=opt.bridge;this.dragable=opt.dragable!=false;this.dragX=opt.dragX!=false;this.dragY=opt.dragY!=false;this.area=opt.area;this.callback=opt.callback};function Dragdrop(opt){if(!opt){return}conf=new Config(opt);defaultConf=new Config(opt);conf.bridge?E.on(conf.bridge,'mousedown',mousedown):E.on(conf.target,'mousedown',mousedown)};Dragdrop.prototype={dragX:function(){conf.dragX=true;conf.dragY=false},dragY:function(b){conf.dragY=true;conf.dragX=false},dragAll:function(){conf.dragX=true;conf.dragY=true},setArea:function(a){conf.area=a},setBridge:function(b){conf.bridge=b},setDragable:function(b){conf.dragable=b},reStore:function(){conf=new Config(defaultConf);conf.target.style.top='0px';conf.target.style.left='0px'},getDragX:function(){return conf.dragX},getDragY:function(){return conf.dragY}};function mousedown(e){e=E.evt(e);var el=conf.target;el.style.position='absolute';el.style.cursor='move';if(el.setCapture){E.on(el,"losecapture",mouseup);el.setCapture();e.cancelBubble=true}else if(window.captureEvents){e.stopPropagation();E.on(window,"blur",mouseup);e.preventDefault()}diffX=e.clientX-el.offsetLeft;diffY=e.clientY-el.offsetTop;E.on(doc,'mousemove',mousemove);E.on(doc,'mouseup',mouseup)};function mousemove(e){var el=conf.target,e=E.evt(e),moveX=e.clientX-diffX,moveY=e.clientY-diffY;var minX,maxX,minY,maxY;if(conf.area){minX=conf.area[0];maxX=conf.area[1];minY=conf.area[2];maxY=conf.area[3];moveX<minX&&(moveX=minX);moveX>maxX&&(moveX=maxX);moveY<minY&&(moveY=minY);moveY>maxY&&(moveY=maxY)}if(conf.dragable){conf.dragX&&(el.style.left=moveX+'px');conf.dragY&&(el.style.top=moveY+'px');if(conf.callback){var obj={moveX:moveX,moveY:moveY};conf.callback.call(conf,obj)}}};function mouseup(e){var el=conf.target;el.style.cursor='default';E.un(doc,'mousemove',mousemove);E.un(doc,'mouseup',mouseup);if(el.releaseCapture){E.un(el,"losecapture",mouseup);el.releaseCapture()}if(window.releaseEvents){E.un(window,"blur",mouseup)}};return new Dragdrop(opt)}}(this);
\ No newline at end of file
diff --git a/fzzy-igdss-web/src/main/resources/static/security/video-aerial.js b/fzzy-igdss-web/src/main/resources/static/security/video-aerial.js
new file mode 100644
index 0000000..c0a8064
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/security/video-aerial.js
@@ -0,0 +1,165 @@
+var layer;
+
+var windowWidth = 1700;
+var windowHeight = 810;
+
+$(function () {
+ layui.use(['layer'], function () {
+ layer = layui.layer;
+ addDevice(listCamera);
+ });
+});
+
+window.onload = function () {
+ $("#m-container").css("background-image", "url(" + backgroundImg + ")");
+
+ windowWidth = document.body.offsetWidth;
+ windowHeight = document.body.offsetHeight;
+};
+
+function showVideo(id) {
+ layer.msg("璋冪敤瑙嗛鏌ョ湅鈥︹��");
+ //鑾峰彇瑙嗛淇℃伅
+ var curVideo = null;
+ $.each(listCamera, function (index, item) {
+ if (item.id == id) {
+ curVideo = item;
+ return true;
+ }
+ });
+ if (!curVideo) {
+ layer.alert("娌℃湁鑾峰彇鍒板綋鍓嶈棰戜俊鎭�︹��");
+ return;
+ }
+ var url = "/security/video-play?cameraId=" + curVideo.id + "&playType=" + curVideo.playType;
+ if(curVideo.playType == "MEDIA_HIK"){
+ //娴峰悍鎻掍欢鐩存帴window.open鏂伴〉闈㈡挱鏀�
+ var iHeight = 550;
+ var iWidth = 1100;
+ var iTop = (window.screen.height-30-iHeight)/2; //鑾峰緱绐楀彛鐨勫瀭鐩翠綅缃�;
+ var iLeft = (window.screen.width-10-iWidth)/2; //鑾峰緱绐楀彛鐨勬按骞充綅缃�;
+ console.log(iWidth + "-" + iHeight);
+ console.log(iTop + "-" + iLeft);
+ var name = "瑙嗛棰勮";
+ window.open(url,name,'height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=0,menubar=0,scrollbars=auto,resizeable=0,location=0,status=no');
+ }else {
+ if (windowWidth > 1350) {
+ layer.open({
+ type: 2,
+ title: false,//"褰撳墠棰勮锛�" + curVideo.name,
+ area: ['1315px', '570px'],
+ shade: 0,
+ content: url,
+ btn: 0,
+ closeBtn: 2
+ });
+ } else {
+ layer.open({
+ type: 2,
+ title: false,//"褰撳墠棰勮锛�" + curVideo.name,
+ area: ['1315px', (windowHeight - 30) + 'px'],
+ shade: 0,
+ content: url,
+ btn: 0,
+ closeBtn: 2
+ });
+ }
+ }
+};
+
+function showTips(name) {
+ $("#camera_info").text("鎻愮ず锛氬綋鍓嶈澶囧悕绉�- " + name);
+};
+
+// 寮�濮嬫嫋鎷�
+function drag() {
+ var tips = $(".device");
+ if (tips.length == 0) {
+ return;
+ }
+
+ var maxX = windowWidth;
+ var maxY = windowHeight;
+
+ $.each(tips, function (index, item) {
+ var dd = new Dragdrop({
+ target: item,
+ area: [0, maxX, 0, maxY],
+ callback: function (obj) {
+ console.log('x:' + (obj.moveX) + ' y:' + (obj.moveY));
+ }
+ });
+ dd.dragAll();
+ });
+};
+
+//娣诲姞璁惧淇℃伅
+function addDevice(list) {
+ // console.log(list);
+
+ if (!list || list.length == 0) return;
+ var container = $("#m-container");
+ var parentWidth = container.width();
+ var parentHeight = container.height();
+
+ var temp;
+ var left = 50, top = 50;
+ $.each(list, function (index, item) {
+ left = (parentWidth * item.posX).toFixed(4);
+ top = (parentHeight * item.posY).toFixed(4);
+ if (left < 1) left = 50;
+ if (top < 1) top = 50;
+
+ temp = "";
+ temp += "<div id='" + item.id + "' class='device' "
+ + "' onclick=showTips('" + item.name + "') "
+ + "' ondblclick=showVideo('" + item.id + "') style='left:"
+ + left + "px;top:" + top + "px;'>";
+ temp += "<img src='/img/web/security/ca-4.png' /></div>";
+ container.append(temp);
+ });
+};
+
+// 淇濆瓨璁惧浣嶇疆淇℃伅
+function updatePos() {
+ var tips = $(".device");
+ if (tips.length == 0) {
+ return;
+ }
+ var container = $("#m-container");
+ var parentWidth = container.width();
+ var parentHeight = container.height();
+ var parentTop = container.offset().top;
+ var parentLeft = container.offset().left;
+
+ // 灏佽鏁版嵁杩涜淇濆瓨
+ var data = new Array();
+ var id = null, posX = 0.0, posY = 0.0;
+ var offset;
+ $.each(tips, function (index, item) {
+ id = item.id;
+ offset = $('#' + id).offset();
+
+ posX = (offset.left - parentLeft) / parentWidth;
+ posY = (offset.top - parentTop) / parentHeight;
+
+ data[index] = {
+ id: id,
+ posX: posX.toFixed(4),
+ posY: posY.toFixed(4)
+ };
+ });
+ $.ajax({
+ type: 'POST',
+ url: "/security/update-pos",
+ dataType: 'JSON',
+ contentType: "application/json;charset=UTF-8",
+ data: JSON.stringify(data),
+ success: function (result) {
+ layer.msg("淇℃伅鏇存柊瀹屾垚锛侊紒");
+ },
+ error: function (result) {
+ layer.msg(result.msg);
+ }
+ });
+}
diff --git a/fzzy-igdss-web/src/main/resources/static/security/video-list.css b/fzzy-igdss-web/src/main/resources/static/security/video-list.css
new file mode 100644
index 0000000..2b22ffa
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/security/video-list.css
@@ -0,0 +1,613 @@
+@charset "utf-8";
+
+@font-face {
+ font-family: DINCond-Bold;
+ src: url('../fonts/DINCond-Bold.otf');
+}
+
+body {
+ font-family: "寰蒋闆呴粦", Arial, sans-serif;
+ font-size: 14px;
+ background: #282e35;
+ position: relative;
+}
+
+i, em {
+ font-style: normal;
+}
+
+a {
+ text-decoration: none;
+}
+
+.fl {
+ float: left;
+}
+
+.fr {
+ float: right;
+}
+
+.i-container {
+ width: 100%;
+ /* min-width: 1290px; */
+ margin-left: auto;
+ margin-right: auto;
+ overflow: hidden;
+}
+
+.jmkt-main {
+ overflow: hidden;
+ padding: 0 5px;
+}
+
+.sp-boxWrap,
+.sp-box {
+ height: 550px;
+}
+
+.sp-box {
+ background: #2f3740;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.pdgxq-H {
+ height: 35px;
+ padding: 0 20px;
+ margin-top: 5px;
+}
+
+.pdgxq-H h3 {
+ line-height: 35px;
+ height: 35px;
+ color: #fff;
+ font-size: 18px;
+ font-weight: bold;
+ position: relative;
+ float: left;
+}
+
+.pdgxq-H h3 i {
+ display: inline-block;
+ width: 4px;
+ height: 24px;
+ position: absolute;
+ left: -20px;
+ top: 50%;
+ margin-top: -12px;
+ z-index: 9;
+ background: url(../img/web/security/tit-redBg.png) center no-repeat;
+}
+
+.sp-showBox {
+ height: 100%;
+}
+
+.sp-showBox.show {
+ display: block;
+}
+
+.sp-showItem {
+ text-align: center;
+ line-height: 316px;
+ height: 316px;
+ background: #262c33;
+ margin: 2px;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+}
+
+.sp-hideImg {
+ width: 200px;
+ height: 200px;
+}
+
+.sp-tab-hd {
+ height: 40px;
+ float: right;
+}
+
+.sp-tab-hd span {
+ display: inline-block;
+ float: right;
+ width: 25px;
+ height: 25px;
+ padding: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ overflow: hidden;
+ margin: 3px 10px;
+ opacity: 0.5;
+ cursor: pointer;
+}
+
+.sp-tab-hd span img {
+ width: 100%;
+ height: 100%;
+}
+
+.sp-tab-hd span.active,
+.sp-tab-hd span:hover {
+ background: #262c33;
+ opacity: 1;
+}
+
+.sp-showItem2 {
+ text-align: center;
+ height: 550px;
+ background: #262c33;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+}
+
+.sp-showItem2 .sp-hideImg {
+ margin-top: 150px;
+ width: 30%;
+ height: auto;
+}
+
+.sp-cz-wrap {
+ width: 270px;
+ overflow: hidden;
+ margin: 10px auto;
+}
+
+.sp-cz-box {
+ overflow: hidden;
+ width: 284px;
+ height: 284px;
+}
+
+.sp-cz-box ul li {
+ float: left;
+ margin: 1.5px;
+ background: #262c33;
+ overflow: hidden;
+ text-align: center;
+ vertical-align: middle;
+ display: table;
+ opacity: 0.5;
+}
+
+.sp-cz-box ul li a {
+ vertical-align: middle;
+ display: table-cell;
+ width: 100%;
+ height: 100%;
+}
+
+.sp-cz-box ul li a img {
+ width: 32px;
+ height: 32px;
+}
+
+.sp-cz-box ul li.sp-cz-l5 a img {
+ width: 66px;
+ height: 66px;
+}
+
+.sp-cz-l1,
+.sp-cz-l2,
+.sp-cz-l3,
+.sp-cz-l7,
+.sp-cz-l8,
+.sp-cz-l9 {
+ height: 88px;
+}
+
+.sp-cz-l4,
+.sp-cz-l5,
+.sp-cz-l6 {
+ height: 98px;
+}
+
+.sp-cz-l1 {
+ width: 88px;
+ border-top-left-radius: 8px;
+}
+
+.sp-cz-l2,
+.sp-cz-l5,
+.sp-cz-l8 {
+ width: 98px;
+}
+
+.sp-cz-l3 {
+ width: 88px;
+ border-top-right-radius: 8px;
+}
+
+.sp-cz-l4,
+.sp-cz-l6 {
+ width: 88px;
+}
+
+.sp-cz-l7 {
+ width: 88px;
+ border-bottom-left-radius: 8px;
+}
+
+.sp-cz-l9 {
+ width: 88px;
+ border-bottom-right-radius: 8px;
+}
+
+.sp-cz-box ul li:hover,
+.sp-cz-box ul li:active {
+ background: #ef344a;
+ opacity: 1;
+}
+
+.sp-cz-box ul li.sp-cz-l5,
+.sp-cz-box ul li.sp-cz-l5:hover,
+.sp-cz-box ul li.sp-cz-l5:active {
+ background: #2a3138 !important;
+ opacity: 0.5;
+}
+
+.sp-cz-l2 img {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.sp-cz-l3 img {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.sp-cz-l4 img {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.sp-cz-l6 img {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg);
+}
+
+.sp-cz-l7 img {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+
+.sp-cz-l8 img {
+ -webkit-transform: rotate(-135deg);
+ transform: rotate(-135deg);
+}
+
+.sp-cz-l9 img {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+/*.sp-bianbei {*/
+/* height: 50px;*/
+/* background: #262c33;*/
+/* width: 280px;*/
+/* -webkit-border-radius: 30px;*/
+/* border-radius: 30px;*/
+/* overflow: hidden;*/
+/* margin: 10px 2px 0 2px;*/
+/* text-align: center;*/
+/*}*/
+
+/*.sp-bianbei > span {*/
+/* line-height: 50px;*/
+/* color: #bbc3cd;*/
+/* font-size: 20px;*/
+/*}*/
+
+/*.sp-czBtn {*/
+/* width: 44px;*/
+/* height: 44px;*/
+/* background: #4c5764;*/
+/* text-align: center;*/
+/* vertical-align: top;*/
+/* color: #fff;*/
+/* font-weight: bold;*/
+/* border: 0;*/
+/* outline: none;*/
+/* -webkit-border-radius: 50%;*/
+/* border-radius: 50%;*/
+/* margin: 3px;*/
+/* font-size: 36px;*/
+/* cursor: pointer;*/
+/*}*/
+
+.fr{
+ float: right;
+}
+
+.sp-bianbei{
+ width: 47%;
+ height: 40px;
+ background: #4c5863;
+ -webkit-border-radius: 30px;
+ border-radius: 30px;
+ overflow: hidden;
+ margin: 10px 0;
+ text-align: center;
+}
+
+.sp-bianbei>span{
+ line-height: 40px;
+ color: #bbc3cd;
+ font-size:16px;
+}
+
+.sp-czBtn{
+ background: #4c5764;
+ text-align: center;
+ vertical-align: top;
+ color: #fff;
+ font-weight: bold;
+ border: 0;
+ outline: none;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ margin: 3px;
+ font-size: 30px;
+ cursor: pointer;
+}
+
+
+.sp-sxBtn{
+ /*float: left;*/
+}
+
+.sp-fdBtn{
+ float: right;
+}
+
+.sp-czBtn i{
+ position: relative;
+ top: -5px;
+}
+
+.sp-czBtn:active{
+ background: #ef344a;
+}
+
+.sp-table-box {
+ margin: 5px 10px 0 10px;
+}
+
+.sp-table-tit {
+ height: 40px;
+ line-height: 40px;
+ border-bottom: 1px solid #8f3545;
+}
+
+.sp-table-tit h3 {
+ float: left;
+ color: #fff;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.sp-table-tit span {
+ float: right;
+ color: #9ea6af;
+ font-size: 14px;
+}
+
+.sp-table {
+ background: #2a3138;
+ /*height: 190px;*/
+ -webkit-border-bottom-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ -webkit--bottom-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ overflow-y: auto;
+}
+
+.sp-list {
+ overflow: hidden;
+ width: 100%;
+}
+
+.sp-list li {
+ height: 35px;
+ padding: 5px 10px;
+ overflow: hidden;
+}
+
+.sp-list li:hover,
+.sp-list li:active {
+ background: #252b32;
+}
+
+.preset-input{
+ width: 65px;
+ appearance: none;
+ -webkit-appearance:none;
+ -moz-appearance:none;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ height: 40px;
+ line-height: 40px;
+ border-radius: 3px;
+ background: #4c5764;
+ color: #bbc3cd;
+ border-width: 0px;
+ text-align: center;
+}
+
+.sp-list li p {
+ line-height: 35px;
+ height: 35px;
+ overflow: hidden;
+ color: #fff;
+ font-size: 16px;
+}
+
+.sp-list li img {
+ width: 35px;
+ height: 35px;
+ float: left;
+ margin-right: 20px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+}
+
+/** 浜戝彴鎺у埗**/
+.ptz-block {
+ position: absolute;
+ z-index: 99999;
+ width: 130px;
+ height: 254px;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ text-align: center;
+ font-size: 24px;
+ background-color: rgba(0,0,0,.6);
+ opacity: 0;
+ border-radius: 10px 0 0 10px;
+ overflow: hidden;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ transition: all 1s;
+}
+.ptz-block .ptzBlock {
+ width: 139px;
+ height: 150px;
+ margin: 0 auto;
+ text-align: center;
+ position: relative;
+ font-size: 24px;
+}
+.ptz-block .ptzBlock .ptz-block-box {
+ width: 139px;
+ height: 150px;
+}
+.ptz-up, .ptz-block {
+ cursor: pointer;
+}
+
+.ptz-block .ptz-up {
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+.ptz-block .direction{
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ position: absolute;
+ cursor: pointer;
+ color: #fff;
+}
+
+.ptz-block .direction:hover{
+ color: #ef344a;
+}
+
+.ptz-block .ptz-left {
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+}
+
+
+.ptz-block .ptz-center {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: 42px;
+ height: 42px;
+ line-height: 42px;
+ position: absolute;
+ border-radius: 25px;
+ background-color: #fff;
+ font-size: 24px;
+ color: #3d414a;
+ cursor: pointer;
+}
+.ptz-block .ptz-right {
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+}
+
+.ptz-block .ptz-down {
+ top: 100px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.ptz-block .ptz-input{
+ width: 60px;
+ height: 25px;
+ font-size: 15px;
+ line-height: 42px;
+ text-align: left;
+ color: #0a1118;
+}
+.el-input {
+ position: relative;
+}
+
+.el-input__inner {
+ padding: 0;
+ text-align: center;
+}
+
+.el-input--mini .el-input__inner {
+ height: 28px;
+ line-height: 28px;
+}
+
+.el-input__inner {
+ -webkit-appearance: none;
+ background-color: #fff;
+ background-image: none;
+ border-radius: 6px;
+ border: 1px solid #dcdfe6;
+ box-sizing: border-box;
+ color: #606266;
+ display: inline-block;
+ font-size: inherit;
+ /*height: 40px;*/
+ /*line-height: 40px;*/
+ outline: none;
+ /*padding: 0 0px;*/
+ transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+ width: 100%;
+ margin-left: 40px
+}
+
+.ptz-block .ptz-plus {
+ top: -30px;
+ left: 30%;
+ transform: translateX(-50%);
+}
+
+.ptz-block .ptz-btn {
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ font-size: 14px;
+ position: absolute;
+ background-color: #fff;
+ border-radius: 12px;
+ color: #3d414a;
+ font-weight: 400;
+}
+
+.ptz-block .ptz-minus {
+ top: -30px;
+ left: 70%;
+ transform: translateX(-50%);
+}
+
+.ptz-block .ptz-btn:hover{
+ background-color: #ef344a;
+ color: #ffffff;
+}
+/** 浜戝彴鎺у埗END **/
\ No newline at end of file
diff --git a/fzzy-igdss-web/src/main/resources/static/security/video-list.js b/fzzy-igdss-web/src/main/resources/static/security/video-list.js
new file mode 100644
index 0000000..814971d
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/security/video-list.js
@@ -0,0 +1,204 @@
+var layer;
+var timer;
+var table;
+var cameraData;
+var playUrl= null;
+
+$(function () {
+ layui.use(['layer', 'table'], function () {
+ layer = layui.layer;
+ table = layui.table;
+ });
+
+ showPtz = function(){
+ $("#ptz-block").css("opacity",1);
+ };
+
+ disPtz = function(){
+ $("#ptz-block").css("opacity",0);
+ };
+
+ //鍒濆鍖栨覆鏌撴挱鏀惧垪琛�
+ renderList();
+});
+
+/**
+ * 鐐瑰嚮鎾斁
+ * @param cameraId
+ */
+play = function (data) {
+ layer.msg("姝ｅ湪鑾峰彇鎾斁淇℃伅鈥︹��");
+ cameraData = null;
+ playUrl = null;
+ var data = {
+ id: data.id,
+ playType: data.playType
+ };
+ $.ajax({
+ type: 'POST',
+ url: "/security/get-media",
+ dataType: 'JSON',
+ contentType: "application/json;charset=UTF-8",
+ data: JSON.stringify(data),
+ success: function (result) {
+ if (result.code != "SUCCESS") {
+ layer.msg(result.msg);
+ } else {
+ cameraData = result;
+ playUrl = result.playUrl;
+ play2();
+ }
+ },
+ error: function (result) {
+ play2();
+ }
+ });
+};
+
+play2 = function () {
+
+ if (!cameraData) {
+ layer.alert("鏈幏鍙栧埌褰撳墠鎽勫儚澶存挱鏀句俊鎭紒锛�");
+ return;
+ }
+
+ if(PlayType.VLC == cameraData.playType){ //璇存槑浣跨敤鏈湴VLC鎾斁
+ vlcToPlay();
+ }
+
+ if (PlayType.PLAY_TYPE_WEB_RTC_DH == cameraData.playType
+ || PlayType.PLAY_TYPE_WEB_RTC_HIK == cameraData.playType) {//浣跨敤web-rtc鎾斁
+ webRtcToPlay();
+ }
+};
+
+
+function renderList() {
+ if (!listCamera || listCamera.length == 0) {
+ return;
+ }
+ var eleTable = document.getElementById("cameraList");
+ var _tr;
+ var _td;
+ listCamera.forEach(function (data) {
+ _tr = document.createElement("tr");
+ _tr.ondblclick = function () {
+ play(data);
+ };
+
+ _td = document.createElement("td");
+ _td.innerText = data.name;
+ _tr.appendChild(_td);
+
+ _td = document.createElement("td");
+ _td.innerText = data.type == "01" ? "鏋満" : "鐞冩満";
+ _tr.appendChild(_td);
+
+ _td = document.createElement("td");
+ _td.innerText = data.status == "OFF" ? "绂荤嚎" : "鍦ㄧ嚎";
+ _tr.appendChild(_td);
+
+ eleTable.appendChild(_tr);
+ });
+}
+
+
+/**
+ * 鎾斁杩樻槸鏆傚仠
+ */
+function playStop() {
+ var videL = $('#easyPlayer');
+ if (videL.paused) {
+ videL.play();
+ } else {
+ videL.pause();
+ }
+}
+/*============= vlc瑙嗛鎾斁 ----- 寮�濮� ===============*/
+function vlcToPlay() {
+ $("#video").css('display','none');
+ $("#vlcPlayer").css('display','block');
+ var html = '';
+ html += '<object type="application/x-vlc-plugin"' +
+ 'events="true" width="100%" height="100%"' +
+ 'pluginspage="http://www.videolan.org"' +
+ 'th:codebase="@{../../static/plugins/vlc/npapi-vlc-2.2.2.tar.xz}">' +
+ '<param name="mrl" value="' + playUrl + '"/>'+
+ '<param name="volume" value="50"/>' +
+ '<param name="autoplay" value="true"/>' +
+ '<param name="loop" value="false"/>' +
+ '<param name="fullscreen" value="true"/>' +
+ '<param name="toolbar" value="false"/>' +
+ '</object>';
+ $("#vlcPlayer").html(html);
+}
+
+/*============= webRtc瑙嗛鎾斁 ----- 寮�濮� ===============*/
+
+/*============= webRtc瑙嗛鎾斁 ----- 寮�濮� ===============*/
+/**
+ * 寮�濮嬫挱鏀�
+ * @param winTag 鎾斁绐楀彛
+ * @returns {Promise<void>}
+ */
+async function webRtcToPlay() {
+ layer.msg("寮�濮嬪惎鍔ㄦ挱鏀锯�︹��");
+ $("#vlcPlayer").css('display','none');
+ $("#video").css('display','block');
+
+ if(playUrl){
+ mediaStream = new MediaStream();
+ $("#video")[0].srcObject = mediaStream;
+ webrtc = new RTCPeerConnection({
+ iceServers: [{
+ urls: ["stun:stun.l.google.com:19302"]
+ }],
+ sdpSemantics: "unified-plan"
+ });
+ webrtc.onsignalingstatechange = signalingstatechange;
+
+ webrtc.ontrack = ontrack
+ let offer = await webrtc.createOffer({
+
+ offerToReceiveAudio: true,
+ offerToReceiveVideo: true
+ });
+ await webrtc.setLocalDescription(offer);
+ }
+}
+
+function ontrack(event) {
+ mediaStream.addTrack(event.track);
+}
+
+async function signalingstatechange() {
+ switch (webrtc.signalingState) {
+ case 'have-local-offer':
+ // let uuid = $('#uuid').val();
+ let url = playUrl + "?uuid=" + cameraData.cameraId + "&channel=0";
+ $.post(url, {
+ data: btoa(webrtc.localDescription.sdp)
+ }, function (data) {
+ try {
+ console.log(data);
+ webrtc.setRemoteDescription(new RTCSessionDescription({
+ type: 'answer',
+ sdp: atob(data)
+ }))
+ } catch (e) {
+ console.warn(e);
+ }
+
+ });
+ break;
+ case 'stable':
+ break;
+ case 'closed':
+ break;
+ default:
+ console.log(`unhandled signalingState is ${webrtc.signalingState}`);
+ break;
+ }
+}
+/*============= 瑙嗛鎾斁 ----- 缁撴潫 ===============*/
+
diff --git a/fzzy-igdss-web/src/main/resources/static/security/video-webrtc.css b/fzzy-igdss-web/src/main/resources/static/security/video-webrtc.css
new file mode 100644
index 0000000..d47b626
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/security/video-webrtc.css
@@ -0,0 +1,579 @@
+@charset "utf-8";
+
+@font-face {
+ font-family: DINCond-Bold;
+ src: url('../fonts/DINCond-Bold.otf');
+}
+
+body {
+ font-family: "寰蒋闆呴粦", Arial, sans-serif;
+ font-size: 14px;
+ background: #282e35;
+ position: relative;
+}
+
+i, em {
+ font-style: normal;
+}
+
+a {
+ text-decoration: none;
+}
+
+.fl {
+ float: left;
+}
+
+.fr {
+ float: right;
+}
+
+.i-container {
+ width: 100%;
+ /* min-width: 1290px; */
+ margin-left: auto;
+ margin-right: auto;
+ overflow: hidden;
+}
+
+.jmkt-main {
+ overflow: hidden;
+ padding: 0 5px;
+}
+
+.sp-boxWrap,
+.sp-box {
+ height: 550px;
+}
+
+.sp-box {
+ background: #2f3740;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.pdgxq-H {
+ height: 35px;
+ padding: 0 20px;
+ margin-top: 5px;
+}
+
+.pdgxq-H h3 {
+ line-height: 35px;
+ height: 35px;
+ color: #fff;
+ font-size: 18px;
+ font-weight: bold;
+ position: relative;
+ float: left;
+}
+
+.pdgxq-H h3 i {
+ display: inline-block;
+ width: 4px;
+ height: 24px;
+ position: absolute;
+ left: -20px;
+ top: 50%;
+ margin-top: -12px;
+ z-index: 9;
+ background: url(../../img/web/security/tit-redBg.png) center no-repeat;
+}
+
+.sp-showBox {
+ height: 100%;
+}
+
+.sp-showBox.show {
+ display: block;
+}
+
+.sp-showItem {
+ text-align: center;
+ line-height: 316px;
+ height: 316px;
+ background: #262c33;
+ margin: 2px;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+}
+
+.sp-hideImg {
+ width: 200px;
+ height: 200px;
+}
+
+.sp-tab-hd {
+ height: 40px;
+ float: right;
+}
+
+.sp-tab-hd span {
+ display: inline-block;
+ float: right;
+ width: 25px;
+ height: 25px;
+ padding: 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ overflow: hidden;
+ margin: 3px 10px;
+ opacity: 0.5;
+ cursor: pointer;
+}
+
+.sp-tab-hd span img {
+ width: 100%;
+ height: 100%;
+}
+
+.sp-tab-hd span.active,
+.sp-tab-hd span:hover {
+ background: #262c33;
+ opacity: 1;
+}
+
+.sp-showItem2 {
+ text-align: center;
+ height: 550px;
+ background: #262c33;
+ -webkit-border-radius: 8px;
+ border-radius: 8px;
+}
+
+.sp-showItem2 .sp-hideImg {
+ margin-top: 150px;
+ width: 30%;
+ height: auto;
+}
+
+.sp-cz-wrap {
+ width: 270px;
+ overflow: hidden;
+ margin: 10px auto;
+}
+
+.sp-cz-box {
+ overflow: hidden;
+ width: 284px;
+ height: 284px;
+}
+
+.sp-cz-box ul li {
+ float: left;
+ margin: 1.5px;
+ background: #262c33;
+ overflow: hidden;
+ text-align: center;
+ vertical-align: middle;
+ display: table;
+ opacity: 0.5;
+}
+
+.sp-cz-box ul li a {
+ vertical-align: middle;
+ display: table-cell;
+ width: 100%;
+ height: 100%;
+}
+
+.sp-cz-box ul li a img {
+ width: 32px;
+ height: 32px;
+}
+
+.sp-cz-box ul li.sp-cz-l5 a img {
+ width: 66px;
+ height: 66px;
+}
+
+.sp-cz-l1,
+.sp-cz-l2,
+.sp-cz-l3,
+.sp-cz-l7,
+.sp-cz-l8,
+.sp-cz-l9 {
+ height: 88px;
+}
+
+.sp-cz-l4,
+.sp-cz-l5,
+.sp-cz-l6 {
+ height: 98px;
+}
+
+.sp-cz-l1 {
+ width: 88px;
+ border-top-left-radius: 8px;
+}
+
+.sp-cz-l2,
+.sp-cz-l5,
+.sp-cz-l8 {
+ width: 98px;
+}
+
+.sp-cz-l3 {
+ width: 88px;
+ border-top-right-radius: 8px;
+}
+
+.sp-cz-l4,
+.sp-cz-l6 {
+ width: 88px;
+}
+
+.sp-cz-l7 {
+ width: 88px;
+ border-bottom-left-radius: 8px;
+}
+
+.sp-cz-l9 {
+ width: 88px;
+ border-bottom-right-radius: 8px;
+}
+
+.sp-cz-box ul li:hover,
+.sp-cz-box ul li:active {
+ background: #ef344a;
+ opacity: 1;
+}
+
+.sp-cz-box ul li.sp-cz-l5,
+.sp-cz-box ul li.sp-cz-l5:hover,
+.sp-cz-box ul li.sp-cz-l5:active {
+ background: #2a3138 !important;
+ opacity: 0.5;
+}
+
+.sp-cz-l2 img {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+.sp-cz-l3 img {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.sp-cz-l4 img {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.sp-cz-l6 img {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg);
+}
+
+.sp-cz-l7 img {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+
+.sp-cz-l8 img {
+ -webkit-transform: rotate(-135deg);
+ transform: rotate(-135deg);
+}
+
+.sp-cz-l9 img {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.fr{
+ float: right;
+}
+
+.sp-bianbei{
+ width: 47%;
+ height: 40px;
+ background: #4c5863;
+ -webkit-border-radius: 30px;
+ border-radius: 30px;
+ overflow: hidden;
+ margin: 10px 0;
+ text-align: center;
+}
+
+.sp-bianbei>span{
+ line-height: 40px;
+ color: #bbc3cd;
+ font-size:16px;
+}
+
+.sp-czBtn{
+ background: #4c5764;
+ text-align: center;
+ vertical-align: top;
+ color: #fff;
+ font-weight: bold;
+ border: 0;
+ outline: none;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ margin: 3px;
+ font-size: 30px;
+ cursor: pointer;
+}
+
+
+.sp-sxBtn{
+ /*float: left;*/
+}
+
+.sp-fdBtn{
+ float: right;
+}
+
+.sp-czBtn i{
+ position: relative;
+ top: -5px;
+}
+
+.sp-czBtn:active{
+ background: #ef344a;
+}
+
+.sp-table-box {
+ margin: 5px 10px 0 10px;
+}
+
+.sp-table-tit {
+ height: 40px;
+ line-height: 40px;
+ border-bottom: 1px solid #8f3545;
+}
+
+.sp-table-tit h3 {
+ float: left;
+ color: #fff;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.sp-table-tit span {
+ float: right;
+ color: #9ea6af;
+ font-size: 14px;
+}
+
+.sp-table {
+ background: #2a3138;
+ /*height: 190px;*/
+ -webkit-border-bottom-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ -webkit--bottom-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ overflow-y: auto;
+}
+
+.sp-list {
+ overflow: hidden;
+ width: 100%;
+}
+
+.sp-list li {
+ height: 35px;
+ padding: 5px 10px;
+ overflow: hidden;
+}
+
+.sp-list li:hover,
+.sp-list li:active {
+ background: #252b32;
+}
+
+.preset-input{
+ width: 65px;
+ appearance: none;
+ -webkit-appearance:none;
+ -moz-appearance:none;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ height: 40px;
+ line-height: 40px;
+ border-radius: 3px;
+ background: #4c5764;
+ color: #bbc3cd;
+ border-width: 0px;
+ text-align: center;
+}
+
+.sp-list li p {
+ line-height: 35px;
+ height: 35px;
+ overflow: hidden;
+ color: #fff;
+ font-size: 16px;
+}
+
+.sp-list li img {
+ width: 35px;
+ height: 35px;
+ float: left;
+ margin-right: 20px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+}
+
+/** 浜戝彴鎺у埗**/
+.ptz-block {
+ position: absolute;
+ z-index: 99999;
+ width: 130px;
+ height: 254px;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ text-align: center;
+ font-size: 24px;
+ background-color: rgba(0,0,0,.6);
+ opacity: 0;
+ border-radius: 10px 0 0 10px;
+ overflow: hidden;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ transition: all 1s;
+}
+.ptz-block .ptzBlock {
+ width: 139px;
+ height: 150px;
+ margin: 0 auto;
+ text-align: center;
+ position: relative;
+ font-size: 24px;
+}
+.ptz-block .ptzBlock .ptz-block-box {
+ width: 139px;
+ height: 150px;
+}
+.ptz-up, .ptz-block {
+ cursor: pointer;
+}
+
+.ptz-block .ptz-up {
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+.ptz-block .direction{
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ position: absolute;
+ cursor: pointer;
+ color: #fff;
+}
+
+.ptz-block .direction:hover{
+ color: #ef344a;
+}
+
+.ptz-block .ptz-left {
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+}
+
+
+.ptz-block .ptz-center {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: 42px;
+ height: 42px;
+ line-height: 42px;
+ position: absolute;
+ border-radius: 25px;
+ background-color: #fff;
+ font-size: 24px;
+ color: #3d414a;
+ cursor: pointer;
+}
+.ptz-block .ptz-right {
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+}
+
+.ptz-block .ptz-down {
+ top: 100px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.ptz-block .ptz-input{
+ width: 60px;
+ height: 25px;
+ font-size: 15px;
+ line-height: 42px;
+ text-align: left;
+ color: #0a1118;
+}
+.el-input {
+ position: relative;
+}
+
+.el-input__inner {
+ padding: 0;
+ text-align: center;
+}
+
+.el-input--mini .el-input__inner {
+ height: 28px;
+ line-height: 28px;
+}
+
+.el-input__inner {
+ -webkit-appearance: none;
+ background-color: #fff;
+ background-image: none;
+ border-radius: 6px;
+ border: 1px solid #dcdfe6;
+ box-sizing: border-box;
+ color: #606266;
+ display: inline-block;
+ font-size: inherit;
+ /*height: 40px;*/
+ /*line-height: 40px;*/
+ outline: none;
+ /*padding: 0 0px;*/
+ transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+ width: 100%;
+ margin-left: 40px
+}
+
+.ptz-block .ptz-plus {
+ top: -30px;
+ left: 30%;
+ transform: translateX(-50%);
+}
+
+.ptz-block .ptz-btn {
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ font-size: 14px;
+ position: absolute;
+ background-color: #fff;
+ border-radius: 12px;
+ color: #3d414a;
+ font-weight: 400;
+}
+
+.ptz-block .ptz-minus {
+ top: -30px;
+ left: 70%;
+ transform: translateX(-50%);
+}
+
+.ptz-block .ptz-btn:hover{
+ background-color: #ef344a;
+ color: #ffffff;
+}
+/** 浜戝彴鎺у埗END **/
\ No newline at end of file
diff --git a/fzzy-igdss-web/src/main/resources/static/security/video-webrtc.js b/fzzy-igdss-web/src/main/resources/static/security/video-webrtc.js
new file mode 100644
index 0000000..4556ba1
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/static/security/video-webrtc.js
@@ -0,0 +1,242 @@
+var layer;
+var playUrl= null;
+var loginTag = false;
+
+$(function () {
+ layui.use(['layer'], function () {
+ layer = layui.layer;
+ });
+
+ getMedia();
+});
+
+/**
+ * 鑾峰彇鎾斁淇℃伅
+ */
+function getMedia() {
+ var data = {
+ id: cameraData.id,
+ playType: cameraData.playType
+ };
+ $.ajax({
+ type: 'POST',
+ url: "/security/get-media",
+ dataType: 'JSON',
+ contentType: "application/json;charset=UTF-8",
+ data: JSON.stringify(data),
+ success: function (result) {
+ if (result.code != "SUCCESS") {
+ layer.msg(result.msg);
+ } else {
+ playUrl = result.playUrl;
+ toPlay();
+ onLogin();
+ }
+ },
+ error: function (result) {
+ layer.msg(result.msg);
+ }
+ });
+}
+
+/*============= webRtc瑙嗛鎾斁 ----- 寮�濮� ===============*/
+/**
+ * 寮�濮嬫挱鏀�
+ * @param winTag 鎾斁绐楀彛
+ * @returns {Promise<void>}
+ */
+async function toPlay() {
+ if(playUrl){
+ mediaStream = new MediaStream();
+ $("#video")[0].srcObject = mediaStream;
+ webrtc = new RTCPeerConnection({
+ iceServers: [{
+ urls: ["stun:stun.l.google.com:19302"]
+ }],
+ sdpSemantics: "unified-plan"
+ });
+ webrtc.onsignalingstatechange = signalingstatechange;
+
+ webrtc.ontrack = ontrack
+ let offer = await webrtc.createOffer({
+
+ offerToReceiveAudio: true,
+ offerToReceiveVideo: true
+ });
+ await webrtc.setLocalDescription(offer);
+ }
+}
+
+function ontrack(event) {
+ mediaStream.addTrack(event.track);
+}
+
+async function signalingstatechange() {
+ switch (webrtc.signalingState) {
+ case 'have-local-offer':
+ // let uuid = $('#uuid').val();
+ let url = playUrl + "?uuid=" + cameraData.id + "&channel=0";
+ $.post(url, {
+ data: btoa(webrtc.localDescription.sdp)
+ }, function (data) {
+ try {
+ console.log(data);
+ webrtc.setRemoteDescription(new RTCSessionDescription({
+ type: 'answer',
+ sdp: atob(data)
+ }))
+ } catch (e) {
+ console.warn(e);
+ }
+
+ });
+ break;
+ case 'stable':
+ break;
+ case 'closed':
+ break;
+ default:
+ console.log(`unhandled signalingState is ${webrtc.signalingState}`);
+ break;
+ }
+}
+/*============= 瑙嗛鎾斁 ----- 缁撴潫 ===============*/
+
+/**
+ *
+ * @param command 浜戝彴浜嬩欢绫诲瀷
+ * @param flag 鏄惁鍋滄鐩稿簲浜嬩欢
+ */
+function handPTZ(command, flag){
+ if(!loginTag){
+ layer.alert("璁惧浜戝彴鐧诲綍澶辫触锛岃閲嶈瘯锛�");
+ return;
+ }
+
+ //澶у崕浜戝彴鎺у埗
+ dhPlayerPTZ(command, flag);
+}
+
+/**
+ * 浜戝彴鎺у埗 -棰勭疆浣嶇疆璋冪敤
+ */
+function handPreset() {
+
+}
+
+/*============= 澶у崕JS浜戝彴鎺у埗 ----- 寮�濮� ===============*/
+/**
+ * @description 璁惧鐧诲綍
+ */
+function onLogin (){
+ onLogout();
+ let ip = cameraData.ip;
+ let port= cameraData.webPort;
+ let user= cameraData.loginId;
+ let pwd= cameraData.pwd;
+
+ let target = ip + ':' + port;
+ setIP(target);
+ /**
+ * RPC.login 鐧诲綍
+ * @param {string} $user.value 鐢ㄦ埛鍚�
+ * @param {string} $password.value 瀵嗙爜
+ * @param {boolean} false 鏄惁httpOnly,榛樿false
+ * @returns {Promise}
+ */
+ RPC.login(user, pwd, false).then((res) => {
+
+ setCookie('DWebClientSessionID', '', -1);
+ setCookie('DhWebClientSessionID', '', -1);
+ /**
+ * RPC.keepAlive 淇濇椿
+ */
+ RPC.keepAlive(300, 60000, _getSession(), target, 0);
+ const browser = BrowserType();
+ if (browser.includes('ie')) {
+ window.onunload = () => {
+ ajax({
+ url: 'global.logout'
+ });
+ };
+ } else if (browser.includes('chrome')) {
+ const params = {
+ method: 'global.logout',
+ params: null,
+ id: 10000,
+ session: _getSession()
+ };
+ pubsub.subscribe('onbeforeunload',() => {
+ navigator.sendBeacon('/RPC2', JSON.stringify(params));
+ });
+ } else {
+ pubsub.subscribe('onbeforeunload',() => {
+ ajax({
+ url: 'global.logout'
+ });
+ });
+ }
+ //鐧诲綍鎴愬姛锛岃褰曠櫥褰曟垚鍔熺殑纭洏褰曞儚鏈�
+ loginTag = true;
+
+ }).catch((err) => {
+ console.log(err);
+ });
+}
+/**
+ * @description 璁惧娉ㄩ攢
+ */
+function onLogout (){
+ /**
+ * RPC.Global.logout 娉ㄩ攢鎺ュ彛
+ * @returns {Promise}
+ */
+ RPC.Global.logout().then(function() {
+ setLoginState(false);
+ playerInstance.forEach(item => {
+ if(item) {
+ item.stop();
+ item.close();
+ item = null;
+ }
+ loginTag = false;
+ });
+ });
+}
+
+/**
+ * @description 璁惧浜戝彴浜嬩欢
+ * @param {string} type 浜戝彴浜嬩欢绫诲瀷
+ * @param {boolean} isStop 鏄惁鍋滄鐩稿簲浜嬩欢
+ */
+function dhPlayerPTZ (type, isStop) {
+
+ //浜戝彴姝ラ暱
+ // let stepVal = $_('#h5_ptz_step').value - 0;
+ let stepVal = 5;
+ let arg2 = 0;
+ let arg2Arr = ['LeftUp', 'RightUp', 'LeftDown', 'RightDown'];
+ let presetArr = ['GotoPreset','SetPreset', 'ClearPreset'];
+ //棰勭疆鐐�
+ // let presetNum = $_('#h5_preset').value - 0;
+ let presetNum = 0;
+ if(arg2Arr.indexOf(type) > -1) {
+ arg2 = stepVal;
+ }
+ if(!isStop) {
+ if(presetArr.indexOf(type) > -1) {
+ /**
+ * RPC.PTZManager 浜戝彴鐩稿叧
+ * @param {string} 鏂规硶
+ * @param {number} channel 閫氶亾
+ * @param {object} 鍙傛暟闆嗗悎
+ */
+ RPC.PTZManager('start', 0, { 'code': type, 'arg1': presetNum, 'arg2': 0, 'arg3': 0 });
+ } else {
+ RPC.PTZManager('start', 0, { 'code': type, 'arg1': stepVal, 'arg2': arg2, 'arg3': 0 });
+ }
+ } else {
+ RPC.PTZManager('stop', 0, { 'code': type, 'arg1': stepVal, 'arg2': arg2, 'arg3': 0 });
+ }
+}
+/*============= 澶у崕JS浜戝彴鎺у埗 ----- 缁撴潫 ===============*/
\ No newline at end of file
diff --git a/fzzy-igdss-web/src/main/resources/templates/common/preview-img.html b/fzzy-igdss-web/src/main/resources/templates/common/preview-img.html
new file mode 100644
index 0000000..40ea30b
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/templates/common/preview-img.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="renderer" content="webkit">
+ <title>瑙嗛棰勮</title>
+
+ <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
+ <style type="text/css">
+ .layui-card-header {
+ font-weight: bold;
+ background-color: #39aef5;
+ color: #FFF;
+ }
+
+ .layui-card-body {
+ text-align: center;
+ }
+
+ thead span {
+ font-weight: bold
+ }
+
+ .video {
+ width: 100%;;
+ height: 100%;
+ }
+ </style>
+</head>
+<body>
+<!-- 鍙拷韪俊鎭� -->
+<div class="layui-tab-content">
+ <div class="layui-fluid" id="recordFilesDiv">
+ <div class="layui-col-md12 layui-col-sm12">
+ <div class="layui-card">
+ <div class="layui-card-body">
+ <img th:src="${imgPath}" style="height: 100%;width: 100%">
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/ajax/libs/layui/layui.js}"></script>
+<script>
+</script>
+</body>
+</html>
diff --git a/fzzy-igdss-web/src/main/resources/templates/security/video-aerial.html b/fzzy-igdss-web/src/main/resources/templates/security/video-aerial.html
new file mode 100644
index 0000000..5bb5eb9
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/templates/security/video-aerial.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta name="renderer" content="webkit">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+ <title>鏅烘収绮簱绠＄悊骞冲彴-鐩戞帶楦熺灠鍥�</title>
+
+ <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
+ <style>
+ html, body, .full {
+ width: 100%;
+ height: 100%;
+ overflow-y: hidden;
+ }
+
+ #m-container {
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ -moz-background-size: 100% 100%;
+ }
+
+ .device {
+ position: absolute;
+ }
+
+ .device img {
+ width: 40px;
+ height: 40px;
+ }
+
+ #camera_info {
+ font-size: 14px;
+ font-weight: bold;
+ color: red;
+ }
+ </style>
+</head>
+<body>
+
+<div class="layui-card-body" style="height: 100%; padding: 1px;" id="main">
+ <div class="full" id="m-container">
+ <div style="float: right;">
+ <span id="camera_info">鎻愮ず锛�</span>
+ <button type="button" class="layui-btn layui-btn-sm" onclick="drag()">绉诲姩</button>
+ <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="updatePos()">淇濆瓨</button>
+ </div>
+ </div>
+</div>
+
+<script th:inline="javascript">
+ //绯荤粺鐧婚檰浜�
+ var loginUser = [[${loginUser}]];
+ //涓氬姟绫诲瀷
+ var bizType = [[${bizType}]];
+ //userId
+ var userId = [[${loginUser.loginName}]];
+ var companyId = [[${loginUser.companyId}]];
+
+ //褰撳墠璁惧鍒楄〃
+ var listCamera = [[${listCamera}]];
+ var backgroundImg = [[${backgroundImg}]];
+</script>
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/ajax/libs/layui/layui.js}"></script>
+<script th:src="@{/common/constant.js}"></script>
+<script th:src="@{/common/igds-common.js}"></script>
+<script th:src="@{/js/plugins/drag/drag-drop.js}"></script>
+<script th:src="@{/security/video-aerial.js}"></script>
+
+<!-- 寮瑰嚭鎿嶄綔妗� -->
+<div class="layui-tab-content" id="aerialDialog" style="display: none;">
+ <div class="layui-btn-container m10"></div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/fzzy-igdss-web/src/main/resources/templates/security/video-list.html b/fzzy-igdss-web/src/main/resources/templates/security/video-list.html
new file mode 100644
index 0000000..e18f386
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/templates/security/video-list.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="renderer" content="webkit">
+ <title>鏅烘収绮簱绠＄悊骞冲彴-鐩戞帶鍒楄〃</title>
+
+ <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
+ <link rel="stylesheet" th:href="@{/security/video-list.css}">
+
+ <style>
+ html, body, .full {
+ width: 100%;
+ height: 100%;
+ overflow-y: hidden;
+ }
+
+ .layui-fluid {
+ position: relative;
+ margin: 0 auto;
+ padding: unset;
+ }
+
+ .layui-col-space20 {
+ margin: unset;
+ }
+
+ .layui-col-space20>* {
+ padding: 10px 5px;
+ }
+
+ .sp-showItem2 {
+ height: 690px;
+ }
+
+ .sp-box {
+ height: 760px;
+ }
+
+ .sp-rl>span {
+ line-height: 50px;
+ color: #bbc3cd;
+ font-size: 20px;
+ }
+
+ .sp-table {
+ height: 732px;
+ width: 425px;
+ }
+
+ .pdgxq-table1 {
+ background-color: transparent;
+ margin: 0;
+ }
+
+ .pdgxq-table1 thead tr th {
+ color: #ef344a;
+ }
+
+ .pdgxq-table1 thead tr {
+ background: #141C25 !important;
+ border-bottom: 1px solid #ef344a;
+ }
+
+ .layui-table td, .layui-table th {
+ padding: 9px 5px;
+ }
+
+ .pdgxq-table1 th, .pdgxq-table1 td {
+ text-align: center;
+ min-height: 32px;
+ line-height: 32px;
+ font-size: 14px;
+ }
+
+ .pdgxq-table1 tbody tr:nth-child(odd) {
+ background-color: #262d33;
+ }
+
+ .pdgxq-table1 td em {
+ color: #ef344a;
+ }
+
+ .layui-table td, .layui-table th {
+ padding: 9px 5px;
+ }
+
+ .pdgxq-table1 td {
+ color: #fff;
+ cursor: pointer;
+ }
+ .video {
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+</head>
+
+<body class="pdgxq-body">
+<div class="i-container">
+ <div class="jmkt-main">
+ <div class="layui-fluid">
+ <div class="sp-boxWrap layui-row layui-col-space20">
+ <div class="layui-col-lg9 layui-col-md9">
+ <div class="pdgxq-m1-left sp-box">
+
+ <div class="pdgxq-H">
+ <h3>
+ <i></i>瑙嗛瀹炴椂棰勮
+ </h3>
+ </div>
+
+ <div class="sp-tab-bd" style="padding: 5px 10px 15px 10px;">
+ <div class="sp-showBox layui-row show">
+ <div class="layui-col-lg12 layui-col-md12">
+ <div class="sp-showItem2" onmouseover="showPtz()"
+ onmouseout="disPtz()">
+ <!-- 浣跨敤鏈湴VLC鎻掍欢鎾斁 -->
+ <div id="vlcPlayer" style="display: none; width: 100%; height: 100%"></div>
+
+<!-- <!– 浣跨敤鎾斁鍣ㄦ挱鏀� –>-->
+<!-- <easy-player id="easyPlayer" style="display: none;" live="true" show-custom-button="true" auto-play="true" muted="true"></easy-player>-->
+
+<!-- <!– 浣跨敤IFrame鎾斁 –>-->
+<!-- <iframe id="iframePlayer" src="" style="display: none;" width="100%" height="100%" allowfullscreen></iframe>-->
+
+ <!-- 浣跨敤WebRtc鎾斁 -->
+ <video class="video" id="video" autoplay="" muted="" playsinline="">
+
+ <!-- 浜戝彴鎺у埗 -->
+ <div class="ptz-block" id="ptz-block" style="opacity: 0;">
+ <div class="ptzBlock">
+ <div class="ptz-block-box">
+ <div title="涓�" onmousedown="mouseDownPTZControl(1);"
+ onmouseup="mouseUpPTZControl();"
+ class="ptz-cell direction ptz-up">
+ <i class="layui-icon layui-icon-up"></i>
+ </div>
+ <div title="宸�" onmousedown="mouseDownPTZControl(3);"
+ onmouseup="mouseUpPTZControl();"
+ class="ptz-cell direction ptz-left">
+ <i class="layui-icon layui-icon-left"></i>
+ </div>
+ <div title="浜戝彴鎺у埗"
+ class="ptz-center layui-icon layui-icon-voice"></div>
+ <div title="鍙�" onmousedown="mouseDownPTZControl(4);"
+ onmouseup="mouseUpPTZControl();"
+ class="ptz-cell direction ptz-right">
+ <i class="layui-icon layui-icon-right"></i>
+ </div>
+ <div title="涓�" onmousedown="mouseDownPTZControl(2);"
+ onmouseup="mouseUpPTZControl();"
+ class="ptz-cell direction ptz-down">
+ <i class="layui-icon layui-icon-down"></i>
+ </div>
+ </div>
+ <div title="浜戝彴閫熷害">
+ <div class="ptz-input el-input el-input--mini">
+ <input type="number" autocomplete="off" value='120'
+ min="0" max="255" class="el-input__inner">
+ </div>
+ </div>
+ <div title="鏀惧ぇ" onmousedown="PTZZoomIn()"
+ onmouseup="PTZZoomStop()"
+ class="ptz-cell ptz-btn ptz-plus">
+ <i class="layui-icon layui-icon-addition"></i>
+ </div>
+ <div title="缂╁皬" onmousedown="PTZZoomout()"
+ onmouseup="PTZZoomStop()"
+ class="ptz-cell ptz-btn ptz-minus">
+ <i class="layui-icon layui-icon-subtraction"></i>
+ </div>
+ </div>
+ </div>
+ <!-- 浜戝彴鎺у埗 END -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--pdgxq-m1-left end-->
+ <div class="layui-col-lg3 layui-col-md3">
+ <div class="pdgxq-m1-right sp-box" style="height: 760px;">
+ <div class="pdgxq-H">
+ <h3>
+ <i></i>璁惧鍒楄〃
+ </h3>
+ </div>
+ <div class="sp-table-box">
+ <div class="sp-table">
+
+ <table class="layui-table pdgxq-table1" lay-skin="nob">
+ <colgroup>
+ <col width="70%">
+ <col width="15%">
+ <col width="15%">
+ </colgroup>
+ <thead>
+ <tr>
+ <th>鍚嶇О</th>
+ <th>绫诲瀷</th>
+ <th>鐘舵��</th>
+ </tr>
+ </thead>
+ <tbody id="cameraList">
+
+ </tbody>
+ </table>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--pdgxq-m1-left end-->
+ </div>
+ <!--sp-boxWrap end-->
+ </div>
+ </div>
+ <!--jmkt-main end-->
+</div>
+<!--i-container end-->
+
+
+<script th:inline="javascript">
+ var listCamera = [[${listCamera}]];
+</script>
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/ajax/libs/layui/layui.js}"></script>
+<script th:src="@{/common/constant.js}"></script>
+<script th:src="@{/security/video-list.js}"></script>
+</body>
+</html>
diff --git a/fzzy-igdss-web/src/main/resources/templates/security/video-webrtc.html b/fzzy-igdss-web/src/main/resources/templates/security/video-webrtc.html
new file mode 100644
index 0000000..d1135a8
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/templates/security/video-webrtc.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <meta name="viewport"
+ content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="renderer" content="webkit">
+ <title>瑙嗛鎾斁-Web-Rtc</title>
+
+ <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
+ <link rel="stylesheet" th:href="@{/security/video-webrtc.css}">
+ <style>
+ .layui-fluid {
+ position: relative;
+ margin: 0 auto;
+ padding: unset;
+ }
+
+ .layui-col-space20 {
+ margin: unset;
+ }
+
+ .layui-col-space20 > * {
+ padding: 10px 5px;
+ }
+
+ /** 闅愯棌鍒楄〃涓嬫媺婊氬姩鏉� **/
+ .scroll::-webkit-scrollbar {
+ display: none;
+ }
+
+ embed {
+ width: 100%;
+ height: 100%;
+ }
+
+ .layui-form-label {
+ padding: 9px 10px;
+ color: #FFFFFF;
+ font-size: 16px;
+ margin-left: 20px;
+ }
+
+ .layui-input {
+ display: unset;
+ width: 160px;
+ background: #3f474e;
+ border-style: solid;
+ border-width: 0;
+ color: #ffffff;
+ }
+
+ .layui-btn {
+ padding: 0 15px;
+ font-size: 16px;
+ margin-left: 10px;
+ margin-top: -3px;
+ }
+ .video {
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+</head>
+
+<body class="pdgxq-body">
+<div class="i-container">
+ <div class="jmkt-main">
+ <div class="layui-fluid">
+ <div class="sp-boxWrap layui-row layui-col-space20">
+ <div class="layui-col-lg9 layui-col-md9">
+ <div class="pdgxq-m1-left sp-box">
+ <div class="sp-tab-bd">
+ <div class="sp-showBox layui-row show">
+ <div class="layui-col-lg12 layui-col-md12">
+ <div class="sp-showItem2">
+ <video class="video" id="video" autoplay="" muted="" playsinline="">
+ </video>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--pdgxq-m1-left end-->
+ <div class="layui-col-lg3 layui-col-md3">
+ <div class="pdgxq-m1-right sp-box">
+ <div class="pdgxq-H">
+ <h3>
+ <i></i>浜戝彴鎺у埗
+ </h3>
+ </div>
+ <div class="sp-cz-wrap">
+ <div class="sp-cz-box">
+ <ul>
+ <li class="sp-cz-l1">
+ <a href="javascript:;" onmousedown="handPTZ('LeftUp', false)"
+ onmouseup="handPTZ('LeftUp', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l2">
+ <a href="javascript:;" onmousedown="handPTZ('Up', false)"
+ onmouseup="handPTZ('Up', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l3">
+ <a href="javascript:;" onmousedown="handPTZ('RightUp', false)"
+ onmouseup="handPTZ('RightUp', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l4">
+ <a href="javascript:;" onmousedown="handPTZ('Left', false)"
+ onmouseup="handPTZ('Left', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l5">
+ <a href="javascript:;" onclick="playStop()">
+ </a>
+ </li>
+ <li class="sp-cz-l6">
+ <a href="javascript:;" onmousedown="handPTZ('Right', false)"
+ onmouseup="handPTZ('Right', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l7">
+ <a href="javascript:;" onmousedown="handPTZ('LeftDown', false)"
+ onmouseup="handPTZ('LeftDown', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l8">
+ <a href="javascript:;" onmousedown="handPTZ('Down', false)"
+ onmouseup="handPTZ('Down', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a></li>
+ <li class="sp-cz-l9">
+ <a href="javascript:;" onmousedown="handPTZ('RightDown', false)"
+ onmouseup="handPTZ('RightDown', true)">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a></li>
+ </ul>
+ </div>
+ <div class="sp-bianbei fl">
+ <button type="button" class="sp-sxBtn sp-czBtn" onmousedown="handPTZ('ZoomWide', false)" onmouseup="handPTZ('ZoomWide', true)">
+ <i>锛�</i>
+ </button>
+ <span>鍙樺��</span>
+ <button type="button" class="sp-fdBtn sp-czBtn" onmousedown="handPTZ('ZoomTele', false)" onmouseup="handPTZ('ZoomTele', true)">
+ <i>锛�</i>
+ </button>
+ </div>
+
+ <div class="sp-bianbei fr">
+ <input type="text" value="棰勭疆鐐�" class="preset-input">
+ <button type="button" class="sp-fdBtn sp-czBtn fr"
+ onclick="handPreset()">
+ <i>鉃�</i>
+ </button>
+ </div>
+
+ </div>
+ <!--sp-cz-wrap end-->
+
+ <div class="pdgxq-H">
+ <h3>
+ <i></i>璁惧淇℃伅
+ </h3>
+ </div>
+ <div class="sp-table-box">
+ <div class="sp-table">
+ <ul class="sp-list">
+ <li><a href="javascript:void(0)">
+ <p>
+ 璁惧鍚嶇О锛�<span th:text="${cameraData.name}"></span>
+ </p>
+ </a></li>
+ <li><a href="javascript:void(0)">
+ <p>
+ 璁惧绫诲瀷锛�<span th:text="${cameraData.type=='02'?'鐞冩満':'鏋満'}"></span>
+ </p>
+ </a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--pdgxq-m1-left end-->
+ </div>
+ <!--sp-boxWrap end-->
+ </div>
+ </div>
+ <!--jmkt-main end-->
+</div>
+<!--i-container end-->
+
+
+<script th:inline="javascript">
+ var cameraData = [[${cameraData}]];
+</script>
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/ajax/libs/layui/layui.js}"></script>
+<script th:src="@{/security/video-webrtc.js}"></script>
+</body>
+</html>
diff --git a/fzzy-igdss-web/src/main/resources/templates/security/video.html b/fzzy-igdss-web/src/main/resources/templates/security/video.html
deleted file mode 100644
index d7ac8cf..0000000
--- a/fzzy-igdss-web/src/main/resources/templates/security/video.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>瑙嗛棰勮</title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
--
Gitblit v1.9.3