955 lines
54 KiB
HTML
955 lines
54 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
|
||
<meta charset="utf-8" />
|
||
<title>运行概览 | 智能截流闸管理平台</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta content="智能截流闸管理平台" name="description" />
|
||
<meta content="Themesdesign" name="author" />
|
||
<!-- App favicon -->
|
||
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
||
|
||
<link rel="stylesheet" href="css/base.css">
|
||
<link rel="stylesheet" href="css/index.css">
|
||
<!-- 引入vue.js -->
|
||
<script src="assets/js/pages/vue2.6.11.js"></script>
|
||
</head>
|
||
<style>
|
||
.t_title{
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
font-size: 2.5em;
|
||
line-height: 80px;
|
||
color: #fff;
|
||
}
|
||
#chart_map{
|
||
cursor: pointer;
|
||
}
|
||
.t_show{
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
border-radius: 2px;
|
||
background: #2C58A6;
|
||
padding: 2px 5px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
|
||
<body data-sidebar="dark">
|
||
|
||
<div id="layout-wrapper">
|
||
|
||
<div class="main-content" id="app">
|
||
|
||
<div class="page-content">
|
||
<div class="header">
|
||
<div class="bg_header">
|
||
<a href="?c=big_screen&a=big_screen_device"><div class="header_nav fl t_title">
|
||
雨污分流智能管理平台
|
||
</div></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="data_content">
|
||
|
||
<div class="data_main">
|
||
<div class="main_left fl">
|
||
<div class="left_1 t_btn6" style="cursor: pointer;">
|
||
<!--左上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_l_line"></i>
|
||
<i class="l_t_line"></i>
|
||
</div>
|
||
<!--右上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_r_line"></i>
|
||
<i class="r_t_line"></i>
|
||
</div>
|
||
<!--左下边框-->
|
||
<div class="t_line_box">
|
||
<i class="l_b_line"></i>
|
||
<i class="b_l_line"></i>
|
||
</div>
|
||
<!--右下边框-->
|
||
<div class="t_line_box">
|
||
<i class="r_b_line"></i>
|
||
<i class="b_r_line"></i>
|
||
</div>
|
||
<div class="main_title">
|
||
<img src="img/t_1.png" alt="">
|
||
项目总览
|
||
</div>
|
||
<div id="chart_1" class="chart" style="width:100%;height: 230px;"></div>
|
||
</div>
|
||
<div class="left_2" style="cursor: pointer;width: 100%;height: 100%;box-sizing: border-box;border: 1px solid #2C58A6;position: relative;box-shadow: 0 0 10px #2C58A6;">
|
||
<!--左上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_l_line"></i>
|
||
<i class="l_t_line"></i>
|
||
</div>
|
||
<!--右上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_r_line"></i>
|
||
<i class="r_t_line"></i>
|
||
</div>
|
||
<!--左下边框-->
|
||
<div class="t_line_box">
|
||
<i class="l_b_line"></i>
|
||
<i class="b_l_line"></i>
|
||
</div>
|
||
<!--右下边框-->
|
||
<div class="t_line_box">
|
||
<i class="r_b_line"></i>
|
||
<i class="b_r_line"></i>
|
||
</div>
|
||
<div class="main_title">
|
||
<img src="img/t_1.png" alt="">
|
||
数据统计
|
||
</div>
|
||
<div class="">
|
||
<div id="chart_2" class="left-y chart t_btn9" style="width:49%;height: 220px;display: inline;float: left;"></div>
|
||
<div id="chart_22" class="right-y chart t_btn9" style="width:49%;height: 220px;display: inline;float: left;"></div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
<div class="wlsj-down">
|
||
<div id="chart_3" class="echart t_btn7" style="width:100%;height: 230px;z-index: 9999;"></div>
|
||
</div>
|
||
<div class="wlsj-down2">
|
||
<div id="chart_33" class="echart t_btn7" style="width:100%;height: 197px;z-index: 9999;margin-bottom: 10px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main_center fl">
|
||
<div class="center_text">
|
||
<!--左上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_l_line"></i>
|
||
<i class="l_t_line"></i>
|
||
</div>
|
||
<!--右上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_r_line"></i>
|
||
<i class="r_t_line"></i>
|
||
</div>
|
||
<!--左下边框-->
|
||
<div class="t_line_box">
|
||
<i class="l_b_line"></i>
|
||
<i class="b_l_line"></i>
|
||
</div>
|
||
<!--右下边框-->
|
||
<div class="t_line_box">
|
||
<i class="r_b_line"></i>
|
||
<i class="b_r_line"></i>
|
||
</div>
|
||
<div class="main_title" style="text-align: center;">
|
||
<img src="img/t_3.png" alt="">
|
||
地图监控点
|
||
</div>
|
||
<!-- <div id="chart_map" style="width:100%;height:610px;"></div> -->
|
||
<div class="bottom_center fl">
|
||
<div class="main_table t_btn8" style="width: 100%;margin-top: 20px;border-bottom: 1px solid #3d5569;">
|
||
<table class="centertable">
|
||
<thead >
|
||
<tr >
|
||
<th class="centerdata-th" colspan="2">榆林市</th>
|
||
<th class="centerdata-th" colspan="2">延安市</th>
|
||
<th class="centerdata-th" colspan="2">铜川市</th>
|
||
<th class="centerdata-th" colspan="2">咸阳市</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="centertable-td" style="background-color: #072951;box-shadow:-10px 0px 15px #2C58A6 inset,/*左边阴影*/10px 0px 15px #2C58A6 inset; /*右边阴影*/">
|
||
<td>在线</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>在线</td>
|
||
<td name="id" id="id">{{bigScreenDashboardMapDataCount.device_online_count}}</td>
|
||
<td>在线</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>在线</td>
|
||
<td name="id" id="id">0</td>
|
||
</tr>
|
||
<tr class="centertable-td">
|
||
<td>调试</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>调试</td>
|
||
<td name="id" id="id">{{bigScreenDashboardMapDataCount.device_offline_count}}</td>
|
||
<td>调试</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>调试</td>
|
||
<td name="id" id="id">0</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="main_table t_btn8" style="width: 100%;margin-top: 20px;border-bottom: 1px solid #3d5569;">
|
||
<table class="centertable">
|
||
<thead >
|
||
<tr >
|
||
<th class="centerdata-th" colspan="2">渭南市</th>
|
||
<th class="centerdata-th" colspan="2">西安市</th>
|
||
<th class="centerdata-th" colspan="2">宝鸡市</th>
|
||
<th class="centerdata-th" colspan="2">汉中市</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="centertable-td" style="background-color: #072951;box-shadow:-10px 0px 15px #2C58A6 inset,/*左边阴影*/10px 0px 15px #2C58A6 inset; /*右边阴影*/">
|
||
<td>在线</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>在线</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>在线</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>在线</td>
|
||
<td name="id" id="id">0</td>
|
||
</tr>
|
||
<tr class="centertable-td">
|
||
<td>调试</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>调试</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>调试</td>
|
||
<td name="id" id="id">0</td>
|
||
<td>调试</td>
|
||
<td name="id" id="id">0</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="" style="position: relative;overflow: hidden;width: 730px;height: 560px;padding: 0px;margin: 0px;">
|
||
<div id="chart_7" class="chart t_btn9" style="width:100%;height: 560px;"></div>
|
||
</div>
|
||
<div class="">
|
||
<div id="chart_24" class="left-y chart t_btn9" style="width:30%;height: 160px;display: inline;float: left;margin-bottom: 2px;"></div>
|
||
<div id="chart_15" class="right-y chart t_btn9" style="width:65%;height: 160px;display: inline;float: left;margin-bottom: 2px;"></div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
<!-- <div id="chart_91" class="left-y chart t_btn9" style="width:50%;height: 160px;display: inline;float: left;margin-bottom: 2px;"></div>
|
||
<div id="chart_92" class="left-y chart t_btn9" style="width:50%;height: 160px;display: inline;float: left;margin-bottom: 2px;"></div> -->
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="main_right fr">
|
||
|
||
<div class="right_2" style="margin-bottom: 30px;">
|
||
<!--左上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_l_line"></i>
|
||
<i class="l_t_line"></i>
|
||
</div>
|
||
<!--右上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_r_line"></i>
|
||
<i class="r_t_line"></i>
|
||
</div>
|
||
<!--左下边框-->
|
||
<div class="t_line_box">
|
||
<i class="l_b_line"></i>
|
||
<i class="b_l_line"></i>
|
||
</div>
|
||
<!--右下边框-->
|
||
<div class="t_line_box">
|
||
<i class="r_b_line"></i>
|
||
<i class="b_r_line"></i>
|
||
</div>
|
||
<div class="main_title">
|
||
<img src="img/t_5.png" alt="">
|
||
天气情况
|
||
</div>
|
||
<div>
|
||
<div id="chart_5" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
<div id="chart_52" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
<div id="chart_53" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
<div id="chart_54" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
</div>
|
||
<div>
|
||
<div id="chart_55" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
<div id="chart_56" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
<div id="chart_57" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
<div id="chart_58" class="echart fl t_btn4" style="width:25%;height: 100px;cursor: pointer;"></div>
|
||
</div>
|
||
<div>
|
||
<div id="chart_6" class="echart fl t_btn4" style="width:100%;height: 100px;cursor: pointer;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right_2" style="height:630px;">
|
||
<!--左上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_l_line"></i>
|
||
<i class="l_t_line"></i>
|
||
</div>
|
||
<!--右上边框-->
|
||
<div class="t_line_box">
|
||
<i class="t_r_line"></i>
|
||
<i class="r_t_line"></i>
|
||
</div>
|
||
<!--左下边框-->
|
||
<div class="t_line_box">
|
||
<i class="l_b_line"></i>
|
||
<i class="b_l_line"></i>
|
||
</div>
|
||
<!--右下边框-->
|
||
<div class="t_line_box">
|
||
<i class="r_b_line"></i>
|
||
<i class="b_r_line"></i>
|
||
</div>
|
||
<div class="main_title">
|
||
<img src="img/t_5.png" alt="">
|
||
设备实时数据
|
||
</div>
|
||
<div id="produce" class="table-container" style="height: 600px; overflow: hidden;">
|
||
<table id="my-table" width="100%" cellpadding="6" cellspacing="0">
|
||
<!-- <div v-for="item in bigScreenDashboardDeviceRealData">
|
||
<tr class="row1">
|
||
<td class="row1td" colspan="5" style="padding:2px 0px;">{{item.name}}</td>
|
||
</tr> -->
|
||
<!-- <tr class="row2">
|
||
<td>液位(cm)</td>
|
||
<td>PH</td>
|
||
<td>降雨量(mm/min)</td>
|
||
<td>氨氮(ppm)</td>
|
||
<td>雨雪量</td>
|
||
</tr>
|
||
<tr class="row2">
|
||
<td>{{item}}</td>
|
||
<td>{{item}}</td>
|
||
<td>{{item}}</td>
|
||
<td>{{item}}</td>
|
||
<td>{{item}}</td>
|
||
</tr> -->
|
||
<!-- </div> -->
|
||
<thead class="thead-light">
|
||
<tr style="text-align: center;font-size: 16px;">
|
||
<th>名字</th>
|
||
<th>液位(cm)</th>
|
||
<th>PH</th>
|
||
<th>降雨量(mm/min)</th>
|
||
<th>雨雪值</th>
|
||
<th>氨氮(ppm)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="text-align: center;font-size: 16px;" v-for="(item, i) in bigScreenDashboardDeviceRealData">
|
||
<td>{{ item.name }}</td>
|
||
<td>{{ item.level_data }}</td>
|
||
<td>{{ item.ph_data }}</td>
|
||
<td>{{ item.rainfall_data }}</td>
|
||
<td>{{ item.rainsnow }}</td>
|
||
<td>{{ item.ammonia_data }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- <div id="chart_8" class="left-y chart t_btn9" style="width:60%;margin-top: -140px;height: 160px;display: inline;float: right;margin-bottom: 2px;"></div>
|
||
-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end main content-->
|
||
|
||
</div>
|
||
<!-- END layout-wrapper -->
|
||
|
||
<script src="js/jquery-2.2.1.min.js"></script>
|
||
<script src="js/bootstrap.min.js"></script>
|
||
<script src="js/echarts.min.js"></script>
|
||
<script src="js/index.js"></script>
|
||
<script src="js/shanxi.js"></script>
|
||
<script type="text/javascript" src="js/jquery.js"></script>
|
||
<script type="text/javascript" src="js/jquery.limarquee.js"></script>
|
||
<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
var tableHeight = $('.table-container').height();
|
||
var tableRowHeight = $('#my-table tr').height();
|
||
var rowCount = $('#my-table tr').length;
|
||
|
||
function scrollTable() {
|
||
$('.table-container').animate({ scrollTop: tableRowHeight }, 1000, function() {
|
||
$('#my-table tr:first').appendTo('#my-table');
|
||
$('.table-container').scrollTop(0);
|
||
});
|
||
}
|
||
|
||
setInterval(scrollTable, 1000); // 每隔2秒执行一次滚动
|
||
});
|
||
</script>
|
||
<script type="text/javascript">
|
||
var vm = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
bigScreenDashboardDeviceRealData: '',
|
||
bigScreenDashboardMapDataCount: ''
|
||
},
|
||
methods: {
|
||
// 项目总览
|
||
getBigScreenDashboardProjectOverview: function()
|
||
{
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=big_screen&a=getBigScreenDashboardProjectOverview',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes)
|
||
{
|
||
_this.bigScreenDashboardProjectOverview = mes.data
|
||
var myChart = echarts.init(document.getElementById('chart_1'));
|
||
|
||
var option = {
|
||
// title: {
|
||
// text: 'ECharts 入门示例'
|
||
// },
|
||
color:['#ef5f2b','#4a6ac4','#77cd63','#a325c0','#369ebc','#e2a83f'],
|
||
tooltip: {},
|
||
legend: {
|
||
data:['项目','控制柜','曝气机','管网监测点','在线设备'],
|
||
textStyle:{
|
||
color:"#fff",
|
||
fontSize: 10
|
||
},
|
||
icon: "circle",
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
itemGap: 10,// 设置间距
|
||
padding: [40, 10, 15, 20] // [5, 10, 15, 20]
|
||
|
||
},
|
||
dataset: {
|
||
source: [
|
||
['项目','控制柜','曝气机','管网监测点','在线设备'],
|
||
[mes.data.project_count,mes.data.device_1_count,mes.data.device_2_count,mes.data.device_3_count,mes.data.device_4_count]
|
||
]
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category', gridIndex: 0,
|
||
//设置坐标轴字体颜色和宽度
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
axisLabel: { //x轴文字样式
|
||
textStyle: {
|
||
fontSize: 13
|
||
}
|
||
},
|
||
}
|
||
|
||
],
|
||
yAxis: [
|
||
{
|
||
gridIndex: 0,
|
||
//设置坐标轴字体颜色和宽度
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
axisLabel: { //x轴文字样式
|
||
textStyle: {
|
||
fontSize: 10
|
||
}
|
||
},
|
||
}
|
||
],
|
||
grid: [
|
||
{top: '22%',
|
||
bottom: '20%',
|
||
},
|
||
],
|
||
series: [
|
||
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',}
|
||
]
|
||
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
},
|
||
error: function(msg)
|
||
{
|
||
console.info('ajax请求失败');
|
||
}
|
||
})
|
||
},
|
||
// 数据统计 设备情况统计
|
||
getBigScreenDashboardProjectDataDeviceRunInfo: function()
|
||
{
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=big_screen&a=getBigScreenDashboardProjectDataDeviceRunInfo',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes)
|
||
{
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('chart_2'));
|
||
option = {
|
||
title: {
|
||
text: '设备情况统计',top:'10%',left:'center',
|
||
textStyle:{
|
||
color:'#fff', //颜色
|
||
fontStyle:'normal', //风格
|
||
fontWeight:'normal', //粗细
|
||
// fontFamily:'Microsoft yahei', //字体
|
||
fontSize:14, //大小
|
||
|
||
textAlign:'center' //水平对齐
|
||
},
|
||
|
||
|
||
},
|
||
color:['#218BB4','#5AA949','#7121B4','#C23531'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
x: 'left',
|
||
itemWidth: 8, // 设置宽度
|
||
itemHeight: 8, // 设置高度
|
||
textStyle:{
|
||
color:"#fff",
|
||
fontSize: 10
|
||
},
|
||
orient: 'vertical',
|
||
left: 'center', //图例距离左的距离
|
||
top:'24%',
|
||
data:['在线设备','安装中设备','','预警设备'],//图例换行
|
||
|
||
},
|
||
|
||
|
||
grid: {
|
||
left: '-20%',//生成的图片和左边的间距
|
||
// right: '2%',//生成的图片和右边的间距’,
|
||
// bottom: '10%',//生成的图片和底部的间距
|
||
top: '25%',//生成的图片和顶部的间距
|
||
containLabel: true//为ture才会生效以上的设置
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name:'数量',
|
||
type:'pie',
|
||
radius: ['30%', '55%'],
|
||
center: ['50%', '70%'], //在div中位置
|
||
avoidLabelOverlap: false,
|
||
label:{
|
||
|
||
normal: {
|
||
show: true,
|
||
position: 'inner',
|
||
formatter: '{d}%', //显示的内容
|
||
textStyle: {
|
||
fontSize: '10',
|
||
color:'#fff'
|
||
}
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: '12',
|
||
fontWeight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data:[
|
||
{value:mes.data.device_online_count, name:'在线设备'},
|
||
{value:mes.data.device_offline_count, name:'安装中设备'},
|
||
{value:mes.data.device_warn_count, name:'预警设备'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
},
|
||
error: function(msg)
|
||
{
|
||
console.info('ajax请求失败');
|
||
}
|
||
})
|
||
},
|
||
// 城市设备分布系统现状
|
||
getBigScreenDashboardDataCity: function()
|
||
{
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=big_screen&a=getBigScreenDashboardDataCity',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes)
|
||
{
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('chart_3'));
|
||
myChart.clear();
|
||
option = {
|
||
// title: {
|
||
// text: '在网分布系统现状
|
||
// 在网直放站现状
|
||
// 分地市分布系统现状'
|
||
// },
|
||
title: {
|
||
text: '地市设备分布系统现状',top:'0%',left:'center',
|
||
textStyle:{
|
||
color:'#fff', //颜色
|
||
fontStyle:'normal', //风格
|
||
fontWeight:'normal', //粗细
|
||
// fontFamily:'Microsoft yahei', //字体
|
||
fontSize:14, //大小
|
||
|
||
textAlign:'center' //水平对齐
|
||
},
|
||
|
||
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
textStyle : {
|
||
fontWeight : 'normal', //显示字体粗细等
|
||
fontSize : 10
|
||
},
|
||
legend: {
|
||
data:['全部点位数','在线点位数','安装中点位数','预警点位数'],
|
||
textStyle:{
|
||
fontSize: 10,
|
||
color: '#fff'
|
||
},
|
||
top: '10%'
|
||
},
|
||
grid: {
|
||
top: '20%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
color: ['#FF4949','#FFA74D','#77cd63','#44AFF0',],
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['榆林','延安','铜川','渭南','咸阳','西安','宝鸡','商洛','安康','汉中'],
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: { //x轴文字样式
|
||
textStyle: {
|
||
fontSize: 10
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
// name: '数量',
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: { //y轴文字样式
|
||
textStyle: {
|
||
fontSize: 10
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name:'全部点位数',
|
||
type:'line',
|
||
data:mes.data.all
|
||
},
|
||
{
|
||
name:'在线点位数',
|
||
type:'line',
|
||
data:mes.data.online
|
||
},
|
||
{
|
||
name:'安装中点位数',
|
||
type:'line',
|
||
data:mes.data.offline
|
||
},
|
||
{
|
||
name:'预警点位数',
|
||
type:'line',
|
||
data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||
}
|
||
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
error: function(msg)
|
||
{
|
||
console.info('ajax请求失败');
|
||
}
|
||
})
|
||
},
|
||
// 调控频率排行榜
|
||
getBigScreenDashboardDataControlRank: function()
|
||
{
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=big_screen&a=getBigScreenDashboardDataControlRank',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes)
|
||
{
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('chart_33'));
|
||
myChart.clear();
|
||
var option = {
|
||
title: {
|
||
text: '调控频率排行榜',top:'4%',left:'center',
|
||
textStyle:{
|
||
color:'#fff', //颜色
|
||
fontStyle:'normal', //风格
|
||
fontWeight:'normal', //粗细
|
||
// fontFamily:'Microsoft yahei', //字体
|
||
fontSize:14, //大小
|
||
|
||
textAlign:'center' //水平对齐
|
||
},
|
||
|
||
|
||
},
|
||
color: ['#38b3f1'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
// type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||
// shadowOffsetX: 10
|
||
|
||
// }
|
||
},
|
||
textStyle: {
|
||
color: '#ccc'
|
||
},
|
||
grid: {
|
||
top: '20%',
|
||
left: '3%',
|
||
right: '3%',
|
||
bottom: '1%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: mes.data.name,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLabel: { //x轴文字样式
|
||
textStyle: {
|
||
fontSize: 10,
|
||
interval: 0
|
||
}
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: { //y轴文字样式
|
||
textStyle: {
|
||
fontSize: 10
|
||
}
|
||
},
|
||
}],
|
||
series: [{
|
||
name: '调控次数',
|
||
type: 'bar',
|
||
barWidth: '40%',
|
||
// barGap:'10%',
|
||
barCategoryGap : '5%',
|
||
data: mes.data.totalCount
|
||
}]
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
error: function(msg)
|
||
{
|
||
console.info('ajax请求失败');
|
||
}
|
||
})
|
||
},
|
||
// 地图监控点
|
||
getBigScreenDashboardMapDataCount: function()
|
||
{
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=big_screen&a=getBigScreenDashboardProjectDataDeviceRunInfo',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes)
|
||
{
|
||
_this.bigScreenDashboardMapDataCount = mes.data
|
||
},
|
||
error: function(msg)
|
||
{
|
||
console.info('ajax请求失败');
|
||
}
|
||
})
|
||
},
|
||
// 事件类型分类
|
||
getBigScreenDashboardMapEventType: function()
|
||
{
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=big_screen&a=getBigScreenDashboardMapEventType',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes)
|
||
{
|
||
var myChart = echarts.init(document.getElementById('chart_15'));
|
||
|
||
var option = {
|
||
title: {
|
||
text: '事件类型分类',
|
||
textStyle:{
|
||
color:'#fff', //颜色
|
||
fontStyle:'normal', //风格
|
||
fontWeight:'normal', //粗细
|
||
// fontFamily:'Microsoft yahei', //字体
|
||
fontSize:14, //大小
|
||
align:'center' //水平对齐
|
||
},left:'center'
|
||
},
|
||
color:['#369ebc','#4a6ac4','#77cd63','#a325c0','#369ebc','#e2a83f'],
|
||
tooltip: {},
|
||
legend: {
|
||
data:['主污泵','备污泵',' 雨水泵',' 闸门上升',' 闸门下降'],
|
||
textStyle:{
|
||
color:"#fff",
|
||
fontSize: 10
|
||
},
|
||
icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
|
||
itemWidth: 8, // 设置宽度
|
||
itemHeight: 8, // 设置高度
|
||
itemGap: 10,// 设置间距
|
||
padding: [40, 10, 4, 20] // [5, 10, 15, 20]
|
||
|
||
},
|
||
dataset: {
|
||
source: [
|
||
['主污泵','备污泵',' 雨水泵',' 闸门上升',' 闸门下降'],
|
||
mes.data.event
|
||
]
|
||
},
|
||
xAxis: [
|
||
{
|
||
|
||
type: 'category', gridIndex: 0,
|
||
//设置坐标轴字体颜色和宽度
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
axisLabel: { //x轴文字样式
|
||
textStyle: {
|
||
fontSize: 10
|
||
}
|
||
},
|
||
}
|
||
|
||
],
|
||
yAxis: [
|
||
{
|
||
gridIndex: 0,
|
||
//设置坐标轴字体颜色和宽度
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
axisLabel: { //x轴文字样式
|
||
textStyle: {
|
||
fontSize: 10
|
||
}
|
||
},
|
||
}
|
||
],
|
||
grid: [
|
||
{
|
||
top: '60',
|
||
right: '5',
|
||
bottom:'20'
|
||
}
|
||
],
|
||
series: [
|
||
// These series are in the first grid.
|
||
{type: 'bar', seriesLayoutBy: 'row', barWidth:12, barGap:'10%',},
|
||
// These series are in the second grid.
|
||
]
|
||
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
// window.addEventListener("resize", function () {
|
||
// myChart.resize();
|
||
// })
|
||
},
|
||
error: function(msg)
|
||
{
|
||
console.info('ajax请求失败');
|
||
}
|
||
})
|
||
},
|
||
// 获取设备列表
|
||
getBigScreenDashboardDeviceRealData: function()
|
||
{
|
||
let _this = this;
|
||
$.ajax({
|
||
url: '?c=big_screen&a=getBigScreenDashboardDeviceRealData',
|
||
type: 'get',
|
||
dataType: 'json',
|
||
success: function(mes)
|
||
{
|
||
_this.bigScreenDashboardDeviceRealData = mes.data
|
||
},
|
||
error: function(msg)
|
||
{
|
||
console.info('ajax请求失败');
|
||
}
|
||
})
|
||
}
|
||
},
|
||
created: function () {
|
||
this.getBigScreenDashboardProjectOverview();
|
||
this.getBigScreenDashboardProjectDataDeviceRunInfo();
|
||
this.getBigScreenDashboardDataCity();
|
||
this.getBigScreenDashboardDataControlRank();
|
||
this.getBigScreenDashboardMapDataCount();
|
||
this.getBigScreenDashboardMapEventType();
|
||
this.getBigScreenDashboardDeviceRealData();
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|