省侧大屏
This commit is contained in:
parent
5de92e69e1
commit
43d0bd8739
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,76 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #000;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
html {
|
||||
background: url("../image/背景.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#nav-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#nav-left {
|
||||
width: 27%;
|
||||
height: 100%;
|
||||
}
|
||||
#nav-left p{
|
||||
margin-top: 50px;
|
||||
font-size: 20px;
|
||||
background-image: linear-gradient(to bottom, #DAF8F4FF, #44DEC9FA);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
#nav-icon {
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: 81%;
|
||||
top: 0.5%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#nav-icon img{
|
||||
margin-right: 10px;
|
||||
}
|
||||
#nav-right {
|
||||
width: 73%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav-right ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#nav-right ul li {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#nav-right ul li p {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
#ifr-box {
|
||||
width: 100%;
|
||||
height: calc(100vh - 50px)
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-family: 'Alibaba PuHuiTi R';
|
||||
}
|
||||
|
||||
#main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#left-box, #center-box, #right-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#center-box {
|
||||
width: 40%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
background: url("../image/Rectangle107.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#echarts-map {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#left-box {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#right-box {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#left-box, #right-box {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#pro-desc p {
|
||||
/*首行缩进*/
|
||||
text-indent: 36px;
|
||||
/*字体间距*/
|
||||
line-height: 36px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#engineering-statistic {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
background: url("../image/工程统计.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
padding: 8% 3% 3% 3%;
|
||||
}
|
||||
|
||||
#engineering-statistic-bg {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
background: url("../image/Group497.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#quality-ranking {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 28%;
|
||||
background: url("../image/施工质量排名.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
padding: 8% 3% 3% 3%;
|
||||
}
|
||||
|
||||
#environment-analysis {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
background: url("../image/环境监测分析.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
padding: 10% 3% 4% 3%;
|
||||
display: flex;
|
||||
gap: 3%;
|
||||
}
|
||||
|
||||
.environment-analysis-item {
|
||||
width: 33.33%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#environment-analysis-1 {
|
||||
background: url("../image/空气质量.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#environment-analysis-2 {
|
||||
background: url("../image/噪声水平.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#environment-analysis-3 {
|
||||
background: url("../image/灰尘浓度.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#device-status {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 32%;
|
||||
background: url("../image/设备状态.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/*右侧*/
|
||||
#safety-analysis {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: url("../image/工程安全隐患分析.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#efficiency-analysis {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: url("../image/工人效率分析.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#resource-rate {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
background: url("../image/资源利用及能源使用.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.resource-rate-item {
|
||||
width: 33.33%;
|
||||
height: 100%;
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
#alarm-reminder {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 22%;
|
||||
background: url("../image/告警提醒.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 512 B |
Binary file not shown.
|
After Width: | Height: | Size: 518 B |
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 681 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 B |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<link rel="stylesheet" href="../../plugin/toolTip/mTips.css">
|
||||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../plugin/toolTip/mTips.js"></script>
|
||||
<script src="../../js/publics/aes.js"></script>
|
||||
<script src="../../js/publics/sm3.js"></script>
|
||||
<title>导航页</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="nav-box" class="layout">
|
||||
<div id="nav-icon">
|
||||
<img src="../../img/navigation/logout.png" alt="退出" data-mtpis="退出">
|
||||
</div>
|
||||
</div>
|
||||
<div id="ifr-box">
|
||||
<iframe id="indexIframe" width="100%" height="99%" frameborder="0"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
<!--<script src="../../js/pages/home/navigation.js" type="text/javascript"></script>-->
|
||||
<script src="./js/main.js" type="text/javascript"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,862 @@
|
|||
let element, layer;
|
||||
layui.use(['layer', 'element'], function () {
|
||||
element = layui.element;
|
||||
layer = layui.layer;
|
||||
|
||||
initMainMap()
|
||||
|
||||
initEcharts()
|
||||
|
||||
initDeviceStatus()
|
||||
|
||||
initEfficiencyAnalysis()
|
||||
|
||||
initResourceRate()
|
||||
});
|
||||
|
||||
$('#indexIframe').attr('src', './views/main.html');
|
||||
|
||||
let mainMapPointList = [], mapPointList = [], weatherList = [], showWeatherList = [];
|
||||
|
||||
$.getJSON('../config/risk.json', function (data) {
|
||||
// console.log(data)
|
||||
mainMapPointList = data
|
||||
})
|
||||
|
||||
/*判空*/
|
||||
function dealEmptyString(str) {
|
||||
if (str) {
|
||||
return str;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/*判断球机是否在线*/
|
||||
function isOnline(value) {
|
||||
if (value) {
|
||||
if (value === '0' || value === 0) {
|
||||
return '离线';
|
||||
} else {
|
||||
return '在线';
|
||||
}
|
||||
} else {
|
||||
return '离线';
|
||||
}
|
||||
}
|
||||
|
||||
// 安徽省地图
|
||||
function initMainMap(dataMap = []) {
|
||||
let uploadedDataURL = "../config/anhui.json";
|
||||
let myChart = echarts.init(document.getElementById('echarts-map'));
|
||||
let clickCityName = null, clickCityCode = null;
|
||||
|
||||
let convertData = function (data) {
|
||||
// let res = [];
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// let geoCoord = data[i].coordinate;
|
||||
// if (geoCoord) {
|
||||
// res.push({
|
||||
// proName: data[i].proName,
|
||||
// riskLevel: data[i].riskType,
|
||||
// workContent: dealEmptyString(data[i].workContent),
|
||||
// isOnline: isOnline(data[i].ballStatus),
|
||||
// workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
|
||||
// value: geoCoord.concat(data[i].value),
|
||||
// coordinate: data[i].coordinate,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// console.log(res)
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
$.getJSON(uploadedDataURL, function (geoJson) {
|
||||
echarts.registerMap('anhui', geoJson);
|
||||
myChart.hideLoading();
|
||||
let max = 480,
|
||||
min = 1.15;
|
||||
|
||||
let option = {
|
||||
silent: false,
|
||||
backgroundColor: 'transparent',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
enterable: true,
|
||||
position: function (pos, params, dom, rect, size) {
|
||||
if ($(dom).children($('p')).length === 0) $(dom).css('display', 'none')
|
||||
pos = [pos[0], pos[1] + 10];
|
||||
return pos;
|
||||
},
|
||||
backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
borderColor: "#174FDD",
|
||||
// formatter:
|
||||
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
|
||||
|
||||
},
|
||||
geo: [
|
||||
{
|
||||
map: 'anhui',
|
||||
zlevel: 5,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontFamily: 'Alibaba PuHuiTi R'
|
||||
},
|
||||
rotate: -20,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
aspectScale: 0.8, //长宽比
|
||||
roam: false,
|
||||
scaleLimit: {
|
||||
max: max,
|
||||
min: min
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'rgba(121,255,255,0.5)',
|
||||
borderColor: '#7ad4ff',
|
||||
borderWidth: 1,
|
||||
shadowColor: 'rgba(53,109,187,0.6)',
|
||||
shadowBlur: 100,
|
||||
shadowOffsetX:'-20px',
|
||||
shadowOffsetY: '100px',
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: 'rgba(121,255,255,0.5)',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
// {
|
||||
// map: 'anhui',
|
||||
// top: '12%',
|
||||
// zlevel: 4,
|
||||
// aspectScale: 0.8, //长宽比
|
||||
// silent: true, // 禁止这一层级选中
|
||||
// roam: false,
|
||||
// itemStyle: {
|
||||
// areaColor: 'rgba(121,255,255,0.3)',
|
||||
// color: 'rgba(121,255,255,0.3)', // 背景
|
||||
// borderWidth: '1', // 边框宽度
|
||||
// borderColor: 'rgba(121,255,255,0.3)', // 边框颜色
|
||||
// },
|
||||
// scaleLimit: {
|
||||
// max: max,
|
||||
// min: min
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: false
|
||||
// }
|
||||
//
|
||||
// },
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '在线',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
animation: false,
|
||||
symbolSize: 20,
|
||||
symbol: function (val) {
|
||||
console.log(val)
|
||||
switch (val[2]) {
|
||||
case 2:
|
||||
return 'image://../image/二级.png';
|
||||
break;
|
||||
case 3:
|
||||
return 'image://../image/三级.png';
|
||||
break;
|
||||
case 4:
|
||||
return 'image://../image/四级.png';
|
||||
break;
|
||||
case 5:
|
||||
return 'image://../image/五级.png';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 15,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
zlevel: 6,
|
||||
z: 6,
|
||||
data: convertData(dataMap)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
myChart.clear();
|
||||
myChart.setOption(option, true);
|
||||
myChart.off('dblclick').on("dblclick", function (params) {
|
||||
if(params.componentType === 'geo'){
|
||||
$('.switch-type').css('display', 'none');
|
||||
$('.switch-btn').css('display', 'none');
|
||||
$('.switch-type2').removeAttr('style');
|
||||
$('.multiselect').css('display', 'none')
|
||||
$('.back').removeAttr('style');
|
||||
// setUploadedDataURL2(params.name);
|
||||
}
|
||||
})
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 工程安全隐患分析
|
||||
function initEcharts() {
|
||||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
let xLabel = ['合肥', '芜湖', '马鞍山', '蚌埠', '淮南', '淮北', '铜陵', '安庆', '黄山', '阜阳', '六安', '滁州'];
|
||||
let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
|
||||
let dataValue1 = [40, 35, 34, 15, 56, 15, 12, 25, 34, 42, 20, 30,];
|
||||
const tooltip = {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
borderColor: "rgba(255,255,255, .5)",
|
||||
};
|
||||
let option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip,
|
||||
legend: {
|
||||
show: true,
|
||||
top: '15%',
|
||||
right: '2%',
|
||||
itemWidth: 30, // 图例标记的图形宽度。
|
||||
// itemGap: 20, // 图例每项之间的间隔。
|
||||
itemHeight: 10, // 图例标记的图形高度。
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
padding: [0, 8, 0, 8]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
bottom: '15%',
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5A6E71',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#233653',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: xLabel,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "",
|
||||
nameTextStyle: {
|
||||
color: fontColor,
|
||||
fontSize: fontSize,
|
||||
padding: [0, 60, 0, 0],
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
// minInterval: 1,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25393B',
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#008de7',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '周计划数',
|
||||
type: 'line',
|
||||
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: '#1ED6FF', // 线条颜色
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1ED6FF',//拐点颜色
|
||||
// borderColor: '#fff600',//拐点边框颜色
|
||||
// borderWidth: 13//拐点边框大小
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily,
|
||||
position: 'top', //在上方显示
|
||||
formatter: function (res) {
|
||||
if (res.value) {
|
||||
return res.value
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
symbolSize: 8, //设定实心点的大小
|
||||
areaStyle: {
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1ED6FF30',
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
color: '#1ED6FF20',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#1ED6FF10',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
data: dataValue,
|
||||
},
|
||||
{
|
||||
name: '隐患数',
|
||||
type: 'line',
|
||||
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: '#FE533C', // 线条颜色
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#FE533C',//拐点颜色
|
||||
// borderColor: '#fff600',//拐点边框颜色
|
||||
// borderWidth: 13//拐点边框大小
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
color: fontColor,
|
||||
fontFamily: fontFamily,
|
||||
position: 'top', //在上方显示
|
||||
formatter: function (res) {
|
||||
if (res.value) {
|
||||
return res.value
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
symbolSize: 8, //设定实心点的大小
|
||||
areaStyle: {
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FE533C30',
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
color: '#FE533C20',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ffba0010',
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
data: dataValue1,
|
||||
}
|
||||
]
|
||||
}
|
||||
let safetyAnalysis = echarts.init(document.getElementById('safety-analysis'));
|
||||
safetyAnalysis.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
safetyAnalysis.resize();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 地图等级选中
|
||||
/*地图风险等级选中*/
|
||||
$(".check-risk").click(function (e) {
|
||||
let checkedName = $(this).find('p').eq(0).attr("checkedName");
|
||||
let isCheck = $(this).attr("isCheck");
|
||||
|
||||
|
||||
if (checkedName === '' && isCheck === '1') {
|
||||
$('.check-risk').each(function () {
|
||||
if ($(this).attr("isCheck") === '1') {
|
||||
$(this).attr("isCheck", '0')
|
||||
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
|
||||
}
|
||||
})
|
||||
} else if (checkedName === '' && isCheck === '0') {
|
||||
$('.check-risk').each(function () {
|
||||
if ($(this).attr("isCheck") === '0') {
|
||||
$(this).attr("isCheck", '1')
|
||||
let checkedValue = $(this).find('p').eq(0).attr("checkedName");
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
|
||||
}
|
||||
})
|
||||
} else if (checkedName !== '' && isCheck === '1') {
|
||||
$(this).attr("isCheck", '0')
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
|
||||
} else if (checkedName !== '' && isCheck === '0') {
|
||||
$(this).attr("isCheck", '1')
|
||||
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
|
||||
}
|
||||
// let weatherFlag = $('.switch-form').find('.layui-form-item').eq(0).find('input').eq(0).prop('checked')
|
||||
let weatherFlag = false
|
||||
// let terrainFlag = $('.switch-form').find('.layui-form-item').eq(1).find('input').eq(0).prop('checked')
|
||||
let terrainFlag = $('.switch-form').find('.layui-form-item').eq(0).find('input').eq(0).prop('checked')
|
||||
if (!weatherFlag) {
|
||||
mapSearch();
|
||||
if (!terrainFlag) {
|
||||
// console.log(mapPointList)
|
||||
// initMainMap(mapPointList)
|
||||
} else {
|
||||
clearOverlay(1)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 设置风险等级选中样式
|
||||
function setRiskIcon(value) {
|
||||
return value === '1' ? '../image/选择.png' : '../image/未选择.png';
|
||||
}
|
||||
|
||||
function mapSearch() {
|
||||
let selRiskList = [];
|
||||
mapPointList.splice(0, mapPointList.length);
|
||||
$('.check-risk').each(function () {
|
||||
if ($(this).attr("isCheck") === '1') {
|
||||
if ($(this).find('p').eq(0).attr("checkedName")) {
|
||||
selRiskList.push($(this).find('p').eq(0).attr("checkedName"))
|
||||
}
|
||||
}
|
||||
})
|
||||
if (selRiskList.length) {
|
||||
$.each(selRiskList, function (index, item) {
|
||||
let dataList = mainMapPointList.filter(item2 => {
|
||||
if (item === '4') {
|
||||
return item2.riskType === '4' || item2.riskType === '5';
|
||||
} else {
|
||||
return item2.riskType === item
|
||||
}
|
||||
})
|
||||
$.each(dataList, function (index3, item3) {
|
||||
mapPointList.push(item3)
|
||||
})
|
||||
})
|
||||
}
|
||||
let keyWord = $('.keyWord').val();
|
||||
if (keyWord) {
|
||||
let dataList = mapPointList.filter(item => {
|
||||
if (item.proName.indexOf(keyWord) != -1 || item.foreman.indexOf(keyWord) != -1) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
mapPointList.splice(0, mapPointList.length);
|
||||
if (dataList.length > 0) {
|
||||
$.each(dataList, function (index, item) {
|
||||
mapPointList.push(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设备状态
|
||||
function initDeviceStatus() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
bottom: '15%',
|
||||
},
|
||||
legend: {
|
||||
data: ['总数', '在线', '不在线'],
|
||||
show: true,
|
||||
top: '15%',
|
||||
right: '5%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
padding: [0, 8, 0, 8]
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// name: 'Precipitation',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 15,
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '在线',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '不在线',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let deviceAnalysis = echarts.init(document.getElementById('device-status'));
|
||||
deviceAnalysis.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
deviceAnalysis.resize();
|
||||
});
|
||||
|
||||
option && deviceAnalysis.setOption(option);
|
||||
}
|
||||
|
||||
// 工人效率分析
|
||||
function initEfficiencyAnalysis() {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
bottom: '15%',
|
||||
},
|
||||
legend: {
|
||||
data: ['时间', '严重', '效率'],
|
||||
show: true,
|
||||
top: '15%',
|
||||
right: '5%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
padding: [0, 8, 0, 8]
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// name: 'Precipitation',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '时间',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '严重',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '效率',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let efficiencyAnalysis = echarts.init(document.getElementById('efficiency-analysis'));
|
||||
efficiencyAnalysis.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
efficiencyAnalysis.resize();
|
||||
});
|
||||
|
||||
option && efficiencyAnalysis.setOption(option);
|
||||
}
|
||||
|
||||
// 资源利用
|
||||
function initResourceRate() {
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitNumber: 10,
|
||||
itemStyle: {
|
||||
color: 'green',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2,
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
width: 10
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 10
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
borderColor: '#999',
|
||||
borderWidth: 0,
|
||||
width: '60%',
|
||||
lineHeight: 40,
|
||||
height: 40,
|
||||
borderRadius: 0,
|
||||
offsetCenter: [0, '-25%'],
|
||||
valueAnimation: true,
|
||||
formatter: function (value) {
|
||||
return '{value|' + value.toFixed(0) + '}{unit|%}';
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff'
|
||||
},
|
||||
unit: {
|
||||
fontSize: 20,
|
||||
color: '#fff',
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 50
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let element = document.getElementsByClassName('resource-rate-item')
|
||||
for (let i=0; i<element.length; i++) {
|
||||
console.log(element[i])
|
||||
let resourceRate = echarts.init(element[i]);
|
||||
resourceRate.setOption(option, true);
|
||||
window.addEventListener("resize", function () {
|
||||
resourceRate.resize();
|
||||
});
|
||||
|
||||
option && resourceRate.setOption(option);
|
||||
}
|
||||
|
||||
// let resourceRate = echarts.init(document.getElementById('efficiency-analysis'));
|
||||
// resourceRate.setOption(option, true);
|
||||
// window.addEventListener("resize", function () {
|
||||
// resourceRate.resize();
|
||||
// });
|
||||
//
|
||||
// option && resourceRate.setOption(option);
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../css/font.css">
|
||||
<link rel="stylesheet" href="../../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../css/main.css">
|
||||
<script src="../../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../../js/publics/public.js"></script>
|
||||
<script src="../../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||||
<script src="../../../js/publics/echarts.js"></script>
|
||||
<script src="../../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../../js/publics/aes.js"></script>
|
||||
<script src="../../../js/publics/sm3.js"></script>
|
||||
<title>首页</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main-box" class="layout">
|
||||
|
||||
<div id="left-box">
|
||||
<div id="engineering-statistic">
|
||||
<div id="engineering-statistic-bg"></div>
|
||||
</div>
|
||||
<div id="quality-ranking"></div>
|
||||
<div id="environment-analysis">
|
||||
<div id="environment-analysis-1" class="environment-analysis-item"></div>
|
||||
<div id="environment-analysis-2" class="environment-analysis-item"></div>
|
||||
<div id="environment-analysis-3" class="environment-analysis-item"></div>
|
||||
</div>
|
||||
<div id="device-status">
|
||||
<div>
|
||||
<p>
|
||||
<span></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="center-box">
|
||||
<div id="echarts-map">
|
||||
|
||||
</div>
|
||||
<div class="multiselect layout" id="multiselect">
|
||||
<div class="check-risk layout" isCheck='1'><img src="../image/未选择.png">
|
||||
<p checkedName="" style="color: white">全选</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../image/未选择.png">
|
||||
<p checkedName="2" style="color: #bf0b2c;">二级</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../image/未选择.png">
|
||||
<p checkedName="3" style="color: #DD690B;">三级</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../image/未选择.png">
|
||||
<p checkedName="4" style="color: #dcdc43;">四级</p>
|
||||
</div>
|
||||
<div class="check-risk layout" isCheck='1'><img src="../image/未选择.png">
|
||||
<p checkedName="5" style="color: #28db18;">五级</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-box">
|
||||
<div id="safety-analysis"></div>
|
||||
<div id="efficiency-analysis"></div>
|
||||
<div id="resource-rate">
|
||||
<div class="resource-rate-item"></div>
|
||||
<div class="resource-rate-item"></div>
|
||||
<div class="resource-rate-item"></div>
|
||||
</div>
|
||||
<div id="alarm-reminder"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<!--<script src="../../../js/pages/index/indexEcharts.js" type="text/javascript"></script>-->
|
||||
<!--<script src="../../../js/pages/index/index.js" type="text/javascript"></script>-->
|
||||
<script src="../js/main.js" type="text/javascript"></script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue