electronVueDemo/src/renderer/components/LandingPage.vue

<template>
  <div id="wrapper">
    <!--<img id="logo" src="~@/assets/logo.png" alt="electron-vue">-->
    <!--<main>-->
      <!--<div class="left-side">-->
        <!--<span class="title">-->
          <!--Welcome to your new project!-->
        <!--</span>-->
        <!--<system-information></system-information>-->
      <!--</div>-->

      <!--<div class="right-side">-->
        <!--<div class="doc">-->
          <!--<div class="title">Getting Started</div>-->
          <!--<p>-->
            <!--electron-vue comes packed with detailed documentation that covers everything from-->
            <!--internal configurations, using the project structure, building your application,-->
            <!--and so much more.-->
          <!--</p>-->
          <!--<button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>-->
        <!--</div>-->
        <!--<div class="doc">-->
          <!--<div class="title alt">Other Documentation</div>-->
          <!--<button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>-->
          <!--<button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>-->
          <!--<el-button></el-button>-->
        <!--</div>-->
      <!--</div>-->
    <!--</main>-->
    当前连接设备数：{{hasConnectCount}} <br/>
    <el-button @click="startSetZero" :disabled="hasConnectCount == 0">开始取零</el-button>
    <el-button @click="stopSetZero" :disabled="hasConnectCount == 0">停止取零</el-button>
    <el-button @click="startCollection" :disabled="hasConnectCount == 0">开始采集</el-button>
    <el-button @click="stopCollection" :disabled="hasConnectCount == 0">停止采集</el-button>
    <el-button @click="resetDevice" :disabled="hasConnectCount == 0">复位</el-button>
    <el-button @click="toConfig" :disabled="hasConnectCount == 0">跳转至配置</el-button>
    <el-button @click="toBlueToothSend" :disabled="deviceStatus != 'deviceSuccess'" >跳转至蓝牙发送</el-button>
    <el-button @click="toRealTimeBluetooth" >跳转至 实时蓝牙</el-button>
    <br/>
    <div style="width:540px;height:540px;position:relative;margin-top:30px" >
      <div ref="heatsample" style="width:540px;height:540px;position:absolute;top:0;left:0" />
      <chart id="heatmap" style="width:540px;height:540px;position:absolute;top:0"  ref="heatmap"></chart>
    </div>
  </div>
</template>

<script>
  function toArrayBuffer(buf) {
      var ab = new ArrayBuffer(buf.length);
      var view = new Uint8Array(ab);
      for (var i = 0; i < buf.length; ++i) {
          view[i] = buf[i];
      }
      return ab;
  }
  import h337 from "heatmap.js";
  import {mapState, mapGetters} from "vuex";
  export default {
    name: 'landing-page',
    data(){
        return {
            h337:null
        }
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      // 开始取零
      startSetZero() {
          this.$socket.emit('startSetZero','setZero')
      },
      // 停止取零
      stopSetZero() {
          this.$socket.emit('stopSetZero','setZero')
      },
      // 开始采集
      startCollection () {
          this.$socket.emit('startCollection','startCollection')
      },
      // 停止采集
      stopCollection() {
          this.$socket.emit('stopCollection','stopCollection')
      },
      // 复位
      resetDevice() {
          this.$socket.emit('resetDevice','resetDevice')
          this.h337.setData({
              max: 255,
              data: {}
          });
      },
      // 跳转至配置
      toConfig() {
          this.$router.push('/config')
      },
      toBlueToothSend() {
          this.$router.push('/blueTooth')
      },
      toRealTimeBluetooth() {
        this.$router.push('/rt_ble')
      }
    },
    mounted() {
        this.$socket.emit('syncConnectCount','resetDevice')
        setTimeout(()=>{
            var gradient = require('../assets/heatmap_gradient.json')
            var dst = this.$refs.heatsample;
            var heatmap = h337.create({
                container: dst,
                radius:6,
                blur:0.7,
                gradient: gradient
            });
            this.h337 = heatmap;
        },1000)
//        var buf = Buffer.from('ab1c')
//        console.log(buf.toString('hex'))
//        console.log(toArrayBuffer(buf))

    },
    computed:{
        ...mapGetters([
            'hasConnectCount',
            'pressureData',
            'deviceStatus',
        ]),
    },
    watch:{
        pressureData:function (val) {
            if(this.h337 != null) {
                this.h337.setData({
                    max: 255,
                    data: val
                });
            }
        },
        // 监听蓝牙服务是否成功开启
        deviceStatus:function (val) {
            if(val == 'deviceSuccess') {
                this.$notify({
                    title: '提示',
                    message: '蓝牙服务开启成功',
                    duration: 3500
                });
            } else if(val == 'noUsb') {
                this.$notify({
                    title: '提示',
                    message: '请插入蓝牙适配器后重启软件',
                    duration: 0
                });
            } else if(val == 'deviceError') {
                this.$notify({
                    title: '提示',
                    message: '请安装插件识别的蓝牙驱动后重启软件',
                    duration: 0
                });
            }
        }

    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body { font-family: 'Source Sans Pro', sans-serif; }

  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%
      );
    height: 700px;
    padding: 60px 80px;
    width: 100vw;
  }

  #logo {
    height: auto;
    margin-bottom: 20px;
    width: 420px;
  }

  main {
    display: flex;
    justify-content: space-between;
  }

  main > div { flex-basis: 50%; }

  .left-side {
    display: flex;
    flex-direction: column;
  }

  .welcome {
    color: #555;
    font-size: 23px;
    margin-bottom: 10px;
  }

  .title {
    color: #2c3e50;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .title.alt {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .doc p {
    color: black;
    margin-bottom: 10px;
  }

  .doc button {
    font-size: .8em;
    cursor: pointer;
    outline: none;
    padding: 0.75em 2em;
    border-radius: 2em;
    display: inline-block;
    color: #fff;
    background-color: #4fc08d;
    transition: all 0.15s ease;
    box-sizing: border-box;
    border: 1px solid #4fc08d;
  }

  .doc button.alt {
    color: #42b983;
    background-color: transparent;
  }
</style>