761 lines
32 KiB
Plaintext
761 lines
32 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/indexv2/assets/iconfont/iconfont.css" />
|
||
<link href="../res/indexv2/assets/css/video-7.15.0.min.css" rel="stylesheet" />
|
||
<link href="../res/indexv2/assets/css/index10.css" rel="stylesheet" />
|
||
<link href="../res/indexv2/assets/css/swiper.min.css" rel="stylesheet" />
|
||
<link rel="stylesheet" href="../res/css/base.css">
|
||
<link rel="stylesheet" href="../res/css/projectIndex.css">
|
||
<script src="../res/lib/flex.js"></script>
|
||
<style type="text/css">
|
||
.sd-body2 .sd-section .sd-section7-inner .sd-labor-echart .sd-labor-echart-box {
|
||
height: 1.4rem
|
||
}
|
||
html, body, .wrap {
|
||
height: calc(100% - 1.5rem);
|
||
}
|
||
|
||
.video_content {
|
||
position: relative;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box
|
||
}
|
||
|
||
.video_content .bottom {
|
||
position: absolute;
|
||
left: .25rem;
|
||
right: .25rem;
|
||
bottom: 0;
|
||
padding: 6px 2px;
|
||
font-size: 0.1rem;
|
||
color: #fff;
|
||
background-color: rgba(0,0,0,.6);
|
||
}
|
||
|
||
.video_content .bottom_info {
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#more {
|
||
border-bottom: 1px solid;
|
||
cursor: pointer;
|
||
margin-left: 0.1rem;
|
||
}
|
||
|
||
.sd-body2 .sd-section .sd-section5-inner .sd-quality-items .sd-quality-item .sd-quality-item-title .sd-quality-value {
|
||
min-width: 0.2rem
|
||
}
|
||
|
||
.sd-body2 .sd-section .sd-section5-inner .sd-quality-items .sd-quality-item .sd-quality-item-title {
|
||
width: 0.8rem
|
||
}
|
||
|
||
.sd-body2 .sd-section .sd-section6-inner .sd-progress-list .sd-progress-item .sd-progress-info {
|
||
color: #fff;
|
||
}
|
||
|
||
.sd-body2 .sd-body2-left .sd-section, .sd-body2 .sd-body2-right .sd-section {
|
||
height: 1.4rem;
|
||
}
|
||
|
||
.sd-body2 .sd-section .sd-section2-inner {
|
||
padding: 0.14896rem 0.15625rem 0;
|
||
}
|
||
|
||
.sd-body2 .sd-body2-left .sd-section, .sd-body2 .sd-body2-right .sd-section {
|
||
height: 1.4rem
|
||
}
|
||
|
||
html {
|
||
min-height: auto;
|
||
}
|
||
|
||
.pdtb0 {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
.swiper-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.flexV {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.content-ul {
|
||
color: #666;
|
||
box-sizing: border-box;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.content-ul .c-item {
|
||
cursor: pointer;
|
||
display: flex;
|
||
overflow: hidden;
|
||
max-width: 100%;
|
||
font-size: 12px;
|
||
height: 24px;
|
||
/* margin-bottom: 8px; */
|
||
}
|
||
|
||
.content-ul .c-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.content-ul .c-item .tit {
|
||
flex: 1;
|
||
min-width: 0;
|
||
float: left;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
word-break: keep-all;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.content-ul .c-item .time {
|
||
width: 90px;
|
||
float: right;
|
||
}
|
||
|
||
.text-ellipsis {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
.sd-body2 .sd-section .sd-section5-inner .sd-quality-items .sd-quality-item {
|
||
width: 30%;
|
||
}
|
||
.anq-overview >.anq-lab{
|
||
font-size: .2rem;
|
||
}
|
||
.anq-inner-b-text{
|
||
font-size: .2rem;
|
||
}
|
||
.ht-item-lab{
|
||
font-size: .2rem;
|
||
}
|
||
.ht-item-val{
|
||
font-size: .2rem;
|
||
}
|
||
</style>
|
||
<style type="text/css">
|
||
</style>
|
||
</head>
|
||
<body class="wrap" >
|
||
<div>
|
||
<div class="main flex-row">
|
||
<div class="side side-left">
|
||
<div class="side-tit image-full">安全统计</div>
|
||
<div class="anq-box">
|
||
<div class="anq-overview image-full flex-row flex-start flex-item-center">
|
||
<div class="anq-lab">安全人工时：</div>
|
||
<div class="anq-val" runat="server" id="divSafeWorkTime">437,228</div>
|
||
</div>
|
||
<div class="anq-inner flex-row flex-center">
|
||
<div class="anq-inner-b flex-column flex-center">
|
||
<div class="anq-inner-b-text">隐患总数</div>
|
||
<div class="anq-inner-b-val"><span class="color1" runat="server" id="divAllRectify">5</span><span>个</span></div>
|
||
</div>
|
||
<div class="anq-inner-b flex-column flex-center">
|
||
<div class="anq-inner-b-text">已完成</div>
|
||
<div class="anq-inner-b-val"><span class="color2" runat="server" id="divCRectify">5</span><span>个</span></div>
|
||
</div>
|
||
<div class="anq-inner-b flex-column flex-center">
|
||
<div class="anq-inner-b-text">未完成</div>
|
||
<div class="anq-inner-b-val"><span class="color3" runat="server" id="divUCRectify">5</span><span>个</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="side-tit image-full tit1">劳务数据</div>
|
||
<div class="lw-tit flex-row flex-between">
|
||
<div class="lw-item flex-column flex-start flex-item-center">
|
||
<div class="lw-item-lab">当前现场人数</div>
|
||
<div class="lw-item-val color1" runat="server" id="divALLPerson">294</div>
|
||
</div>
|
||
<div class="lw-item flex-column flex-start flex-item-center">
|
||
<div class="lw-item-lab">作业人员总数</div>
|
||
<div class="lw-item-val color2" runat="server" id="divZYPerson">294</div>
|
||
</div>
|
||
<div class="lw-item flex-column flex-start flex-item-center">
|
||
<div class="lw-item-lab">管理人员总数</div>
|
||
<div class="lw-item-val color4" runat="server" id="divGLPerson">294</div>
|
||
</div>
|
||
</div>
|
||
<div class="lw-map">
|
||
<div id="lw-map"></div>
|
||
</div>
|
||
|
||
<%--<div class="side-tit image-full tit1">视频监控</div>
|
||
<div class="vid-box">
|
||
<div class="vid-item">
|
||
<video src="#"></video>
|
||
</div>
|
||
</div>--%>
|
||
<div class="side-tit image-full tit1">视频监控</div>
|
||
<div class="vid-box sd-section-content video_content">
|
||
<live-player id="player01" live="true" aspect="16:12"></live-player>
|
||
<div class="bottom">
|
||
<div class="bottom_info">
|
||
<div class="bottom_left">实时视频 </div>
|
||
<div class="bottom_right"><span id='more'>更多</span></div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div class="pro-d">
|
||
<img src='<%=divProjectImg %>'>
|
||
<div class="pro-d-exp">
|
||
<div class="pro-d-exp-lab"><%=divProjectNameTitle %></div>
|
||
<div class="pro-d-exp-col flex-row flex-start">
|
||
<div class="pro-d-exp-row flex-row flex-start">
|
||
<div class="pro-d-exp-row-lab">建设单位：</div>
|
||
<div class="pro-d-exp-row-val" title='<%=divOwnUnitTitle %>'><%=divOwnUnitTitle %></div>
|
||
</div>
|
||
<div class="pro-d-exp-row flex-row flex-start">
|
||
<div class="pro-d-exp-row-lab">施工单位：</div>
|
||
<div class="pro-d-exp-row-val" title='<%=divSGUnitTitle %>'><%=divSGUnitTitle2 %></div>
|
||
</div>
|
||
<div class="pro-d-exp-row flex-row flex-start">
|
||
<div class="pro-d-exp-row-lab">监理单位：</div>
|
||
<div class="pro-d-exp-row-val" title='<%=divJLUnitTitle %>'><%=divJLUnitTitle2 %></div>
|
||
</div>
|
||
</div>
|
||
<div class="pro-d-exp-d flex-row flex-start">
|
||
<asp:Label runat="server" ID="lbRemark"></asp:Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-box flex-row flex-between">
|
||
<div class="ht-item flex-column flex-center flex-item-start">
|
||
<div class="ht-item-lab">合同总工期</div>
|
||
<div class="ht-item-val"><span class="color1" runat="server" id="divProjectDays">1,100</span><span>天</span></div>
|
||
</div>
|
||
<div class="ht-item flex-column flex-center flex-item-start">
|
||
<div class="ht-item-lab">合同到期时间</div>
|
||
<div class="ht-item-val color3" runat="server" id="divEndDate">2027-01-30</div>
|
||
</div>
|
||
<div class="ht-item flex-column flex-center flex-item-start">
|
||
<div class="ht-item-lab">距竣工剩余</div>
|
||
<div class="ht-item-val"><span class="color4" runat="server" id="divRemainingDays">---</span><span>天</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="jd-box">
|
||
<div class="jd-tit">项目进度计划</div>
|
||
<div id="jd-box-map" class="flex-row flex-center">
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline0" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName0" runat="server">开工时间</div>
|
||
<div class="jd-timer" id="scheDate0" runat="server">2024-01-25</div>
|
||
</div>
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline1" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName1" runat="server">桩基施工</div>
|
||
<div class="jd-timer" id="scheDate1" runat="server">2024-04-18</div>
|
||
</div>
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline2" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName2" runat="server">土建基础交安</div>
|
||
<div class="jd-timer" id="scheDate2" runat="server">2024-12-30</div>
|
||
</div>
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline3" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName3" runat="server">管道安装开始</div>
|
||
<div class="jd-timer" id="scheDate3" runat="server">2024-11-30</div>
|
||
</div>
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline4" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName4" runat="server">PC/BPA 首台设备到货</div>
|
||
<div class="jd-timer" id="scheDate4" runat="server">2025-04-25</div>
|
||
</div>
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline5" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName5" runat="server">PC变电所受电</div>
|
||
<div class="jd-timer" id="scheDate5" runat="server">2024-12-30</div>
|
||
</div>
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline6" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName6" runat="server">DMC机械竣工</div>
|
||
<div class="jd-timer" id="scheDate6" runat="server">2024-12-30</div>
|
||
</div>
|
||
<div class="jd-line-dot flex-column flex-center" id="scheline7" runat="server">
|
||
<div class="jd-line"></div>
|
||
<div class="jd-dot flex-row flex-center"></div>
|
||
<div class="jd-lab" id="scheName7" runat="server">竣工时间</div>
|
||
<div class="jd-timer" id="scheDate7" runat="server">2027-01-30</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cs-box flex-row flex-between flex-center">
|
||
<div class="cs-item">
|
||
<div class="cs-item-lab">温度</div>
|
||
<div class="cs-item-val"><span runat="server" id="divHJ1">0</span><span>℃</span></div>
|
||
</div>
|
||
<div class="cs-item">
|
||
<div class="cs-item-lab">湿度</div>
|
||
<div class="cs-item-val"><span runat="server" id="divHJ2">0</span><span>%rh</span></div>
|
||
</div>
|
||
<div class="cs-item">
|
||
<div class="cs-item-lab">风速</div>
|
||
<div class="cs-item-val"><span runat="server" id="divHJ3">0</span><span>km/h</span></div>
|
||
</div>
|
||
<div class="cs-item">
|
||
<div class="cs-item-lab">噪音</div>
|
||
<div class="cs-item-val"><span runat="server" id="divHJ4">0</span><span>db</span></div>
|
||
</div>
|
||
<div class="cs-item">
|
||
<div class="cs-item-lab">PM2.5</div>
|
||
<div class="cs-item-val"><span runat="server" id="divHJ5">0</span></div>
|
||
</div>
|
||
<div class="cs-item">
|
||
<div class="cs-item-lab">PM10</div>
|
||
<div class="cs-item-val"><span runat="server" id="divHJ6">0</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="side side-right">
|
||
<div class="side-tit image-full">质量统计</div>
|
||
<div class="zl-box">
|
||
<div class="zl-box-tit flex-row flex-between flex-item-center">
|
||
<div class="zl-box-tit-item flex-column flex-item-center flex-between">
|
||
<div class="zl-box-tit-item-val color1" runat="server" id="divCQMSAllNum">176</div>
|
||
<div class="zl-box-tit-item-lab">问题总数</div>
|
||
</div>
|
||
|
||
<div class="zl-box-tit-item flex-column flex-item-center flex-between">
|
||
<div class="zl-box-tit-item-val color2" runat="server" id="divCQMSCAllNum">176</div>
|
||
<div class="zl-box-tit-item-lab">已完成</div>
|
||
</div>
|
||
<div class="zl-box-tit-item flex-column flex-item-center flex-between">
|
||
<div class="zl-box-tit-item-val color3" runat="server" id="divCQMSUCAllNum">176</div>
|
||
<div class="zl-box-tit-item-lab">未完成</div>
|
||
</div>
|
||
</div>
|
||
<div class="zl-box-maps flex-row flex-between">
|
||
<div id="zl-map"></div>
|
||
<div id="zl-map1"></div>
|
||
<div id="zl-map2"></div>
|
||
</div>
|
||
</div>
|
||
<div class="side-tit image-full tit2">待办事项</div>
|
||
<div class="db-box">
|
||
<div class="db-box-ul flex-column flex-start flex-item-start" id='swiper2' runat="server">
|
||
<%--<div class="db-box-li">待办事项：内容填充文字</div>
|
||
<div class="db-box-li">待办事项：内容填充文字</div>
|
||
<div class="db-box-li">待办事项：内容填充文字</div>
|
||
<div class="db-box-li">待办事项：内容填充文字</div>
|
||
<div class="db-box-li">待办事项：内容填充文字</div>
|
||
<div class="db-box-li">待办事项：内容填充文字</div>
|
||
<div class="db-box-li">待办事项：内容填充文字</div>
|
||
<div class="db-box-li">待办事项：内容填充文字</div>--%>
|
||
</div>
|
||
</div>
|
||
<div class="side-tit image-full tit2">资质预警</div>
|
||
<div class="zzh-box flex-column flex-between">
|
||
<div class="a flex-row flex-between">
|
||
<div class="zzh-item flex-column flex-item-end">
|
||
<div class="zzh-item-lab">资质预警</div>
|
||
<div class="zzh-item-val color2" runat="server" id="divQualityWarningNum">0</div>
|
||
</div>
|
||
<div class="zzh-item flex-column flex-item-end">
|
||
<div class="zzh-item-lab">证书预警</div>
|
||
<div class="zzh-item-val color4" runat="server" id="divWorkWarningNum">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="b flex-row flex-between">
|
||
<div class="zzh-item">
|
||
<div class="zzh-item-lab flex-column flex-item-end">机械预警</div>
|
||
<div class="zzh-item-val color1" runat="server" id="divMechanicsWarningNum">0</div>
|
||
</div>
|
||
<div class=" zzh-item">
|
||
<div class="zzh-item-lab flex-column flex-item-end">质量预警</div>
|
||
<div class="zzh-item-val color3" runat="server" id="divCQMSWarningNum">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="side-tit image-full tit2">风险管控</div>
|
||
<div class="fx-box flex-row flex-between">
|
||
<div class="fx-item">
|
||
<div class="fx-item-im color1" runat="server" id="divHazard4Num">0</div>
|
||
<div class="fx-item-lab">四级</div>
|
||
<div class="fx-item-val">重大风险</div>
|
||
</div>
|
||
<div class="fx-item">
|
||
<div class="fx-item-im color4" runat="server" id="divHazard3Num">0</div>
|
||
<div class="fx-item-lab">三级</div>
|
||
<div class="fx-item-val">较大风险</div>
|
||
</div>
|
||
<div class="fx-item">
|
||
<div class="fx-item-im color5" runat="server" id="divHazard2Num">0</div>
|
||
<div class="fx-item-lab">二级</div>
|
||
<div class="fx-item-val">一般风险</div>
|
||
</div>
|
||
<div class="fx-item">
|
||
<div class="fx-item-im color1" runat="server" id="divHazard1Num">0</div>
|
||
<div class="fx-item-lab">一级</div>
|
||
<div class="fx-item-val">低风险</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script src="../res/lib/echarts.min.js"></script>
|
||
<script src="../res/lib/jquery.js"></script>
|
||
<script type="text/javascript" src="../res/indexv2/assets/js/jquery-2.1.1.min.js"></script>
|
||
<script type="text/javascript" src="../res/indexv2/assets/js/echarts-5.2.0.min.js"></script>
|
||
<script type="text/javascript" src="../res/indexv2/assets/js/video-7.15.0.min.js"></script>
|
||
<script type="text/javascript" src="../res/indexv2/assets/js/draw-circle.js"></script>
|
||
<script type="text/javascript" src="../res/indexv2/assets/js/swiper.min.js"></script>
|
||
<script src="../res/liveplayer/liveplayer-element.min.js"></script>
|
||
<script>
|
||
|
||
$('.h-nav-bar').click(function (e) {
|
||
console.log($(this).siblings())
|
||
let id = $(this).data('id')
|
||
$('.h-nav-bar').removeClass('h-nav-bar-active')
|
||
$(this).addClass('h-nav-bar-active')
|
||
// if(id < 5) {
|
||
// $(this).addClass('h-nav-bar-active').siblings().removeClass('h-nav-bar-active')
|
||
// }
|
||
|
||
|
||
});
|
||
|
||
var swiper_One ='<%=swiper_One %>'
|
||
|
||
$(function () {
|
||
//var swiper2H = $("#swiper2Wrap").height()
|
||
//$("#swiper2").height(swiper2H)
|
||
|
||
var slidesNum = 15;
|
||
$("#swiper2").html(swiper_One)
|
||
//var $lenLi = $("#swiper2 .content-ul li").length
|
||
//if ($lenLi > 0) {
|
||
// var $lenLiH = $("#swiper2 .content-ul li").first().height()
|
||
// var UlHeight = $lenLiH * $lenLi
|
||
// if (UlHeight > swiper2H) {
|
||
// var mySwiper = new Swiper('#swiper2', {
|
||
// autoplay: {
|
||
// delay: 1000,//可选选项，自动滑动
|
||
// },
|
||
// direction: 'vertical',
|
||
// loop: true,
|
||
// slidesPerView: 'auto'
|
||
// })
|
||
|
||
// }
|
||
//}
|
||
|
||
$("#swiper2").on('click', 'li', function () {
|
||
debugger;
|
||
var $this = $(this)
|
||
var data = $this.attr("data-id")
|
||
var noticeId = $this.attr("notice-id")
|
||
//$(".project-list-wrap").show();
|
||
//return
|
||
if (data != "") {
|
||
debugger;
|
||
//Window1.GetShowReference(data) + "return false;";
|
||
//document.getElementById("hdNoticeId").value = noticeId;
|
||
//document.getElementById("imgBtn").click();
|
||
window.open(data);
|
||
top.window.location.reload();
|
||
}
|
||
})
|
||
})
|
||
|
||
var cRectificationRate = '<%=CRectificationRate %>'
|
||
var cQualifiedRate = '<%=CQualifiedRate %>'
|
||
var firstPassRate = '<%=FirstPassRate %>'
|
||
initZLMap("zl-map", cRectificationRate, "整改率")
|
||
initZLMap("zl-map1", cQualifiedRate, "合格率")
|
||
initZLMap("zl-map2", firstPassRate, "焊接一次合格率")
|
||
function initZLMap(el, val, tit = "") {
|
||
|
||
const gaugeData = [
|
||
{
|
||
value: val,
|
||
name: tit,
|
||
title: {
|
||
width: resetSize(100),
|
||
height: resetSize(24),
|
||
color: "#ffffff",
|
||
offsetCenter: ['0%', '100%'],
|
||
backgroundColor: {
|
||
image: '../res/images/r02.png'
|
||
// 这里可以是图片的 URL，
|
||
// 或者图片的 dataURI，
|
||
// 或者 HTMLImageElement 对象，
|
||
// 或者 HTMLCanvasElement 对象。
|
||
}
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
offsetCenter: ['0%', '0%']
|
||
},
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 1, 0, [{
|
||
offset: 0,
|
||
color: '#00A3FF'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#BDFF00'
|
||
}
|
||
]
|
||
)
|
||
}
|
||
},
|
||
{
|
||
value: 100,
|
||
name: '',
|
||
title: {
|
||
offsetCenter: ['0%', '0%']
|
||
},
|
||
detail: {
|
||
show: false,
|
||
valueAnimation: true,
|
||
offsetCenter: ['0%', '10%']
|
||
},
|
||
itemStyle: {
|
||
color: "#3C4D5D"
|
||
}
|
||
}
|
||
];
|
||
option = {
|
||
series: [
|
||
{
|
||
radius: '90%',
|
||
type: 'gauge',
|
||
startAngle: 220,
|
||
endAngle: -40,
|
||
pointer: {
|
||
show: false
|
||
},
|
||
progress: {
|
||
show: true,
|
||
overlap: false,
|
||
roundCap: false,
|
||
clip: false,
|
||
itemStyle: {
|
||
borderWidth: 0,
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: resetSize(12),
|
||
color: [[1, '#4F5E68']]
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
data: gaugeData,
|
||
title: {
|
||
fontSize: resetSize(12)
|
||
},
|
||
detail: {
|
||
fontSize: resetSize(14),
|
||
color: "#ffffff",
|
||
formatter: '{value}%'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
var chartDom = document.getElementById(el);
|
||
var myChart = echarts.init(chartDom);
|
||
option && myChart.setOption(option);
|
||
}
|
||
|
||
|
||
initLWMap('lw-map', JSON.parse('<%=WorkPostS %>'), JSON.parse('<%=InPostCounts %>'))
|
||
function initLWMap(el, tit, val) {
|
||
var chartDom = document.getElementById(el);
|
||
var myChart = echarts.init(chartDom);
|
||
var option = {
|
||
grid: {
|
||
containLabel: true,
|
||
top: resetSize(10),
|
||
left:0,
|
||
bottom: resetSize(10),
|
||
|
||
},
|
||
dataZoom: [{
|
||
type: 'slider',
|
||
show: true,
|
||
xAxisIndex: [0],
|
||
startValue: 0,
|
||
left: '0', //滚动条靠左侧的百分比
|
||
right: '0',
|
||
bottom: 0,
|
||
start: 0,//滚动条的起始位置
|
||
end: 20, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||
fillerColor: '#6B7388', //滑块的颜色
|
||
backgroundColor: '#2B3755', // 滑块轨道的颜色
|
||
borderColor: 'transparent', // 滑块轨道边框的颜色
|
||
height: 6, // 滑块高度
|
||
handleSize: '80%',
|
||
handleIcon: 'path://M512,500m-430,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||
handleStyle: {
|
||
borderWidth: 0,
|
||
color: '#6B7388',
|
||
},
|
||
zoomLock: true,
|
||
zoomOnMouseWheel: false,
|
||
brushSelect: false,
|
||
showDetail: false,
|
||
showDataShadow: false
|
||
}],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: tit,
|
||
axisTick: { alignWithLabel: true },
|
||
axisLabel: {
|
||
rotate: -25,
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: resetSize(12),
|
||
color: '#84D7FE'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#63CAFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#31485B",
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
barWidth: resetSize(20),
|
||
data: val,
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: "#00FFFF"
|
||
}
|
||
}
|
||
]
|
||
};
|
||
option && myChart.setOption(option);
|
||
|
||
}
|
||
|
||
|
||
function resetSize(size, initWidth = 1920) {
|
||
let clientWidth = document.body.clientWidth
|
||
return size * (clientWidth / initWidth)
|
||
}
|
||
|
||
var videoids = [];
|
||
var videoIndex = 0;
|
||
var authToken = '';
|
||
|
||
var videoHost = '<%= VideoHost %>';
|
||
function runShowVideo() {
|
||
if (videoids.length <= 0) {
|
||
setTimeout(function () {
|
||
runShowVideo();
|
||
}, 5000);
|
||
} else if (videoIndex < videoids.length) {
|
||
$.get(videoHost + 'api/v1/stream/start?serial=' + videoids[videoIndex].split(':')[0] + '&code=' + videoids[videoIndex].split(':')[1] + '&token=' + authToken, function (data4) {
|
||
console.log(data4.HLS)
|
||
videoIndex++;
|
||
var player = document.getElementById('player01');
|
||
player.setAttribute("video-url", data4.HLS);
|
||
setTimeout(function () {
|
||
runShowVideo();
|
||
}, 500000);
|
||
}, 'json');
|
||
}
|
||
}
|
||
|
||
function initVideo() {
|
||
$.get(videoHost + 'api/v1/login?username=<%= VideoUserName %>&password=<%= VideoPassWord %>', function (data1) {
|
||
authToken = data1.AuthToken;
|
||
$.get(videoHost + 'api/v1/device/channeltree?token=' + authToken, function (data2) {
|
||
for (var i = 0; i < data2.length && i <= 0; i++) {
|
||
$.get(videoHost + 'api/v1/device/channeltree?serial=' + data2[i].serial + '&token=' + authToken, function (data3) {
|
||
for (var j = 0; j < data3.length && j <= 0; j++) {
|
||
videoids.push(data3[j].id);
|
||
}
|
||
|
||
|
||
}, 'json');
|
||
}
|
||
}, 'json');
|
||
}, 'json');
|
||
|
||
}
|
||
initVideo();
|
||
runShowVideo();
|
||
|
||
var videoURL = '<%= VideoHost %>';
|
||
let more = document.getElementById('more')
|
||
more.addEventListener("click", function () {
|
||
// 在点击事件中执行的代码
|
||
if (videoURL) {
|
||
//var username = $('#SimpleForm1_hfProjectCode-inputEl').val()
|
||
//var password = $('#SimpleForm1_hfMonitorPW-inputEl').val();
|
||
console.log(videoURL);
|
||
debugger
|
||
window.open(videoURL + "#/screen?username=" + '<%= VideoUserName %>' + "&password=" + '<%= VideoPassWord %>', '_blank');
|
||
}
|
||
else {
|
||
alert("您没有权限！");
|
||
}
|
||
});
|
||
</script>
|
||
</html>
|