xiaju
/
SGGL_JT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
SGGL_JT/SUBQHSE/FineUIPro.Web/common/mainProject.aspx

1063 lines
51 KiB
Plaintext
Raw Normal View History

大屏看板
2025-04-17 16:01:19 +08:00
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProject.aspx.cs" Inherits="FineUIPro.Web.common.mainProject" Async="true" %>
1
2025-04-07 17:43:30 +08:00
<!DOCTYPE html>
大屏看板
2025-04-17 16:01:19 +08:00
<html lang="en">
<head runat="server">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="../res/lib/flex.js"></script>
<link rel="stylesheet" href="../res/homecss/common.css"/>
<link rel="stylesheet" href="../res/homecss/index.css"/>
1
2025-04-17 16:30:55 +08:00
<link rel="stylesheet" href="../res/homecss/projectindex.css?v1">
大屏看板
2025-04-17 16:01:19 +08:00
<style>
[v-cloak] {
display: none;
1
2025-04-07 17:43:30 +08:00
}
大屏看板
2025-04-17 16:01:19 +08:00
</style>
1
2025-04-07 17:43:30 +08:00
</head>
大屏看板
2025-04-17 16:01:19 +08:00
<body class="bg1">
<div id="app">
1
2025-04-18 17:49:02 +08:00
<div class="container" v-cloak>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="side">
<!-- 组织机构人员 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="block" style=" height: 2.5375rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block-tit"><span>组织机构人员</span></div>
<div id="org1" class="block-main">
<div class="o-box">
<h5><span>总监</span><span>{{form.org.projectDirector}}</span></h5>
<h5><span>专职</span><span>{{form.org.projectFullTime}}</span></h5>
<i></i>
<h4><span>项目总数</span><span>{{form.org.projectSum}}</span></h4>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="o-box1">
<div class="org-row1">
<i></i>
<div class="row1-inner">
<div class="row1-tit">安管人员</div>
<h6>{{form.org.projectSecurity}}</h6>
</div>
</div>
<div class="org-row1">
<i></i>
<div class="row1-inner">
<div class="row1-tit">安全监护</div>
<h6>{{form.org.projectSafetyMonitoring}}</h6>
</div>
</div>
<div class="org-row1">
<i></i>
<div class="row1-inner">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="row1-tit" style=" width: auto;">安管人员与作业人员配比</div>
大屏看板
2025-04-17 16:01:19 +08:00
<h6>{{form.org.projectPersonRatio}}</h6>
</div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
<!-- 预警警报 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="Early" class="block" style=" height: 2.1rem;
margin-top: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block-tit"><span>预警警报</span></div>
<div class="block-main">
<div class="early-box">
<div class="early-box-laber">水电监测</div>
<div class="early-box-value">{{form.warning.hydropower}}吨</div>
<div class="early-box-value">{{form.warning.hydropower2}}Kwh</div>
</div>
<div class="early-box">
<div class="early-box-laber">塔式起重机<br />预警</div>
<div class="early-box-value">{{form.warning.towercrane}}</div>
</div>
<div class="early-box">
<div class="early-box-laber">基坑监测<br />预警</div>
<div class="early-box-value">{{form.warning.foundationpit}}</div>
</div>
<div class="early-box">
<div class="early-box-laber">车辆冲洗<br />监测</div>
<div class="early-box-value">{{form.warning.car}}</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<!-- 安全/质量问题 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="check" class="block" style=" height: 2.1rem;
margin-top: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<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>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="block-main" id="hsseCheck">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="early-box">
<div class="early-box-laber">问题</div>
<div class="early-box-value">{{form.hsseCheck.generalNum}}<span>项</span></div>
</div>
<div class="early-box">
<div class="early-box-laber">未完成</div>
<div class="early-box-value">{{form.hsseCheck.notClosedNum}}<span>项</span></div>
</div>
<div class="early-box">
<div class="early-box-laber">整改闭环</div>
<div class="early-box-value">{{form.hsseCheck.closedNum}}<span>项</span></div>
</div>
<div class="early-box">
<div class="early-box-laber">整改率</div>
<div class="early-box-value">{{form.hsseCheck.rectificationRate}}<span>%</span></div>
</div>
</div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<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>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<!-- 风险分级管控 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="risk" class="block" style=" height: 1.725rem;
margin-top: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block-tit"><span>风险分级管控</span></div>
<div class="block-main">
<div class="box">
<i></i>
<div class="box-row">
<div class="box-row-label">重大风险</div>
<div class="box-row-value">{{form.riskClassification.highRiskNum}}</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="box">
<i></i>
<div class="box-row">
<div class="box-row-label">较大风险</div>
<div class="box-row-value">{{form.riskClassification.mediumRiskNum}}</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="box">
<i></i>
<div class="box-row">
<div class="box-row-label">一般风险</div>
<div class="box-row-value">{{form.riskClassification.generalRiskNum}}</div>
</div>
</div>
<div class="box">
<i></i>
<div class="box-row">
<div class="box-row-label">低风险</div>
<div class="box-row-value">{{form.riskClassification.lowRiskNum}}</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
<!-- 费用、机具及会议 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="tools" class="block" style=" height: 2.15rem;
margin-top: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block-tit"><span>费用、机具及会议</span></div>
<div class="block-main">
<div class="t-box">
<div class="t-box-tit">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<i class="iconfont icon-l10" style=" color: #FFBF46;
font-size: 20px;"></i>
大屏看板
2025-04-17 16:01:19 +08:00
<p>安全费用</p>
</div>
<div class="r-row">
<div class="r-row-label">费用提取</div>
<div class="r-row-value"><span>{{form.costEquipmentMeeting.expenseExtraction}}</span><span>亿元</span></div>
</div>
<div class="r-row">
<div class="r-row-label">费用使用</div>
<div class="r-row-value"><span>{{form.costEquipmentMeeting.costUtilization}}</span><span>亿元</span></div>
</div>
</div>
<div class="t-box">
<div class="t-box-tit">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<i class="iconfont icon-l10" style=" color: #00DEFF;
font-size: 20px;"></i>
大屏看板
2025-04-17 16:01:19 +08:00
<p>施工机具设备</p>
</div>
<div class="r-row">
<div class="r-row-label">在用个数</div>
<div class="r-row-value"><span>{{form.costEquipmentMeeting.usingNumbers}}</span><span>个</span></div>
</div>
<div class="r-row">
<div class="r-row-label">特种设备</div>
<div class="r-row-value"><span>{{form.costEquipmentMeeting.specialEquipment}}</span><span>个</span></div>
</div>
</div>
<div class="t-box">
<div class="t-box-tit">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<i class="iconfont icon-l10" style=" color: #00DEFF;
font-size: 20px;"></i>
大屏看板
2025-04-17 16:01:19 +08:00
<p>会议</p>
</div>
<div class="r-row">
<div class="r-row-label">班前会</div>
<div class="r-row-value"><span>{{form.costEquipmentMeeting.classMeeting}}</span><span>个</span></div>
</div>
<div class="r-row">
<div class="r-row-label">周例会</div>
<div class="r-row-value"><span>{{form.costEquipmentMeeting.weekMeeting}}</span><span>个</span></div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
</div>
</div>
</div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="center" style=" grid-template-rows: 1fr 1.8875rem 1.425rem 1.85rem 2.725rem;">
大屏看板
2025-04-17 16:01:19 +08:00
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="infoandvideo" style=" height: 2.6rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="info">
<img src="../res/indexv2/assets/image/index6/center-bg.jpeg" alt="">
<div class="info-box">
<div class="info-row">
<p>合同工期</p>
<p>{{form.projectInfo.projectDays}}天</p>
</div>
<div class="info-row">
<p>到期时间</p>
<p>{{form.projectInfo.projectEndDate}}</p>
</div>
<div class="info-row">
<p>合同倒计时</p>
<p>{{form.projectInfo.projectEndDays}}天</p>
</div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="video">
<h5>安全云监控</h5>
<div class="video-box">
<video src=""></video>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<p><span>实时视频：线路1</span><span>2020-10-10 12:40:26</span></p>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
<!-- 项目进度计划 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="xmjd" class="block4" style=" height: 1.8875rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block4-tit"><span>项目进度计划</span></div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="block4-main" style=" width: 10rem;
">
<div style=" overflow-x: scroll;
height: 100%;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="xm-plan">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div v-for="(item,idx) in form.xmjdData" ::key="idx" :class="['z-plan-item', item.isClosed?'closed':'undone']">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="z-line" >
<div class="z-dot"><div class="z-dot-inner"></div></div>
</div>
<h6>{{item.title}}</h6>
<p>{{item.date}}</p>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
</div>
<!-- 危大工程管控数据 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="wd" class="block4" style=" height: 1.55rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block4-tit"><span>危大工程管控数据</span></div>
<div class="block4-main">
<div class="wd">
<div class="wd-box">
<i></i>
<div class="wd-row">
<div class="wd-row-label">审批完成</div>
<div class="wd-row-value"><span>{{form.dangerousProject.approvalCompleted}}</span><span>个</span></div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="wd-box">
<i></i>
<div class="wd-row">
<div class="wd-row-label">施工个数</div>
<div class="wd-row-value"><span>{{form.dangerousProject.construction}}</span><span>个</span></div>
</div>
</div>
<div class="wd-box">
<i></i>
<div class="wd-row">
<div class="wd-row-label">培训人次数</div>
<div class="wd-row-value"><span>{{form.dangerousProject.training}}</span><span>个</span></div>
</div>
</div>
<div class="wd-box">
<i></i>
<div class="wd-row">
<div class="wd-row-label">完工个数</div>
<div class="wd-row-value"><span>{{form.dangerousProject.completed}}</span><span>个</span></div>
</div>
</div>
<div class="wd-box">
<i></i>
<div class="wd-row">
<div class="wd-row-label">论证个数</div>
<div class="wd-row-value"><span>{{form.dangerousProject.reasoning}}</span><span>个</span></div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<!-- 应急管理数据 / 工程划分 -->
<div class="layout"
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
style=" height: 1.85rem;
display: grid;
grid-template-columns: 5.5rem 4.25rem;
gap: 0.25rem;">
<div id="yjgl" class="block5" style=" height: 100%;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block5-tit"><span>应急管理数据</span></div>
<div class="block5-main">
<div class="yjgl">
<div class="yjgl-row">
<i></i>
<h6>综合预案</h6>
<p><span>{{form.meetAnEmergency.comprehensive}}</span><span>项</span></p>
</div>
<div class="yjgl-row">
<i></i>
<h6>专项预案</h6>
<p><span>{{form.meetAnEmergency.special}}</span><span>项</span></p>
</div>
<div class="yjgl-row">
<i></i>
<h6>现场处置</h6>
<p><span>{{form.meetAnEmergency.scene}}</span><span>项</span></p>
</div>
<div class="yjgl-row">
<i></i>
<h6>演练次数</h6>
<p><span>{{form.meetAnEmergency.drill}}</span><span>项</span></p>
</div>
</div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="gchf" class="block6" style=" height: 100%;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block6-tit"><span>工程划分</span></div>
<div class="block6-main">
<div class="gchf">
<div class="gc-box">
<i></i>
<h6><span>单位工程数</span></h6>
<p><span>{{form.engineeringDivision.unitNum}}</span><span>个</span></p>
</div>
<div class="gc-box">
<i></i>
<h6><span>分部工程数</span></h6>
<p><span>{{form.engineeringDivision.branchNum}}</span><span>个</span></p>
</div>
<div class="gc-box">
<i></i>
<h6><span>分项工程数</span></h6>
<p><span>{{form.engineeringDivision.itemizeNum}}</span><span>台</span></p>
</div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
<!-- 质量验收数据 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="zhl" class="block4" style=" height: 2.725rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block4-tit"><span>质量验收数据</span></div>
<div class="block4-main">
<div class="zhl">
<div id="map1"></div>
<div id="map2"></div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="side">
<!-- 特种设备质保体系 / 图纸会审/设计交底 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="layout" style=" height: 1.7rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block1" id="tzsb">
<div class="block-tit1"><span>特种设备质保体系</span></div>
<div class="block1-main">
<div class="box">
<i></i>
<div class="row">
<div class="row-lab">集团总数</div>
<div class="row-val"><span>{{form.specialEquipmentSys}}</span><span>个</span></div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
<div class="block1" id="tzh">
<div class="block-tit1"><span>图纸会审/设计交底</span></div>
<div class="block1-main">
<div class="box">
<i></i>
<div class="row">
<div class="row-lab">次数</div>
<div class="row-val"><span>{{form.designBriefing}}</span><span>个</span></div>
</div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<!-- 培训教育 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="educat" class="block" style=" height: 2.2rem;
margin-top: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block-tit">
<div :class="[educationIdx == 0?'selected':'']" @click="onChangeEducation(0)"><span>安全教育</span>
</div>
<div :class="[educationIdx == 1?'selected':'']" @click="onChangeEducation(1)">
<span>质量教育数据</span>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="block-main" id="hsseEduTrain">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="educa-box">
<div class="box1">
<div class="box1-row">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-row-inner" style=" margin-right: 0.125rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="educa-lab"><span>专项培训</span></div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-val" style=" text-align: right;"><span>{{form.hsseEduTrain.specialTrainNum}}</span><span>次</span>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
<i></i>
</div>
<div class="box1-row">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-row-inner" style=" margin-right: 0.125rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="educa-lab"><span>特种作业培训</span></div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-val" style=" text-align: right;"><span>{{form.hsseEduTrain.specialOperationTrainNum}}</span><span>次</span>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
<i></i>
</div>
</div>
<div class="box1 a-box1">
<h6>安全工时</h6>
<p><span>{{form.hsseEduTrain.safeWorkingHour}}</span><span>h</span></p>
</div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="box1" style=" align-items: flex-start;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="box1-row">
<i></i>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-row-inner" style=" margin-left: 0.125rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="educa-lab"><span>三级安全教育培训</span></div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-val" style=" text-align: left;"><span>{{form.hsseEduTrain.safeTrainNum}}</span><span>次</span>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
1
2025-04-07 17:43:30 +08:00
大屏看板
2025-04-17 16:01:19 +08:00
</div>
<div class="box1-row">
<i></i>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-row-inner" style=" margin-left: 0.125rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="educa-lab"><span>安全技术交底</span></div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div class="educa-val" style=" text-align: left;"><span>{{form.designBriefing.safetyTechnicalBriefing}}</span><span>次</span>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
1
2025-04-07 17:43:30 +08:00
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<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>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<!-- 报验记录 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="byjl" class="block" style=" height: 2.5375rem;
margin-top: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block-tit"><span>报验记录</span></div>
<div class="block-main">
<div class="byjl">
<div class="byjl-item">
<i></i>
<h6>设备报验数</h6>
<p><span>{{form.inspectionRecord.equipmentNum}}</span><span>台套</span></p>
<div class="row">
<h6>合格率</h6>
<div class="bar">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div :style="
{
width: form.inspectionRecord.equipmentRate+'%'
}" class="bar-inner"></div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="byjl-item">
<i></i>
<h6>机具报验数</h6>
<p><span>{{form.inspectionRecord.machineNum}}</span><span>台套</span></p>
<div class="row">
<h6>合格率</h6>
<div class="bar">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div :style="
{
width: form.inspectionRecord.machineRate+'%'
}" class="bar-inner"></div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<div class="byjl-item">
<i></i>
<h6>人员报验数</h6>
<p><span>{{form.inspectionRecord.personNum}}</span><span>人次</span></p>
<div class="row">
<h6>合格率</h6>
<div class="bar">
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div :style="
{
width: form.inspectionRecord.personRate+'%'
}" class="bar-inner"></div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
<!-- 施工方案 / 高风险作业许可 -->
<div class="layout"
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
style=" height: 2.1875rem;
margin-top: 0.25rem;
display: grid;
grid-template-columns: 3.75rem 2.25rem;
gap: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block2" id="sgfa">
<div class="block2-tit"><span>施工方案</span></div>
<div class="block2-main">
<div class="sgfa">
<div class="sgfa-item">
<i></i>
<h6>总数</h6>
<p><span>{{form.constructSolution.total}}</span><span>个</span></p>
</div>
<div class="sgfa-item">
<i></i>
<h6>项目审批数</h6>
<p><span>{{form.constructSolution.projectApprove}}</span><span>个</span></p>
</div>
<div class="sgfa-item">
<i></i>
<h6>企业审批数</h6>
<p><span>{{form.constructSolution.enterpriseApprove}}</span><span>个</span></p>
</div>
</div>
1
2025-04-07 17:43:30 +08:00
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
<div id="xkz" class="block3">
<div class="block3-tit"><span>高风险作业许可</span></div>
<div class="block3-main">
<div class="xkz">
<div class="xkz-box">
<i></i>
<h6>关闭项</h6>
<p>{{form.highRisk.closeItem}}</p>
</div>
<div class="xkz-box">
<i></i>
<h6>许可证</h6>
<p>{{form.highRisk.licenseItem}}</p>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
</div>
</div>
</div>
<!-- 计量器具数据 -->
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
<div id="jlqj" class="block" style=" height: 1.975rem;
margin-top: 0.25rem;">
大屏看板
2025-04-17 16:01:19 +08:00
<div class="block-tit"><span>计量器具数据</span></div>
<div class="block-main">
<div class="jlqj">
<div class="jlqj-box">
<i></i>
<div class="jlqj-item">
<h6>计量器具</h6>
<p><span>{{form.measuringInstrumentsData.useNum}}</span><span>台</span></p>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
大屏看板
2025-04-17 16:01:19 +08:00
<i></i>
<div class="jlqj-box">
<i></i>
<div class="jlqj-item">
<h6>校验合格</h6>
<p><span>{{form.measuringInstrumentsData.okNum}}</span><span>台</span></p>
1
2025-04-07 17:43:30 +08:00
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
大屏看板
2025-04-17 16:01:19 +08:00
<script src="../res/lib/vue.min.js"></script>
1
2025-04-07 17:43:30 +08:00
<script src="../res/lib/echarts.min.js"></script>
大屏看板
2025-04-17 16:01:19 +08:00
<script src="../res/lib/china1.js"></script>
1
2025-04-07 17:43:30 +08:00
<script src="../res/lib/jquery.js"></script>
<script>
大屏看板
2025-04-17 16:01:19 +08:00
new Vue({
el: "#app",
data() {
return {
educationIdx: 0,
checkIdx: 0,
// 控制显示状态
show: false,
// 当前激活的导航索引
nav_idx: 1,
// 当前激活的管理菜单索引
manage_idx: 1,
// 存储所有数据的主要对象
form: {
org: {//组织机构人员
projectSum: 0, // 项目总人数
projectDirector: 0, // 项目总监
projectFullTime: 0, // 项目专职
projectSafetyMonitoring: 0, // 项目安全监护
projectSecurity: 0, // 项目安管人员
projectPersonRatio: '1:5', // 项目安管人员与作业人员配比
},
warning:
{//预警警报
hydropower: 0,//水电监测
hydropower2: 0,//水电监测
towercrane: 0,//塔式起重机预警
foundationpit: 0,//基坑监测预警
car: 0,//车辆冲洗监测
},
hsseCheck:
{//安全检查
generalNum: 0,//安全问题
notClosedNum: 0,//未完成
closedNum: 0,//整改闭环
rectificationRate: 0,//整改率
},
cqmsCheck:
{//质量检查
generalNum: 0,//安全问题
notClosedNum: 0,//未完成
closedNum: 0,//整改闭环
rectificationRate: 0,//整改率
},
riskClassification:
{//风险分级管控
highRiskNum: 0,//重大风险
mediumRiskNum: 0,//较大风险
generalRiskNum: 0,//一般风险
lowRiskNum: 0//低风险
},
costEquipmentMeeting:
{//费用、机具及会议
expenseExtraction: 0,//安全费用-费用提取（亿元）
costUtilization: 0,//安全费用-费用使用（亿元）
usingNumbers: 0,//施工机具设备-在用个数
specialEquipment: 0,//施工机具设备-特种设备
classMeeting: 0,//会议-班前会
weekMeeting: 0//会议-周例会
},
projectInfo:
{//项目数据
projectDays: 0,//项目总工期
projectEndDate: '2049-12-31',//项目到期时间
projectEndDays: 0,//合同倒计时
},
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
xmjdData: [],//项目进度计划
大屏看板
2025-04-17 16:01:19 +08:00
dangerousProject:
{//危大工程管控数据
approvalCompleted: 0,//审批完成
construction: 0,//施工个数
training: 0,//培训人次
completed: 0,//完工个数
reasoning: 0//论证个数
},
meetAnEmergency:
{//应急管理数据
comprehensive: 0,//综合预案
special: 0,//专项预案
scene: 0,//现场处置
drill: 0//演练次数
},
engineeringDivision:
{//工程划分
unitNum: 0,//单位工程数
branchNum: 0,//分部工程数
itemizeNum: 0,//分项工程数
},
specialEquipmentSys: 0,//特种设备质保体系
designBriefing: 0,//图纸会审、设计交底
hsseEduTrain:
{//安全教育
safeWorkingHour: 0,//安全工时数
specialTrainNum: 0,//专项培训
safeTrainNum: 0,//三级安全教育培训
specialOperationTrainNum: 0,//特种作业培训
safetyTechnicalBriefing: 0//安全技术交底次数
},
cqmsTrainPersonNum: 0,//质量教育-培训人数
inspectionRecord:
{//报验记录
equipmentNum: 0,//设备报验
equipmentRate: 0,//设备报验合格率
personNum: 0,//人员报验
personRate: 0,//人员报验合格率
machineNum: 0,//机具报验
machineRate: 0,//机具报验合格率
},
constructSolution:
{//施工方案
total: 0,//总数
projectApprove: 0,//项目审批数（审批状态：已闭合）
enterpriseApprove: 0//企业审批数
},
highRisk:
{//高风险作业许可
closeItem: 0,//关闭项
licenseItem: 0//许可项
},
measuringInstrumentsData:
{//计量器具数据
useNum: 0,//计量器具
okNum: 0,//校准合格
},
map1: null,
map2: null,
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
// 当前时间显示
nowTime: '09:00:12',
1
2025-04-07 17:43:30 +08:00
}
},
大屏看板
2025-04-17 16:01:19 +08:00
mounted() {
// 组件挂载后执行的操作
this.show = true; // 显示内容
this.loadData(); // 加载数据
this.createMap1();
this.createMap2();
this.startTimer(); // 启动时间定时器
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
methods: {
loadData() {
const that = this;
$.ajax({
type: 'POST',
url: 'mainProject.aspx/GetHSSEData', //调用后台WebMethod
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
console.log(response.d)
if (response.d.success) {
// 更新数据成功
that.form = { ...response.d.data }; // 更新表单数据
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
console.log(that.form)
大屏看板
2025-04-17 16:01:19 +08:00
} else {
// 更新数据失败
alert("加载数据失败：" + response.d.msg);
}
},
error: function (xhr, status, error) {
// AJAX请求错误处理
alert("请求失败：" + error);
}
});
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
// 启动时间定时器，每秒更新一次当前时间
startTimer() {
setInterval(() => {
const now = new Date();
this.nowTime = now.toLocaleTimeString('zh-CN', {
hour12: false, // 使用24小时制
hour: '2-digit', // 两位数显示小时
minute: '2-digit', // 两位数显示分钟
second: '2-digit' // 两位数显示秒钟
});
}, 1000); // 1000毫秒 = 1秒
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
// 刷新数据
onRefresh() {
this.loadData(); // 重新加载数据
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
onChangeEducation(idx) {
this.educationIdx = idx;
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
if (this.educationIdx == 0) {
$("#hsseEduTrain").show();
$("#cqmsEduTrain").hide();
}
else {
$("#hsseEduTrain").hide();
$("#cqmsEduTrain").show();
}
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
onChangeCheck(idx) {
this.checkIdx = idx;
1、项目环境设置 2、大屏数据调优
2025-04-17 18:32:33 +08:00
if (this.checkIdx == 0) {
$("#hsseCheck").show();
$("#cqmsCheck").hide();
}
else {
$("#hsseCheck").hide();
$("#cqmsCheck").show();
}
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
/**
*
* @param {*} data1 验收数
* @param {*} data2 合格数
* @param {*} data3 合格率
*/
createMap1(data1, data2, data3) {
if (!this.map1) {
this.map1 = echarts.init(document.getElementById('map1'))
1
2025-04-07 17:43:30 +08:00
}
大屏看板
2025-04-17 16:01:19 +08:00
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
1
2025-04-07 17:43:30 +08:00
}
大屏看板
2025-04-17 16:01:19 +08:00
},
grid: {
top: 30,
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true
},
legend: {
data: ['验收数', '合格数', '合格率'],
top: 'top', // 图例位置
left: 'center',
textStyle: {
color: '#fff'
1
2025-04-07 17:43:30 +08:00
}
大屏看板
2025-04-17 16:01:19 +08:00
},
xAxis: {
type: 'category',
data: ['关键工序验收', '特殊工程验收', '隐蔽工程验收'],
axisTick: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
},
axisLine: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
},
axisLabel: {
color: "#B4C9DC"
}
},
yAxis: [
{
type: 'value',
name: '数量',
position: 'left',
alignTicks: true,
splitLine: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
},
},
{
type: 'value',
name: '百分比',
position: 'right',
max: 100,
min: 0,
alignTicks: true,
splitLine: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
}
}
],
series: [
{
name: "验收数",
data: [120, 200, 150],
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
normal: {
color: '#00c0ff',
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6CBDE7' }, // 顶部颜色
{ offset: 1, color: '#1C4768' } // 底部颜色
]),
}
}
},
{
name: "合格数",
data: [120, 200, 150],
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
normal: {
color: '#00c0ff',
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#D7BDF2' }, // 顶部颜色
{ offset: 1, color: '#2A486B' } // 底部颜色
]),
}
}
},
{
name: "合格率",
yAxisIndex: 1,
data: [80, 22.1, 12],
type: 'line',
smooth: true, // 设置折线图变圆滑
symbol: 'none',
lineStyle: {
width: 4,
color: '#F69D48',
},
}
]
};
this.map1.setOption(option);
1
2025-04-07 17:43:30 +08:00
},
大屏看板
2025-04-17 16:01:19 +08:00
/**
*
* @param {*} data1 验收数
* @param {*} data2 合格数
* @param {*} data3 合格率
*/
createMap2(data1, data2, data3) {
if (!this.map2) {
this.map2 = echarts.init(document.getElementById('map2'))
}
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
1
2025-04-07 17:43:30 +08:00
}
大屏看板
2025-04-17 16:01:19 +08:00
},
grid: {
top: 30,
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true
},
legend: {
data: ['验收数', '合格数', '合格率'],
top: 'top', // 图例位置
left: 'center',
textStyle: {
color: '#fff'
}
},
xAxis: {
type: 'category',
data: ['单位工程', '分布工程', '分项工程'],
axisTick: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
},
axisLine: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
},
axisLabel: {
color: "#B4C9DC"
}
},
yAxis: [
{
type: 'value',
name: '数量',
position: 'left',
alignTicks: true,
splitLine: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
},
},
{
type: 'value',
name: '百分比',
position: 'right',
max: 100,
min: 0,
alignTicks: true,
splitLine: {
lineStyle: {
color: '#123858' // 设置Y轴线颜色为白色
}
}
}
],
series: [
{
name: "验收数",
data: [120, 200, 150],
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
normal: {
color: '#00c0ff',
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#6CBDE7' }, // 顶部颜色
{ offset: 1, color: '#1C4768' } // 底部颜色
]),
}
}
},
{
name: "合格数",
data: [120, 200, 150],
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
normal: {
color: '#00c0ff',
barBorderRadius: [8, 8, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#D7BDF2' }, // 顶部颜色
{ offset: 1, color: '#2A486B' } // 底部颜色
]),
}
}
},
{
name: "合格率",
yAxisIndex: 1,
data: [80, 22.1, 12],
type: 'line',
smooth: true, // 设置折线图变圆滑
symbol: 'none',
lineStyle: {
width: 4,
color: '#F69D48',
},
}
]
};
this.map2.setOption(option);
1
2025-04-07 17:43:30 +08:00
}
大屏看板
2025-04-17 16:01:19 +08:00
},
},
);
</script>