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/templates/main.html | 445 ++++++++++++++++---------------------------------------
1 files changed, 129 insertions(+), 316 deletions(-)
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 89c9673..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{
+ .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,233 +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,.65);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,.65);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,.65);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,.65);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,.65);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,.65);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,.65);font-size: 15px;">
- 鏈畨瑁� <span style="float: right">68</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,.65);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,.65);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,.65);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;">
- <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>
- </el-col>
- <el-col :span="14" style="height: 200px;">
- </el-col>
- </div>
- </el-card>
-
- <el-card class="box-card" style="margin-top: 20px;">
- <div id="map_div" style="width: 100%;height: 550px;"></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>椤圭洰鎬讳綋杩涘害2(%)</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>
@@ -359,9 +76,9 @@
loadMap();
getReallyData();
totalProcess();
- stationProcess();
- indexCount();
- tubLogs();
+ //stationProcess();
+ //indexCount();
+ //tubLogs();
})
//鍦哄湴鍜屽湴鍥剧偣鍑昏仈鍔�
function viewStation(station) {
@@ -371,35 +88,114 @@
}
function tubLogs() {
- let url = ctx + "/system/tubLogData";
+
+ 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;
- console.log(vm.tubLogs);
}
//棣栭〉绗竴琛屼釜鏁扮粺璁�
function indexCount() {
- let url = ctx + "/system/indexDataCount";
+ 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 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/projectProcess";
+ let url = ctx + "/system/stat/projectProcess";
$.ajaxSettings.async = false;
$.get(url,{},function(res){
vm.stationProcessData = res.projectData;
})
$.ajaxSettings.async = false;
- console.log(vm.stationProcessData);
-
}
var vm = new Vue({
el: "#app",
@@ -440,6 +236,8 @@
map.addOverLay(countriesOverlay1)
countriesOverlay.bringToBack();
});
+
+ //map.setStyle("indigo");
}
function init(sel, transform) {
@@ -483,7 +281,7 @@
// 鑾峰彇鏁版嵁搴撶湡瀹炴暟鎹�
function getReallyData() {
- let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";
+ let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/stat/project";
$.get(url,function(res){
var data = res.projects;
showProjectPoint(data);
@@ -491,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);
}
@@ -517,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>";
@@ -529,6 +345,7 @@
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
+ console.log("浣犵偣鍑讳簡",content);
openInfo(content, e)
});
}
@@ -539,11 +356,12 @@
map.openInfoWindow(markerInfoWin, point); //寮�鍚俊鎭獥鍙�
}
+
//鎬昏繘搴︿华琛ㄧ洏
function totalProcess() {
var Chart1 = echarts.init(document.getElementById('Chart1'));
var pointerData = 0; // 浠〃鎸囬拡鏁版嵁
- let url = ctx + "/system/totalProcess";
+ let url = ctx + "/system/stat/totalProcess";
$.ajaxSettings.async = false;
$.get(url,{},function(res){
pointerData = res.pointerData;
@@ -552,7 +370,7 @@
$.ajaxSettings.async = false;
var option = {
- backgroundColor: "#fff",
+ backgroundColor: "transparent",
series: [
{
type: "gauge",
@@ -691,11 +509,6 @@
Chart1.setOption(option);
}
-
-
-
-
</script>
-
</body>
</html>
--
Gitblit v1.9.1