901 lines
45 KiB
Plaintext
901 lines
45 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainnew.aspx.cs" Inherits="FineUIPro.Web.common.mainnew" Async="true" %>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head runat="server">
|
||
<%--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>--%>
|
||
<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/home/css/common.css"/>
|
||
<link rel="stylesheet" href="../res/home/css/index.css"/>
|
||
<script src="../res/assets/js/jquery-3.7.1.min.js"></script>
|
||
<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: 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">
|
||
<div class="early-box">
|
||
<div class="early-box-laber">问题</div>
|
||
<div class="early-box-value">75454<span>项</span></div>
|
||
</div>
|
||
<div class="early-box">
|
||
<div class="early-box-laber">未完成</div>
|
||
<div class="early-box-value">0<span>项</span></div>
|
||
</div>
|
||
<div class="early-box">
|
||
<div class="early-box-laber">整改闭环</div>
|
||
<div class="early-box-value">0<span>项</span></div>
|
||
</div>
|
||
<div class="early-box">
|
||
<div class="early-box-laber">整改率</div>
|
||
<div class="early-box-value">0<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">6</div>
|
||
</div>
|
||
</div>
|
||
<div class="box">
|
||
<i></i>
|
||
<div class="box-row">
|
||
<div class="box-row-label">重大风险</div>
|
||
<div class="box-row-value">6</div>
|
||
</div>
|
||
</div>
|
||
<div class="box">
|
||
<i></i>
|
||
<div class="box-row">
|
||
<div class="box-row-label">重大风险</div>
|
||
<div class="box-row-value">6</div>
|
||
</div>
|
||
</div>
|
||
<div class="box">
|
||
<i></i>
|
||
<div class="box-row">
|
||
<div class="box-row-label">重大风险</div>
|
||
<div class="box-row-value">6</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>10</span><span>亿元</span></div>
|
||
</div>
|
||
<div class="r-row">
|
||
<div class="r-row-label">费用使用</div>
|
||
<div class="r-row-value"><span>10</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>10</span><span>个</span></div>
|
||
</div>
|
||
<div class="r-row">
|
||
<div class="r-row-label">特种设备</div>
|
||
<div class="r-row-value"><span>10</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>10</span><span>个</span></div>
|
||
</div>
|
||
<div class="r-row">
|
||
<div class="r-row-label">周例会</div>
|
||
<div class="r-row-value"><span>10</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>937</span><span>项</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="p-item">
|
||
<i></i>
|
||
<div class="p-row">
|
||
<h6>停工项目</h6>
|
||
<p><span>937</span><span>项</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="p-item">
|
||
<i></i>
|
||
<div class="p-row">
|
||
<h6>参建人数</h6>
|
||
<p><span>937</span><span>项</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="p-item">
|
||
<i></i>
|
||
<div class="p-row">
|
||
<h6>在施危大工程</h6>
|
||
<p><span>937</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>2131</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>2131</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>2131</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>2131</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>2131</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>59</span><span>项</span></p>
|
||
</div>
|
||
<div class="yjgl-row">
|
||
<i></i>
|
||
<h6>专项预案</h6>
|
||
<p><span>59</span><span>项</span></p>
|
||
</div>
|
||
<div class="yjgl-row">
|
||
<i></i>
|
||
<h6>现场处置</h6>
|
||
<p><span>59</span><span>项</span></p>
|
||
</div>
|
||
<div class="yjgl-row">
|
||
<i></i>
|
||
<h6>演练次数</h6>
|
||
<p><span>59</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>389</span><span>个</span></p>
|
||
</div>
|
||
<div class="gc-box">
|
||
<i></i>
|
||
<h6><span>分部工程数</span></h6>
|
||
<p><span>389</span><span>个</span></p>
|
||
</div>
|
||
<div class="gc-box">
|
||
<i></i>
|
||
<h6><span>分项工程数</span></h6>
|
||
<p><span>389</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>254</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>254</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">
|
||
<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>10</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>10</span><span>次</span>
|
||
</div>
|
||
</div>
|
||
<i></i>
|
||
</div>
|
||
</div>
|
||
<div class="box1"></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>10</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>10</span><span>次</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</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>102</span><span>台套</span></p>
|
||
<div class="row">
|
||
<h6>合格率</h6>
|
||
<div class="bar">
|
||
<div style="width: 80%;" class="bar-inner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="byjl-item">
|
||
<i></i>
|
||
<h6>机具报验数</h6>
|
||
<p><span>102</span><span>台套</span></p>
|
||
<div class="row">
|
||
<h6>合格率</h6>
|
||
<div class="bar">
|
||
<div style="width: 40%;" class="bar-inner"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="byjl-item">
|
||
<i></i>
|
||
<h6>人员报验数</h6>
|
||
<p><span>102</span><span>人次</span></p>
|
||
<div class="row">
|
||
<h6>合格率</h6>
|
||
<div class="bar">
|
||
<div style="width: 36%;" 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>394</span><span>个</span></p>
|
||
</div>
|
||
<div class="sgfa-item">
|
||
<i></i>
|
||
<h6>项目审批数</h6>
|
||
<p><span>394</span><span>个</span></p>
|
||
</div>
|
||
<div class="sgfa-item">
|
||
<i></i>
|
||
<h6>企业审批数</h6>
|
||
<p><span>394</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>12</p>
|
||
</div>
|
||
<div class="xkz-box">
|
||
<i></i>
|
||
<h6>许可证</h6>
|
||
<p>12</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>3672</span><span>台</span></p>
|
||
</div>
|
||
</div>
|
||
<i></i>
|
||
<div class="jlqj-box">
|
||
<i></i>
|
||
<div class="jlqj-item">
|
||
<h6>校验合格</h6>
|
||
<p><span>3672</span><span>台</span></p>
|
||
</div>
|
||
</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>
|
||
new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
// 控制显示状态
|
||
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,//车辆冲洗监测
|
||
},
|
||
education: { // 教育培训和安全工时数据
|
||
safeWorkingHours: 0, // 安全工时数
|
||
specialTraining: 0, // 专项培训次数
|
||
SafetyEducation3: 0, // 三级安全教育培训次数
|
||
specializedTraining: 0, // 特种作业培训次数
|
||
safetyTechnicalBriefing: 0, // 安全技术交底次数
|
||
},
|
||
safetyHazard: { // 安全隐患排查治理数据
|
||
// 集团级
|
||
orgHazard: 0, // 集团安全隐患数量
|
||
orgIncomplete: 0, // 集团未完成数量
|
||
orgClosedLoop: 0, // 集团整改闭环数量
|
||
orgRectificationRate: 0, // 集团整改率
|
||
// 分支机构级
|
||
branchHazard: 0, // 分支机构安全隐患数量
|
||
branchIncomplete: 0, // 分支机构未完成数量
|
||
branchClosedLoop: 0, // 分支机构整改闭环数量
|
||
branchRectificationRate: 0, // 分支机构整改率
|
||
// 企业级
|
||
enterpriseHazard: 0, // 企业安全隐患数量
|
||
enterpriseIncomplete: 0, // 企业未完成数量
|
||
enterpriseClosedLoop: 0, // 企业整改闭环数量
|
||
enterpriseRectificationRate: 0, // 企业整改率
|
||
// 项目级
|
||
projectHazard: 0, // 项目安全隐患数量
|
||
projectIncomplete: 0, // 项目未完成数量
|
||
projectClosedLoop: 0, // 项目整改闭环数量
|
||
projectRectificationRate: 0, // 项目整改率
|
||
},
|
||
costEquipment: { // 费用及机具数据
|
||
expenseExtraction: 0, // 费用提取金额(亿元)
|
||
costUtilization: 0, // 费用使用金额(亿元)
|
||
usingNumbers: 0, // 在用机具个数
|
||
specialEquipment: 0, // 特种设备数量
|
||
},
|
||
projectInfo: { // 项目概况信息
|
||
projectsUnderConstruction: 0, // 在建项目数量
|
||
shutdownProject: 0, // 停工项目数量
|
||
participateInNum: 0, // 参建人数
|
||
dangerousProject: 0, // 在施危大工程数量
|
||
},
|
||
dangerousProject: { // 危大工程管控数据
|
||
approvalCompleted: 0, // 审批完成个数
|
||
construction: 0, // 施工个数
|
||
training: 0, // 培训人次数
|
||
completed: 0, // 完工个数
|
||
reasoning: 0, // 论证个数
|
||
},
|
||
riskClassification: { // 风险分级管控数据
|
||
major: 0, // 重大风险数量
|
||
larger: 0, // 较大风险数量
|
||
general: 0, // 一般风险数量
|
||
low: 0, // 低风险数量
|
||
},
|
||
highRisk: { // 高风险作业许可数据
|
||
closeItem: 0, // 关闭项数量
|
||
licenseItem: 0, // 许可项数量
|
||
},
|
||
meetAnEmergency: { // 应急管理数据
|
||
comprehensive: 0, // 综合预案数量
|
||
special: 0, // 专项预案数量
|
||
scene: 0, // 现场处置数量
|
||
drill: 0, // 演练次数
|
||
}
|
||
},
|
||
// 当前时间显示
|
||
nowTime: '09:00:12',
|
||
// 中国地图数据点
|
||
chinaData: []
|
||
}
|
||
},
|
||
mounted() {
|
||
// 组件挂载后执行的操作
|
||
this.show = true; // 显示内容
|
||
this.loadData(); // 加载数据
|
||
this.startTimer(); // 启动时间定时器
|
||
this.createMap();
|
||
},
|
||
methods: {
|
||
// 从后台加载HSSE数据
|
||
loadData() {
|
||
const that = this;
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "main_Hsse.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(that.chinaData);
|
||
that.createMap(); // 重新创建地图
|
||
} 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(); // 重新加载数据
|
||
},
|
||
// 创建中国地图
|
||
createMap() {
|
||
let that = this;
|
||
|
||
// 中国地图配置
|
||
let chinaOption = {
|
||
geo: [
|
||
{
|
||
// 地理坐标系组件 - 底图层
|
||
map: "china",
|
||
roam: false, // 禁止缩放和平移
|
||
aspectScale: 0.85, // 比例
|
||
top: 140, // 顶部距离
|
||
zlevel: 2, // 图层级别
|
||
zoom: 1.4, // 缩放比例
|
||
tooltip: {
|
||
show: false, // 不显示默认提示框
|
||
backgroundColor: "#031849", // 提示框背景色
|
||
borderColor: '#031849', // 提示框边框颜色
|
||
formatter: function (h) {
|
||
// 自定义提示框内容格式化
|
||
console.log(h);
|
||
let html = `<div style="z-index:99999999;">
|
||
<p><span>【项目名称】：</span>山东裕龙石化有限公司裕龙岛炼化一体化项目(一期)</p>
|
||
<p><span>【开工时间】：</span>2022-1-30</p>
|
||
<p><span>【竣工时间】：</span>2023-12-30</p>
|
||
<p><span>【项目地址】：</span>山东烟台龙门市</p>
|
||
</div>`;
|
||
return html;
|
||
},
|
||
},
|
||
label: {
|
||
show: false // 不显示标签
|
||
},
|
||
regions: [
|
||
{
|
||
name: "南海诸岛", // 南海诸岛区域特殊处理
|
||
itemStyle: {
|
||
// 隐藏南海诸岛区域
|
||
normal: {
|
||
opacity: 0, // 不绘制该区域
|
||
}
|
||
},
|
||
label: {
|
||
show: false // 隐藏文字标签
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 地图区域样式
|
||
normal: {
|
||
areaColor: "#07121B", // 区域颜色
|
||
borderColor: "#07121B", // 边界颜色
|
||
}
|
||
},
|
||
emphasis: {
|
||
disabled: true, // 禁用高亮效果
|
||
}
|
||
},
|
||
{
|
||
// 地理坐标系组件 - 中间层
|
||
map: "china",
|
||
roam: false,
|
||
aspectScale: 0.85,
|
||
top: 130,
|
||
zlevel: 9,
|
||
zoom: 1.4,
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
normal: {
|
||
opacity: 0,
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: "#076393",
|
||
borderColor: "#076393",
|
||
}
|
||
},
|
||
emphasis: {
|
||
disabled: true,
|
||
}
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
// 数据层 - 显示各省份数据
|
||
type: 'map',
|
||
map: "china",
|
||
roam: false,
|
||
aspectScale: 0.85,
|
||
top: 120,
|
||
zlevel: 12,
|
||
zoom: 1.4,
|
||
data: that.chinaData, // 使用后台获取的数据
|
||
label: {
|
||
color: "#ffffff", // 标签文字颜色
|
||
show: true, // 显示标签
|
||
formatter: function (h) {
|
||
// 标签文字格式化
|
||
console.log(h);
|
||
if (h.value && !isNaN(h.value)) {
|
||
return h.value; // 显示数值
|
||
} else {
|
||
return ''; // 无数值时不显示
|
||
}
|
||
}
|
||
},
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
label: {
|
||
show: false // 隐藏南海诸岛文字
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 地图区域样式
|
||
normal: {
|
||
borderWidth: 1, // 边界宽度
|
||
areaColor: "rgba(0, 221, 255, .8)", // 区域颜色
|
||
borderColor: "RGBA(27, 225, 255, 1)", // 边界颜色
|
||
}
|
||
},
|
||
emphasis: {
|
||
disabled: true, // 禁用高亮效果
|
||
}
|
||
},
|
||
],
|
||
};
|
||
|
||
// 注册中国地图JSON数据
|
||
echarts.registerMap('china', chinaJson);
|
||
// 初始化地图
|
||
let chinaChart = echarts.init(document.getElementById('map'));
|
||
// 设置地图选项
|
||
chinaChart.setOption(chinaOption);
|
||
// 地图点击事件
|
||
chinaChart.on('click', function (params) {
|
||
// 点击散点时触发
|
||
if (params.seriesType == 'effectScatter') {
|
||
alert('点击了' + params.name);
|
||
}
|
||
// 可以在这里添加其他点击逻辑
|
||
});
|
||
}
|
||
}
|
||
})
|
||
</script> |