bonus
/
hb_zhgd_screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' 

# Conflicts:
#	api/commonRequest.js
This commit is contained in:
lSun 2025-10-18 17:19:09 +08:00
parent 9e00cc5cd8 39b901917e
commit 0b4272f9d4
4 changed files with 1315 additions and 834 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

319
js/pages/dataAnalysisOctober/overallEfficiency.js
View File

@ -1,5 +1,7 @@
let table, layer, form; let table, layer, form;
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff'; let fontSize = "14",
fontFamily = "Alibaba PuHuiTi R",
fontColor = "#fff";
layui.use(["layer", "table", "form"], function () { layui.use(["layer", "table", "form"], function () {
layer = layui.layer; layer = layui.layer;
@ -11,18 +13,105 @@ layui.use(["layer", "table", "form"], function () {
getSafetyAlert(); getSafetyAlert();
}); });
function getEnvironmental() { initData();
let yList = [32, 58, 64, 164, 99];
let xData = ['学前', '小学', '初中', '高中', 'qq']; function initData() {
initEnvironmental(yList, xData) const url = commonUrl + "screen/proSafety/selectOverallEfficiencyData";
let encryptStr = encryptCBC(
JSON.stringify({
startTime: "2025-10-10",
endTime: "2025-10-17",
})
);
ajaxRequest(
url,
"get",
{
startTime: "2025-10-10",
endTime: "2025-10-17",
},
true,
function () {},
function (result) {
console.log(result, "数据");
const data = result.data;
let weather = "";
let safetyAlert = "";
for (const key in data) {
switch (key) {
case "计划施工天数":
$("#planWorkDay").text(data[key] + "天");
break;
case "有效施工天数":
$("#effectiveWorkDay").text(data[key] + "天");
break;
case "总验收项":
$("#totalItems").text(data[key] + "个");
break;
case "已验收项":
$("#acceptedItems").text(data[key] + "个");
break;
case "验收率":
$("#acceptanceItemsRate").text(data[key] + "%");
break;
case "主设备试验调试一次通过率":
$("#firstRate").text(data[key] + "%");
break;
case "当前进度":
$("#currentProgress").text(data[key]);
break;
case "计划进度":
$("#planProgress").text(data[key]);
break;
case "进度偏差":
$("#delayProgress").text(data[key]);
break;
case "计划成本":
$("#planCost").text(data[key] + "万元");
break;
case "实际成本":
$("#actualCost").text(data[key] + "万元");
break;
case "缩减成本":
$("#reduceCost").text(data[key]);
break;
case "天气":
weather = data[key];
initEnvironmental(weather);
break;
case "安全预警":
safetyAlert = data[key];
initSafetyAlert(safetyAlert);
break;
}
}
},
function (xhr) {
// error(xhr);
}
);
} }
function initEnvironmental(yList, xData) { function getEnvironmental() {
let yList = [32, 58, 64, 164, 99];
let xData = ["学前", "小学", "初中", "高中", "qq"];
initEnvironmental(yList, xData);
}
function initEnvironmental(data) {
const xData = data.map((item) => item.weather);
const yList = data.map((item) => item.day);
let barWidth = 60; let barWidth = 60;
let colors = [] let colors = [];
for (let i = 0; i < xData.length; i++) { for (let i = 0; i < xData.length; i++) {
colors.push({ colors.push({
type: 'linear', type: "linear",
x: 0, x: 0,
x2: 1, x2: 1,
y: 0, y: 0,
@ -30,55 +119,60 @@ function initEnvironmental(yList, xData) {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#1CFFF4' // 最左边 color: "#1CFFF4", // 最左边
}, { },
{
offset: 0.5, offset: 0.5,
color: '#1CFFF4' // 左边的右边 颜色 color: "#1CFFF4", // 左边的右边 颜色
}, { },
{
offset: 0.5, offset: 0.5,
color: '#1CFFF4' // 右边的左边 颜色 color: "#1CFFF4", // 右边的左边 颜色
}, { },
{
offset: 1, offset: 1,
color: '#1CFFF4' color: "#1CFFF4",
}] },
}) ],
});
} }
const myChart = echarts.init(document.getElementById("environmental")); const myChart = echarts.init(document.getElementById("environmental"));
const option = { const option = {
//提示框 //提示框
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
formatter: "{b} : {c}", formatter: "{b} : {c}",
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
} type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
}, },
/**区域位置*/ /**区域位置*/
grid: { grid: {
left: '8%', left: "8%",
right: '3%', right: "3%",
top: '30%', top: "30%",
bottom: '30%', bottom: "30%",
}, },
//X轴 //X轴
xAxis: { xAxis: {
data: xData, data: xData,
type: 'category', type: "category",
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,1)', color: "rgba(255,255,255,1)",
shadowColor: 'rgba(255,255,255,1)', shadowColor: "rgba(255,255,255,1)",
shadowOffsetX: '20', shadowOffsetX: "20",
}, },
symbol: ['none', 'arrow'], symbol: ["none", "arrow"],
symbolOffset: [0, 25] symbolOffset: [0, 25],
}, },
splitLine: { splitLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
margin: 30, margin: 30,
@ -94,72 +188,72 @@ function initEnvironmental(yList, xData) {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: '#075858' color: "#075858",
}, },
}, },
axisLabel: { axisLabel: {
color: '#FFFFFF', color: "#FFFFFF",
margin: 8, margin: 8,
fontSize: 15 fontSize: 15,
} },
}, },
series: [ series: [
{ {
type: 'bar', type: "bar",
barWidth: barWidth, barWidth: barWidth,
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
return colors[params.dataIndex % 7]; return colors[params.dataIndex % 7];
} },
} },
}, },
label: { label: {
show: false, show: false,
position: [barWidth / 2, -(barWidth + 20)], position: [barWidth / 2, -(barWidth + 20)],
color: '#ffffff', color: "#ffffff",
fontSize: 14, fontSize: 14,
fontStyle: 'bold', fontStyle: "bold",
align: 'center', align: "center",
}, },
data: yList data: yList,
}, },
{ {
z: 2, z: 2,
type: 'pictorialBar', type: "pictorialBar",
data: yList, data: yList,
symbol: 'diamond', symbol: "diamond",
symbolOffset: [0, '50%'], symbolOffset: [0, "50%"],
symbolSize: [barWidth, barWidth * 0.5], symbolSize: [barWidth, barWidth * 0.5],
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
return colors[params.dataIndex % 7]; return colors[params.dataIndex % 7];
}, },
} },
}, },
}, },
{ {
z: 3, z: 3,
type: 'pictorialBar', type: "pictorialBar",
symbolPosition: 'end', symbolPosition: "end",
data: yList, data: yList,
symbol: 'diamond', symbol: "diamond",
symbolOffset: [0, '-50%'], symbolOffset: [0, "-50%"],
symbolSize: [barWidth, barWidth * 0.5], symbolSize: [barWidth, barWidth * 0.5],
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 0, borderWidth: 0,
color: function (params) { color: function (params) {
return colors[params.dataIndex % 7].colorStops[0].color; return colors[params.dataIndex % 7].colorStops[0]
.color;
}, },
},
}
}, },
}, },
], ],
} };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
@ -168,16 +262,18 @@ function initEnvironmental(yList, xData) {
function getSafetyAlert() { function getSafetyAlert() {
let yList = [32, 58, 64, 164, 99]; let yList = [32, 58, 64, 164, 99];
let xData = ['学前', '小学', '初中', '高中', 'qq']; let xData = ["学前", "小学", "初中", "高中", "qq"];
initSafetyAlert(yList, xData) initSafetyAlert(yList, xData);
} }
function initSafetyAlert(yList, xData) { function initSafetyAlert(data) {
const xData = data.map((item) => item.name);
const yList = data.map((item) => item.num);
let barWidth = 60; let barWidth = 60;
let colors = [] let colors = [];
for (let i = 0; i < xData.length; i++) { for (let i = 0; i < xData.length; i++) {
colors.push({ colors.push({
type: 'linear', type: "linear",
x: 0, x: 0,
x2: 1, x2: 1,
y: 0, y: 0,
@ -185,55 +281,60 @@ function initSafetyAlert(yList, xData) {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#1CFFF4' // 最左边 color: "#1CFFF4", // 最左边
}, { },
{
offset: 0.5, offset: 0.5,
color: '#1CFFF4' // 左边的右边 颜色 color: "#1CFFF4", // 左边的右边 颜色
}, { },
{
offset: 0.5, offset: 0.5,
color: '#1CFFF4' // 右边的左边 颜色 color: "#1CFFF4", // 右边的左边 颜色
}, { },
{
offset: 1, offset: 1,
color: '#1CFFF4' color: "#1CFFF4",
}] },
}) ],
});
} }
const myChart = echarts.init(document.getElementById("safetyAlert")); const myChart = echarts.init(document.getElementById("safetyAlert"));
const option = { const option = {
//提示框 //提示框
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
formatter: "{b} : {c}", formatter: "{b} : {c}",
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
} type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
}, },
/**区域位置*/ /**区域位置*/
grid: { grid: {
left: '8%', left: "8%",
right: '3%', right: "3%",
top: '30%', top: "30%",
bottom: '30%', bottom: "30%",
}, },
//X轴 //X轴
xAxis: { xAxis: {
data: xData, data: xData,
type: 'category', type: "category",
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,1)', color: "rgba(255,255,255,1)",
shadowColor: 'rgba(255,255,255,1)', shadowColor: "rgba(255,255,255,1)",
shadowOffsetX: '20', shadowOffsetX: "20",
}, },
symbol: ['none', 'arrow'], symbol: ["none", "arrow"],
symbolOffset: [0, 25] symbolOffset: [0, 25],
}, },
splitLine: { splitLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
margin: 30, margin: 30,
@ -249,72 +350,72 @@ function initSafetyAlert(yList, xData) {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: '#075858' color: "#075858",
}, },
}, },
axisLabel: { axisLabel: {
color: '#FFFFFF', color: "#FFFFFF",
margin: 8, margin: 8,
fontSize: 15 fontSize: 15,
} },
}, },
series: [ series: [
{ {
type: 'bar', type: "bar",
barWidth: barWidth, barWidth: barWidth,
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
return colors[params.dataIndex % 7]; return colors[params.dataIndex % 7];
} },
} },
}, },
label: { label: {
show: false, show: false,
position: [barWidth / 2, -(barWidth + 20)], position: [barWidth / 2, -(barWidth + 20)],
color: '#ffffff', color: "#ffffff",
fontSize: 14, fontSize: 14,
fontStyle: 'bold', fontStyle: "bold",
align: 'center', align: "center",
}, },
data: yList data: yList,
}, },
{ {
z: 2, z: 2,
type: 'pictorialBar', type: "pictorialBar",
data: yList, data: yList,
symbol: 'diamond', symbol: "diamond",
symbolOffset: [0, '50%'], symbolOffset: [0, "50%"],
symbolSize: [barWidth, barWidth * 0.5], symbolSize: [barWidth, barWidth * 0.5],
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
return colors[params.dataIndex % 7]; return colors[params.dataIndex % 7];
}, },
} },
}, },
}, },
{ {
z: 3, z: 3,
type: 'pictorialBar', type: "pictorialBar",
symbolPosition: 'end', symbolPosition: "end",
data: yList, data: yList,
symbol: 'diamond', symbol: "diamond",
symbolOffset: [0, '-50%'], symbolOffset: [0, "-50%"],
symbolSize: [barWidth, barWidth * 0.5], symbolSize: [barWidth, barWidth * 0.5],
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 0, borderWidth: 0,
color: function (params) { color: function (params) {
return colors[params.dataIndex % 7].colorStops[0].color; return colors[params.dataIndex % 7].colorStops[0]
.color;
}, },
},
}
}, },
}, },
], ],
} };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();

1431
js/pages/dataAnalysisOctober/projectManagement.js
View File

File diff suppressed because it is too large Load Diff

327
pages/dataAnalysisOctober/overallEfficiency.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<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">
@ -8,7 +9,7 @@
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css"> <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css"> <link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css">
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css"> <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
<link rel="stylesheet" href="../../css/coreTable.css"/> <link rel="stylesheet" href="../../css/coreTable.css" />
<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>
@ -63,7 +64,7 @@
.progress { .progress {
height: 100%; height: 100%;
width: 35%; width: 50%;
background: url("../../img/dataAnalysisOctober/progress.png") no-repeat 0 0 / 100% 100%; background: url("../../img/dataAnalysisOctober/progress.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important; background-position: center center !important;
display: flex; display: flex;
@ -72,7 +73,7 @@
.cost { .cost {
height: 100%; height: 100%;
width: 35%; width: 50%;
margin-left: 1%; margin-left: 1%;
background: url("../../img/dataAnalysisOctober/cost.png") no-repeat 0 0 / 100% 100%; background: url("../../img/dataAnalysisOctober/cost.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important; background-position: center center !important;
@ -135,7 +136,7 @@
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
} }
.total-rate{ .total-rate {
width: 55px; width: 55px;
height: 60px; height: 60px;
flex-shrink: 0; flex-shrink: 0;
@ -143,7 +144,7 @@
background-position: center center !important; background-position: center center !important;
} }
.accepted-items-rate{ .accepted-items-rate {
width: 55px; width: 55px;
height: 60px; height: 60px;
flex-shrink: 0; flex-shrink: 0;
@ -151,7 +152,7 @@
background-position: center center !important; background-position: center center !important;
} }
.acceptance-items-rate{ .acceptance-items-rate {
width: 55px; width: 55px;
height: 60px; height: 60px;
flex-shrink: 0; flex-shrink: 0;
@ -159,7 +160,7 @@
background-position: center center !important; background-position: center center !important;
} }
.first-rate{ .first-rate {
width: 55px; width: 55px;
height: 60px; height: 60px;
flex-shrink: 0; flex-shrink: 0;
@ -167,7 +168,7 @@
background-position: center center !important; background-position: center center !important;
} }
#safetyAlert{ #safetyAlert {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
@ -181,183 +182,201 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="proQuality"> <div id="proQuality">
<div style="height: 6%;width: 100%;"> <div style="height: 6%;width: 100%;">
<form class="layui-form basic-form" onclick="return false;" onsubmit="return false;"> <form class="layui-form basic-form" onclick="return false;" onsubmit="return false;">
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-inline"> <div class="layui-inline">
<div class="layui-input-inline"> <div class="layui-input-inline">
<input type="text" id="name" class="layui-input" autocomplete="off"> <input type="text" id="name" class="layui-input" autocomplete="off">
</div>
</div> </div>
</div>
<div class="layui-inline"> <div class="layui-inline">
<button type="button" class="layui-btn layui-btn-normal" onclick="query(1)" <button type="button" class="layui-btn layui-btn-normal" onclick="query(1)"
style="background-color: #207E75;"> style="background-color: #207E75;">
<i class="layui-icon layui-icon-query"></i>查询 <i class="layui-icon layui-icon-query"></i>查询
</button> </button>
</div>
</div> </div>
</div> </form>
</form> </div>
</div>
<div class="environmental-analysis"> <div class="environmental-analysis">
<div style="height: 90%;width: 15%;margin-top: 3%;"> <div style="height: 90%;width: 15%;margin-top: 3%;">
<div style="height: 40%;width: 100%;"> <div style="height: 40%;width: 100%;">
<div class="equipment-card"> <div class="equipment-card">
<div class="builder"></div> <div class="builder"></div>
<div class="equipment-card-content"> <div class="equipment-card-content">
<div class="equipment-card-label">计划施工</div> <div class="equipment-card-label">计划施工</div>
<div class="equipment-card-value">100<span style="font-size: 12px; margin-left: 2px;">天</span> <div class="equipment-card-value" id="planWorkDay"><span
style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
</div>
<div style="height: 40%;width: 100%;">
<div class="equipment-card">
<div class="builder"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">有效施工</div>
<div class="equipment-card-value" id="effectiveWorkDay"><span
style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="height: 40%;width: 100%;"> <div style="height: 100%;width: 85%">
<div class="equipment-card"> <div id="environmental"></div>
<div class="builder"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">有效施工</div>
<div class="equipment-card-value">80<span style="font-size: 12px; margin-left: 2px;">天</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div style="height: 100%;width: 85%">
<div id="environmental"></div> <div class="quality-analysis">
<div style="margin-top: 3%;height: 58%;width: 98%;margin-left: 1%;display: flex">
<div class="quality-analysis-box" style="margin-left: 1%">
<div class="equipment-card">
<div class="total-rate"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">总验收项</div>
<div class="equipment-card-value" id="totalItems"><span
style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
</div>
<div class="quality-analysis-box">
<div class="equipment-card">
<div class="accepted-items-rate"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">已验收项</div>
<div class="equipment-card-value" id="acceptedItems"><span
style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
</div>
<div class="quality-analysis-box">
<div class="equipment-card">
<div class="acceptance-items-rate"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">验收率</div>
<div class="equipment-card-value" id="acceptanceItemsRate"><span
style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
</div>
<div class="quality-analysis-box">
<div class="equipment-card">
<div class="first-rate"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">主设备试验调试一次通过率</div>
<div class="equipment-card-value" id="firstRate"><span
style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
<div class="quality-analysis"> <div class="safety-alert">
<div style="margin-top: 3%;height: 58%;width: 98%;margin-left: 1%;display: flex"> <!-- <div style="height: 90%;width: 15%;margin-top: 3%;">
<div class="quality-analysis-box" style="margin-left: 1%"> <div style="height: 80%;width: 100%;">
<div class="equipment-card"> <div class="equipment-card" style="flex-direction: column">
<div class="total-rate"></div> <div class="safety"></div>
<div class="equipment-card-content"> <div class="equipment-card-content" style="align-items: center;">
<div class="equipment-card-label">总验收项</div> <div class="equipment-card-label">安全事故发生率</div>
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">个</span> <div class="equipment-card-value">2<span style="font-size: 12px; margin-left: 2px;">%</span>
</div>
</div>
</div>
</div>
</div> -->
<div style="height: 100%;width: 85%">
<div id="safetyAlert"></div>
</div>
</div>
<div class="bottom-boxs">
<div class="progress">
<div style="height: 100%;width: 30%;">
<div class="equipment-card">
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;"
id="currentProgress"><span style="font-size: 12px; margin-left: 2px;"></span></div>
<div class="equipment-card-label">当前进度</div>
</div>
</div>
</div>
<div style="height: 100%;width: 30%;">
<div class="equipment-card">
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;"
id="planProgress"><span style="font-size: 12px; margin-left: 2px;"></span></div>
<div class="equipment-card-label">计划进度</div>
</div>
</div>
</div>
<div style="height: 100%;width: 30%;">
<div class="equipment-card">
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;"><span
style="font-size: 12px;color: #fff;font-weight: 100" id="delayProgress"></span><span
style="font-size: 12px; margin-left: 2px;">%</span></div>
<div class="equipment-card-label">进度偏差</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="cost">
<div class="quality-analysis-box"> <div style="height: 100%;width: 30%;">
<div class="equipment-card"> <div class="equipment-card">
<div class="accepted-items-rate"></div> <div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
<div class="equipment-card-content"> <div class="equipment-card-label">计划成本</div>
<div class="equipment-card-label">已验收项</div> <div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;" id="planCost">
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">个</span> <span style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div style="height: 100%;width: 30%;">
<div class="equipment-card">
<div class="quality-analysis-box"> <div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
<div class="equipment-card"> <div class="equipment-card-label">实际成本</div>
<div class="acceptance-items-rate"></div> <div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;" id="actualCost">
<div class="equipment-card-content"> <span style="font-size: 12px; margin-left: 2px;"></span>
<div class="equipment-card-label">验收率</div> </div>
<div class="equipment-card-value">88<span style="font-size: 12px; margin-left: 2px;">%</span>
</div> </div>
</div> </div>
</div> </div>
</div> <div style="height: 100%;width: 30%;">
<div class="equipment-card">
<div class="quality-analysis-box"> <div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
<div class="equipment-card"> <div class="equipment-card-label">缩减成本</div>
<div class="first-rate"></div> <div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;" id="reduceCost">
<div class="equipment-card-content"> <span style="font-size: 12px; margin-left: 2px;"></span>
<div class="equipment-card-label">主设备试验调试一次通过率</div> </div>
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">%</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="factor"></div> -->
</div> </div>
</div> </div>
<div class="safety-alert">
<div style="height: 90%;width: 15%;margin-top: 3%;">
<div style="height: 80%;width: 100%;">
<div class="equipment-card" style="flex-direction: column">
<div class="safety"></div>
<div class="equipment-card-content" style="align-items: center;">
<div class="equipment-card-label">安全事故发生率</div>
<div class="equipment-card-value">2<span style="font-size: 12px; margin-left: 2px;">%</span>
</div>
</div>
</div>
</div>
</div>
<div style="height: 100%;width: 85%">
<div id="safetyAlert"></div>
</div>
</div>
<div class="bottom-boxs">
<div class="progress">
<div style="height: 100%;width: 30%;">
<div class="equipment-card" >
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;">2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
<div class="equipment-card-label">当前进度</div>
</div>
</div>
</div>
<div style="height: 100%;width: 30%;">
<div class="equipment-card" >
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;">2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
<div class="equipment-card-label">计划进度</div>
</div>
</div>
</div>
<div style="height: 100%;width: 30%;">
<div class="equipment-card" >
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;"><span style="font-size: 12px;color: #fff;font-weight: 100">延期</span>2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
<div class="equipment-card-label">进度偏差</div>
</div>
</div>
</div>
</div>
<div class="cost">
<div style="height: 100%;width: 30%;">
<div class="equipment-card" >
<div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
<div class="equipment-card-label">计划成本</div>
<div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;">3000<span style="font-size: 12px; margin-left: 2px;">万元</span></div>
</div>
</div>
</div>
<div style="height: 100%;width: 30%;">
<div class="equipment-card" >
<div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
<div class="equipment-card-label">实际成本</div>
<div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;">2980<span style="font-size: 12px; margin-left: 2px;">万元</span></div>
</div>
</div>
</div>
<div style="height: 100%;width: 30%;">
<div class="equipment-card" >
<div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
<div class="equipment-card-label">缩减成本</div>
<div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;">2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
</div>
</div>
</div>
</div>
<div class="factor"></div>
</div>
</div>
</body> </body>
<script src="../../js/pages/dataAnalysisOctober/overallEfficiency.js" type="text/javascript"></script> <script src="../../js/pages/dataAnalysisOctober/overallEfficiency.js" type="text/javascript"></script>
</html>
</html>

72
pages/dataAnalysisOctober/projectManagement.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css"> <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/dataAnalysis/dataAnalysis.css"> <link rel="stylesheet" href="../../css/dataAnalysis/dataAnalysis.css">
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css"> <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
<link rel="stylesheet" href="../../css/coreTable.css"/> <link rel="stylesheet" href="../../css/coreTable.css" />
<link rel="stylesheet" href="../../css/accessMge/accessMge.css"> <link rel="stylesheet" href="../../css/accessMge/accessMge.css">
<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>
@ -28,7 +28,7 @@
flex-direction: column; flex-direction: column;
} }
.top-box{ .top-box {
width: 100%; width: 100%;
height: 48%; height: 48%;
display: flex; display: flex;
@ -36,14 +36,16 @@
background: url("../../img/dataAnalysisOctober/electricityStatistics.png") no-repeat 0 0 / 100% 100%; background: url("../../img/dataAnalysisOctober/electricityStatistics.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important; background-position: center center !important;
} }
.center-box{
.center-box {
margin-top: 1%; margin-top: 1%;
width: 100%; width: 100%;
height: 30%; height: 30%;
background: url("../../img/dataAnalysisOctober/projectCost.png") no-repeat 0 0 / 100% 100%; background: url("../../img/dataAnalysisOctober/projectCost.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important; background-position: center center !important;
} }
.bottom-box{
.bottom-box {
margin-top: 1%; margin-top: 1%;
width: 100%; width: 100%;
height: 20%; height: 20%;
@ -53,42 +55,42 @@
flex-direction: row; flex-direction: row;
} }
.top-box-box{ .top-box-box {
width: 95%; width: 95%;
height: 72%; height: 72%;
margin-top: 5%; margin-top: 5%;
display: flex; display: flex;
} }
.top-box-box-left{ .top-box-box-left {
width: 33%; width: 33%;
height: 100%; height: 100%;
box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8); box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
} }
.top-box-box-right{ .top-box-box-right {
margin-left: 1%; margin-left: 1%;
width: 69%; width: 69%;
height: 100%; height: 100%;
} }
.top-box-box-right-top{ .top-box-box-right-top {
height: 48%; height: 48%;
width: 100%; width: 100%;
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8); box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
} }
.top-box-box-right-bottom{ .top-box-box-right-bottom {
margin-top: 1%; margin-top: 1%;
height: 48%; height: 48%;
width: 100%; width: 100%;
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8); box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
} }
.bottom-box-box{ .bottom-box-box {
width: 98%; width: 98%;
margin-left: 1%; margin-left: 1%;
height: 60%; height: 60%;
@ -97,30 +99,30 @@
flex-direction: row; flex-direction: row;
} }
.bottom-box-box-left{ .bottom-box-box-left {
margin-left: 1%; margin-left: 1%;
width: 35%; width: 35%;
height: 100%; height: 100%;
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8); box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
} }
.bottom-box-box-right{ .bottom-box-box-right {
width: 20%; width: 20%;
height: 100%; height: 100%;
margin-left:1%; margin-left: 1%;
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8); box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
} }
#project{ #project {
width: 100%; width: 100%;
height: 50%; height: 50%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#projectProgress{ #projectProgress {
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
@ -130,10 +132,11 @@
height: 100%; height: 100%;
} }
#projectRisk{ #projectRisk {
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.chart-title { .chart-title {
position: absolute; position: absolute;
top: 40%; top: 40%;
@ -142,28 +145,30 @@
font-size: 14px; font-size: 14px;
left: 5%; left: 5%;
} }
.big-number { .big-number {
font-size: 22px; font-size: 22px;
color: #79FFFF; color: #79FFFF;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
} }
#civilEngineering{
#civilEngineering {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#electrical{ #electrical {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#itemCost{ #itemCost {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#totalRisk{ #totalRisk {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -184,7 +189,7 @@
background-position: center center !important; background-position: center center !important;
} }
.risk{ .risk {
width: 55px; width: 55px;
height: 60px; height: 60px;
flex-shrink: 0; flex-shrink: 0;
@ -228,7 +233,7 @@
<div class="chart-title"> <div class="chart-title">
<div>今日风险数量</div> <div>今日风险数量</div>
<div class="big-number">60</div> <div class="big-number"></div>
<div>个</div> <div>个</div>
</div> </div>
</div> </div>
@ -250,7 +255,7 @@
<div class="bottom-box-box-left"> <div class="bottom-box-box-left">
<div id="totalRisk"></div> <div id="totalRisk"></div>
<div class="chart-title" style="top: 95%; left: 3%;"> <div class="chart-title" style="top: 95%; left: 3%;">
<div>今日风险数量</div> <div>项目风险数量</div>
<div class="big-number">60</div> <div class="big-number">60</div>
<div>个</div> <div>个</div>
</div> </div>
@ -259,8 +264,9 @@
<div class="equipment-card"> <div class="equipment-card">
<div class="accountTerminatedRisk"></div> <div class="accountTerminatedRisk"></div>
<div class="equipment-card-content"> <div class="equipment-card-content">
<div class="equipment-card-label">已消号风险</div> <div class="equipment-card-label">已销号风险</div>
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span> <div class="equipment-card-value" id="accountTerminatedRisk"><span
style="font-size: 12px; margin-left: 2px;">台</span>
</div> </div>
</div> </div>
</div> </div>
@ -270,7 +276,8 @@
<div class="risk"></div> <div class="risk"></div>
<div class="equipment-card-content"> <div class="equipment-card-content">
<div class="equipment-card-label">剩余风险</div> <div class="equipment-card-label">剩余风险</div>
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span> <div class="equipment-card-value" id="remainingRisk"><span
style="font-size: 12px; margin-left: 2px;">台</span>
</div> </div>
</div> </div>
</div> </div>
@ -280,7 +287,8 @@
<div class="risk"></div> <div class="risk"></div>
<div class="equipment-card-content"> <div class="equipment-card-content">
<div class="equipment-card-label">剩余二级及以上风险</div> <div class="equipment-card-label">剩余二级及以上风险</div>
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span> <div class="equipment-card-value" id="remainingSecondaryRisk"><span
style="font-size: 12px; margin-left: 2px;">台</span>
</div> </div>
</div> </div>
</div> </div>
@ -293,4 +301,4 @@
<script src="../../js/pages/dataAnalysisOctober/projectManagement.js" type="text/javascript"></script> <script src="../../js/pages/dataAnalysisOctober/projectManagement.js" type="text/javascript"></script>
</html> </html>