河北专项检查和移动端
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
<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?v14" rel="stylesheet" />
|
||||
<link href="../res/css/mainindex.css?v1" rel="stylesheet" />
|
||||
<link href="../res/indexv2/assets/css/swiper-bundle.min.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
@@ -43,35 +43,35 @@
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.video_content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box
|
||||
.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 {
|
||||
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;
|
||||
.video_content .bottom_info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.t-xc > .t-preview {
|
||||
|
||||
#more {
|
||||
border-bottom: 1px solid;
|
||||
cursor: pointer;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
.t-xc > .t-preview {
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 200%;
|
||||
@@ -84,67 +84,148 @@
|
||||
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;
|
||||
}
|
||||
</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="<%$ Resources:Lan,ProjectStatistics%>" /></div>
|
||||
<div class="t-xmtj flex-row">
|
||||
<div class="t-xmtj-box flex-column flex-item-center">
|
||||
<div class="t-xmtj-box-val color2" runat="server" id="divSafeWorkTime">0</div>
|
||||
<div class="t-xmtj-box-lab"><asp:Literal runat="server" Text="<%$ Resources:Lan,SafetyLaborHours%>" /></div>
|
||||
</div>
|
||||
<div class="t-xmtj-box flex-column flex-item-center">
|
||||
<div class="t-xmtj-box-val color3" runat="server" id="divMajorProjectsUnderConstructionNum">0</div>
|
||||
<div class="t-xmtj-box-lab"><asp:Literal runat="server" Text="<%$ Resources:Lan,LargeRisk%>" /></div>
|
||||
<div class="t-side-tit">
|
||||
<asp:Literal runat="server" Text="劳务数据" />
|
||||
<div class="z-date">
|
||||
<input id="labour" type="date" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-side-tit"><asp:Literal runat="server" Text="<%$ Resources:Lan,SafeProStat%>" /></div>
|
||||
<div class="t-aqtj" id="aqtj"></div>
|
||||
<div class="t-side-tit"><asp:Literal runat="server" Text="<%$ Resources:Lan,LiveVideo%>" /></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:20px;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:20px;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:20px;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 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 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 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 class="t-xm-lab">
|
||||
<asp:Literal runat="server" Text="<%$ Resources:Lan,ConPersonCount%>" />
|
||||
</div>
|
||||
</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>
|
||||
<div class="t-side-tit">
|
||||
<asp:Literal runat="server" Text="<%$ Resources:Lan,Quality_problem_statistics%>" />
|
||||
</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 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 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 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">
|
||||
@@ -153,7 +234,9 @@
|
||||
<div id="zl-map2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-side-tit"><asp:Literal runat="server" Text="<%$ Resources:Lan,FieldDynamics%>" /></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">
|
||||
@@ -182,15 +265,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-side-tit"><asp:Literal runat="server" Text="<%$ Resources:Lan,Live_photo_album%>" /></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 class="t-preview" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -203,20 +288,223 @@
|
||||
<script src="../res/liveplayer/liveplayer-element.min.js"></script>
|
||||
|
||||
<script>
|
||||
let AQWTChart = null; // 安全问题统计柱状图的实体
|
||||
// 5分钟刷新一次数据
|
||||
setInterval(function () {
|
||||
// 问题类型统计
|
||||
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
|
||||
// 劳务数据统计
|
||||
serviceData($("#labour").val())
|
||||
}, 300000)
|
||||
|
||||
$('.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()
|
||||
})
|
||||
$(document).ready(function () {
|
||||
// 初始化劳务数据
|
||||
$("#labour").val(nowDate())
|
||||
serviceData(nowDate())
|
||||
|
||||
// 切换日期时请求数据
|
||||
$('#labour').on("change", function (e) {
|
||||
serviceData($("#labour").val())
|
||||
})
|
||||
|
||||
|
||||
// 给安全问题统计赋值
|
||||
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)
|
||||
} else {
|
||||
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 + "日期")
|
||||
} else {
|
||||
problemTypeStatistics($('#safe_start').val(), $('#safe_end').val())
|
||||
}
|
||||
})
|
||||
|
||||
createChinaMap()
|
||||
})
|
||||
// 安全问题统计
|
||||
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(date) {
|
||||
$.ajax({
|
||||
url: "main3.aspx/GetServiceData",
|
||||
type: "POST",
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
data: JSON.stringify({
|
||||
date: date
|
||||
}),
|
||||
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: {
|
||||
containLabel: true,
|
||||
left: 0,
|
||||
bottom: resetSize(10),
|
||||
|
||||
},
|
||||
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',
|
||||
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: 50, //滚动条的截止位置（按比例分割你的柱状图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,//可选选项，自动滑动
|
||||
})
|
||||
@@ -226,257 +514,9 @@
|
||||
$(".swiper-button-next").on("click", function () {
|
||||
mySwiper.slideNext()
|
||||
})
|
||||
initZLMap("zl-map", <%=CheckControlRate%>, '<%=RectificationRate %>')
|
||||
initZLMap("zl-map1", <%=CQualifiedRate%>,'<%=PassRates %>')
|
||||
initZLMap("zl-map2", <%=PassRate%>, '<%=FistPassRateWelding %>')
|
||||
createChinaMap()
|
||||
|
||||
|
||||
createFXMap()
|
||||
function createFXMap() {
|
||||
var hseData = <%=SafeHiddenDanger%>
|
||||
//const list = [
|
||||
// { TypeName: "临时用电", ValueAmount: 1 },
|
||||
// { TypeName: "文明施工", ValueAmount: 3 },
|
||||
// { TypeName: "临边洞口", ValueAmount: 2 },
|
||||
// { TypeName: "脚手架", ValueAmount: 6 },
|
||||
// { TypeName: "个人防护用品", ValueAmount: 8 },
|
||||
// ]
|
||||
const list = [
|
||||
{ TypeName: hseData[0].name, ValueAmount: hseData[0].value },
|
||||
{ TypeName: hseData[1].name, ValueAmount: hseData[1].value },
|
||||
{ TypeName: hseData[2].name, ValueAmount: hseData[2].value },
|
||||
{ TypeName: hseData[3].name, ValueAmount: hseData[3].value },
|
||||
{ TypeName: hseData[4].name, ValueAmount: hseData[4].value },
|
||||
]
|
||||
// 数据类型
|
||||
let value = 26.5
|
||||
|
||||
const color1 = ['#FF8CA8', '#0BA1D3', '#2FFFEA', '#959128', "#338A64"]
|
||||
let rick = {}
|
||||
let rickIndex = 0
|
||||
|
||||
// 计算插入的数据的值
|
||||
let gap = (list.reduce((a, b) => a + Number(b.ValueAmount), 0) || 0) / 100;
|
||||
|
||||
// 重新组织数据
|
||||
// const newlist = []
|
||||
const newList1 = []
|
||||
list.forEach((f, fi) => {
|
||||
// newlist.push({ name: f.TypeName, value: f.ValueAmount, label: { color: color[fi] }, itemStyle: { color: color[fi] } });
|
||||
newList1.push({ name: f.TypeName, value: f.ValueAmount, label: { color: color1[fi] }, itemStyle: { color: color1[fi] } });
|
||||
rick[rickIndex] = { color: color1[fi] }
|
||||
rickIndex++
|
||||
// 插入一条新的颜色透明的数据用来占位
|
||||
// newlist.push({ name: "", value: gap, label: { color: "rgba(0, 0, 0, 0)" }, itemStyle: { color: "rgba(0, 0, 0, 0)" } })
|
||||
newList1.push({ name: "", value: gap, label: { color: "rgba(0, 0, 0, 0)" }, itemStyle: { color: "rgba(0, 0, 0, 0)" } })
|
||||
})
|
||||
|
||||
var opt = {
|
||||
title: [{
|
||||
text: [`{a| 安全\n问题统计}`],
|
||||
top: 85,
|
||||
left: 70,
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontWeight: 100,
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: resetSize(14)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
top: resetSize(30),
|
||||
left: resetSize(200),
|
||||
icon: 'rect',
|
||||
itemGap: resetSize(20),
|
||||
itemWidth: resetSize(8),
|
||||
itemHeight: resetSize(8),
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(255, 255, 255, 0.6)'
|
||||
},
|
||||
textStyle: {
|
||||
color: '#DADADA',
|
||||
rich: rick
|
||||
},
|
||||
formatter: function (h) {
|
||||
let str = ''
|
||||
let colorStyle = 'a'
|
||||
list.forEach((e, i) => {
|
||||
if (e.TypeName == h) {
|
||||
if (e.TypeName.length == 4) {
|
||||
str = `${e.TypeName} {${i}|${e.ValueAmount}}`
|
||||
} else {
|
||||
str = `${e.TypeName} {${i}|${e.ValueAmount}}`
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
return str;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [50, 60],
|
||||
center: [100, '50%'],
|
||||
data: newList1,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [62, 64],
|
||||
center: [100, '50%'],
|
||||
data: newList1,
|
||||
hoverAnimation: false,
|
||||
// silent:'ture',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [42, 51],
|
||||
center: [100, '50%'],
|
||||
data: newList1,
|
||||
silent: true,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
opacity: 0.8
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
zlevel: 101,
|
||||
name: '',
|
||||
type: 'gauge',
|
||||
radius: 70,
|
||||
center: [100, '50%'],
|
||||
startAngle: 90,
|
||||
endAngle: -240,
|
||||
// splitNumber: 20,
|
||||
progress: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: [[1, '#00C2FF']]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'gauge',
|
||||
radius: 95,
|
||||
center: [100, '50%'],
|
||||
startAngle: 30,
|
||||
endAngle: -30,
|
||||
// splitNumber: 20,
|
||||
progress: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: [[1, '#286C89']]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'gauge',
|
||||
radius: 95,
|
||||
center: [100, '50%'],
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
// splitNumber: 20,
|
||||
progress: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: [[1, '#286C89']]
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var myEchart = echarts.init(document.getElementById('aqtj'));
|
||||
myEchart.setOption(opt);
|
||||
}
|
||||
|
||||
function initZLMap(el, val, tit = "") {
|
||||
|
||||
const gaugeData = [
|
||||
@@ -510,7 +550,7 @@
|
||||
offset: 1,
|
||||
color: '#BDFF00'
|
||||
}
|
||||
]
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
@@ -580,7 +620,7 @@
|
||||
var myChart = echarts.init(chartDom);
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
function createChinaMap() {
|
||||
var chinaData = JSON.parse('<%=ProjectInfo %>')
|
||||
// 地图 点
|
||||
@@ -608,7 +648,7 @@
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.75, // 比例
|
||||
top: 140,
|
||||
top: 180,
|
||||
zlevel: 8,
|
||||
zoom: 1.4,
|
||||
tooltip: {
|
||||
@@ -664,7 +704,7 @@
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.75, // 比例
|
||||
top: 130,
|
||||
top: 170,
|
||||
zlevel: 9,
|
||||
zoom: 1.4,
|
||||
regions: [
|
||||
@@ -700,7 +740,7 @@
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.75, // 比例
|
||||
top: 120,
|
||||
top: 160,
|
||||
zlevel: 12,
|
||||
zoom: 1.4,
|
||||
label: {
|
||||
@@ -795,61 +835,61 @@
|
||||
|
||||
// 视频
|
||||
var videoids = [];
|
||||
var videoIndex = 0;
|
||||
var videoIndex = 0;
|
||||
var authToken = '';
|
||||
var videoHost = '<%= VideoHost %>';
|
||||
initVideo()
|
||||
runShowVideo();
|
||||
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);
|
||||
}
|
||||
$.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');
|
||||
}, '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);
|
||||
function runShowVideo() {
|
||||
if (videoids.length <= 0) {
|
||||
setTimeout(function () {
|
||||
runShowVideo();
|
||||
}, 500000);
|
||||
}, 'json');
|
||||
}
|
||||
}, 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("您没有权限！");
|
||||
}
|
||||
})
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user