857 lines
33 KiB
Plaintext
857 lines
33 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?v14" rel="stylesheet" />
|
|||
|
|
<link href="../res/indexv2/assets/css/swiper-bundle.min.css" rel="stylesheet" />
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<style type="text/css">
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
</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>
|
|||
|
|
</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-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>
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
$('.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()
|
|||
|
|
})
|
|||
|
|
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 = [
|
|||
|
|
{
|
|||
|
|
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: 140,
|
|||
|
|
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: 130,
|
|||
|
|
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: 120,
|
|||
|
|
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>
|