gaofei
/
SGGL_HBAZ
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
SGGL_HBAZ/SGGL/FineUIPro.Web/common/main3.aspx

962 lines
37 KiB
Plaintext
Raw Normal View History

初始化仓库
2025-02-12 09:27:47 +08:00
<%@ 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>
专项检查
2025-04-15 20:48:53 +08:00
<link href="../res/css/mainindex.css?v2" rel="stylesheet" />
初始化仓库
2025-02-12 09:27:47 +08:00
<link href="../res/indexv2/assets/css/swiper-bundle.min.css" rel="stylesheet" />
</head>
<style type="text/css">
专项检查
2025-04-15 20:48:53 +08:00
input[type="date"] {
修改样式
2025-04-07 09:02:21 +08:00
background-color: rgba(0,0,0,0);
color: #ffffff;
font-size: .175rem;
}
专项检查
2025-04-15 20:48:53 +08:00
初始化仓库
2025-02-12 09:27:47 +08:00
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%);
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
.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);
初始化仓库
2025-02-12 09:27:47 +08:00
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
.video_content .bottom_info {
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
初始化仓库
2025-02-12 09:27:47 +08:00
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
#more {
border-bottom: 1px solid;
cursor: pointer;
margin-left: 0.1rem;
}
初始化仓库
2025-02-12 09:27:47 +08:00
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
.t-xc > .t-preview {
初始化仓库
2025-02-12 09:27:47 +08:00
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;
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
.z-date {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 4px;
}
专项检查
2025-04-15 20:48:53 +08:00
input[type="date"] {
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
background-color: rgba(0,0,0,0);
color: #ffffff;
修改样式
2025-04-07 09:02:21 +08:00
font-size: .175rem;
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
}
专项检查
2025-04-15 20:48:53 +08:00
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
初始化仓库
2025-02-12 09:27:47 +08:00
</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">
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-side-tit">
<asp:Literal runat="server" Text="劳务数据" />
<div class="z-date">
专项检查
2025-04-15 20:48:53 +08:00
<%-- <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="" />
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
</div>
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
<div class="t-xmtj flex-row">
<div class="t-xmtj-box flex-column flex-item-center">
专项检查
2025-04-15 20:48:53 +08:00
<div class="t-xmtj-box-val "><span class="color1" id="allperson"></span><span style="font-size: .25rem; color: #d7d7d7;">人</span></div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-xmtj-box-lab">
<asp:Literal runat="server" Text="现场人数" />
</div>
</div>
<div class="t-xmtj-box flex-column flex-item-center">
专项检查
2025-04-15 20:48:53 +08:00
<div class="t-xmtj-box-val"><span class="color2" id="managePerson"></span><span style="font-size: .25rem; color: #d7d7d7;">人</span></div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-xmtj-box-lab">
<asp:Literal runat="server" Text="管理人员" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
</div>
<div class="t-xmtj-box flex-column flex-item-center">
专项检查
2025-04-15 20:48:53 +08:00
<div class="t-xmtj-box-val "><span class="color3" id="workerPerson"></span><span style="font-size: .25rem; color: #d7d7d7;">人</span></div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<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="" />
初始化仓库
2025-02-12 09:27:47 +08:00
</div>
</div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<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>
专项检查
2025-04-15 20:48:53 +08:00
<div class="t-aqtj">
<div id="aqtj" style="height: 100%; width: 100%;"></div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
</div>
<div class="t-side-tit">
<asp:Literal runat="server" Text="<%$ Resources:Lan,LiveVideo%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
<div class="t-xcsp video_content" style="position: relative;">
<live-player id="player01" live="true" aspect="16:12"></live-player>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<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>
初始化仓库
2025-02-12 09:27:47 +08:00
</div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
</div>
</div>
<div class="t-center">
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<%-- <div class="t-xm flex-row flex-center">
初始化仓库
2025-02-12 09:27:47 +08:00
<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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-xm-lab">
<asp:Literal runat="server" Text="<%$ Resources:Lan,ProjectUnderConstruction%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
</div>
<div class="t-xm-box">
<div class="t-xm-val"><span id="divJoinConstructionPersonNum" runat="server">0</span><span>个</span></div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-xm-lab">
<asp:Literal runat="server" Text="<%$ Resources:Lan,ConPersonCount%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
</div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
</div>--%>
初始化仓库
2025-02-12 09:27:47 +08:00
<div class="t-china-map" id="chinaMap"></div>
</div>
<div class="t-side">
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-side-tit">
<asp:Literal runat="server" Text="<%$ Resources:Lan,Quality_problem_statistics%>" />
专项检查
2025-04-15 20:48:53 +08:00
<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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
<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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="zl-box-tit-item-lab">
<asp:Literal runat="server" Text="<%$ Resources:Lan,ProblemTotal%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
</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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="zl-box-tit-item-lab">
<asp:Literal runat="server" Text="<%$ Resources:Lan,completed%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
</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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="zl-box-tit-item-lab">
<asp:Literal runat="server" Text="<%$ Resources:Lan,uncompleted%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
</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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-side-tit">
<asp:Literal runat="server" Text="<%$ Resources:Lan,FieldDynamics%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
<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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
<div class="t-side-tit">
<asp:Literal runat="server" Text="<%$ Resources:Lan,Live_photo_album%>" />
</div>
初始化仓库
2025-02-12 09:27:47 +08:00
<div class="t-xc">
<div class="swiper">
<div class="swiper-wrapper" runat="server" id="divProjectPic" style="text-align: center">
</div>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
</div>
<div class="t-preview" style="display: none;">
初始化仓库
2025-02-12 09:27:47 +08:00
</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>
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
let AQWTChart = null; // 安全问题统计柱状图的实体
// 5分钟刷新一次数据
setInterval(function () {
专项检查
2025-04-15 20:48:53 +08:00
// 问题类型统计
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
// 劳务数据统计
专项检查
2025-04-15 20:48:53 +08:00
serviceData()
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
}, 300000)
$(document).ready(function () {
// 初始化劳务数据
专项检查
2025-04-15 20:48:53 +08:00
$("#labour_start").val(nowDate())
$("#labour_end").val(nowDate())
serviceData()
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
// 切换日期时请求数据
专项检查
2025-04-15 20:48:53 +08:00
$('#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()
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
})
专项检查
2025-04-15 20:48:53 +08:00
$('#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()
})
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
// 给安全问题统计赋值
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)
}
专项检查
2025-04-15 20:48:53 +08:00
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
初始化仓库
2025-02-12 09:27:47 +08:00
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
})
$('#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 + "日期")
}
专项检查
2025-04-15 20:48:53 +08:00
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
初始化仓库
2025-02-12 09:27:47 +08:00
})
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
createChinaMap()
})
专项检查
2025-04-15 20:48:53 +08:00
// 质量问题统计
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)
}
})
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
// 安全问题统计
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)
})
专项检查
2025-04-15 20:48:53 +08:00
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
initAQWTap('aqtj', tits, vals)
初始化仓库
2025-02-12 09:27:47 +08:00
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
})
}
// 请求劳务数据
专项检查
2025-04-15 20:48:53 +08:00
function serviceData() {
let labour_start = $('#labour_start').val()
let labour_end = $('#labour_end').val()
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
$.ajax({
url: "main3.aspx/GetServiceData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
专项检查
2025-04-15 20:48:53 +08:00
startdate: labour_start,
enddate: labour_end
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
}),
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
}
初始化仓库
2025-02-12 09:27:47 +08:00
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
// 安全问题统计柱状图
function initAQWTap(el, tit, val) {
if (!AQWTChart) {
var chartDom = document.getElementById(el);
AQWTChart = echarts.init(chartDom);
}
var option = {
grid: {
专项检查
2025-04-15 20:48:53 +08:00
top: 30,
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
},
xAxis: {
type: 'category',
data: tit,
/* axisTick: { alignWithLabel: true },*/
axisLabel: {
大屏安全数据统计
2025-04-17 15:01:42 +08:00
rotate: -30,
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
interval: 0,
textStyle: {
专项检查
2025-04-15 20:48:53 +08:00
fontSize: 12,
color: '#FFFFFF'
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
}
初始化仓库
2025-02-12 09:27:47 +08:00
}
},
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#63CAFF'
}
初始化仓库
2025-02-12 09:27:47 +08:00
},
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
splitLine: {
lineStyle: {
color: "#31485B",
width: 1,
初始化仓库
2025-02-12 09:27:47 +08:00
},
},
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
},
series: [
初始化仓库
2025-02-12 09:27:47 +08:00
{
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
barWidth: resetSize(20),
data: val,
type: 'bar',
初始化仓库
2025-02-12 09:27:47 +08:00
label: {
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
show: true,
position: 'top',
color: "#ffffff"
初始化仓库
2025-02-12 09:27:47 +08:00
},
itemStyle: {
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
color: "#00FFFF"
}
初始化仓库
2025-02-12 09:27:47 +08:00
}
]
};
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
if (tit.length > 8) {
option.dataZoom = [{
type: 'slider',
show: true,
xAxisIndex: [0],
startValue: 0,
left: '0', //滚动条靠左侧的百分比
right: '0',
bottom: 0,
start: 0,//滚动条的起始位置
专项检查
2025-04-15 20:48:53 +08:00
end: 8/tit.length*100, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
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);
初始化仓库
2025-02-12 09:27:47 +08:00
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
$('.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()
})
专项检查
2025-04-15 20:48:53 +08:00
初始化仓库
2025-02-12 09:27:47 +08:00
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'
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
]
初始化仓库
2025-02-12 09:27:47 +08:00
)
}
},
{
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);
}
专项检查
2025-04-15 20:48:53 +08:00
初始化仓库
2025-02-12 09:27:47 +08:00
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, // 比例
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
top: 180,
初始化仓库
2025-02-12 09:27:47 +08:00
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, // 比例
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
top: 170,
初始化仓库
2025-02-12 09:27:47 +08:00
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, // 比例
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
top: 160,
初始化仓库
2025-02-12 09:27:47 +08:00
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 = [];
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
var videoIndex = 0;
初始化仓库
2025-02-12 09:27:47 +08:00
var authToken = '';
var videoHost = '<%= VideoHost %>';
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
initVideo()
runShowVideo();
初始化仓库
2025-02-12 09:27:47 +08:00
function initVideo() {
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
$.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);
}
初始化仓库
2025-02-12 09:27:47 +08:00
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
}, 'json');
}
}, 'json');
初始化仓库
2025-02-12 09:27:47 +08:00
}, 'json');
}
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
function runShowVideo() {
if (videoids.length <= 0) {
初始化仓库
2025-02-12 09:27:47 +08:00
setTimeout(function () {
runShowVideo();
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
}, 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');
}
初始化仓库
2025-02-12 09:27:47 +08:00
}
var videoURL = '<%= VideoHost %>';
河北专项检查和移动端
2025-04-06 23:26:22 +08:00
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("您没有权限！");
}
})
初始化仓库
2025-02-12 09:27:47 +08:00
</script>
</body>
</html>