SystemDev
/
FCC


			
				
					
						
						
							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>