From f50f4c73e47aac76819d2ab8283cbec6b078ef80 Mon Sep 17 00:00:00 2001
From: zmk <496160012@qq.com>
Date: 星期三, 03 七月 2024 17:50:24 +0800
Subject: [PATCH] 提交代码
---
/dev/null | 514 ----------------------------------
javaweb-plus/javaweb-admin/src/main/resources/templates/main2.html | 300 +++++++++++++++----
javaweb-plus/javaweb-admin/src/main/resources/templates/main.html | 35 --
3 files changed, 232 insertions(+), 617 deletions(-)
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main copy.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main copy.html
deleted file mode 100644
index f65207f..0000000
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main copy.html
+++ /dev/null
@@ -1,1202 +0,0 @@
-<!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;
- }
- .el-card__header{
- height: 40px;
- padding: 8px 20px;
- }
- .active-red{
- width: 20px;
- height: 20px;
- border-radius: 50%;
- font-size: 14px;
- color: white;
- background: #314659;
- text-align: center;
- line-height: 20px;
- float: left;
- }
-
- .active-blue{
- width: 20px;
- height: 20px;
- border-radius: 50%;
- font-size: 16px;
- color: white;
- background: dodgerblue;
- 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;
- }
-
-</style>
-</head>
-
-<body class="gray-bg">
- <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>
- <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">647涓�
- </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">68涓�
- </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;">
- 鏈畨瑁� 68
- <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 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">20</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>
- <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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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">鍦哄湴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>
-
-
- </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();
- })
- var vm = new Vue({
- el: "#app",
- data() {
- return {};
- },
- methods: {
- }
- });
- // 鍔犺浇鍦板浘
- 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();
- });
- }
-
- 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/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/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);
- }
-
- var datas = [
- { 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 },
- { ranking: 6, station: '鍦哄湴006', value: 14.97 },
- { ranking: 7, station: '鍦哄湴007', value: 13.03 },
- { ranking: 8, station: '鍦哄湴008', value: 18.48 },
- { ranking: 9, station: '鍦哄湴009', value: 16.74 },
- { ranking: 10, station: '鍦哄湴010', value: 14.97 },
-
- { ranking: 11, station: '鍦哄湴011', value: 13.03 },
- { ranking: 12, station: '鍦哄湴012', value: 18.48 },
-
- { ranking: 13, station: '鍦哄湴013', value: 16.74 },
- { ranking: 14, station: '鍦哄湴014', value: 14.97 },
- { ranking: 15, station: '鍦哄湴015', value: 13.03 },
- { ranking: 16, station: '鍦哄湴016', value: 18.48 },
-
- { ranking: 17, station: '鍦哄湴017', value: 16.74 },
- { ranking: 18, station: '鍦哄湴018', value: 14.97 },
- { ranking: 19, station: '鍦哄湴019', value: 13.03 },
- { ranking: 20, station: '鍦哄湴020', value: 18.48 },
-
- { ranking: 21, station: '鍦哄湴021', value: 16.74 },
- { ranking: 22, station: '鍦哄湴022', value: 14.97 },
- { ranking: 23, station: '鍦哄湴023', value: 13.03 },
- { ranking: 24, station: '鍦哄湴024', value: 18.48 },
-
- { ranking: 25, station: '鍦哄湴025', value: 16.74 },
- { ranking: 26, station: '鍦哄湴026', value: 14.97 },
- { ranking: 27, station: '鍦哄湴027', value: 13.03 },
- { ranking: 28, station: '鍦哄湴028', value: 18.48 },
-
- { ranking: 29, station: '鍦哄湴029', value: 13.03 },
- { ranking: 30, station: '鍦哄湴030', value: 18.48 },
- { ranking: 31, station: '鍦哄湴031', value: 13.03 },
- { ranking: 32, station: '鍦哄湴032', value: 18.48 },
- { ranking: 33, station: '鍦哄湴033', value: 13.03 },
- { ranking: 34, station: '鍦哄湴034', value: 18.48 },
- ];
-
-
- var seriesName = ['宸插畬鎴愯繘搴�','鎬昏繘搴�'];
- var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];
-
- var attackSourcesColor = [
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- { offset: 0, color: 'rgba(255,85,127,1)' },
- { offset: 1, color: 'rgba(255,85,127,1)' },
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- { offset: 0, color: 'rgba(255,170,0,1)' },
- { offset: 1, color: 'rgba(255,170,0,1)' },
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- { offset: 0, color: 'rgba(84,112,198,1)' },
- { offset: 1, color: 'rgba(84,112,198,1)' },
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- { offset: 0, color: 'rgba(30,159,255,.82)' },
- { offset: 1, color: 'rgba(30,159,255,.82)' },
- ]),
- ];
-
- 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 = [];
-
- datas.forEach(function (it, index) {
- rankings.push(it.ranking);
- stationData.push(it.station);
- values.push(it.value);
- });
-
- option = {
- // backgroundColor: '#000',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- },
-
- grid: {
- left: '-8%',
- right: '2%',
- bottom: '3%',
- top:'2%',
- containLabel: true,
- },
- xAxis: {
- type: 'value',
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- },
- yAxis: [
- {
- type: 'category',
- inverse: true,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- data: stationData,
- axisLabel: {
- margin: 30,
- fontSize: 14,
- align: 'left',
- padding: [3, 0, 0, 0],
- color: '#000',
- rich: {
- nt1: {
- color: '#fff',
- backgroundColor: attackSourcesColor1[0],
- width: 20,
- height: 18,
- fontSize: 12,
- align: 'center',
- borderRadius: 50,
- lineHeight: '5',
- padding: [2, 0, 0, 0],
- // padding:[0,0,2,0],
- },
- nt2: {
- color: '#fff',
- backgroundColor: attackSourcesColor1[1],
- width: 20,
- height: 18,
- fontSize: 12,
- align: 'center',
- borderRadius: 50,
- padding: [2, 0, 0, 0],
- },
- nt3: {
- color: '#fff',
- backgroundColor: attackSourcesColor1[2],
- width: 20,
- height: 18,
- fontSize: 12,
- align: 'center',
- borderRadius: 50,
- padding: [2, 0, 0, 0],
- },
- nt: {
- color: '#fff',
- backgroundColor: attackSourcesColor1[3],
- width: 20,
- height: 18,
- fontSize: 12,
- align: 'center',
- borderRadius: 50,
- padding: [2, 0, 0, 0],
- },
- },
- formatter: function (value, index) {
- index = contains(stationData, value) + 1;
- if (index - 1 < 3) {
- return ['{nt' + index + '|' + index + '}'].join('\n');
- } else {
- return ['{nt|' + index + '}'].join('\n');
- }
- },
- },
- },
-
- {
- type: 'category',
- inverse: true,
- axisTick: 'none',
- axisLine: 'none',
- show: true,
- axisLabel: {
- textStyle: {
- color: '#666',
- fontSize: '12',
- },
- },
- data: dataFormat(values),
- },
-
- { // 鏉＄姸鏍囬
- type: 'category',
- inverse: true,
- offset: -10,
- position: 'left',
- axisTick: 'none',
- axisLine: 'none',
- show: true,
- axisLabel: {
- interval: 0,
- color: ['#666'],
- align: 'left',
- verticalAlign: 'bottom',
- lineHeight: 42,
- fontSize: 14,
- },
- data: dataFormat(stationData),
- },
- ],
- series: [
- {
- zlevel: 1,
- name: seriesName[0],
- type: 'bar',
- barWidth: 15,
- data: dataFormat(values),
- align: 'center',
- itemStyle: {
- normal: {
- barBorderRadius: 10,
- },
- },
- label: { //鏉＄姸涓殑鏍峰紡
- show: true,
- fontSize: 10,
- color: '#fff', //鏉¤涓瓧浣撻鑹�
- textBorderWidth: 2,
- padding: [2, 0, 0, 0],
- },
- },
- {
- name: seriesName[1],
- type: 'bar',
- barWidth: 15,
- barGap: '-100%',
- data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
- 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
- 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
- 100, 100, 100, 100],
- itemStyle: {
- normal: {
- color: 'rgba(200,200,200,.3)',
- //width:"100%",
- fontSize: 12,
- barBorderRadius: 30,
- },
- },
- },
- ],
- };
- Chart2.setOption(option);
- }
-
- function dataFormat(data) {
- var arr = [];
- data.forEach(function (item, i) {
- let itemStyle = {
- color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
- };
- arr.push({
- value: item,
- itemStyle: itemStyle,
- });
- });
- return arr;
- }
-
- function contains(arr, dst) {
- var i = arr.length;
- while ((i -= 1)) {
- if (arr[i] == dst) {
- return i;
- }
- }
- return false;
- }
-
-
-
-
-</script>
-
-</body>
-</html>
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 bb1dc48..b077c3f 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -260,32 +260,7 @@
<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>
+ <div id="map_div" style="width: 100%;height: 600px;margin-top: -5px"></div>
</el-card>
</el-col>
@@ -302,10 +277,10 @@
<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">
+<!-- <div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">-->
+<!-- <h3>鍦哄湴璇︾粏杩涘害(%)</h3>-->
+<!-- </div>-->
+ <div style="width: 100%;height: 330px;overflow: auto">
<el-row class="rankrow" v-for='entity in stationProcessData' @click.native='viewStation(entity)'>
<el-col :span="2" >
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main2.html
similarity index 66%
rename from javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html
rename to javaweb-plus/javaweb-admin/src/main/resources/templates/main2.html
index c6eb966..bb1dc48 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main2.html
@@ -15,9 +15,6 @@
background-color: rgba(0,0,0,0.01) !important;
padding:10px;
}
- body{
- padding: 10px;
- }
[v-cloak]{
display: none;
}
@@ -88,11 +85,51 @@
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 {
+ 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>
@@ -107,25 +144,24 @@
<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">鍦哄湴鏁伴噺</span>
</div>
<div style="text-align: center;">
- <span style="color:#000;font-size: 30px;word-break: break-all;line-height: 70px">34
+ <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="color:rgba(0,0,0,.87);font-size: 15px;">
鍗忚皟涓�
- <span style="float: right">
- {{indexDataCount.projectStatus0}}
- </span>
+ <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="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,.65);font-size: 15px;">
+ <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">-->
@@ -140,20 +176,20 @@
<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>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">閽诲瓟鏁伴噺</span>
</div>
<div style="text-align: center">
- <span style="color:#000;font-size: 30px;word-break: break-all;line-height: 70px;">647
+ <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="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,.65);font-size: 15px;">
+ <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>
@@ -169,7 +205,7 @@
<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">瀹炴椂鐩戞帶</span>
</div>
<div style="text-align: center">
- <span style="color:#000;font-size: 30px;word-break: break-all;line-height: 70px">68
+ <span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px">68
</span>
</div>
</div>
@@ -178,12 +214,12 @@
<div>
</div>
- <span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 宸插畨瑁� <span style="float: right">0</span>
+ <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,.65);font-size: 15px;">
- 鏈畨瑁� <span style="float: right">68</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>
@@ -197,22 +233,22 @@
<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">璧勬枡鏂囦欢</span>
</div>
<div style="text-align: center">
- <span style="color:#000;font-size: 30px;word-break: break-all;line-height: 70px;">
+ <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="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,.65);font-size: 15px;">
+ <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,.65);font-size: 15px;">
+ <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>
@@ -224,60 +260,76 @@
<el-row>
<el-col :span="16">
<el-card class="box-card">
- <div>
+ <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: 4px;">
- <div id="map_div" style="width: 100%;height: 550px;"></div>
+ <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="width: 100%;height: 20px;">
- <h3>椤圭洰鎬讳綋杩涘害(%)</h3>
+ <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>
- <div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
</el-card>
- <el-card class="box-card" style="margin-top: 4px;">
- <div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">
- <h3>鍦哄湴璇︾粏杩涘害(%)</h3>
- </div>
- <div style="width: 100%;height: 500px;overflow: auto">
+ <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-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>
- <el-col :span="7">
- <div style="font-size: 16px">{{entity.station}}</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="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>
-
+ <el-col :span="8">
+ <div>
+ <el-progress :stroke-width="10" :percentage="entity.value"></el-progress>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
</div>
</el-card>
@@ -304,8 +356,13 @@
<th:block th:include="include :: footer" />
<script th:inline="javascript">
+ var loginuser = [[${loginuser}]];
$(function() {
+ if(loginuser=='admin'){
+ window.open("http://49.4.115.102:8000/onemap/onemap.html","_blank");
+ }
+
loadMap();
getReallyData();
totalProcess();
@@ -313,6 +370,7 @@
indexCount();
tubLogs();
})
+ //鍦哄湴鍜屽湴鍥剧偣鍑昏仈鍔�
function viewStation(station) {
var lng = station.lng;
var lat = station.lat;
@@ -320,32 +378,101 @@
}
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.tubLogData = res.tubLogData;
+ 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/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 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",
@@ -353,10 +480,17 @@
return {
stationProcessData: [],
indexDataCount :"",
- tubLogData:[],
+ tubLogs:[],
};
},
methods: {
+ tableRowClassName({ row, rowIndex }) {
+ if (rowIndex % 2 == 0) {
+ return "";
+ } else {
+ return "warning-row";
+ }
+ },
}
});
// 鍔犺浇鍦板浘
@@ -379,6 +513,8 @@
map.addOverLay(countriesOverlay1)
countriesOverlay.bringToBack();
});
+
+ //map.setStyle("indigo");
}
function init(sel, transform) {
@@ -422,7 +558,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);
@@ -430,12 +566,28 @@
}
//鍦板浘涓婂睍绀洪」鐩偣
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});
@@ -478,16 +630,18 @@
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;
- pointerData = (pointerData*100).toFixed(0);
- })
+ pointerData = (pointerData*100).toFixed(2);
+ });
+
$.ajaxSettings.async = false;
var option = {
backgroundColor: "#fff",
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/mainBAK.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/mainBAK.html
deleted file mode 100644
index 5d6e63c..0000000
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/mainBAK.html
+++ /dev/null
@@ -1,514 +0,0 @@
-<!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;
- }
- .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__body tr,
- .el-table__body td {
- padding: 0;
- height: 22px;
- }
- .custom-icon:hover {
- color: #0981ea;
- cursor: pointer;
- }
-</style>
-</head>
-
-<body class="gray-bg">
- <div class="content" id="app" v-cloak>
- <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>
-
- <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 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";
- $.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;
- 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);
- }
-
- }
-
- 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>" + "<br>" +
- "</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) {
- console.log("浣犵偣鍑讳簡",content);
- 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: "transparent",
- 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>
--
Gitblit v1.9.1