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

875 lines
37 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="../../lib/iview/dist/styles/iview.css">
<script src="../common/util.js"></script>
<script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../lib/layer/layer.js"></script>
<script src="../../lib/bigscreen/js/vue.min.js"></script>
<script src="../../lib/iview/dist/iview.js"></script>
<script src="../../lib/echarts/echarts.min.js"></script>
<script src="http://api.map.baidu.com/api?v=3.0&ak=q5uqiBY29eEu0wNIAPoCXwq1HvUmDzqP"></script>
<script type="text/javascript" src="../../lib/mqtt/mqtt.min.js"></script>
<script>
function fun_date(num) {
var date1 = new Date();
//今天时间
var time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
var date2 = new Date(date1);
date2.setDate(date1.getDate() + num);
//num是正数表示之后的时间,num负数表示之前的时间,0表示今天
var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
return time2;
}
function FormatTime (time) {
var fmt = "yyyy/MM/dd hh:mm:ss";
var datetime = new Date();
datetime.setTime(time);
var o = {
"M+": datetime.getMonth() + 1,
"d+": datetime.getDate(),
"h+": datetime.getHours(),
"m+": datetime.getMinutes(),
"s+": datetime.getSeconds(),
"q+": Math.floor((datetime.getMonth() + 3) / 3),
"S": datetime.getMilliseconds()
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
</script>
<title>设备详情页</title>
</head>
<body>
<div id="app" v-cloak>
<!-- <div class="d-head-title"> -->
<!-- <span class="small">设备运行监测</span> -->
<!-- </div> -->
<Row :gutter="16">
<i-col span="12">
<Card class="box-Card">
<div slot="title" class="clearfix">
<span class="d-common-title">设备信息</span>
</div>
<div>
<Row>
<i-col span="13" style="height:126px;padding-left:20px;">
<div style="margin-top: 15px;">
<span class="d-font-bold">所属项目</span>
<span v-cloak>: {{scene_name}}</span>
</div>
<div>
<span class="d-font-bold">设备名称</span>
<span v-cloak>: {{device_name}}</span>
</div>
<div>
<span class="d-font-bold">设备SN号</span>
<span v-cloak>: {{device_code}}</span>
</div>
</i-col>
<i-col span="11">
<div style="margin-top: 15px;">
<span class="d-font-bold">在线状态</span>
<span>: </span>
<Tag size="mini" :color="nowtype" v-cloak>{{state}}</Tag>
</div>
<div>
<span class="d-font-bold">通讯协议</span>
<span v-cloak>: {{iot_node_type}}</span>
</div>
<div>
<span class="d-font-bold">经纬度</span>
<span v-cloak>: {{lonLat}}</span>
</div>
</i-col>
</Row>
</div>
</Card>
</i-col>
<i-col span="12">
<Card class="box-Card">
<div slot="title" class="clearfix">
<span class="d-common-title">设备地图</span>
</div>
<div id="dmap">
</div>
</Card>
</i-col>
</Row>
<Card class="d-bottom-card">
<div slot="title">
<Row>
<i-col span="20">
<span class="d-common-title">运行监测</span>
<span> - </span>
<span>设备实时数据</span>
</i-col>
</Row>
</div>
<Row v-for="(item,i) in dotList">
<i-col span="8" v-for="innerItem in item" >
<!-- @click="chart(innerItem)" -->
<div>
<div v-if="innerItem.name" style="width:100%;">
<Row class="img-set" align="middle">
<i-col span="4">
<img :src="innerItem.picUrl" class="sensor-img">
</i-col>
<i-col span="11">
<div v-cloak class="name-wrap">
{{innerItem.name}}
</div>
<div v-cloak class="time-wrap">
{{innerItem.mtime}}
</div>
</i-col>
<i-col style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" span="9" class="data-wrap">
<span v-cloak v-if="innerItem.iot_sensor_type!=27">
{{innerItem.showSensorTtype}}
</span>
<i-switch
:loading="isload"
@on-change="onChange(innerItem)"
v-if="innerItem.iot_sensor_type==27"
v-model="innerItem.ison">
</i-switch>
<img @click="downparam(innerItem.id)" v-if="innerItem.readType == 1" class="editicon" src="../../image/wechat/iot/edit.png">
</i-col>
</Row>
</div>
</div>
</i-col>
</Row>
</Card>
<Card style="margin-top:10px" >
<div slot="title">
<Row>
<i-col span="20">
<span class="d-common-title">参数配置</span>
<span> - </span>
<span>设备配置信息</span>
</i-col>
</Row>
</div>
<Row :gutter="16">
<i-col :key="index" v-for="(item,index) in paramsdata" span="12" style="margin-bottom:10px;" >
<Card :key="index">
<p slot="title" v-cloak>
{{item.name}}
</p>
<div slot="extra">
<span v-cloak style="margin-right:20px;">更新时间:{{FormatTime(item.mtime)}}</span>
<i-button size="small" style="margin-top:-5px;" @click="downparam(item.id)" type="primary">参数下发</i-button>
<!-- <i-button size="small" style="margin-top:-5px;" @click="getparams(item)" type="success">读取参数</i-button> set(item) -->
</div>
<Row style="margin:8px 0;">
<i-col v-cloak style="margin-top:6px;" span="12">
{{item.sdata}} <span style="color:#999;margin-left: 30px;">{{item.param_config}}</span>
</i-col>
</Row>
<div>
<span>备注:</span>
<span v-cloak>设置{{item.param_names}}</span>
</div>
</Card>
</i-col>
</Row>
</Card>
<Card style="margin-top:10px" >
<div slot="title">
<Row>
<i-col span="20">
<span class="d-common-title">规则配置</span>
<span> - </span>
<span>触发器信息</span>
</i-col>
</Row>
</div>
<i-table border :columns="columns1" :data="tableData"></i-table>
</Card>
</div>
<script>
var map=null;
var id = getQueryString('id') ;
new Vue({
el: '#app',
data: function() {
return {
tableData: [],
columns1: [
{
title: '序号',
width: 70,
key: 'index'
},
{
title: '触发器名称',
key: 'name'
},
{
title: '关联传感器',
key: 'from_sensor_name'
},
{
title: '触发条件',
key: 'tiaojian'
},
{
title: '触发条件参数',
key: 'condition_params'
},
{
title: '报警开关',
key: 'kaiguan'
}, {
title: '触发器状态',
key: 'zhuangtai',
render:(h,params)=>{
return h('span',{
style:{
color:params.row.zhuangtai=='暂停'?'red':'#3499da'
}
},params.row.zhuangtai)
}
}
, {
title: '触发循环时间',
key: 'trigger_inteval_time',
width:140
},
{
title: '操作',
key: 'action',
width: 150,
render: (h, params) => {
return h('div', [
h('Tooltip', {
props: {
content:params.row.iot_trigger_status==43?'暂停':'开启',
placement: "top"
},
},[
h('span', {
class:params.row.iot_trigger_status==43?'self-icon icon-pause':'self-icon icon-play',
on: {
click: () => {
this.pause(params)
}
}
}, '')
], '')
]);
}
}
],
chartList:[],
paramsdata:[],
isload:false,
dotList:[],
nowtype:'success',
device_name:'',
lonLat:'',
scene_name:'',
device_code:'',
state:'',
iot_node_type:'',
deviceID:'',
productOptions:[],
deviceDotOptions:[],
deviceOptions:[],
client: null ,
idsArr:[],
lastTime: new Date().getTime() ,
iotNodeStatus: null ,
search: {
deviceDot: [],
timeDistance:'',
device: '',
product:''
}
}
},
methods:{
pause(val){
var that=this
this.$Modal.confirm({
title: val.row.iot_trigger_status==43?'是否暂停':'是否开启',
width:'300px',
className:'vertical-center-modal',
style:{top:'220px'},
content:'',
onOk: () => {
$.ajax({
type:'PUT',
url:baseurl+'/service/trigger.json',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
id:val.row.id,
iot_trigger_status:val.row.iot_trigger_status==43?44:43
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
that.getTableData()
that.$Message.success('操作成功!');
}else{
that.$Message.error(e.statusMsg)
}
},
error: function (e) {
console.log(e)
}
});
}
})
},
downparam(id){
var that = this ;
layer.prompt({title: '数据下发', formType: 3}, function(val, index){
commonAjax('PUT',baseurl+'/service/sensor/param/down.json', {sdata : val ,id:id },function(data){
if(data.status == 2){
that.$Message.success("写指令下发成功!");
}else{
that.$Message.error(data.statusMsg);
}
});
layer.close(index);
});
},
remove(val){
var that=this
this.$Modal.confirm({
title: '是否删除?',
width:'300px',
className:'vertical-center-modal',
style:{top:'220px'},
content: '',
onOk: () => {
$.ajax({
type:'delete',
url:baseurl+'/service/trigger.json?id='+val.row.id,
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
that.getTableData()
that.$Message.success('操作成功!');
}else{
that.$Message.error(e.statusMsg);
}
},
error: function (e) {
console.log(e)
}
});
}
})
},
getTableData(){
var that=this
$.ajax({
type:'post',
url:baseurl+'/service/page/trigger?paged=1',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
"node_id": id
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
that.tableData=e.data.data.map((item,index)=>{
item.index=index+1
item.tiaojian=item.data.iot_trigger_condition_type
item.kaiguan=item.data.iot_trigger_alarm_flag
item.zhuangtai=item.data.iot_trigger_status
return item
})
}else{
that.tableData=[]
}
},
error: function (e) {
console.log(e)
}
});
},
chart(item){
},
mqttInit(){
var that = this ;
// 连接选项
var client = this.client ;
const options = {
connectTimeout: 4000, // 超时时间
// 认证信息
clientId: 'brower_' + parseInt(Math.random()/31.1*10000000000),
username: mqttUserName ,
password: mqttPassword ,
}
client = mqtt.connect('ws://'+document.domain+':8083/mqtt', options) ;
client.on('reconnect', function(error) {
console.log("reconnect");
})
client.on('error', function(error) {
console.log('连接失败:', error)
})
client.on('message', function(topic, message,s) {
if( message.toString() == '1' ){
if( that.lastTime + 3*1000 < new Date().getTime() ){
that.getDevData()
that.getSet()
that.getDevDots();
that.lastTime = new Date().getTime() ;
}
}
})
client.subscribe("/node/update/"+ id );
client.publish('/sys/update/node' , id );
},
getDsv(value ,status ){
if( status != 16 ){
return "-" ;
}else{
return value ;
}
},
getSwitch(value, status){
if( status != 16 ){
return 0 ;
}else{
return value ;
}
},
setChart(data,id){
let dataArr=data.data
var myChart = echarts.init(document.getElementById(id));
let ydata=[];
var xdata=[]
for(var i=0;i<dataArr.length;i++){
xdata.push(FormatTime(dataArr[i].atime))
ydata.push(dataArr[i].sdata)
}
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross'
}
},
dataZoom: [
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
],
xAxis: {
type: 'category',
data:xdata.reverse(),
boundaryGap: false,
axisLabel:{
formatter: function (value, index) {
return value.replace(' ', '\n');
}
},
splitLine: {
            show: false
        }
},
yAxis: {
type: 'value',
name: data.name,
nameTextStyle:{
color:"#2a53cd",
fontSize:16,
padding:10
}
},
series:[
{
type: 'line',
data: ydata.reverse(),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
]
}
myChart.setOption(option, true);
},
getChart(item){
var that=this
this.isload=true
$.ajax({
type:'post',
url:baseurl+'/service/page/sensor/history.json?paged=1&pageSize=400',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
"sensor_id":item.id ,
start_time:fun_date(-6)+' 00:00:00',
end_time: fun_date(0)+" 23:59:59"
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
e.data.name=item.name
that.chartList.push(e.data)
that.$nextTick(() => {
for(var i=0;i<that.chartList.length;i++){
that.setChart(that.chartList[i],'chart'+i)
}
})
}else{
that.chartList.push({
data:[],
name:item.name
})
that.$nextTick(() => {
for(var i=0;i<that.chartList.length;i++){
that.setChart(that.chartList[i],'chart'+i)
}
})
}
},
error: function (e) {
}
});
},
onChange(val){
var that=this ;
if( that.iotNodeStatus != 16 ){
that.$Message.error('设备已离线');
that.getDevDots();
return ;
}
this.isload=true ;
$.ajax({
type:'PUT',
url:baseurl+'/service/sensor/control/realtime/update',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
id: val.id,
request_sdata: val.ison?1:0
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
that.$Message.success('操作成功');
}else{
that.$Message.error(e.statusMsg);
}
setTimeout(() => {
that.isload=false ;
}, 800);
that.lastTime = that.lastTime - 3*1000 ;
},
error: function (e) {
}
});
},
getparams(val){
var that=this
$.ajax({
type:'PUT',
url:baseurl+'/service/sensor/param/read.json',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
id:val.id
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
that.$Message.success('操作成功');
that.getSet()
}else{
that.$Message.error(e.statusMsg);
}
},
error: function (e) {
}
});
},
set(val){
var that=this
$.ajax({
type:'PUT',
url:baseurl+'/service/sensor/param/down.json',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
sdata:Number(val.sdata),
id:val.id
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
that.$Message.success('操作成功');
setTimeout(function(){
that.getSet()
},3000)
}else{
that.$Message.error(e.statusMsg);
}
},
error: function (e) {
}
});
},
getSet(){
var that=this
$.ajax({
type:'POSt',
url:baseurl+'/service/page/sensor?paged=1',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
data_type:1,
node_id:id
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.data){
that.paramsdata=e.data.data
}
},
error: function (e) {
}
});
},
getDevDots(){
var that=this
$.ajax({
type:'POSt',
url:baseurl+'/service/page/sensor?paged=1&pageSize=100',
contentType: 'application/json',
dataType: "json",
data:JSON.stringify({
data_type:0,
node_id: id
}),
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.data==null){
return
}
var allDotData=e.data.data ;
var listData=[] ;
for(var i=0;i<allDotData.length;i++){
var obj={
id: allDotData[i].id,
name:allDotData[i].name,
mtime:FormatTime(allDotData[i].mtime),
str_sdata:allDotData[i].str_sdata,
sdata:allDotData[i].sdata,
iot_sensor_type:allDotData[i].iot_sensor_type,
data:allDotData[i].data,
readType: JSON.parse(gdv(allDotData[i].infos,'{}')).readType ,
picUrl:baseurl+'/image/oss/iot/'+allDotData[i].measure_unit_type+'.png'
}
listData.push(obj)
}
var lenData = 3 - listData.length % 3 ;
for(var i=0;i<lenData;i++){
listData.push({})
}
// 设置没有数值时,不显示数据
setTimeout( function() {
that.dotList=[] ;
for(var i=0;i<listData.length;i++){
var showSensorTtype=''
switch(listData[i].iot_sensor_type){
case 25:
showSensorTtype= that.getDsv(listData[i].sdata, that.iotNodeStatus )+ " "+ listData[i].data.measure_unit_type
break;
case 26:
showSensorTtype= that.getDsv(listData[i].data.measure_unit_type,that.iotNodeStatus )
break;
case 27:
showSensorTtype= that.getDsv(listData[i].data.measure_unit_type ,that.iotNodeStatus )
break;
case 90:
showSensorTtype= that.getDsv( listData[i].str_sdata,that.iotNodeStatus )
break;
}
listData[i].showSensorTtype=showSensorTtype
if( that.iotNodeStatus == 16 ){
listData[i].ison=showSensorTtype=='关闭'?false:true ;
}else{
listData[i].ison=showSensorTtype = false ;
}
}
for(var j=0;j<listData.length;j++){
that.dotList.push( listData.slice(j,j+3) ) ;
j=j+2
}
}, 400);
},
error: function (e) {
}
});
},
getDevData(){
var that=this
$.ajax({
type:'GET',
url:baseurl+'/service/node?id='+id,
contentType: 'application/json',
dataType: "json",
headers : {'USER-KEY':ucode},
success: function (e) {
if(e.status==2){
if(!e.data.lonLat){
e.data.lonLat='118.7812,32.0712'
}
var lonLat=e.data.lonLat.split(',')
that.lonLat=e.data.lonLat;
var str_name = 'location2.png' ;
if(e.data.iot_node_status != 16){
str_name = 'location2_red.png' ;
}
var myIcon = new BMap.Icon(baseurl+"/image/oss/iot/"+str_name, new BMap.Size(30,37));
var point = new BMap.Point(lonLat[0], lonLat[1]);
that.state=e.data.data.iot_node_status
switch(that.state){
case '故障':
that.nowtype='error'
break;
case '未连接':
that.nowtype='warning'
break;
case '设备已离线':
that.nowtype='error'
break;
case '在线':
that.nowtype='success'
break;
}
that.iot_node_type=e.data.data.iot_node_type
that.scene_name=e.data.scene_name
that.device_code=e.data.device_code
that.device_name=e.data.name
that.deviceID=e.data.id
that.iotNodeStatus = e.data.iot_node_status ;
var marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
map.addOverlay(marker);
map.centerAndZoom(point, 13); // 将标注添加到地图中
}
},
error: function (e) {
}
});
}
},
created(){
let that=this
this.getTableData()
this.getDevDots()
that.getDevData()
this.getSet()
this.mqttInit();
},
mounted(){
map = new BMap.Map("dmap");
map.enableScrollWheelZoom(true);
map.setMapStyle({
styleJson: [{
"featureType": "road",//道路
"elementType": "all",
"stylers": {
"color": "#ffffff",
"visibility": "off"
}
},
{
"featureType": "building",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "poilabel",//景点
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "manmade",//学院
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
})
}
})
</script>
</body>
</html>