1
This commit is contained in:
@@ -0,0 +1,774 @@
|
||||
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main1.aspx.cs" Inherits="FineUIPro.Web.common.main1" %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head runat="server">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<link href="../res/css/indexv1.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="../res/lib/flexlib.js"></script>
|
||||
<form id="form1" runat="server">
|
||||
|
||||
|
||||
|
||||
<!-- 导航 1 -->
|
||||
<div id="wrap">
|
||||
<div class="side_left">
|
||||
<!-- 人员统计 0 -->
|
||||
<div class="plate">
|
||||
<div class="plate-title">人员统计</div>
|
||||
<div class="people">
|
||||
<div class="people-nums">
|
||||
<div class="people-nums_dot">
|
||||
<div class="label">管理人员</div>
|
||||
<div class="val" runat="server" id="divGLPerson">0<span>个</span></div>
|
||||
</div>
|
||||
<div class="people-nums_dot" style="margin-top:2.8947rem;">
|
||||
<div class="label">作业人员</div>
|
||||
<div class="val" id="divZYPerson" runat="server">0<span>个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="people-map">
|
||||
<div id="onGuardMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人员统计 1 -->
|
||||
|
||||
<!-- 风险管控 0 -->
|
||||
<div class="plate">
|
||||
<div class="plate-title">风险管控</div>
|
||||
<div class="risk">
|
||||
<div id="riskMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 风险管控 1 -->
|
||||
<!-- 作业许可统计 0 -->
|
||||
<div class="plate">
|
||||
<div class="plate-title">作业许可统计</div>
|
||||
<div class="jobLicensesMap">
|
||||
<div id="jobLicensesMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 作业许可统计 1 -->
|
||||
</div>
|
||||
<div class="side_center">
|
||||
<div class="plate1">
|
||||
<div class="item">
|
||||
<div class="item-label"></div>
|
||||
<div class="item-label">在建项目(个)</div>
|
||||
<div class="item-num" runat="server" id="divProjectNum"></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-label">年度累计</div>
|
||||
<div class="item-label">承接施工产值(亿元)</div>
|
||||
<div class="item-num" runat="server" id="divYearPlanOutPutValue" >--</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-label">年度累计</div>
|
||||
<div class="item-label">施工实际产值(亿元)</div>
|
||||
<div class="item-num" runat="server" id="divYearActualOutPutValue">--</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-label">年度累计</div>
|
||||
<div class="item-label">签订合同额(亿元)</div>
|
||||
<div class="item-num" runat="server" id="divHTAmount">0</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-label">年度累计</div>
|
||||
<div class="item-label">施工分包合同(个)</div>
|
||||
<div class="item-num" runat="server" id="divHTNum"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plate2">
|
||||
<div class="changMap imgbg"><b>中国地图</b> <span class="imgbg"></span></div>
|
||||
<div class="map">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side_right">
|
||||
<div class="plate">
|
||||
<div class="plate-title">安全统计</div>
|
||||
<div class="safe">
|
||||
<div class="safe-label">安全人工时</div>
|
||||
<div class="safe-num" id="divSafeWorkTime" runat="server">00000000000</div>
|
||||
<div class="safe-boxs">
|
||||
<div class="safe-box">
|
||||
<div class="safe-box_label" runat="server" id="divAllRectify">0<span>个</span></div>
|
||||
<div class="safe-box_val">问题总数</div>
|
||||
</div>
|
||||
<div class="safe-box">
|
||||
<div class="safe-box_label orange" id="divRectifyRate" runat="server">0<span>%</span></div>
|
||||
<div class="safe-box_val">整改率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plate">
|
||||
<div class="plate-title">安全隐患分析</div>
|
||||
<div class="safetyAnalysisMap">
|
||||
<div id="safetyAnalysisMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plate">
|
||||
<div class="plate-title">质量统计</div>
|
||||
<div class="quality">
|
||||
<div class="quality-top">
|
||||
<div class="quality-top_label">问题总数</div>
|
||||
<div class="quality-top_val" id="divCQMSAllNum" runat="server">0<span>个</span></div>
|
||||
</div>
|
||||
<div class="qualityMap">
|
||||
<div id="qualityMap1"></div>
|
||||
<div id="qualityMap2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../res/lib/echarts.min.js"></script>
|
||||
<script src="../res/lib/china.js"></script>
|
||||
<script src="../res/lib/world.js"></script>
|
||||
<script src="../res/js/optionV1.js"></script>
|
||||
<script src="../res/lib/jquery.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
// 在岗率数据配置
|
||||
let guardData1 = [
|
||||
{
|
||||
value: <%=OnDutyRate%>,
|
||||
name: '在岗率',
|
||||
title: {
|
||||
color: '#12CDA2',
|
||||
offsetCenter: ['0%', '20%'],
|
||||
fontSize: 0.6316 * basePx
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '-10%'],
|
||||
}
|
||||
}
|
||||
];
|
||||
let guardOption1 = {
|
||||
series: [
|
||||
{
|
||||
id: '在岗率',
|
||||
radius: '99%',
|
||||
type: 'gauge',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: false,
|
||||
clip: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1.0526 * basePx,
|
||||
color: [[1, '#071646']],
|
||||
shadowColor: '#1C466C',
|
||||
shadowBlur: 2,
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#0FD09C',
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 0.5263 * basePx
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
data: guardData1,
|
||||
detail: {
|
||||
offsetCenter: ['0%', '120%'],
|
||||
fontSize: 1.0526 * basePx,
|
||||
color: '#12CDA2',
|
||||
formatter: '{value}{a|%}',
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 0.4211 * basePx,
|
||||
color: '#1AB1FF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 人员统计 在岗率初始化
|
||||
var guardMap = echarts.init(document.getElementById('onGuardMap'));
|
||||
guardMap.setOption(guardOption1)
|
||||
|
||||
// 风险管理初始化
|
||||
|
||||
|
||||
// 风险管控
|
||||
let riskData1 = [
|
||||
{ value: <%=riskData4%>, name: '四级/重大风险', label: { color: '#FF7473' }, itemStyle: { color: '#FF7473' }, labelLine: { lineStyle: { color: '#FF7473' } } },
|
||||
{ value: <%=riskData1%>, name: '一级/低风险', label: { color: '#5C5AFF' }, itemStyle: { color: '#5C5AFF' }, labelLine: { lineStyle: { color: '#5C5AFF' } } },
|
||||
{ value: <%=riskData2%>, name: '三级/较大风险', label: { color: '#FFA502' }, itemStyle: { color: '#FFA502' }, labelLine: { lineStyle: { color: '#FFA502' } } },
|
||||
{ value: <%=riskData3%>, name: '二级/一般风险', label: { color: '#E7EA2E' }, itemStyle: { color: '#E7EA2E' }, labelLine: { lineStyle: { color: '#E7EA2E' } } },
|
||||
]
|
||||
let riskOption1 = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['20%', '60%'],
|
||||
center: ['50%', '50%'],
|
||||
label: {
|
||||
formatter: '{b}\n{c}'
|
||||
},
|
||||
data: riskData1.sort(function (a, b) {
|
||||
return a.value - b.value;
|
||||
}),
|
||||
roseType: 'radius',
|
||||
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var riskMap = echarts.init(document.getElementById('riskMap'));
|
||||
riskMap.setOption(riskOption1)
|
||||
|
||||
// 作业许可统计
|
||||
|
||||
|
||||
// 作业许可统计
|
||||
|
||||
var license =<%=License %>;
|
||||
let yMax1 = 500;
|
||||
let dataShadow1 = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
dataShadow1.push(yMax1);
|
||||
}
|
||||
let jobOption1 = {
|
||||
grid: {
|
||||
top: 1.3158 * basePx,
|
||||
left: 3.6842 * basePx,
|
||||
height: '85%',
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
data: license.categories,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
triggerEvent: true,
|
||||
axisLabel: {
|
||||
color: '#7ECEF7',
|
||||
width: 2.6316 * basePx,
|
||||
overflow: 'truncate',
|
||||
align: 'right',
|
||||
},
|
||||
},
|
||||
{
|
||||
data: data,
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
fontSize: 0.5263 * basePx,
|
||||
color: '#ffffff'
|
||||
},
|
||||
z: 0.5263 * basePx
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#091F60',
|
||||
borderRadius: 0.2632 * basePx,
|
||||
},
|
||||
barWidth: 0.5263 * basePx,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#12CDA2' },
|
||||
{ offset: 1, color: '#091F60' }
|
||||
]),
|
||||
barBorderRadius: [0.2632 * basePx, 0.2632 * basePx, 0.2632 * basePx, 0.2632 * basePx]
|
||||
},
|
||||
data: license.series[0].data
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
var jobLicensesMap = echarts.init(document.getElementById('jobLicensesMap'));
|
||||
jobLicensesMap.setOption(jobOption1)
|
||||
|
||||
// 安全隐患分析
|
||||
|
||||
|
||||
var safeHiddenDanger = JSON.parse('<%=SafeHiddenDanger %>')
|
||||
let xdatay = safeHiddenDanger.legend
|
||||
let data1y = safeHiddenDanger.series[0].data
|
||||
let safetyAnalysisOption1 = {
|
||||
grid: {
|
||||
left: 2.1053 * basePx,
|
||||
right: '3%',
|
||||
bottom: 1.0526 * basePx,
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: xdatay,
|
||||
triggerEvent: true,
|
||||
axisTick: {
|
||||
// 刻度线
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
rotate: -30,
|
||||
interval: 0,
|
||||
width: 3.1579 * basePx,
|
||||
overflow: 'truncate',
|
||||
textStyle: {
|
||||
color: '#00BEFF',
|
||||
fontSize: 0.6316 * basePx
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0D3C65'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
// y轴线
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#00BEFF',
|
||||
fontSize: 0.6316 * basePx
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'hill',
|
||||
type: 'pictorialBar',
|
||||
barWidth: 1.5789 * basePx,
|
||||
symbol:
|
||||
'triangle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00FEFF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#4390FA'
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data1y,
|
||||
z: 10
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
var safetyAnalysisMap = echarts.init(document.getElementById('safetyAnalysisMap'));
|
||||
safetyAnalysisMap.setOption(safetyAnalysisOption1)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 质量统计
|
||||
|
||||
const quality1Data1 = [
|
||||
{
|
||||
value: <%=CRectificationRate%>,
|
||||
name: '整改率',
|
||||
title: {
|
||||
color: '#1AB1FF',
|
||||
offsetCenter: ['0%', '125%'],
|
||||
fontSize: 0.6316 * basePx
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '10%'],
|
||||
}
|
||||
}
|
||||
];
|
||||
let quality1ption1 = {
|
||||
series: [
|
||||
{
|
||||
id: '整改率',
|
||||
radius: '75%',
|
||||
type: 'gauge',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: false,
|
||||
clip: false,
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 0.5263 * basePx,
|
||||
color: [[1, '#0F2164']]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFB260',
|
||||
borderRadius: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 0.5263 * basePx
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
data: quality1Data1,
|
||||
detail: {
|
||||
fontSize: 0.7368 * basePx,
|
||||
color: '#FFB260',
|
||||
formatter: '{value}{a|%}',
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 0.4211 * basePx,
|
||||
color: '#1AB1FF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const quality2Data2 = [
|
||||
{
|
||||
value:<%=CQualifiedRate%>,
|
||||
name: '合格率',
|
||||
title: {
|
||||
color: '#1AB1FF',
|
||||
offsetCenter: ['0%', '125%'],
|
||||
fontSize: 0.6316 * basePx
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '10%'],
|
||||
}
|
||||
}
|
||||
];
|
||||
let quality2ption2 = {
|
||||
series: [
|
||||
{
|
||||
id: '合格率',
|
||||
radius: '70%',
|
||||
type: 'gauge',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: false,
|
||||
clip: false,
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 0.5263 * basePx,
|
||||
color: [[1, '#0F2164']]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#12CDA2',
|
||||
borderRadius: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 0.5263 * basePx
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
data: quality2Data2,
|
||||
detail: {
|
||||
fontSize: 0.7368 * basePx,
|
||||
color: '#12CDA2',
|
||||
formatter: '{value}{a|%}',
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 0.4211 * basePx,
|
||||
color: '#1AB1FF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
var qualityMap1 = echarts.init(document.getElementById('qualityMap1'));
|
||||
qualityMap1.setOption(quality1ption1)
|
||||
var qualityMap2 = echarts.init(document.getElementById('qualityMap2'));
|
||||
qualityMap2.setOption(quality2ption2)
|
||||
</script>
|
||||
<script>
|
||||
|
||||
|
||||
var mapProjectPoint = JSON.parse('<%=ProjectInfo %>')
|
||||
// 地图
|
||||
let chinaData1 = [
|
||||
{
|
||||
name: '合肥',
|
||||
value: [117.27, 31.86, 55]
|
||||
},
|
||||
{
|
||||
name: '北京',
|
||||
value: [116.40, 39.90, 110]
|
||||
},
|
||||
{
|
||||
name: '重庆',
|
||||
value: [106.55, 29.56, 32]
|
||||
}
|
||||
]
|
||||
let chinaOption1 = {
|
||||
geo: [
|
||||
{
|
||||
// 地理坐标系组件
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.75, // 比例
|
||||
top: 6.3158 * basePx,
|
||||
zlevel: 1,
|
||||
zoom: 1.4,
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
itemStyle: {
|
||||
// 隐藏地图
|
||||
normal: {
|
||||
opacity: 0, // 为 0 时不绘制该图形
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false // 隐藏文字
|
||||
}
|
||||
}
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
areaColor: "#1B3885",
|
||||
}
|
||||
},
|
||||
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
// 地理坐标系组件
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.75, // 比例
|
||||
top: 6.3158 * basePx,
|
||||
zlevel: 10,
|
||||
zoom: 1.4,
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
itemStyle: {
|
||||
// 隐藏地图
|
||||
normal: {
|
||||
opacity: 0, // 为 0 时不绘制该图形
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false // 隐藏文字
|
||||
}
|
||||
}
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
borderWidth: 0.1053 * basePx,
|
||||
areaColor: "#214DA9",
|
||||
borderColor: "#2FA1D7",
|
||||
// shadowBlur: 20,
|
||||
// shadowOffsetY:10,
|
||||
// shadowOffsetX:10,
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
itemStyle: {
|
||||
areaColor: 'red',
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
],
|
||||
series: [{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 1.0526 * basePx,
|
||||
zlevel: 100,
|
||||
itemStyle: {
|
||||
color: "#FDFF04"
|
||||
},
|
||||
rippleEffect: {
|
||||
|
||||
},
|
||||
data: mapProjectPoint,
|
||||
}],
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 地图
|
||||
echarts.registerMap('china', chinaJson);
|
||||
var chart = echarts.init(document.getElementById('map'));
|
||||
chart.setOption(chinaOption1);
|
||||
// 世界地图跳转事件
|
||||
chart.on('click', function (params) {
|
||||
console.log(params);
|
||||
if (params.seriesId && params.seriesId == 'isSkip') {
|
||||
// isFullScreen 判单是不是全屏保证当进入项目时也是全屏状态
|
||||
location.href = './indexv2.html'
|
||||
}
|
||||
});
|
||||
// 切换地图的事件
|
||||
$('.changMap').click(function () {
|
||||
let val = $('.changMap>b').text()
|
||||
if (val == '中国地图') {
|
||||
echarts.registerMap('word', wordJson);
|
||||
chart.setOption(wordOption);
|
||||
$('.changMap>b').text('世界地图')
|
||||
} else {
|
||||
echarts.registerMap('china', chinaJson);
|
||||
chart.setOption(chinaOption);
|
||||
$('.changMap>b').text('中国地图')
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 切换全屏
|
||||
$('.magnify').click(function () {
|
||||
const element = document.documentElement
|
||||
if (document.fullscreenElement) {
|
||||
// 如果浏览器有这个Function
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
} else {
|
||||
// 如果浏览器有这个Function
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen()
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen()
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen()
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen()
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
// 监听全屏变化
|
||||
window.onresize = function () {
|
||||
if (document.fullscreenElement) {
|
||||
$('.nav-site_right').hide();
|
||||
$('.nav-site_left').hide();
|
||||
$('.magnify').text('退出全屏');
|
||||
} else {
|
||||
$('.nav-site_right').show();
|
||||
$('.nav-site_left').show();
|
||||
$('.magnify').text('全屏');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user