监控覆盖
This commit is contained in:
parent
afc3bd051f
commit
22b911c4bb
|
|
@ -0,0 +1,207 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Alibaba PuHuiTi R';
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background: url('../../img/supplement/back_img.png') no-repeat 0 0 / 100% 100% transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left-box {
|
||||||
|
width: 26%;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
background: url("../../img/supplement/box_img.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left-top {
|
||||||
|
width: 90%;
|
||||||
|
height: 38%;
|
||||||
|
margin: 2% 5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/supplement/box_img3.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#echarts-one,
|
||||||
|
#echarts-two,
|
||||||
|
#echarts-three,
|
||||||
|
#echarts-four {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#left-bottom {
|
||||||
|
width: 90%;
|
||||||
|
height: 56%;
|
||||||
|
margin: 0 5% 2% 5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/supplement/box_img2.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#echarts-two {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#center-box {
|
||||||
|
width: 46%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#center-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#center-box2 {
|
||||||
|
width: 160px;
|
||||||
|
z-index: 1000;
|
||||||
|
position: absolute;
|
||||||
|
left: 64%;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-risk {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.check-risk img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-risk p {
|
||||||
|
width: calc(100% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#echarts-map2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#center-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-box {
|
||||||
|
width: 16%;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-box p:nth-child(1) {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-box p:last-child {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-box {
|
||||||
|
width: 26%;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
background: url("../../img/supplement/box_img.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-top {
|
||||||
|
width: 90%;
|
||||||
|
height: 38%;
|
||||||
|
margin: 2% 5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/supplement/box_img3.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-bottom {
|
||||||
|
width: 90%;
|
||||||
|
height: 56%;
|
||||||
|
margin: 0 5% 2% 5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: url("../../img/supplement/box_img2.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-bottom-box1,
|
||||||
|
#right-bottom-box2 {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(50% - 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-bottom-box2 {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom-child-box2 {
|
||||||
|
width: 80%;
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom-child-box2:nth-child(1) {
|
||||||
|
background: url("../../img/supplement/box_img4.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom-child-box2:nth-child(2) {
|
||||||
|
background: url("../../img/supplement/box_img5.png") no-repeat 0 0 / 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom-child-box2 p:nth-child(1) {
|
||||||
|
width: 28%;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom-child-box2 p:nth-child(2) {
|
||||||
|
width: 72%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="../../js/layui-v2.9.2/layui/css/layui.css">
|
||||||
|
<link rel="stylesheet" href="../../css/font.css">
|
||||||
|
<link rel="stylesheet" href="../../css/supplement/monitoring_coverage.css">
|
||||||
|
<script src="../../js/public/jquery-3.6.0.js" type="text/javascript"></script>
|
||||||
|
<script src="../../js/public/public.js" type="text/javascript"></script>
|
||||||
|
<script src="../../js/public/permission.js" type="text/javascript"></script>
|
||||||
|
<script src="../../js/public/sm3.js" type="text/javascript"></script>
|
||||||
|
<script src="../../js/layui-v2.9.2/layui/layui.js"></script>
|
||||||
|
<script src="../../js/public/commonUtils.js"></script>
|
||||||
|
<script src="../../js/public/aes.js"></script>
|
||||||
|
<script src="../../js/public/echarts.js"></script>
|
||||||
|
<title>监控覆盖</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="main-box" class="layout">
|
||||||
|
<div id="left-box" class="layout">
|
||||||
|
<div id="left-top">
|
||||||
|
<div class="title layout">
|
||||||
|
<p>监控活跃度分析</p>
|
||||||
|
</div>
|
||||||
|
<div id="echarts-one"></div>
|
||||||
|
</div>
|
||||||
|
<div id="left-bottom">
|
||||||
|
<div class="title layout">
|
||||||
|
<p>监控覆盖度分析</p>
|
||||||
|
</div>
|
||||||
|
<div id="echarts-two"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="center-box">
|
||||||
|
<div id="center-box2">
|
||||||
|
<div class="multiselect layout">
|
||||||
|
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-1-check.png">
|
||||||
|
<p checkedName="" style="color: #fff;">全选(<span id="allNum">0</span>)</p>
|
||||||
|
</div>
|
||||||
|
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-2-check.png">
|
||||||
|
<p checkedName="2" style="color: #DD690B;">二级风险球机(<span id="twoNum">0</span>)</p>
|
||||||
|
</div>
|
||||||
|
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-3-check.png">
|
||||||
|
<p checkedName="3" style="color: #FFE91F;">三级风险球机(<span id="threeNum">0</span>)</p>
|
||||||
|
</div>
|
||||||
|
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-4-check.png"
|
||||||
|
style="">
|
||||||
|
<p checkedName="4" style="color: #2aa998;">四级风险球机(<span id="fourNum">0</span>)</p>
|
||||||
|
</div>
|
||||||
|
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-5-check.png">
|
||||||
|
<p checkedName="5" style="color: #70e180;">五级风险球机(<span id="fiveNum">0</span>)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="center-top">
|
||||||
|
<div id="echarts-map2">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="center-bottom" class="layout">
|
||||||
|
<div class="error-box layout">
|
||||||
|
<p style="color: #3ed6ff;">1</p>
|
||||||
|
<img src="../../img/supplement/video_img.png">
|
||||||
|
<p style="color: #3ed6ff;">球机正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="error-box layout">
|
||||||
|
<p style="color: #e53b5a;">2</p>
|
||||||
|
<img src="../../img/supplement/video_img2.png">
|
||||||
|
<p style="color: #e53b5a;">球机正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="error-box layout">
|
||||||
|
<p style="color: #c280ff;">3</p>
|
||||||
|
<img src="../../img/supplement/video_img3.png">
|
||||||
|
<p style="color: #c280ff;">球机正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="error-box layout">
|
||||||
|
<p style="color: #8080ff;">4</p>
|
||||||
|
<img src="../../img/supplement/video_img4.png">
|
||||||
|
<p style="color: #8080ff;">球机正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="error-box layout">
|
||||||
|
<p style="color: #facd91;">1</p>
|
||||||
|
<img src="../../img/supplement/video_img5.png">
|
||||||
|
<p style="color: #facd91;">球机正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="error-box layout">
|
||||||
|
<p style="color: #f59a23;">1</p>
|
||||||
|
<img src="../../img/supplement/video_img6.png">
|
||||||
|
<p style="color: #f59a23;">球机正常</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="right-box" class="layout">
|
||||||
|
<div id="right-top">
|
||||||
|
<div class="title layout">
|
||||||
|
<p>下行观看分析</p>
|
||||||
|
</div>
|
||||||
|
<div id="echarts-three"></div>
|
||||||
|
</div>
|
||||||
|
<div id="right-bottom">
|
||||||
|
<div class="title layout">
|
||||||
|
<p>监控预告警分析</p>
|
||||||
|
</div>
|
||||||
|
<div id="right-bottom-box1">
|
||||||
|
<div class="title layout">
|
||||||
|
<p>风险球机覆盖度</p>
|
||||||
|
</div>
|
||||||
|
<div id="echarts-four"></div>
|
||||||
|
</div>
|
||||||
|
<div id="right-bottom-box2" class="layout">
|
||||||
|
<div class="right-bottom-child-box2 layout">
|
||||||
|
<p>1</p>
|
||||||
|
<p>视频设备视频速率正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="right-bottom-child-box2 layout">
|
||||||
|
<p>1</p>
|
||||||
|
<p>视频设备视频速率异常</p>
|
||||||
|
</div>
|
||||||
|
</div>>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src="../../js/supplement/monitoring_coverage_echarts.js"></script>
|
||||||
|
<script src="../../js/supplement/monitoring_coverage.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -0,0 +1,685 @@
|
||||||
|
let myChart = echarts.init(document.getElementById('echarts-one'));
|
||||||
|
let myChart2 = echarts.init(document.getElementById('echarts-two'));
|
||||||
|
let myChart3 = echarts.init(document.getElementById('echarts-three'));
|
||||||
|
let myChart4 = echarts.init(document.getElementById('echarts-four'));
|
||||||
|
// echarts地图
|
||||||
|
let uploadedDataURL2 = "../../js/compreDisplay/anhui/anhui.json";
|
||||||
|
let myChart5 = echarts.init(document.getElementById('echarts-map2'));
|
||||||
|
|
||||||
|
initEchartsOne();
|
||||||
|
initEchartsTwo();
|
||||||
|
initEchartsThree();
|
||||||
|
initEchartsFour();
|
||||||
|
loadMap([]);
|
||||||
|
function initEchartsOne(list) {
|
||||||
|
let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
|
||||||
|
let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
|
||||||
|
let option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
right: '10%',
|
||||||
|
left: '10%',
|
||||||
|
bottom: '10%',
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: dataX,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(66, 192, 255, .3)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
margin: 10,
|
||||||
|
color: '#05D5FF',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 11,
|
||||||
|
},
|
||||||
|
rotate: '0',
|
||||||
|
},
|
||||||
|
axisTick: {//刻度
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
axisLabel: {
|
||||||
|
padding: [3, 0, 0, 0],
|
||||||
|
formatter: '{value}',
|
||||||
|
color: 'rgba(95, 187, 235, 1)',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 11,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(66, 192, 255, .3)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: dataY,
|
||||||
|
barWidth: '10',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(5, 213, 255, 1)', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.98,
|
||||||
|
color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
shadowColor: 'rgba(5, 213, 255, 1)',
|
||||||
|
shadowBlur: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
lineHeight: 10,
|
||||||
|
formatter: '{c}',
|
||||||
|
position: 'top',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option, true);
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initEchartsTwo(list) {
|
||||||
|
let nameList = ['合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥'];
|
||||||
|
let dataList = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
|
||||||
|
option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '12%',
|
||||||
|
right: '10%',
|
||||||
|
bottom: '8%',
|
||||||
|
top: '5%',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: true,
|
||||||
|
type: 'value',
|
||||||
|
name: '',
|
||||||
|
// 坐标轴线
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255, 255, 255, 0.5)',
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 坐标轴小标记
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
// 坐标轴文本标签
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(95, 187, 235, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 分隔线
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(61, 137, 247, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 分隔区域
|
||||||
|
splitArea: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
data: nameList,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(66, 192, 255, .3)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(95, 187, 235, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '数量',
|
||||||
|
type: 'bar',
|
||||||
|
zlevel: 2,
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
color: '#fff',
|
||||||
|
// fontFamily: 'Bebas',
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(61, 137, 247, 0)', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.7,
|
||||||
|
color: 'rgba(5, 213, 255, 1)', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
|
||||||
|
color: 'rgba(5, 213, 255, 0.7)', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false, // 缺省为 false
|
||||||
|
},
|
||||||
|
shadowColor: 'rgba(5, 213, 255, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: dataList,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart2.setOption(option, true);
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart2.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initEchartsThree(list) {
|
||||||
|
let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
|
||||||
|
let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
|
||||||
|
let option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
right: '10%',
|
||||||
|
left: '10%',
|
||||||
|
bottom: '10%',
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: dataX,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(66, 192, 255, .3)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
margin: 10,
|
||||||
|
color: '#05D5FF',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 11,
|
||||||
|
},
|
||||||
|
rotate: '0',
|
||||||
|
},
|
||||||
|
axisTick: {//刻度
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
axisLabel: {
|
||||||
|
padding: [3, 0, 0, 0],
|
||||||
|
formatter: '{value}',
|
||||||
|
color: 'rgba(95, 187, 235, 1)',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 11,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(66, 192, 255, .3)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: dataY,
|
||||||
|
barWidth: '10',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: getColor(params.value), // 100% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.98,
|
||||||
|
color: '#2066ad',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
},
|
||||||
|
// shadowColor: 'rgba(5, 213, 255, 1)',
|
||||||
|
shadowBlur: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
lineHeight: 10,
|
||||||
|
formatter: '{c}',
|
||||||
|
position: 'top',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
function getColor(value) {
|
||||||
|
let endColor = '#2066ad';
|
||||||
|
if (value <= 10) {
|
||||||
|
endColor = '#3f67a7';
|
||||||
|
} else if (value > 10 && value <= 15) {
|
||||||
|
endColor = '#5e6296';
|
||||||
|
} else if (value > 15 && value <= 20) {
|
||||||
|
endColor = '#7f618a';
|
||||||
|
} else if (value > 20 && value <= 25) {
|
||||||
|
endColor = '#a55a77';
|
||||||
|
} else if (value > 25 && value <= 30) {
|
||||||
|
endColor = '#c95665';
|
||||||
|
} else if (value > 30 && value <= 35) {
|
||||||
|
endColor = '#e45256';
|
||||||
|
} else if (value > 35 && value <= 50) {
|
||||||
|
endColor = '#ef5050';
|
||||||
|
} else {
|
||||||
|
endColor = '#f33';
|
||||||
|
}
|
||||||
|
return endColor;
|
||||||
|
}
|
||||||
|
myChart3.setOption(option, true);
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart3.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initEchartsFour(list) {
|
||||||
|
var data = [
|
||||||
|
{
|
||||||
|
name: "二级风险",
|
||||||
|
value: 54,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "三级风险",
|
||||||
|
value: 44,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "四级风险",
|
||||||
|
value: 35,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "五级风险",
|
||||||
|
value: 30,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
var titleArr = [],
|
||||||
|
seriesArr = [];
|
||||||
|
colors = [
|
||||||
|
["#DD690B", "#DD690B50"],
|
||||||
|
["#FFE91F", "#FFE91F50"],
|
||||||
|
["#2aa998", "#2aa99850"],
|
||||||
|
["#70e180", "#70e18050"],
|
||||||
|
["#a181fc", "#e3d9fe"],
|
||||||
|
];
|
||||||
|
data.forEach(function (item, index) {
|
||||||
|
titleArr.push({
|
||||||
|
text: item.name,
|
||||||
|
left: index * 26 + 11 + "%",
|
||||||
|
top: "80%",
|
||||||
|
textAlign: "center",
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: "normal",
|
||||||
|
fontSize: "14",
|
||||||
|
color: colors[index][0],
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
seriesArr.push({
|
||||||
|
name: item.name,
|
||||||
|
type: "pie",
|
||||||
|
clockWise: false,
|
||||||
|
radius: [30, 40],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colors[index][0],
|
||||||
|
shadowColor: colors[index][0],
|
||||||
|
shadowBlur: 0,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
center: [index * 26 + 11 + "%", "50%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: item.value,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
formatter: function (params) {
|
||||||
|
return params.value + "%";
|
||||||
|
},
|
||||||
|
position: "center",
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: "20",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: colors[index][0],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100 - item.value,
|
||||||
|
name: "invisible",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colors[index][1],
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: colors[index][1],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
option = {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
title: titleArr,
|
||||||
|
series: seriesArr,
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart4.setOption(option, true);
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart4.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(checkedValue, 1))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} 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(checkedValue, 2))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else if (checkedName !== '' && isCheck === '1') {
|
||||||
|
$(this).attr("isCheck", '0')
|
||||||
|
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 1))
|
||||||
|
} else if (checkedName !== '' && isCheck === '0') {
|
||||||
|
$(this).attr("isCheck", '1')
|
||||||
|
$(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 2))
|
||||||
|
}
|
||||||
|
// 加载地图数据
|
||||||
|
/* let dataList = mapPointList.filter(item => {
|
||||||
|
if (item.buildCode === clickCityCode) {
|
||||||
|
return item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
loadMap(dataList); */
|
||||||
|
// 设置风险等级选中样式
|
||||||
|
function setRiskIcon(value, type) {
|
||||||
|
if (value && type === 1) {
|
||||||
|
return '../../img/title-btn/no-check/risk-' + value + '-nocheck.png';
|
||||||
|
} else if (!value && type === 1) {
|
||||||
|
return '../../img/title-btn/no-check/risk-1-nocheck.png';
|
||||||
|
} else if (value && type === 2) {
|
||||||
|
return '../../img/title-btn/check/risk-' + value + '-check.png';
|
||||||
|
} else if (!value && type === 2) {
|
||||||
|
return '../../img/title-btn/check/risk-1-check.png';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function loadMap(dataMap) {
|
||||||
|
$.getJSON(uploadedDataURL2, function (geoJson) {
|
||||||
|
echarts.registerMap('anhui', geoJson);
|
||||||
|
myChart2.hideLoading();
|
||||||
|
let max = 480,
|
||||||
|
min = 1.2; // todo
|
||||||
|
let maxSize4Pin = 100,
|
||||||
|
minSize4Pin = 100;
|
||||||
|
|
||||||
|
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,
|
||||||
|
num: data[i].num,
|
||||||
|
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, data[i].proName, data[i].num),
|
||||||
|
coordinate: data[i].coordinate,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
silent: false,
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 15,
|
||||||
|
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: function (params) {
|
||||||
|
if (params.data)
|
||||||
|
return (
|
||||||
|
'<p class="map-p">' + params.data.proName + '</p>' +
|
||||||
|
'<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
|
||||||
|
'<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
|
||||||
|
'<p class="map-p">班组长：' + params.data.workManager + '</p>' +
|
||||||
|
'<p class="map-p">预警数量：' + params.data.num + '</p>' +
|
||||||
|
'<p class="map-p">球机：' + params.data.isOnline + '</p>'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
// extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
|
||||||
|
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
|
||||||
|
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
show: true,
|
||||||
|
map: 'anhui',
|
||||||
|
aspectScale: 0.8,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'Alibaba PuHuiTi R'
|
||||||
|
},
|
||||||
|
rotate: -20,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
roam: false,
|
||||||
|
scaleLimit: {
|
||||||
|
max: max,
|
||||||
|
min: min
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
areaColor: '#275D74',
|
||||||
|
borderColor: '#5EB1B3',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowColor: 'rgba(80, 172, 243, 0.5)',
|
||||||
|
shadowBlur: 30
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#2B91B7',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '在线',
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
animation: false,
|
||||||
|
symbolSize: function (val) {
|
||||||
|
let a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||||||
|
let b = minSize4Pin - a * min;
|
||||||
|
b = maxSize4Pin - a * max;
|
||||||
|
return 20;
|
||||||
|
},
|
||||||
|
symbol: function (val) {
|
||||||
|
console.log(val)
|
||||||
|
var num = Number(val[4]) + 1;
|
||||||
|
return getEchartsImage(val[2], num, val[3]);
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 15,
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zlevel: 6,
|
||||||
|
z: 6,
|
||||||
|
data: convertData(dataMap)
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart5.clear();
|
||||||
|
myChart5.setOption(option, true);
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart5.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -113,7 +113,7 @@ function initTable(dataList, limit, page) {
|
||||||
{
|
{
|
||||||
field: "workSite",
|
field: "workSite",
|
||||||
title: "作业部分",
|
title: "作业部分",
|
||||||
width: '20%',
|
width: '15%',
|
||||||
unresize: true,
|
unresize: true,
|
||||||
align: "center",
|
align: "center",
|
||||||
templet: function (d) {
|
templet: function (d) {
|
||||||
|
|
@ -131,7 +131,7 @@ function initTable(dataList, limit, page) {
|
||||||
{
|
{
|
||||||
field: "gx",
|
field: "gx",
|
||||||
title: "工序",
|
title: "工序",
|
||||||
width: '20%',
|
width: '15%',
|
||||||
unresize: true,
|
unresize: true,
|
||||||
align: "center",
|
align: "center",
|
||||||
templet: function (d) {
|
templet: function (d) {
|
||||||
|
|
@ -145,7 +145,15 @@ function initTable(dataList, limit, page) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
field: "riskCost",
|
||||||
|
title: "风险成本",
|
||||||
|
width: '10%',
|
||||||
|
unresize: true,
|
||||||
|
align: "center",
|
||||||
|
style: 'word-break: break-all'
|
||||||
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
done: function (res, curr, count) {
|
done: function (res, curr, count) {
|
||||||
|
|
|
||||||
|
|
@ -118,14 +118,6 @@ function initTable(dataList, limit, page) {
|
||||||
return '<p>' + transformNull(d.workManager) + '</p><p>' + transformNull(d.workManagerPhone) + '</p>';
|
return '<p>' + transformNull(d.workManager) + '</p><p>' + transformNull(d.workManagerPhone) + '</p>';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
field: "time",
|
|
||||||
title: "预警时间",
|
|
||||||
width: '10%',
|
|
||||||
unresize: true,
|
|
||||||
align: "center",
|
|
||||||
style: 'word-break: break-all'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
field: "workSite",
|
field: "workSite",
|
||||||
title: "作业部分",
|
title: "作业部分",
|
||||||
|
|
@ -161,7 +153,15 @@ function initTable(dataList, limit, page) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
field: "time",
|
||||||
|
title: "预警时间",
|
||||||
|
width: '10%',
|
||||||
|
unresize: true,
|
||||||
|
align: "center",
|
||||||
|
style: 'word-break: break-all'
|
||||||
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
done: function (res, curr, count) {
|
done: function (res, curr, count) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue