fix:移动端组态工具隐藏
chuguofei
parent
2239d2e1e7
commit
9efc07aa84
|
|
@ -1,239 +1,244 @@
|
|||
<!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" />
|
||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
||||
<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="https://api.map.baidu.com/api?v=3.0&ak=f84xfiBjzaCFapazazcgWo6QTIGX0n9e"></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>
|
||||
<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"/>
|
||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
||||
<title>物联网可视化平台</title>
|
||||
<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon">
|
||||
|
||||
<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">
|
||||
<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="https://api.map.baidu.com/api?v=3.0&ak=f84xfiBjzaCFapazazcgWo6QTIGX0n9e"></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 id="scale" 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
|
||||
dis_type: '' , // 展示类型
|
||||
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();
|
||||
</el-dialog>
|
||||
|
||||
that.$nextTick(()=>{
|
||||
let iframe = document.querySelector('iframe');
|
||||
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
iframeDoc.querySelector('.operateColumn').setAttribute("style","display:" + data.dis_type == 1 ? 'none;' : 'initial;')
|
||||
})
|
||||
</div>
|
||||
<div id="scale" 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');
|
||||
|
||||
if(data.dis_type == 1 ){
|
||||
that.popwidth = '80%' ;
|
||||
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
|
||||
dis_type: '', // 展示类型
|
||||
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();
|
||||
|
||||
}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: 'yinzy' ,
|
||||
password: 'yzy123456' ,
|
||||
}
|
||||
client = mqtt.connect('wss://'+document.domain+'/mqtt', options) ;
|
||||
// client = mqtt.connect(mqttUrl, options) ;
|
||||
client.on('reconnect', function(error) {
|
||||
console.log("reconnect");
|
||||
})
|
||||
client.on('error', function(error) {
|
||||
console.log('连接失败:', error)
|
||||
})
|
||||
client.on('message', function(topic, message,s) {
|
||||
console.log('mqtt reflush with [%o],[%o],[%o] now', 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+'' );
|
||||
setTimeout(function () {
|
||||
let iframe = document.querySelector('iframe');
|
||||
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
iframeDoc.querySelector('.operateColumn').setAttribute("style", "display:" + data.dis_type == 1 ? 'none;' : 'initial;')
|
||||
}, 2000)
|
||||
|
||||
|
||||
if (data.dis_type == 1) {
|
||||
that.popwidth = '80%';
|
||||
|
||||
} else {
|
||||
that.popwidth = '30%';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},created(){
|
||||
|
||||
},mounted() {
|
||||
// 初始化组态信息
|
||||
this.initVisualInfo();
|
||||
$(window).resize(function() {
|
||||
app.initCanvasStyle();
|
||||
});
|
||||
}
|
||||
})
|
||||
</script>
|
||||
},
|
||||
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: 'yinzy',
|
||||
password: 'yzy123456',
|
||||
}
|
||||
client = mqtt.connect('wss://' + document.domain + '/mqtt', options);
|
||||
// client = mqtt.connect(mqttUrl, options) ;
|
||||
client.on('reconnect', function (error) {
|
||||
console.log("reconnect");
|
||||
})
|
||||
client.on('error', function (error) {
|
||||
console.log('连接失败:', error)
|
||||
})
|
||||
client.on('message', function (topic, message, s) {
|
||||
console.log('mqtt reflush with [%o],[%o],[%o] now', 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue