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>
|