1250 lines
60 KiB
Plaintext
1250 lines
60 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main.aspx.cs" Inherits="FineUIPro.Web.common.main" 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"/>
|
||
|
||
<style type="text/css">
|
||
body,html{
|
||
height: 12.5rem;
|
||
}
|
||
[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: 3.35rem;">
|
||
<div class="block-tit"><span>组织机构人员</span></div>
|
||
<div id="org" class="block-main">
|
||
<div class="org-row">
|
||
<div class="org-box">
|
||
<div class="org-box-value">{{form.org.branchSum}}</div>
|
||
<div class="org-box-label">分支结构人数</div>
|
||
</div>
|
||
<div class="org-box">
|
||
<div class="org-box-value">{{form.org.projectSum}}</div>
|
||
<div class="org-box-label">项目人数</div>
|
||
</div>
|
||
<div class="org-box">
|
||
<div class="org-box-value">{{form.org.groupSum}}</div>
|
||
<div class="org-box-label">企业总部人数</div>
|
||
</div>
|
||
<div class="org-box">
|
||
<div class="org-box-value">{{form.org.director}}</div>
|
||
<div class="org-box-label">总监</div>
|
||
</div>
|
||
<div class="org-box">
|
||
<div class="org-box-value">{{form.org.fullTime}}</div>
|
||
<div class="org-box-label">专职</div>
|
||
</div>
|
||
</div>
|
||
<div class="org-row1">
|
||
<i></i>
|
||
<div class="row1-inner">
|
||
<div class="row1-tit">分支机构</div>
|
||
<div class="row1-inner-children">
|
||
<p><span>总监</span><span>{{form.org.branchDirector}}</span></p>
|
||
<p><span>专职</span><span>{{form.org.branchFullTime}}</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="org-row1">
|
||
<i></i>
|
||
<div class="row1-inner">
|
||
<div class="row1-tit">注安师</div>
|
||
<div class="row1-inner-children">
|
||
<p><span>在岗职业</span><span>{{form.org.attentionSafetyEngineer}}</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="org-row1">
|
||
<i></i>
|
||
<div class="row1-inner">
|
||
<div class="row1-tit">项目人数</div>
|
||
<div class="row1-inner-children">
|
||
<p><span>总监</span><span>{{form.org.projectDirector}}</span></p>
|
||
<p><span>在职</span><span>{{form.org.projectFullTime}}</span></p>
|
||
<p><span>安全监护</span><span>{{form.org.projectSafetyMonitoring}}</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="org-row1">
|
||
<i></i>
|
||
<div class="row1-inner">
|
||
<div class="row1-tit">三类人员</div>
|
||
<div class="row1-inner-children">
|
||
<p><span>A证</span><span>{{form.org.aCard}}</span></p>
|
||
<p><span>B证</span><span>{{form.org.bCard}}</span></p>
|
||
<p><span>C证</span><span>{{form.org.cCard}}</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 预警警报 -->
|
||
<div id="Early" class="block" style="height: 1.725rem;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: 1.725rem;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.675rem;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">
|
||
<div class="map">
|
||
<div class="project-box" style="margin-top: 0.25rem;">
|
||
<div class="p-item">
|
||
<i></i>
|
||
<div class="p-row">
|
||
<h6>在建项目</h6>
|
||
<p><span>{{form.projectInfo.projectsUnderConstruction}}</span><span>项</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="p-item">
|
||
<i></i>
|
||
<div class="p-row">
|
||
<h6>停工项目</h6>
|
||
<p><span>{{form.projectInfo.shutdownProject}}</span><span>项</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="p-item">
|
||
<i></i>
|
||
<div class="p-row">
|
||
<h6>参建人数</h6>
|
||
<p><span>{{form.projectInfo.participateInNum}}</span><span>项</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="p-item">
|
||
<i></i>
|
||
<div class="p-row">
|
||
<h6>在施危大工程</h6>
|
||
<p><span>{{form.projectInfo.dangerousProject}}</span><span>项</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mapandvideo">
|
||
<div id="ChinaMap"></div>
|
||
<div id="video">
|
||
<div class="v-tit">安全云监控</div>
|
||
<div class="v-player">
|
||
|
||
</div>
|
||
<p><span>实时视频：线路1</span> <span>2020-10-10 12:40:26</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 危大工程管控数据 -->
|
||
<div id="wd" class="block4" style="height: 1.425rem;">
|
||
<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.225rem;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.hsseEduTrain.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: {// 组织机构人员数据
|
||
groupSum: 0, // 企业总部人数
|
||
director: 0, // 企业总监
|
||
fullTime: 0, // 企业专职
|
||
branchSum: 0, // 分支结构人数
|
||
branchDirector: 0, // 分支机构总监
|
||
branchFullTime: 0, // 分支机构专职
|
||
attentionSafetyEngineer: 0, // 注安师在岗职业
|
||
projectSum: 0, //项目人数
|
||
projectDirector: 0, // 项目总监
|
||
projectFullTime: 0, // 项目专职
|
||
projectSafetyMonitoring: 0, // 项目安全监护
|
||
aCard: 0, // A证人数
|
||
bCard: 0, // B证人数
|
||
cCard: 0, // C证人数
|
||
},
|
||
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:
|
||
{//项目数据
|
||
projectsUnderConstruction: 0,//在建项目
|
||
shutdownProject: 0,//停工项目
|
||
participateInNum: 0,//参建人数
|
||
dangerousProject: 0,//在施危大工程
|
||
},
|
||
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,//校准合格
|
||
},
|
||
},
|
||
// 当前时间显示
|
||
nowTime: '09:00:12',
|
||
// 中国地图数据点
|
||
chinaData: []
|
||
}
|
||
},
|
||
mounted() {
|
||
// 组件挂载后执行的操作
|
||
this.show = true; // 显示内容
|
||
this.loadData(); // 加载数据
|
||
this.createChinaMap();
|
||
this.createMap1();
|
||
this.createMap2();
|
||
this.startTimer(); //启动时间定时器
|
||
},
|
||
methods: {
|
||
// 从后台加载HSSE数据
|
||
loadData() {
|
||
const that = this;
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "main.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 }; // 更新表单数据
|
||
that.chinaData = [...response.d.data.chinaData]; // 更新地图数据
|
||
//console.log("111111111",that.chinaData);
|
||
that.createChinaMap(that.chinaData); // 重新创建地图
|
||
} 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秒
|
||
},
|
||
// 切换主导航菜单
|
||
onSwitchMenu(idx) {
|
||
this.nav_idx = idx; // 更新导航索引
|
||
},
|
||
// 切换管理菜单
|
||
onSwitchManage(idx) {
|
||
this.manage_idx = idx; // 更新管理菜单索引
|
||
},
|
||
// 刷新数据
|
||
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();
|
||
}
|
||
},
|
||
// 创建中国地图
|
||
createChinaMap(data) {
|
||
//console.log("地图数据", data);
|
||
if (!this.chainaMap) {
|
||
this.chainaMap = echarts.init(document.getElementById('ChinaMap'));
|
||
}
|
||
// 中国地图 配置
|
||
echarts.registerMap('china', chinaJson);
|
||
let chinaOption = {
|
||
geo: [
|
||
{
|
||
// 地理坐标系组件
|
||
map: "china",
|
||
roam: false, // 可以缩放和平移
|
||
aspectScale: 0.85, // 比例
|
||
top: 100,
|
||
zlevel: 2,
|
||
zoom: 1.4,
|
||
label: {
|
||
show: false
|
||
},
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
// 隐藏地图
|
||
normal: {
|
||
opacity: 0, // 为 0 时不绘制该图形
|
||
}
|
||
},
|
||
label: {
|
||
show: false // 隐藏文字
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 图形上的地图区域
|
||
normal: {
|
||
areaColor: "#07121B",
|
||
borderColor: "#07121B",
|
||
}
|
||
},
|
||
emphasis: {
|
||
disabled: true,
|
||
}
|
||
},
|
||
{
|
||
// 地理坐标系组件
|
||
map: "china",
|
||
roam: false, // 可以缩放和平移
|
||
aspectScale: 0.85, // 比例
|
||
top: 90,
|
||
zlevel: 9,
|
||
zoom: 1.4,
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
// 隐藏地图
|
||
normal: {
|
||
opacity: 0, // 为 0 时不绘制该图形
|
||
}
|
||
},
|
||
label: {
|
||
show: false // 隐藏文字
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 图形上的地图区域
|
||
normal: {
|
||
areaColor: "#076393",
|
||
borderColor: "#076393",
|
||
}
|
||
},
|
||
emphasis: {
|
||
disabled: true,
|
||
}
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||
borderColor: '#fff',
|
||
borderWidth: 1,
|
||
padding: 10,
|
||
formatter: function (params) {
|
||
//console.log("地图数据明细", params)
|
||
// 自定义 tooltip 内容
|
||
if (params.seriesType === 'effectScatter') {
|
||
return `<div style="color: white;">
|
||
<p><strong>${params.name}</strong></p>
|
||
<p>项目地址: ${params.data.address}</p>
|
||
</div>`;
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
// 地理坐标系组件
|
||
type: 'map',
|
||
map: "china",
|
||
roam: false, // 可以缩放和平移
|
||
aspectScale: 0.85, // 比例
|
||
top: 80,
|
||
zlevel: 12,
|
||
zoom: 1.4,
|
||
data: data,
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
label: {
|
||
show: false // 隐藏文字
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 图形上的地图区域
|
||
normal: {
|
||
borderWidth: 1,
|
||
areaColor: "rgba(0, 221, 255, .8)",
|
||
borderColor: "RGBA(27, 225, 255, 1)",
|
||
}
|
||
},
|
||
emphasis: {
|
||
disabled: true,
|
||
}
|
||
},
|
||
{
|
||
name: '散点',
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
data: data,
|
||
zlevel: 14,
|
||
symbolSize: 10,
|
||
showEffectOn: 'render',
|
||
rippleEffect: {
|
||
brushType: 'stroke'
|
||
},
|
||
hoverAnimation: true,
|
||
label: {
|
||
formatter: '{b}',
|
||
position: 'right',
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
color: '#FBE795'
|
||
}
|
||
}
|
||
],
|
||
}
|
||
this.chainaMap.setOption(chinaOption);
|
||
this.chainaMap.on('click', function (params) {
|
||
// 控制台打印点击的地区名称
|
||
//if (params.seriesType == 'effectScatter') {
|
||
// alert('点击了' + params.name);
|
||
//}
|
||
// 你可以在这里添加你的逻辑代码
|
||
});
|
||
},
|
||
/**
|
||
*
|
||
* @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> |