7.3

src/views/index/compoents/animation.vue

@@ -0,0 +1,107 @@
+<template>
+  
+     <div class="block1" style="dispaly:flex">
+        <div class="listbtn"> 
+       <el-button plain class="anniu">low</el-button>
+         <el-slider :max='1000' v-model.number="value1" style="width:50%;margin: 0 10px 0 15px;"></el-slider>
+        <el-button plain class="anniu">Quick</el-button>
+      </div>
+        <div class="listbtn anbtn"> 
+       <el-button plain class="anniu" @click="Startclick()">Start</el-button>
+        <el-button plain class="anniu">Last</el-button>
+        <el-button plain class="anniu">Play/stop</el-button>
+        <el-button plain class="anniu">Next</el-button>
+        <el-button plain class="anniu">End</el-button>
+       
+      </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue' // 引入vue
+import $ from 'jquery' ;
+import store from "@/store";
+import { request } from "@/utils/request";
+import { ElMessage } from '@/utils/message.js'
+let Message = new ElMessage()
+export default {
+name: "VideoPlayer",
+     props:{
+         animationobj:{
+             type:Object,
+               default () {
+            return {}
+          }
+         },
+           step:String,
+           solverConfigid:String,
+           action:String,
+     },
+    data() {
+        return {
+        value1:0,
+        pid:'',
+        setp:'',
+    }
+    },
+    created(){
+
+  this.pid=this.$route.query.pid;
+},
+    mounted(){
+      this.value1=Number(this.animationobj.currentstep)
+    },
+    methods:{
+      // 循环步数
+    
+        // 动画的开始
+        Startclick(){
+            this.setp= Number(this.animationobj.laststep);
+            for(let i=this.value1;i<=this.animationobj.laststep;i++){
+               this.jiekou();
+
+            }
+          this.jiekou();
+        },
+ 
+  jiekou(){
+           let that=this;
+    let params = {
+        transCode: "AFT003",// 服务器渲染实例接口创建推流
+        pid:this.pid,
+        solverConfigId: this.solverConfigid,
+        animationType:this.action,
+        step:this.animationobj.currentstep,
+      };
+      this.loading = true;
+      request(params)
+        .then((res) => {
+          console.log(res.img)
+        })
+        .catch((err) => {
+        }); 
+  }
+     },
+}
+</script>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+ .listbtn{
+  display: flex;
+  margin-bottom: 5px;
+  .anniu{
+    flex: 1;
+  }
+  .el-checkbox{
+      flex: 1;
+  }
+  }
+  .anniu{
+    padding: 5px 28px;
+    font-size: 12px;
+      margin: 0;
+    
+  }
+</style>