From d94fdf89007d501491a6a79e1d14b40283826b0b Mon Sep 17 00:00:00 2001
From: chenhuan <czj123456>
Date: 星期五, 24 五月 2024 10:44:25 +0800
Subject: [PATCH] 样式调整
---
javaweb-plus/javaweb-admin/src/main/resources/templates/main.html | 162 ++++++++++++++++++++++++++++++++++-------------------
1 files changed, 103 insertions(+), 59 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 ff61655..3617db7 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -14,6 +14,9 @@
width: 100%;
background-color: rgba(0,0,0,0.01) !important;
}
+ [v-cloak]{
+ display: none;
+ }
.el-card__header{
height: 40px;
padding: 8px 20px;
@@ -24,7 +27,19 @@
border-radius: 50%;
font-size: 14px;
color: white;
- background: #314659;
+ 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;
@@ -34,9 +49,9 @@
width: 20px;
height: 20px;
border-radius: 50%;
- font-size: 16px;
+ font-size: 14px;
color: white;
- background: dodgerblue;
+ background: #67C23A;
text-align: center;
line-height: 20px;
float: left;
@@ -62,35 +77,39 @@
}
.rankrow{
margin-top: 12px;
+ cursor: pointer;
}
</style>
</head>
<body class="gray-bg">
- <div class="content" id="app">
- <el-row style="height: 130px;">
+ <div class="content" id="app" v-cloak>
+ <el-row style="height: 127px;">
<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 style="flex:4;">
+ <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>
- <div>
+
+ <div style="flex:6;">
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 鍗忚皟涓�
+ 鍗忚皟涓� {{indexDataCount.projectStatus0}}
<li class="el-icon-caret-bottom" style="color: #f56c6c">
</span>
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 寰呭紑宸� 34
+ 寰呭紑宸� {{indexDataCount.projectStatus1}}
<li class="el-icon-caret-bottom" style="color: #e6a23c">
</span>
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 杩涜涓� 0
+ 杩涜涓� {{indexDataCount.projectStatus2}}
<li class="el-icon-caret-top" style="color: #409eff">
</span>
@@ -100,21 +119,24 @@
<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>
+ <div style="flex:4;">
+ <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>
- <div>
+
+ <div style="flex:6;">
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 鎬昏繘灏� 134,1000.00m
+ 鎬昏繘灏� {{indexDataCount.footageCount}}m
<li class="el-icon-caret-bottom" style="color: #f56c6c">
</span>
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 宸插畬鎴� 12,322.23m
+ 宸插畬鎴� {{indexDataCount.footageCplCount}}m
<li class="el-icon-caret-bottom" style="color: #409eff">
</span>
</div>
@@ -123,15 +145,21 @@
<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>
+ <div style="flex:4;">
+ <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>
- <div>
+
+ <div style="flex:6;">
+ <div>
+
+ </div>
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
宸插畨瑁� 0
<li class="el-icon-caret-bottom" style="color: #f56c6c">
@@ -145,21 +173,29 @@
</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
+ <div style="flex:4;">
+ <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">
+ {{indexDataCount.fileCount}}浠�
</span>
+ </div>
</div>
- <div>
+
+ <div style="flex:6;">
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 鎬昏繘灏� 134,1000.00m
+ 鏂藉伐璧勬枡 0
<li class="el-icon-caret-bottom" style="color: #f56c6c">
</span>
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
- 宸插畬鎴� 12,322.23m
+ 瀹夊叏璧勬枡 0
+ <li class="el-icon-caret-bottom" style="color: #409eff">
+ </span>
+ <span style="color:rgba(0,0,0,.65);font-size: 15px;">
+ 璐ㄩ噺璧勬枡 0
<li class="el-icon-caret-bottom" style="color: #409eff">
</span>
</div>
@@ -175,7 +211,7 @@
</div>
</el-card>
- <el-card class="box-card">
+ <el-card class="box-card" style="margin-top: 4px;">
<div id="map_div" style="width: 100%;height: 550px;"></div>
</el-card>
@@ -189,29 +225,34 @@
<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;">
+ <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'>-->
-<!-- <el-col :span="2">-->
-<!-- <div class="active-red">{{entity.ranking}}</div>-->
-<!-- </el-col>-->
+ <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 :span="4">-->
-<!-- <div style="font-size: 16px">{{entity.station}}</div>-->
-<!-- </el-col >-->
+ </el-col>
-<!-- <el-col :span="4">-->
-<!-- <div style="font-size: 16px">{{entity.status}}</div>-->
-<!-- </el-col>-->
+ <el-col :span="7">
+ <div style="font-size: 16px">{{entity.station}}</div>
+ </el-col >
-<!-- <el-col :span="12">-->
-<!-- <div><el-progress :stroke-width="12" :percentage="{{entity.status}}"></el-progress></div>-->
-<!-- </el-col>-->
-<!-- </el-row>-->
+ <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>
@@ -244,26 +285,29 @@
loadMap();
getReallyData();
totalProcess();
- //stationProcess();
+ stationProcess();
indexCount();
})
+ function viewStation(station) {
+ var lng = station.lng;
+ var lat = station.lat;
+ map.centerAndZoom(new T.LngLat(lng, lat), 13);
+ // $.modal.openTab("鍦哄湴瀵艰埅",ctx+"/geo/project/navigate?ids="+id);
+ }
function indexCount() {
let url = ctx + "/system/indexDataCount";
$.ajaxSettings.async = false;
$.get(url,{},function(res){
- console.log(res);
- //vm.indexDataCount = res.projectData;
+ vm.indexDataCount = res.data;
})
$.ajaxSettings.async = false;
- console.log(vm.stationProcessData);
}
function stationProcess() {
let url = ctx + "/system/projectProcess";
$.ajaxSettings.async = false;
$.get(url,{},function(res){
- console.log(res.projectData);
vm.stationProcessData = res.projectData;
})
$.ajaxSettings.async = false;
--
Gitblit v1.9.1