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.
1631 lines
62 KiB
1631 lines
62 KiB
3 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" style="padding: 1px;" > <!-- id="middenTopBox" -->
|
||
|
|
<div id="map" style="width: 100%;height: 100%;">
|
||
|
|
</div>
|
||
|
|
<div style="position: absolute; left:10px;top:20px;">
|
||
|
|
<p>
|
||
|
|
<input style="display: inline;width: 200px;margin-left: 20px; " id="addessmap" placeholder="地址查询" class="input">
|
||
|
|
<button onclick="searchmap()" class="button" style="background: #fff;">查询</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</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="cursor: pointer;float: right;margin-right: 20px;text-decoration: underline;" @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="http://api.map.baidu.com/api?v=3.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
|
||
|
|
<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 ;
|
||
|
|
var map ;
|
||
|
|
var dataCache ;
|
||
|
|
|
||
|
|
// 将地址解析结果显示在地图上,并调整地图视野
|
||
|
|
var myGeo = new BMap.Geocoder();
|
||
|
|
|
||
|
|
function searchmap(){
|
||
|
|
// 地址查询经纬度
|
||
|
|
myGeo.getPoint( $("#addessmap").val(), function(point){
|
||
|
|
if (point) {
|
||
|
|
map.centerAndZoom(point, 12);
|
||
|
|
}else{
|
||
|
|
alert("您填写地址没有找到结果!");
|
||
|
|
}
|
||
|
|
}, "中国");
|
||
|
|
}
|
||
|
|
|
||
|
|
$(function(){
|
||
|
|
|
||
|
|
var area = "中国" ; // '湖北省钟祥市'
|
||
|
|
var mapcenter = "郑州" ;
|
||
|
|
|
||
|
|
map = new BMap.Map("map" ); // 创建Map实例
|
||
|
|
|
||
|
|
map.setMapStyle({
|
||
|
|
features: ["building","water","land"],
|
||
|
|
style : "dark"
|
||
|
|
});
|
||
|
|
|
||
|
|
map.centerAndZoom(mapcenter, 5); // 初始化地图,设置中心点坐标和地图级别
|
||
|
|
|
||
|
|
//添加地图类型控件
|
||
|
|
map.addControl(new BMap.MapTypeControl({
|
||
|
|
mapTypes:[
|
||
|
|
BMAP_NORMAL_MAP,
|
||
|
|
BMAP_HYBRID_MAP
|
||
|
|
]}));
|
||
|
|
|
||
|
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||
|
|
|
||
|
|
var bdary = new BMap.Boundary();
|
||
|
|
bdary.get(area, function (rs) { //获取行政区域
|
||
|
|
//网上查了下，东西经南北纬的范围
|
||
|
|
var EN_JW = "180, 90;"; //东北角
|
||
|
|
var NW_JW = "-180, 90;"; //西北角
|
||
|
|
var WS_JW = "-180, -90;"; //西南角
|
||
|
|
var SE_JW = "180, -90;"; //东南角
|
||
|
|
//4.添加环形遮罩层
|
||
|
|
var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246,0.2)", fillOpacity:0.5, strokeOpacity: 0.5 }); //建立多边形覆盖物
|
||
|
|
|
||
|
|
map.addOverlay(ply1);
|
||
|
|
//5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
|
||
|
|
var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
|
||
|
|
map.addOverlay(ply);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function setTextShowMap(lon,lat ,obj){
|
||
|
|
var point = new BMap.Point(lon,lat);
|
||
|
|
var opts = {
|
||
|
|
position : point, // 指定文本标注所在的地理位置
|
||
|
|
offset : new BMap.Size(2, -27) //设置文本偏移量
|
||
|
|
}
|
||
|
|
var label = new BMap.Label(obj.name , opts);
|
||
|
|
label.setStyle({
|
||
|
|
color : "black",
|
||
|
|
fontSize : "14px",
|
||
|
|
fontFamily:"微软雅黑"
|
||
|
|
});
|
||
|
|
map.addOverlay(label);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 地址设置标记点
|
||
|
|
function selfLocation(lon,lat,obj){
|
||
|
|
// 显示文本
|
||
|
|
setTextShowMap(lon,lat,obj);
|
||
|
|
//单独设定图标的样式
|
||
|
|
var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/location2.png', new BMap.Size(32, 32), {
|
||
|
|
anchor: new BMap.Size(32, 32)
|
||
|
|
});
|
||
|
|
//创建一个图像标注实例。point参数指定了图像标注所在的地理位置
|
||
|
|
var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
|
||
|
|
icon: icon
|
||
|
|
});
|
||
|
|
|
||
|
|
mkr.addEventListener("click", function () {
|
||
|
|
// 这边不弄对象了；
|
||
|
|
|
||
|
|
vm.sceneid = obj.id;
|
||
|
|
vm.initPage()
|
||
|
|
getVideos({scene_id:obj.id });
|
||
|
|
getSensorData({scene_id:obj.id });
|
||
|
|
|
||
|
|
});
|
||
|
|
mkr.addEventListener("mouseover", function (e) {
|
||
|
|
|
||
|
|
});
|
||
|
|
mkr.addEventListener("mouseout", function (e) {
|
||
|
|
$(".show_index").hide();
|
||
|
|
});
|
||
|
|
//将覆盖物添加到地图中
|
||
|
|
map.addOverlay(mkr);
|
||
|
|
//将地图的中心点更改为给定的点
|
||
|
|
map.panTo(lon,lat);
|
||
|
|
}
|
||
|
|
|
||
|
|
getMySceneData();
|
||
|
|
|
||
|
|
// 获取项目信息
|
||
|
|
function getMySceneData(){
|
||
|
|
postAjax(localUrl+"/page/scene.json?pageSize=300&paged=1", {},function(data){
|
||
|
|
if(isOK(data)){
|
||
|
|
var dataT = data.data.data ;
|
||
|
|
dataCache = dataT ;
|
||
|
|
for(var i=0;i<dataT.length;i++){
|
||
|
|
selfLocation(dataT[i].lon,dataT[i].lat,dataT[i]);
|
||
|
|
if(i==0){
|
||
|
|
map.panTo(dataT[i].lon,dataT[i].lat);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 切换摄像头显示
|
||
|
|
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({});
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
// 请求摄像头信息
|
||
|
|
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 ){
|
||
|
|
if( dataT[i].measure_unit_type == 250 ){
|
||
|
|
s += $(".template3").html().format(dataT[i].name , getWindUint(gdv(dataT[i].sdata,0)) ,"" );
|
||
|
|
}else{
|
||
|
|
s += $(".template3").html().format(dataT[i].name ,gdv(dataT[i].data.measure_unit_type,'-') ,"" );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return s ;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getWindUint(sdata){
|
||
|
|
if( sdata == 0 ){
|
||
|
|
return "北风 " ;
|
||
|
|
}else if( sdata >0 && sdata <90 ){
|
||
|
|
return "东北 ";
|
||
|
|
}else if( sdata == 90 ){
|
||
|
|
return "东 ";
|
||
|
|
}else if( sdata >90 && sdata <180 ){
|
||
|
|
return "东南 ";
|
||
|
|
}else if( sdata== 180 ){
|
||
|
|
return "南 ";
|
||
|
|
}else if( sdata >180 && sdata <270 ){
|
||
|
|
return "西南 ";
|
||
|
|
}else if( sdata ==270 ){
|
||
|
|
return "西 ";
|
||
|
|
}else if( sdata >270 ){
|
||
|
|
return "西北 ";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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);
|
||
|
|
},
|
||
|
|
//数据统计
|
||
|
|
drawStatisticsa: function (datax, sensorCount, triggerCount) {
|
||
|
|
var that = this
|
||
|
|
var echarts = that.echarts
|
||
|
|
var myChart = echarts.init(document.getElementById('rightThreeBox'))
|
||
|
|
myChart.setOption({
|
||
|
|
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,
|
||
|
|
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
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
//查询用户
|
||
|
|
usersItems: function () {
|
||
|
|
var that = this;
|
||
|
|
postAjax(localUrl + "/user/user-screen",
|
||
|
|
{},
|
||
|
|
function (res) {
|
||
|
|
}
|
||
|
|
)
|
||
|
|
},
|
||
|
|
//查询项目
|
||
|
|
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.shebeiItems();
|
||
|
|
that.historyItems();
|
||
|
|
}
|
||
|
|
)
|
||
|
|
} 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 == "47" ||
|
||
|
|
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 == "46" ||
|
||
|
|
res.data[i].iot_alarm_process_status == "48" ){
|
||
|
|
// 记录报警记录
|
||
|
|
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(){
|
||
|
|
},
|
||
|
|
//查询设备
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
},
|
||
|
|
//获取当前时间
|
||
|
|
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.shebeiItems();
|
||
|
|
that.historyItems();
|
||
|
|
},
|
||
|
|
// 点击项目
|
||
|
|
middenboox: function (items, index) {
|
||
|
|
|
||
|
|
var that = this;
|
||
|
|
that.sceneid = items.id;
|
||
|
|
that.initPage()
|
||
|
|
|
||
|
|
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();
|
||
|
|
},
|
||
|
|
//报警记录详情
|
||
|
|
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 * 3);
|
||
|
|
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 * 1);
|
||
|
|
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),
|
||
|
|
"S": this.getMilliseconds()
|
||
|
|
}
|
||
|
|
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();
|
||
|
|
|
||
|
|
begin.setDate(new Date().getDate()-2);
|
||
|
|
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('rightOneBox')).resize();
|
||
|
|
echarts.init(document.getElementById('rightThreeBox')).resize();
|
||
|
|
}
|
||
|
|
that.getNowDate();
|
||
|
|
that.middenButtonItems();
|
||
|
|
},
|
||
|
|
mounted: function () {
|
||
|
|
var that = this;
|
||
|
|
setInterval(function () {
|
||
|
|
that.getNowDate();
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
watch: {},
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|