脑电采集部分完成——周贤博（2024/2/27 21：30）

src/components/Header.vue

@@ -8,17 +8,7 @@
         <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <el-dropdown style="width: 70px; cursor: pointer">
+
-      <span>{{user.nickname}}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
-      <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
-        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
-          <span style="text-decoration: none" @click="handlePerson">个人信息</span>
-        </el-dropdown-item>
-        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
-          <span style="text-decoration: none" @click="handleExit">退出</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
   </div>
 </template>
 

src/views/br_sampling/sample1.vue

@@ -1,8 +1,15 @@
 <template>
+<!--  <div style="height: 100vh;">-->
   <div>
-   <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel :interval="2000" height="850px" width="900px" arrow="never" indicator-position="none"
-     <el-carousel-item v-for="item in 6" :key="item">
+                 :autoplay="carouselPlaying"
-       <h3 class="medium">{{ item }}</h3>
+                 :before-change="handleBeforeChange"
+                 >
+      <el-carousel-item>
+        <img src="@/assets/black.jpg" alt="black" style="width: 100%; height: 100%;" @click="startCarousel">
+      </el-carousel-item>
+      <el-carousel-item v-for="(item, index) in imageList" :key="index">
+        <img :src="require(`@/sample_pic/Block1/${String(item).padStart(4, '0')}.jpg`)" alt="image" style="width: 100%; height: 100%;">
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -10,18 +17,45 @@
 
 <script>
 export default {
-  name: "sample"
+  name: "sample",
+  data() {
+    return {
+      imageList: Array.from({length: 100}, (v, i) => String(i + 1).padStart(4, '0')),
+      carouselPlaying: false,
+      buttonDisplay: true
+    };
+  },
+  methods: {
+    handleBeforeChange() {
+      if (!this.carouselPlaying) {
+        this.$refs.carousel.goTo(1); // 显示纯黑图片
+      }
+      this.$refs.carousel.disableTransition = !this.carouselPlaying;
+    },
+    startCarousel() {
+      this.carouselPlaying = true;
+      this.$refs.carousel.next();
+      this.buttonDisplay = false;
+    }
+  }
 }
 </script>
 
-
 <style>
-.el-carousel__item h3 {
+.el-carousel__item {
-  color: #475669;
+  text-align: center;
-  font-size: 14px;
+}
-  opacity: 0.75;
+
-  line-height: 200px;
+.el-carousel__arrow {
-  margin: 0;
+  display: none; /* 隐藏箭头 */
+}
+
+.el-carousel__indicator {
+  display: none; /* 隐藏进度条 */
+}
+
+.el-carousel__item.is-active {
+  transition: none; /* 取消切换时的滑动动画 */
 }
 
 .el-carousel__item:nth-child(2n) {

src/views/br_sampling/sample2.vue

@@ -1,13 +1,68 @@
+<template>
+  <!--  <div style="height: 100vh;">-->
+  <div>
+    <el-carousel :interval="2000" height="850px" width="900px" arrow="never" indicator-position="none"
+                 :autoplay="carouselPlaying"
+                 :before-change="handleBeforeChange"
+    >
+      <el-carousel-item>
+        <img src="@/assets/black.jpg" alt="black" style="width: 100%; height: 100%;" @click="startCarousel">
+      </el-carousel-item>
+      <el-carousel-item v-for="(item, index) in imageList" :key="index">
+        <img :src="require(`@/sample_pic/Block2/${String(item).padStart(4, '0')}.jpg`)" alt="image" style="width: 100%; height: 100%;">
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
 <script>
 export default {
-  name: "sample2"
+  name: "sample",
+  data() {
+    return {
+      imageList: Array.from({length: 100}, (v, i) => String(i + 1).padStart(4, '0')),
+      carouselPlaying: false,
+      buttonDisplay: true
+    };
+  },
+  methods: {
+    handleBeforeChange() {
+      if (!this.carouselPlaying) {
+        this.$refs.carousel.goTo(1); // 显示纯黑图片
+      }
+      this.$refs.carousel.disableTransition = !this.carouselPlaying;
+    },
+    startCarousel() {
+      this.carouselPlaying = true;
+      this.$refs.carousel.next();
+      this.buttonDisplay = false;
+    }
+  }
 }
 </script>
 
-<template>
+<style>
+.el-carousel__item {
+  text-align: center;
+}
 
-</template>
+.el-carousel__arrow {
+  display: none; /* 隐藏箭头 */
+}
 
-<style scoped>
+.el-carousel__indicator {
+  display: none; /* 隐藏进度条 */
+}
+
+.el-carousel__item.is-active {
+  transition: none; /* 取消切换时的滑动动画 */
+}
 
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
 </style>

src/views/br_sampling/sample3.vue

@@ -1,13 +1,68 @@
+<template>
+  <!--  <div style="height: 100vh;">-->
+  <div>
+    <el-carousel :interval="2000" height="850px" width="900px" arrow="never" indicator-position="none"
+                 :autoplay="carouselPlaying"
+                 :before-change="handleBeforeChange"
+    >
+      <el-carousel-item>
+        <img src="@/assets/black.jpg" alt="black" style="width: 100%; height: 100%;" @click="startCarousel">
+      </el-carousel-item>
+      <el-carousel-item v-for="(item, index) in imageList" :key="index">
+        <img :src="require(`@/sample_pic/Block3/${String(item).padStart(4, '0')}.jpg`)" alt="image" style="width: 100%; height: 100%;">
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
 <script>
 export default {
-  name: "sample3"
+  name: "sample",
+  data() {
+    return {
+      imageList: Array.from({length: 100}, (v, i) => String(i + 1).padStart(4, '0')),
+      carouselPlaying: false,
+      buttonDisplay: true
+    };
+  },
+  methods: {
+    handleBeforeChange() {
+      if (!this.carouselPlaying) {
+        this.$refs.carousel.goTo(1); // 显示纯黑图片
+      }
+      this.$refs.carousel.disableTransition = !this.carouselPlaying;
+    },
+    startCarousel() {
+      this.carouselPlaying = true;
+      this.$refs.carousel.next();
+      this.buttonDisplay = false;
+    }
+  }
 }
 </script>
 
-<template>
+<style>
+.el-carousel__item {
+  text-align: center;
+}
 
-</template>
+.el-carousel__arrow {
+  display: none; /* 隐藏箭头 */
+}
 
-<style scoped>
+.el-carousel__indicator {
+  display: none; /* 隐藏进度条 */
+}
+
+.el-carousel__item.is-active {
+  transition: none; /* 取消切换时的滑动动画 */
+}
 
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
 </style>

src/views/br_sampling/sample4.vue

@@ -1,13 +1,68 @@
+<template>
+  <!--  <div style="height: 100vh;">-->
+  <div>
+    <el-carousel :interval="2000" height="850px" width="900px" arrow="never" indicator-position="none"
+                 :autoplay="carouselPlaying"
+                 :before-change="handleBeforeChange"
+    >
+      <el-carousel-item>
+        <img src="@/assets/black.jpg" alt="black" style="width: 100%; height: 100%;" @click="startCarousel">
+      </el-carousel-item>
+      <el-carousel-item v-for="(item, index) in imageList" :key="index">
+        <img :src="require(`@/sample_pic/Block4/${String(item).padStart(4, '0')}.jpg`)" alt="image" style="width: 100%; height: 100%;">
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
 <script>
 export default {
-  name: "sample4"
+  name: "sample",
+  data() {
+    return {
+      imageList: Array.from({length: 100}, (v, i) => String(i + 1).padStart(4, '0')),
+      carouselPlaying: false,
+      buttonDisplay: true
+    };
+  },
+  methods: {
+    handleBeforeChange() {
+      if (!this.carouselPlaying) {
+        this.$refs.carousel.goTo(1); // 显示纯黑图片
+      }
+      this.$refs.carousel.disableTransition = !this.carouselPlaying;
+    },
+    startCarousel() {
+      this.carouselPlaying = true;
+      this.$refs.carousel.next();
+      this.buttonDisplay = false;
+    }
+  }
 }
 </script>
 
-<template>
+<style>
+.el-carousel__item {
+  text-align: center;
+}
 
-</template>
+.el-carousel__arrow {
+  display: none; /* 隐藏箭头 */
+}
 
-<style scoped>
+.el-carousel__indicator {
+  display: none; /* 隐藏进度条 */
+}
+
+.el-carousel__item.is-active {
+  transition: none; /* 取消切换时的滑动动画 */
+}
 
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
 </style>

src/views/br_sampling/sample5.vue

@@ -1,13 +1,68 @@
+<template>
+  <!--  <div style="height: 100vh;">-->
+  <div>
+    <el-carousel :interval="2000" height="850px" width="900px" arrow="never" indicator-position="none"
+                 :autoplay="carouselPlaying"
+                 :before-change="handleBeforeChange"
+    >
+      <el-carousel-item>
+        <img src="@/assets/black.jpg" alt="black" style="width: 100%; height: 100%;" @click="startCarousel">
+      </el-carousel-item>
+      <el-carousel-item v-for="(item, index) in imageList" :key="index">
+        <img :src="require(`@/sample_pic/Block5/${String(item).padStart(4, '0')}.jpg`)" alt="image" style="width: 100%; height: 100%;">
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
 <script>
 export default {
-  name: "sample5"
+  name: "sample",
+  data() {
+    return {
+      imageList: Array.from({length: 100}, (v, i) => String(i + 1).padStart(4, '0')),
+      carouselPlaying: false,
+      buttonDisplay: true
+    };
+  },
+  methods: {
+    handleBeforeChange() {
+      if (!this.carouselPlaying) {
+        this.$refs.carousel.goTo(1); // 显示纯黑图片
+      }
+      this.$refs.carousel.disableTransition = !this.carouselPlaying;
+    },
+    startCarousel() {
+      this.carouselPlaying = true;
+      this.$refs.carousel.next();
+      this.buttonDisplay = false;
+    }
+  }
 }
 </script>
 
-<template>
+<style>
+.el-carousel__item {
+  text-align: center;
+}
 
-</template>
+.el-carousel__arrow {
+  display: none; /* 隐藏箭头 */
+}
 
-<style scoped>
+.el-carousel__indicator {
+  display: none; /* 隐藏进度条 */
+}
+
+.el-carousel__item.is-active {
+  transition: none; /* 取消切换时的滑动动画 */
+}
 
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
 </style>