1、项目环境设置

2、大屏数据调优
This commit is contained in:
2025-04-17 18:32:33 +08:00
parent ee8b8926a2
commit 255a37051e
15 changed files with 1077 additions and 59 deletions
+115 -48
View File
@@ -19,10 +19,10 @@
<body class="bg1">
<div id="app">
<div class="container" style="padding-top: .25rem" v-cloak>
<div class="container" style=" padding-top: .25rem" v-cloak>
<div class="side">
<!-- 组织机构人员 -->
<div class="block" style="height: 2.5375rem;">
<div class="block" style=" height: 2.5375rem;">
<div class="block-tit"><span>组织机构人员</span></div>
<div id="org1" class="block-main">
<div class="o-box">
@@ -49,7 +49,7 @@
<div class="org-row1">
<i></i>
<div class="row1-inner">
<div class="row1-tit" style="width: auto;">安管人员与作业人员配比</div>
<div class="row1-tit" style=" width: auto;">安管人员与作业人员配比</div>
<h6>{{form.org.projectPersonRatio}}</h6>
</div>
</div>
@@ -57,7 +57,8 @@
</div>
</div>
<!-- 预警警报 -->
<div id="Early" class="block" style="height: 2.1rem;margin-top: 0.25rem;">
<div id="Early" class="block" style=" height: 2.1rem;
margin-top: 0.25rem;">
<div class="block-tit"><span>预警警报</span></div>
<div class="block-main">
<div class="early-box">
@@ -80,12 +81,13 @@
</div>
</div>
<!-- 安全/质量问题 -->
<div id="check" class="block" style="height: 2.1rem;margin-top: 0.25rem;">
<div id="check" class="block" style=" height: 2.1rem;
margin-top: 0.25rem;">
<div class="block-tit">
<div :class="[checkIdx == 0?'selected':'']" @click="onChangeCheck(0)"><span>安全检查</span></div>
<div :class="[checkIdx == 1?'selected':'']" @click="onChangeCheck(1)"><span>质量检查</span></div>
</div>
<div class="block-main">
<div class="block-main" id="hsseCheck">
<div class="early-box">
<div class="early-box-laber">问题</div>
<div class="early-box-value">{{form.hsseCheck.generalNum}}<span>项</span></div>
@@ -103,9 +105,28 @@
<div class="early-box-value">{{form.hsseCheck.rectificationRate}}<span>%</span></div>
</div>
</div>
<div class="block-main" id="cqmsCheck" style="display: none;">
<div class="early-box">
<div class="early-box-laber">问题</div>
<div class="early-box-value">{{form.cqmsCheck.generalNum}}<span>项</span></div>
</div>
<div class="early-box">
<div class="early-box-laber">未完成</div>
<div class="early-box-value">{{form.cqmsCheck.notClosedNum}}<span>项</span></div>
</div>
<div class="early-box">
<div class="early-box-laber">整改闭环</div>
<div class="early-box-value">{{form.cqmsCheck.closedNum}}<span>项</span></div>
</div>
<div class="early-box">
<div class="early-box-laber">整改率</div>
<div class="early-box-value">{{form.cqmsCheck.rectificationRate}}<span>%</span></div>
</div>
</div>
</div>
<!-- 风险分级管控 -->
<div id="risk" class="block" style="height: 1.725rem;margin-top: 0.25rem;">
<div id="risk" class="block" style=" height: 1.725rem;
margin-top: 0.25rem;">
<div class="block-tit"><span>风险分级管控</span></div>
<div class="block-main">
<div class="box">
@@ -139,12 +160,14 @@
</div>
</div>
<!-- 费用、机具及会议 -->
<div id="tools" class="block" style="height: 2.15rem;margin-top: 0.25rem;">
<div id="tools" class="block" style=" height: 2.15rem;
margin-top: 0.25rem;">
<div class="block-tit"><span>费用、机具及会议</span></div>
<div class="block-main">
<div class="t-box">
<div class="t-box-tit">
<i class="iconfont icon-l10" style="color: #FFBF46;font-size: 20px;"></i>
<i class="iconfont icon-l10" style=" color: #FFBF46;
font-size: 20px;"></i>
<p>安全费用</p>
</div>
<div class="r-row">
@@ -158,7 +181,8 @@
</div>
<div class="t-box">
<div class="t-box-tit">
<i class="iconfont icon-l10" style="color: #00DEFF;font-size: 20px;"></i>
<i class="iconfont icon-l10" style=" color: #00DEFF;
font-size: 20px;"></i>
<p>施工机具设备</p>
</div>
<div class="r-row">
@@ -172,7 +196,8 @@
</div>
<div class="t-box">
<div class="t-box-tit">
<i class="iconfont icon-l10" style="color: #00DEFF;font-size: 20px;"></i>
<i class="iconfont icon-l10" style=" color: #00DEFF;
font-size: 20px;"></i>
<p>会议</p>
</div>
<div class="r-row">
@@ -187,9 +212,9 @@
</div>
</div>
</div>
<div class="center" style="grid-template-rows: 1fr 1.8875rem 1.425rem 1.85rem 2.725rem;">
<div class="center" style=" grid-template-rows: 1fr 1.8875rem 1.425rem 1.85rem 2.725rem;">
<div class="infoandvideo" style="height: 2.6rem;">
<div class="infoandvideo" style=" height: 2.6rem;">
<div class="info">
<img src="../res/indexv2/assets/image/index6/center-bg.jpeg" alt="">
<div class="info-box">
@@ -216,12 +241,14 @@
</div>
</div>
<!-- 项目进度计划 -->
<div id="xmjd" class="block4" style="height: 1.8875rem;">
<div id="xmjd" class="block4" style=" height: 1.8875rem;">
<div class="block4-tit"><span>项目进度计划</span></div>
<div class="block4-main" style="width: 10rem; ">
<div style="overflow-x: scroll;height: 100%;">
<div class="block4-main" style=" width: 10rem;
">
<div style=" overflow-x: scroll;
height: 100%;">
<div class="xm-plan">
<div v-for="(item,idx) in xmjdData" ::key="idx" :class="['z-plan-item', item.isClosed?'closed':'undone']">
<div v-for="(item,idx) in form.xmjdData" ::key="idx" :class="['z-plan-item', item.isClosed?'closed':'undone']">
<div class="z-line" >
<div class="z-dot"><div class="z-dot-inner"></div></div>
</div>
@@ -233,7 +260,7 @@
</div>
</div>
<!-- 危大工程管控数据 -->
<div id="wd" class="block4" style="height: 1.55rem;">
<div id="wd" class="block4" style=" height: 1.55rem;">
<div class="block4-tit"><span>危大工程管控数据</span></div>
<div class="block4-main">
<div class="wd">
@@ -277,8 +304,11 @@
</div>
<!-- 应急管理数据 / 工程划分 -->
<div class="layout"
style="height: 1.85rem;display: grid;grid-template-columns: 5.5rem 4.25rem;gap: 0.25rem;">
<div id="yjgl" class="block5" style="height: 100%;">
style=" height: 1.85rem;
display: grid;
grid-template-columns: 5.5rem 4.25rem;
gap: 0.25rem;">
<div id="yjgl" class="block5" style=" height: 100%;">
<div class="block5-tit"><span>应急管理数据</span></div>
<div class="block5-main">
<div class="yjgl">
@@ -305,7 +335,7 @@
</div>
</div>
</div>
<div id="gchf" class="block6" style="height: 100%;">
<div id="gchf" class="block6" style=" height: 100%;">
<div class="block6-tit"><span>工程划分</span></div>
<div class="block6-main">
<div class="gchf">
@@ -329,7 +359,7 @@
</div>
</div>
<!-- 质量验收数据 -->
<div id="zhl" class="block4" style="height: 2.725rem;">
<div id="zhl" class="block4" style=" height: 2.725rem;">
<div class="block4-tit"><span>质量验收数据</span></div>
<div class="block4-main">
<div class="zhl">
@@ -341,7 +371,10 @@
</div>
<div class="side">
<!-- 特种设备质保体系 / 图纸会审/设计交底 -->
<div class="layout" style="height: 1.7rem;display: grid;grid-template-columns: 1fr 1fr;gap: 0.25rem;">
<div class="layout" style=" height: 1.7rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem;">
<div class="block1" id="tzsb">
<div class="block-tit1"><span>特种设备质保体系</span></div>
<div class="block1-main">
@@ -368,7 +401,8 @@
</div>
</div>
<!-- 培训教育 -->
<div id="educat" class="block" style="height: 2.2rem;margin-top: 0.25rem;">
<div id="educat" class="block" style=" height: 2.2rem;
margin-top: 0.25rem;">
<div class="block-tit">
<div :class="[educationIdx == 0?'selected':'']" @click="onChangeEducation(0)"><span>安全教育</span>
</div>
@@ -376,21 +410,21 @@
<span>质量教育数据</span>
</div>
</div>
<div class="block-main">
<div class="block-main" id="hsseEduTrain">
<div class="educa-box">
<div class="box1">
<div class="box1-row">
<div class="educa-row-inner" style="margin-right: 0.125rem;">
<div class="educa-row-inner" style=" margin-right: 0.125rem;">
<div class="educa-lab"><span>专项培训</span></div>
<div class="educa-val" style="text-align: right;"><span>{{form.hsseEduTrain.specialTrainNum}}</span><span>次</span>
<div class="educa-val" style=" text-align: right;"><span>{{form.hsseEduTrain.specialTrainNum}}</span><span>次</span>
</div>
</div>
<i></i>
</div>
<div class="box1-row">
<div class="educa-row-inner" style="margin-right: 0.125rem;">
<div class="educa-row-inner" style=" margin-right: 0.125rem;">
<div class="educa-lab"><span>特种作业培训</span></div>
<div class="educa-val" style="text-align: right;"><span>{{form.hsseEduTrain.specialOperationTrainNum}}</span><span>次</span>
<div class="educa-val" style=" text-align: right;"><span>{{form.hsseEduTrain.specialOperationTrainNum}}</span><span>次</span>
</div>
</div>
<i></i>
@@ -400,21 +434,21 @@
<h6>安全工时</h6>
<p><span>{{form.hsseEduTrain.safeWorkingHour}}</span><span>h</span></p>
</div>
<div class="box1" style="align-items: flex-start;">
<div class="box1" style=" align-items: flex-start;">
<div class="box1-row">
<i></i>
<div class="educa-row-inner" style="margin-left: 0.125rem;">
<div class="educa-row-inner" style=" margin-left: 0.125rem;">
<div class="educa-lab"><span>三级安全教育培训</span></div>
<div class="educa-val" style="text-align: left;"><span>{{form.hsseEduTrain.safeTrainNum}}</span><span>次</span>
<div class="educa-val" style=" text-align: left;"><span>{{form.hsseEduTrain.safeTrainNum}}</span><span>次</span>
</div>
</div>
</div>
<div class="box1-row">
<i></i>
<div class="educa-row-inner" style="margin-left: 0.125rem;">
<div class="educa-row-inner" style=" margin-left: 0.125rem;">
<div class="educa-lab"><span>安全技术交底</span></div>
<div class="educa-val" style="text-align: left;"><span>{{form.designBriefing.safetyTechnicalBriefing}}</span><span>次</span>
<div class="educa-val" style=" text-align: left;"><span>{{form.designBriefing.safetyTechnicalBriefing}}</span><span>次</span>
</div>
</div>
@@ -422,9 +456,18 @@
</div>
</div>
</div>
<div class="block-main" id="cqmsEduTrain" style="display: none;">
<div class="educa-box">
<div class="box1 a-box1">
<h6>质量教育-培训人数</h6>
<p><span>{{form.cqmsTrainPersonNum}}</span><span>人</span></p>
</div>
</div>
</div>
</div>
<!-- 报验记录 -->
<div id="byjl" class="block" style="height: 2.5375rem;margin-top: 0.25rem;">
<div id="byjl" class="block" style=" height: 2.5375rem;
margin-top: 0.25rem;">
<div class="block-tit"><span>报验记录</span></div>
<div class="block-main">
<div class="byjl">
@@ -435,7 +478,10 @@
<div class="row">
<h6>合格率</h6>
<div class="bar">
<div :style="{width: form.inspectionRecord.equipmentRate+'%'}" class="bar-inner"></div>
<div :style="
{
width: form.inspectionRecord.equipmentRate+'%'
}" class="bar-inner"></div>
</div>
</div>
</div>
@@ -446,7 +492,10 @@
<div class="row">
<h6>合格率</h6>
<div class="bar">
<div :style="{width: form.inspectionRecord.machineRate+'%'}" class="bar-inner"></div>
<div :style="
{
width: form.inspectionRecord.machineRate+'%'
}" class="bar-inner"></div>
</div>
</div>
</div>
@@ -457,7 +506,10 @@
<div class="row">
<h6>合格率</h6>
<div class="bar">
<div :style="{width: form.inspectionRecord.personRate+'%'}" class="bar-inner"></div>
<div :style="
{
width: form.inspectionRecord.personRate+'%'
}" class="bar-inner"></div>
</div>
</div>
</div>
@@ -467,7 +519,11 @@
</div>
<!-- 施工方案 / 高风险作业许可 -->
<div class="layout"
style="height: 2.1875rem;margin-top: 0.25rem;display: grid;grid-template-columns: 3.75rem 2.25rem;gap: 0.25rem;">
style=" height: 2.1875rem;
margin-top: 0.25rem;
display: grid;
grid-template-columns: 3.75rem 2.25rem;
gap: 0.25rem;">
<div class="block2" id="sgfa">
<div class="block2-tit"><span>施工方案</span></div>
<div class="block2-main">
@@ -509,7 +565,8 @@
</div>
</div>
<!-- 计量器具数据 -->
<div id="jlqj" class="block" style="height: 1.975rem;margin-top: 0.25rem;">
<div id="jlqj" class="block" style=" height: 1.975rem;
margin-top: 0.25rem;">
<div class="block-tit"><span>计量器具数据</span></div>
<div class="block-main">
<div class="jlqj">
@@ -555,14 +612,6 @@
// 当前激活的管理菜单索引
manage_idx: 1,
// 存储所有数据的主要对象
xmjdData: [
{ date: '2025-01-01', title: '项目启动', description: '项目正式开始', isClosed: true },
{ date: '2025-02-01', title: '需求分析', description: '完成需求分析阶段', isClosed: true },
{ date: '2025-03-01', title: '设计阶段', description: '完成系统设计', isClosed: true },
{ date: '2025-04-01', title: '开发阶段', description: '开始软件开发', isClosed: true },
{ date: '2025-05-01', title: '测试阶段', description: '进行系统测试', isClosed: false },
{ date: '2025-06-01', title: '部署阶段', description: '系统部署上线', isClosed: false }
],
form: {
org: {//组织机构人员
projectSum: 0, // 项目总人数
@@ -616,6 +665,7 @@
projectEndDate: '2049-12-31',//项目到期时间
projectEndDays: 0,//合同倒计时
},
xmjdData: [],//项目进度计划
dangerousProject:
{//危大工程管控数据
approvalCompleted: 0,//审批完成
@@ -701,6 +751,7 @@
if (response.d.success) {
// 更新数据成功
that.form = { ...response.d.data }; // 更新表单数据
console.log(that.form)
} else {
// 更新数据失败
alert("加载数据失败:" + response.d.msg);
@@ -730,9 +781,25 @@
},
onChangeEducation(idx) {
this.educationIdx = idx;
if (this.educationIdx == 0) {
$("#hsseEduTrain").show();
$("#cqmsEduTrain").hide();
}
else {
$("#hsseEduTrain").hide();
$("#cqmsEduTrain").show();
}
},
onChangeCheck(idx) {
this.checkIdx = idx;
if (this.checkIdx == 0) {
$("#hsseCheck").show();
$("#cqmsCheck").hide();
}
else {
$("#hsseCheck").hide();
$("#cqmsCheck").show();
}
},
/**
*