1028 lines
50 KiB
Plaintext
1028 lines
50 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProject.aspx.cs" Inherits="FineUIPro.Web.common.mainProject" Async="true" %>
|
||
|
||
<!DOCTYPE html>
|
||
<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"/>
|
||
<link rel="stylesheet" href="../res/homecss/projectindex.css?v1">
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg1">
|
||
<div id="app">
|
||
<div class="container" v-cloak>
|
||
<div class="side">
|
||
<!-- 组织机构人员 -->
|
||
<div class="block" style="height: 2.5375rem;">
|
||
<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>
|
||
</div>
|
||
<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">
|
||
<div class="row1-tit" style="width: auto;">安管人员与作业人员配比</div>
|
||
<h6>{{form.org.projectPersonRatio}}</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 预警警报 -->
|
||
<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">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 安全/质量问题 -->
|
||
<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" id="hsseCheck">
|
||
<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>
|
||
<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 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>
|
||
</div>
|
||
</div>
|
||
<div class="box">
|
||
<i></i>
|
||
<div class="box-row">
|
||
<div class="box-row-label">较大风险</div>
|
||
<div class="box-row-value">{{form.riskClassification.mediumRiskNum}}</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.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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 费用、机具及会议 -->
|
||
<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>
|
||
<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">
|
||
<i class="iconfont icon-l10" style="color: #00DEFF;font-size: 20px;"></i>
|
||
<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">
|
||
<i class="iconfont icon-l10" style="color: #00DEFF;font-size: 20px;"></i>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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="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>
|
||
</div>
|
||
<div class="video">
|
||
<h5>安全云监控</h5>
|
||
<div class="video-box">
|
||
<video src=""></video>
|
||
</div>
|
||
<p><span>实时视频：线路1</span><span>2020-10-10 12:40:26</span></p>
|
||
</div>
|
||
</div>
|
||
<!-- 项目进度计划 -->
|
||
<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="xm-plan">
|
||
<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>
|
||
<h6>{{item.title}}</h6>
|
||
<p>{{item.date}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 危大工程管控数据 -->
|
||
<div id="wd" class="block4" style="height: 1.55rem;">
|
||
<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>
|
||
</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.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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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%;">
|
||
<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>
|
||
</div>
|
||
<div id="gchf" class="block6" style="height: 100%;">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 质量验收数据 -->
|
||
<div id="zhl" class="block4" style="height: 2.725rem;">
|
||
<div class="block4-tit"><span>质量验收数据</span></div>
|
||
<div class="block4-main">
|
||
<div class="zhl">
|
||
<div id="map1"></div>
|
||
<div id="map2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="side">
|
||
<!-- 特种设备质保体系 / 图纸会审/设计交底 -->
|
||
<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">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 培训教育 -->
|
||
<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>
|
||
<div :class="[educationIdx == 1?'selected':'']" @click="onChangeEducation(1)">
|
||
<span>质量教育数据</span>
|
||
</div>
|
||
</div>
|
||
<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-lab"><span>专项培训</span></div>
|
||
<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-lab"><span>特种作业培训</span></div>
|
||
<div class="educa-val" style="text-align: right;"><span>{{form.hsseEduTrain.specialOperationTrainNum}}</span><span>次</span>
|
||
</div>
|
||
</div>
|
||
<i></i>
|
||
</div>
|
||
</div>
|
||
<div class="box1 a-box1">
|
||
<h6>安全工时</h6>
|
||
<p><span>{{form.hsseEduTrain.safeWorkingHour}}</span><span>h</span></p>
|
||
</div>
|
||
<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-lab"><span>三级安全教育培训</span></div>
|
||
<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-lab"><span>安全技术交底</span></div>
|
||
<div class="educa-val" style="text-align: left;"><span>{{form.designBriefing.safetyTechnicalBriefing}}</span><span>次</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</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 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">
|
||
<div :style="{width: form.inspectionRecord.equipmentRate+'%'}" class="bar-inner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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">
|
||
<div :style="{width: form.inspectionRecord.machineRate+'%'}" class="bar-inner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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">
|
||
<div :style="{width: form.inspectionRecord.personRate+'%'}" class="bar-inner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 施工方案 / 高风险作业许可 -->
|
||
<div class="layout" 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">
|
||
<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>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 计量器具数据 -->
|
||
<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">
|
||
<div class="jlqj-box">
|
||
<i></i>
|
||
<div class="jlqj-item">
|
||
<h6>计量器具</h6>
|
||
<p><span>{{form.measuringInstrumentsData.useNum}}</span><span>台</span></p>
|
||
</div>
|
||
</div>
|
||
<i></i>
|
||
<div class="jlqj-box">
|
||
<i></i>
|
||
<div class="jlqj-item">
|
||
<h6>校验合格</h6>
|
||
<p><span>{{form.measuringInstrumentsData.okNum}}</span><span>台</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script src="../res/lib/vue.min.js"></script>
|
||
<script src="../res/lib/echarts.min.js"></script>
|
||
<script src="../res/lib/china1.js"></script>
|
||
<script src="../res/lib/jquery.js"></script>
|
||
<script>
|
||
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,//合同倒计时
|
||
},
|
||
xmjdData: [],//项目进度计划
|
||
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,
|
||
},
|
||
// 当前时间显示
|
||
nowTime: '09:00:12',
|
||
}
|
||
},
|
||
mounted() {
|
||
// 组件挂载后执行的操作
|
||
this.show = true; // 显示内容
|
||
this.loadData(); // 加载数据
|
||
this.createMap1();
|
||
this.createMap2();
|
||
this.startTimer(); // 启动时间定时器
|
||
},
|
||
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 }; // 更新表单数据
|
||
console.log(that.form)
|
||
} else {
|
||
// 更新数据失败
|
||
alert("加载数据失败：" + response.d.msg);
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
// AJAX请求错误处理
|
||
alert("请求失败：" + error);
|
||
}
|
||
});
|
||
},
|
||
// 启动时间定时器，每秒更新一次当前时间
|
||
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秒
|
||
},
|
||
// 刷新数据
|
||
onRefresh() {
|
||
this.loadData(); // 重新加载数据
|
||
},
|
||
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();
|
||
}
|
||
},
|
||
/**
|
||
*
|
||
* @param {*} data1 验收数
|
||
* @param {*} data2 合格数
|
||
* @param {*} data3 合格率
|
||
*/
|
||
createMap1(data1, data2, data3) {
|
||
if (!this.map1) {
|
||
this.map1 = echarts.init(document.getElementById('map1'))
|
||
}
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
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.map1.setOption(option);
|
||
},
|
||
/**
|
||
*
|
||
* @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'
|
||
}
|
||
},
|
||
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);
|
||
}
|
||
},
|
||
},
|
||
);
|
||
</script> |