123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <!DOCTYPE html>
- @{
- Layout = null;
- }
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
- <title>@ViewData["Title"] UploadOnlineMonitorDataState</title>
- <link rel="icon" href="~/WebConsole/images/device/tankdetails/e71828.png" type="image/x-icon" />
- <link rel="stylesheet" href="~/WebConsole/lib/bootstrap/dist/css/bootstrap.min.css" />
- <link rel="stylesheet" href="~/WebConsole/css/site.css" />
- <link rel="stylesheet" href="~/WebConsole/css/commonlayout.css">
- </head>
- <div id="BodyContainer" class="SelectDiv">
- <div id="configcontainer" class="SelectDiv1">
- SelectDiv1
- </div>
- </div>
- <script src="~/WebConsole/lib/jquery/dist/jquery.min.js"></script>
- <script src="~/WebConsole/js/mqtt.min.js"></script>
- <script type="text/javascript" src="~/WebConsole/js/vue.min.js"></script>
- <script type="text/javascript">
- var vm = new Vue({
- el: '#BodyContainer',
- mounted() {
- let intervalid = setInterval(() => {
- connectIsTimeout()
- }, 1600)
- },
- methods: {
- connectIsTimeout() {
- console.log('this.$refs.tanktableref.offsetWidth')
- }
- }
- })
- var href = window.location.href;
- var path = window.location.pathname;
- let basicUrl = href.slice(0, href.indexOf(path));
- let mqttUrl = "ws:" + basicUrl.slice(basicUrl.indexOf("//")) + "/mqtt";
- let apiUpload = "OnUploadOnlineMonitorDataStateChange";
- let apis = new Map();
- let mqttoptions = {
- clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
- timeout: 5000,
- useSSL: false
- };
- let mqttclient = mqtt.connect(mqttUrl, mqttoptions);
- mqttclient.on('connect',
- function (res) {
- subscribeEvents();
- });
- mqttclient.on('error',
- function (err) {
- console.log(err);
- mqttclient.end();
- });
- mqttclient.on('message',
- function (topic, message) {
- let jsonObj = JSON.parse(message.toString())
- if (jsonObj) {
- OnReply(apis, topic, jsonObj);
- } else {
- console.log(topic, message.toString());
- }
- });
- function subscribeEvents() {
- if (apis.has(apiUpload)) {
- mqttclient.subscribe(apis.get(apiUpload), function (err) {
- if (!err) {
- console.log("subscribe " + apiUpload + " successfully");
- }
- });
- }
- }
- ShowMeAPIS(["localMqtt", ["在线监测", "OnlineWatch"]], function () { });
- function ShowMeAPIS(parameter, callBack) {
- var serviceUrl = basicUrl + "/u/?apitype=service&an=ShowMeApi&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
- $.ajax({
- url: serviceUrl,
- datatype: "application/json",
- type: 'post',
- contentType: "application/json;charset=utf-8;",
- data: JSON.stringify(parameter),
- beforeSend: function () {
- },
- success: function (data) {
- console.log(data);
- data.forEach(function (d) {
- if (d.Path === null) return;
- if (apis.has(d.ApiName)) {
- apis.delete(d.ApiName);
- }
- apis.set(d.ApiName, d.Path.slice(d.Path.length - 1) === "+" ? d.Path.slice(0, d.Path.length - 1) : d.Path);
- });
- subscribeEvents();
- if (callBack !== null) callBack();
- },
- error: function (err) {
- console.log(err);
- if (callBack !== null) callBack();
- }
- });
- }
- function GetDataByAPIS(apiName, parameter, method, callBack) {
- if (apis.size === 0 || !apis.has(apiName)) return;
- $.ajax({
- url: basicUrl + apis.get(apiName),
- datatype: "application/json",
- type: method,
- contentType: "application/json;charset=utf-8;",
- data: JSON.stringify(parameter),
- beforeSend: function () {
- },
- success: function (data) {
- console.log(data);
- if (callBack !== null) callBack(data);
- },
- error: function (err) {
- console.log(err);
- if (callBack !== null) callBack(err);
- }
- });
- }
- function OnReply(apis, topic, jsonObj) {
- if (topic === apis.get(apiUpload)) {
- //vm.allObject = jsonObj
- console.log(jsonObj);
- }
- }
- </script>
- <style scoped>
- .SelectDiv {
- width: 200px;
- height: 30px;
- line-height: 30px;
- vertical-align: middle;
- display: block;
- /*background: transparent url(/images/config/cn.png) no-repeat;*/
- background: transparent;
- position: relative;
- margin: 0px;
- padding-top: 6px;
- padding-left: 2px;
- z-index: 1;
- }
- .SelectDiv1 {
- width: 160px;
- height: 15px;
- line-height: 15px;
- vertical-align: middle;
- background: transparent;
- position: relative;
- overflow: hidden;
- border-width: 0px;
- border-top-style: none;
- border-right-style: none;
- border-left-style: none;
- border-bottom-style: none;
- -webkit-appearance: none;
- z-index: 2;
- }
- </style>
|