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

View File

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

View File

@ -62,6 +62,28 @@
background-color: RGBA(55,141,204,0.5); background-color: RGBA(55,141,204,0.5);
bottom: 10px; 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> </style>
<script type="text/javascript"> <script type="text/javascript">
@ -130,7 +152,7 @@
<div id="mainDiv" style="background:#f1f1f1;"> <div id="mainDiv" style="background:#f1f1f1;">
<div style="float:left;height:100%;width:35%;"> <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;"> <div style="height:100%;width:100%;background-color:#ffffff;">
<%--图片--%> <%--图片--%>
<!-- <img src="" id="mainImg" style="width:100%;height:100%;"> --> <!-- <img src="" id="mainImg" style="width:100%;height:100%;"> -->
@ -151,47 +173,15 @@
</div> </div>
</div> </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>
<div style="float:left;height:100%;width:65%;"> <div style="float:left;height:100%;width:65%;">
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;"> <div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;"> <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>
<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 style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
<div class="fontValue" style="color: #0c4377;" id="valueProduce1_js"></div> <div class="fontValue" style="color: #0c4377;" id="valueProduce1_js"></div>
<div class="fontText" style="color: #0c4377;" id="textProduce1_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 class="fontText" style="color: #0c4377;" id="textProduce3_js"></div>
</div> </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:100%;float:left;">
<div style="width:100%;height:3%;float:left;"></div> <div style="width:100%;height:3%;float:left;"></div>
<div style="width:100%;height:40%;float:left;"> <div style="width:100%;height:40%;float:left;">
@ -288,6 +278,39 @@
</div> </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 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="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
<div style="height:100%;width:100%;background-color:#ffffff;"> <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 style="width:100%;height:5%;float:left;border-bottom:2px solid #67aad7;font-weight: bold;">
@ -390,6 +413,7 @@
</div> </div>
</div> </div>
</div> </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" %> <%@ page language="java" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %> <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<style type="text/css"> <style type="text/css">
/* 覆盖Bootstrap Modal样式以匹配APP风格 */ /* 覆盖Bootstrap Modal样式以匹配APP风格 */
.modal-dialog { #subModal .modal-dialog {
width: 46%; width: 900px; /* 加宽弹窗 */
margin: 30px auto; margin: 30px auto;
} }
@media (max-width: 768px) { @media (max-width: 992px) {
.modal-dialog { #subModal .modal-dialog {
width: 94%; width: 94%;
margin: 10px auto; margin: 10px auto;
} }
} }
.modal-content { #subModal .modal-content {
border-radius: 16px; border-radius: 12px;
border: none; border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden; overflow: hidden;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
} }
.modal-header { #subModal .modal-header {
/* 截图中的蓝绿渐变背景 */ /* 截图中的蓝绿渐变背景 */
background: linear-gradient(135deg, #4CD964 0%, #20E2D7 50%, #12B7F5 100%); background: linear-gradient(135deg, #4CD964 0%, #20E2D7 50%, #12B7F5 100%);
color: white; color: white;
padding: 20px 25px; padding: 15px 25px;
border-bottom: none; border-bottom: none;
} }
.modal-title { #subModal .modal-title {
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.close { #subModal .close {
color: white; color: white;
opacity: 0.8; opacity: 0.8;
text-shadow: none; text-shadow: none;
font-size: 28px; font-size: 28px;
margin-top: -5px; margin-top: -2px;
} }
.close:hover { #subModal .close:hover {
color: #fff; color: #fff;
opacity: 1; opacity: 1;
} }
.modal-body { #subModal .modal-body {
padding: 25px 30px; padding: 25px 30px;
background-color: #f9fbfd; /* 极淡的背景色 */ background-color: #f9fbfd; /* 极淡的背景色 */
max-height: 70vh; /* 限制高度 */
overflow-y: auto; /* 允许滚动 */
} }
/* 表单样式优化 */ /* 表单样式优化 */
.form-horizontal { #subModal .form-horizontal {
padding-top: 10px; padding-top: 10px;
} }
.form-group { #subModal .form-group {
margin-bottom: 20px; margin-bottom: 20px;
} }
.form-group label { #subModal .form-group label {
font-weight: 500; font-weight: 500;
color: #555; color: #555;
font-size: 14px; font-size: 14px;
padding-top: 10px !important; /* 垂直居中 */ padding-top: 10px !important; /* 垂直居中 */
text-align: right;
} }
.form-control { #subModal .form-control {
border-radius: 8px; border-radius: 6px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
box-shadow: none; box-shadow: none;
height: 40px; height: 38px;
background-color: #fff; background-color: #fff;
transition: all 0.3s; transition: all 0.3s;
} }
.form-control:focus { #subModal .form-control:focus {
border-color: #20E2D7; border-color: #20E2D7;
box-shadow: 0 0 0 3px rgba(32, 226, 215, 0.1); box-shadow: 0 0 0 3px rgba(32, 226, 215, 0.1);
background-color: #fff; background-color: #fff;
} }
/* 只读输入框样式 */ /* 只读输入框样式 */
.form-control[readonly] { #subModal .form-control[readonly] {
background-color: #f5f7fa; background-color: #f5f7fa;
color: #777; color: #777;
cursor: pointer; /* 如果有点击事件 */ cursor: pointer; /* 如果有点击事件 */
} }
/* Select2 样式覆盖 */ /* Select2 样式覆盖 */
.select2-container .select2-selection--single { #subModal .select2-container .select2-selection--single {
height: 40px !important; height: 38px !important;
border: 1px solid #e0e0e0 !important; border: 1px solid #e0e0e0 !important;
border-radius: 8px !important; border-radius: 6px !important;
line-height: 40px !important; line-height: 38px !important;
outline: none; outline: none;
} }
.select2-container--default .select2-selection--single .select2-selection__rendered { #subModal .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 40px !important; line-height: 38px !important;
color: #555; color: #555;
} }
.select2-container--default .select2-selection--single .select2-selection__arrow { #subModal .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px !important; height: 36px !important;
right: 5px; right: 5px;
} }
.select2-container--default .select2-selection--multiple .select2-selection__choice { #subModal .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e3f2fd; background-color: #e3f2fd;
border: 1px solid #bbdefb; border: 1px solid #bbdefb;
color: #1e88e5; color: #1e88e5;
border-radius: 4px; border-radius: 4px;
margin-top: 7px; margin-top: 6px;
} }
.select2-container .select2-selection--multiple { #subModal .select2-container .select2-selection--multiple {
min-height: 40px !important; min-height: 38px !important;
border: 1px solid #e0e0e0 !important; border: 1px solid #e0e0e0 !important;
border-radius: 8px !important; border-radius: 6px !important;
} }
/* 底部按钮区 */ /* 底部按钮区 */
.modal-footer { #subModal .modal-footer {
border-top: none; border-top: 1px solid #eee;
padding: 20px 30px 30px; padding: 15px 30px;
background-color: #f9fbfd; background-color: #fff;
text-align: right; text-align: right;
} }
.btn { #subModal .btn {
border-radius: 25px; /* 圆角胶囊按钮 */ border-radius: 20px; /* 圆角胶囊按钮 */
padding: 8px 30px; padding: 6px 25px;
font-size: 14px; font-size: 14px;
border: none; border: none;
font-weight: 500; 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; transition: transform 0.2s, box-shadow 0.2s;
} }
.btn:active { #subModal .btn:active {
transform: scale(0.98); transform: scale(0.98);
} }
.btn-default { #subModal .btn-default {
background-color: #edf2f7; background-color: #edf2f7;
color: #666; color: #666;
} }
.btn-default:hover { #subModal .btn-default:hover {
background-color: #e2e8f0; background-color: #e2e8f0;
} }
.btn-primary { #subModal .btn-primary {
/* 按钮也使用渐变 */ /* 按钮也使用渐变 */
background: linear-gradient(90deg, #20E2D7 0%, #12B7F5 100%); background: linear-gradient(90deg, #20E2D7 0%, #12B7F5 100%);
color: white; color: white;
box-shadow: 0 4px 12px rgba(18, 183, 245, 0.3); 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%); background: linear-gradient(90deg, #1CD1C7 0%, #10A6DF 100%);
box-shadow: 0 6px 15px rgba(18, 183, 245, 0.4); box-shadow: 0 6px 15px rgba(18, 183, 245, 0.4);
color: white; color: white;
} }
/* 日期选择器图标 */ /* 日期选择器图标 */
.input-group-addon { #subModal .input-group-addon {
background-color: #fff; background-color: #fff;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-left: none; border-left: none;
border-top-right-radius: 8px; border-top-right-radius: 6px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 6px;
color: #12B7F5; color: #12B7F5;
} }
.input-group .form-control { #subModal .input-group .form-control {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
/* 其他 */ /* 其他 */
.right { .right {
margin-left: 50px; 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 () { var fileinput = function () {
$('#file').click(); $('#file').click();
}; };
var filedel = function () { var filedel = function (id) {
$('#fileName').val(''); 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 fileSelected = function () {
var filename = $('#file').val(); 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>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label ">*作业内容</label> <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" <input type="text" class="form-control" id="jobContent" name="jobContent"
value="${bean.jobContent}"> value="${bean.jobContent}">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label ">*主管部门意见</label> <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" <input type="text" class="form-control" id="competentAdvice" name="competentAdvice"
placeholder="请选择.." placeholder="请选择.."
value="${bean.competentAdvice}"> 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}"> value="${bean.copyUserId}">
</div> </div>
</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 class="col-sm-10" id="fileList"></div>
</div> </div>

View File

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