714 lines
34 KiB
Plaintext
714 lines
34 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainProject.aspx.cs" Inherits="FineUIPro.Web.common.mainProject" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head id="Head1" runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no" />
|
|||
|
|
<title>首页</title>
|
|||
|
|
<link rel="stylesheet" href="../res/indexv1/iconfont/iconfont.css" />
|
|||
|
|
<link rel="stylesheet" href="../res/indexv1/css/video-7.15.0.min.css" />
|
|||
|
|
<link rel="stylesheet" href="../res/indexv1/css/index2.css" />
|
|||
|
|
<style type="text/css">
|
|||
|
|
html {
|
|||
|
|
min-height: auto;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style type="text/css">
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="sd-index2-body">
|
|||
|
|
<div class="sd-body2">
|
|||
|
|
<div class="sd-body2-left">
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">安全统计</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section1-inner">
|
|||
|
|
<div class="sd-security">
|
|||
|
|
<div class="sd-security-label">安全人工时</div>
|
|||
|
|
<div class="sd-security-value" runat="server" id="divSafeWorkTime"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-calc">
|
|||
|
|
<div class="sd-security-menus-label">安全隐患整改单</div>
|
|||
|
|
<div class="sd-security-menus">
|
|||
|
|
<div class="sd-security-menu">
|
|||
|
|
<div class="sd-security-menu-img">
|
|||
|
|
<div class="sd-security-menu-value" runat="server" id="divAllRectify">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-menu-name">总数（个）</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-menu">
|
|||
|
|
<div class="sd-security-menu-img">
|
|||
|
|
<div class="sd-security-menu-value" runat="server" id="divCRectify">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-menu-name">已完成（个）</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-menu">
|
|||
|
|
<div class="sd-security-menu-img">
|
|||
|
|
<div class="sd-security-menu-value" runat="server" id="divUCRectify">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-menu-name">未完成（个）</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">预警信息</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section2-inner">
|
|||
|
|
<div class="sd-warning-list">
|
|||
|
|
<div class="sd-warning-item">
|
|||
|
|
<div class="sd-warning-item-inner">
|
|||
|
|
<div class="sd-warning-icon"></div>
|
|||
|
|
<div class="sd-warning-con">
|
|||
|
|
<div class="sd-warning-value" runat="server" id="divQualityWarningNum">0</div>
|
|||
|
|
<div class="sd-warning-name">资质预警</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-warning-item">
|
|||
|
|
<div class="sd-warning-item-inner">
|
|||
|
|
<div class="sd-warning-icon"></div>
|
|||
|
|
<div class="sd-warning-con">
|
|||
|
|
<div class="sd-warning-value" runat="server" id="divWorkWarningNum">0</div>
|
|||
|
|
<div class="sd-warning-name">证书预警</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-warning-item">
|
|||
|
|
<div class="sd-warning-item-inner">
|
|||
|
|
<div class="sd-warning-icon"></div>
|
|||
|
|
<div class="sd-warning-con">
|
|||
|
|
<div class="sd-warning-value" runat="server" id="divMechanicsWarningNum">0</div>
|
|||
|
|
<div class="sd-warning-name">机械预警</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-warning-item">
|
|||
|
|
<div class="sd-warning-item-inner">
|
|||
|
|
<div class="sd-warning-icon"></div>
|
|||
|
|
<div class="sd-warning-con">
|
|||
|
|
<div class="sd-warning-value" runat="server" id="divCQMSWarningNum">0</div>
|
|||
|
|
<div class="sd-warning-name">质量预警</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">产值统计</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section3-inner">
|
|||
|
|
<div class="sd-output" id="outputId"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body2-center">
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">工程概况</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section4-inner">
|
|||
|
|
<div class="sd-project">
|
|||
|
|
<div class="sd-project-info">
|
|||
|
|
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divProjectNameT">
|
|||
|
|
<span class="sd-project-info-val">工程名称:</span>
|
|||
|
|
<span class="sd-project-info-val ellipsis" runat="server" id="divProjectName"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divProjectAddressT">
|
|||
|
|
<span class="sd-project-info-val">工程地点:</span>
|
|||
|
|
<span class="sd-project-info-val ellipsis" runat="server" id="divProjectAddress"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divProjectMoneyT">
|
|||
|
|
<span class="sd-project-info-val">工程造价:</span>
|
|||
|
|
<span class="sd-project-info-val ellipsis" runat="server" id="divProjectMoney"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divOwnUnitT">
|
|||
|
|
<span class="sd-project-info-val">建设单位:</span>
|
|||
|
|
<span class="sd-project-info-val ellipsis" runat="server" id="divOwnUnit"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divSGUnitT">
|
|||
|
|
<span class="sd-project-info-val">施工单位:</span>
|
|||
|
|
<span class="sd-project-info-val ellipsis" runat="server" id="divSGUnit"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-info-item ellipsis" style="cursor: pointer" runat="server" id="divJLUnitT">
|
|||
|
|
<span class="sd-project-info-val">监理单位:</span>
|
|||
|
|
<span class="sd-project-info-val ellipsis" runat="server" id="divJLUnit"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-imgs">
|
|||
|
|
<div class="sd-project-img" id="divProjectImg"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-cards">
|
|||
|
|
<div class="sd-project-card">
|
|||
|
|
合同总工期<div class="sd-project-card-value" runat="server" id="divProjectDays">---</div>
|
|||
|
|
<span class="sd-project-card-unit">天</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-card">
|
|||
|
|
合同到期时间<div class="sd-project-card-value" runat="server" id="divEndDate">---</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-project-card">
|
|||
|
|
距竣工剩余<div class="sd-project-card-value" runat="server" id="divRemainingDays">---</div>
|
|||
|
|
<span class="sd-project-card-unit">天</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">质量统计</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section5-inner">
|
|||
|
|
<div class="sd-quality-items">
|
|||
|
|
<div class="sd-quality-item">
|
|||
|
|
<div class="sd-quality-item-title">
|
|||
|
|
问题总数<span class="sd-quality-value" runat="server" id="divCQMSAllNum">0</span><span class="sd-quality-unit">个</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-canvas">
|
|||
|
|
<div class="sd-quality-canvas-inner">
|
|||
|
|
<canvas data-value="0" id="qualityCanvas1" width='100%' height='100%'></canvas>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-canvas-name">整改率</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-item">
|
|||
|
|
<div class="sd-quality-item-title">
|
|||
|
|
已完成<span class="sd-quality-value" runat="server" id="divCQMSCAllNum">0</span><span class="sd-quality-unit">个</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-canvas">
|
|||
|
|
<div class="sd-quality-canvas-inner">
|
|||
|
|
<canvas data-value="0" id="qualityCanvas2" width='100%' height='100%'></canvas>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-canvas-name">合格率</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-item">
|
|||
|
|
<div class="sd-quality-item-title">
|
|||
|
|
未完成<span class="sd-quality-value" runat="server" id="divCQMSUCAllNum">0</span><span class="sd-quality-unit">个</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-canvas">
|
|||
|
|
<div class="sd-quality-canvas-inner">
|
|||
|
|
<canvas data-value="0" id="qualityCanvas3" width='100%' height='100%'></canvas>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-canvas-name">焊接一次合格率</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">智慧进度</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section6-inner">
|
|||
|
|
<div class="sd-progress-delay">
|
|||
|
|
项目进度计划<span>已逾期32天</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-list">
|
|||
|
|
<div class="sd-progress-item active">
|
|||
|
|
<div class="sd-progress-info">
|
|||
|
|
<div>开始：2020-08-08</div>
|
|||
|
|
<div>结束：2021-01-01</div>
|
|||
|
|
<div>无逾期</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-name">基础施工</div>
|
|||
|
|
<div class="sd-progress-img"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-item active">
|
|||
|
|
<div class="sd-progress-info">
|
|||
|
|
<div>开始：2020-08-08</div>
|
|||
|
|
<div>结束：2021-01-01</div>
|
|||
|
|
<div>无逾期</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-name">结构施工</div>
|
|||
|
|
<div class="sd-progress-img"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-item active">
|
|||
|
|
<div class="sd-progress-info">
|
|||
|
|
<div>开始：2020-08-08</div>
|
|||
|
|
<div>结束：2021-01-01</div>
|
|||
|
|
<div>无逾期</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-name">主体施工</div>
|
|||
|
|
<div class="sd-progress-img"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-item active">
|
|||
|
|
<div class="sd-progress-info">
|
|||
|
|
<div>开始：2020-08-08</div>
|
|||
|
|
<div>结束：2021-01-01</div>
|
|||
|
|
<div class="sd-progress-warn">已逾期20天</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-name">装饰装修</div>
|
|||
|
|
<div class="sd-progress-img"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-item">
|
|||
|
|
<div class="sd-progress-info">
|
|||
|
|
<div>预估：2020-12-12</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-name">机电工程</div>
|
|||
|
|
<div class="sd-progress-img"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-item">
|
|||
|
|
<div class="sd-progress-info">
|
|||
|
|
<div>预估：2020-12-30</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-name">验收</div>
|
|||
|
|
<div class="sd-progress-img"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-item">
|
|||
|
|
<div class="sd-progress-info">
|
|||
|
|
<div>预估：2021-01-01</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-name">完工</div>
|
|||
|
|
<div class="sd-progress-img"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-progress-bar">
|
|||
|
|
<div class="sd-progress-bar-inner" id="js-progress-bar"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body2-right">
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">劳务数据</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section7-inner">
|
|||
|
|
<div class="sd-labor-data-list">
|
|||
|
|
<div class="sd-labor-data-item">
|
|||
|
|
<div class="sd-labor-name">目前现场人数</div>
|
|||
|
|
<div class="sd-labor-value" runat="server" id="divALLPerson">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-labor-data-item">
|
|||
|
|
<div class="sd-labor-name">作业人员总数</div>
|
|||
|
|
<div class="sd-labor-value" runat="server" id="divZYPerson">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-labor-data-item">
|
|||
|
|
<div class="sd-labor-name">管理人员总数</div>
|
|||
|
|
<div class="sd-labor-value" runat="server" id="divGLPerson">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-labor-echart">
|
|||
|
|
<div class="sd-labor-echart-box" id="laborId"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">视频监控</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section8-inner">
|
|||
|
|
<div class="sd-video-play">
|
|||
|
|
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
|||
|
|
<source src="https://c.sedin.com/sggl/FileUpload/HazardRegister/2021-08/9c174c0e-8beb-4b41-858b-4b29f66bde97.mp4">
|
|||
|
|
</source>
|
|||
|
|
</video>
|
|||
|
|
<div class="sd-video-desc">
|
|||
|
|
<span>实时线路：线路1</span>
|
|||
|
|
<span>2020-10-10 12:40:26</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-video-items">
|
|||
|
|
<div class="sd-video-item">
|
|||
|
|
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
|||
|
|
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
|
|||
|
|
</source>
|
|||
|
|
</video>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-video-item">
|
|||
|
|
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
|||
|
|
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
|
|||
|
|
</source>
|
|||
|
|
</video>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-video-item">
|
|||
|
|
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
|||
|
|
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
|
|||
|
|
</source>
|
|||
|
|
</video>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-video-item">
|
|||
|
|
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
|||
|
|
<source src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
|
|||
|
|
</source>
|
|||
|
|
</video>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">环境监测</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section9-inner">
|
|||
|
|
<div class="sd-environment">
|
|||
|
|
<ul>
|
|||
|
|
<li runat="server" id="divHJ1">0</li>
|
|||
|
|
<li runat="server" id="divHJ2">0</li>
|
|||
|
|
<li runat="server" id="divHJ3">0</li>
|
|||
|
|
<li runat="server" id="divHJ4">0</li>
|
|||
|
|
<li runat="server" id="divHJ5">0</li>
|
|||
|
|
<li runat="server" id="divHJ6">0</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="sd-today-weather">
|
|||
|
|
<div class="sd-weather-img sd-weather-img--duoyun"></div>
|
|||
|
|
<div class="sd-weather-value" runat="server" id="divTEMP">0<span>°C</span></div>
|
|||
|
|
<div class="sd-weather-name" runat="server" id="divInfo">多云</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/jquery-2.1.1.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/echarts-5.2.0.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/video-7.15.0.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/draw-circle.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var cRectificationRate = '<%=CRectificationRate %>'
|
|||
|
|
var cQualifiedRate = '<%=CQualifiedRate %>'
|
|||
|
|
var firstPassRate = '<%=FirstPassRate %>'
|
|||
|
|
function getValues() {
|
|||
|
|
$('#qualityCanvas1').attr('data-value', cRectificationRate);
|
|||
|
|
$('#qualityCanvas2').attr('data-value', cQualifiedRate);
|
|||
|
|
$('#qualityCanvas3').attr('data-value', firstPassRate);
|
|||
|
|
}
|
|||
|
|
getValues();
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var divProjectNameTitle = '<%=divProjectNameTitle %>'
|
|||
|
|
var divProjectAddressTitle = '<%=divProjectAddressTitle %>'
|
|||
|
|
var divProjectMoneyTitle = '<%=divProjectMoneyTitle %>'
|
|||
|
|
var divOwnUnitTitle = '<%=divOwnUnitTitle %>'
|
|||
|
|
var divSGUnitTitle = '<%=divSGUnitTitle %>'
|
|||
|
|
var divJLUnitTitle = '<%=divJLUnitTitle %>'
|
|||
|
|
var divProjectImg = '<%=divProjectImg %>'
|
|||
|
|
function getUnitValues() {
|
|||
|
|
$('#divProjectNameT').attr('title', divProjectNameTitle);
|
|||
|
|
$('#divProjectAddressT').attr('title', divProjectAddressTitle);
|
|||
|
|
$('#divProjectMoneyT').attr('title', divProjectMoneyTitle);
|
|||
|
|
$('#divOwnUnitT').attr('title', divOwnUnitTitle);
|
|||
|
|
$('#divSGUnitT').attr('title', divSGUnitTitle);
|
|||
|
|
$('#divJLUnitT').attr('title', divJLUnitTitle);
|
|||
|
|
$(".sd-project-img").css("background-image", "url('" + divProjectImg + "')");
|
|||
|
|
}
|
|||
|
|
getUnitValues();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function initOutPutEchart() {
|
|||
|
|
var chartDom = document.getElementById('outputId');
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
var dataSubUnitNames = JSON.parse('<%=SubUnitNames %>')
|
|||
|
|
var dataOutputValues = JSON.parse('<%=OutputValues %>')
|
|||
|
|
var option;
|
|||
|
|
option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: '10%',
|
|||
|
|
left: '8%',
|
|||
|
|
right: '8%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
data: dataSubUnitNames,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
interval: 0
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
onZero: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
width: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
boundaryGap: false
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
onZero: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
width: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed',
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitNumber: 5,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'line',
|
|||
|
|
color: '#1ab1ff', //线条颜色
|
|||
|
|
smooth: true, //线条平滑
|
|||
|
|
data: dataOutputValues,
|
|||
|
|
areaStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0, color: '#0d6692' // 100% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1, color: '#03193d' // 0% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: { show: true, color: '#1ab1ff' }, //顶部显示数值
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
boundaryGap: false,
|
|||
|
|
}
|
|||
|
|
if (dataSubUnitNames.length > 5) {
|
|||
|
|
option.dataZoom = [{
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 4,
|
|||
|
|
height: '3',
|
|||
|
|
backgroundColor: 'rgba(47,69,84,0)',
|
|||
|
|
fillerColor: 'rgba(47,69,84,0)',
|
|||
|
|
bottom: '0%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true,
|
|||
|
|
showDetail: false,
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initQualityCanvas() {
|
|||
|
|
drawCircle({
|
|||
|
|
drawing_elem: 'qualityCanvas1',
|
|||
|
|
percentfontcolor: "#ce8306",
|
|||
|
|
unitfontcolor: "#ce8306",
|
|||
|
|
unitfontsize: 11,
|
|||
|
|
lineGap: 'round',
|
|||
|
|
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "#03344C" }],
|
|||
|
|
forecolor: [{ step: 0, color: "#ce8306" }, { step: 0.4, color: "#ce8306" }, { step: 1, color: "rgba(255,166,0,0.05)" }],
|
|||
|
|
rad: Math.PI * 2 * (3 / 4) / 100,
|
|||
|
|
radStart: Math.PI * (3 / 4),
|
|||
|
|
radEnd: Math.PI * (2 + (1 / 4)),
|
|||
|
|
radDrawStart: Math.PI * (3 / 4),
|
|||
|
|
unitadd: 1,
|
|||
|
|
});
|
|||
|
|
drawCircle({
|
|||
|
|
drawing_elem: 'qualityCanvas2',
|
|||
|
|
percentfontcolor: "#12cda2",
|
|||
|
|
unitfontcolor: "#12cda2",
|
|||
|
|
unitfontsize: 11,
|
|||
|
|
lineGap: 'round',
|
|||
|
|
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "rgba(3,52,76,0.5)" }],
|
|||
|
|
forecolor: [{ step: 0, color: "#12cda2" }, { step: 0.4, color: "#12cda2" }, { step: 1, color: "rgba(21,237,187,0.05)" }],
|
|||
|
|
rad: Math.PI * 2 * (3 / 4) / 100,
|
|||
|
|
radStart: Math.PI * (3 / 4),
|
|||
|
|
radEnd: Math.PI * (2 + (1 / 4)),
|
|||
|
|
radDrawStart: Math.PI * (3 / 4),
|
|||
|
|
unitadd: 1,
|
|||
|
|
});
|
|||
|
|
drawCircle({
|
|||
|
|
drawing_elem: 'qualityCanvas3',
|
|||
|
|
percentfontcolor: "#00ffff",
|
|||
|
|
unitfontcolor: "#00ffff",
|
|||
|
|
unitfontsize: 11,
|
|||
|
|
lineGap: 'round',
|
|||
|
|
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "rgba(3,52,76,0.5)" }],
|
|||
|
|
forecolor: [{ step: 0, color: "#00ffff" }, { step: 0.4, color: "#00ffff" }, { step: 1, color: "rgba(0,255,255,0.05)" }],
|
|||
|
|
rad: Math.PI * 2 * (3 / 4) / 100,
|
|||
|
|
radStart: Math.PI * (3 / 4),
|
|||
|
|
radEnd: Math.PI * (2 + (1 / 4)),
|
|||
|
|
radDrawStart: Math.PI * (3 / 4),
|
|||
|
|
unitadd: 1,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function initProgressBar() {
|
|||
|
|
var activeLength = $('.sd-progress-list').find('.sd-progress-item.active').length
|
|||
|
|
if (activeLength > 1) {
|
|||
|
|
console.log('activeLength', activeLength)
|
|||
|
|
$('#js-progress-bar').css('width', (100 / 6 * (activeLength - 1)) + '%')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// X轴数据
|
|||
|
|
var laborId_xAxisData = JSON.parse('<%=WorkPostS %>')
|
|||
|
|
var laborId_data1 = JSON.parse('<%=InPostCounts %>')
|
|||
|
|
var laborId_data2 = JSON.parse('<%=InDutyCounts %>')
|
|||
|
|
// Y轴数据
|
|||
|
|
var laborId_series = [{
|
|||
|
|
name: '在岗',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 26,
|
|||
|
|
data: laborId_data1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '在场',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 26,
|
|||
|
|
data: laborId_data2,
|
|||
|
|
barGap: '-100%',
|
|||
|
|
}]
|
|||
|
|
|
|||
|
|
console.log(laborId_series)
|
|||
|
|
function initLaborEchart() {
|
|||
|
|
var chartDom = document.getElementById('laborId');
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
var option = {
|
|||
|
|
color: ['#15edbb', '#2D458D'],
|
|||
|
|
grid: {
|
|||
|
|
top: '10%',
|
|||
|
|
left: '0%',
|
|||
|
|
right: '0%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
showDelay: 0,
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: laborId_xAxisData,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
color: '#1ab1ff', //'#179eb3',
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
onZero: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
width: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
boundaryGap: true
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
onZero: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#1ab1ff',
|
|||
|
|
width: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed',
|
|||
|
|
color: '#0D3C65',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitNumber: 5,
|
|||
|
|
},
|
|||
|
|
series: laborId_series
|
|||
|
|
};
|
|||
|
|
if (laborId_xAxisData.length > 5) {
|
|||
|
|
option.dataZoom = [{
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 4,
|
|||
|
|
height: '3',
|
|||
|
|
backgroundColor: 'rgba(47,69,84,0)',
|
|||
|
|
fillerColor: 'rgba(47,69,84,0)',
|
|||
|
|
bottom: '0%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true,
|
|||
|
|
showDetail: false,
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initEvent() {
|
|||
|
|
$('#selectAreaID').on('click', function () {
|
|||
|
|
$('#selectAreaBoxID').show();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#selectAreaBoxID').on('click', ' .sd-select-box-item', function (e) {
|
|||
|
|
var id = e.currentTarget.dataset.id;
|
|||
|
|
$('#selectAreaBoxID').hide();
|
|||
|
|
$('.sd-select-name').html($(this).html());
|
|||
|
|
console.log('select id', id);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$('.sd-select-area').hover(function () {
|
|||
|
|
$('#selectAreaBoxID').show();
|
|||
|
|
}, function () {
|
|||
|
|
$('#selectAreaBoxID').hide();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
initOutPutEchart();
|
|||
|
|
initQualityCanvas();
|
|||
|
|
initProgressBar();
|
|||
|
|
initLaborEchart();
|
|||
|
|
initEvent();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</html>
|