Merge remote-tracking branch 'origin/master'
This commit is contained in:
commit
c9dcf490a1
|
|
@ -35,14 +35,16 @@ function initTable(bidCode,name) {
|
|||
},
|
||||
cols: [[
|
||||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||||
{ field: 'proName', title: '工程名称', align: 'center', width: '10%' },
|
||||
{ field: 'workLocation', title: '作业地点', align: 'center', width: '10%' },
|
||||
{ field: 'monitoringPointId', title: '监测点编号', align: 'center', width: '10%' },
|
||||
{ field: 'name', title: '监测点名称', align: 'center', width: '20%' },
|
||||
{ field: 'temperature', title: '当前温度', align: 'center', width: '10%' },
|
||||
{ field: 'humidity', title: '当前湿度', align: 'center', width: '10%' },
|
||||
{ field: 'windSpeed', title: '当前风速', align: 'center', width: '10%' },
|
||||
{ field: 'gasValue', title: '当前气体值', align: 'center', width: '10%' },
|
||||
{ field: 'name', title: '监测点名称', align: 'center', width: '10%' },
|
||||
{ field: 'temperature', title: '当前温度', align: 'center', width: '8%' },
|
||||
{ field: 'humidity', title: '当前湿度', align: 'center', width: '8%' },
|
||||
{ field: 'windSpeed', title: '当前风速', align: 'center', width: '8%' },
|
||||
{ field: 'gasValue', title: '当前气体值', align: 'center', width: '8%' },
|
||||
{
|
||||
field: 'rateLevel', title: '最高隐患等级', align: 'center', width: '20%',
|
||||
field: 'rateLevel', title: '最高隐患等级', align: 'center', width: '10%',
|
||||
templet: function (d) {
|
||||
let color = '';
|
||||
if (d.level == "一般隐患") {
|
||||
|
|
@ -54,6 +56,14 @@ function initTable(bidCode,name) {
|
|||
}
|
||||
return '<p style="color:' + color + '">' + d.level + '</p>';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
align: "center",
|
||||
width: '8%',
|
||||
templet: function (row) {
|
||||
return `<span onclick="handlDetails('${row.analysisReason}')" style="background-color: #16BAAA;border: 2px solid #16BAAA;cursor:pointer; "> 分析与改进</span>`
|
||||
},
|
||||
}
|
||||
]],
|
||||
initComplete: function () {
|
||||
|
|
@ -305,3 +315,59 @@ function initEchartsTwo(data) {
|
|||
}
|
||||
myChart2.setOption(riskOption, true)
|
||||
}
|
||||
|
||||
function handlDetails(analysisReason){
|
||||
// 分离原因分析和改进措施
|
||||
const [reason, measure] = analysisReason.match(/原因分析:(.*)。改进措施:(.*)/).slice(1);
|
||||
|
||||
// 创建一个包含分析原因及改进措施的HTML结构
|
||||
const content = `
|
||||
<div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
|
||||
<div style="flex: 1; padding: 20px; background: transparent; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3 style="margin-bottom: 10px; color: #fff;">分析原因及改进措施</h3>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<div style="margin-bottom: 10px;">
|
||||
<span style="font-weight: bold; color: #CFD3D4;">原因分析:</span>
|
||||
<span style="color: #fff;">${reason}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-weight: bold; color: #CFD3D4;">改进措施:</span>
|
||||
<span style="color: #fff;">${measure}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='oneEcharts' style='width: 100%; height: 400px;'></div>
|
||||
</div>
|
||||
`;
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "分析原因及改进措施",
|
||||
content: content,
|
||||
area: ["400px", "300px"],
|
||||
shade: 0.3, // 遮罩透明度
|
||||
skin: "custom-layer-style", // 自定义皮肤
|
||||
success: function (layero, index) {
|
||||
// 修改弹框背景颜色
|
||||
$(layero).css(
|
||||
"background",
|
||||
"rgba(13, 34, 37, 0.9)"
|
||||
); // 半透明黑色背景
|
||||
$(layero).find(".layui-layer-title").css({
|
||||
color: "#fff", // 标题文字颜色
|
||||
background: "transparent", // 标题背景透明
|
||||
"border-bottom":
|
||||
"1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
|
||||
});
|
||||
$(layero).find(".layui-layer-content").css({
|
||||
background: "transparent", // 内容区域透明
|
||||
});
|
||||
|
||||
$(layero)
|
||||
.find(".layui-layer-setwin .layui-layer-close")
|
||||
.css({
|
||||
color: "#fff", // 文字颜色
|
||||
"border-color": "#fff", // 边框颜色(如果按钮有边框)
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,15 @@ function initTable(type, bidCode) {
|
|||
});
|
||||
},
|
||||
done: function (res, curr, count, origin) {
|
||||
// console.log(res);
|
||||
$(".layui-table-body table.layui-table tbody tr #exportBtn").on(
|
||||
"click",
|
||||
function () {
|
||||
// 获取当前行的数据
|
||||
var index = $(this).index();
|
||||
var rowData = res.rows[index]; // 获取对应行的数据
|
||||
console.log(rowData, "rowData导出");
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,16 @@ function setCols(type) {
|
|||
{ field: "processDiff", title: "进度偏差", align: "center" },
|
||||
{ field: "completeEffort", title: "已完成工程量", align: "center" },
|
||||
{ field: "totalEffort", title: "总工程量", align: "center" },
|
||||
{ field: "delayActor", title: "延误因素分析", align: "center" },
|
||||
{
|
||||
title: "延误因素分析",
|
||||
align: "center",
|
||||
templet: (d) => {
|
||||
let text = "";
|
||||
text +=
|
||||
'<a id="viewBtn" style="color: #007bff;cursor: pointer;font-size: 16px">查看</a>';
|
||||
return text;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: "resourceMatchStatus",
|
||||
title: "资源匹配状态",
|
||||
|
|
@ -114,6 +123,64 @@ function initTable(type, bidCode) {
|
|||
if (res.code !== 200 || !res.rows || res.rows.length === 0) {
|
||||
layer.msg("暂无数据", { icon: 2 });
|
||||
}
|
||||
|
||||
// 查看按钮点击
|
||||
$(".layui-table-body table.layui-table tbody tr #viewBtn").on(
|
||||
"click",
|
||||
function () {
|
||||
// 获取当前行的数据
|
||||
var index = $(this).index();
|
||||
var rowData = res.rows[index]; // 获取对应行的数据
|
||||
|
||||
// 弹框配置
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "分析查看",
|
||||
content:
|
||||
"<div id='oneEcharts' style='width:100%;height:100%;padding: 10px;'>" +
|
||||
"<div style='font-size: 16px; padding: 10px;'>延误原因:" +
|
||||
rowData.delayActor +
|
||||
"</div>" +
|
||||
"<div style='font-size: 16px; padding: 10px;'>其他原因:" +
|
||||
rowData.delayActor +
|
||||
"</div>" +
|
||||
"<div style='font-size: 16px; padding: 10px;'>分析结果:" +
|
||||
rowData.delayActor +
|
||||
"</div>" +
|
||||
"<div style='font-size: 16px; padding: 10px;'>分析结论:" +
|
||||
rowData.delayActor +
|
||||
"</div>" +
|
||||
"</div>",
|
||||
area: ["600px", "auto"],
|
||||
shade: 0.3, // 遮罩透明度
|
||||
skin: "custom-layer-style", // 自定义皮肤
|
||||
success: function (layero, index) {
|
||||
// 修改弹框背景颜色
|
||||
$(layero).css(
|
||||
"background",
|
||||
"rgba(13, 34, 37, 0.9)"
|
||||
); // 半透明黑色背景
|
||||
$(layero).find(".layui-layer-title").css({
|
||||
fontSize: "18px",
|
||||
color: "#fff", // 标题文字颜色
|
||||
background: "transparent", // 标题背景透明
|
||||
"border-bottom":
|
||||
"1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
|
||||
});
|
||||
$(layero).find(".layui-layer-content").css({
|
||||
background: "transparent", // 内容区域透明
|
||||
});
|
||||
|
||||
$(layero)
|
||||
.find(".layui-layer-setwin .layui-layer-close")
|
||||
.css({
|
||||
color: "#fff", // 文字颜色
|
||||
"border-color": "#fff", // 边框颜色(如果按钮有边框)
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
error: function () {
|
||||
layer.msg("数据加载失败", { icon: 2 });
|
||||
|
|
@ -121,6 +188,8 @@ function initTable(type, bidCode) {
|
|||
});
|
||||
}
|
||||
|
||||
$(".chart-box").hide();
|
||||
|
||||
$(".list-view").click(function () {
|
||||
if ($(this).hasClass("active")) return;
|
||||
|
||||
|
|
@ -255,6 +324,11 @@ function initPieChart() {
|
|||
top: "center", // 垂直居中
|
||||
textStyle: {
|
||||
color: "#fff", // 图例文字颜色设为白色
|
||||
borderWidth: 0,
|
||||
borderColor: "transparent",
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 0, // 关键点:去除 legend 图例项(小色块)的边框
|
||||
},
|
||||
data: ["大气影响", "设备判断延迟", "人员不足", "设计变更", "其他"],
|
||||
},
|
||||
|
|
@ -273,8 +347,8 @@ function initPieChart() {
|
|||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5, // 每块扇形圆角效果
|
||||
borderColor: "#000", // 边框颜色(用于间隙)
|
||||
borderWidth: 1, // 边框宽度(1px 每边,形成 2px 间隙)
|
||||
borderColor: "#333", // 边框颜色(用于间隙)
|
||||
borderWidth: 2, // 边框宽度(1px 每边,形成 2px 间隙)
|
||||
},
|
||||
data: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ function initUtilizationChart(distributionData) {
|
|||
name: '资源利用率',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['65%', '50%'],
|
||||
center: ['65%', '40%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 8,
|
||||
|
|
@ -313,15 +313,15 @@ function initTrendsChart(trendsData) {
|
|||
textStyle: {
|
||||
color: '#16baaa'
|
||||
},
|
||||
top: 10
|
||||
// top: 10
|
||||
},
|
||||
grid: {
|
||||
/* grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
bottom: '0%',
|
||||
top: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
}, */
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
|
|
@ -475,6 +475,9 @@ function showNoDataMessage() {
|
|||
};
|
||||
|
||||
trendsChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
trendsChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
let table, layer, form;
|
||||
let myChart = null, myChart2 = null;
|
||||
const tipsArr = [
|
||||
'定期开展技能培训与考核,并对施工工具进行例行检查,确保安全与效率。',
|
||||
'加强技能培训,定期组织考试,同时落实施工工具的日常检查制度。',
|
||||
'定期安排技能培训及考核,并严格执行施工工具的定期检查管理。',
|
||||
'持续强化技能培训与考核,同时确保施工工具按时检查,保障作业安全。',
|
||||
'定期组织技能培训和考试,并做好施工工具的维护与定期检查工作。',
|
||||
];
|
||||
layui.use(['layer', 'table', 'form'], function () {
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
|
|
@ -141,7 +148,9 @@ function initEcharts(data) {
|
|||
let unitTimeOutput = parseFloat(data.unitTimeOutput) || 0;
|
||||
if (unitTimeOutput < min) {
|
||||
initEchartsTwo(data);
|
||||
$('#suggestion').append('<p>建议:定期加强技能培训和考试,并且针对施工工具安排定期检查</p>');
|
||||
const randomIndex = Math.floor(Math.random() * tipsArr.length); // 生成 0~4 的随机整数
|
||||
const randomItem = tipsArr[randomIndex];
|
||||
$('#suggestion').append('<p>建议:'+randomItem+'</p>');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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 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>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #1a3a5f;
|
||||
--primary: #20d3c2 ;
|
||||
--secondary: #2c5c8c;
|
||||
--accent: #4caf50;
|
||||
--warning: #ff9800;
|
||||
--danger: #f44336;
|
||||
--light: #f5f7fa;
|
||||
--dark: #333;
|
||||
--dark: #8cc8c1;
|
||||
--gray: #e4e7eb;
|
||||
--card-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||||
--bg-color: #ffffff;
|
||||
|
|
@ -30,15 +30,19 @@
|
|||
body {
|
||||
background-color: transparent;
|
||||
color: var(--dark);
|
||||
min-height: 100vh;
|
||||
/* min-height: 98vh; */
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
padding: 20px;
|
||||
/* padding: 20px; */
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
|
||||
/* padding: 20px; */
|
||||
padding: 50px 20px 0 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -75,7 +79,7 @@
|
|||
}
|
||||
|
||||
.last-update {
|
||||
color: #666;
|
||||
color: #8cc8c1;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
|
@ -88,10 +92,13 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
padding: 25px;
|
||||
box-shadow: var(--card-shadow);
|
||||
/* box-shadow: var(--card-shadow); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.3s;
|
||||
|
|
@ -144,13 +151,14 @@
|
|||
.kpi-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
color: #8cc8c1;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
margin: 10px 0;
|
||||
color: #8cc8c1;
|
||||
}
|
||||
|
||||
.kpi-trend {
|
||||
|
|
@ -170,11 +178,13 @@
|
|||
|
||||
/* 分析部分 */
|
||||
.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;
|
||||
padding: 25px;
|
||||
box-shadow: var(--card-shadow);
|
||||
margin-bottom: 25px;
|
||||
border-top: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
|
|
@ -194,15 +204,20 @@
|
|||
.bottleneck-card {
|
||||
border-left: 4px solid var(--warning);
|
||||
padding: 15px;
|
||||
background: #fff9e6;
|
||||
border-radius: 0 8px 8px 0;
|
||||
/* background: #fff9e6; */
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottleneck-card:hover {
|
||||
transform: translateX(5px);
|
||||
background: #fff1cc;
|
||||
/* background: #fff1cc; */
|
||||
background: rgba(22, 186, 170, 0.15);
|
||||
border-color: rgba(22, 186, 170, 0.4);
|
||||
}
|
||||
|
||||
.bottleneck-title {
|
||||
|
|
@ -215,12 +230,14 @@
|
|||
|
||||
.bottleneck-desc {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
color: #8cc8c1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -235,7 +252,11 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
@ -263,7 +284,7 @@
|
|||
}
|
||||
|
||||
.suggestion-content p {
|
||||
color: #666;
|
||||
color: #8cc8c1;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
|
@ -300,7 +321,8 @@
|
|||
}
|
||||
|
||||
.page-content {
|
||||
background: white;
|
||||
/* background: white; */
|
||||
background: url("../../img/video/child-back.png") no-repeat 0 0/100% 100% transparent;
|
||||
width: 90%;
|
||||
max-width: 1000px;
|
||||
max-height: 90vh;
|
||||
|
|
@ -321,7 +343,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #f5f5f5;
|
||||
/* background: #f5f5f5; */
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
|
|
@ -414,7 +436,7 @@
|
|||
/* 页脚 */
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
color: #8cc8c1;
|
||||
padding: 20px;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 20px;
|
||||
|
|
@ -453,7 +475,7 @@
|
|||
.chart-box {
|
||||
flex: 1 1 400px;
|
||||
min-height: 300px;
|
||||
background: white;
|
||||
/* background: white; */
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: var(--card-shadow);
|
||||
|
|
@ -483,6 +505,7 @@
|
|||
.data-table td {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid var(--gray);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-table tr:nth-child(even) {
|
||||
|
|
@ -492,6 +515,11 @@
|
|||
.data-table tr:hover {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -655,8 +683,8 @@
|
|||
let url = commonUrl + "screen/Dashapi/pages/dashInfo";
|
||||
ajaxRequest(url, "get", "", true, function () {
|
||||
}, function (result) {
|
||||
console.log("22222222222222222")
|
||||
console.log(JSON.stringify(result));
|
||||
// console.log("22222222222222222")
|
||||
// console.log(JSON.stringify(result));
|
||||
pageData=result;
|
||||
initPage();
|
||||
}, function (xhr, status, error) {
|
||||
|
|
@ -745,7 +773,8 @@
|
|||
});
|
||||
|
||||
// 渲染页脚
|
||||
document.getElementById('footer-text').textContent = pageData.footer;
|
||||
// document.getElementById('footer-text').textContent = pageData.footer;
|
||||
document.getElementById('footer-text').textContent = '';
|
||||
}
|
||||
|
||||
// 渲染二级页面
|
||||
|
|
@ -920,7 +949,8 @@
|
|||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
fontWeight: 'bold',
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -934,13 +964,29 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'].slice(0, data.length)
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'].slice(0, data.length),
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff', // 文字颜色
|
||||
fontSize: 12 // 文字像素
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '百分比 (%)',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff', // 文字颜色
|
||||
fontSize: 12 // 文字像素
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -948,9 +994,15 @@
|
|||
type: 'line',
|
||||
data: data,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true, // 线条折点处显示值
|
||||
position: 'top', // 标签的位置
|
||||
color: "#fff", // 文字颜色
|
||||
fontSize: 12, // 文字像素
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#1a3a5f'
|
||||
color: '#20d3c2'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2c5c8c'
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
<!-- Font Awesome 图标库 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.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 粒子特效库 -->
|
||||
<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/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
|
|
@ -31,10 +31,14 @@
|
|||
</head>
|
||||
|
||||
<style>
|
||||
body{
|
||||
height: 96%;
|
||||
margin: 2% 0;
|
||||
}
|
||||
.resource-container {
|
||||
width: 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;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
|
@ -68,7 +72,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(10, 30, 43, 0.9);
|
||||
/* background: rgba(10, 30, 43, 0.9); */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -134,6 +138,7 @@
|
|||
.header-stats {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
|
|
@ -208,7 +213,8 @@
|
|||
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-radius: 12px;
|
||||
padding: 20px;
|
||||
/* padding: 20px; */
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -270,7 +276,8 @@
|
|||
background: rgba(22, 186, 170, 0.1);
|
||||
border: 1px solid rgba(22, 186, 170, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
/* padding: 20px; */
|
||||
padding: 8px 10px 0 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -478,7 +485,7 @@
|
|||
<div class="resource-header animate__animated animate__fadeInDown">
|
||||
<div class="header-title">
|
||||
<i class="fas fa-chart-line header-icon"></i>
|
||||
资源利用率实时监控
|
||||
资源利用率分析
|
||||
</div>
|
||||
<div class="header-stats">
|
||||
<div class="stat-item">
|
||||
|
|
|
|||
Loading…
Reference in New Issue