From 0b8e43d5f5fd889ffcb715dafdaa6d4511532665 Mon Sep 17 00:00:00 2001
From: suerwei <18810552194@163.com>
Date: 星期六, 22 六月 2024 18:04:15 +0800
Subject: [PATCH] 摄像头列表功能

---
 javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/red.png                           |    0 
 javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/impl/ProjectCameraServiceImpl.java  |    9 
 javaweb-plus/javaweb-admin/src/main/java/com/javaweb/web/controller/system/SysIndexController.java |  127 +++
 javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/camera_list.html         |   89 ++
 javaweb-plus/javaweb-cms/src/main/resources/mapper/geo/ProjectCameraMapper.xml                     |   22 
 javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera2.html        |  117 +++
 javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/mapper/ProjectCameraMapper.java             |    6 
 javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/yellow.png                        |    0 
 javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/tub_list.html            |  296 +++++++++
 javaweb-plus/javaweb-admin/src/main/resources/templates/main4.html                                 |  772 ++++++++++++++++++++++++
 javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera.html         |    7 
 javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/player2.html             |   35 +
 javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/controller/ProjectCameraController.java     |   11 
 javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/IProjectCameraService.java          |    6 
 javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html                        |    4 
 javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/add.html                   |    6 
 javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/ProjectCamera.java                   |   35 +
 javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/blue.png                          |    0 
 javaweb-plus/javaweb-admin/src/main/resources/templates/main.html                                  |  362 +---------
 javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/Project.java                         |    2 
 20 files changed, 1,576 insertions(+), 330 deletions(-)

diff --git a/javaweb-plus/javaweb-admin/src/main/java/com/javaweb/web/controller/system/SysIndexController.java b/javaweb-plus/javaweb-admin/src/main/java/com/javaweb/web/controller/system/SysIndexController.java
index 66269c8..1861efe 100644
--- a/javaweb-plus/javaweb-admin/src/main/java/com/javaweb/web/controller/system/SysIndexController.java
+++ b/javaweb-plus/javaweb-admin/src/main/java/com/javaweb/web/controller/system/SysIndexController.java
@@ -6,18 +6,20 @@
 import java.util.Map;
 
 import cn.hutool.core.util.ObjectUtil;
+import cn.hutool.http.HttpRequest;
+import cn.hutool.http.HttpResponse;
+import cn.hutool.json.JSONObject;
+import cn.hutool.json.JSONUtil;
 import com.javaweb.cms.util.CmsConstants;
 import com.javaweb.common.core.domain.AjaxResult;
 import com.javaweb.common.utils.Arith;
-import com.javaweb.geo.domain.Hole;
-import com.javaweb.geo.domain.HoleMedia;
-import com.javaweb.geo.domain.Project;
-import com.javaweb.geo.domain.TubLog;
+import com.javaweb.geo.domain.*;
 import com.javaweb.geo.enums.RecordType;
 import com.javaweb.geo.mapper.ProjectCameraMapper;
 import com.javaweb.geo.mapper.TubLogMapper;
 import com.javaweb.geo.service.IHoleMediaService;
 import com.javaweb.geo.service.IHoleService;
+import com.javaweb.geo.service.IProjectCameraService;
 import com.javaweb.geo.service.IProjectService;
 import com.javaweb.geo.vo.IndexVo;
 import com.javaweb.geo.vo.ProjectProcessVO;
@@ -26,7 +28,7 @@
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.ModelMap;
 import org.springframework.util.ObjectUtils;
-import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.*;
 import com.javaweb.common.config.Global;
 import com.javaweb.common.core.controller.BaseController;
 import com.javaweb.framework.util.ShiroUtils;
@@ -34,10 +36,6 @@
 import com.javaweb.system.domain.SysUser;
 import com.javaweb.system.service.ISysMenuService;
 
-
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.ResponseBody;
 
 import javax.servlet.http.HttpServletRequest;
 
@@ -48,6 +46,14 @@
  */
 @Controller
 public class SysIndexController extends BaseController {
+
+    private String prefix = "system/camera_tub";
+
+
+    private String appkey = "af786eacc71d43ef9393c028cf4face7";
+    private String secret = "9ad87671f63d2258af6fd9b2e5fa6005";
+    private String postUrl ="https://open.ys7.com/api/lapp/token/get";
+
     @Autowired
     private ISysMenuService menuService;
 
@@ -69,6 +75,9 @@
     @Autowired
     private ProjectCameraMapper projectCameraMapper;
 
+    @Autowired
+    private IProjectCameraService cameraService;
+
 
     private String getAdminIndex() {
         return configService.selectConfigByKey(CmsConstants.KEY_ADMIN_INDEX);
@@ -77,6 +86,16 @@
     @RequestMapping("/admin")
     public String admin() {
         return "forward:/index";
+    }
+
+    @RequestMapping("/system/camera")
+    public String cameraList() {
+        return prefix + "/camera_list";
+    }
+
+    @RequestMapping("/system/tub")
+    public String tubList() {
+        return prefix + "/tub_list";
     }
 
     // 绯荤粺棣栭〉
@@ -267,4 +286,94 @@
         return  ajaxResult;
     }
 
+    /**
+     * 鑾峰彇鍦ㄧ嚎鎽勫儚澶寸殑淇℃伅
+     * @return
+     */
+    @ResponseBody
+    @GetMapping("/system/stat/cameraData")
+    public AjaxResult cameraData() {
+        AjaxResult ajaxResult = new AjaxResult();
+        List<ProjectCamera> cameraDataList = cameraService.selectCameraDataOnLine();
+        ajaxResult.put("cameraData",cameraDataList);
+        return ajaxResult;
+    }
+
+    /**
+     * 鏍规嵁projectId鑾峰彇鍦ㄧ嚎鎽勫儚澶寸殑淇℃伅
+     * @return
+     */
+    @ResponseBody
+    @GetMapping("/system/stat/cameraData/{projectId}")
+    public AjaxResult cameraData2(@PathVariable("projectId") String projectId) {
+        AjaxResult ajaxResult = new AjaxResult();
+
+        ProjectCamera param = new ProjectCamera();
+        param.setProjectId(projectId);
+        List<ProjectCamera> cameraDataList = cameraService.selectProjectCameraList(param);
+        if (!ObjectUtils.isEmpty(cameraDataList)){
+            for (ProjectCamera item : cameraDataList) {
+                String url = item.getIp();
+                Map<String, Object> paramMap = new HashMap<>();
+                paramMap.put("appKey", appkey);
+                paramMap.put("appSecret", secret);
+
+                HttpResponse response = HttpRequest.post(postUrl) .form(paramMap).execute();
+                String body = response.body();
+                JSONObject jsonObject = JSONUtil.parseObj(body);
+                String code = jsonObject.getStr("code");
+                StringBuffer buffer = new StringBuffer();
+                if(code.equals("200")){
+                    JSONObject data  = (JSONObject) jsonObject.get("data");
+                    String token = data.getStr("accessToken");
+                    buffer.append("https://open.ys7.com/console/jssdk/pc.html?accessToken=");
+                    buffer.append(token);
+                    buffer.append("&url=");
+                    buffer.append(url);
+                }
+                logger.debug(buffer.toString());
+                item.setUrl(buffer.toString());
+            }
+        }
+        ajaxResult.put("cameraDataList",cameraDataList);
+        return ajaxResult;
+    }
+
+    /**
+     * 鏍规嵁projectId鑾峰彇鍦ㄧ嚎鎽勫儚澶寸殑淇℃伅
+     * @return
+     */
+    @GetMapping("/player")
+    public String player(String projectId,ModelMap mmap) {
+        ProjectCamera param = new ProjectCamera();
+        param.setProjectId(projectId);
+        List<ProjectCamera> cameraDataList = cameraService.selectProjectCameraList(param);
+        if (!ObjectUtils.isEmpty(cameraDataList)){
+            for (ProjectCamera item : cameraDataList) {
+                String url = item.getIp();
+                Map<String, Object> paramMap = new HashMap<>();
+                paramMap.put("appKey", appkey);
+                paramMap.put("appSecret", secret);
+
+                HttpResponse response = HttpRequest.post(postUrl) .form(paramMap).execute();
+                String body = response.body();
+                JSONObject jsonObject = JSONUtil.parseObj(body);
+                String code = jsonObject.getStr("code");
+                StringBuffer buffer = new StringBuffer();
+                if(code.equals("200")){
+                    JSONObject data  = (JSONObject) jsonObject.get("data");
+                    String token = data.getStr("accessToken");
+                    buffer.append("https://open.ys7.com/console/jssdk/pc.html?accessToken=");
+                    buffer.append(token);
+                    buffer.append("&url=");
+                    buffer.append(url);
+                }
+                item.setUrl(buffer.toString());
+            }
+        }
+
+        mmap.put("cameraDataList",cameraDataList);
+        return prefix + "/player2";
+    }
+
 }
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/blue.png b/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/blue.png
new file mode 100644
index 0000000..7f51058
--- /dev/null
+++ b/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/blue.png
Binary files differ
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/red.png b/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/red.png
new file mode 100644
index 0000000..81cfd28
--- /dev/null
+++ b/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/red.png
Binary files differ
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/yellow.png b/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/yellow.png
new file mode 100644
index 0000000..4b2d412
--- /dev/null
+++ b/javaweb-plus/javaweb-admin/src/main/resources/static/images/icon/yellow.png
Binary files differ
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
index 17d1299..5d6e63c 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -18,86 +18,10 @@
 	[v-cloak]{
 		display: none;
 	}
-	.el-card__header{
-		height: 40px;
-		padding: 8px 20px;
-	}
-	.active-red{
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		font-size: 14px;
-		color: white;
-		background: #F56C6C;
-		text-align: center;
-		line-height: 20px;
-		float: left;
-	}
-
-	.active-yellow{
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		font-size: 14px;
-		color: white;
-		background: #E6A23C;
-		text-align: center;
-		line-height: 20px;
-		float: left;
-	}
-
-	.active-blue{
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		font-size: 14px;
-		color: white;
-		background: #67C23A;
-		text-align: center;
-		line-height: 20px;
-		float: left;
-	}
-	.cdcode{
-		width: 15%;
-		float: left;
-		margin-left: 10px;
-		font-size: 16px;
-		line-height: 20px;
-	}
-	.cdstatus{
-		width: 15%;
-		float: left;
-		margin-left: 0px;
-		font-size: 16px;
-		line-height: 20px;
-	}
-	.cdprocess{
-		width: 60%;
-		float: left;
-		margin-left: 10px;
-	}
-	.rankrow{
-		margin-top: 12px;
-		cursor: pointer;
-	}
-	.ilblock{
-		border-left: 1px solid #e3e5e7;
-		padding: 0 40px;
-		align-content: center;
-	}
 	.ilblock>span{
 		display: block;
 		line-height: 30px;
 	}
-
-
-	<!-- 琛ㄦ牸鏍峰紡 -->
-	.el-table, .el-table__expanded-cell {
-		background-color: transparent;
-		color: #4D4D4D;
-		font-size: 13px;
-	}
-
 	.el-table th,
 	.el-table tr,
 	.el-table td {
@@ -108,235 +32,26 @@
 		font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
 		font-weight: Normal;
 	}
-	.el-table::before {
-		height: 0px;
-	}
 	.el-table__body tr,
 	.el-table__body td {
 		padding: 0;
 		height: 22px;
 	}
-	.el-table__row.warning-row {
-		background:rgb(252,212,165);
-	}
-	.el-table__body-wrapper::-webkit-scrollbar-track {
-		background-color: rgb(252,212,165);
-	}
-	.el-table__body-wrapper::-webkit-scrollbar {
-		width: 10px;
-		opacity: 0.5;
-	}
-	.el-table__body-wrapper::-webkit-scrollbar-thumb {
-		border-radius: 15px;
-		background-color:rgb(252,212,165);
+	.custom-icon:hover {
+		color: #0981ea;
+		cursor: pointer;
 	}
 </style>
 </head>
 
 <body class="gray-bg">
 	<div class="content" id="app" v-cloak>
-		<el-row style="height: 127px;">
-			<el-col :span="6">
-				<el-card class="box-card">
-					<div style="flex:4;padding-right: 20px;" >
-						<div>
-							<li class="el-icon-s-promotion" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #409eff;"></li>
-							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">鍦哄湴鏁伴噺</span>
-						</div>
-						<div style="text-align: center;">
-						<span style="color:#ED1C24;font-size: 30px;word-break: break-all;line-height: 70px">34
-						</span>
-						</div>
-					</div>
-
-					<div style="flex:6;" class="ilblock">
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							鍗忚皟涓�
-							<span style="float: right">{{indexDataCount.projectStatus0}}</span>
-<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
-
-						</span>
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							寰呭紑宸�
-							<span style="float: right">{{indexDataCount.projectStatus1}}</span>
-<!--						    <li class="el-icon-caret-bottom" style="color: #e6a23c">-->
-						</span>
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							杩涜涓�
-							<span style="float: right">{{indexDataCount.projectStatus2}}</span>
-<!--							<li class="el-icon-caret-top" style="color: #409eff">-->
-						</span>
-
-					</div>
-				</el-card>
-			</el-col>
-
-			<el-col :span="6">
-				<el-card class="box-card">
-					<div style="flex:4;padding-right: 20px;">
-						<div>
-							<li class="el-icon-coin" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #085abe"></li>
-							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">閽诲瓟杩涘昂</span>
-						</div>
-						<div style="text-align: center">
-						<span style="color:#1894F6;font-size: 30px;word-break: break-all;line-height: 70px;">647
-						</span>
-						</div>
-					</div>
-
-					<div style="flex:6;" class="ilblock">
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							鎬昏繘灏� <span style="float: right">{{indexDataCount.footageCount}}m</span>
-<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
-						</span>
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							宸插畬鎴�   <span style="float: right">{{indexDataCount.footageCplCount}}m</span>
-<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
-						</span>
-					</div>
-				</el-card>
-			</el-col>
-
-			<el-col :span="6">
-				<el-card class="box-card">
-					<div style="flex:4;padding-right: 20px;">
-						<div>
-							<li class="el-icon-video-camera" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #11d713"></li>
-							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">瀹炴椂鐩戞帶</span>
-						</div>
-						<div style="text-align: center">
-						<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px">68
-						</span>
-						</div>
-					</div>
-
-					<div style="flex:6;" class="ilblock">
-						<div>
-							
-						</div>
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							宸插畨瑁�  <span style="float: right">{{indexDataCount.cameraCount}}</span>
-<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
-						</span>
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							鏈畨瑁�   <span style="float: right">{{indexDataCount.cameraCountNaN}}</span>
-<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
-						</span>
-					</div>
-				</el-card>
-			</el-col>
-			<el-col :span="6">
-				<el-card class="box-card">
-					<div style="flex:4;padding-right: 20px;">
-						<div>
-							<li class="el-icon-s-order" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #917ed0"></li>
-							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">璧勬枡鏂囦欢</span>
-						</div>
-						<div style="text-align: center">
-						<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px;">
-							{{indexDataCount.fileCount}}
-						</span>
-						</div>
-					</div>
-
-					<div style="flex:6;" class="ilblock">
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							鏂藉伐璧勬枡  <span style="float: right">0</span>
-<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
-						</span>
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							瀹夊叏璧勬枡   <span style="float: right">0</span>
-<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
-						</span>
-						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
-							璐ㄩ噺璧勬枡   <span style="float: right">0</span>
-<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
-						</span>
-					</div>
-
-				</el-card>
-			</el-col>
-		</el-row>
-		<el-row>
-			<el-col :span="16">
-				<el-card class="box-card">
-					<div style="height: 200px;width: 100%;">
-						<h3>鏉愭枡缁熻</h3>
-						<el-col :span="10" style="height: 200px;">
-							<div style="margin-top: 15px">
-								<template>
-									<el-table :data="tubLogs" border size="small" style="width: 100%"
-											  :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"
-											  :row-class-name="tableRowClassName">
-										<!--									<el-table-column prop="code" label="搴忓彿"></el-table-column>-->
-										<el-table-column prop="tubName" label="鍚嶇О"></el-table-column>
-										<el-table-column prop="inboundNumber" label="鍏ュ簱鏁伴噺"></el-table-column>
-										<el-table-column prop="outboundNumber" label="鍑哄簱鏁伴噺"></el-table-column>
-										<el-table-column prop="unit" label="鍗曚綅"></el-table-column>
-
-									</el-table>
-								</template>
-							</div>
-						</el-col>
-						<el-col :span="14" style="height: 200px;">
-							<div id="column-chart" style="height: 180px; width: 100%;"></div>
-						</el-col>
-					</div>
-				</el-card>
-
-				<el-card class="box-card" style="margin-top: 20px;">
-					<div id="map_div" style="width: 100%;height: 550px;margin-top: -5px"></div>
-				</el-card>
-
-			</el-col>
-
-			<el-col :span="8">
-				<el-card class="box-card">
-					<div style="height: 200px;width: 100%">
-						<div style="width: 100%;height: 20px;">
-							<h3>椤圭洰鎬讳綋杩涘害(%)</h3>
-						</div>
-						<div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
-					</div>
-				</el-card>
-
-				<el-card class="box-card" style="margin-top: 20px;">
-					<div style="width: 100%">
-						<div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">
-							<h3>鍦哄湴璇︾粏杩涘害(%)</h3>
-						</div>
-						<div style="width: 100%;height: 500px;overflow: auto">
-
-							<el-row class="rankrow" v-for='entity in stationProcessData' @click.native='viewStation(entity)'>
-								<el-col :span="2" >
-									<div v-if="entity.status=='鍗忚皟涓�'" class="active-red">{{entity.ranking}}</div>
-									<div v-if="entity.status=='寰呭紑宸�'" class="active-yellow">{{entity.ranking}}</div>
-									<div v-if="entity.status=='杩涜涓�'" class="active-blue">{{entity.ranking}}</div>
-
-								</el-col>
-
-								<el-col :span="7">
-									<div style="font-size: 16px">{{entity.station}}</div>
-								</el-col >
-
-								<el-col :span="5">
-									<div style="font-size: 16px">{{entity.status}}</div>
-								</el-col>
-
-								<el-col :span="8">
-									<div>
-										<el-progress :stroke-width="10" :percentage="entity.value"></el-progress>
-									</div>
-								</el-col>
-							</el-row>
-						</div>
-					</div>
-
-				</el-card>
-
-			</el-col>
-
-		</el-row>
+		<div id="map_div" style="position:fixed;width: 100%;height: 100vh;margin-top: -5px"></div>
+		<div style="position:fixed;top: 5px">
+			<li onclick="careraFunction()" class="el-icon-video-camera custom-icon" style="font-size: 100px;margin-right: 5px;margin-left: -5px;"></li>
+			<li onclick="tubFunction()" class="el-icon-user custom-icon" style="font-size: 100px;margin-right: 5px;margin-left: -5px;"></li>
+		</div>
+		<div id="Chart1" style="position:fixed;width: 300px;height: 300px;bottom: -60px;right: -40px"></div>
 
 	</div>
 
@@ -361,9 +76,9 @@
 		loadMap();
 		getReallyData();
 		totalProcess();
-		stationProcess();
-		indexCount();
-		tubLogs();
+		//stationProcess();
+		//indexCount();
+		//tubLogs();
 	})
 	//鍦哄湴鍜屽湴鍥剧偣鍑昏仈鍔�
 	function viewStation(station) {
@@ -460,6 +175,19 @@
 		$.ajaxSettings.async = false;
 
 	}
+
+	//鎽勫儚澶村垪琛�
+	function careraFunction() {
+		let url = ctx + "/system/camera";
+		$.modal.openTab("鎽勫儚澶村垪琛�",url);
+	}
+
+	//绠℃潗缁熻
+	function tubFunction() {
+		let url = ctx + "/system/tub";
+		$.modal.openTab("绠℃潗缁熻",url);
+	}
+
 	//鍦哄湴杩涘害
 	function stationProcess() {
 		let url = ctx + "/system/stat/projectProcess";
@@ -508,6 +236,8 @@
 			map.addOverLay(countriesOverlay1)
 			countriesOverlay.bringToBack();
 		});
+
+		//map.setStyle("indigo");
 	}
 
 	function init(sel, transform) {
@@ -559,17 +289,35 @@
 	}
 	//鍦板浘涓婂睍绀洪」鐩偣
 	function showProjectPoint(data){
-		var projectIcon = new T.Icon({
-			iconUrl: '/bjfw/images/icon/6.png',
-			iconSize: new T.Point(30, 30),
-			iconAnchor: new T.Point(6, 40),
-		});
+		var projectIcon;
 		for(let i =0;i<data.length;i++){
+
+			if (data[i].status === '1'){
+				projectIcon = new T.Icon({
+					iconUrl: '/bjfw/images/icon/yellow.png',
+					iconSize: new T.Point(30, 30),
+					iconAnchor: new T.Point(6, 40),
+				});
+			}else if (data[i].status === '2'){
+				projectIcon = new T.Icon({
+					iconUrl: '/bjfw/images/icon/blue.png',
+					iconSize: new T.Point(30, 30),
+					iconAnchor: new T.Point(6, 40),
+				});
+			}else {
+				projectIcon = new T.Icon({
+					iconUrl: '/bjfw/images/icon/red.png',
+					iconSize: new T.Point(30, 30),
+					iconAnchor: new T.Point(6, 40),
+				});
+			}
+
 			let lng = data[i].lng;
 			let lat = data[i].lat;
 			let marker = new T.Marker(new T.LngLat(lng, lat), { title: "鍦哄湴浣嶇疆",icon:projectIcon});
 			let proj = infoWindowProject(data[i]);
 			addClickHandler(proj, marker);
+
 			map.addOverLay(marker);
 		}
 
@@ -585,7 +333,7 @@
 				"<font style='font-weight: bolder;'>鍦哄湴缂栧彿 :</font>" + e.code + "<br>" +
 				"<font style='font-weight: bolder;'>鍦哄湴鍚嶅瓧 :</font>" + e.fullName + "<br>" +
 				"<font style='font-weight: bolder;'>璐熻矗浜� :</font>" + e.leader + "<br>" +
-				"<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>鍦哄湴鏁版嵁</a>" +
+				"<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>鍦哄湴鏁版嵁</a>" + "<br>" +
 				"</div>" +
 				"</div>" +
 				"</div>";
@@ -597,6 +345,7 @@
 
 	function addClickHandler(content, marker) {
 		marker.addEventListener("click", function (e) {
+			console.log("浣犵偣鍑讳簡",content);
 			openInfo(content, e)
 		});
 	}
@@ -621,7 +370,7 @@
 
 		$.ajaxSettings.async = false;
 		var option = {
-			backgroundColor: "#fff",
+			backgroundColor: "transparent",
 			series: [
 				{
 					type: "gauge",
@@ -760,11 +509,6 @@
 		Chart1.setOption(option);
 	}
 
-
-
-
-
 </script>
-
 </body>
 </html>
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main4.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main4.html
new file mode 100644
index 0000000..a502ac5
--- /dev/null
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main4.html
@@ -0,0 +1,772 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+<th:block th:include="include :: header('寮瑰眰缁勪欢')" />
+<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
+<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
+<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
+<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
+<link rel="stylesheet" th:href="@{/css/custom/main.css}" />
+<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />
+
+<style type="text/css">
+	.content {
+		width: 100%;
+		background-color: rgba(0,0,0,0.01) !important;
+		padding:10px;
+	}
+	[v-cloak]{
+		display: none;
+	}
+	.el-card__header{
+		height: 40px;
+		padding: 8px 20px;
+	}
+	.active-red{
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		font-size: 14px;
+		color: white;
+		background: #F56C6C;
+		text-align: center;
+		line-height: 20px;
+		float: left;
+	}
+
+	.active-yellow{
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		font-size: 14px;
+		color: white;
+		background: #E6A23C;
+		text-align: center;
+		line-height: 20px;
+		float: left;
+	}
+
+	.active-blue{
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		font-size: 14px;
+		color: white;
+		background: #67C23A;
+		text-align: center;
+		line-height: 20px;
+		float: left;
+	}
+	.cdcode{
+		width: 15%;
+		float: left;
+		margin-left: 10px;
+		font-size: 16px;
+		line-height: 20px;
+	}
+	.cdstatus{
+		width: 15%;
+		float: left;
+		margin-left: 0px;
+		font-size: 16px;
+		line-height: 20px;
+	}
+	.cdprocess{
+		width: 60%;
+		float: left;
+		margin-left: 10px;
+	}
+	.rankrow{
+		margin-top: 12px;
+		cursor: pointer;
+	}
+	.ilblock{
+		border-left: 1px solid #e3e5e7;
+		padding: 0 40px;
+		align-content: center;
+	}
+	.ilblock>span{
+		display: block;
+		line-height: 30px;
+	}
+
+
+	<!-- 琛ㄦ牸鏍峰紡 -->
+	.el-table, .el-table__expanded-cell {
+		background-color: transparent;
+		color: #4D4D4D;
+		font-size: 13px;
+	}
+
+	.el-table th,
+	.el-table tr,
+	.el-table td {
+		background-color: transparent;
+		border: 0px;
+		color: #4D4D4D;
+		font-size: 13px;
+		font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
+		font-weight: Normal;
+	}
+	.el-table::before {
+		height: 0px;
+	}
+	.el-table__body tr,
+	.el-table__body td {
+		padding: 0;
+		height: 22px;
+	}
+	.el-table__row.warning-row {
+		background:rgb(252,212,165);
+	}
+	.el-table__body-wrapper::-webkit-scrollbar-track {
+		background-color: rgb(252,212,165);
+	}
+	.el-table__body-wrapper::-webkit-scrollbar {
+		width: 10px;
+		opacity: 0.5;
+	}
+	.el-table__body-wrapper::-webkit-scrollbar-thumb {
+		border-radius: 15px;
+		background-color:rgb(252,212,165);
+	}
+</style>
+</head>
+
+<body class="gray-bg">
+	<div class="content" id="app" v-cloak>
+		<el-row style="height: 127px;">
+			<el-col :span="6">
+				<el-card class="box-card">
+					<div style="flex:4;padding-right: 20px;" >
+						<div>
+							<li class="el-icon-s-promotion" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #409eff;"></li>
+							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">鍦哄湴鏁伴噺</span>
+						</div>
+						<div style="text-align: center;">
+						<span style="color:#ED1C24;font-size: 30px;word-break: break-all;line-height: 70px">34
+						</span>
+						</div>
+					</div>
+
+					<div style="flex:6;" class="ilblock">
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							鍗忚皟涓�
+							<span style="float: right">{{indexDataCount.projectStatus0}}</span>
+<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
+
+						</span>
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							寰呭紑宸�
+							<span style="float: right">{{indexDataCount.projectStatus1}}</span>
+<!--						    <li class="el-icon-caret-bottom" style="color: #e6a23c">-->
+						</span>
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							杩涜涓�
+							<span style="float: right">{{indexDataCount.projectStatus2}}</span>
+<!--							<li class="el-icon-caret-top" style="color: #409eff">-->
+						</span>
+
+					</div>
+				</el-card>
+			</el-col>
+
+			<el-col :span="6">
+				<el-card class="box-card">
+					<div style="flex:4;padding-right: 20px;">
+						<div>
+							<li class="el-icon-coin" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #085abe"></li>
+							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">閽诲瓟杩涘昂</span>
+						</div>
+						<div style="text-align: center">
+						<span style="color:#1894F6;font-size: 30px;word-break: break-all;line-height: 70px;">647
+						</span>
+						</div>
+					</div>
+
+					<div style="flex:6;" class="ilblock">
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							鎬昏繘灏� <span style="float: right">{{indexDataCount.footageCount}}m</span>
+<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
+						</span>
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							宸插畬鎴�   <span style="float: right">{{indexDataCount.footageCplCount}}m</span>
+<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
+						</span>
+					</div>
+				</el-card>
+			</el-col>
+
+			<el-col :span="6">
+				<el-card class="box-card">
+					<div style="flex:4;padding-right: 20px;">
+						<div>
+							<li class="el-icon-video-camera" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #11d713"></li>
+							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">瀹炴椂鐩戞帶</span>
+						</div>
+						<div style="text-align: center">
+						<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px">68
+						</span>
+						</div>
+					</div>
+
+					<div style="flex:6;" class="ilblock">
+						<div>
+							
+						</div>
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							宸插畨瑁�  <span style="float: right">{{indexDataCount.cameraCount}}</span>
+<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
+						</span>
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							鏈畨瑁�   <span style="float: right">{{indexDataCount.cameraCountNaN}}</span>
+<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
+						</span>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :span="6">
+				<el-card class="box-card">
+					<div style="flex:4;padding-right: 20px;">
+						<div>
+							<li class="el-icon-s-order" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #917ed0"></li>
+							<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">璧勬枡鏂囦欢</span>
+						</div>
+						<div style="text-align: center">
+						<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px;">
+							{{indexDataCount.fileCount}}
+						</span>
+						</div>
+					</div>
+
+					<div style="flex:6;" class="ilblock">
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							鏂藉伐璧勬枡  <span style="float: right">0</span>
+<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
+						</span>
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							瀹夊叏璧勬枡   <span style="float: right">0</span>
+<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
+						</span>
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							璐ㄩ噺璧勬枡   <span style="float: right">0</span>
+<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
+						</span>
+					</div>
+
+				</el-card>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="16">
+				<el-card class="box-card">
+					<div style="height: 200px;width: 100%;">
+						<h3>鏉愭枡缁熻</h3>
+						<el-col :span="10" style="height: 200px;">
+							<div style="margin-top: 15px">
+								<template>
+									<el-table :data="tubLogs" border size="small" style="width: 100%"
+											  :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"
+											  :row-class-name="tableRowClassName">
+										<!--									<el-table-column prop="code" label="搴忓彿"></el-table-column>-->
+										<el-table-column prop="tubName" label="鍚嶇О"></el-table-column>
+										<el-table-column prop="inboundNumber" label="鍏ュ簱鏁伴噺"></el-table-column>
+										<el-table-column prop="outboundNumber" label="鍑哄簱鏁伴噺"></el-table-column>
+										<el-table-column prop="unit" label="鍗曚綅"></el-table-column>
+
+									</el-table>
+								</template>
+							</div>
+						</el-col>
+						<el-col :span="14" style="height: 200px;">
+							<div id="column-chart" style="height: 180px; width: 100%;"></div>
+						</el-col>
+					</div>
+				</el-card>
+
+				<el-card class="box-card" style="margin-top: 20px;">
+					<div id="map_div" style="width: 100%;height: 550px;margin-top: -5px"></div>
+				</el-card>
+
+			</el-col>
+
+			<el-col :span="8">
+				<el-card class="box-card">
+					<div style="height: 200px;width: 100%">
+						<div style="width: 100%;height: 20px;">
+							<h3>椤圭洰鎬讳綋杩涘害(%)</h3>
+						</div>
+						<div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
+					</div>
+				</el-card>
+
+				<el-card class="box-card" style="margin-top: 20px;">
+					<div style="width: 100%">
+						<div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">
+							<h3>鍦哄湴璇︾粏杩涘害(%)</h3>
+						</div>
+						<div style="width: 100%;height: 500px;overflow: auto">
+
+							<el-row class="rankrow" v-for='entity in stationProcessData' @click.native='viewStation(entity)'>
+								<el-col :span="2" >
+									<div v-if="entity.status=='鍗忚皟涓�'" class="active-red">{{entity.ranking}}</div>
+									<div v-if="entity.status=='寰呭紑宸�'" class="active-yellow">{{entity.ranking}}</div>
+									<div v-if="entity.status=='杩涜涓�'" class="active-blue">{{entity.ranking}}</div>
+
+								</el-col>
+
+								<el-col :span="7">
+									<div style="font-size: 16px">{{entity.station}}</div>
+								</el-col >
+
+								<el-col :span="5">
+									<div style="font-size: 16px">{{entity.status}}</div>
+								</el-col>
+
+								<el-col :span="8">
+									<div>
+										<el-progress :stroke-width="10" :percentage="entity.value"></el-progress>
+									</div>
+								</el-col>
+							</el-row>
+						</div>
+					</div>
+
+				</el-card>
+
+			</el-col>
+
+		</el-row>
+
+	</div>
+
+	<script th:src="@{/js/jquery.min.js}"></script>
+	<script th:src="@{/js/bootstrap.min.js}"></script>
+	<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
+	<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
+	<script th:src="@{/js/tdt.js}" type="text/javascript"></script>
+	<script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" type="text/javascript"></script>
+	<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js" type="text/javascript"></script>
+	<script th:src="@{/js/custom/main.js}"></script>
+
+	<script th:src="@{/js/vue.min.js}"></script>
+	<script th:src="@{/js/elementUI/index.js}"></script>
+
+	<th:block th:include="include :: sparkline-js" />
+	<th:block th:include="include :: footer" />
+
+	<script th:inline="javascript">
+
+	$(function() {
+		loadMap();
+		getReallyData();
+		totalProcess();
+		stationProcess();
+		indexCount();
+		tubLogs();
+	})
+	//鍦哄湴鍜屽湴鍥剧偣鍑昏仈鍔�
+	function viewStation(station) {
+		var lng = station.lng;
+		var lat = station.lat;
+		map.centerAndZoom(new T.LngLat(lng, lat), 13);
+	}
+
+	function tubLogs() {
+
+		const chart = echarts.init(document.getElementById("column-chart"));
+		const option = {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'shadow'
+				}
+			},
+			legend: {},
+			grid: {
+				left: '3%',
+				right: '4%',
+				bottom: '3%',
+				containLabel: true
+			},
+			xAxis: [
+				{
+					type: 'category',
+					data: []
+				}
+			],
+			yAxis: [
+				{
+					type: 'value'
+				}
+			],
+			series: [
+				{
+					name: '鍑哄簱',
+					type: 'bar',
+					emphasis: {
+						focus: 'series'
+					},
+					data: [],
+					itemStyle: {
+						// 淇敼鏌卞瓙鐨勯鑹�
+						color: '#e2b507'
+					}
+				},
+				{
+					name: '鍏ュ簱',
+					type: 'bar',
+					stack: 'Ad',
+					emphasis: {
+						focus: 'series'
+					},
+					data: [],
+					itemStyle: {
+						// 淇敼鏌卞瓙鐨勯鑹�
+						color: '#2992c6'
+					}
+				},
+
+			]
+		};
+
+		let url = ctx + "/system/stat/tubLogData";
+		$.ajaxSettings.async = false;
+		$.get(url,{},function(res){
+			vm.tubLogs = res.tubLogs;
+
+			res.tubLogs.forEach(function(value, index, array) {
+				const tubName = value.tubName;
+				const inboundNumber = value.inboundNumber;
+				const outboundNumber = value.outboundNumber;
+				const unit = value.unit;
+				option.xAxis[0].data[index] = tubName;
+				option.series[0].data[index] = outboundNumber;
+				option.series[1].data[index] = inboundNumber;
+			});
+			chart.setOption(option, true);
+		})
+		$.ajaxSettings.async = false;
+	}
+
+	//棣栭〉绗竴琛屼釜鏁扮粺璁�
+	function indexCount() {
+		let url = ctx + "/system/stat/indexDataCount";
+		$.ajaxSettings.async = false;
+		$.get(url,{},function(res){
+			vm.indexDataCount = res.data;
+			vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;
+		})
+		$.ajaxSettings.async = false;
+
+	}
+	//鍦哄湴杩涘害
+	function stationProcess() {
+		let url = ctx + "/system/stat/projectProcess";
+		$.ajaxSettings.async = false;
+		$.get(url,{},function(res){
+			vm.stationProcessData = res.projectData;
+		})
+		$.ajaxSettings.async = false;
+	}
+	var vm = new Vue({
+		el: "#app",
+		data() {
+			return {
+				stationProcessData: [],
+				indexDataCount :"",
+				tubLogs:[],
+			};
+		},
+		methods: {
+			tableRowClassName({ row, rowIndex }) {
+				if (rowIndex % 2 == 0) {
+					return "";
+				} else {
+					return "warning-row";
+				}
+			},
+		}
+	});
+	// 鍔犺浇鍦板浘
+	let map=null;
+	var countries = [];
+	var countriesOverlay = new T.D3Overlay(init,redraw);
+	var countriesOverlay1 = new T.D3Overlay(init1,redraw1);
+	function loadMap() {
+		map = new T.Map('map_div');
+		map.centerAndZoom(new T.LngLat(116.38, 40.2), 9);
+
+		var control = new T.Control.Zoom();
+		control.setPosition(T_ANCHOR_TOP_RIGHT);
+		map.addControl(control);// 娣诲姞缂╂斁骞崇Щ鎺т欢
+		var scale = new T.Control.Scale();// 鍒涘缓姣斾緥灏烘帶浠跺璞�
+		d3.json("/bjfw/js/custom/beijing.json", function (data) {
+			countries = data.features;
+			map.addOverLay(countriesOverlay)
+			countriesOverlay.bringToBack();
+			map.addOverLay(countriesOverlay1)
+			countriesOverlay.bringToBack();
+		});
+
+		//map.setStyle("indigo");
+	}
+
+	function init(sel, transform) {
+		var upd = sel.selectAll('path.geojson').data(countries);
+		upd.enter()
+				.append('path')
+				.attr("class", "geojson")
+				.attr('stroke', 'grey')
+				.attr('fill', function (d, i) {
+					//return d3.hsl(Math.random() * 360, 0.9, 0.5)
+					return "transparent"
+				})
+				.attr('fill-opacity', '0')
+	}
+	function redraw(sel, transform) {
+		sel.selectAll('path.geojson').each(
+				function (d, i) {
+					d3.select(this).attr('d', transform.pathFromGeojson)
+				}
+		)
+	}
+	function init1(sel, transform) {
+		var upd = sel.selectAll('path.geojson1').data(countries);
+		upd.enter()
+				.append('path')
+				.attr("class", "geojson1")
+				.attr('stroke', 'grey')
+				.attr('fill', function (d, i) {
+					return d3.hsl(Math.random() * 360, 0.9, 0.5)
+				})
+				.attr('fill-opacity', '0.1')
+	}
+
+	function redraw1(sel, transform) {
+		sel.selectAll('path.geojson1').each(
+				function (d, i) {
+					d3.select(this).attr('d', transform.pathFromGeojson)
+				}
+		)
+	}
+
+	// 鑾峰彇鏁版嵁搴撶湡瀹炴暟鎹�
+	function getReallyData() {
+		let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/stat/project";
+		$.get(url,function(res){
+			var data = res.projects;
+			showProjectPoint(data);
+		})
+	}
+	//鍦板浘涓婂睍绀洪」鐩偣
+	function showProjectPoint(data){
+		var projectIcon = new T.Icon({
+			iconUrl: '/bjfw/images/icon/6.png',
+			iconSize: new T.Point(30, 30),
+			iconAnchor: new T.Point(6, 40),
+		});
+		for(let i =0;i<data.length;i++){
+			let lng = data[i].lng;
+			let lat = data[i].lat;
+			let marker = new T.Marker(new T.LngLat(lng, lat), { title: "鍦哄湴浣嶇疆",icon:projectIcon});
+			let proj = infoWindowProject(data[i]);
+			addClickHandler(proj, marker);
+			map.addOverLay(marker);
+		}
+
+	}
+
+	function infoWindowProject(e){
+
+		let ids = e.ids + "";
+		var sContent =
+				"<div style='margin:0px;'>" +
+				"<div>" +
+				"<div style='margin:1px 0px 1px 2px;width: 200px;'>" +
+				"<font style='font-weight: bolder;'>鍦哄湴缂栧彿 :</font>" + e.code + "<br>" +
+				"<font style='font-weight: bolder;'>鍦哄湴鍚嶅瓧 :</font>" + e.fullName + "<br>" +
+				"<font style='font-weight: bolder;'>璐熻矗浜� :</font>" + e.leader + "<br>" +
+				"<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>鍦哄湴鏁版嵁</a>" +
+				"</div>" +
+				"</div>" +
+				"</div>";
+		return sContent;
+	}
+	function viewdata (id) {
+		$.modal.openTab("鍦哄湴瀵艰埅",ctx+ "/geo/project/navigate?ids="+id);
+	}
+
+	function addClickHandler(content, marker) {
+		marker.addEventListener("click", function (e) {
+			openInfo(content, e)
+		});
+	}
+
+	function openInfo(content, e) {
+		var point = e.lnglat;
+		var markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 鍒涘缓淇℃伅绐楀彛瀵硅薄
+		map.openInfoWindow(markerInfoWin, point); //寮�鍚俊鎭獥鍙�
+	}
+
+
+	//鎬昏繘搴︿华琛ㄧ洏
+	function totalProcess() {
+		var Chart1 = echarts.init(document.getElementById('Chart1'));
+		var pointerData = 0; // 浠〃鎸囬拡鏁版嵁
+		let url = ctx + "/system/stat/totalProcess";
+		$.ajaxSettings.async = false;
+		$.get(url,{},function(res){
+			pointerData = res.pointerData;
+			pointerData = (pointerData*100).toFixed(0);
+		});
+
+		$.ajaxSettings.async = false;
+		var option = {
+			backgroundColor: "#fff",
+			series: [
+				{
+					type: "gauge",
+					radius: 80,
+					z: 1,
+					startAngle: 225,
+					endAngle: -45,
+					splitNumber: 50,
+					title: {
+						color: "red",
+					},
+					splitLine: {
+						show: true,
+						length: 15,
+						distance: -10,
+						lineStyle: {
+							color: "#fff",
+							width: 1,
+						},
+					},
+					detail: {
+						show: true,
+						offsetCenter: [0, 60],
+						fontSize: 22,
+						formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
+						rich: {
+							a: {
+								fontSize: 20,
+								color: "rgba(84, 108, 198, 0.65)",
+							},
+							b: {
+								fontSize: 24,
+								color: "rgba(84, 108, 198, 0.65)",
+							},
+						},
+					},
+					// 浠〃鐩樼殑绾匡紝棰滆壊鍊间负涓�涓暟缁�
+					axisLine: {
+						show: true,
+						// 涓ょ鏄惁璁剧疆涓哄渾瑙掞紱鍦�5.0涔嬪悗鐨勭増鏈湁鏁�
+						roundCap: false,
+						lineStyle: {
+							width: 15,
+							shadowColor: "#0093ee", //榛樿閫忔槑
+							shadowOffsetX: 0,
+							shadowOffsetY: 0,
+							shadowBlur: 20,
+							opacity: 1,
+							color: [
+								[
+									pointerData / 100,
+									{
+										x: 0,
+										y: 0,
+										x1: 1,
+										y1: 0,
+										colorStops: [
+											{
+												offset: 0,
+												color: "rgba(0, 255, 255, 0.6)",
+											},
+											{
+												offset: 1,
+												color: "rgba(0, 0, 255, .6)",
+											},
+										],
+									},
+								],
+								[1, "rgba(0,0,0,0.15)"],
+							],
+						},
+					},
+					// 浠〃鐩樺埢搴︽爣绛�
+					axisLabel: {
+						show: true,
+						color: "rgba(84, 108, 198, 0.65)",
+						fontSize: 14,
+						distance: 20,
+						formatter: (val) => {
+							const num = Math.floor(val);
+							return num % 20 === 0 ? num : "";
+						},
+					},
+					// 鍒诲害
+					axisTick: {
+						show: false,
+					},
+					// 鎸囬拡锛屾璁剧疆浠呭5.0浠ヤ笂鐨勭増鏈敓鏁�
+					anchor: {
+						show: true,
+						icon: "circle",
+						showAbove: true,
+						size: 20,
+						itemStyle: {
+							borderWidth: 6,
+							borderColor: "rgba(84, 108, 198, 0.85)",
+						},
+					},
+					data: [pointerData],
+				},
+				{
+					// 鑳屾櫙娓愬彉鑹�
+					type: "pie",
+					radius: "80%",
+					// 涓嶅搷搴斿強瑙﹀彂榧犳爣浜嬩欢
+					silent: true,
+					// 鍏抽棴鑳屾櫙鍔ㄧ敾
+					animation: false,
+					z: 0,
+					itemStyle: {
+						color: {
+							type: "radial", // 寰勫悜娓愬彉
+							x: 0.5,
+							y: 0.5,
+							r: 0.25,
+							colorStops: [
+								{
+									offset: 0,
+									color: "rgba(84, 103, 198, 0.6)",
+								},
+								{
+									offset: 0.1,
+									color: "rgba(84, 103, 198, 0.35)",
+								},
+								{
+									offset: 1,
+									color: "rgba(84, 103, 198, 0)",
+								},
+							],
+						},
+					},
+					data: [pointerData],
+				},
+			],
+		};
+		Chart1.setOption(option);
+	}
+
+
+
+
+
+</script>
+
+</body>
+</html>
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/camera_list.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/camera_list.html
new file mode 100644
index 0000000..8d197b9
--- /dev/null
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/camera_list.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+<th:block th:include="include :: header('寮瑰眰缁勪欢')" />
+<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
+<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
+<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
+<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
+<link rel="stylesheet" th:href="@{/css/custom/main.css}" />
+<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />
+
+<style type="text/css">
+	.custom-icon {
+		font-size: 120px;
+		margin-right: 5px;
+		margin-left: -5px;
+	}
+	.icon-container:hover .custom-icon,
+	.icon-container:hover .custom-font{
+		color: #0981ea;
+		cursor: pointer;
+	}
+</style>
+</head>
+
+<body class="gray-bg">
+	<div class="content" id="app" v-cloak>
+			<el-row>
+				<el-col :span="4" v-for="(item, index) in cameraData" :key="item.projectId">
+					<div class="icon-container" style="margin-left: 40px;">
+						<li @click="handleClick(item.projectId)" class="el-icon-video-camera-solid  custom-icon"></li>
+						<h2 @click="handleClick(item.projectId)" class="custom-font" style="margin-top: 0px;margin-left: 0px;margin-bottom: 0px">{{item.projectName}}({{item.projectCode}})</h2>
+					</div>
+				</el-col>
+			</el-row>
+	</div>
+
+	<script th:src="@{/js/jquery.min.js}"></script>
+	<script th:src="@{/js/bootstrap.min.js}"></script>
+	<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
+	<script th:src="@{/js/custom/main.js}"></script>
+	<script th:src="@{/js/vue.min.js}"></script>
+	<script th:src="@{/js/elementUI/index.js}"></script>
+	<th:block th:include="include :: sparkline-js" />
+	<th:block th:include="include :: footer" />
+
+<script th:inline="javascript">
+	$(function() {
+		// 鑾峰彇鎽勫儚澶村垪琛�
+		getCareraList();
+	})
+
+	var vm = new Vue({
+		el: "#app",
+		data() {
+			return {
+				cameraData: [],
+			};
+		},
+		methods: {
+			// 鎽勫儚澶寸偣鍑讳簨浠�
+			handleClick(projectId) {
+				$.modal.open('瑙嗛鎾斁', ctx + "/player?projectId="+projectId , 1300,580);
+			},
+			handleClose(done) {
+				this.$confirm('纭鍏抽棴锛�')
+						.then(_ => {
+							done();
+						})
+						.catch(_ => {
+							$("#palyerIframe0").attr("src",'about:blank');
+							$("#palyerIframe1").attr("src",'about:blank');
+						});
+			},
+		}
+	});
+
+	function getCareraList() {
+		let url = ctx + "/system/stat/cameraData";
+		$.ajaxSettings.async = false;
+		$.get(url,{},function(res){
+			vm.cameraData = res.cameraData;
+		})
+		$.ajaxSettings.async = false;
+	}
+</script>
+
+</body>
+</html>
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/player2.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/player2.html
new file mode 100644
index 0000000..1d221f3
--- /dev/null
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/player2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+    <th:block th:include="include :: header('瑙嗛鎾斁')" />
+</head>
+<body class="white-bg">
+    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
+        <div>
+            <iframe style="margin-left: 20px" id ="palyerIframe0"
+                    src=""
+                    width="600px"
+                    height="400px;"
+                    allowfullscreen>
+            </iframe>
+            <iframe style="margin-left: 20px" id ="palyerIframe1"
+                    src=""
+                    width="600px"
+                    height="400px;"
+                    allowfullscreen>
+            </iframe>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <script th:src="@{/ajax/libs/EZUIKit/ezuikit.js}"></script>
+    <script th:inline="javascript">
+        var prefix = ctx + "geo/projectCamera";
+        var cameraDataList = [[${cameraDataList}]];
+        cameraDataList.forEach(function(value, index, array) {
+            const playerUrl = value.url;
+            $("#palyerIframe" + index).attr("src",playerUrl);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/tub_list.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/tub_list.html
new file mode 100644
index 0000000..8624537
--- /dev/null
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/system/camera_tub/tub_list.html
@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+	<th:block th:include="include :: header('寮瑰眰缁勪欢')" />
+	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
+	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
+	<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
+	<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
+	<link rel="stylesheet" th:href="@{/css/custom/main.css}" />
+	<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />
+
+	<style type="text/css">
+		.content {
+			width: 100%;
+			background-color: rgba(0,0,0,0.01) !important;
+			padding:10px;
+		}
+		[v-cloak]{
+			display: none;
+		}
+
+		.active-red{
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			font-size: 14px;
+			color: white;
+			background: #F56C6C;
+			text-align: center;
+			line-height: 20px;
+			float: left;
+		}
+
+		.active-yellow{
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			font-size: 14px;
+			color: white;
+			background: #E6A23C;
+			text-align: center;
+			line-height: 20px;
+			float: left;
+		}
+
+		.active-blue{
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			font-size: 14px;
+			color: white;
+			background: #67C23A;
+			text-align: center;
+			line-height: 20px;
+			float: left;
+		}
+
+		.rankrow{
+			margin-top: 12px;
+			cursor: pointer;
+		}
+		.ilblock{
+			border-left: 1px solid #e3e5e7;
+			padding: 0 40px;
+			align-content: center;
+		}
+		.ilblock>span{
+			display: block;
+			line-height: 30px;
+		}
+
+
+
+
+		.el-table th,
+		.el-table tr,
+		.el-table td {
+			background-color: transparent;
+			border: 0px;
+			color: #4D4D4D;
+			font-size: 13px;
+			font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
+			font-weight: Normal;
+		}
+		.el-table::before {
+			height: 0px;
+		}
+		.el-table__body tr,
+		.el-table__body td {
+			padding: 0;
+			height: 22px;
+		}
+
+	</style>
+</head>
+
+<body class="gray-bg">
+<div class="content" id="app" v-cloak>
+
+	<el-row style="height: 127px;">
+		<el-col :span="24">
+			<el-card class="box-card">
+				<div style="flex:4;padding-right: 20px;">
+					<div>
+						<li class="el-icon-s-order" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #917ed0"></li>
+						<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">璧勬枡鏂囦欢</span>
+					</div>
+					<div style="text-align: center">
+						<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px;">
+							{{indexDataCount.fileCount}}
+						</span>
+					</div>
+				</div>
+
+				<div style="flex:6;" class="ilblock">
+						<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							鏂藉伐璧勬枡  <span style="float: right">0</span>
+							<!--							<li class="el-icon-caret-bottom" style="color: #f56c6c">-->
+						</span>
+					<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							瀹夊叏璧勬枡   <span style="float: right">0</span>
+						<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
+						</span>
+					<span style="color:rgba(0,0,0,.87);font-size: 15px;">
+							璐ㄩ噺璧勬枡   <span style="float: right">0</span>
+						<!--						    <li class="el-icon-caret-bottom" style="color: #409eff">-->
+						</span>
+				</div>
+
+			</el-card>
+		</el-col>
+	</el-row>
+
+	<el-row>
+		<el-col :span="24">
+			<el-card class="box-card">
+				<div style="height: 70vh;width: 100%;">
+					<h3>鏉愭枡缁熻</h3>
+					<el-col :span="10" style="height: 200px;">
+						<div style="margin-top: 15px">
+							<template>
+								<el-table :data="tubLogs" border size="small" style="width: 100%"
+										  :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"
+										  :row-class-name="tableRowClassName">
+									<!--									<el-table-column prop="code" label="搴忓彿"></el-table-column>-->
+									<el-table-column prop="tubName" label="鍚嶇О"></el-table-column>
+									<el-table-column prop="inboundNumber" label="鍏ュ簱鏁伴噺"></el-table-column>
+									<el-table-column prop="outboundNumber" label="鍑哄簱鏁伴噺"></el-table-column>
+									<el-table-column prop="unit" label="鍗曚綅"></el-table-column>
+
+								</el-table>
+							</template>
+						</div>
+					</el-col>
+					<el-col :span="14" style="height: 200px;">
+						<div id="column-chart" style="height: 380px; width: 100%;"></div>
+					</el-col>
+				</div>
+			</el-card>
+		</el-col>
+
+	</el-row>
+
+</div>
+
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/js/bootstrap.min.js}"></script>
+<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
+<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
+<script th:src="@{/js/custom/main.js}"></script>
+
+<script th:src="@{/js/vue.min.js}"></script>
+<script th:src="@{/js/elementUI/index.js}"></script>
+
+<th:block th:include="include :: sparkline-js" />
+<th:block th:include="include :: footer" />
+
+<script th:inline="javascript">
+
+	$(function() {
+		indexCount();
+		tubLogs();
+	})
+
+	function tubLogs() {
+
+		const chart = echarts.init(document.getElementById("column-chart"));
+		const option = {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'shadow'
+				}
+			},
+			legend: {},
+			grid: {
+				left: '3%',
+				right: '4%',
+				bottom: '3%',
+				containLabel: true
+			},
+			xAxis: [
+				{
+					type: 'category',
+					data: []
+				}
+			],
+			yAxis: [
+				{
+					type: 'value'
+				}
+			],
+			series: [
+				{
+					name: '鍑哄簱',
+					type: 'bar',
+					emphasis: {
+						focus: 'series'
+					},
+					data: [],
+					itemStyle: {
+						// 淇敼鏌卞瓙鐨勯鑹�
+						color: '#e2b507'
+					}
+				},
+				{
+					name: '鍏ュ簱',
+					type: 'bar',
+					stack: 'Ad',
+					emphasis: {
+						focus: 'series'
+					},
+					data: [],
+					itemStyle: {
+						// 淇敼鏌卞瓙鐨勯鑹�
+						color: '#2992c6'
+					}
+				},
+
+			]
+		};
+
+		let url = ctx + "/system/stat/tubLogData";
+		$.ajaxSettings.async = false;
+		$.get(url,{},function(res){
+			vm.tubLogs = res.tubLogs;
+
+			res.tubLogs.forEach(function(value, index, array) {
+				const tubName = value.tubName;
+				const inboundNumber = value.inboundNumber;
+				const outboundNumber = value.outboundNumber;
+				const unit = value.unit;
+				option.xAxis[0].data[index] = tubName;
+				option.series[0].data[index] = outboundNumber;
+				option.series[1].data[index] = inboundNumber;
+			});
+			chart.setOption(option, true);
+		})
+		$.ajaxSettings.async = false;
+	}
+
+	//棣栭〉绗竴琛屼釜鏁扮粺璁�
+	function indexCount() {
+		let url = ctx + "/system/stat/indexDataCount";
+		$.ajaxSettings.async = false;
+		$.get(url,{},function(res){
+			vm.indexDataCount = res.data;
+			vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;
+		})
+		$.ajaxSettings.async = false;
+	}
+
+	var vm = new Vue({
+		el: "#app",
+		data() {
+			return {
+				stationProcessData: [],
+				indexDataCount :"",
+				tubLogs:[],
+			};
+		},
+		methods: {
+			tableRowClassName({ row, rowIndex }) {
+				if (rowIndex % 2 == 0) {
+					return "";
+				} else {
+					return "warning-row";
+				}
+			},
+		}
+	});
+
+</script>
+
+</body>
+</html>
diff --git a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/controller/ProjectCameraController.java b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/controller/ProjectCameraController.java
index 83c2fde..741cb20 100644
--- a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/controller/ProjectCameraController.java
+++ b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/controller/ProjectCameraController.java
@@ -51,6 +51,12 @@
         return prefix + "/projectCamera";
     }
 
+    @RequiresPermissions("geo:projectCamera:view2")
+    @GetMapping("/view2")
+    public String projectCamera2() {
+        return prefix + "/projectCamera2";
+    }
+
     /**
      * 鏌ヨ鐩戞帶璁惧鍒楄〃
      */
@@ -70,8 +76,6 @@
         List<ProjectCamera> list = projectCameraService.selectProjectCameraList(projectCamera);
         return AjaxResult.success(list);
     }
-
-
 
     @GetMapping("/cameraPlayerUrl")
     @ResponseBody
@@ -124,7 +128,8 @@
      * 鏂板鐩戞帶璁惧
      */
     @GetMapping("/add")
-    public String add() {
+    public String add(String projectId, ModelMap mmap) {
+        mmap.put("projectId", projectId);
         return prefix + "/add";
     }
 
diff --git a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/Project.java b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/Project.java
index 4eb2270..aff0f9f 100644
--- a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/Project.java
+++ b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/Project.java
@@ -160,7 +160,7 @@
         return url;
     }
 
-    public void settianUrl(String url) {
+    public void setUrl(String url) {
         this.url = url;
     }
 
diff --git a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/ProjectCamera.java b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/ProjectCamera.java
index e1002ec..f3e593a 100644
--- a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/ProjectCamera.java
+++ b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/domain/ProjectCamera.java
@@ -21,6 +21,12 @@
     /** 椤圭洰id */
     private String projectId;
 
+    /** 椤圭洰鍚嶇О */
+    private String projectName;
+
+    /** 椤圭洰缂栧彿 */
+    private String projectCode;
+
     /** 鍚嶇О */
     @Excel(name = "鍚嶇О")
     private String name;
@@ -40,6 +46,9 @@
     /** Ip鍦板潃 */
     @Excel(name = "Ip鍦板潃")
     private String ip;
+
+    /** 瑙嗛鎾斁璺緞 */
+    private String url;
 
     public void setId(String id) 
     {
@@ -64,7 +73,23 @@
         this.name = name;
     }
 
-    public String getName() 
+    public String getProjectName() {
+        return projectName;
+    }
+
+    public void setProjectName(String projectName) {
+        this.projectName = projectName;
+    }
+
+    public String getProjectCode() {
+        return projectCode;
+    }
+
+    public void setProjectCode(String projectCode) {
+        this.projectCode = projectCode;
+    }
+
+    public String getName()
     {
         return name;
     }
@@ -105,6 +130,14 @@
         return ip;
     }
 
+    public String getUrl() {
+        return url;
+    }
+
+    public void setUrl(String url) {
+        this.url = url;
+    }
+
     @Override
     public String toString() {
         return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
diff --git a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/mapper/ProjectCameraMapper.java b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/mapper/ProjectCameraMapper.java
index bee7057..ea7551f 100644
--- a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/mapper/ProjectCameraMapper.java
+++ b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/mapper/ProjectCameraMapper.java
@@ -60,4 +60,10 @@
     public int deleteProjectCameraByIds(String[] ids);
 
     public Integer count();
+
+    /**
+     * 鑾峰彇鍦ㄧ嚎鎽勫儚澶寸殑淇℃伅
+     * @return
+     */
+    List<ProjectCamera> selectCameraDataOnLine();
 }
diff --git a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/IProjectCameraService.java b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/IProjectCameraService.java
index 2746587..89572b7 100644
--- a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/IProjectCameraService.java
+++ b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/IProjectCameraService.java
@@ -58,4 +58,10 @@
      * @return 缁撴灉
      */
     public int deleteProjectCameraById(String id);
+
+    /**
+     * 鑾峰彇鍦ㄧ嚎鎽勫儚澶寸殑淇℃伅
+     * @return
+     */
+    List<ProjectCamera> selectCameraDataOnLine();
 }
diff --git a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/impl/ProjectCameraServiceImpl.java b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/impl/ProjectCameraServiceImpl.java
index bddc2e3..7e49a21 100644
--- a/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/impl/ProjectCameraServiceImpl.java
+++ b/javaweb-plus/javaweb-cms/src/main/java/com/javaweb/geo/service/impl/ProjectCameraServiceImpl.java
@@ -92,4 +92,13 @@
     public int deleteProjectCameraById(String id) {
         return projectCameraMapper.deleteProjectCameraById(id);
     }
+
+    /**
+     * 鑾峰彇鍦ㄧ嚎鎽勫儚澶寸殑淇℃伅
+     * @return
+     */
+    @Override
+    public List<ProjectCamera> selectCameraDataOnLine() {
+        return projectCameraMapper.selectCameraDataOnLine();
+    }
 }
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/mapper/geo/ProjectCameraMapper.xml b/javaweb-plus/javaweb-cms/src/main/resources/mapper/geo/ProjectCameraMapper.xml
index b5e3012..64f4c86 100644
--- a/javaweb-plus/javaweb-cms/src/main/resources/mapper/geo/ProjectCameraMapper.xml
+++ b/javaweb-plus/javaweb-cms/src/main/resources/mapper/geo/ProjectCameraMapper.xml
@@ -7,6 +7,8 @@
     <resultMap type="ProjectCamera" id="ProjectCameraResult">
         <result property="id"    column="id"    />
         <result property="projectId"    column="project_id"    />
+        <result property="projectName"    column="project_name"    />
+        <result property="projectCode"    column="project_code"    />
         <result property="name"    column="name"    />
         <result property="code"    column="code"    />
         <result property="lng"    column="lng"    />
@@ -40,7 +42,25 @@
     <select id ="count" resultType="Integer">
        select  count(*) from js_project_camera
     </select>
-        
+
+    <select id="selectCameraDataOnLine" resultMap="ProjectCameraResult">
+        SELECT
+            a.id,
+            a.project_id,
+            b.full_name AS project_name,
+            b.`code` AS project_code,
+            a.NAME,
+            a.CODE,
+            a.lng,
+            a.lat,
+            a.ip,
+            a.create_by,
+            a.create_time
+        FROM
+            js_project_camera a
+            LEFT JOIN js_project b ON a.project_id = b.ids GROUP BY a.project_id;
+    </select>
+
     <insert id="insertProjectCamera" parameterType="ProjectCamera">
         insert into js_project_camera
         <trim prefix="(" suffix=")" suffixOverrides=",">
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html
index 311cff5..94a8c41 100644
--- a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html
+++ b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html
@@ -120,7 +120,7 @@
             </el-col>
 
             <el-col :span="10" >
-                <el-card class="box-card card-yellow" style="height: 320px;margin-right: 20px;">
+                <el-card class="box-card card-blue" style="height: 320px;margin-right: 20px;">
                     <div slot="header" class="clearfix">
                         <span>閽诲瓟鍒嗗竷鍥�</span>
                     </div>
@@ -181,7 +181,7 @@
 
         <el-row style="height: 200px;">
             <el-col :span="24">
-                <el-card class="box-card  card-yellow"  style="height: 320px;margin-top: 20px">
+                <el-card class="box-card  card-blue"  style="height: 320px;margin-top: 20px">
                         <div slot="header" class="clearfix">
                             <span>鏉愭枡缁熻</span>
                         </div>
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/add.html b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/add.html
index 7ac1df0..6cf463a 100644
--- a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/add.html
+++ b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/add.html
@@ -41,13 +41,17 @@
     <th:block th:include="include :: footer" />
     <script th:inline="javascript">
         var prefix = ctx + "geo/projectCamera"
+        var projectId = [[${projectId}]];
+
         $("#form-projectCamera-add").validate({
             focusCleanup: true
         });
 
         function submitHandler() {
             if ($.validate.form()) {
-                $.operate.save(prefix + "/add", $('#form-projectCamera-add').serialize());
+                let formData = $('#form-projectCamera-add').serialize();
+                let data = formData + "&projectId=" + projectId;
+                $.operate.save(prefix + "/add", data);
             }
         }
     </script>
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera.html b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera.html
index 7f2beff..9030507 100644
--- a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera.html
+++ b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera.html
@@ -55,11 +55,12 @@
         var editFlag = [[${@permission.hasPermi('geo:projectCamera:edit')}]];
         var removeFlag = [[${@permission.hasPermi('geo:projectCamera:remove')}]];
         var prefix = ctx + "geo/projectCamera";
+        var projectId=[[${projectId}]];
 
         $(function() {
             var options = {
-                url: prefix + "/list",
-                createUrl: prefix + "/add",
+                url: prefix + "/list?projectId="+projectId,
+                createUrl: prefix + "/add?projectId="+projectId,
                 updateUrl: prefix + "/edit/{id}",
                 removeUrl: prefix + "/remove",
                 exportUrl: prefix + "/export",
@@ -99,7 +100,7 @@
                     formatter: function(value, row, index) {
                         var actions = [];
                         actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>缂栬緫</a> ');
-                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>鍒犻櫎</a>');
+                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>鍒犻櫎</a> ');
                         actions.push('<a class="btn btn-info btn-xs ' + '" href="javascript:void(0)" onclick="player(\'' + row.id + '\')"><i class="fa fa-video-camera"></i>鎾斁</a>');
                         return actions.join('');
                     }
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera2.html b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera2.html
new file mode 100644
index 0000000..2f6a1e8
--- /dev/null
+++ b/javaweb-plus/javaweb-cms/src/main/resources/templates/geo/projectCamera/projectCamera2.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
+<head>
+    <th:block th:include="include :: header('鐩戞帶璁惧鍒楄〃')" />
+</head>
+<body class="gray-bg">
+     <div class="container-div">
+        <div class="row">
+            <div class="col-sm-12 search-collapse">
+                <form id="formId">
+                    <div class="select-list">
+                        <ul>
+                            <li>
+                                <p>鍚嶇О锛�</p>
+                                <input type="text" name="name"/>
+                            </li>
+                            <li>
+                                <p>瑙嗛缂栧彿锛�</p>
+                                <input type="text" name="code"/>
+                            </li>
+                            <li>
+                                <p>Ip鍦板潃锛�</p>
+                                <input type="text" name="ip"/>
+                            </li>
+                            <li>
+                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;鎼滅储</a>
+                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;閲嶇疆</a>
+                            </li>
+                        </ul>
+                    </div>
+                </form>
+            </div>
+
+            <div class="btn-group-sm" id="toolbar" role="group">
+<!--                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="geo:projectCamera:add">-->
+<!--                    <i class="fa fa-plus"></i> 娣诲姞-->
+<!--                </a>-->
+                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="geo:projectCamera:edit">
+                    <i class="fa fa-edit"></i> 淇敼
+                </a>
+<!--                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="geo:projectCamera:remove">-->
+<!--                    <i class="fa fa-remove"></i> 鍒犻櫎-->
+<!--                </a>-->
+<!--                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="geo:projectCamera:export">-->
+<!--                    <i class="fa fa-download"></i> 瀵煎嚭-->
+<!--                </a>-->
+            </div>
+            <div class="col-sm-12 select-table table-striped">
+                <table id="bootstrap-table"></table>
+            </div>
+        </div>
+    </div>
+    <th:block th:include="include :: footer" />
+    <script th:inline="javascript">
+        var editFlag = [[${@permission.hasPermi('geo:projectCamera:edit')}]];
+        var removeFlag = [[${@permission.hasPermi('geo:projectCamera:remove')}]];
+        var prefix = ctx + "geo/projectCamera";
+        var projectId=[[${projectId}]];
+
+        $(function() {
+            var options = {
+                url: prefix + "/list",
+                createUrl: prefix + "/add",
+                updateUrl: prefix + "/edit/{id}",
+                removeUrl: prefix + "/remove",
+                exportUrl: prefix + "/export",
+                modalName: "鐩戞帶璁惧",
+                columns: [{
+                    checkbox: true
+                },
+                {
+                    field : 'id', 
+                    title : '涓婚敭',
+                    visible: false
+                },
+                {
+                    field : 'name', 
+                    title : '鍚嶇О'
+                },
+                {
+                    field : 'code', 
+                    title : '瑙嗛缂栧彿'
+                },
+                {
+                    field : 'lng', 
+                    title : '缁忓害'
+                },
+                {
+                    field : 'lat', 
+                    title : '绾害'
+                },
+                {
+                    field : 'ip', 
+                    title : 'Ip鍦板潃',
+                    visible: false
+                },
+                {
+                    title: '鎿嶄綔',
+                    align: 'center',
+                    formatter: function(value, row, index) {
+                        var actions = [];
+                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>缂栬緫</a> ');
+                        //actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>鍒犻櫎</a> ');
+                        actions.push('<a class="btn btn-info btn-xs ' + '" href="javascript:void(0)" onclick="player(\'' + row.id + '\')"><i class="fa fa-video-camera"></i>鎾斁</a>');
+                        return actions.join('');
+                    }
+                }]
+            };
+            $.table.init(options);
+        });
+
+        function  player(id) {
+            $.modal.open('瑙嗛鎾斁', prefix + "/player?id="+id);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file

--
Gitblit v1.9.1