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
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>
|