Merge branch 'master' of http://101.43.129.26:10880/psychological_camera/RZGY

src/renderer/components/Animation.vue

@@ -1,784 +1,119 @@
 <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 class="main_right_height">
+    <div class="animation_main">
+      <div class="animation_k" @click='goPage("/menu/animationDes",4)'>
+        <img
+          class="animation_img_cla"
+          src="../assets/newAnimation/baobaotong.png"
+        />
+        <div class="animation_des">&nbsp;</div>
+        <span class="animation_des_font">爆爆桶</span>
+      </div>
+      <div class="animation_k" @click='goPage("/menu/animationDes",5)'>
+        <img
+          class="animation_img_cla"
+          src="../assets/newAnimation/zhadan.png"
+        />
+        <div class="animation_des">&nbsp;</div>
+        <span class="animation_des_font">炸弹</span>
+      </div>
+
+      <div class="animation_k" @click='goPage("/menu/animationDes",2)'>
+        <img
+          class="animation_img_cla"
+          src="../assets/newAnimation/flower.png"
+        />
+        <div class="animation_des">&nbsp;</div>
+        <span class="animation_des_font">心之花</span>
+      </div>
+    </div>
+    <div class="animation_main_two" >
+      <div class="animation_k" @click='goPage("/menu/animationDes",1)'>
+        <img class="animation_img_cla" src="../assets/newAnimation/fire.png" />
+        <div class="animation_des">&nbsp;</div>
+        <span class="animation_des_font">心灵之火</span>
+      </div>
+      <div class="animation_k" @click='goPage("/menu/animationDes",3)'>
+        <img class="animation_img_cla" src="../assets/newAnimation/cat.png" />
+        <div class="animation_des">&nbsp;</div>
+        <span class="animation_des_font">急速赛车</span>
+      </div>
+      <div class="animation_k"  @click='goPage("/menu/animationDes",6)'>
+        <img class="animation_img_cla" src="../assets/newAnimation/ball.png" />
+        <div class="animation_des">&nbsp;</div>
+        <span class="animation_des_font">漂浮球</span>
+      </div>
+    </div>
   </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);
-    },
+    return {};
   },
+  methods:{
+    goPage(val,typeName){
+      this.$router.push({path:val,query:{gameType:typeName}})
+    }
+  }
 };
 </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;
+.animation_main {
+  margin-top: 14vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  /* flex-wrap: wrap; */
 }
-.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;
+.animation_img_cla {
+  width: 307px;
+  height: 250px;
 }
-canvas {
-  /* width: 100%;
-  height: 100%; */
+.main_right_height {
+  /* padding:40px; */
+  height: 100vh !important;
+  display: block !important;
+  overflow-y: auto !important;
+  background-color: #ffffff;
 }
-.main-unity {
-  margin-top: 10px;
+.animation_main_two {
+  margin-top: 8vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
 }
-</style>
-<style>
-.footer {
-  text-align: center;
+.animation_k {
+  position: relative;
+  cursor: pointer;
 }
-.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;
+.animation_des {
+  background: #0f0f0f;
+  position: absolute;
+  margin-top: -43px;
+  line-height: 40px;
+  display: flex;
+  width: 100%;
+  opacity: 0.3;
+  color: #ffffff;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  justify-content: center;
 }
-.desSty {
-  font-size: 12px;
+.animation_des_font {
+  color: #ffffff;
+  z-index: 100;
+  position: absolute;
+
+  position: absolute;
+  margin-top: -43px;
+  line-height: 40px;
+  display: flex;
+  width: 100%;
+  /* opacity: 0.5; */
+  color: #ffffff;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  justify-content: center;
 }
 </style>

src/renderer/components/Animation1.vue

@@ -0,0 +1,784 @@
+<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>

src/renderer/components/AnimationDes.vue

@@ -0,0 +1,768 @@
+<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" class='select_class_animation'>
+        <!-- <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> -->
+        <span class="desSty">选择设备</span>
+        <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;
+        <span class="desSty">游戏难度</span>
+        <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;
+        <span class="desSty">游戏时间</span>
+        <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>
+        <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="small"
+          class="xl_animation_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> 
+           style="display: block; height: 72vh; margin-top: 10px"
+          -->
+        </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);
+            }
+          }
+        }
+      }
+    }, 1000);
+    setTimeout(() => {
+      that.getSize();
+    }, 5000);
+    setTimeout(() => {
+      that.changeGame(parseInt(that.$route.query.gameType));
+    }, 1000);
+    //  that.changeGame(parseInt(that.$route.query.gameType));
+  },
+  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) {
+      console.log(val);
+      console.log("11111111111111111111111111111111");
+      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>
+.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;
+}
+
+
+</style>

src/renderer/components/ManageElectrical.vue

@@ -44,7 +44,7 @@
               'letter-spacing': '4px',
             }"
             :row-class-name="tableRowClassName"
-            border
+          
             style="width: 100%"
           >
             <el-table-column prop="userName" align="center" label="姓名">

src/renderer/components/ManagePluse.vue

@@ -30,14 +30,14 @@
             </el-input>
           </div>
         </el-col>
-        <el-col
+        <!-- <el-col
           :span="16"
           style="text-align: right; margin-top: 20px; margin-bottom: 10px"
         >
           <el-button size="small" @click="downloadALL" class="xl_d_button">
             全部下载</el-button
           >
-        </el-col>
+        </el-col> -->
       </el-row>
     </div>
     <div>
@@ -46,7 +46,6 @@
         <el-col :span="22">
           <el-table
             :data="tableData"
-            border
             :header-cell-style="{
               background: '#66B497',
               color: '#FFFFFF',

src/renderer/components/ManageUser.vue

@@ -29,7 +29,7 @@
         <el-col :span="22">
           <el-table
             :data="tableData"
-            border
+           
             :header-cell-style="{
               background: '#66B497',
               color: '#FFFFFF',

src/renderer/components/ManageUserScale.vue

@@ -34,7 +34,6 @@
               'letter-spacing': '4px',
             }"
             :row-class-name="tableRowClassName"
-            border
             style="width: 100%"
           >
             <el-table-column prop="userName" align="center" label="姓名">

src/renderer/components/ManageUserScaleRecord.vue

@@ -93,7 +93,6 @@
               'letter-spacing': '4px',
             }"
             :row-class-name="tableRowClassName"
-            border
           >
             <el-table-column type="selection" align="center" width="55">
             </el-table-column>

src/renderer/router/index.js

@@ -9,6 +9,7 @@ import Electrical from '@/components/Electrical'
 import Pulse from '@/components/Pulse'
 import Intervene from '@/components/intervene'
 import Animation from '@/components/Animation'
+import AnimationDes from '@/components/AnimationDes'
 import MusicRelax from '@/components/MusicRelax'
 import Video from '@/components/Video'
 import VideoDetail from '@/components/VideoDetail'
@@ -122,7 +123,15 @@ if (result != '0') {
           name: 'animation',
           component: Animation,
           meta: {
-            keepAlive: true, // 需要被缓存
+            keepAlive: false, // 需要被缓存
+          }
+        },
+        {
+          path: 'animationDes',
+          name: 'animationDes',
+          component: AnimationDes,
+          meta: {
+            keepAlive: false, // 需要被缓存
           }
         },
         {

src/utils/public.css

@@ -91,7 +91,9 @@
     font-family: PingFang SC;
     font-weight: 400;
 }
-.xl_down_button.is-disabled,.xl_down_button.is-disabled:hover{
+
+.xl_down_button.is-disabled,
+.xl_down_button.is-disabled:hover {
     background: #8FDCBF;
     opacity: 1;
     border-radius: 18px;
@@ -104,6 +106,7 @@
     font-family: PingFang SC;
     font-weight: 400;
 }
+
 .xl_down_button,
 .xl_down_button:focus {
     background: #1FD18E;
@@ -118,6 +121,7 @@
     font-family: PingFang SC;
     font-weight: 400;
 }
+
 .xl_down_button:hover {
     background: #1FD18E;
     opacity: 1;
@@ -131,6 +135,36 @@
     font-family: PingFang SC;
     font-weight: 400;
 }
+.xl_animation_button,
+.xl_animation_button:focus {
+    background: #1FD18E;
+    opacity: 1;
+    border-radius: 18px;
+    border: 1px solid #1FD18E;
+    color: #ffffff;
+    /* border-radius: 18px; */
+    /* font-size: 14px; */
+    padding-left: 25px;
+    padding-right: 25px;
+    font-family: PingFang SC;
+    font-weight: 400;
+}
+
+.xl_animation_button:hover {
+    background: #1FD18E;
+    opacity: 1;
+    border-radius: 18px;
+    border: 1px solid #1FD18E;
+    color: #ffffff;
+    /* border-radius: 18px; */
+    /* font-size: 14px; */
+    padding-left: 25px;
+    padding-right: 25px;
+    font-family: PingFang SC;
+    font-weight: 400;
+}
+
+
 
 .xl_input .el-input__inner {
     width: 35.4vw;
@@ -152,4 +186,10 @@
 .xl_input .el-range-editor .el-range-input {
     line-height: 1;
     background-color: #eaeaea;
+}
+
+.select_class_animation /deep/ .el-input__inner {
+    background-color: #F5F5F5 !important;
+    border: 0px solid #DCDFE6 !important;
+    font-size: 12px !important;
 }