From 41750848c6cc6506fa107036d04b28c0f28cfba8 Mon Sep 17 00:00:00 2001
From: zmk <496160012@qq.com>
Date: 星期三, 03 七月 2024 16:19:07 +0800
Subject: [PATCH] 提交
---
javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html | 671 +++++++++++++++++++++++++++----------------------------
1 files changed, 329 insertions(+), 342 deletions(-)
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html
index ce0adc3..c6eb966 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html
@@ -2,61 +2,289 @@
<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;
+ padding:10px;
+ }
+ body{
+ 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;
+ }
+
+</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 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 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 style="text-align: center;">
+ <span style="color:#000;font-size: 30px;word-break: break-all;line-height: 70px">34
+ </span>
</div>
</div>
- </div>
- </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:#000;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:#000;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:#000;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>
+ <h3>鏉愭枡缁熻</h3>
+
+ <el-col :span="10" style="height: 200px;">
+ </el-col>
+ <el-col :span="14" style="height: 200px;">
+ </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>
+
+ </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" 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-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>
+
+ </el-card>
+
+ </el-col>
+
+ </el-row>
</div>
@@ -68,6 +296,10 @@
<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" />
@@ -78,8 +310,55 @@
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() {
+ let url = ctx + "/system/tubLogData";
+ $.ajaxSettings.async = false;
+ $.get(url,{},function(res){
+ vm.tubLogData = res.tubLogData;
+ })
+ $.ajaxSettings.async = false;
+ }
+
+ function indexCount() {
+ let url = ctx + "/system/indexDataCount";
+ $.ajaxSettings.async = false;
+ $.get(url,{},function(res){
+ vm.indexDataCount = res.data;
+ })
+ $.ajaxSettings.async = false;
+ }
+
+ function stationProcess() {
+ let url = ctx + "/system/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",
+ data() {
+ return {
+ stationProcessData: [],
+ indexDataCount :"",
+ tubLogData:[],
+ };
+ },
+ methods: {
+ }
+ });
// 鍔犺浇鍦板浘
let map=null;
var countries = [];
@@ -215,7 +494,7 @@
series: [
{
type: "gauge",
- radius: 120,
+ radius: 80,
z: 1,
startAngle: 225,
endAngle: -45,
@@ -350,298 +629,6 @@
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;
- }
--
Gitblit v1.9.1