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.
230 lines
7.7 KiB
230 lines
7.7 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
|
||
|
|
width=device-width,initial-scale=1.0" />
|
||
|
|
<title>物联网可视化平台</title>
|
||
|
|
<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="lib/element-ui/index.css">
|
||
|
|
<script src="lib/element-ui/vue.min.js"></script>
|
||
|
|
<script src="lib/element-ui/index.js"></script>
|
||
|
|
<script src="../common/util.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="./lib/layer/layer.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=q5uqiBY29eEu0wNIAPoCXwq1HvUmDzqP"></script>
|
||
|
|
<!-- 视频播放 -->
|
||
|
|
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
|
||
|
|
<script type="text/javascript" src="../../lib/echarts/echarts.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../lib/mqtt/mqtt.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="js/show.js"></script>
|
||
|
|
<link rel="stylesheet" href="css/show.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="appps">
|
||
|
|
<div id="app" style="height: 0;">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-dialog title="数据下发" :visible.sync="dialogVisible" :width="popwidth" >
|
||
|
|
<el-input v-model="inputData" size="medium" placeholder="请输入数据"></el-input>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="downdata">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="operateColumn">
|
||
|
|
<img src="./image/scale_d.png" onclick="scaled()">
|
||
|
|
<img src="./image/scale_x.png" onclick="scalex()">
|
||
|
|
<img src="./image/scale_n.png" onclick="scalen()">
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var id = getQueryString('id') ;
|
||
|
|
var keyCode = getQueryString('keyCode') ;
|
||
|
|
|
||
|
|
var app = new Vue({
|
||
|
|
el:"#appps",
|
||
|
|
data:function(){
|
||
|
|
return {
|
||
|
|
isdrag:false,
|
||
|
|
dialogVisible: false ,
|
||
|
|
downSensorId : '' ,
|
||
|
|
inputData: '' ,
|
||
|
|
tabmode:0,
|
||
|
|
uploadImgs:[],
|
||
|
|
initUpload:'',
|
||
|
|
uploadImgCount:0,
|
||
|
|
sensorMap:{},
|
||
|
|
videoMap:{},
|
||
|
|
nid:'', //当前选择对象n类型
|
||
|
|
sid:'',
|
||
|
|
sensor_id:'',
|
||
|
|
node_id:'',
|
||
|
|
cid:'',
|
||
|
|
video_id:'',
|
||
|
|
bdMap:{}, //节点id-map对象
|
||
|
|
chartMap:{} , //
|
||
|
|
scaler:1 , // 放大缩小
|
||
|
|
changescaler: 1 , // 变化
|
||
|
|
orginWidth: '' , // 组件的宽度
|
||
|
|
orginHeight:'' , // 组件的高度
|
||
|
|
client: '' ,
|
||
|
|
scene_id: '' , // 场景id
|
||
|
|
lastTime: new Date().getTime() ,
|
||
|
|
popwidth: '' // 弹窗宽度
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
initVisualInfo(){ //初始化组态数据
|
||
|
|
if( keyCode != null){
|
||
|
|
var that = this;
|
||
|
|
commonAjax('GET',baseurl+'/service/visual/display?keycode='+keyCode, '',function(e){
|
||
|
|
if(isOK(e)){
|
||
|
|
var data=e.data;
|
||
|
|
document.title= e.data.name ;
|
||
|
|
that.scene_id = e.data.scene_id ;
|
||
|
|
|
||
|
|
$("#app").html(data.content);
|
||
|
|
// chart 初始化
|
||
|
|
reinitChartObj();
|
||
|
|
// 初始化实时数据
|
||
|
|
initBaseData() ;
|
||
|
|
initVideo();
|
||
|
|
that.initCanvasStyle();
|
||
|
|
initMap();
|
||
|
|
initTextOrTime();
|
||
|
|
that.mqttInit();
|
||
|
|
// 初始化设备状态
|
||
|
|
initDeviceStatus();
|
||
|
|
|
||
|
|
if(data.dis_type == 1 ){
|
||
|
|
that.popwidth = '80%' ;
|
||
|
|
}else{
|
||
|
|
that.popwidth = '30%' ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
downdata(){
|
||
|
|
// 数据下发
|
||
|
|
commonAjax('PUT',baseurl+"/service/sensor/param/down.json", {id: app.downSensorId , sdata: app.inputData },function(data){
|
||
|
|
if(isOK(data)){
|
||
|
|
app.$message({
|
||
|
|
message: '成功',
|
||
|
|
type:'success'
|
||
|
|
});
|
||
|
|
setTimeout(function() {
|
||
|
|
// 关闭
|
||
|
|
app.dialogVisible = false ;
|
||
|
|
app.inputData = '' ;
|
||
|
|
}, 1000);
|
||
|
|
}else{
|
||
|
|
app.$message.error(data.statusMsg);
|
||
|
|
setTimeout(function(){
|
||
|
|
app.inputData = '' ;
|
||
|
|
app.dialogVisible = false ;
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//初始化样式
|
||
|
|
initCanvasStyle(){
|
||
|
|
var xr = 1 ;
|
||
|
|
// 屏幕宽度
|
||
|
|
var win_width = $(window).width() ;
|
||
|
|
var win_height = $(window).height() ;
|
||
|
|
|
||
|
|
// 组态高度
|
||
|
|
var content_width = $(".edit-container").width();
|
||
|
|
var content_height = $(".edit-container").height();
|
||
|
|
|
||
|
|
this.orginWidth = content_width ;
|
||
|
|
this.orginHeight = content_height ;
|
||
|
|
|
||
|
|
r = win_width / content_width ;
|
||
|
|
// h = win_height / content_height ;
|
||
|
|
|
||
|
|
var translatewidth = 0 ;
|
||
|
|
var translateheight = 0 ;
|
||
|
|
|
||
|
|
xr = r ;
|
||
|
|
|
||
|
|
this.scaler = xr ;
|
||
|
|
this.changescaler = xr ;
|
||
|
|
$(".edit-container").css({
|
||
|
|
"-webkit-transform":"scale(" + xr + ", "+ xr +" ) translate("+translatewidth+"px,"+translateheight+"px)",
|
||
|
|
"transform":"scale(" + xr + ", "+ xr +" ) translate("+translatewidth+"px,"+translateheight+"px)",
|
||
|
|
"position":"relative",
|
||
|
|
"transform-origin":"0 0",
|
||
|
|
"margin-left":"0"
|
||
|
|
});
|
||
|
|
|
||
|
|
// 这里把背景色或者背景图片，更换下
|
||
|
|
var bg = $(".edit-container").attr("bg") ;
|
||
|
|
if(isNotEmpty(bg)){
|
||
|
|
$("body").css("background-color",bg) ;
|
||
|
|
}
|
||
|
|
|
||
|
|
var url = $(".edit-container").attr("bgurl") ;
|
||
|
|
if(isNotEmpty(url)){
|
||
|
|
$("body").css("background","url("+ url +") no-repeat ") ;
|
||
|
|
$("body").css("background-position","center top") ;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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 + 2*1000 < new Date().getTime() ){
|
||
|
|
that.lastTime = new Date().getTime() ;
|
||
|
|
|
||
|
|
udpChartValue();
|
||
|
|
initSensorData();
|
||
|
|
initControlNode();
|
||
|
|
initStateNode() ;
|
||
|
|
initDeviceStatus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
client.subscribe("/scene/update/"+ that.scene_id );
|
||
|
|
client.publish('/sys/update/scene' , that.scene_id+'' );
|
||
|
|
}
|
||
|
|
},created(){
|
||
|
|
|
||
|
|
},mounted() {
|
||
|
|
// 初始化组态信息
|
||
|
|
this.initVisualInfo();
|
||
|
|
$(window).resize(function() {
|
||
|
|
app.initCanvasStyle();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|