From fc15aa768cdb6c48ee8b21a5f43570c2f955a9ff Mon Sep 17 00:00:00 2001
From: suerwei <18810552194@163.com>
Date: 星期三, 22 五月 2024 11:46:04 +0800
Subject: [PATCH] 场地状态，首页统计
---
javaweb-plus/javaweb-admin/src/main/resources/templates/main.html | 577 +++++++++++++++++++++++++++++----------------------------
1 files changed, 297 insertions(+), 280 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 ba0d2d9..21e4277 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -2,61 +2,265 @@
<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 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}" />
- <th:block th:include="include :: datetimepicker-css" />
- <style type="text/css">
- .content {
- width: 100%;
- background-color: rgba(0,0,0,0.01) !important;
- }
- </style>
+<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;
+ }
+ .el-badge__content.is-fixed {
+ position: absolute;
+ top: 0;
+ right: 0px;
+ -webkit-transform: translateY(-50%) translateX(100%);
+ transform: translateY(0%) translateX(100%);
+ }
+ .el-card__header{
+ height: 40px;
+ padding: 8px 20px;
+ }
+ .active-red{
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ font-size: 16px;
+ color: white;
+ background: #314659;
+ text-align: center;
+ line-height: 20px;
+ float: left;
+ }
+
+ .active-blue{
+ width: 2%;
+ height: 10px;
+ border-radius: 50%;
+ font-size: 16px;
+ color:blue;
+ }
+ .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: 15px;
+ }
+
+</style>
</head>
<body class="gray-bg">
- <div class="content">
- <div class="col-sm-12">
- <div class="ibox float-e-margins">
- <div class="ibox-title">
- <h3>娌夐檷鐩戞祴缃戝缓璁惧伐绋嬮」鐩垎甯�</h3>
- </div>
- <div class="ibox-content">
-
- <div class="row">
- <div class="col-sm-8">
- <div id="map_div" style="width: 100%;height: 750px;"></div>
- </div>
-
- <div class="col-sm-4">
- <div >
- <div style="width: 100%;height: 20px;">
- <h3>椤圭洰鎬讳綋杩涘害(%)</h3>
- </div>
- <div id="Chart1" style="width: 80%;height: 250px;margin-left: 10%;"></div>
- </div>
-
- <div >
- <div style="width: 100%;height: 20px;">
- <h3>鍦哄湴璇︾粏杩涘害(%)</h3>
- </div>
- <div style="width: 100%;height: 500px;overflow: auto">
- <div id="Chart2" style="width: 100%;height: 1500px;"></div>
- </div>
-
- </div>
-
- </div>
+ <div class="content" id="app">
+ <el-row style="height: 130px;">
+ <el-col :span="6">
+ <el-card class="box-card">
+ <div>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">鍦哄湴鏁伴噺</span>
+ <li class="el-icon-s-promotion" style="font-size: 18px;float: right;color: grey">
</div>
- </div>
- </div>
- </div>
+ <div>
+ <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">34涓�
+ </span>
+ </div>
+ <div>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 鍗忚皟涓� 0
+ <li class="el-icon-caret-bottom" style="color: #f56c6c">
+ </span>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 寰呭紑宸� 34
+ <li class="el-icon-caret-bottom" style="color: #e6a23c">
+ </span>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 杩涜涓� 0
+ <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>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">閽诲瓟杩涘昂</span>
+ <li class="el-icon-coin" style="font-size: 18px;float: right;color: grey">
+ </div>
+ <div>
+ <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">864涓�
+ </span>
+ </div>
+ <div>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 鎬昏繘灏� 134,1000.00m
+ <li class="el-icon-caret-bottom" style="color: #f56c6c">
+ </span>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 宸插畬鎴� 12,322.23m
+ <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>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">瀹炴椂鐩戞帶</span>
+ <li class="el-icon-video-camera" style="font-size: 18px;float: right;color: grey">
+ </div>
+ <div>
+ <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">114涓�
+ </span>
+ </div>
+ <div>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 鎬昏繘灏� 134,1000.00m
+ <li class="el-icon-caret-bottom" style="color: #f56c6c">
+ </span>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 宸插畬鎴� 12,322.23m
+ <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>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">璧勬枡鏂囦欢</span>
+ <li class="el-icon-s-order" style="font-size: 18px;float: right;color: grey">
+ </div>
+ <div>
+ <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">3813
+ </span>
+ </div>
+ <div>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 鎬昏繘灏� 134,1000.00m
+ <li class="el-icon-caret-bottom" style="color: #f56c6c">
+ </span>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 宸插畬鎴� 12,322.23m
+ <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 slot="header">-->
+<!-- -->
+<!-- </div>-->
+ <div style="height: 200px;">
+ <h3>鏉愭枡缁熻</h3>
+ </div>
+ </el-card>
+
+ <el-card class="box-card">
+ <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="width: 100%;height: 20px;">
+ <h3>椤圭洰鎬讳綋杩涘害(%)</h3>
+ </div>
+ <div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
+ </el-card>
+
+ <el-card class="box-card">
+ <div style="width: 100%;height: 20px;">
+ <h3>鍦哄湴璇︾粏杩涘害(%)</h3>
+ </div>
+ <div style="width: 100%;height: 500px;overflow: auto">
+<!-- <div id="Chart2" style="width: 100%;height: 1500px;"></div>-->
+
+ <el-row class="rankrow">
+ <el-col :span="2">
+ <div class="active-red">1</div>
+ </el-col>
+
+ <el-col :span="4">
+ <div style="font-size: 16px">鍦哄湴001</div>
+ </el-col >
+
+ <el-col :span="4">
+ <div style="font-size: 16px">鍗忚皟涓�</div>
+ </el-col>
+
+ <el-col :span="12">
+ <div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
+ </el-col>
+ </el-row>
+ <el-row class="rankrow">
+ <el-col :span="2">
+ <div class="active-red">1</div>
+ </el-col>
+
+ <el-col :span="4">
+ <div style="font-size: 16px">鍦哄湴002</div>
+ </el-col >
+
+ <el-col :span="4">
+ <div style="font-size: 16px">鍗忚皟涓�</div>
+ </el-col>
+
+ <el-col :span="12">
+ <div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
+ </el-col>
+ </el-row>
+ <el-row class="rankrow">
+ <el-col :span="2">
+ <div class="active-red">1</div>
+ </el-col>
+
+ <el-col :span="4">
+ <div style="font-size: 16px">鍦哄湴003</div>
+ </el-col >
+
+ <el-col :span="4">
+ <div style="font-size: 16px">鍗忚皟涓�</div>
+ </el-col>
+
+ <el-col :span="12">
+ <div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
+ </el-col>
+ </el-row>
+
+ </div>
+
+ </el-card>
+
+ </el-col>
+
+ </el-row>
</div>
@@ -68,19 +272,29 @@
<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 type="text/javascript">
+ <script th:inline="javascript">
$(function() {
loadMap();
getReallyData();
totalProcess();
stationProcess();
- //getRegulatoryUnitChartData("","");
- //bindEvent();
})
+ var vm = new Vue({
+ el: "#app",
+ data() {
+ return {};
+ },
+ methods: {
+ }
+ });
// 鍔犺浇鍦板浘
let map=null;
var countries = [];
@@ -169,17 +383,23 @@
}
function infoWindowProject(e){
+
+ let ids = e.ids + "";
var sContent =
"<div style='margin:0px;'>" +
"<div>" +
- "<div style='margin:5px 0px 5px 5px;'>" +
+ "<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) {
@@ -194,47 +414,23 @@
map.openInfoWindow(markerInfoWin, point); //寮�鍚俊鎭獥鍙�
}
-
- // 椤甸潰鏁版嵁璧嬪��
- function pageAssignment(reallyData) {
- for ( let key in reallyData) {
- let className = "." + key;
- $(className).text(reallyData[key]);
- }
- }
-
- //鏌ヨ鐩戠鍗曚綅椤圭洰缁熻鍥捐〃鏁版嵁
- function getRegulatoryUnitChartData(startTime,endTime){
- let url = window.location.protocol + "//" + window.location.host + "/bjfw/geotdp/index/indexProjectNumsCollect";
- $.get(url,{
- startTime: startTime,
- endTime: endTime
- },function(res){
- if(res.status && res.message === "鎿嶄綔鎴愬姛"){
- let chartData = {};
- chartData.yData = res.result.map((item)=>{
- return item.fullName;
- })
- chartData.xData = res.result.map((item)=>{
- return item.projectNums;
- })
- loadRegulatoryUnitChart(chartData);
- }else{
- $.modal.alertError("璇锋眰鍑洪敊");
- }
-
- })
- }
-
+ //鎬昏繘搴︿华琛ㄧ洏
function totalProcess() {
var Chart1 = echarts.init(document.getElementById('Chart1'));
- var pointerData = 36; // 浠〃鎸囬拡鏁版嵁
+ var pointerData = 0; // 浠〃鎸囬拡鏁版嵁
+ let url = ctx + "/system/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: 120,
+ radius: 80,
z: 1,
startAngle: 225,
endAngle: -45,
@@ -370,8 +566,8 @@
}
var datas = [
- { ranking: 1, station: '鍦哄湴001', value: 85 },
- { ranking: 2, station: '鍦哄湴002', value: 22 },
+ { ranking: 1, station: '鍦哄湴001 鍗忚皟涓�', value: 85 },
+ { ranking: 2, station: '鍦哄湴002 鍗忚皟涓�', value: 22 },
{ ranking: 3, station: '鍦哄湴003', value: 33 },
{ ranking: 4, station: '鍦哄湴004', value: 40 },
{ ranking: 5, station: '鍦哄湴005', value: 33 },
@@ -410,12 +606,10 @@
{ ranking: 32, station: '鍦哄湴032', value: 18.48 },
{ ranking: 33, station: '鍦哄湴033', value: 13.03 },
{ ranking: 34, station: '鍦哄湴034', value: 18.48 },
-
-
];
- var seriesName = ['',''];
+ var seriesName = ['宸插畬鎴愯繘搴�','鎬昏繘搴�'];
var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];
var attackSourcesColor = [
@@ -438,9 +632,17 @@
];
function stationProcess() {
+
+ let url = ctx + "/system/projectProcess";
+ $.ajaxSettings.async = false;
+ $.get(url,{},function(res){
+ console.log(res.projectData);
+ datas = res.projectData;
+ })
+ $.ajaxSettings.async = false;
+
+
var Chart2 = echarts.init(document.getElementById('Chart2'));
-
-
var rankings = [];
var stationData = [];
var values = [];
@@ -450,7 +652,6 @@
stationData.push(it.station);
values.push(it.value);
});
-
option = {
// backgroundColor: '#000',
@@ -657,192 +858,8 @@
return false;
}
- //鍔犺浇鐩戠鍗曚綅椤圭洰缁熻鍥捐〃
- function loadRegulatoryUnitChart(chartData){
- var myChart = echarts.init(document.getElementById('rank_chart'));
- let beginColor = "rgb(255,140,0,0.1)",
- endColor = "rgb(255,140,0,1)",
- endPix = "";
- //let endZom = 50;
- let option = {
- title: {
- show: false,
- },
- dataZoom: [
- {
- type: "inside",
- start: 0,
- // end: endZom,
- orient: "vertical",
- zoomOnMouseWheel: false, ////婊氳疆鏄惁瑙﹀彂缂╂斁
- },
- ],
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- legend: {
- bottom: 20,
- right: 0,
- textStyle: {
- color: "#666",
- fontSize: 18,
- },
- orient: "vertical",
- },
- grid: {
- borderWidth: 0,
- top: "8%",
- left: "1%",
- right: "8%",
- bottom: "2%",
- },
- color: "#fff",
- yAxis: [
- {
- type: "category",
- inverse: true,
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- data: chartData.yData,
- },
- ],
- xAxis: {
- type: "value",
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- },
- series: [
- {
- name: "绱",
- type: "bar",
- barWidth: "10px",
- itemStyle: {
- normal: {
- show: true,
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: beginColor,
- },
- {
- offset: 1,
- color: endColor,
- },
- ]),
- barBorderRadius: [0, 5, 5, 0],
- },
- emphasis: {
- shadowBlur: 15,
- shadowColor: "rgba(0, 0, 0, 0.1)",
- },
- },
- data: chartData.xData,
- animationDuration: 1500,
- label: {
- normal: {
- color: "black",
- show: true,
- position: "right",
- fontSize: 18,
- fontStyle: "italic",
- formatter: function (para) {
- return para.data + endPix;
- },
- },
- },
- },
- {
- type: "bar",
- barGap: "0",
- barWidth: 10,
- animation: false,
- itemStyle: {
- color: "transparent",
- },
- tooltip: {
- show: false,
- },
- label: {
- show: true,
- position: ["0", "-35"],
- fontSize: 13,
- color: "rgb(0,0,0,0.7)",
- formatter: function (param) {
- return param.dataIndex + 1 + " " + param.name;
- },
- },
- data: chartData.xData,
- },
-
- ],
- animationEasing: "cubicOut",
- };
-
- myChart.setOption(option);
- }
-
- //缁戝畾浜嬩欢
- function bindEvent(){
- $(".statistic-btn .btn").on("click",function(){
- if(this.innerText === "鎬昏"){
- getRegulatoryUnitChartData("","");
- }else if(this.innerText === "鏈勾搴�"){
- let d = new Date();
- let n = d.getFullYear();
- let startTime = n + "-01-01 00:00:00";
- let endTime = n + "-12-31 23:59:59";
- getRegulatoryUnitChartData(startTime,endTime);
- }else{
- let startTime = getFirstDay() + " 00:00:00";
- let endTime = getLastDay() + " 23:59:59";
- getRegulatoryUnitChartData(startTime,endTime);
- }
- })
- }
-
- //鑾峰彇鏈湀绗竴澶�
- function getFirstDay(){
- var y = new Date().getFullYear(); //鑾峰彇骞翠唤
- var m = new Date().getMonth() + 1; //鑾峰彇鏈堜唤
- var d = '01'
- m = m < 10 ? '0' + m : m; //鏈堜唤琛� 0
-
- return [y,m,d].join("-")
- }
- //鑾峰彇鏈湀鏈�鍚庝竴澶�
- function getLastDay(){
- var y = new Date().getFullYear(); //鑾峰彇骞翠唤
- var m = new Date().getMonth() + 1; //鑾峰彇鏈堜唤
- var d = new Date(y, m, 0).getDate(); //鑾峰彇褰撴湀鏈�鍚庝竴鏃�
- m = m < 10 ? '0' + m : m; //鏈堜唤琛� 0
- d = d < 10 ? '0' + d : d; //鏃ユ暟琛� 0
- return [y,m,d].join("-");
- }
</script>
--
Gitblit v1.9.1