手动开启输出控制台

tv/src/components/Headside.vue

@@ -1,201 +1,226 @@
 <template>
-    <div class="headerContainer dv1">
-        <div class="lt" @click="showfullScreen()">
-            <em> {{ nowWeeks }}</em> <span>  {{ nowDay }}</span>
-        </div>
-        <div class="rt" >
-            {{ nowTime }}
-
-            <span @click="showUuid()">版本:{{version}}</span>
-            <img src="../static/img/blue.svg"/>
-            <img  src="../static/img/wifi.svg"/>
-        </div>
+  <div class="headerContainer dv1">
+    <div class="lt" @click="showfullScreen()">
+      <em> {{ nowWeeks }}</em> <span>  {{ nowDay }}</span>
+    </div>
+    <div class="rt">
+      {{ nowTime }}
+      <span @click="showUuid()">版本:{{ version }}</span>
+      <img @click="showConsole()" src="../static/img/blue.svg"/>
+      <img src="../static/img/wifi.svg"/>
+    </div>
 
 
-        <el-dialog
-                title=""
-                :visible.sync="dialogVisible"
-                width="60%"
-        >
-            <span class="eqSnText">当前设备uuid</span>
-            <br>
-            <span class="eqSnText">{{eqSn}}</span>
-            <div id='qrcode' class="qrcode" ref="qrCodeUrl">
+    <el-dialog
+        title=""
+        :visible.sync="dialogVisible"
+        width="60%"
+    >
+      <span class="eqSnText">当前设备uuid</span>
+      <br>
+      <span class="eqSnText">{{ eqSn }}</span>
+      <div id='qrcode' class="qrcode" ref="qrCodeUrl">
 
-            </div>
-            <span slot="footer" class="dialog-footer">
+      </div>
+      <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">了解</el-button>
   </span>
-        </el-dialog>
-    </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-    import global from '../Global'
-    import '../libs/rem';
-    import QRCode from 'qrcodejs2'
-
-    export default {
-        data() {
-            return {
-                dialogVisible: false,
-                eqSn: localStorage.eqSn,
-                nowWeeks: '',
-                nowDay: '',
-                nowTime: '',
-                version: ''
-            }
-        },
-        mounted() {
-            this.nowtimer = setInterval(() => {
-                let date = new Date();
-                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
-                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
-                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-                this.nowTime = h + m + s;
-                this.nowDayFunc();
-                // 获取版本号
-                this.version = localStorage.version;
-            }, 1000);
-            this.getCurVersion();
-        },
-        beforeDestroy() {
-            clearInterval(this.timer);
-        },
-        methods: {
-            // 全屏展示
-            showfullScreen(){
-                let elem = document.body;
-                if (elem.webkitRequestFullScreen) {
-                    elem.webkitRequestFullScreen();
-                } else if (elem.mozRequestFullScreen) {
-                    elem.mozRequestFullScreen();
-                } else if (elem.requestFullScreen) {
-                    elem.requestFullscreen();
-                } else {
-                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
-                }
-            },
-            nowDayFunc() {
-                let days = new Date().getDay();
-                let wd = numberToWeekdays(days);
-                this.nowWeeks = wd;
-                this.nowDay = globalcurrent();
-            },
-            // 获取当前版本
-            getCurVersion() {
-                // console.log(version)
-            },
-            qrcode(code) {
-                this.$refs.qrCodeUrl.innerHTML = "";
-                let qrcode = new QRCode(this.$refs.qrCodeUrl, {
-                    width: 100,
-                    height: 100, // 高度
-                    text: code, // 二维码内容
-                    image: '',
-                    render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）
-                    background: '#f0f',
-                    foreground: '#ff0',
-                });
-            },
-            showUuid() {
-                this.eqSn = localStorage.eqSn;
-                this.dialogVisible = true;
-                this.$nextTick(function () {
-                    setTimeout(() => {
-                        this.qrcode(localStorage.eqSn);
-                    }, 500);
-                })
-            }
-        }
+import global from '../Global'
+import '../libs/rem';
+import QRCode from 'qrcodejs2'
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      lastClickTime: 0,
+      count:0,
+      eqSn: localStorage.eqSn,
+      nowWeeks: '',
+      nowDay: '',
+      nowTime: '',
+      version: ''
+    }
+  },
+  mounted() {
+    this.nowtimer = setInterval(() => {
+      let date = new Date();
+      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
+      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
+      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+      this.nowTime = h + m + s;
+      this.nowDayFunc();
+      // 获取版本号
+      this.version = localStorage.version;
+    }, 1000);
+    this.getCurVersion();
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    // 手动开启输出控制台
+    showConsole() {
+        let vconDom = document.getElementById('__vconsole');
+        this.toggleClass(vconDom,'show')
+    },
+    hasClass(obj, cls) {
+      return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+    },
+    addClass(obj, cls) {
+      if (!this.hasClass(obj, cls)) obj.className += " " + cls;
+    },
+    toggleClass(obj,cls){
+      if(this.hasClass(obj,cls)){
+        this.removeClass(obj, cls);
+      }else{
+        this.addClass(obj, cls);
+      }
+    },
+    removeClass(obj, cls) {
+      if (this.hasClass(obj, cls)) {
+        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+        obj.className = obj.className.replace(reg, ' ');
+      }
+    },
+    // 全屏展示
+    showfullScreen() {
+      let elem = document.body;
+      if (elem.webkitRequestFullScreen) {
+        elem.webkitRequestFullScreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.requestFullScreen) {
+        elem.requestFullscreen();
+      } else {
+        notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
+      }
+    },
+    nowDayFunc() {
+      let days = new Date().getDay();
+      let wd = numberToWeekdays(days);
+      this.nowWeeks = wd;
+      this.nowDay = globalcurrent();
+    },
+    // 获取当前版本
+    getCurVersion() {
+      // console.log(version)
+    },
+    qrcode(code) {
+      this.$refs.qrCodeUrl.innerHTML = "";
+      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        width: 100,
+        height: 100, // 高度
+        text: code, // 二维码内容
+        image: '',
+        render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+        background: '#f0f',
+        foreground: '#ff0',
+      });
+    },
+    showUuid() {
+      this.eqSn = localStorage.eqSn;
+      this.dialogVisible = true;
+      this.$nextTick(function () {
+        setTimeout(() => {
+          this.qrcode(localStorage.eqSn);
+        }, 500);
+      })
     }
+  }
+}
 </script>
 
 <style scoped>
-    .headerContainer {
-        height: 4%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 1%;
-        padding: 2%;
-        background: url("../static/img/logo.svg");
-        background-position: top center;
-        background-repeat: no-repeat;
-        background-size: 14%;
-    }
-
-    * {
-        font-family: vista;
-    }
-
-    .lt {
-        width: 40%;
-        float: left;
-        font-family: vista;
-        font-weight: normal;
-        font-size: 0.4rem;
-        text-align: left;
-        color: #fff;
-        line-height: 20%;
-    }
-
-    .rt {
-        width: 40%;
-        float: right;
-        font-family: vista;
-        font-weight: normal;
-        font-size: 0.4rem;
-        text-align: right;
-        color: #fff;
-        line-height: 20%;
-        padding-right: 14%;
-    }
-
-    .rt img {
-        position: absolute;
-        top: 4%;
-        right: 9%;
-        padding: 0;
-        margin: 0;
-        float: right;
-        width: 0.4rem;
-        height: 0.4rem;
-    }
-
-    .rt img:nth-child(2) {
-        right: 12%;
-    }
-
-    em {
-        float: left;
-        font-style: normal;
-        margin-right: 0.5rem;
-    }
-
-    .rt span {
-        position: absolute;
-        top: 4%;
-        right: 2%;
-        float: right;
-        color: #fff;
-        font-size: 0.2rem;
-        text-align: center;
-        background: rgba(0, 0, 0, 0.35);
-        width: 1.2rem;
-        height: 0.4rem;
-        line-height: 0.4rem;
-        cursor: pointer;
-    }
-
-    #qrcode {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .eqSnText {
-        font-size: 0.4rem;
-    }
+.headerContainer {
+  height: 4%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 1%;
+  padding: 2%;
+  background: url("../static/img/logo.svg");
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: 14%;
+}
+
+* {
+  font-family: vista;
+}
+
+.lt {
+  width: 40%;
+  float: left;
+  font-family: vista;
+  font-weight: normal;
+  font-size: 0.4rem;
+  text-align: left;
+  color: #fff;
+  line-height: 20%;
+}
+
+.rt {
+  width: 40%;
+  float: right;
+  font-family: vista;
+  font-weight: normal;
+  font-size: 0.4rem;
+  text-align: right;
+  color: #fff;
+  line-height: 20%;
+  padding-right: 14%;
+}
+
+.rt img {
+  position: absolute;
+  top: 4%;
+  right: 9%;
+  padding: 0;
+  margin: 0;
+  float: right;
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+.rt img:nth-child(2) {
+  right: 12%;
+}
+
+em {
+  float: left;
+  font-style: normal;
+  margin-right: 0.5rem;
+}
+
+.rt span {
+  position: absolute;
+  top: 4%;
+  right: 2%;
+  float: right;
+  color: #fff;
+  font-size: 0.2rem;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.35);
+  width: 1.2rem;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  cursor: pointer;
+}
+
+#qrcode {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.eqSnText {
+  font-size: 0.4rem;
+}
 </style>

tv/src/main.js

@@ -12,7 +12,7 @@ import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
 
 if (process.env.NODE_ENV === 'development') {
     // 显示控制台
-    // let vConsole = new VConsole();
+    let vConsole = new VConsole();
     // 演示版本数据
     require('./Mock/index.js');
 } else {

tv/src/views/Index.vue

@@ -356,4 +356,10 @@ ul, li {
     padding-bottom: 15px;
   }
 }
+#__vconsole {
+  display: none;
+}
+#__vconsole.show {
+  display: block;
+}
 </style>