flyLong/tv/src/components/Headside.vue

<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 @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">
      </div>
      <table>
        <th>
            <td>版本</td>
            <td>热点IP</td>
        </th>
        <tr>
          <td>{{currunVersion}}</td>
          <td>{{curheadapi}}</td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">了解</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
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: '',
      currunVersion:runVersion,
      curheadapi:headapi,
    }
  },
  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;
      this.currunVersion = runVersion
      this.curheadapi = headapi
    }, 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;
}
</style>