实训调整

src/views/designPlatform/trainingMenu.vue

@@ -3,10 +3,14 @@
   <div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
     <div ref="drapBox" class="reminder-box">
       <div class="tip-title">
+        <div>
           <i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
           <i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
-        <p v-if="isShrink" style="color: #fff;">
+          <i v-show="!isShrink && !trainingSwitch && trainingDetail" class="icon el-icon-video-play" @click="handlerStart" />
-          <span>{{ lessonName }}</span>
+          <i v-show="!isShrink && trainingSwitch" class="icon el-icon-switch-button" @click="handlerEnd" />
+        </div>
+        <p style="color: #fff;">
+          <span>{{ courseModel.name }}</span>
         </p>
       </div>
       <div v-if="isShrink" class="reminder-box-content">
@@ -18,17 +22,30 @@
                 <span class="list-label">{{ $t('display.training.trainingName') }}</span>
                 <span class="list-elem">{{ courseModel.name }}</span>
               </p>
-              <p class="list-item">
+              <p v-if="demoMode === TrainingMode.TEST" class="list-item">
-                <span class="list-label">{{ $t('display.training.bestTime') }}</span>
+                <span class="list-label">{{ $t('display.lesson.score') }}</span>
-                <span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>
+                <span class="list-elem">{{ trainingScore }}</span>
               </p>
               <p class="list-item">
-                <span class="list-label">{{ $t('display.training.maximumTime') }}</span>
+                <span class="list-label">实训模式：</span>
-                <span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>
+                <span class="list-elem">
+                  <el-radio-group v-model="demoMode" :disabled="trainingSwitch" class="mode" size="small" @change="changeMode">
+                    <el-radio :label="TrainingMode.TEACH" border>{{ $t('display.lesson.teachingMode') }}</el-radio>
+                    <el-radio :label="TrainingMode.PRACTICE" border>{{ $t('display.lesson.practiceMode') }}</el-radio>
+                    <el-radio :label="TrainingMode.TEST" border>{{ $t('display.lesson.testMode') }}</el-radio>
+                  </el-radio-group>
+                </span>
               </p>
               <p class="list-item">
                 <span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
-                <span class="list-elem elem-span">{{ courseModel.remarks }}</span>
+                <span class="list-elem elem-span">{{ courseModel.description }}</span>
+              </p>
+              <p class="list-item">
+                <span class="list-label">操作按钮：</span>
+                <span class="list-elem">
+                  <el-button v-if="!trainingSwitch && trainingDetail" size="small" type="success" @click="handlerStart">开始</el-button>
+                  <el-button v-if="trainingSwitch" size="small" type="danger" @click="handlerEnd">结束</el-button>
+                </span>
               </p>
             </el-scrollbar>
           </div>
@@ -43,12 +60,14 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { ScriptMode } from '@/scripts/ConstDic';
-import { getPublishLessonDetail } from '@/api/jmap/lesson';
+import { clearSimulation } from '@/api/simulation';
-import { launchFullscreen } from '@/utils/screen';
+import { startTraining, endTraining } from '@/api/jmap/training';
 
 export default {
     name: 'TipTrainingDetail',
+    components: {
+    },
     props: {
         offsetBottom: {
             type: Number,
@@ -57,29 +76,30 @@ export default {
     },
     data() {
         return {
-            training: {
-                id: '',
-                name: '',
-                remarks: ''
-            },
             isShrink: true,
-            lessonName: '',
             courseModel: {
                 id: '',
                 name: '',
-                maxDuration: '',
+                description: ''
-                minDuration: '',
-                remarks: '',
-                updateTime: ''
             },
             showSumbit: false,
-            lessonIndex: 0
+            demoMode: ScriptMode.TEACH,
+            TrainingMode: ScriptMode
         };
     },
     computed: {
-        ...mapGetters('trainingList', [
+        trainingSwitch() {
-            'trainingList'
+            return this.$store.state.trainingNew.trainingSwitch;
-        ])
+        },
+        trainingScore() {
+            return this.$store.state.trainingNew.trainingScore;
+        },
+        trainingDetail() {
+            return this.$store.state.trainingNew.trainingDetail;
+        },
+        group() {
+            return this.$route.query.group;
+        }
     },
     watch: {
         '$store.state.trainingNew.trainingDetail': function (val) {
@@ -93,37 +113,16 @@ export default {
         }
     },
     mounted() {
-        this.loadInitData(this.$route.query);
+        this.loadInitData();
     },
     methods: {
-        loadInitData(obj) {
+        loadInitData() {
             this.showSumbit = false;
-            this.lessonName = '';
             this.courseModel = {
                 id: '',
                 name: '',
-                maxDuration: '',
+                description: ''
-                minDuration: '',
-                remarks: '',
-                updateTime: ''
             };
-
-            if (parseInt(obj.lessonId)) {
-                getPublishLessonDetail({ id: obj.lessonId }).then(response => {
-                    this.lessonName = response.data.name;
-                }).catch(error => {
-                    this.$message.error(this.$t('display.training.getCourseInformationFail') + ':' + error.message);
-                });
-            }
-        },
-        jump(obj) {
-            const query = {
-                group: this.$route.query.group,
-                trainingId: this.$route.query.trainingId,
-                lessonId: this.$route.query.lessonId
-            };
-            this.$router.push({ path: `/display/${this.$route.params.mode}`, query: query });
-            launchFullscreen();
         },
         shrink() {
             // const height = this.$refs.dragBody.offsetHeight + 40;
@@ -144,6 +143,33 @@ export default {
                 // this.$refs.drapBox.style.height = height + 'px';
                 // this.$refs.drapBox.style.top = top;
             }
+        },
+        changeMode(val) {
+            this.demoMode = val;
+            this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
+        },
+        handlerStart() {
+            startTraining(this.group, {mode: this.teachMode}).then(() => {
+                this.$store.dispatch('trainingNew/trainingStart');
+                this.$store.dispatch('trainingNew/setTrainingScore', '');
+            }).catch(() => {
+                this.$message.error('开始实训失败！');
+            });
+        },
+        handlerEnd() {
+            endTraining(this.group).then((resp) => {
+                this.$store.dispatch('trainingNew/trainingEnd');
+                this.$store.dispatch('socket/clearTrainingStepTip');
+                this.$store.dispatch('trainingNew/clearStepOrder');
+                this.$store.dispatch('trainingNew/setTrainingScore', resp.data);
+            }).catch(() => {
+                this.$message.error('结束实训失败！');
+            });
+        },
+        back() {
+            if (this.group) {
+                clearSimulation(this.group);
+            }
         }
     }
 };

src/views/designPlatform/trainingPreview.vue

@@ -4,6 +4,7 @@
     <training-jlmap refs="trainingJlmap" />
     <training-tip ref="trainingTip" />
     <training-position-tip ref="trainingPositionTip" />
+<!--    <training-menu ref="trainingMenu" :offset-bottom="offsetBottom" />-->
     <div class="trainBack">
       <el-button-group>
         <el-button v-if="!trainingSwitch && trainingDetail" type="success" @click="handlerStart">开始</el-button>
@@ -20,13 +21,15 @@ import MenuDemon from './demonMenu.vue';
 import TrainingTip from './trainingTip';
 import TrainingPositionTip from './trainingPositionTip';
 import TrainingJlmap from './trainingJlmap';
+import TrainingMenu from './trainingMenu';
 export default {
     name: 'TrainingDesign',
     components: {
         MenuDemon,
         TrainingTip,
         TrainingJlmap,
-        TrainingPositionTip
+        TrainingPositionTip,
+        TrainingMenu
     },
     props: {
         widthLeft: {
@@ -40,7 +43,8 @@ export default {
             trainingObj: null,
             starting: false,
             selected: null,
-            menus: null
+            menus: null,
+            offsetBottom: 50
         };
     },
     computed: {