物联网平台 +Web 组态
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2041 lines
79 KiB

2 years ago
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="com.lp.cfg.ProConfig" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html lang="en">
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp" %>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp" %>
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.middenboox tbody tr:hover {
background: rgba(250, 250, 250, 0.2);
cursor: pointer;
}
.activeOntbody {
background: rgba(250, 250, 250, 0.2);
}
</style>
<link type="text/css" href="<%=basePath%>/lib/bigscreen/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="<%=basePath%>/lib/bigscreen/lib/font/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=basePath%>/lib/bigscreen/css/style.css">
<script type="text/javascript" src="<%=basePath%>/lib/lpro/ljc_0.2.js?<%=v%>"></script>
<link type="text/css" href="<%=basePath%>/lib/iview/dist/styles/iview.css" rel="stylesheet"/>
<!-- 引入elment组件库 -->
<link rel="stylesheet" href="<%=basePath%>/lib/element-ui/index.css">
</head>
<body>
<div id="app">
<div class="bigBox">
<header class="top"><span v-text="atitle"></span>
<p v-text="currentdate">-年-月-日-:-:-</p>
</header>
<article>
<div class="leftOneBoxa">
<div class="rigTitle rigTitleOnline">
<img src="<%=basePath%>/lib/bigscreen/image/leftTwo_icon.png">
<span>设备在线状态</span>
</div>
<div class="leftOneBox" id="leftOneBox"></div>
<div class="leftOneBoxnum" style="font-size: 18px;" v-text="this.counta"></div>
</div>
<div class="leftTwoBox">
<div class="rigTitle">
<img src="<%=basePath%>/lib/bigscreen/image/leftTwo_icon.png">
<span>视频摄像头轮播</span>
</div>
<div class="rigLine">
<img src="<%=basePath%>/lib/bigscreen/image/line.png">
</div>
<div style="width:98%;height:80%;margin-left: 2%;" id="leftTwoBox">
<video id="myPlayer" style="width:100%;height:98%;" poster="" controls playsInline webkit-playsinline autoplay>
<source src="" type="rtmp/flv" />
</video>
</div>
<div class="hide template0">
<video id="myPlayer" style="width:98%;height:98%;" poster="" controls playsInline webkit-playsinline autoplay>
<source src="" type="rtmp/flv" />
</video>
</div>
</div>
<div class="leftThreeBox" id="leftThreeBox">
<div class="rigTitle">
<img src="<%=basePath%>/lib/bigscreen/image/leftThree_icon.png">
<span>设备实时数据</span>
</div>
<div class="rigLine">
<img src="<%=basePath%>/lib/bigscreen/image/line.png">
</div>
<div class="middenBottomBoxChil" style="width: 100%;right: 0;left:2px" id="middenBottomBoxChil">
</div>
</div>
<div class="template2 hide">
<div class="map_info_window" style="color: #aaa;padding:0 10px 10px 10px;overflow: auto; ">
<div class="map_info_titles" style="margin-bottom: 5px;font-size: 16px;">
<span style="vertical-align: middle;">设备名称:{0}</span>
<br>
</div>
<div class="map_info_item" style="overflow: hidden;zoom:1;">
{1}
</div>
</div>
</div>
<div class="template3 hide">
<div style="" class="sensorStyle">
<div style="">
<span class="sensor-info">{0}</span>
</div>
<div style="">
<span style="font-size: 17px;color: #3499da;">{1}</span>
<span>{2}</span>
</div>
</div>
</div>
<div class="middenTopBox" id="middenTopBox">
</div>
<div class="middenBottomBox" id="middenBottomBox">
<div class="middenboox" style="width: 90%;">
<div class="middenTitle">
<img src="<%=basePath%>/lib/bigscreen/image/bottomTable.png">
<span>监控列表</span>
<span style="margin-left: 5%;cursor: pointer;" @click="showAllscene">全部项目</span>
</div>
<div class="boxChilden">
<table>
<thead>
<tr>
<th width="30%">项目名</th>
<th width="13%">设备数</th>
<th width="13%">传感器数</th>
<th width="13%">未读报警数</th>
<th width="25%">操作</th>
</tr>
</thead>
<tbody>
<tr @click="middenboox(item,index)" :class="{activeOntbody:index==current}"
:id="'tableItemsa'+index" v-for="(item, index) in tableItemsb">
<th v-text="item.name"></th>
<th v-text="item.nodeCount"></th>
<th v-text="item.sensorCount"></th>
<th v-text="item.alarmCount"></th>
<th>
<button class="alesm"
style="background: #FF0000;width: 80px;height: 20px;font-size: 12px;color: #eee;line-height: 0px;border-radius: 3px;outline: none;border: 0px;font-weight: 200;"
@click="loadWarning(item)">未处理报警记录
</button>
<button class="histo"
style="background: #2897C4;width: 80px;height: 20px;font-size: 12px;color: #eee;line-height: 0px;border-radius: 3px;outline: none;border: 0px;font-weight: 200;"
@click="loadHistory(item)">历史数据
</button>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="rightOneBoxa">
<div class="rigTitle rigTitleOnline">
<img src="<%=basePath%>/lib/bigscreen/image/leftTwo_icon.png">
<span>设备报警处理状态</span>
</div>
<div class="rightOneBox" id="rightOneBox"></div>
<div class="rightOneBoxnum" v-text="this.bjcont"></div>
</div>
<div class="rightTwoBox" id="rightTwoBox">
<div class="rigTitle">
<img src="<%=basePath%>/lib/bigscreen/image/aleram.png">
<span>报警记录</span>
</div>
<div class="rigLine">
<img src="<%=basePath%>/lib/bigscreen/image/line.png">
</div>
<div v-if="aleamItems==null||aleamItems.length<=0" class="myCarousela">暂无数据</div>
<div v-else class="ybox">
<ul>
<li v-for="(item, index) in aleamItems" v-text="item.value"></li>
</ul>
</div>
</div>
<div class="rightThreeBox">
<div class="rigTitle">
<img src="<%=basePath%>/lib/bigscreen/image/rightThree_icon.png">
<span>数据统计</span>
</div>
<div class="rigLine">
<img src="<%=basePath%>/lib/bigscreen/image/line.png">
</div>
<div style="width:100%;height:100%;" id="rightThreeBox"></div>
</div>
</article>
</div>
<!-- 报警记录 -->
<Modal width="1100" v-model="showWarning" draggable scrollable title="报警记录">
<div style="margin-bottom: 10px">
<i-select v-model="warningLevel" style="width:200px">
<i-option :value="0">全部</i-option>
<i-option v-for="item in levelList" :value="item.code" :key="item.code">{{ item.name }}</i-option>
</i-select>
<el-date-picker
v-model="warningTime"
value-format="yyyy-MM-dd HH:mm:ss"
style="top:2px"
type="datetimerange"
size="small"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<i-button type="primary" @click="searchWarning">查询</i-button>
</div>
<el-table
:data="warningList"
border
height="427"
size="mini"
style="width: 100%">
<el-table-column
prop="name"
align="center"
label="报警名称"
width="180">
</el-table-column>
<el-table-column
prop="sensor_name"
label="报警传感器"
align="center"
width="100">
</el-table-column>
<el-table-column
prop="name"
label="报警数值 / 报警阀值"
align="center"
width="150">
<template slot-scope="scope">
{{scope.row.sdata}}/{{scope.row.alarm_sdata}}
</template>
</el-table-column>
<el-table-column
prop="description"
label="报警详情">
</el-table-column>
<el-table-column
prop="data.iot_trigger_alarm_level"
width="80"
align="center"
label="报警级别">
</el-table-column>
<el-table-column
prop="data.iot_alarm_process_status"
width="80"
align="center"
label="处理标志">
</el-table-column>
<el-table-column
prop="atimestr"
width="100"
align="center"
label="时间">
</el-table-column>
</el-table>
<div slot="footer">
<Page v-if="warningCount>0" transfer @on-change="warningPageChange"
@on-page-size-change="warningSizeChange"
:current="warningPaged"
:page-size="warningPageSize"
prev-text="上一页"
next-text="下一页" :total="warningCount" size="small" show-elevator show-total show-sizer/>
</div>
</Modal>
<!-- 历史数据 -->
<Modal width="700" v-model="showHistory" draggable scrollable title="历史数据">
<div style="margin-bottom: 10px">
<i-select v-model="historyQuery.sensor_id" placeholder="请选择传感点" style="width:200px">
<i-option :value="''">全部</i-option>
<i-option v-for="item in nodeSensor" :value="item.id" :key="item.id">{{item.name}}</i-option>
</i-select>
<el-date-picker
v-model="historyTime"
value-format="yyyy-MM-dd HH:mm:ss"
style="top:2px"
type="datetimerange"
size="small"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<i-button type="primary" @click="searchHistory">查询</i-button>
</div>
<el-table
:data="historyList"
border
height="397"
size="mini"
style="width: 100%">
<el-table-column
prop="sensor_name"
label="传感器"
align="center">
</el-table-column>
<el-table-column
prop="data.iot_sensor_type"
label="类型"
align="center"
width="100">
</el-table-column>
<el-table-column
prop="sdata"
width="150"
label="数值">
</el-table-column>
<el-table-column
prop="atimestr"
width="150"
align="center"
label="时间">
</el-table-column>
</el-table>
<div slot="footer">
<Page v-if="historyCount>0" transfer @on-change="historyPageChange"
@on-page-size-change="historySizeChange"
:current="historyPaged"
:page-size="historyPageSize"
prev-text="上一页"
next-text="下一页" :total="historyCount" size="small" show-elevator show-total show-sizer/>
</div>
</Modal>
<!-- 预过保和已过保设备数据 -->
<Modal width="900" v-model="showGuarantee" draggable scrollable :title="guaranteeTitle">
<el-table
:data="guaranteeList"
border
height="397"
size="mini"
style="width: 100%">
<el-table-column
prop="name"
label="名称"
align="center">
</el-table-column>
<el-table-column
prop="manager"
label="设备主管"
align="center"
width="80">
</el-table-column>
<el-table-column
prop="manager_phone"
label="联系方式"
align="center"
width="100">
</el-table-column>
<el-table-column
prop="pic"
label="负责人"
align="center"
width="80">
</el-table-column>
<el-table-column
prop="pic_phone"
label="联系方式"
align="center"
width="100">
</el-table-column>
<el-table-column
prop="install_time"
label="安装时间"
align="center"
width="150">
</el-table-column>
<el-table-column
prop="maintenance_time"
align="center"
width="150"
label="维保时间">
</el-table-column>
</el-table>
</Modal>
</div>
</body>
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/echarts/echarts.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://gallery.echartsjs.com/dep/echarts/map/js/china.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/newscrool.js"></script> <!-- 此处引用的为上面的插件实现代码 -->
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/js/vue.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/iview/dist/iview.min.js" charset="UTF-8"></script>
<script src="<%=basePath%>/lib/element-ui/index.js"></script>
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<script src="<%=basePath%>/lib/bigscreen/js/index.js"></script>
<script>
var videoCache = "" ;
var sensorCache = "" ;
var vindex = 0 ;
var sindex = 0 ;
var player ;
$(function(){
// 切换摄像头显示
function changev(){
vindex ++ ;
if( videoCache!= null && videoCache != '' && videoCache.length>0 ){
if(vindex >= videoCache.length ){
vindex = 0;
}
if(videoCache.length == 1){
return ;
}
$("#leftTwoBox").empty();
$("#leftTwoBox").append( $(".template0").html());
$("#myPlayer").attr("src",videoCache[vindex].rtmp_url_common);
player = new EZUIPlayer('myPlayer');
}
}
// 90s 切换一次视频
setInterval( function() {
changev();
}, 90*1000);
// 5s 切换传感器数据
setInterval( function() {
sindex++ ;
if( sensorCache!= null && sensorCache != '' && sensorCache.length>0 ){
if(sindex >= sensorCache.length){
if(sindex==1){
return ;
}
sindex=0;
}
$("#middenBottomBoxChil").empty();
var sContent = $(".template2").html().format(sensorCache[sindex].name , generateSensor(sensorCache[sindex].iotSensorList ) );
$("#middenBottomBoxChil").append( sContent ) ;
}
}, 5*1000);
$(".map_info_window").height( $("#middenBottomBoxChil").height() -10 );
// 立即更新
getSensorData({});
getVideos({});
// setInterval(function() {
// // 定时更新数值
// getSensorData({});
// }, 10*60*1000);
// setInterval(function() {
// // 定时更新数值
// getVideos({});
// }, 10*60*1000);
})
// 请求摄像头信息
function getVideos(data){
// 请求摄像头的数据
postAjax(localUrl+'/page/video.json?pageSize=30&paged=1',
data,
function(data){
if(isOK(data)){
var dataT = data.data.data ;
$("#leftTwoBox").empty();
$("#leftTwoBox").append( $(".template0").html());
$("#myPlayer").attr("src",dataT[0].rtmp_url_common);
player = new EZUIPlayer('myPlayer');
videoCache = dataT ;
vindex = 0 ;
}else{
player.pause();
}
}
);
}
// 请求传感器数据
function getSensorData(data){
// 实时数据
postAjax(localUrl+'/page/node/sensor/lists?paged=1&pageSize=30',
data,
function(data){
if(isOK(data)){
var dataT = data.data.data ;
sensorCache = dataT ;
sindex = 0 ;
$("#middenBottomBoxChil").empty();
var sContent = $(".template2").html().format(dataT[0].name , generateSensor(dataT[0].iotSensorList ) );
$("#middenBottomBoxChil").append( sContent ) ;
}else{
$("#middenBottomBoxChil").empty();
}
}
);
}
function generateSensor(data){
var s = '' ;
var dataT = data ;
for(var i=0;i<dataT.length;i++){
if( dataT[i].iot_sensor_type == 25 ){
s += $(".template3").html().format(dataT[i].name , gdv(dataT[i].sdata,0) ,dataT[i].data.measure_unit_type );
}else if( dataT[i].iot_sensor_type == 26 || dataT[i].iot_sensor_type == 27 ){
s += $(".template3").html().format(dataT[i].name ,gdv(dataT[i].data.measure_unit_type,'-') ,"" );
}
}
return s ;
}
// 10s刷新报警等信息
setInterval(function() {
vm.drawOfflineItems();
vm.shebeiItems();
}, 15* 1000 );
// 30min 一次页面
setTimeout(function(){
window.location.reload();
}, 30 * 60 * 1000);
var myChartMap = null
var vm= new Vue({
el: '#app',
data: function () {
return {
current: null,
cityName: "",
currentdate: '',
atitle: '中控管理平台数据统计',
echarts: echarts,
myCarousela: false,//
myCarouselb: false,//
begintime: '',//开始时间
begintimea: '',//开始时间
endtime: '',//结束时间
endtimea: '',//结束时间
sceneid: null,//项目ID
cont: 0,//总数
bjcont: 0,//报警总数
seildcont: 0,//项目总数
indexLun: 0,//
numa: 0,//
numberr: 0,//
counta: 0,//在线离线总数
noOnline: 0,//不在线
yesOnline: 0,//在线
yinume: 0,//已处理
weinume: 0,//未处理
yibannume: 0,//一般报警
yanzhongnume: 0,//严重报警
jinjinume: 0,//紧急报警
chuliAleam: [],//已处理未处理数组
dengAleam: [],//报警等级数组
aleamItems: [],//报警记录
aleamLineItems: [],//在线离线
leftThreeBoxa: [],//轮播
shujuTjX: [],//数据统计x轴
shujuTjY: [],//y轴
sensorCount: [],//历史数据
triggerCount: [],//触发数据
alarmCounta: [],//
shealarmCounta: [],//
sensorCounta: [],//
maoNames: [],//
numbera: 0,//
listIteams: {name: [], value: []},//轮播
geoCoordMapa: {},
tableItems: [],
tableItemsb: [],
showWarning: false,//是否显示设备报警
warningQuery: {//报警查询条件
},
warningTime: [],//报警查询时间范围
warningPaged: 1,//报警当前页
warningPageSize: 10,//报警每页条数
warningSensorid: 0,//选择的报警传感点
warningLevel: 0,//选择的报警等级
warningList: [],//报警列表
warningCount: 0,//报警总数
levelList: [],//报警级别
showHistory: false,//是否显示历史数据
historyList: [],//历史数据
historyCount: 0,//历史总数
historyQuery: {//历史查询条件
},
historyPaged: 1,//历史当前页
historyPageSize: 10,//历史每页条数
nodeSensor: [],//设备传感点
historyTime: [],//历史查询时间范围
nodeOver:null,//设备过保
nodePre:null,//预设备过保
guaranteeTitle:null,//过保标题
showGuarantee:false,//是否显示过保数据
guaranteeList:[]//过保数据
}
},
methods: {
//查询报警
searchWarning: function () {
this.warningPaged = 1
this.getWarning()
},
//获取报警数据
getWarning: function () {
var that = this
if (that.warningSensorid == 0) {
that.warningQuery.sensor_id = null
} else {
that.warningQuery.sensor_id = that.warningSensorid
}
if (that.warningLevel == 0) {
that.warningQuery.iot_trigger_alarm_level = null
} else {
that.warningQuery.iot_trigger_alarm_level = that.warningLevel
}
if (that.warningTime != null && that.warningTime.length > 0) {
that.warningQuery.start_time = that.warningTime[0]
that.warningQuery.end_time = that.warningTime[1]
} else {
delete that.warningQuery.start_time
delete that.warningQuery.end_time
}
var loading = layer.msg('正在加载,请稍后...', {icon: 16, time: false, shade: 0.1})
commonAjax("POST", localUrl + "/page/alarm?paged=" + that.warningPaged + '&pageSize=' + that.warningPageSize, that.warningQuery, function (res) {
layer.close(loading)
if (res.data == null) {
that.warningList = []
that.warningCount = 0
} else {
that.warningList = res.data.data
that.warningCount = res.data.totalCount
}
that.showWarning = true;
});
},
// 报警第几页
warningPageChange: function (val) {
this.warningPaged = val
this.getWarning()
},
// 报警每页显示条数
warningSizeChange: function (val) {
this.warningPageSize = val
this.warningPaged = 1
this.getWarning()
},
//获取级别
getLeve: function () {
var that = this
getAjax(localUrl + "/get-dictionary?p_code=" + 38, function (res) {
that.levelList = res.data
}
)
},
//获取历史数据
getHistory: function () {
var that = this ;
if (that.historyTime != null && that.historyTime.length > 0) {
that.historyQuery.start_time = that.historyTime[0]
that.historyQuery.end_time = that.historyTime[1]
if (!DateUtil.compare(that.historyQuery.start_time, that.historyQuery.end_time, 30 * 24 * 60 * 60 * 1000)) {
layer.msg("查询时间不能超过一个月!")
return false
}
} else {
layer.msg("请选择查询时间!")
return false
}
var loading = layer.msg('正在加载,请稍后...', {icon: 16, time: false, shade: 0.1})
commonAjax("POST", localUrl + "/page/sensor/history?paged=" + that.historyPaged + '&pageSize=' + that.historyPageSize, that.historyQuery, function (res) {
layer.close(loading)
if (res.data == null) {
that.historyList = []
that.historyCount = 0
} else {
that.historyList = res.data.data
that.historyCount = res.data.totalCount
}
that.showHistory = true
});
},
searchHistory: function () {
this.historyPaged = 1
this.getHistory()
},
// 历史第几页
historyPageChange: function (val) {
this.historyPaged = val
this.getHistory()
},
// 历史每页显示条数
historySizeChange: function (val) {
this.historyPageSize = val
this.historyPaged = 1
this.getHistory()
},
//获取设备传感点
getNodeSensor: function (id) {
var that = this
postAjax(localUrl + "/page/sensor.json?pageSize=10000&paged=1",
{scene_id: id},
function (res) {
if (res.data != null && res.data.data != null) {
that.nodeSensor = res.data.data
}
}
)
},
//离线在线
drawOffline: function (data, num) {
var that = this
var echarts = that.echarts
var myChart = echarts.init(document.getElementById('leftOneBox'))
myChart.setOption({
color: ["#2D73FF", "#C23531",],
title: {
text: '设备总数',
//subtext: num,
textStyle: {
color: '#eee',
fontSize: 14,
lineHeight: 20,
// align: 'center'
},
subtextStyle: {
fontSize: 14,
lineHeight: 20,
color: ['#ff9d19']
},
x: '33%',
y: '43%',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
grid: {
bottom: 150,
left: 100,
right: '10%'
},
legend: {
show: false,
orient: 'vertical',
top: "15%",
right: "5%",
textStyle: {
color: '#eee',
fontSize: 14,
},
icon: 'roundRect',
data: data,
},
series: [
// 主要展示层的
{
radius: ['55%', '70%'],
center: ['42%', '58%'],
type: 'pie',
label: {
normal: {
show: true,
formatter: "{b}:{c}",
textStyle: {
fontSize: 14,
},
position: 'outside'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 7,
length2: 7
},
emphasis: {
show: true
}
},
name: "",
data: data,
},
// 边框的设置
{
radius: ['55%', '45%'],
center: ['42%', '58%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 10,
itemStyle: {
color: "rgba(250,250,250,0.3)",
},
}],
}
]
});
},
//报警处理
drawAlerm: function (data, num) {
var that = this
var echarts = that.echarts
var myChart = echarts.init(document.getElementById('rightOneBox'))
myChart.setOption({
color: ["#2D73FF", "#C23531",],
title: {
text: '报警总数',
textStyle: {
color: '#eee',
fontSize: 14,
// align: 'center'
},
subtextStyle: {
fontSize: 14,
color: ['#ff9d19']
},
x: '37%',
y: '43%',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
grid: {
bottom: 150,
left: 100,
right: '10%'
},
legend: {
show: false,
orient: 'vertical',
top: "15%",
right: "5%",
textStyle: {
color: '#eee',
fontSize: 14,
},
icon: 'roundRect',
data: data,
},
series: [
// 主要展示层的
{
radius: ['55%', '70%'],
center: ['46%', '58%'],
type: 'pie',
label: {
normal: {
show: true,
formatter: "{b}:{c}",
textStyle: {
fontSize: 14,
},
position: 'outside'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 3,
length2: 5
},
emphasis: {
show: true
}
},
name: "",
data: data,
},
// 边框的设置
{
radius: ['55%', '45%'],
center: ['46%', '58%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 10,
itemStyle: {
color: "rgba(250,250,250,0.3)",
},
}],
}
]
});
},
// 视频轮播
startVideo: function(data){
alert(data.data.length);
console.log(data);
},
//过保数
drawAlermNum: function (data) {
var that = this
var echarts = that.echarts
var myChart = echarts.init(document.getElementById('leftTwoBox'))
var option = {
color: ['#FF8352', '#E271DE'],
backgroundColor: '#012A5C',
height: 100,
grid: {
bottom: 150,
left: 100,
right: '10%'
},
legend: {
orient: 'vertical',
left: "5%",
bottom: '5%',
textStyle: {
color: '#f2f2f2',
fontSize: 14,
},
icon: 'roundRect',
data: ['已经过保', '过保预警'],
},
tooltip: {
formatter: "{a}:<br/>{b}: {c}"
},
series: [
// 主要展示层的
{
radius: ['30%', '61%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: true,
formatter: "{c}",
textStyle: {
fontSize: 14,
},
position: 'outside'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 30,
length2: 55
},
emphasis: {
show: true
}
},
name: "过保情况",
data: data,
},
// 边框的设置
{
radius: ['30%', '34%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 1,
itemStyle: {
color: "rgba(250,250,250,0.3)",
},
}],
}, {
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['65%', '65%'],
label: {
normal: {
show: false
}
},
data: [{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0b5263'
}
}
}]
},
]
};
myChart.on('click', function (params) {
//TODO
that.guaranteeTitle = params.name
if (params.name == '已经过保') {
that.guaranteeList = that.nodeOver
} else {
that.guaranteeList = that.nodePre
}
that.showGuarantee = true
});
myChart.setOption(option);
},
//数据统计
drawStatisticsa: function (datax, sensorCount, triggerCount) {
var that = this
var echarts = that.echarts
var myChart = echarts.init(document.getElementById('rightThreeBox'))
myChart.setOption({
// backgroundColor: '#00265f',
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
data: ["历史数据", "触发历史"],
align: "right",
top: "4%",
right: "6%",
textStyle: {
color: "#fff"
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35
},
grid: {
left: "5%",
right: "6%",
bottom: "20%",
top: "15%",
containLabel: true
},
xAxis: [
{
type: "category",
data: datax,
axisLine: {
show: true,
lineStyle: {
color: "#063374",
width: 1,
type: "solid"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#00c7ff"
}
}
}
],
yAxis: [
{
type: "value",
interval: 1,
axisLabel: {
formatter: "{value}"
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "#063374"
}
}
}
],
series: [
{
name: "历史数据",
type: "bar",
data: sensorCount,
barWidth: 8,
// barGap: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00da9c"
},
{
offset: 1,
color: "#007a55"
}
]),
opacity: 1
}
}
},
{
name: "触发历史",
type: "bar",
data: triggerCount,
barWidth: 8,
// barGap: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#c4e300"
},
{
offset: 1,
color: "#728400"
}
]),
opacity: 1
}
}
}
]
});
},
drawStatistics: function (datax, sensorCount, triggerCount) {
var that = this
var echarts = that.echarts
var myChart = echarts.init(document.getElementById('rightThreeBox'))
myChart.setOption({
// backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333'
}
}
},
legend: {
data: ['历史数据', '触发历史'],
textStyle: {
color: '#ccc'
}
},
grid: {
left: "5%",
right: "6%",
bottom: "20%",
top: "15%",
containLabel: true
},
xAxis: {
data: datax,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [{
name: '触发历史',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
data: triggerCount
}, {
name: '历史数据',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#14c8d4'}
]
)
}
},
data: sensorCount
}]
});
},
//地图
/**
*
* @param geoCoo 地图
* @param list 城市{name:value}
* @param provArrx ["省份"]
*/
drawMap: function (geoCoo, list, provArrx) {
var that = this;
myChartMap = echarts.init(document.getElementById('middenTopBox'));
var geoCoordMap = geoCoo;
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title: {
text: '设备分布',
x: 'center',
y: '5%',
textStyle: {
color: '#eee',
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.name == null || params.name == '') {
return '该地区无项目'
}
var res = params.name + '<br/>';
var myseries = option.series;
if (convertData) {
for (var i = 0; i < that.tableItems.length; i++) {
if (that.tableItems[i].province.indexOf(params.name) >= 0) {
res += that.tableItems[i].name + ' : ' + that.tableItems[i].nodeCount + '</br>';
}
}
} else {
for (var i = 0; i < myseries.length; i++) {
for (var j = 0; j < myseries[i].data.length; j++) {
if (myseries[i].data[j].name == params.name) {
res += myseries[i].name + ' : ' + myseries[i].data[
j].value + '</br>';
}
}
}
}
return res;
},
},
legend: {
show: false,
orient: 'vertical',
left: 'left'
},
visualMap: {
min: 0,
max: 30,
x: '5%',
y: 'bottom',
color: ['red', 'orange', 'yellow', 'green'],
text: ['高', '低'],
calculable: true
},
series: [
{
name: '报警数',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
label: {
show: false
}
},
emphasis: {
label: {
show: true
}
}
},
// data:alarmCount,
data: list
},
]
};
myChartMap.setOption(option);
window.addEventListener("resize", function () {
myChartMap.resize();
});
var ini_data = [];//初始化省份数组
var provArr = provArrx;//获取的省份,有可能是从后台获取
//正则省份,将省与市的字眼去掉,框架不识别
if (provArrx == undefined) {
var provArr = [];
}
for (var i = 0; i < provArr.length; i++) {
var str = provArr[i];
var re = /省|市/g; //全局匹配
}
option.series[0].data = ini_data;//将拼接好的数组赋给参数集合
// myChart.setOption(option);//跟新图表
//鼠标滑过事件
var testStr = ',' + provArr.join(",") + ",";
myChartMap.on('hover', function (param) {
if (testStr.indexOf("," + param.name + ",") != -1) {
return false;
} else {
// param.value=15;
myChartMap.setOption(option);
}
});
//点击事件
myChartMap.on('click', function (params) {//点击事件
// select_province(params.name);
if (params.name != null) {
var itemsMpa = []
for (var i = 0; i < that.tableItems.length; i++) {
var re = /省|市/g; //全局匹配
if (that.tableItems[i].province.replace(re, '') == params.name) {
itemsMpa.push(that.tableItems[i])
}
}
that.tableItemsb = itemsMpa;
}
});
//初始化省颜色
function ini_province() {
var ini_len = option.series[0].data.length;
for (var i = 0; i < ini_len; i++) {
//初始化颜色
option.series[0].data[i].value = 5;
myChart.setOption(option);
}
}
//选中省颜色
function select_province(province_name) {
var len = option.series[2].data.length;
for (var i = 0; i < len; i++) {
if (option.series[2].data[i].name == province_name) {//如果匹配正确
//先归零
ini_province();
//改变颜色
// option.series[0].data[i].value=10;
myChart.setOption(option);
}
}
}
},
drawSwiper2: function (data) {
var lengDtata = [];
var setiDtata = [];
if (data != null) {
for (var i = 0; i < data.length; i++) {
lengDtata.push(data[i].name);
setiDtata.push(data[i].value);
}
}
var that = this;
var echarts = that.echarts;
var myChart = echarts.init(document.getElementById("middenBottomBoxChil"));
myChart.setOption({
color: ["#2D73FF"],
// backgroundColor: '#00265f',
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
show: true,
data: ["平台用户"],
align: "right",
top: "5%",
right: "6%",
textStyle: {
color: "#fff"
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35
},
grid: {
left: "5%",
right: "5%",
bottom: "15%",
top: "16%",
containLabel: true
},
xAxis: [
{
type: "category",
data: lengDtata,
axisLine: {
show: true,
lineStyle: {
color: "#063374",
width: 1,
type: "solid"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#00c7ff"
}
}
}
],
yAxis: [
{
type: "value",
interval: 1,
axisLabel: {
formatter: "{value}"
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
},
splitLine: {
lineStyle: {
color: "#063374"
}
}
}
],
series: [
{
name: "平台用户",
type: "bar",
data: setiDtata,
barWidth: 15, //柱子宽度
// barGap: 1, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#008cff"
},
{
offset: 1,
color: "#005193"
}
]),
opacity: 1
}
}
}
]
});
window.addEventListener("resize", function () {
myChart.resize();
});
},
//查询用户
usersItems: function () {
var that = this;
postAjax(localUrl + "/user/user-screen",
{},
function (res) {
//that.drawSwiper2(res.data);
}
)
},
//查询项目
middenButtonItems: function (num, namee, nodeCount, gsname, numa) {
var that = this;
if (num == undefined) {
postAjax(localUrl + "/page/scene-all",
{
start_time: that.begintime,
end_time: that.endtime,
},
function (res) {
that.tableItems = res.data;
that.tableItemsb = res.data;
that.seildcont = [];
that.sceneid = null;
that.drawOfflineItems();
that.drawOffOutlineItems();
that.shebeiItems();
that.historyItems();
that.mapItems(that.tableItems);
}
)
} else {
postAjax(localUrl + "/page/scene-all",
{
start_time: that.begintime,
end_time: that.endtime,
},
function (res) {
if (res.data != null) {
that.tableItems = res.data;
that.seildcont = res.data.length;
that.sceneid = num;
that.initPage()
}
}
)
}
},
//查询报警
drawOfflineItems: function () {
var that = this;
postAjax(localUrl + "/page/alarm-all",
{
start_time: that.begintime,
end_time: that.endtime,
scene_id: that.sceneid
},
function (res) {
that.aleamItems=[]
that.yinume = 0;
that.weinume = 0;
var chuliAleama = [];
that.dengAleam = [];
that.cont = 0;
that.bjcont = 0;
if (res.data == null || res.data.length == 0 ) {
chuliAleama.push({
name: "已处理",
value: 0
}, {
name: "未处理",
value: 0
})
that.bjcont = 0
that.chuliAleam = chuliAleama;
that.drawAlerm(that.chuliAleam, that.bjcont);
} else {
that.aleamItems = [] ;
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].iot_alarm_process_status == "46" ||
res.data[i].iot_alarm_process_status == "48" ) {
that.yinume++
} else {
that.weinume++
}
that.cont = res.data.length;
if( res.data[i].iot_alarm_process_status == "47" ){
// 记录报警记录
that.aleamItems.push({
value: res.data[i].description
})
}
}
if(!that.myCarouselb){
that.myCarouselb = true;
$(".ybox").scroll()
setTimeout(function () {
$(".ybox").scroll({
speed: 40,
direction: "y"
}); //设置为纵向滚动
}, 500);
}
that.bjcont = that.yinume + that.weinume
chuliAleama.push({
name: "已处理",
value: that.yinume++
}, {
name: "未处理",
value: that.weinume++
})
that.chuliAleam = chuliAleama;
that.drawAlerm(that.chuliAleam, that.bjcont);
}
}
)
},
// 视频摄像头
showVideos: function(){
},
//过保
drawOffOutlineItems: function () {
var that = this;
postAjax(localUrl + "/node/guarantee",
{
start_time: that.begintime,
end_time: that.endtime,
scene_id: that.sceneid
},
function (res) {
that.jinjinume = 0;
that.yibannume = 0;
that.dengAleam = [];
that.nodePre = res.pre
that.nodeOver = res.over
if (res.over == null) {
that.jinjinume = 0;
} else {
that.jinjinume = res.over.length;
}
if (res.pre == null) {
that.yibannume = 0;
} else {
that.yibannume = res.pre.length;
}
that.dengAleam.push({
name: "已经过保",
value: that.jinjinume++
}, {
name: "过保预警",
value: that.yibannume++
})
// that.drawAlermNum(that.dengAleam);
}
)
},
//查询设备
shebeiItems: function () {
var that = this;
postAjax(localUrl + "/page/node-all",
{
scene_id: that.sceneid
},
function (res) {
that.aleamLineItems = [];
that.noOnline = 0;
that.yesOnline = 0;
if (res.data != null) {
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].data.iot_node_status == "未连接" || res.data[i].data.iot_node_status == "设备已离线") {
that.noOnline++
} else {
that.yesOnline++
}
}
that.counta = res.data.length;
that.aleamLineItems.push({
name: "在线",
value: that.yesOnline++
}, {
name: "离线",
value: that.noOnline++
})
that.drawOffline(that.aleamLineItems, that.counta);
} else {
that.counta = 0;
that.aleamLineItems.push({
name: "在线",
value: 0
}, {
name: "离线",
value: 0
})
that.drawOffline(that.aleamLineItems, that.counta);
}
}
)
},
//查询项目历史数据和触发历史数量
historyItems: function () {
var that = this;
postAjax(localUrl + "/scene/trigger-sensor",
{
start_time: that.begintimea,
end_time: that.endtimea,
scene_id: that.sceneid
},
function (res) {
that.shujuTjX = [];
that.sensorCount = [];
that.triggerCount = [];
if (res.data != null) {
for (var i = 0; i < res.data.length; i++) {
that.shujuTjX.push(res.data[i].name.substring(5, 10));
that.sensorCount.push(res.data[i].data.sensorCount);
that.triggerCount.push(res.data[i].data.triggerCount);
}
that.drawStatistics(that.shujuTjX, that.sensorCount, that.triggerCount);
}
}
)
},
//地图数据
mapItems: function (nan) {
var that = this;
var list = []
var re = /省|市/g; //全局匹配
for (var j = 0; j < that.tableItems.length; j++) {
var paramw = {};
paramw.name = that.tableItems[j].province.replace(re, '');
paramw.value = that.tableItems[j].nodeCount
list.push(paramw)
}
postAjax(localUrl + "/page/node-map",
{
start_time: that.begintimea,
end_time: that.endtimea,
scene_id: that.sceneid
},
function (res) {
var obj = {};
that.alarmCounta = []
that.shealarmCounta = []
that.sensorCounta = []
if (res.data != null) {
for (var i = 0; i < res.data.length; i++) {
obj[res.data[i].name] = [res.data[i].lon, res.data[i].lat],
that.alarmCounta.push({
name: res.data[i].name,
value: res.data[i].alarmCount
});
that.shealarmCounta.push({
name: "设备数",
value: ""
});
that.sensorCounta.push({
name: res.data[i].name,
value: res.data[i].sensorCount
});
that.maoNames.push({name: res.data[i].name})
}
that.geoCoordMapa = obj;
that.drawMap(that.geoCoordMapa, list, nan);
} else {
that.geoCoordMapa = {};
that.shealarmCounta.push({
name: "设备数",
value: ""
});
that.alarmCounta.push({
name: "",
value: ""
});
that.sensorCounta.push({
name: "",
value: ""
});
that.maoNames.push({name: ""})
that.drawMap(that.geoCoordMapa, list, []);
}
}
)
},
//获取当前时间
getNowDate: function () {
var that = this;
var date = new Date();
var sign1 = "-";
var sign2 = ":";
var year = date.getFullYear() // 年
var month = date.getMonth() + 1; // 月
var day = date.getDate(); // 日
var hour = date.getHours(); // 时
var minutes = date.getMinutes(); // 分
var seconds = date.getSeconds() //秒
var weekArr = ['星期天','星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ];
var week = weekArr[date.getDay()];
// 给一位数数据前面加 “0”
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (day >= 0 && day <= 9) {
day = "0" + day;
}
if (hour >= 0 && hour <= 9) {
hour = "0" + hour;
}
if (minutes >= 0 && minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds >= 0 && seconds <= 9) {
seconds = "0" + seconds;
}
that.currentdate = year + sign1 + month + sign1 + day + " " + hour + sign2 + minutes + sign2 + seconds + " " + week;
},
//初始化页面
initPage: function () {
var that = this;
that.drawOfflineItems();
//that.drawOffOutlineItems();
// 视频摄像头展示
//that.showVideos();
that.shebeiItems();
that.historyItems();
},
// 点击项目
middenboox: function (items, index) {
var that = this;
that.sceneid = items.id;
that.initPage()
var list = []
var re = /省|市/g; //全局匹配
list.push({
name: items.province.replace(re, ''),
value: items.nodeCount
})
that.drawMap(that.geoCoordMapa, list, [items.province]);
getVideos({scene_id:items.id });
getSensorData({scene_id:items.id });
},
showAllscene: function () {
var that = this
that.tableItemsb = JSON.parse(JSON.stringify(that.tableItems))
that.sceneid = null
that.initPage();
that.mapItems(that.tableItems)
},
//报警记录详情
loadWarning: function (item) {
var that = this
that.warningQuery.scene_id = item.id
that.warningPaged = 1
var end = new Date();
var start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
that.warningTime = [start, end]
that.warningLevel = 0
that.getWarning()
that.showWarning = true
},
loadHistory: function (item) {
var that = this
that.historyQuery.scene_id = item.id
that.historyPaged = 1
var end = new Date();
var start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
that.historyTime = [start, end]
that.historyQuery.sensor_id = ''
that.getNodeSensor(item.id)
that.getHistory();
that.showHistory = true
}
},
computed: function () {
},
created: function () {
var that = this
that.getLeve()
//取时间
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, // month
"d+": this.getDate(), // day
"h+": this.getHours(), // hour
"m+": this.getMinutes(), // minute
"s+": this.getSeconds(), // second
"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
"S": this.getMilliseconds()
// millisecond
}
if (/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
: ("00" + o[k]).substr(("" + o[k]).length));
return format;
}
var begin = new Date();
var end = new Date();
new Date(begin.setMonth((new Date().getMonth() - 1)));
that.begintime = begin.Format("yyyy-MM-dd hh:mm:ss");
that.begintimea = begin.Format("yyyy-MM-dd");
that.endtime = end.Format("yyyy-MM-dd hh:mm:ss");
that.endtimea = end.Format("yyyy-MM-dd");
window.onresize = function () {
echarts.init(document.getElementById('leftOneBox')).resize();
echarts.init(document.getElementById('leftTwoBox')).resize();
echarts.init(document.getElementById('middenTopBox')).resize();
echarts.init(document.getElementById('rightOneBox')).resize();
echarts.init(document.getElementById('rightThreeBox')).resize();
}
that.getNowDate();
that.middenButtonItems();
// that.usersItems();
},
mounted: function () {
var that = this;
setInterval(function () {
that.getNowDate();
}, 1000);
},
watch: {},
})
</script>
</html>