门禁信息 - 控制面板 - 常规

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="elementUI/element-ui.css"><link rel="stylesheet" href="iconfont/iconfont.css"><title>门禁信息 - 控制面板</title><style>::-webkit-scrollbar{width:5px;border-radius:5px;}::-webkit-scrollbar-thumb{background-color:#1C7166;border-radius:5px;}::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border:1px solid #1C7166;border-radius:5px;}*{padding:0;margin:0;box-sizing:border-box;}.nhglDialog{width:220px;border:3px solid #2fe7d4;background:rgba(0,39,37,.9);color:#fff;padding:10px 20px;position:relative;}.dialogNone{position:absolute;right:10px;top:5px;font-size:18px;cursor:pointer;}.title{color:#00f6ff;font-size:12px;margin-bottom:8px;}.item{font-size:12px;}.item p{line-height:30px;}.item p .name{display:inline-block;vertical-align:top;}.item p:not(:last-child){border-bottom:1px solid rgba(255,255,255,.2);}.nhglColor span{display:inline-block;vertical-align:top;}.warn{color:#E9D303;}.green{color:#00f6ff;}.el-switch{vertical-align:initial;}.option{padding:10px 0;}.option .btn{display:inline-block;background:#18b8be;color:#ffffff;line-height:28px;border-radius:28px;width:80px;text-align:center;cursor:pointer;font-size:12px;}.option .btn.disabled{background:#1c7166;cursor:default;}.monitor-list{}.monitor-list ul{list-style:none;max-height:60px;overflow-y:auto;padding-right:10px;}.monitor-list li{position:relative;line-height:24px;font-size:12px;cursor:pointer;padding:0 5px;}.monitor-list li .iconfont,.monitor-list li .state{color:#3cca8b;}.monitor-list li.outline .iconfont,.monitor-list li.outline .state{color:#ec543b;}.monitor-list li .iconfont{margin-right:5px;}.monitor-list li .state{position:absolute;right:5px;top:0;}.monitor-list li:hover{background:rgba(255,255,255,.2);}.headline{line-height:30px;}</style></head><body><div class="nhglDialog"><div class="dialogNone" onclick="closeEntranceDialog()">×</div><div class="title">门禁信息</div><div class="item"><p>编号：<span id="id">--</span></p><p>名称：<span id="name">--</span></p><p>门锁状态：<span class="green" id="doorStates">&nbsp;--</span></p><p id="elVue"><span class="name">打开门禁</span>&nbsp;<el-switch style="display: inline-block" v-model="checked" active-color="#ff4949" inactive-color="#0fbdf0" @change="openAccess()"></el-switch><span class="name">关闭门禁</span>&nbsp;</p></div><!--  <div class="option">--><!--    <span class="btn">关闭门禁</span>--><!--    <span class="btn disabled">打开门禁</span>--><!--  </div>--></div></body><!-- import Vue before Element --><script src="vue/vue.js"></script><!-- import JavaScript --><script src="elementUI/element-ui.js"></script><script>var vue = new Vue({el: '#elVue',data: function () {return {checked: true,status: "",id: "--"}} ,methods: {openAccess() {w51_event("changeAccess", this.id + "_" + this.checked);setTimeout(() => {this.checked = !this.checked;}, 5000);}}}) ;setInfoWindow();function setInfoWindow() {document.getElementById("id").innerText = decodeURI(getQueryVariable('id'));vue.id = decodeURI(getQueryVariable('id'));document.getElementById("name").innerText = decodeURI(getQueryVariable('name'));console.log(decodeURI(getQueryVariable('name'))) ;var doorStates = decodeURI(getQueryVariable('doorStates'));if (Number(doorStates) == 0) {document.getElementById("doorStates").innerText = '关闭' ;vue.checked = true} else if (Number(doorStates) == 1) {document.getElementById("doorStates").innerText = '打开' ;vue.checked = false} else if (Number(doorStates) == 2) {document.getElementById("doorStates").innerText = '超时未关'} else if (Number(doorStates) == 3) {document.getElementById("doorStates").innerText = '异常开门'}}function getQueryVariable(variable) {var query = window.location.href.split('?')[1] ;var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return '--';}function closeEntranceDialog() {w51_event("closeEntranceDialog", decodeURI(getQueryVariable('id')));}</script></html>