RZGY/src/renderer/components/AnimationDes.vue

<template>
  <div class="main_right_height">
    <TopDes :flag="true" topDesFont="生物反馈记录"></TopDes>
    <!-- <el-row>
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="22">
        <span class="musicTitle">生物反馈</span>
        <el-divider></el-divider>
      </el-col>
      <el-col :span="1">&nbsp;</el-col>
    </el-row> -->
    <el-row>
      <el-col :span="1"> &nbsp; </el-col>
      <el-col :span="22">
        <div class="select_class_animation">
          <span class="desSty">选择设备</span>&nbsp;
          <el-select
            v-model="equipment"
            placeholder="请选择"
            class="selectSty"
            size="medium"
            @change="equipmentFun"
          >
            <el-option
              class="select_option"
              v-for="item in optionsEquipment"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span class="desSty">游戏难度</span>&nbsp;
          <el-select
            v-model="gameDifficulty"
            placeholder="请选择"
            class="selectSty"
            size="medium"
            @change="gameDiffFun"
          >
            <el-option
              v-for="item in difficultyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span class="desSty">游戏时间</span>&nbsp;
          <el-select
            v-model="gameTime"
            placeholder="请选择"
            class="selectSty"
            size="medium"
            @change="gameTimeFun"
          >
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <div class="equipment_status">
            <span
              class="desSty"
              v-show="linkStatus"
              :style="{ color: linkStatus ? '#0FB577' : '#000000' }"
              >设备已连接：</span
            >
            <span class="desSty" v-show="!linkStatus">设备未连接：</span>
            <img
              v-show="!linkStatus"
              @click="openTableFun"
              style="width: 14px; height: 20px; color: #ffffff"
              src="../assets/newAnimation/lanya.png"
            />
            <img
              v-show="linkStatus"
              @click="openTableFun"
              style="width: 14px; height: 20px; color: #ffffff"
              src="../assets/newAnimation/lanyaActive.png"
            />
          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span
            class="desSty"
            @click="viewEchartsFun"
            :style="{ color: linkStatus ? '#0FB577' : '#000000' }"
            >查看波形图</span
          >
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span
            style="font-size: 12px"
            v-show="equipment == '2' && pulseTimeNum < 180 && pulseTimeNum > 0"
            >还剩{{ timeShow }}开始</span
          >
          <span
            style="font-size: 12px"
            v-show="buttonFlag == '结束' && gameTimeTimerFlag"
            >{{ timeShow }}</span
          >
          <div class="animation-middle-m">&nbsp;</div>
          <el-button
            @click="startTest"
            size="small"
            class="xl_animation_button"
            style="float: right; font-size: 12px"
            >{{ buttonFlag }}</el-button
          >
        </div>

        <el-row> </el-row>
        <el-row> </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="flood-plan-page"
              ref="animationFlow"
              style="display: block; height: 72vh; margin-top: 10px"
            >
              <iframe
                scrolling="no"
                :src="urlThreeP"
                ref="unityIframe"
                frameborder="0"
                :width="widthIframe"
                :height="heightIframe"
              >
              </iframe>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="1"> &nbsp; </el-col>
    </el-row>

    <el-dialog title="提示" :visible.sync="tableVisible" width="60%" center>
      <span>
        <el-table
          :data="mergeData"
          style="width: 100%; height: 400px"
          :header-cell-style="{
            background: '#66B497',
            color: '#FFFFFF',
            'letter-spacing': '4px',
          }"
        >
          <el-table-column prop="rssi" align="center" label="信号强度">
          </el-table-column>
          <el-table-column
            prop="deviceType"
            align="center"
            label="类型"
            :formatter="typeFormatter"
          >
          </el-table-column>
          <!-- <el-table-column
                prop="Name"
                :formatter="nameFormatter"
                align="center"
                label="类型"
              >
              </el-table-column> -->
          <el-table-column prop="userNum" align="center" label="已绑用户">
          </el-table-column>
          <el-table-column prop="mac" align="center" label="mac">
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                :disabled="buttonLinkFlag"
                class="xl_d_button"
                size="mini"
                slot="reference"
                @click="linkJudge(scope.$index, scope.row, scope.row.connent)"
              >
                <span v-if="scope.row.connent">断开连接</span
                ><span v-if="!scope.row.connent">连接</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableVisible = false">取 消</el-button>
        <el-button type="primary" @click="tableVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="查看波形图"
      :visible.sync="echartsVisible"
      width="90%"
      center
    >
      <span>
        <div class="outPage" v-show="equipment == '1'">
          <div id="eegOne" class="naoOneClass"></div>
        </div>
        <div class="outPage" v-show="equipment == '1'">
          <div id="eegTwo" class="naoOneClass"></div>
        </div>
        <div class="outThreePage" v-show="equipment == '1'">
          <div id="eegThree" class="naoOneClass"></div>
        </div>
        <div class="outPage" v-show="equipment == '2'">
          <div id="ecgOne" class="naoOneClass" style="height: 500px"></div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="echartsVisible = false">取 消</el-button>
        <el-button type="primary" @click="echartsVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
//一个弹出框显示脑电或心电的显示图，外边显示脑电设备状态
// 查看选择设备的状态，判断波形是哪个？
import * as echarts from "echarts";
import Utils from "./util.js";
const fs = require("fs");
const { ipcRenderer } = require("electron");
const RingBuffer = require("ringbufferjs");
// import  RingBuffer from 'ringbufferjs'
export default {
  data() {
    return {
      activeName: "first",
      //echarts渲染标志
      echartsVisible: false,
      echartsOne: null,
      echartsTwo: null,
      echartsThree: null,

      //心电连接对象
      echartsEcg: null,

      optionOne: null,
      optionTwo: null,
      optionThree: null,
      //心电option
      optionEcg: null,
      //打开设备进行选择的列表
      openTableFlag: "",
      scanData: [],
      connectedData: [],
      websock: null,
      tableVisible: false,
      linkIndex: null,
      //是否是单个训练
      singleFlag: true,
      buttonDisable: true,
      //脉搏开始前倒计时
      pulseTimeNum: 180,
      pulseTime: null,
      gameValue: 0,
      timeShow: "",
      buttonFlag: "开始",
      //脑电是否连接的状态
      eleFlag: "未连接",
      //脉搏是否连接的状态
      pulseFlag: "未连接",
      widthIframe: 900,
      heightIframe: 600,

      flag: 1,
      //游戏场景
      gameScene: 1,
      optionsGame: [
        {
          value: 1,
          label: "心灵之火",
        },
        {
          value: 2,
          label: "心之花",
        },
        {
          value: 3,
          label: "急速赛车",
        },
        {
          value: 4,
          label: "爆爆桶",
        },
        {
          value: 5,
          label: "炸弹",
        },
        {
          value: 6,
          label: "漂浮球",
        },
      ],
      //设备选择
      equipment: 1,
      optionsEquipment: [
        { value: 1, label: "脑电" },
        { value: 2, label: "心电" },
      ],
      //游戏难度
      gameDifficulty: 1,
      difficultyOptions: [
        { value: 1, label: "简单" },
        { value: 2, label: "普通" },
        { value: 3, label: "困难" },
      ],
      //游戏时间
      gameTimeReserve: 180,
      gameTime: 1,
      timeOptions: [
        { value: 1, label: "三分钟" },
        { value: 2, label: "五分钟" },
        { value: 3, label: "十分钟" },
      ],
      waitTimePluse: 0,
      testTime: 0,
      gameTimeTimer: null,
      //是否显示的倒计时标志
      gameTimeTimerFlag: false,

      //脑电变量
      waveData: [],
      // 全量
      waveDataAll: [],

      deltaDataFlag: [],
      // 全量
      deltaDataFlagAll: [],

      deltaData: [],
      // 全量
      deltaDataAll: [],

      thetaData: [],
      // 全量
      thetaDataAll: [],

      lowAlphaData: [],
      // 全量
      lowAlphaDataAll: [],

      highAlphaData: [],
      // 全量
      highAlphaDataAll: [],

      lowBetaData: [],
      // 全量
      lowBetaDataAll: [],

      highBetaData: [],
      // 全量
      highBetaDataAll: [],

      lowGammaData: [],
      // 全量
      lowGammaDataAll: [],

      midGammaData: [],
      // 全量
      midGammaDataAll: [],

      noiseData: [],
      // 全量
      noiseDataAll: [],

      attentionData: [],
      // 全量
      attentionDataAll: [],

      meditationData: [],
      // 全量
      meditationDataAll: [],

      focusNao: [],
      // 全量
      focusNaoAll: [],
      // urlThreeP: "../../../static/candle/index.html",
      urlThreeP: __static + "/candle/index.html",
      // pubSrc: "../../../static",
      pubsrc: __static,
      userLink: {
        num: "",
        mac: "",
        ecgAllList: [], //心电数据部分
        ecgSectionList: [], //心电数据全部
        //开始脑电各个部分的数据
      },
      userTwoLink: {
        num: "",
        mac: "",
        ecgAllList: [], //心电数据部分
        ecgSectionList: [], //心电数据全部
        //开始脑电各个部分的数据
      },
      //定时器标志
      listTimeFlag: null,
      //是否已连接的标志
      //单人
      linkStatus: false,
      //标志等待点击开始按钮后，打开定时器开始渲染
      timeSendFlag: null,
      //优化显示列表进行防抖
      listShaking: true,
      listTmp: [],
      //合并的定时器
      mergeTimeFlag: null,
      mergeData: [],
      //连接按钮flag
      buttonLinkFlag: false,
      //按钮状态
      disabledTimeFlag: null,
      intervalLength: 500,
    };
  },
  mounted() {
    //获取当前用户num
    this.userLink.num = sessionStorage.getItem("num");
    // RingBuffer=null;
    //添加监听接收到数据后开始驱动
    //脑电监听

    //进来之前得到传过来的参数
    //调用切换场景的方法
    let that = this;
    this.disconnectDevice();
    let count = 0;
    var k = 1;
    var flagAnimation = true;
    window.addEventListener("resize", function () {
      // that.getSize();
      if (flagAnimation) {
        setTimeout(() => {
          console.log("窗口变化了，需要调整");
          that.getSize();
          //当前是脑电时，且打开的窗口是第一个用户时
          if (that.equipment == "1") {
            if (that.echartsVisible) {
              that.echartsOne.resize();
              that.echartsTwo.resize();
              that.echartsThree.resize();
            }
          }
          if (that.equipment == "2") {
            if (that.echartsVisible) {
              that.echartsEcg.resize();
            }
          }
          flagAnimation = true;
        }, 1000);
      }
      flagAnimation = false;
    });
    setTimeout(() => {
      that.getSize();
    }, 5000);
    setTimeout(() => {
      that.changeGame(parseInt(that.$route.query.gameType));
      console.log(that.$route.query.gameType);
    }, 2000);
    that.singleFlag = that.$route.query.single;
    console.log(that.singleFlag);

    ipcRenderer.on("accelerationData-message", this.acceptNao);
    this.initWebsocket();
    //当点击开始时调用方法开发发送游戏数据
    //上来就查询已连接列表
    that.listTimeFlag = setInterval(that.connectList, 2000);
    //根据扫描列表和已连接列表看看哪些是重复的//重复的就是已连接的
    that.mergeTimeFlag = setInterval(that.mergeDataFun, 1000);
  },
  destroyed() {
    clearTimeout(this.mergeTimeFlag);
    clearTimeout(this.disabledTimeFlag);
    clearInterval(this.timeSendFlag);
    clearInterval(this.listTimeFlag);
    console.log(ipcRenderer);
    this.websock.close(1000);
    ipcRenderer.removeListener("accelerationData-message", this.acceptNao);
    //清除特定的监听的ipcRenderer
    //ipcRenderer
    this.disconnectDevice();
  },
  methods: {
    //合并数据
    mergeDataFun() {
      let that = this;
      let scanDataTmp = JSON.stringify(this.scanData);
      let scanDataTmpFin = JSON.parse(scanDataTmp);
      let list = [];
      for (let i = 0; i < scanDataTmpFin.length; i++) {
        let obj = {
          rssi: "",
          name: "",
          mac: "",
          connent: false,
          deviceType: "",
          userNum: "",
        };
        obj.rssi = scanDataTmpFin[i].rssi;
        obj.name = scanDataTmpFin[i].name;
        obj.mac = scanDataTmpFin[i].mac;
        obj.connent = false;
        obj.deviceType = scanDataTmpFin[i].deviceType;
        list.push(obj);
      }
      //判断某个
      //先取出与扫描列表显示不一样的

      //循环list
      //与已选列表进行对比，如果已选列表中有重复

      //已选列表必定显示
      //如果已选列表为空

      //已连接列表中应该全部显示+扫描列表与已选列表不重复的mac的则为全部的

      //先将扫描列表与已选列表全部格式化合并为一个数组
      //先查已选列表中在扫描列表中没有的----

      //然后最后将其加入扫描列表
      //然后查询已选列表中在扫描列表中有的

      //已选列表
      let connectedDataTmp = JSON.stringify(this.connectedData);
      let connectedDataTmpFin = JSON.parse(connectedDataTmp);
      //不包含的列表
      let listBarring = [];
      for (let i = 0; i < connectedDataTmpFin.length; i++) {
        let flag = false;
        for (let j = 0; j < list.length; j++) {
          if (connectedDataTmpFin[i].mac == list[j].mac) {
            flag = true;
          }
        }
        if (!flag) {
          listBarring.push(connectedDataTmpFin[i]);
        }
      }

      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < connectedDataTmpFin.length; j++) {
          if (list[i].mac == connectedDataTmpFin[j].mac) {
            list[i].connent = true;
            list[i].rssi = connectedDataTmpFin[j].rssi;
          }
        }
      }
      //然后合并两个数组

      let listFin = list.concat(listBarring);

      //判断当前选择的是脑电还是心电
      let currentDeviceList = [];
      if (this.equipment == "1") {
        //当是脑电时
        for (let i = 0; i < listFin.length; i++) {
          if (listFin[i].deviceType == "0") {
            currentDeviceList.push(listFin[i]);
          }
        }
      } else {
        for (let i = 0; i < listFin.length; i++) {
          if (listFin[i].deviceType == "1") {
            currentDeviceList.push(listFin[i]);
          }
        }
      }
      for (let k = 0; k < currentDeviceList.length; k++) {
        if (
          that.userLink.mac !== "" &&
          that.userLink.mac == currentDeviceList[k].mac
        ) {
          currentDeviceList[k].userNum = that.userLink.num;
        }
      }
      //将数组其他选项
      // console.log(listFin);
      this.mergeData = currentDeviceList;
    },
    //脑电图渲染
    acceptNao(event, data) {
      let arg = data.arg;
      let mac = data.mac;
      if (this.userLink.mac == mac) {
        if (arg["_c"].size == 1) {
          this.waveData.push(arg["_c"].get("rawWaveData"));
          this.waveDataAll.push(arg["_c"].get("rawWaveData"));
          if (this.waveData.length > 5120) {
            this.waveData.shift();
          }
        } else {
          if (arg["_c"].size == 11) {
            // 当不为undefined时
            let ll = 11;
            // 获取长度
            this.deltaDataFlag.push(arg["_c"].get("Delta"));
            this.deltaDataFlagAll.push(arg["_c"].get("Delta"));
            if (this.deltaDataFlag.length > ll) {
              this.deltaDataFlag.shift();
            }
            this.noiseData.push(arg["_c"].get("Signal"));
            this.noiseDataAll.push(arg["_c"].get("Signal"));
            if (this.noiseData.length > ll) {
              this.noiseData.shift();
            }
            // console.log(arg["_c"].get("Attention") / 100);
            // console.log(Math.random() * 10);
            if (
              this.equipment == 1 &&
              this.linkStatus &&
              this.buttonFlag == "结束"
            ) {
              this.send(Math.random() * 10);
            }

            //先设为随机数

            // this.send(Math.random()*10)
            // console.log(arg["_c"].get("Attention")/100)
            this.attentionData.push(arg["_c"].get("Attention"));
            this.attentionDataAll.push(arg["_c"].get("Attention"));
            if (this.attentionData.length > ll) {
              this.attentionData.shift();
            }
            console.log(this.attentionDataAll.length);
            this.meditationData.push(arg["_c"].get("Meditation"));
            this.meditationDataAll.push(arg["_c"].get("Meditation"));
            if (this.meditationData.length > ll) {
              this.meditationData.shift();
            }
            this.thetaData.push(arg["_c"].get("Theta"));
            this.thetaDataAll.push(arg["_c"].get("Theta"));
            if (this.thetaData.length > ll) {
              this.thetaData.shift();
            }
            this.lowAlphaData.push(arg["_c"].get("LowAlpha"));
            this.lowAlphaDataAll.push(arg["_c"].get("LowAlpha"));
            if (this.lowAlphaData.length > ll) {
              this.lowAlphaData.shift();
            }
            this.highAlphaData.push(arg["_c"].get("HighAlpha"));
            this.highAlphaDataAll.push(arg["_c"].get("HighAlpha"));
            if (this.highAlphaData.length > ll) {
              this.highAlphaData.shift();
            }
            this.lowBetaData.push(arg["_c"].get("LowBeta"));
            this.lowBetaDataAll.push(arg["_c"].get("LowBeta"));
            if (this.lowBetaData.length > ll) {
              this.lowBetaData.shift();
            }
            this.highBetaData.push(arg["_c"].get("HighBeta"));
            this.highBetaDataAll.push(arg["_c"].get("HighBeta"));
            if (this.highBetaData.length > ll) {
              this.highBetaData.shift();
            }
            this.lowGammaData.push(arg["_c"].get("LowGamma"));
            this.lowGammaDataAll.push(arg["_c"].get("LowGamma"));
            if (this.lowGammaData.length > ll) {
              this.lowGammaData.shift();
            }
            this.midGammaData.push(arg["_c"].get("MiddleGamma"));
            this.midGammaDataAll.push(arg["_c"].get("MiddleGamma"));
            if (this.midGammaData.length > ll) {
              this.midGammaData.shift();
            }
            this.focusNao.push(arg["_c"].get("Attention"));
            this.focusNaoAll.push(arg["_c"].get("Attention"));
            if (this.focusNao > ll) {
              this.focusNao.shift();
            }
            // this.numEleDom = this.focusNaoAll.length.toString();
            if (this.echartsVisible) {
              // console.log(this.attentionDataAll.length);
              this.renderEegOne();
              this.renderEegTwo();
              this.renderEegThree();
            }
          }
        }
      }
    },
    viewEchartsFun() {
      this.echartsVisible = true;
      setTimeout(() => {
        if (this.equipment == "1") {
          if (this.echartsOne == null) {
            this.echartsOne = echarts.init(document.getElementById("eegOne"));
            this.echartsTwo = echarts.init(document.getElementById("eegTwo"));
            this.echartsThree = echarts.init(
              document.getElementById("eegThree")
            );
            this.renderEegOne();
            this.renderEegTwo();
            this.renderEegThree();
            setTimeout(() => {
              this.echartsOne.resize();
              this.echartsTwo.resize();
              this.echartsThree.resize();
            }, 1000);
          } else {
            this.echartsOne.resize();
            this.echartsTwo.resize();
            this.echartsThree.resize();
          }
        }

        if (this.equipment == "2") {
          if (this.echartsEcg == null) {
            this.echartsEcg = echarts.init(document.getElementById("ecgOne"));
            this.renderEcgOne();
            setTimeout(() => {
              this.echartsEcg.resize();
            }, 1000);
          } else {
            this.echartsEcg.resize();
          }
        }
        // 先调用
      }, 2000);
    },
    //状态切换
    linkJudge(index, val, flag) {
      if (flag) {
        //buttonLinkFlag

        this.disconnectEquipment(val);
      } else {
        this.linkFun(index, val);
      }
    },
    //进行解析脑电数据

    linkFun(index, val) {
      console.log(val);
      let that = this;
      that.buttonLinkFlag = true;
      that.$http.postTmp(
        `/v1/device/connection`,
        {
          chip: val.deviceType,
          mac: val.mac,
          addrType: "public",
          filterName: val.deviceType,
        },
        (res) => {
          that.disableStatus();
          if (res.data.code == 200) {
            // this.linkIndex = index;
            //如果是脑电的话直接调用打开数据接口
            //如果是心电需要先调用写入输入数据-发送指令接口

            if (val.deviceType == "1") {
              this.writeData(val);
              that.userLink.mac = val.mac;
            } else {
              //判断脑电设备

              //脑电的情况下
              //记录下当前mac，
              that.userLink.mac = val.mac;
              //然后调用已连接列表确定改mac是否存在在列表中，如果已存在则表示该设备已连接

              // that.openData();
              // this.$message.success("设备连接成功");
            }
            // that.tableData = res.data;
            // that.totolSize = res.data.totalElements;
          } else {
            // this.$message.error("访问服务器失败！");
            this.$message.error(res.data.message);
          }
        }
      );
    },
    //写入数据--发送指令
    writeData(val) {
      let that = this;
      let userName = sessionStorage.getItem("name");
      that.$http.postTmp(
        `/v1/device/write/data`,
        { mac: val.mac, userName: userName },
        (res) => {
          // that.openData();
          if (res.data.code == 200) {
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    //打开数据接口
    // openData() {
    //   let that = this;
    //   that.$http.getTmp(`/v1/device/open/notify`, {}, (res) => {
    //     if (res.code == 200) {
    //       //打开数据接口
    //       // that.tableData = res.data;
    //       // that.totolSize = res.data.totalElements;
    //     } else {
    //       this.$message.error("访问服务器失败！");
    //     }
    //   });
    // },
    disableStatus() {
      let that = this;
      this.disabledTimeFlag = setTimeout(() => {
        this.buttonLinkFlag = false;
      }, 1500);
    },
    //断开连接的脑电
    disconnectEquipment(val) {
      let that = this;
      that.buttonLinkFlag = true;
      that.$http.getTmp(`v1/device/${val.mac}/disconnect`, {}, (res) => {
        that.disableStatus();
        if (res.code == 200) {
          //关闭连接的时候看是不是当前绑定的mac与用户的mac是否相同
          //如果相同则  连接标志变为false；
          //如果不同则不变
          if (that.userLink.mac == val.mac) {
            that.linkStatus = false;
            that.userLink.mac = "";
          }
          //打开数据接口
          // that.tableData = res.data;
          // that.totolSize = res.data.totalElements;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //查询连接列表
    connectList() {
      let that = this;
      that.$http.getTmp(`v1/device/connected`, {}, (res) => {
        // console.log(res)
        //判断当前的列表是否存在该用户已点击的列表
        if (res.code == 200) {
          if (res.data) {
            if (res.data) {
              let list = [];
              for (let i = 0; i < res.data.length; i++) {
                let obj = {
                  rssi: "",
                  name: "",
                  mac: "",
                  connent: false,
                  deviceType: "",
                };
                obj.rssi = "";
                obj.name = res.data[i].Name;
                obj.mac = res.data[i].MAC;
                obj.connent = true;
                obj.deviceType = res.data[i].DeviceType;
                obj.userNum = "";
                list.push(obj);
              }
              that.connectedData = list;
              // console.log(list);
              if (list.length == 0) {
                //表示未连接
                that.linkStatus = false;
              } else {
                //标识已连接
                for (let k = 0; k < list.length; k++) {
                  if (
                    that.userLink.mac !== "" &&
                    that.userLink.mac == list[k].mac
                  ) {
                    that.linkStatus = true;
                  }
                }
              }
            }
          } else {
            that.connectedData = [];
          }
          //打开数据接口
          // that.tableData = res.data;
          // that.totolSize = res.data.totalElements;
        } else {
          // this.$message.error("访问服务器失败！");
        }
      });
    },
    typeFormatter(val) {
      // console.log(val.deviceType)
      if (val.deviceType == "1") {
        return "心电";
      } else {
        return "脑电";
      }
    },
    openTableFun() {
      this.tableVisible = true;
      //调用扫描接口
      // this.queryScan();
    },
    //扫描设备
    queryScan() {
      let that = this;
      let filter_name = null;
      if (this.equipment == 1) {
        filter_name = 0;
      } else {
        filter_name = 1;
      }
      that.$http.postTmp(
        `/v1/device/scan`,
        {},
        // { filter_name: filter_name, filter_rssi: -99 },
        (res) => {
          // if (res.code == 200) {
          //   console.log(res.data);
          //   if (this.equipment == 1) {
          //   }
          // } else {
          //   this.$message.error("访问服务器失败！");
          // }
        }
      );
    },
    //进来后先连接websocket
    //连上后进行扫描
    //扫描以后出现列表
    //列表出现后点击连接并打开数据如果有数据才算成功
    //初始化websocket
    initWebsocket() {
      // const wsuri = "ws://192.168.2.101:8000/ws?uid=client&to_uid=server";
      const wsuri = "ws://localhost:8000/ws?uid=client&to_uid=server";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { test: "12345" };
      this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketonmessage(e) {
      let that = this;
      //数据接收
      const redata = JSON.parse(e.data);
      // console.log(redata);
      if (redata.content != "Successful connection to socket service") {
        //首先判断是否redata.content是否是未定义
        // console.log(redata.content)
        if (redata.hasOwnProperty("content")) {
          let dataLin = JSON.parse(redata.content);
          if (redata.msgType == "device") {
            // let dataLin = JSON.parse(redata.content);
            let list = [];
            for (var key in dataLin) {
              let a = {
                mac: dataLin[key]["MAC"],
                name: dataLin[key].Name,
                rssi: dataLin[key].Rssi,
                deviceType: dataLin[key].DeviceType,
                chip: dataLin[key].Chip,
              };
              that.changeList(a);
            }
            //获取到很多数据，取每秒最大的包含量
          } else if (redata.msgType == "eegData") {
            // let dataLin = JSON.parse(redata.content);
            // console.log(dataLin);

            ///先判断第一个用户是否有mac---有mac代表已连接
            if (that.userLink.mac !== "" && that.userLink.mac == dataLin.id) {
              ipcRenderer.send("asynchronoushrv-naoData", {
                value: dataLin.value,
                mac: dataLin.id,
              });
            }
            if (
              that.userTwoLink.mac !== "" &&
              that.userTwoLink.mac == dataLin.id
            ) {
              ipcRenderer.send("asynchronoushrv-naoTwoData", {
                value: dataLin.value,
                mac: dataLin.id,
              });
            }
            //判断第二个用户的mac是否有，有则代表已连接  --
          } else if (redata.msgType == "ecgData") {
            //判断该数据对应的mac是否是当前绑定过用户的
            //判断当前是否是绑定该用户的数据，是的话进行用户处理
            //接到数据进行处理
            //当该用户的mac与id相同时，取这个数据
            // console.log(dataLin.id === that.userLink.mac);
            if (dataLin.id === that.userLink.mac) {
              let list = dataLin.value.split(",");
              // console.log(list)
              list.forEach((item) => {
                let tmp = parseInt(item);
                that.userLink.ecgAllList.push(tmp);
                that.userLink.ecgSectionList.push(tmp);
                if (that.userLink.ecgSectionList.length > that.intervalLength) {
                  that.userLink.ecgSectionList.shift();
                }
                if (that.userLink.ecgAllList.length % 100 == 0) {
                  // console.log(that.ecgAllList.length);
                  if (that.echartsVisible) {
                    that.renderEcgOne();
                  }
                }
              });
            }
          }
        }
      }
    },
    //处理数据让其变化最慢
    //这个是最大的扫描列表
    changeList(obj) {
      // console.log(obj);
      let that = this;
      that.listTmp.push(obj);
      let arrayStr = JSON.stringify(that.listTmp);
      let array = JSON.parse(arrayStr);
      //取list中不相同的
      // console.log(array)
      // array = array.reduce(function (item, next) {
      //   obj[next.MAC] ? "" : (obj[next.MAC] = true && item.push(next));
      //   return item;
      // }, []);
      //循环数组arr
      //设置储存不一样的数组
      var newArr = new Array();
      var flag = false;
      for (var i = 0; i < array.length; i++) {
        for (var j = 0; j < newArr.length; j++) {
          if (array[i].mac == newArr[j].mac) {
            newArr[j] = array[i];
            flag = true;
            break;
          }
        }
        if (!flag) {
          newArr.push(array[i]);
        }
      }
      // newArr=JSON.parse(newArr)
      // let newArr = {}
      // array.forEach(item => {
      //   newArr[item.MAC] = item
      // })
      that.listTmp = JSON.parse(JSON.stringify(newArr));
      // console.log(JSON.stringify(newArr));
      //listTmp即使最大扫描列表
      that.scanData = newArr;

      //目前无法知道当前设备是脑电还是脉搏

      // listShaking:false,

      //判断标志是true或false
      // if (that.listShaking) {
      //   let flagTime = setTimeout(() => {
      //     that.listShaking = true;
      //     let arrayStr = JSON.stringify(that.listTmp);
      //     let array = JSON.parse(arrayStr);
      //     //取list中不相同的
      //     console.log(array)
      //     // array = array.reduce(function (item, next) {
      //     //   obj[next.MAC] ? "" : (obj[next.MAC] = true && item.push(next));
      //     //   return item;
      //     // }, []);
      //     //循环数组arr
      //     //设置储存不一样的数组
      //     var newArr = new Array();
      //     var flag = false;
      //     for (var i = 0; i < array.length; i++) {
      //       for (var j = 0; j < newArr.length; j++) {
      //         if (array[i].mac == newArr[j].mac) {
      //           newArr[j] = array[i];
      //           flag = true;
      //           break;
      //         }
      //       }
      //       if (!flag) {
      //         newArr.push(array[i]);
      //       }
      //     }
      //     // newArr=JSON.parse(newArr)
      //     // let newArr = {}
      //     // array.forEach(item => {
      //     //   newArr[item.MAC] = item
      //     // })
      //     that.listTmp = JSON.parse(JSON.stringify(newArr));
      //     console.log(JSON.stringify(newArr));
      //     //listTmp即使最大扫描列表
      //     that.scanData = newArr;
      //     //当前扫描列表
      //     clearTimeout(flagTime);
      //   }, 1000);
      // }
      // that.listShaking = false;
    },
    websocketclose(e) {
      if (e.code == 1005) {
        this.initWebsocket();
      } else {
        console.log("断开连接", e);
      }
    },
    //切换选项时需要清空数据
    clearDataFun() {
      //1.首先清楚所有定时器
      clearInterval(this.pulseTime);
      clearInterval(this.gameTimeTimer);
      //2.计时的时间
      this.pulseTimeNum = 180;
      //3.重置开始的按钮
      this.buttonFlag = "开始";
      this.gameTimeTimerFlag = false;
      //4.重置数据
      this.resetData();
    },

    resetData() {
      this.send(0);
      this.buttonFlag = "开始";
      if (this.gameTime == 1) {
        this.gameTimeReserve = 180;
        this.timeShow = "03:00";
      } else if (this.gameTime == 2) {
        this.gameTimeReserve = 300;
        this.timeShow = "05:00";
      } else if (this.gameTime == 3) {
        this.gameTimeReserve = 600;
        this.timeShow = "10:00";
      }
    },
    //格式化倒计时格式
    formatterTimeFun(val) {
      let min = Math.floor(val / 60);
      min = this.formatterSs(min);
      let ss = val % 60;
      ss = this.formatterSs(ss);
      return min + ":" + ss;
    },
    formatterSs(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val + "";
      }
    },
    gameTimeFun(val) {
      this.clearDataFun();
      if (val == 1) {
        this.gameTimeReserve = 180;
      } else if (val == 2) {
        this.gameTimeReserve = 300;
      } else if (val == 3) {
        this.gameTimeReserve = 600;
      }
    },
    //当设备更换时需要初始化动画数值为0
    //并且按钮初始化为开始状态
    //倒计时时间也变为最初始化
    //定时3分钟倒计时方法
    // threeReserve(){

    // },
    gameDiffFun() {
      this.clearDataFun();
    },
    equipmentFun(val) {
      //先判断当选择的设备是否连接
      //如果已连接，则继续测试
      //如果未连接则提示连接设备
      //先判断脑电
      this.clearDataFun();
      this.send(0);
      //   this.userLink.linkStatus = false;
      //   this.userTwoLink.linkStatus = false;
      this.resetData();
      this.disconnectDevice();
      //结束测试
    },
    //断开所有设备的操作
    disconnectDevice() {
      let that = this;
      that.$http.getTmp(`v1/device/connected`, {}, (res) => {
        // console.log(res)
        //判断当前的列表是否存在该用户已点击的列表
        if (res.code == 200) {
          if (res.data) {
            if (res.data) {
              let list = [];
              for (let i = 0; i < res.data.length; i++) {
                let obj = {
                  rssi: "",
                  name: "",
                  mac: "",
                  connent: false,
                  deviceType: "",
                };
                obj.rssi = "";
                obj.name = res.data[i].Name;
                obj.mac = res.data[i].MAC;
                obj.connent = true;
                obj.deviceType = res.data[i].DeviceType;
                obj.userNum = "";
                list.push(obj);
              }
              that.connectedData = list;
              // console.log(list);
              if (list.length == 0) {
                //表示未连接
                that.userLink.linkStatus = false;
              } else {
                //标识已连接
                for (let k = 0; k < list.length; k++) {
                  //调用断开设备的方法
                  that.disconnectEquipment(list[k]);
                }
              }
            }
          } else {
            that.connectedData = [];
          }
          //打开数据接口
          // that.tableData = res.data;
          // that.totolSize = res.data.totalElements;
        } else {
          // this.$message.error("访问服务器失败！");
        }
      });
    },
    //需要先判断代码是否点击开始测试按钮了
    //如果点击开始测试按钮了//才能发送信号到游戏
    //定时器方法进行倒计时
    //这是脉搏点击开始的倒计时
    //倒计时结束以后进行3分钟或5分钟倒计时或十分钟倒计时
    //然后自动结束
    timeFun1() {
      let that = this;

      clearInterval(that.pulseTime);
      that.pulseTimeNum = 180;
      that.pulseTime = setInterval(() => {
        that.timeShow = that.formatterTimeFun(that.pulseTimeNum);
        that.pulseTimeNum--;
        if (that.pulseTimeNum == 0) {
          // that.buttonDisable = false;
          //将状态改为结束
          // this.buttonFlag = "结束";
          clearInterval(that.pulseTime);
          //倒计时开始后需要
          that.timeCom();
        }
      }, 1000);
    },
    getGameSence(val) {
      console.log(val);
      let gameName = "";
      switch (val) {
        case "1":
          gameName = "心灵之火";
          break;
        case "2":
          gameName = "心之花";
          break;
        case "3":
          gameName = "急速赛车";
          break;
        case "4":
          gameName = "爆爆桶";
          break;
        case "5":
          gameName = "炸弹";
          break;
        case "6":
          gameName = "漂浮球";
          break;
        default:
          break;
      }
      console.log(gameName);
      return gameName;
    },
    //获取游戏难度
    getGameDiff(val) {
      if (val == 1) {
        return "简单";
      }
      if (val == 2) {
        return "普通";
      }
      if (val == 3) {
        return "困难";
      }
    },
    formatterGameTime(val) {
      if (val == "1") {
        return "3分钟";
      }
      if (val == "2") {
        return "5分钟";
      }
      if (val == "3") {
        return "10分钟";
      }
      return "";
    },
    //获取当前时间
    getCurrentTimeFun() {
      let data = new Date();
      let year = this.formatterDate(data.getFullYear());
      let month = this.formatterDate(data.getMonth() + 1);
      let day = this.formatterDate(data.getDate());
      let hour = this.formatterDate(data.getHours());
      let minutes = this.formatterDate(data.getMinutes());
      let seconds = this.formatterDate(data.getSeconds());
      let microseconds = this.formatterMill(data.getMilliseconds());
      return (
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        hour +
        "时" +
        minutes +
        "分" +
        seconds +
        "秒" +
        microseconds
      );
    },
    //格式化两位数的时间数据
    formatterDate(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val;
      }
    },
    //格式化毫秒数据
    formatterMill(val) {
      if (val < 10) {
        return "00" + val;
      } else if (val < 100) {
        return "0" + val;
      } else {
        return val;
      }
    },
    timeCom() {
      let that = this;
      //有个标志显示当前的倒计时的状态
      this.gameTimeTimerFlag = true;
      //获取当前选择的是几分钟
      //当选择的是3分钟时
      //this.gameTimeReserve
      this.gameTimeTimer = setInterval(() => {
        this.timeShow = this.formatterTimeFun(this.gameTimeReserve);
        this.gameTimeReserve--;
        if (this.gameTimeReserve == 0) {
          clearInterval(this.gameTimeTimer);
          //当倒计时为0
          //按钮状态改为结束
          this.gameTimeTimerFlag = false;
          this.buttonFlag = "开始";
          if (this.equipment == 1) {
            //当倒计时完成的时候需要
            //对数据进行保存//保存完成可以清空数据

            //需要获取当前的设备//难度//游戏时间//游戏特定指标//以及用户编号
            let params = {
              type: "1", //1表示是单人模式    2代表是双人模式
              num: sessionStorage.getItem("num"), //个人编号
              gameScene: that.getGameSence(that.$route.query.gameType), //游戏场景
              equipmentType: "脑电", //设备类型
              gameDifficulty: that.getGameDiff(that.gameDifficulty), //游戏难度
              gameTime: that.formatterGameTime(that.gameTime), //游戏时间
              // animationSourceList: that.animationSourceList, //原始数据
              // fileName: "-",
              // animationTarget: "", //指标数据
              saveTime: that.getCurrentTimeFun(), //保存数据的时间
            };
            //调用保存数据的方法
            that.saveAnimation(params);
          }
          if (this.equipment == 2) {
            let params = {
              type: "1", //1表示是单人模式    2代表是双人模式
              num: sessionStorage.getItem("num"), //个人编号
              gameScene: that.getGameSence(that.$route.query.gameType), //游戏场景
              equipmentType: "心电", //设备类型
              gameDifficulty: that.getGameDiff(that.gameDifficulty), //游戏难度
              gameTime: that.formatterGameTime(that.gameTime), //游戏时间
              // animationSourceList: that.animationSourceList, //原始数据
              // fileName: "-",
              // animationTarget: "", //指标数据
              saveTime: that.getCurrentTimeFun(), //保存数据的时间
            };
            //调用保存数据的方法
            that.saveAnimation(params);
          }
          this.resetData();
        }
      }, 1000);
    },
    startTest() {
      let that = this;
      //首先先判断是脑电还是脉搏
      if (this.buttonFlag == "开始") {
        if (this.equipment == 1) {
          //如果是脑电.则需要判断脑电是否连接
          if (!this.linkStatus) {
            this.$message.warning("请先连接脑电设备");
          } else {
            this.buttonFlag = "结束";
            this.timeCom();
            //先将脑电数据置空
            this.clearNaoData();
          }
        } else {
          //如果是脉搏,则需要判断脉搏是否是连接
          if (!this.linkStatus) {
            this.$message.warning("请先连接心电设备");
          } else {
            //如果是脉搏已连接
            //点击了开始按钮
            //则开始倒计时3分钟
            this.timeFun1();
            this.buttonFlag = "结束";
            //清空心电数据
            this.userLink.ecgAllList = [];
            this.userLink.ecgSectionList = [];
          }
        }
      } else {
        //调用 保存方法
        //主动点击结束的方法
        if (this.equipment == 1) {
          //当倒计时完成的时候需要
          //对数据进行保存//保存完成可以清空数据

          //需要获取当前的设备//难度//游戏时间//游戏特定指标//以及用户编号
          let params = {
            type: "1", //1表示是单人模式    2代表是双人模式
            num: sessionStorage.getItem("num"), //个人编号
            gameScene: that.getGameSence(that.$route.query.gameType), //游戏场景
            equipmentType: "脑电", //设备类型
            gameDifficulty: that.getGameDiff(that.gameDifficulty), //游戏难度
            gameTime: this.attentionData.length, //游戏时间
            // animationSourceList: that.animationSourceList, //原始数据
            // fileName: "-",
            // animationTarget: "", //指标数据
            saveTime: that.getCurrentTimeFun(), //保存数据的时间
          };
          //调用保存数据的方法
          that.saveAnimation(params);
        }
        if (this.equipment == 2) {
          //获取心电数据
          let params = {
            type: "1", //1表示是单人模式    2代表是双人模式
            num: sessionStorage.getItem("num"), //个人编号
            gameScene: that.getGameSence(that.$route.query.gameType), //游戏场景
            equipmentType: "心电", //设备类型
            gameDifficulty: that.getGameDiff(that.gameDifficulty), //游戏难度
            gameTime: Math.floor(that.userLink.ecgAllList.length / 100), //游戏时间
            // animationSourceList: that.animationSourceList, //原始数据
            // fileName: "-",
            // animationTarget: "", //指标数据
            saveTime: that.getCurrentTimeFun(), //保存数据的时间
          };
          //调用保存数据的方法
          that.saveAnimation(params);
        }

        //改变按钮状态
        this.clearDataFun();
        this.resetData();
      }
    },
    clearNaoData() {
      this.waveDataAll = [];
      this.waveData = [];
      //开始测试时需要清空所有数据，从头开始渲染
      this.deltaDataFlagAll = [];
      this.deltaDataFlag = [];

      this.thetaDataAll = [];
      this.thetaData = [];

      this.lowAlphaDataAll = [];
      this.lowAlphaData = [];

      this.highAlphaDataAll = [];
      this.highAlphaData = [];

      this.lowBetaDataAll = [];
      this.lowBetaData = [];

      this.highBetaDataAll = [];
      this.highBetaData = [];

      this.lowGammaDataAll = [];
      this.lowGammaData = [];

      this.midGammaDataAll = [];
      this.midGammaData = [];

      this.noiseDataAll = [];
      this.noiseData = [];

      this.attentionDataAll = [];
      this.attentionData = [];

      this.meditationData = [];
      this.meditationDataAll = [];

      this.focusNaoAll = [];
      this.focusNao = [];
    },
    //保存游戏数据
    saveAnimation(params) {
      console.log(params);
      console.log("游戏和数据保存");
    },
    setUrl() {},
    getSize() {
      let width = this.$refs.animationFlow.clientWidth;
      let height = this.$refs.animationFlow.clientHeight - 20;
      this.widthIframe = width;
      this.heightIframe = height + 20;
      this.changeSize(width, height);
    },
    changeSize(width, height) {
      this.$refs.unityIframe.contentWindow.changeSize(width, height);
    },
    send(val) {
      this.$refs.unityIframe.contentWindow.Bloomsize(val);
    },
    // btt() {
    //   let that = this;
    //   this.$refs.unityvueFlower.message("flower", "enableCamera", "true");
    // },
    delayTime() {
      let that = this;
      setTimeout(() => {
        that.getSize();
      }, 5000);
    },
    changeGame(val) {
      console.log(val);
      this.clearDataFun();
      switch (val) {
        case 1:
          this.urlThreeP = this.pubSrc + "/candle/index.html";
          // this.urlThreeP = pubSrc+ + "/candle/index.html";
          this.delayTime();
          break;
        case 2:
          this.urlThreeP = this.pubSrc + "/flower/index.html";
          // this.urlThreeP = __static + "/flower/index.html";
          this.delayTime();
          break;
        case 3:
          this.urlThreeP = this.pubSrc + "/car/index.html";
          // this.urlThreeP = __static + "/car/index.html";
          this.delayTime();
          break;
        case 4:
          this.urlThreeP = this.pubSrc + "/baobaotong/index.html";
          // this.urlThreeP = __static + "/baobaotong/index.html";
          this.delayTime();
          break;
        case 5:
          this.urlThreeP = this.pubSrc + "/bomb/index.html";
          // this.urlThreeP = __static + "/bomb/index.html";
          this.delayTime();
          break;
        case 6:
          this.urlThreeP = this.pubSrc + "/piaofuqiu/index.html";
          // this.urlThreeP = __static + "/piaofuqiu/index.html";
          this.delayTime();
          break;
        default:
          this.urlThreeP = this.pubSrc + "/candle/index.html";
        // this.urlThreeP = __static + "/candle/index.html";
      }
      this.gameScene = val;
      this.flag = this.gameScene;
    },
    chlz() {
      this.sendUnity(Math.round(Math.random() * 100));
    },
    sendUnity(val) {
      let a = val / 100;
      this.$refs.unityvue.message("littlefire", "sssize", a);
    },
    goBack() {
      this.$router.go(-1);
    },
    //心电1
    renderEcgOne() {
      let that = this;
      let sarr = [];
      // 当全量小于等于10时  显示1-10
      if (that.userLink.ecgAllList.length <= that.intervalLength) {
        for (let i = 0; i <= that.intervalLength; i++) {
          // i = i.toFixed(3);
          sarr.push(i.toString());
        }
      } else if (that.userLink.ecgAllList.length > that.intervalLength) {
        for (
          let i = that.userLink.ecgAllList.length - that.intervalLength;
          i < that.userLink.ecgAllList.length;
          i++
        ) {
          sarr.push(i.toString());
        }
      }

      let dataEcg = JSON.parse(JSON.stringify(that.userLink.ecgSectionList));

      let min = Math.min(...dataEcg);

      let dataEcgFin = [];
      for (let i = 0; i < dataEcg.length; i++) {
        dataEcgFin.push(dataEcg[i] - min);
      }

      // console.log(dataEcg)
      // console.log(Math.max(...dataEcg));
      // console.log(Math.min(...dataEcg));

      this.optionEcg = {
        animation: false,
        title: {
          text: "心电信号",
          subtext: "",
          left: "center",
          align: "right",
          x: "center",
          y: "bottom",
        },
        grid: {
          bottom: 80,
        },
        legend: {
          data: ["ECG"],
          // left: 10,
        },
        xAxis: [
          {
            name: "秒(s)",
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: true },
            data: sarr,
            axisLabel: {
              interval: 99,
              formatter: function (value, index) {
                // console.log(value);
                // console.log(index);

                let a = parseInt(value);
                // a = Math.round(a / 120);

                return a / 100;
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            type: "value",
            // max: Math.max(that.userLink.ecgSectionList),
            // min: Math.min(that.userLink.ecgSectionList),
          },
        ],
        series: [
          {
            smooth: true,
            showSymbol: false,

            name: "ECG",
            type: "line",

            lineStyle: {
              width: 1,
            },
            data: dataEcgFin,
          },
        ],
      };

      this.echartsEcg.setOption(this.optionEcg);
    },
    //脑电1
    renderEegOne() {
      let sarr = [];
      // 当全量小于等于10时  显示1-10
      if (this.focusNaoAll.length <= 10) {
        for (let i = 0; i <= 10; i++) {
          // i = i.toFixed(3);
          sarr.push(i.toString());
        }
      } else if (this.focusNaoAll.length > 10) {
        for (
          let i = this.focusNaoAll.length - 10;
          i < this.focusNaoAll.length;
          i++
        ) {
          sarr.push(i.toString());
        }
      }
      this.optionOne = {
        animation: false,
        title: {
          text: "频谱成分",
          subtext: "",
          left: "center",
          align: "right",
          x: "center",
          y: "bottom",
        },
        grid: {
          bottom: 80,
        },
        legend: {
          data: [
            "Delta",
            "Theta",
            "Low Alpha",
            "High Alpha",
            "Low Beta",
            "High Beta",
            "Low Gamma",
            "Mid Gamma",
          ],
        },
        xAxis: [
          {
            name: "秒(s)",
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: true },
            data: sarr,
            axisLabel: {
              // interval: 999,
              formatter: function (value, index) {
                let a = parseInt(value);
                if (a % 1000 == 0) {
                  if ((a / 1000) % 2 == 0) {
                    return a / 1000;
                  }
                }
                return value;
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            type: "value",
            // max: 500,
          },
        ],
        series: [
          {
            smooth: true,
            showSymbol: false,
            name: "Delta",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.deltaData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "Theta",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.thetaData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "Low Alpha",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.lowAlphaData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "High Alpha",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.highAlphaData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "Low Beta",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.lowBetaData,
          },

          {
            smooth: true,
            showSymbol: false,
            name: "High Beta",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.highBetaData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "Low Gamma",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.lowGammaData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "Mid Gamma",
            type: "line",

            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.midGammaData,
          },
        ],
      };
      this.echartsOne.setOption(this.optionOne);
    },
    renderEegTwo() {
      let sarr = [];
      // 当全量小于等于10时  显示1-10
      if (this.focusNaoAll.length <= 10) {
        for (let i = 0; i <= 10; i++) {
          // i = i.toFixed(3);
          sarr.push(i.toString());
        }
      } else if (this.focusNaoAll.length > 10) {
        for (
          let i = this.focusNaoAll.length - 10;
          i < this.focusNaoAll.length;
          i++
        ) {
          sarr.push(i.toString());
        }
      }

      this.optionTwo = {
        animation: false,
        title: {
          text: "注意力指标",
          subtext: "",
          left: "center",
          align: "right",
          x: "center",
          y: "bottom",
        },
        grid: {
          bottom: 80,
        },
        legend: {
          data: ["Noise", "Attention", "Medition"],
          // left: 10,
        },
        xAxis: [
          {
            name: "秒(s)",
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: true },
            data: sarr,
          },
        ],
        yAxis: [
          {
            name: "秒(s)",
            type: "value",
            // max: 500,
          },
          // {
          //   name: "秒(s)",
          //   nameLocation: "start",
          //   // max: 5,
          //   type: "value",
          //   inverse: false,
          // },
        ],
        series: [
          {
            smooth: true,
            showSymbol: false,
            name: "Noise",
            type: "line",
            yAxisIndex: 0,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.noiseData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "Attention",
            type: "line",
            yAxisIndex: 0,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.attentionData,
          },
          {
            smooth: true,
            showSymbol: false,
            name: "Medition",
            type: "line",
            yAxisIndex: 0,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            emphasis: {
              focus: "series",
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3,
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00",
                  },
                  {
                    xAxis: "2009/9/20\n7:00",
                  },
                ],
              ],
            },
            data: this.meditationData,
          },
        ],
      };
      this.echartsTwo.setOption(this.optionTwo);
    },
    renderEegThree() {
      let sarr = [];
      // 当全量小于等于10时  显示1-10
      if (this.waveDataAll.length <= 5120) {
        for (let i = 0; i <= 5120; i++) {
          // i = i.toFixed(3);
          sarr.push(i.toString());
        }
      } else if (this.waveDataAll.length > 5120) {
        for (
          let i = this.waveDataAll.length - 5120;
          i < this.waveDataAll.length;
          i++
        ) {
          sarr.push(i.toString());
        }
      }

      this.optionThree = {
        animation: false,
        title: {
          text: "原始信号",
          subtext: "",
          left: "center",
          align: "right",
          x: "center",
          y: "bottom",
        },
        grid: {
          bottom: 80,
        },
        legend: {
          data: ["RAW Wave"],
          // left: 10,
        },
        xAxis: [
          {
            name: "秒(s)",
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: true },
            data: sarr,
            axisLabel: {
              interval: 512,
              formatter: function (value, index) {
                // 当当前value除以1000为整数是
                // console.log(value);
                // 将value转化为int类型
                let a = parseInt(value);
                a = Math.round(a / 512);
                // if (a %510 == 0) {
                //   // if ((a / 1000) % 2 == 0) {
                //   //   return a / 1000;
                //   // }
                //   return a / 1000;
                // }
                return a;
              },
            },
          },
        ],
        yAxis: [
          {
            name: "",
            type: "value",
            // max: 500,
          },
        ],
        series: [
          {
            smooth: true,
            showSymbol: false,

            name: "RAW Wave",
            type: "line",

            lineStyle: {
              width: 1,
            },
            data: this.waveData,
          },
        ],
      };
      this.echartsThree.setOption(this.optionThree);
    },
  },
};
</script>
<style scoped>
.equipment_status {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.main_right_height {
  height: 100vh !important;
  display: block !important;
  overflow-y: auto !important;
  background: #ffffff;
}
canvas {
  /* width: 100%;
  height: 100%; */
}
.main-unity {
  margin-top: 10px;
}
</style>
<style>
.footer {
  text-align: center;
}
.fullscreen {
  margin-top: 25px !important;

  text-align: center !important;
  display: none !important;
}
.musicTitle {
  display: block;
  font-size: 18px;
  color: #57acbb;
  margin-bottom: 5px;
}
.flood-plan-page {
  /* margin-top:20px; */
}
.selectSty {
  width: 100px;
  font-size: 14px;
}
.desSty {
  font-size: 12px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 500;
  /* color: #0f0f0f; */
}
.animation_fk {
}
.select_option {
  font-size: 10px;
}
.select_class_animation {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.animation-middle-m {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.naoOneClass {
  width: 100%;
  height: 30vh;
  width: 100%;
}
</style>