dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telphone=no,email=no"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>设备调测</title>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
    <link rel="stylesheet" href="../components/custom/css/common.css"/>
    <link rel="stylesheet" href="css/xyf.common.min.css">
    <style>
        .mui-input-group .mui-input-row label {
            color: #666;
        }

        .mui-input-group .mui-input-row label ~ input {
            color: #000;
            font-size: inherit;
        }

        .msg-item {
            font-size: 14px;
            white-space: normal;
            word-break: break-all;
        }

        .btn-fixed {
            position: fixed;
            top: 0;
            background: #fff;
            width: 100%;
            z-index: 9;
            box-shadow: 0 0 10px #aaa;
        }

        .btn-fixed:after {
            display: none;
        }

        .fixed-close {
            color: #666;
            font-size: 26px;
            position: fixed;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            z-index: 1;
            bottom: 10px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .close-msg {
            padding: 10px;
            margin-top: -10px;
            margin-right: -10px;
            color: #555;
            font-size: 18px;
        }
    </style>
</head>
<body>
<h4 class="param-title" id="device">设备</h4>
<div id="app">

</div>

<script src="https://cdn.washpayer.com/npm/mqtt@2.18.8/dist/mqtt.min.js"></script>
<script type="text/javascript" src="https://cdn.washpayer.com/components/lib/vue.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/moment.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="js/xyf.common.js"></script>
<script>
    var logicalCode = getQueryString("logicalCode")
    var devType = getQueryString("devType");
    $("#device").html("<i class='c-primary iconfont " + getDevIconName(devType) + "'></i> " + devType + logicalCode);

    sendRequest({
        url: "/device/getDiagCommands",
        type: "GET",
        data: {'logicalCode': logicalCode},
        mask: "正在获取命令列表...",
        success: function (response) {
            if (response.result == 1) {
                var cmds = response.payload;
                initPage(cmds)
            } else {
                mui.toast(res.description);
            }
        }
    });

    function initPage(cmdlist) {
        var app = new Vue({
            el: "#app",
            template: '<div>' +
                '  <div class="mui-content">'
                + '       <ul class="mui-table-view" >'
                + '         <li class="mui-table-view-cell" v-for="cmd in cmdList" :class="{\'btn-fixed c-primary\':nowCmd.id==cmd.id&&msgList.length>0}" @click="openDialog(cmd)"><a class="mui-navigate-right" href="javascript:void 0">{{cmd.name}}</a></li>'
                + '       </ul>'
                + '      <h4 class="param-title" v-if="client">消息 <span @click="clearMsg()" class="iconfont icon-close mui-pull-right close-msg"></span></h4>'
                + '       <ul class="mui-table-view custom-top" v-if="msgList.length>0" >'
                + '         <li class="mui-table-view-cell msg-item" v-for="item in msgList"><span class="font-b-6">{{item.time}}</span> {{item.message}}</li>'
                + '       </ul>'
                + ' </div>'
                + ' <div class="fixed-close iconfont icon-stop" v-show="client" @click="closeMqtt()"></div>'
                + '   <div class="edit-back" v-show="dialogShow" >'
                + '       <form class="edit-content">'
                + '           <div class="edit-box">'
                + '             <div  v-for="param in nowCmd.params" class="mui-input-row"><label class="">{{param.name}} </label><div class="mui-pull-right edit-row"><input v-model="param.value" type="text"/></div></div>'
                + '           </div>'
                + '           <div class="mui-popup-buttons ">'
                + '               <span class="mui-popup-button" @click="cancel">取消</span>'
                + '               <span class="mui-popup-button mui-popup-button-bold"><input type="submit" value="发送" @click="submit($event)"'
                + '               /></span>'
                + '           </div>'
                + '       </form>'
                + '   </div>'
                + '</div>'
            ,
            data: {
                dialogShow: false,
                cmdList: cmdlist,
                msgList: [],
                nowCmd: [],

                client: null,
            },
            mounted: function () {
            },
            methods: {
                openDialog: function (cmd) {
                    this.dialogShow = true
                    this.nowCmd = cmd
                },

                boot_mqtt(broker_url, topic, callback) {
                    var that = this

                    if (!broker_url) {
                        console.error('broker_url not supplied');
                        return
                    }

                    console.info('broker is: ' + broker_url);
                    console.info('subscribed to topic: ' + topic);

                    var client = mqtt.connect('ws://' + broker_url);

                    client.subscribe(topic);
                    client.on("message", function (topic, payload) {

                        var message = payload.toString()
                        console.log('received:' + message);

                        if (callback) {
                            callback(message)
                        } else {
                            that.msgList.unshift({message:message,time:moment().format("HH:mm:ss")});
                            // 界面显示最多不超过100条
                            if (that.msgList.length > 100) {
                                that.msgList.pop()
                            }
                        }
                    })
                    that.client = client
                },

                submit: function (evt) {
                    //阻止submit表单提交
                    evt.preventDefault();

                    var that = this
                    var cmd = that.nowCmd

                    if (that.client) {
                        mui.toast("请先关闭当前连接，再发送新的命令");
                        return
                    }

                    sendRequest({
                        url: "/device/diagDevice",
                        type: "POST",
                        contentType: "json",
                        data: {
                            logicalCode: logicalCode,
                            commandId: cmd.id,
                            params: cmd.params
                        },
                        mask: "正在发送命令...",
                        success: function (res) {
                            if (res.result === 1) {
                                mui.toast("发送成功");
                                that.dialogShow = false;
                                that.boot_mqtt(res.payload.pushBrokerUrl, res.payload.topic);
                            } else {
                                mui.toast(res.description);
                            }
                        }
                    });

                },

                clearMsg() {
                    this.msgList = []
                },

                closeMqtt() {
                    var that = this
                    var btnArray = ['取消', '确定'];
                    mui.confirm('确定关闭当前连接？', '温馨提示', btnArray, function (e) {
                        if (e.index === 1) {
                            if (that.client) {
                                that.client.end(true, function () {
                                    that.nowCmd = []
                                    that.client = null
                                })
                            }

                        }
                    });

                },
                cancel: function () {
                    this.dialogShow = false
                }
            }
        });
    }


</script>
</body>
</html>