RZGY/src/renderer/components/Animation1.vue

<template>
  <div style='background:#ffffff'>
    <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">
        <span class="desSty"> 游戏场景</span>

        <el-select
          class="selectSty"
          size="mini"
          v-model="gameScene"
          placeholder="请选择"
          @change="changeGame"
        >
          <el-option
            v-for="item in optionsGame"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <span class="desSty">选择设备</span>
        <el-select
          v-model="equipment"
          placeholder="请选择"
          class="selectSty"
          size="mini"
          @change="equipmentFun"
        >
          <el-option
            v-for="item in optionsEquipment"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <span class="desSty">游戏难度</span>
        <el-select
          v-model="gameDifficulty"
          placeholder="请选择"
          class="selectSty"
          size="mini"
          @change="gameDiffFun"
        >
          <el-option
            v-for="item in difficultyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <span class="desSty">游戏时间</span>
        <el-select
          v-model="gameTime"
          placeholder="请选择"
          class="selectSty"
          size="mini"
          @change="gameTimeFun"
        >
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <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
        >

        <el-button
          @click="startTest"
          size="mini"
          class="xl_d_button"
          style="float: right; font-size: 12px"
          >{{ buttonFlag }}</el-button
        >
        <el-row>
          <!-- <el-col :span="4" style="text-align: left">
            游戏场景
            <el-select
              v-model="value"
              placeholder="选择游戏场景"
              @change="changeGame"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col> -->
          <!-- <el-col :span="12">
            <span>请选择反馈指标</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-select v-model="valueAttention" placeholder="请选择">
              <el-option
                v-for="item in optionsAttention"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col> -->
        </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>
  </div>
</template>
<script>
import Utils from "./util.js";
const fs = require("fs");
const { ipcRenderer } = require("electron");
export default {
  data() {
    return {
      buttonDisable: true,
      //脉搏开始前倒计时
      pulseTimeNum: 180,
      pulseTime: null,
      gameValue: 0,
      timeShow: "",
      buttonFlag: "开始",
      //脑电是否连接的状态
      eleFlag: "未连接",
      //脉搏是否连接的状态
      pulseFlag: "未连接",
      widthIframe: 900,
      heightIframe: 600,
      // this.urlThreeP = "../../../static/BuildFlower/index.html";
      // urlThreeP: "../../../static/candle/index.html",
      urlThreeP: __static + "/candle/index.html",
      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,
      //脉搏原始数据
    };
  },
  activated() {
    let that = this;
    setTimeout(() => {
      that.getSize();
    }, 5000);
  },
  mounted() {
    let that = this;
    let count = 0;
    var k = 1;
    var flagAnimation = true;
    window.addEventListener("resize", function () {
      // that.getSize();
      if (flagAnimation) {
        setTimeout(() => {
          that.getSize();
          flagAnimation = true;
        }, 1000);
      }
      flagAnimation = false;
    });

    Utils.$on("fatigue", function (msg) {
      if (msg.status == "未连接") {
        that.eleFlag = "未连接";
        //  that.resetData();
        //如果是未连接则点击按钮时提醒脑电未连接
      } else if (msg.status == "已连接") {
        that.eleFlag = "已连接";
        //已连接后处理得到的值
        let a = msg.attentionGame;
        let diff = 1;
        if (that.gameDifficulty == 1) {
          diff = 1.5;
        } else if (that.gameDifficulty == 2) {
          diff = 1.25;
        } else {
          diff = 1;
        }
        if (that.equipment === 1 && that.buttonFlag == "结束") {
          if (a == 0) {
            that.gameValue = 0;
          } else {
            that.gameValue = (a / 100) * diff;
          }
          if (isNaN(that.gameValue)) {
            that.gameValue = 0;
          }
          that.send(that.gameValue);
        }
      }
    });
    Utils.$on("pulse", function (msg) {
      if (msg.status == "未连接") {
        that.pulseFlag = "未连接";
        //  that.resetData();
        //假如脉搏是未连接的,点击开始按钮时提示脉搏未连接
      } else {
        that.pulseFlag = "已连接";
        //假如已经连接则判断返回的时间字段是多少
        //当前是否已连接如果已连接查看是否是脉搏如果是脉搏则判断3分钟是否已过

        that.waitTimePluse = msg.waitTime;
        if (msg.waitTime == 0) {
          //将指标写入文件
          console.log("------------------");
          // that.saveFileGame(JSON.stringify(msg.bbGame))
          // fs.appendFile(’./data1.txt’,‘hello\n’,(err)=>{
          // if(err) throw err;
          // console.log(‘写入成功’);
          // });

          let a = msg.pulseGame;

          // if (a > 30) {
          //   a = 30;
          // }
          let diff = 1;
          if (that.gameDifficulty == 1) {
            diff = 1.5;
          } else if (that.gameDifficulty == 2) {
            diff = 1.25;
          } else {
            diff = 1;
          }
          if (that.equipment === 2 && that.buttonFlag == "结束") {
            //如果a等于0时gameValue就等于0
            if (a == 0) {
              that.gameValue = 0;
            } else {
              that.gameValue = (a / 100) * diff * 2;
            }

            //当发现这个值是NAN时需要将值改为0
            if (isNaN(that.gameValue)) {
              that.gameValue = 0;
            }

            //当测试发现数据是NAN时

            that.send(that.gameValue);
          }
          //发送信号的时候需要判断选择的难度
          //简单为现在的值乘以1
          //普通为现在的值乘以0.8
          //困难为现在的值乘以0.6
        } else {
          //假如已经连接了,但是不够3分钟点击按钮时进行提示
          //采集时间限制，倒计时三分钟
        }
      }
    });

    //设置定时器每秒定时器
    setInterval(() => {
      //当按钮开始时需要发送信息到
      //当按钮处于结束状态时
      if (that.buttonFlag == "结束") {
        //当前设备是选择的哪一个
        //如果选择的是脑电时
        //判断脑电是否连接
        //如果脑电连接则发送send(0)
        if (that.equipment == 1) {
          if (that.eleFlag == "未连接") {
            if (that.gameValue != 0) {
              that.send(0);
            }
          }
        } else {
          if (that.pulseFlag == "未连接") {
            if (that.gameValue != 0) {
              that.send(0);
            }
          }
        }
        //脉搏同样也是如此
        //选择时间时初始化一个时间
        // if (that.gameTimeReserve > 0) {
        //   that.timeShow = that.formatterTimeFun(that.gameTimeReserve);
        //   that.gameTimeReserve -= 1;
        // } else if (that.gameTimeReserve == 0) {
        //   that.resetData();
        // }
      }
    }, 1000);
  },
  methods: {
    //保存文件
    saveFileGame(val) {
      fs.appendFile("D:\\pulseGame.txt", val+"@", (err) => {
        if (err) {
          console.error("Error writing to file:", err);
        } else {
          // console.log("Content appended successfully to file");
        }
      });
    },
    //切换选项时需要清空数据
    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);
      if (val == 1) {
        if (this.eleFlag == "未连接") {
          this.buttonDisable = true;
          this.resetData();
          this.$message.warning("请先连接脑电设备");
        } else {
          this.buttonDisable = false;
          this.resetData();
        }
      } else {
        this.buttonDisable = true;
        if (this.pulseFlag == "未连接") {
          this.resetData();
          this.$message.warning("请先连接脉搏设备");
        } else if (this.pulseFlag == "已连接") {
          if (this.waitTimePluse !== 0) {
            //执行一个方法进行定时计算
            // this.$message.warning(
            //   "采集时间限制，倒计时" + this.waitTimePluse.toFixed(2) + "秒"
            // );
            //将时间重置为3分钟
          } else {
            this.resetData();
          }
        }
      }
      //结束测试
    },
    //需要先判断代码是否点击开始测试按钮了
    //如果点击开始测试按钮了//才能发送信号到游戏
    //定时器方法进行倒计时
    //这是脉搏点击开始的倒计时
    //倒计时结束以后进行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();

          // if (this.equipment == 1) {
          //   Utils.$emit("animation-ele", {
          //     command: "结束",
          //     gameScene: this.gameScene,
          //     gameDifficulty: this.gameDifficulty,
          //     gameTime: this.gameTime,
          //   });
          // }
          // if (this.equipment == 2) {
          //   Utils.$emit("animation-pulse", {
          //     command: "结束",
          //     gameScene: this.gameScene,
          //     gameDifficulty: this.gameDifficulty,
          //     gameTime: this.gameTime,
          //   });
          // }
        }
      }, 1000);
    },
    timeCom() {
      //有个标志显示当前的倒计时的状态
      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) {
            Utils.$emit("animation-ele", {
              command: "结束",
              gameScene: this.gameScene,
              gameDifficulty: this.gameDifficulty,
              gameTime: this.gameTime,
            });
          }
          if (this.equipment == 2) {
            Utils.$emit("animation-pulse", {
              command: "结束",
              gameScene: this.gameScene,
              gameDifficulty: this.gameDifficulty,
              gameTime: this.gameTime,
            });
          }
          this.resetData();
        }
      }, 1000);
    },
    startTest() {
      //首先先判断是脑电还是脉搏
      if (this.buttonFlag == "开始") {
        if (this.equipment == 1) {
          //如果是脑电.则需要判断脑电是否连接
          if (this.eleFlag == "未连接") {
            this.$message.warning("请先连接脑电设备");
          } else if (this.eleFlag == "已连接") {
            Utils.$emit("animation-ele", {
              command: "开始",
              gameScene: this.gameScene,
              gameDifficulty: this.gameDifficulty,
              gameTime: this.gameTime,
            });
            this.buttonFlag = "结束";
            this.timeCom();
          }
        } else {
          //如果是脉搏,则需要判断脉搏是否是连接
          if (this.pulseFlag == "未连接") {
            this.$message.warning("请先连接脉搏设备");
          } else if (this.pulseFlag == "已连接") {
            //如果是脉搏已连接
            //点击了开始按钮
            //则开始倒计时3分钟
            this.timeFun1();
            Utils.$emit("animation-pulse", {
              command: "开始",
              gameScene: this.gameScene,
              gameDifficulty: this.gameDifficulty,
              gameTime: this.gameTime,
            });
            // if (this.waitTimePluse !== 0) {
            //   this.$message.warning(
            //     "采集时间限制，倒计时" + this.waitTimePluse.toFixed(2) + "秒"
            //   );
            // } else {
            this.buttonFlag = "结束";
            // }
          }
        }
      } else {
        //当是结束时需要重置倒计时以及按钮显示
        //结束的时候需要看是否是脉博
        //如果是脉搏结束的时候需要将按钮变为不可选状态
        // if (this.equipment == 1) {
        //   Utils.$emit("animation-ele", {
        //     command: "结束",
        //     gameScene: this.gameScene,
        //     gameDifficulty: this.gameDifficulty,
        //     gameTime: this.gameTime,
        //   });
        // }
        // if (this.equipment == 2) {
        //   Utils.$emit("animation-pulse", {
        //     command: "结束",
        //     gameScene: this.gameScene,
        //     gameDifficulty: this.gameDifficulty,
        //     gameTime: this.gameTime,
        //   });
        // }
        //改变按钮状态
        this.clearDataFun();
        this.resetData();
      }
    },
    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) {
      this.clearDataFun();
      switch (val) {
        case 1:
          //this.urlThreeP = "../../../static/candle/index.html";
          this.urlThreeP = __static + "/candle/index.html";
          this.delayTime();
          break;
        case 2:
          //this.urlThreeP = "../../../static/flower/index.html";
          this.urlThreeP = __static + "/flower/index.html";
          this.delayTime();
          break;
        case 3:
          //this.urlThreeP = "../../../static/car/index.html";
          this.urlThreeP = __static + "/car/index.html";
          this.delayTime();
          break;
        case 4:
          //this.urlThreeP = "../../../static/baobaotong/index.html";
          this.urlThreeP = __static + "/baobaotong/index.html";
          this.delayTime();
          break;
        case 5:
          this.urlThreeP = "../../../static/bomb/index.html";
          //this.urlThreeP = __static + "/bomb/index.html";
          this.delayTime();
          break;
        case 6:
          //this.urlThreeP = "../../../static/piaofuqiu/index.html";
          this.urlThreeP = __static + "/piaofuqiu/index.html";
          this.delayTime();
          break;
        default:
          //this.urlThreeP = "../../../static/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);
    },
  },
};
</script>
<style scoped>
.xl_d_button {
  background: rgb(87, 172, 187);
  opacity: 1;
  border-radius: 18px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
}
.xl_d_button:hover {
  background: rgb(87, 172, 187);
  opacity: 1;
  border-radius: 18px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
}
.xl_d_button:focus {
  background: rgb(87, 172, 187);
  opacity: 1;
  border-radius: 18px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
}
.xl_d_button.is-disabled,
.xl_d_button.is-disabled:focus,
.xl_d_button.is-disabled:hover {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: rgb(87, 172, 187);
  border-color: #ebeef5;
}
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;
}
.desSty {
  font-size: 12px;
}
</style>