962 lines
37 KiB
Plaintext
962 lines
37 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main3.aspx.cs" Inherits="FineUIPro.Web.common.main3" %>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head id="Head1" runat="server">
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>智慧施工管理信息系统</title>
|
||
<script src="lib/flex.js"></script>
|
||
<link href="../res/css/mainindex.css?v2" rel="stylesheet" />
|
||
<link href="../res/indexv2/assets/css/swiper-bundle.min.css" rel="stylesheet" />
|
||
|
||
</head>
|
||
<style type="text/css">
|
||
input[type="date"] {
|
||
background-color: rgba(0,0,0,0);
|
||
color: #ffffff;
|
||
font-size: .175rem;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.swiper-button-next:after,
|
||
.swiper-button-prev:after {
|
||
font-size: 16px;
|
||
color: #2A71AF;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.swiper-button-prev,
|
||
.swiper-rtl .swiper-button-next,
|
||
.swiper-button-next,
|
||
.swiper-rtl .swiper-button-prev {
|
||
border: 2px solid #2A71AF;
|
||
border-radius: 50%;
|
||
height: 30px;
|
||
width: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-button-next,
|
||
.swiper-button-prev {
|
||
transform: translateY(50%);
|
||
}
|
||
|
||
.video_content {
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-sizing: border-box
|
||
}
|
||
|
||
.video_content .bottom {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 6px;
|
||
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;
|
||
}
|
||
|
||
.t-xc > .t-preview {
|
||
position: absolute;
|
||
height: 200%;
|
||
width: 200%;
|
||
bottom: 0;
|
||
/* top: 0;left: 0;right: 0;bottom: 0; */
|
||
transform: translateX(-101%);
|
||
border: 1px solid #1F668D;
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.z-date {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 4px;
|
||
}
|
||
|
||
input[type="date"] {
|
||
background-color: rgba(0,0,0,0);
|
||
color: #ffffff;
|
||
font-size: .175rem;
|
||
}
|
||
|
||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||
filter: invert(1);
|
||
}
|
||
</style>
|
||
<script src="../res/indexv2/assets/js/swiper-bundle.min.js"></script>
|
||
<body class="t-main1">
|
||
|
||
<div class="t-body flex-row">
|
||
<div class="t-side">
|
||
<div class="t-side-tit">
|
||
<asp:Literal runat="server" Text="劳务数据" />
|
||
<div class="z-date">
|
||
<%-- <input id="labour" type="date" value="" />--%>
|
||
<input id="labour_start" type="date" value="" />
|
||
<span style="font-size: 10px; padding: 0 6px;">至</span>
|
||
<input id="labour_end" type="date" value="" />
|
||
</div>
|
||
</div>
|
||
<div class="t-xmtj flex-row">
|
||
<div class="t-xmtj-box flex-column flex-item-center">
|
||
<div class="t-xmtj-box-val "><span class="color1" id="allperson"></span><span style="font-size: .25rem; color: #d7d7d7;">人</span></div>
|
||
<div class="t-xmtj-box-lab">
|
||
<asp:Literal runat="server" Text="现场人数" />
|
||
</div>
|
||
</div>
|
||
<div class="t-xmtj-box flex-column flex-item-center">
|
||
<div class="t-xmtj-box-val"><span class="color2" id="managePerson"></span><span style="font-size: .25rem; color: #d7d7d7;">人</span></div>
|
||
<div class="t-xmtj-box-lab">
|
||
<asp:Literal runat="server" Text="管理人员" />
|
||
</div>
|
||
</div>
|
||
<div class="t-xmtj-box flex-column flex-item-center">
|
||
<div class="t-xmtj-box-val "><span class="color3" id="workerPerson"></span><span style="font-size: .25rem; color: #d7d7d7;">人</span></div>
|
||
<div class="t-xmtj-box-lab">
|
||
<asp:Literal runat="server" Text="作业人员" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="t-side-tit">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,SafeProStat%>" />
|
||
<div class="z-date">
|
||
<input id="safe_start" type="date" value="" />
|
||
<span style="font-size: 10px; padding: 0 6px;">至</span>
|
||
<input id="safe_end" type="date" value="" />
|
||
</div>
|
||
</div>
|
||
<div class="lw-tit flex-row flex-between" style="padding: 10px 15px 0;">
|
||
<div class="lw-item flex-column flex-start flex-item-center">
|
||
<div class="lw-item-lab">
|
||
<p>
|
||
问题总数
|
||
</p>
|
||
</div>
|
||
<div class="lw-item-val color1" runat="server" id="all">0</div>
|
||
</div>
|
||
<div class="lw-item flex-column flex-start flex-item-center">
|
||
<div class="lw-item-lab">
|
||
<p>
|
||
已完成
|
||
</p>
|
||
</div>
|
||
<div class="lw-item-val color2" runat="server" id="done">0</div>
|
||
</div>
|
||
<div class="lw-item flex-column flex-start flex-item-center">
|
||
<div class="lw-item-lab">
|
||
<p>
|
||
未完成
|
||
</p>
|
||
</div>
|
||
<div class="lw-item-val color4" runat="server" id="undone">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="t-aqtj">
|
||
<div id="aqtj" style="height: 100%; width: 100%;"></div>
|
||
</div>
|
||
<div class="t-side-tit">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,LiveVideo%>" />
|
||
</div>
|
||
<div class="t-xcsp video_content" style="position: relative;">
|
||
<live-player id="player01" live="true" aspect="16:12"></live-player>
|
||
<div class="bottom">
|
||
<div class="bottom_info">
|
||
<div class="bottom_left">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,RealTimeVideo%>" />
|
||
</div>
|
||
<div class="bottom_right">
|
||
<span id='more'>
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,more%>" /></span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="t-center">
|
||
<%-- <div class="t-xm flex-row flex-center">
|
||
<div class="t-xm-box flex-column flex-start flex-item-start">
|
||
<div class="t-xm-val"><span id="divProjectNum" runat="server">0</span><span>个</span></div>
|
||
<div class="t-xm-lab">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,ProjectUnderConstruction%>" />
|
||
</div>
|
||
</div>
|
||
<div class="t-xm-box">
|
||
<div class="t-xm-val"><span id="divJoinConstructionPersonNum" runat="server">0</span><span>个</span></div>
|
||
<div class="t-xm-lab">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,ConPersonCount%>" />
|
||
</div>
|
||
</div>
|
||
</div>--%>
|
||
<div class="t-china-map" id="chinaMap"></div>
|
||
</div>
|
||
<div class="t-side">
|
||
<div class="t-side-tit">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,Quality_problem_statistics%>" />
|
||
<div class="z-date">
|
||
<input id="labour_start" type="date" value="" />
|
||
<span style="font-size: 10px; padding: 0 6px;">至</span>
|
||
<input id="labour_end" type="date" value="" />
|
||
</div>
|
||
</div>
|
||
<div class="t-zltj">
|
||
<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="divCheckControlAllNum">176</div>
|
||
<div class="zl-box-tit-item-lab">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,ProblemTotal%>" />
|
||
</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="divCheckControlOKNum">176</div>
|
||
<div class="zl-box-tit-item-lab">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,completed%>" />
|
||
</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="divCheckControlNotOKNum">176</div>
|
||
<div class="zl-box-tit-item-lab">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,uncompleted%>" />
|
||
</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="t-side-tit">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,FieldDynamics%>" />
|
||
</div>
|
||
<div class="xc-box">
|
||
<div class="xc-box-ul flex-column flex-start flex-item-start">
|
||
<div class="xc-box-li flex-row flex-between">
|
||
<%--<span>现场动态：内容填充文字</span><span>2024-10-22
|
||
01:40:10</span>--%>
|
||
</div>
|
||
<div class="xc-box-li flex-row flex-between">
|
||
<%--<span>现场动态：内容填充文字</span><span>2024-10-22
|
||
01:40:10</span>--%>
|
||
</div>
|
||
<div class="xc-box-li flex-row flex-between">
|
||
<%--<span>现场动态：内容填充文字</span><span>2024-10-22
|
||
01:40:10</span>--%>
|
||
</div>
|
||
<div class="xc-box-li flex-row flex-between">
|
||
<%--<span>现场动态：内容填充文字</span><span>2024-10-22
|
||
01:40:10</span>--%>
|
||
</div>
|
||
<div class="xc-box-li flex-row flex-between">
|
||
<%--<span>现场动态：内容填充文字</span><span>2024-10-22
|
||
01:40:10</span>--%>
|
||
</div>
|
||
<div class="xc-box-li flex-row flex-between">
|
||
<%--<span>现场动态：内容填充文字</span><span>2024-10-22
|
||
01:40:10</span>--%>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="t-side-tit">
|
||
<asp:Literal runat="server" Text="<%$ Resources:Lan,Live_photo_album%>" />
|
||
</div>
|
||
<div class="t-xc">
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper" runat="server" id="divProjectPic" style="text-align: center">
|
||
</div>
|
||
|
||
</div>
|
||
<div class="t-preview" style="display: none;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="../res/indexv2/assets/js/jquery-2.1.1.min.js"></script>
|
||
<script type="text/javascript" src="lib/echarts.min.js"></script>
|
||
<script type="text/javascript" src="lib/china1.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 src="../res/liveplayer/liveplayer-element.min.js"></script>
|
||
|
||
<script>
|
||
let AQWTChart = null; // 安全问题统计柱状图的实体
|
||
// 5分钟刷新一次数据
|
||
setInterval(function () {
|
||
// 问题类型统计
|
||
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
|
||
// 劳务数据统计
|
||
serviceData()
|
||
}, 300000)
|
||
|
||
$(document).ready(function () {
|
||
// 初始化劳务数据
|
||
$("#labour_start").val(nowDate())
|
||
$("#labour_end").val(nowDate())
|
||
serviceData()
|
||
|
||
// 切换日期时请求数据
|
||
$('#labour_start').on('change', function () {
|
||
let labour_start = $('#labour_start').val()
|
||
let labour_end = $('#labour_end').val()
|
||
if (new Date(labour_start).getTime() > new Date(labour_end)) {
|
||
alert("请选择小于" + labour_end + "日期")
|
||
$('#labour_start').val(labour_end)
|
||
}
|
||
serviceData()
|
||
|
||
})
|
||
$('#labour_end').on('change', function () {
|
||
let labour_start = $('#labour_start').val()
|
||
let labour_end = $('#labour_end').val()
|
||
if (new Date(labour_start).getTime() > new Date(labour_end)) {
|
||
$('#labour_start').val(nowDate())
|
||
|
||
alert("请选择大于" + labour_start + "日期")
|
||
}
|
||
serviceData()
|
||
})
|
||
|
||
|
||
|
||
// 给安全问题统计赋值
|
||
let date = new Date()
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth() + 1
|
||
|
||
$('#safe_start').val(`${year}-${month.toString().padStart(2, '0')}-01`);
|
||
$('#safe_end').val(`${year}-${month.toString().padStart(2, '0')}-${new Date(year, month, 0).getDate()}`);
|
||
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
|
||
|
||
// 切换安全问题统计日期
|
||
$('#safe_start').on('change', function () {
|
||
let safe_start = $('#safe_start').val()
|
||
let safe_end = $('#safe_end').val()
|
||
if (new Date(safe_start).getTime() > new Date(safe_end)) {
|
||
alert("请选择小于" + safe_end + "日期")
|
||
$('#safe_start').val(safe_end)
|
||
}
|
||
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
|
||
|
||
})
|
||
$('#safe_end').on('change', function () {
|
||
let safe_start = $('#safe_start').val()
|
||
let safe_end = $('#safe_end').val()
|
||
if (new Date(safe_start).getTime() > new Date(safe_end)) {
|
||
$('#safe_start').val(nowDate())
|
||
alert("请选择大于" + safe_start + "日期")
|
||
}
|
||
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
|
||
})
|
||
|
||
createChinaMap()
|
||
})
|
||
// 质量问题统计
|
||
function getQualityProblemStatistics() {
|
||
$.ajax({
|
||
url: "main3.aspx/GetQualityProblemStatistics",
|
||
type: "POST",
|
||
contentType: "application/json; charset=utf-8",
|
||
dataType: "json",
|
||
data: JSON.stringify({
|
||
startdate: startdate,
|
||
enddate: enddate
|
||
}),
|
||
success: function (data) {
|
||
console.log(data)
|
||
let d = data.d
|
||
$("#all").text(d.AllCount)
|
||
$("#done").text(d.DoneCount)
|
||
$("#undone").text(d.UnDoneCount)
|
||
let tits = []
|
||
let vals = []
|
||
d.CheckList.map(e => {
|
||
tits.push(e.type)
|
||
vals.push(e.count)
|
||
})
|
||
|
||
initAQWTap('aqtj', tits, vals)
|
||
|
||
}
|
||
})
|
||
}
|
||
// 安全问题统计
|
||
function problemTypeStatistics(startdate, enddate) {
|
||
$.ajax({
|
||
url: "main3.aspx/GetSafetyProblemStatistics",
|
||
type: "POST",
|
||
contentType: "application/json; charset=utf-8",
|
||
dataType: "json",
|
||
data: JSON.stringify({
|
||
startdate: startdate,
|
||
enddate: enddate,
|
||
|
||
}),
|
||
success: function (data) {
|
||
console.log(data)
|
||
let d = data.d
|
||
$("#all").text(d.AllCount)
|
||
$("#done").text(d.DoneCount)
|
||
$("#undone").text(d.UnDoneCount)
|
||
let tits = []
|
||
let vals = []
|
||
d.CheckList.map(e => {
|
||
tits.push(e.type)
|
||
vals.push(e.count)
|
||
})
|
||
|
||
initAQWTap('aqtj', tits, vals)
|
||
|
||
}
|
||
})
|
||
}
|
||
// 请求劳务数据
|
||
function serviceData() {
|
||
let labour_start = $('#labour_start').val()
|
||
let labour_end = $('#labour_end').val()
|
||
$.ajax({
|
||
url: "main3.aspx/GetServiceData",
|
||
type: "POST",
|
||
contentType: "application/json; charset=utf-8",
|
||
dataType: "json",
|
||
data: JSON.stringify({
|
||
startdate: labour_start,
|
||
enddate: labour_end
|
||
}),
|
||
success: function (data) {
|
||
console.log(data)
|
||
let d = data.d
|
||
$('#allperson').text(d.all_count)
|
||
$('#managePerson').text(d.m_count)
|
||
$('#workerPerson').text(d.job_count)
|
||
}
|
||
})
|
||
}
|
||
// 获取当天日期
|
||
function nowDate() {
|
||
var now = new Date();
|
||
//格式化日，如果小于9，前面补0
|
||
var day = ("0" + now.getDate()).slice(-2);
|
||
//格式化月，如果小于9，前面补0
|
||
var month = ("0" + (now.getMonth() + 1)).slice(-2);
|
||
//拼装完整日期格式
|
||
var today = now.getFullYear() + "-" + (month) + "-" + (day);
|
||
return today
|
||
}
|
||
|
||
// 安全问题统计柱状图
|
||
function initAQWTap(el, tit, val) {
|
||
|
||
if (!AQWTChart) {
|
||
var chartDom = document.getElementById(el);
|
||
AQWTChart = echarts.init(chartDom);
|
||
}
|
||
|
||
var option = {
|
||
grid: {
|
||
top: 30,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: tit,
|
||
/* axisTick: { alignWithLabel: true },*/
|
||
axisLabel: {
|
||
rotate: -30,
|
||
interval: 0,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#FFFFFF'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#63CAFF'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#31485B",
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
barWidth: resetSize(20),
|
||
data: val,
|
||
type: 'bar',
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: "#ffffff"
|
||
},
|
||
itemStyle: {
|
||
color: "#00FFFF"
|
||
}
|
||
}
|
||
]
|
||
};
|
||
if (tit.length > 8) {
|
||
option.dataZoom = [{
|
||
type: 'slider',
|
||
show: true,
|
||
xAxisIndex: [0],
|
||
startValue: 0,
|
||
left: '0', //滚动条靠左侧的百分比
|
||
right: '0',
|
||
bottom: 0,
|
||
start: 0,//滚动条的起始位置
|
||
end: 8/tit.length*100, //滚动条的截止位置（按比例分割你的柱状图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: false,
|
||
zoomOnMouseWheel: false,
|
||
brushSelect: false,
|
||
showDetail: false,
|
||
showDataShadow: false
|
||
}]
|
||
}
|
||
option && AQWTChart.setOption(option);
|
||
}
|
||
|
||
$('.swiper-wrapper').on('mouseenter', function (event) {
|
||
console.log(111111111, $(this).children().eq(mySwiper.activeIndex).children().eq(0).attr('src'))
|
||
event.stopPropagation()
|
||
mySwiper.autoplay.stop()
|
||
$('.t-preview').css({
|
||
"background-image": `url(${$(this).children().eq(mySwiper.activeIndex).children().eq(0).attr('src')})`
|
||
})
|
||
$('.t-preview').show()
|
||
}).on('mouseout', function () {
|
||
event.stopPropagation()
|
||
mySwiper.autoplay.start();
|
||
$('.t-preview').hide()
|
||
})
|
||
var mySwiper = new Swiper('.swiper', {
|
||
autoplay: true,//可选选项，自动滑动
|
||
})
|
||
$(".swiper-button-prev").on("click", function () {
|
||
mySwiper.slidePrev()
|
||
})
|
||
$(".swiper-button-next").on("click", function () {
|
||
mySwiper.slideNext()
|
||
})
|
||
|
||
|
||
|
||
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: './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);
|
||
}
|
||
|
||
function createChinaMap() {
|
||
var chinaData = JSON.parse('<%=ProjectInfo %>')
|
||
// 地图 点
|
||
//let chinaData = [
|
||
// {
|
||
// name: 'xxxx项目',
|
||
// value: [117.27, 31.86, { value: 55 }],
|
||
// },
|
||
// {
|
||
// name: 'xxxxx项目',
|
||
// value: [116.40, 39.90, { value: 222 }],
|
||
|
||
// },
|
||
// {
|
||
// name: 'xxxxxx项目',
|
||
// value: [106.55, 29.56, { value: 111 }],
|
||
// }
|
||
//]
|
||
// 中国地图 配置
|
||
let chinaOption = {
|
||
tooltip: { show: false, },
|
||
geo: [
|
||
{
|
||
// 地理坐标系组件
|
||
map: "china",
|
||
roam: false, // 可以缩放和平移
|
||
aspectScale: 0.75, // 比例
|
||
top: 180,
|
||
zlevel: 8,
|
||
zoom: 1.4,
|
||
tooltip: {
|
||
show: true,
|
||
backgroundColor: "#126DA0",
|
||
borderColor: '#21609D',
|
||
formatter: function (h) {
|
||
console.log(h)
|
||
// let html = `<div style="z-index:99999999;color: #ffffff;">
|
||
// <p><span>【项目名称】：</span>山东裕龙石化有限公司裕龙岛炼化一体化项目(一期)</p>
|
||
// <p><span>【开工时间】：</span>2022-1-30</p>
|
||
// <p><span>【竣工时间】：</span>2023-12-30</p>
|
||
// <p><span>【项目地址】：</span>山东烟台龙门市</p>
|
||
//</div>`
|
||
let html = `<div style="z-index:99999999;color: #ffffff;">
|
||
<p>`+ h.name.split("@")[0] + `</p>
|
||
</div>`
|
||
return html
|
||
},
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
// 隐藏地图
|
||
normal: {
|
||
opacity: 0, // 为 0 时不绘制该图形
|
||
}
|
||
},
|
||
label: {
|
||
show: false // 隐藏文字
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 图形上的地图区域
|
||
normal: {
|
||
areaColor: "#07121B",
|
||
borderColor: "#07121B",
|
||
}
|
||
},
|
||
|
||
emphasis: {
|
||
disabled: false,
|
||
}
|
||
|
||
},
|
||
{
|
||
// 地理坐标系组件
|
||
map: "china",
|
||
roam: false, // 可以缩放和平移
|
||
aspectScale: 0.75, // 比例
|
||
top: 170,
|
||
zlevel: 9,
|
||
zoom: 1.4,
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
itemStyle: {
|
||
// 隐藏地图
|
||
normal: {
|
||
opacity: 0, // 为 0 时不绘制该图形
|
||
}
|
||
},
|
||
label: {
|
||
show: false // 隐藏文字
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 图形上的地图区域
|
||
normal: {
|
||
areaColor: "#076393",
|
||
borderColor: "#076393",
|
||
}
|
||
},
|
||
|
||
emphasis: {
|
||
disabled: true,
|
||
}
|
||
|
||
},
|
||
|
||
{
|
||
// 地理坐标系组件
|
||
map: "china",
|
||
roam: false, // 可以缩放和平移
|
||
aspectScale: 0.75, // 比例
|
||
top: 160,
|
||
zlevel: 12,
|
||
zoom: 1.4,
|
||
label: {
|
||
color: "#ffffff",
|
||
show: true
|
||
},
|
||
regions: [
|
||
{
|
||
name: "南海诸岛",
|
||
label: {
|
||
show: false // 隐藏文字
|
||
}
|
||
}
|
||
],
|
||
itemStyle: {
|
||
// 图形上的地图区域
|
||
normal: {
|
||
borderWidth: 1,
|
||
areaColor: "rgba(130, 217, 255, .4)",
|
||
borderColor: "#45A8DB",
|
||
}
|
||
},
|
||
emphasis: {
|
||
disabled: true,
|
||
}
|
||
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
id: 'isSkip',
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
symbolSize: 6,
|
||
zlevel: 100,
|
||
selectedMode: true,
|
||
select: {
|
||
disabled: true,
|
||
label: true,
|
||
},
|
||
itemStyle: {
|
||
color: "#FDFF04"
|
||
},
|
||
rippleEffect: {
|
||
|
||
},
|
||
|
||
data: chinaData,
|
||
}],
|
||
|
||
}
|
||
echarts.registerMap('china', chinaJson);
|
||
let chinaChart = echarts.init(document.getElementById('chinaMap'));
|
||
chinaChart.setOption(chinaOption);
|
||
|
||
|
||
|
||
|
||
chinaChart.on('click', function (params) {
|
||
// 控制台打印点击的地区名称
|
||
//if (params.seriesType == 'effectScatter') {
|
||
// alert('点击了' + params.name);
|
||
//}
|
||
if (params.seriesType == "effectScatter") {
|
||
var gotoUrl = params.name.split("@")[1] || 'indexProject.aspx'
|
||
top.window.location.href = '../' + gotoUrl
|
||
}
|
||
// 你可以在这里添加你的逻辑代码
|
||
});
|
||
// // 切换地图事件
|
||
// $('.hy-change-map').click(function () {
|
||
// console.log(11111111)
|
||
// let val = $('.hy-change-map').text()
|
||
// if (val == '中国地图') {
|
||
// echarts.registerMap('word', wordJson);
|
||
// chinaChart.setOption(wordOption);
|
||
// $('.hy-change-map').text('世界地图')
|
||
// } else {
|
||
// echarts.registerMap('china', chinaJson);
|
||
// chinaChart.setOption(chinaOption);
|
||
// $('.hy-change-map').text('中国地图')
|
||
// }
|
||
|
||
// })
|
||
}
|
||
|
||
function resetSize(size, initWidth = 1920) {
|
||
let clientWidth = document.body.clientWidth
|
||
return size * (clientWidth / initWidth)
|
||
}
|
||
|
||
|
||
// 视频
|
||
var videoids = [];
|
||
var videoIndex = 0;
|
||
var authToken = '';
|
||
var videoHost = '<%= VideoHost %>';
|
||
initVideo()
|
||
runShowVideo();
|
||
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');
|
||
|
||
}
|
||
|
||
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');
|
||
}
|
||
}
|
||
|
||
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();
|
||
window.open(videoURL + "#/screen?username=" + '<%= VideoUserName %>' + "&password=" + '<%= VideoPassWord %>', '_blank');
|
||
}
|
||
else {
|
||
alert("您没有权限！");
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|