cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

This commit is contained in:
cwchen 2025-07-24 11:14:56 +08:00
parent 73f20adcdf
commit 8b5afaf6a4
3 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/pages/newDataAnalysis/resourceRateAnalysis_api.js
View File

@ -195,7 +195,7 @@ function initUtilizationChart(distributionData) {
name: '资源利用率', name: '资源利用率',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
center: ['65%', '50%'], center: ['65%', '40%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 8, borderRadius: 8,
@ -313,15 +313,15 @@ function initTrendsChart(trendsData) {
textStyle: { textStyle: {
color: '#16baaa' color: '#16baaa'
}, },
top: 10 // top: 10
}, },
grid: { /* grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '0%',
top: '15%', top: '5%',
containLabel: true containLabel: true
}, }, */
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
@ -475,6 +475,9 @@ function showNoDataMessage() {
}; };
trendsChart.setOption(option); trendsChart.setOption(option);
window.addEventListener("resize", function () {
trendsChart.resize();
});
} }
/** /**

54
pages/newDataAnalysis/overallEfficiency.html
View File

@ -3,19 +3,19 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工地整体效能分析系统</title> <title>工地整体效能分析</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style> <style>
:root { :root {
--primary: #1a3a5f; --primary: #20d3c2 ;
--secondary: #2c5c8c; --secondary: #2c5c8c;
--accent: #4caf50; --accent: #4caf50;
--warning: #ff9800; --warning: #ff9800;
--danger: #f44336; --danger: #f44336;
--light: #f5f7fa; --light: #f5f7fa;
--dark: #333; --dark: #8cc8c1;
--gray: #e4e7eb; --gray: #e4e7eb;
--card-shadow: 0 4px 15px rgba(0,0,0,0.08); --card-shadow: 0 4px 15px rgba(0,0,0,0.08);
--bg-color: #ffffff; --bg-color: #ffffff;
@ -75,7 +75,7 @@
} }
.last-update { .last-update {
color: #666; color: #8cc8c1;
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -88,10 +88,13 @@
} }
.kpi-card { .kpi-card {
background: var(--bg-color); /* background: var(--bg-color); */
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%);
border: 1px solid rgba(22, 186, 170, 0.3);
box-shadow: 0 4px 20px rgb;
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 25px;
box-shadow: var(--card-shadow); /* box-shadow: var(--card-shadow); */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: transform 0.3s; transition: transform 0.3s;
@ -144,13 +147,14 @@
.kpi-title { .kpi-title {
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: #666; color: #8cc8c1;
} }
.kpi-value { .kpi-value {
font-size: 2.2rem; font-size: 2.2rem;
font-weight: 700; font-weight: 700;
margin: 10px 0; margin: 10px 0;
color: #8cc8c1;
} }
.kpi-trend { .kpi-trend {
@ -170,11 +174,13 @@
/* 分析部分 */ /* 分析部分 */
.analysis-section { .analysis-section {
background: var(--bg-color); /* background: var(--bg-color); */
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%);
border-radius: 12px; border-radius: 12px;
padding: 25px; padding: 25px;
box-shadow: var(--card-shadow); box-shadow: var(--card-shadow);
margin-bottom: 25px; margin-bottom: 25px;
border-top: 4px solid var(--primary);
} }
.section-title { .section-title {
@ -194,15 +200,20 @@
.bottleneck-card { .bottleneck-card {
border-left: 4px solid var(--warning); border-left: 4px solid var(--warning);
padding: 15px; padding: 15px;
background: #fff9e6; /* background: #fff9e6; */
border-radius: 0 8px 8px 0; background: rgba(22, 186, 170, 0.08);
border: 1px solid rgba(22, 186, 170, 0.2);
border-radius: 8px;
/* border-radius: 0 8px 8px 0; */
transition: all 0.3s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
} }
.bottleneck-card:hover { .bottleneck-card:hover {
transform: translateX(5px); transform: translateX(5px);
background: #fff1cc; /* background: #fff1cc; */
background: rgba(22, 186, 170, 0.15);
border-color: rgba(22, 186, 170, 0.4);
} }
.bottleneck-title { .bottleneck-title {
@ -215,12 +226,14 @@
.bottleneck-desc { .bottleneck-desc {
font-size: 0.9rem; font-size: 0.9rem;
color: #666; color: #8cc8c1;
margin-bottom: 10px; margin-bottom: 10px;
} }
.optimization-card { .optimization-card {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); /* background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); */
background: rgba(22, 186, 170, 0.08);
border: 1px solid rgba(22, 186, 170, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
} }
@ -235,7 +248,11 @@
} }
.suggestion-item:hover { .suggestion-item:hover {
background: rgba(255,255,255,0.5); /* background: rgba(255,255,255,0.5); */
background: rgba(22, 186, 170, 0.15);
border-color: rgba(22, 186, 170, 0.4);
transform: translateX(5px);
/* box-shadow: -2px 0 10px rgba(22, 186, 170, 0.3); */
border-radius: 8px; border-radius: 8px;
padding: 15px; padding: 15px;
} }
@ -263,7 +280,7 @@
} }
.suggestion-content p { .suggestion-content p {
color: #666; color: #8cc8c1;
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -414,7 +431,7 @@
/* 页脚 */ /* 页脚 */
footer { footer {
text-align: center; text-align: center;
color: #666; color: #8cc8c1;
padding: 20px; padding: 20px;
font-size: 0.9rem; font-size: 0.9rem;
margin-top: 20px; margin-top: 20px;
@ -492,6 +509,11 @@
.data-table tr:hover { .data-table tr:hover {
background: rgba(26, 58, 95, 0.05); background: rgba(26, 58, 95, 0.05);
} }
/* background: rgba(22, 186, 170, 0.15);
border-color: rgba(22, 186, 170, 0.4);
transform: translateX(5px);
box-shadow: -2px 0 10px rgba(22, 186, 170, 0.3); */
</style> </style>
</head> </head>
<body> <body>

21
pages/newDataAnalysis/resourceRateAnalysis.html
View File

@ -13,9 +13,9 @@
<!-- Font Awesome 图标库 --> <!-- Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css 动画库 --> <!-- Animate.css 动画库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> -->
<!-- Particles.js 粒子特效库 --> <!-- Particles.js 粒子特效库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> -->
<script src="../../js/publics/sm4.js" type="text/javascript"></script> <script src="../../js/publics/sm4.js" type="text/javascript"></script>
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script> <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../js/publics/public.js"></script> <script src="../../js/publics/public.js"></script>
@ -31,10 +31,14 @@
</head> </head>
<style> <style>
body{
height: 96%;
margin: 2% 0;
}
.resource-container { .resource-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(135deg, #0a1e2b 0%, #1a2f3a 50%, #0a1e2b 100%); /* background: linear-gradient(135deg, #0a1e2b 0%, #1a2f3a 50%, #0a1e2b 100%); */
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@ -68,7 +72,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(10, 30, 43, 0.9); /* background: rgba(10, 30, 43, 0.9); */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -134,6 +138,7 @@
.header-stats { .header-stats {
display: flex; display: flex;
gap: 30px; gap: 30px;
width: 35%;
} }
.stat-item { .stat-item {
@ -208,7 +213,8 @@
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%); background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%);
border: 1px solid rgba(22, 186, 170, 0.3); border: 1px solid rgba(22, 186, 170, 0.3);
border-radius: 12px; border-radius: 12px;
padding: 20px; /* padding: 20px; */
padding: 5px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
@ -270,7 +276,8 @@
background: rgba(22, 186, 170, 0.1); background: rgba(22, 186, 170, 0.1);
border: 1px solid rgba(22, 186, 170, 0.3); border: 1px solid rgba(22, 186, 170, 0.3);
border-radius: 8px; border-radius: 8px;
padding: 20px; /* padding: 20px; */
padding: 8px 10px 0 10px;
text-align: center; text-align: center;
position: relative; position: relative;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -478,7 +485,7 @@
<div class="resource-header animate__animated animate__fadeInDown"> <div class="resource-header animate__animated animate__fadeInDown">
<div class="header-title"> <div class="header-title">
<i class="fas fa-chart-line header-icon"></i> <i class="fas fa-chart-line header-icon"></i>
资源利用率实时监控 资源利用率分析
</div> </div>
<div class="header-stats"> <div class="header-stats">
<div class="stat-item"> <div class="stat-item">