登录页UI、主页UI

This commit is contained in:
Rue Ji
2026-02-08 01:02:58 +08:00
parent 580606c267
commit fcf08b8b69
8 changed files with 151 additions and 101 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -394,8 +394,8 @@
type: 'bar',
barWidth: '40%',
itemStyle: {
color: 'rgba(255, 170, 0, 0.4)',
borderColor: '#ffaa00',
color: 'rgba(255, 153, 0, 0.3)',
borderColor: '#FF9900',
borderWidth: 1
},
markPoint: {
@ -407,7 +407,7 @@
fontSize: 12
},
itemStyle: {
color: '#ffaa00'
color: '#FF9900'
},
data: [
{ type: 'max', name: 'Max' },
@ -423,11 +423,11 @@
show: true,
position: 'end',
formatter: '{c}',
color: '#ffaa00'
color: '#FF9900'
},
lineStyle: {
type: 'dotted',
color: '#ffaa00'
color: '#FF9900'
}
}
}

View File

@ -135,7 +135,7 @@
//配置logo
var array = eval(${jsonArray});
var verCode = true;
var bgpath = ["IMG/login/bg.jpg"];
var bgpath = ["IMG/login/bg1.png"];
if(array!=null && array!=undefined && array.length>0){
for(var i =0;i<array.length;i++){
var img = null;
@ -326,7 +326,7 @@
<!-- BEGIN 登录 FORM -->
<form class="login-form " id="loginForm">
<div class="logo row">
<img src="" style="width:100%;" alt="" id="login-title" />
<img src="IMG/login/title_tglw.png" style="width:100%;" alt="" id="login-title1" />
<!-- <div class="col-lg-8 col-sm-8 col-md-8 col-xs-8">
<h5 style="color:black" class="form-title">西派埃智能</h4>
<h2 style="margin:0px">南康智慧水厂运管平台</h2>

View File

@ -62,6 +62,28 @@
background-color: RGBA(55,141,204,0.5);
bottom: 10px;
}
.section-header {
width: 100%;
height: 9%;
float: left;
border-bottom: 2px solid #67aad7;
font-weight: bold;
font-size: 13px;
color: #0c4377;
padding-left: 15px;
display: flex;
align-items: center;
background: linear-gradient(to right, rgba(103, 170, 215, 0.1), transparent);
}
.section-header::before {
content: "";
display: block;
width: 4px;
height: 60%;
background-color: #0c4377;
margin-right: 10px;
border-radius: 2px;
}
</style>
<script type="text/javascript">
@ -130,7 +152,7 @@
<div id="mainDiv" style="background:#f1f1f1;">
<div style="float:left;height:100%;width:35%;">
<div style="float:left;height:45%;width:100%;padding:5px 5px 5px 5px;">
<div style="float:left;height:100%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;">
<%--图片--%>
<!-- <img src="" id="mainImg" style="width:100%;height:100%;"> -->
@ -151,47 +173,15 @@
</div>
</div>
</div>
<div style="float:left;height:55%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;">
<div style="width:100%;height:5%;float:left;border-bottom:2px solid #67aad7;font-weight: bold;">
水量及电耗
</div>
<div style="width:100%;height:40%;float:left;">
<div style="width:48%;height:45%;float:left;background-color:#378dcc;margin:1%;">
<div class="fontValue" id="safe_value_1">-</div>
<div class="fontText" id="safe_text_1">-</div>
</div>
<div style="width:48%;height:45%;float:right;background-color:#67aad7;margin:1%;">
<div class="fontValue" id="safe_value_2">-</div>
<div class="fontText" id="safe_text_2">-</div>
</div>
<div style="width:48%;height:45%;float:left;background-color:#FACA00;margin:1%;">
<div class="fontValue" id="safe_value_3">-</div>
<div class="fontText" id="safe_text_3">-</div>
</div>
<div style="width:48%;height:45%;float:right;background-color:#66D97C;margin:1%;">
<div class="fontValue" id="safe_value_4">-</div>
<div class="fontText" id="safe_text_4">-</div>
</div>
</div>
<div style="width:100%;height:55%;float:left;padding: 5px 5px 5px 5px;">
<div style="width:100%;height:100%;float:left;">
<div style="width:100%;height:100%;float:left;" id="myChartProduce8"></div>
</div>
</div>
</div>
</div>
</div>
<div style="float:left;height:100%;width:65%;">
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;">
<div style="width:100%;height:5%;float:left;border-bottom:2px solid #67aad7;font-weight: bold;">
一车间
<div class="section-header">
上海金山卫污水公司
</div>
<div style="width:20%;height:100%;float:left;">
<div style="width:20%;height:95%;float:left;">
<div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
<div class="fontValue" style="color: #0c4377;" id="valueProduce1_js"></div>
<div class="fontText" style="color: #0c4377;" id="textProduce1_js"></div>
@ -205,7 +195,7 @@
<div class="fontText" style="color: #0c4377;" id="textProduce3_js"></div>
</div>
</div>
<div style="width:80%;height:100%;float:left;padding: 5px 10px 30px 10px;">
<div style="width:80%;height:95%;float:left;padding: 5px 10px 30px 10px;">
<div style="width:100%;height:100%;float:left;">
<div style="width:100%;height:3%;float:left;"></div>
<div style="width:100%;height:40%;float:left;">
@ -288,6 +278,39 @@
</div>
</div>
</div>
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;">
<div class="section-header">
水量及电耗
</div>
<div style="width:100%;height:40%;float:left;">
<div style="width:48%;height:45%;float:left;background-color:#378dcc;margin:1%;">
<div class="fontValue" id="safe_value_1">-</div>
<div class="fontText" id="safe_text_1">-</div>
</div>
<div style="width:48%;height:45%;float:right;background-color:#67aad7;margin:1%;">
<div class="fontValue" id="safe_value_2">-</div>
<div class="fontText" id="safe_text_2">-</div>
</div>
<div style="width:48%;height:45%;float:left;background-color:#FACA00;margin:1%;">
<div class="fontValue" id="safe_value_3">-</div>
<div class="fontText" id="safe_text_3">-</div>
</div>
<div style="width:48%;height:45%;float:right;background-color:#66D97C;margin:1%;">
<div class="fontValue" id="safe_value_4">-</div>
<div class="fontText" id="safe_text_4">-</div>
</div>
</div>
<div style="width:100%;height:55%;float:left;padding: 5px 5px 5px 5px;">
<div style="width:100%;height:100%;float:left;">
<div style="width:100%;height:100%;float:left;" id="myChartProduce8"></div>
</div>
</div>
</div>
</div>
<!--
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;">
<div style="width:100%;height:5%;float:left;border-bottom:2px solid #67aad7;font-weight: bold;">
@ -390,6 +413,7 @@
</div>
</div>
</div>
-->
</div>
</div>

View File

@ -1,143 +1,144 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<style type="text/css">
/* 覆盖Bootstrap Modal样式以匹配APP风格 */
.modal-dialog {
width: 46%;
#subModal .modal-dialog {
width: 900px; /* 加宽弹窗 */
margin: 30px auto;
}
@media (max-width: 768px) {
.modal-dialog {
@media (max-width: 992px) {
#subModal .modal-dialog {
width: 94%;
margin: 10px auto;
}
}
.modal-content {
border-radius: 16px;
#subModal .modal-content {
border-radius: 12px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.modal-header {
#subModal .modal-header {
/* 截图中的蓝绿渐变背景 */
background: linear-gradient(135deg, #4CD964 0%, #20E2D7 50%, #12B7F5 100%);
color: white;
padding: 20px 25px;
padding: 15px 25px;
border-bottom: none;
}
.modal-title {
#subModal .modal-title {
font-weight: 600;
font-size: 18px;
letter-spacing: 1px;
}
.close {
#subModal .close {
color: white;
opacity: 0.8;
text-shadow: none;
font-size: 28px;
margin-top: -5px;
margin-top: -2px;
}
.close:hover {
#subModal .close:hover {
color: #fff;
opacity: 1;
}
.modal-body {
#subModal .modal-body {
padding: 25px 30px;
background-color: #f9fbfd; /* 极淡的背景色 */
max-height: 70vh; /* 限制高度 */
overflow-y: auto; /* 允许滚动 */
}
/* 表单样式优化 */
.form-horizontal {
#subModal .form-horizontal {
padding-top: 10px;
}
.form-group {
#subModal .form-group {
margin-bottom: 20px;
}
.form-group label {
#subModal .form-group label {
font-weight: 500;
color: #555;
font-size: 14px;
padding-top: 10px !important; /* 垂直居中 */
text-align: right;
}
.form-control {
border-radius: 8px;
#subModal .form-control {
border-radius: 6px;
border: 1px solid #e0e0e0;
box-shadow: none;
height: 40px;
height: 38px;
background-color: #fff;
transition: all 0.3s;
}
.form-control:focus {
#subModal .form-control:focus {
border-color: #20E2D7;
box-shadow: 0 0 0 3px rgba(32, 226, 215, 0.1);
background-color: #fff;
}
/* 只读输入框样式 */
.form-control[readonly] {
#subModal .form-control[readonly] {
background-color: #f5f7fa;
color: #777;
cursor: pointer; /* 如果有点击事件 */
}
/* Select2 样式覆盖 */
.select2-container .select2-selection--single {
height: 40px !important;
#subModal .select2-container .select2-selection--single {
height: 38px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
line-height: 40px !important;
border-radius: 6px !important;
line-height: 38px !important;
outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 40px !important;
#subModal .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px !important;
color: #555;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px !important;
#subModal .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px !important;
right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
#subModal .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e3f2fd;
border: 1px solid #bbdefb;
color: #1e88e5;
border-radius: 4px;
margin-top: 7px;
margin-top: 6px;
}
.select2-container .select2-selection--multiple {
min-height: 40px !important;
#subModal .select2-container .select2-selection--multiple {
min-height: 38px !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
border-radius: 6px !important;
}
/* 底部按钮区 */
.modal-footer {
border-top: none;
padding: 20px 30px 30px;
background-color: #f9fbfd;
#subModal .modal-footer {
border-top: 1px solid #eee;
padding: 15px 30px;
background-color: #fff;
text-align: right;
}
.btn {
border-radius: 25px; /* 圆角胶囊按钮 */
padding: 8px 30px;
#subModal .btn {
border-radius: 20px; /* 圆角胶囊按钮 */
padding: 6px 25px;
font-size: 14px;
border: none;
font-weight: 500;
@ -145,47 +146,48 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
transition: transform 0.2s, box-shadow 0.2s;
}
.btn:active {
#subModal .btn:active {
transform: scale(0.98);
}
.btn-default {
#subModal .btn-default {
background-color: #edf2f7;
color: #666;
}
.btn-default:hover {
#subModal .btn-default:hover {
background-color: #e2e8f0;
}
.btn-primary {
#subModal .btn-primary {
/* 按钮也使用渐变 */
background: linear-gradient(90deg, #20E2D7 0%, #12B7F5 100%);
color: white;
box-shadow: 0 4px 12px rgba(18, 183, 245, 0.3);
}
.btn-primary:hover {
#subModal .btn-primary:hover {
background: linear-gradient(90deg, #1CD1C7 0%, #10A6DF 100%);
box-shadow: 0 6px 15px rgba(18, 183, 245, 0.4);
color: white;
}
/* 日期选择器图标 */
.input-group-addon {
#subModal .input-group-addon {
background-color: #fff;
border: 1px solid #e0e0e0;
border-left: none;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
color: #12B7F5;
}
.input-group .form-control {
#subModal .input-group .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* 其他 */
.right {
margin-left: 50px;
@ -248,8 +250,21 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
var fileinput = function () {
$('#file').click();
};
var filedel = function () {
$('#fileName').val('');
var filedel = function (id) {
if (id) {
$.post(ext.contextPath + '/safety/SafetyFiles/delete.do', {
fileId: id
}, function (data) {
if (data.code == 1) {
showAlert('s', '文件删除成功!');
initFileList();
} else {
showAlert('d', '删除失败');
}
}, 'json');
} else {
$('#fileName').val('');
}
};
var fileSelected = function () {
var filename = $('#file').val();
@ -590,14 +605,14 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
</div>
<div class="form-group">
<label class="col-sm-2 control-label ">*作业内容</label>
<div class="col-sm-4">
<div class="col-sm-10">
<input type="text" class="form-control" id="jobContent" name="jobContent"
value="${bean.jobContent}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label ">*主管部门意见</label>
<div class="col-sm-4">
<div class="col-sm-10">
<input type="text" class="form-control" id="competentAdvice" name="competentAdvice"
placeholder="请选择.."
value="${bean.competentAdvice}">
@ -628,7 +643,8 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
value="${bean.copyUserId}">
</div>
</div>
<div class="form-group" style="margin-left: 19px">
<div class="form-group">
<label class="col-sm-2 control-label">附件</label>
<div class="col-sm-10" id="fileList"></div>
</div>

View File

@ -541,6 +541,11 @@
yAxisIndex: 0,
data: maxValues,
barWidth: 45,
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)',
barBorderRadius: [0, 22, 22, 0]
},
label: {
normal: {
show: true,
@ -557,6 +562,11 @@
yAxisIndex: 1,
data: minValues,
barWidth: 45,
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)',
barBorderRadius: [0, 22, 22, 0]
},
label: {
normal: {
show: true,