251 lines
9.9 KiB
HTML
251 lines
9.9 KiB
HTML
<!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>
|
|
|
|
<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 id="scale" class="operateColumn" v-if="scaleFlag">
|
|
<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>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
var id = getQueryString('id');
|
|
var keyCode = getQueryString('keyCode');
|
|
var ucode1 = getQueryString('ucode');
|
|
if(ucode1 != null && ucode1 != ''){
|
|
ucode = ucode1
|
|
}
|
|
// console.log("show html with [%s]", userKey)
|
|
window.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: '', // 弹窗宽度
|
|
scaleFlag: false,
|
|
};
|
|
},
|
|
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();
|
|
|
|
// let iframe = document.querySelector('iframe');
|
|
// let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
|
// iframeDoc.querySelector('.operateColumn').setAttribute("style", "display:" + data.dis_type == 1 ? 'none;' : 'initial;')
|
|
|
|
that.scaleFlag = data.dis_type == 1;
|
|
|
|
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: 'yinzy',
|
|
password: 'yzy123456',
|
|
}
|
|
client = mqtt.connect('wss://' + document.domain + '/mqtt', options);
|
|
// client = mqtt.connect(mqttUrl, options) ;
|
|
client.on('reconnect', function (error) {
|
|
console.log("reconnect", error);
|
|
})
|
|
client.on('error', function (error) {
|
|
console.log('连接失败:', error)
|
|
})
|
|
client.on('message', function (topic, message, s) {
|
|
// console.log('mqtt reflush with [%s],[%s],[%s] now', topic, message, new Date().getTime());
|
|
if (message.toString() == '1') {
|
|
// if (that.lastTime + 2 * 1000 < new Date().getTime()) {
|
|
if (that.lastTime + 1 < 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>
|