评分

src/main/vue/src/views/performance/ProgrammeScoreList.vue

@@ -151,62 +151,118 @@
             center
             append-to-body
             :visible.sync="showViedo"
-            width="auto"
+            width="45vw"
         >
-            <video
-                :src="programme.video"
-                controls
-                style="max-height: 600px; max-width: 100%; margin: 0 auto"
-                v-if="programme.video"
-            >
-                您的浏览器不支持 video 标签。
-            </video>
-            <img
-                style="max-height: 600px; max-width: 100%; display: block; margin: auto"
-                :src="programme.annex"
-                alt=""
-                v-if="programme.annex"
-            />
-            <el-card shadow="never" style="width: 100%; margin: 10px auto">
-                <el-form :form="programme">
-                    <el-form-item label="分数">
-                        <!-- <span v-if="programme.second">{{ programme.myScore }}</span> -->
-                        <el-input-number
-                            v-model="programme.myScore"
-                            size="mini"
-                            label=""
-                            :min="0"
-                            :max="100"
-                            :step="1"
-                            :controls="true"
-                            controls-position="both"
-                        >
-                        </el-input-number>
-                    </el-form-item>
-                    <el-form-item label="备注">
-                        <!-- <span v-if="programme.second">{{ programme.remark }}</span> -->
-                        <el-input
-                            size="mini"
-                            v-model="programme.remark"
-                            placeholder="请输入备注"
-                            style="width: 200px"
-                            clearable
-                        ></el-input>
-                    </el-form-item>
+            <div class="dialog-content">
+                <video
+                    :src="programme.video"
+                    controls
+                    style="max-height: 600px; max-width: 100%; margin: 0 auto"
+                    v-if="programme.video"
+                >
+                    您的浏览器不支持 video 标签。
+                </video>
+                <img
+                    style="max-height: 600px; max-width: 100%; display: block; margin: auto"
+                    :src="programme.annex"
+                    alt=""
+                    v-if="programme.annex"
+                />
+                <el-card shadow="never" style="width: 100%; margin: 10px auto">
+                    <el-form :form="programme">
+                        <el-form-item label="分数">
+                            <el-radio-group v-model="scoreType" @change="changeScore">
+                                <el-radio-button :label="item.value" :key="item.value" v-for="item in scoreOptions">
+                                    <span> {{ item.value }}</span>
+                                    <span>({{ item.text1 }})</span>
+                                </el-radio-button>
+                            </el-radio-group>
+                            <!-- <span class="scoreTips">{{ scoreInfo.text1 }}</span> -->
+                            <!-- <span v-if="programme.second">{{ programme.myScore }}</span> -->
+                            <div class="score-content">
+                                <!-- <el-alert
+                                    :title="scoreInfo.text1"
+                                    type="warning"
+                                    :closable="false"
+                                    style="line-height:16px"
+                                >
+                                </el-alert> -->
+                                <div class="score-list">
+                                    <el-input-number
+                                        class="number1"
+                                        v-model="scoreValue[0]"
+                                        size="mini"
+                                        :min="scoreInfo.min"
+                                        :max="scoreInfo.max"
+                                        :step="1"
+                                        :controls="true"
+                                        controls-position="both"
+                                    >
+                                    </el-input-number>
+
+                                    <span class="tag">
+                                        .
+                                    </span>
+
+                                    <el-input-number
+                                        class="number2"
+                                        v-model="scoreValue[1]"
+                                        size="mini"
+                                        label=""
+                                        :min="0"
+                                        :max="9"
+                                        :step="1"
+                                        :controls="true"
+                                        controls-position="both"
+                                    >
+                                    </el-input-number>
+
+                                    <el-input-number
+                                        class="number2"
+                                        v-model="scoreValue[2]"
+                                        size="mini"
+                                        label=""
+                                        :min="0"
+                                        :max="9"
+                                        :step="1"
+                                        :controls="true"
+                                        controls-position="both"
+                                    >
+                                    </el-input-number>
+                                </div>
+                                <div class="score-desc">
+                                    <span class="number1">整数位</span>
+                                    <div class="tag">.</div>
+                                    <span class="number2">十分位</span>
+                                    <span class="number2">百分位</span>
+                                </div>
+                            </div>
+                        </el-form-item>
+                        <el-form-item label="备注">
+                            <!-- <span v-if="programme.second">{{ programme.remark }}</span> -->
+                            <el-input
+                                size="mini"
+                                v-model="programme.remark"
+                                placeholder="请输入备注"
+                                style="width: 200px"
+                                clearable
+                            ></el-input>
+                        </el-form-item>
 
-                    <el-form-item>
-                        <el-button size="mini" @click="saveScore(programme)" type="primary">保存</el-button>
-                        <el-button size="mini" @click="move(-1)" :disabled="index == 0">上一个</el-button>
-                        <el-button
-                            size="mini"
-                            @click="move(1)"
-                            :disabled="(page - 1) * pageSize + index == totalElements - 1 || index >= pageSize - 1"
-                            >下一个</el-button
-                        >
-                        <el-button @click="showViedo = false" size="mini">关闭</el-button>
-                    </el-form-item>
-                </el-form>
-            </el-card>
+                        <el-form-item>
+                            <el-button size="mini" @click="saveScore(programme)" type="primary">保存</el-button>
+                            <el-button size="mini" @click="move(-1)" :disabled="index == 0">上一个</el-button>
+                            <el-button
+                                size="mini"
+                                @click="move(1)"
+                                :disabled="(page - 1) * pageSize + index == totalElements - 1 || index >= pageSize - 1"
+                                >下一个</el-button
+                            >
+                            <el-button @click="showViedo = false" size="mini">关闭</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-card>
+            </div>
             <!-- <video
                 :src="videoUrl"
                 controlsList="nodownload noremote footbar"
@@ -261,7 +317,41 @@ export default {
             competitionGroupOptions: [
                 { label: '个人', value: 'SINGLE' },
                 { label: '集体', value: 'COLLECTIVE' }
-            ]
+            ],
+            scoreType: 'D',
+            scoreOptions: [
+                {
+                    value: 'D',
+                    text1: '60-70分',
+                    text2: '歌唱姿势正确，能够完整地演唱整首歌曲，音准、节奏尚可，歌唱方法无明显毛病。',
+                    min: 60,
+                    max: 69
+                },
+                {
+                    value: 'C',
+                    text1: '70-80分',
+                    text2:
+                        '歌唱姿势正确，音域达到f2以上，音准、节奏、共鸣较好，气息流畅，吐字较清晰，喉头较稳定，有一定的艺术表现力，曲目具有一定的难度。',
+                    min: 70,
+                    max: 79
+                },
+                {
+                    value: 'B',
+                    text1: '80-90分',
+                    text2:
+                        '自然嗓音条件良好，音域达到g2以上，音准、节奏、共鸣以及气息的运用技巧娴熟，基本功扎实，喉头稳定，音乐感觉好，艺术表现力强，曲目难度较大。',
+                    min: 80,
+                    max: 89
+                },
+                {
+                    value: 'A',
+                    text1: '90分以上',
+                    text2: '嗓音条件很好，音域宽广，歌唱技术全面完美，音乐感很好，演唱艺术感染力强，曲目难度大。',
+                    min: 90,
+                    max: 98
+                }
+            ],
+            scoreValue: [65, 0, 0]
         };
     },
     created() {
@@ -318,9 +408,23 @@ export default {
         },
         showTable() {
             return this.backMap(this.tableData);
+        },
+        scoreInfo() {
+            let info = [...this.scoreOptions].find(item => {
+                return item.value === this.scoreType;
+            });
+            return info || {};
         }
     },
     methods: {
+        changeScore() {
+            setTimeout(() => {
+                console.log(this.scoreInfo.max + this.scoreInfo.min);
+                let val = parseInt((this.scoreInfo.max + this.scoreInfo.min) / 2);
+                console.log(val);
+                this.$set(this.scoreValue, 0, val + 1);
+            }, 100);
+        },
         competitionGroupFormatter(row, column, cellValue, index) {
             let selectedOption = this.competitionGroupOptions.find(i => i.value === cellValue);
             if (selectedOption) {
@@ -406,13 +510,13 @@ export default {
                 });
         },
         saveScore(row) {
-            if (!row.myScore) {
-                this.$message.warning('请输入评分');
-                return;
-            }
+            // if (!row.myScore) {
+            //     this.$message.warning('请输入评分');
+            //     return;
+            // }
             let record = {
                 programmeId: row.id,
-                score: row.myScore,
+                score: ((this.scoreValue[0] * 100 + this.scoreValue[1] * 10 + this.scoreValue[0]) / 100).toFixed(2),
                 remark: row.remark,
                 performanceId: row.performanceId,
                 expertId: this.$route.query.eid
@@ -499,6 +603,14 @@ export default {
             this.index = index;
             this.showViedo = true;
             this.programme = row;
+            let info = [...this.scoreOptions].find(item => {
+                return row.myScore >= item.min && row.myScore <= item.max;
+            });
+
+            this.scoreType = info ? info.value : 'D';
+            let score = row.myScore * 100;
+
+            this.scoreValue = [parseInt(score / 100), parseInt((score % 100) / 10), score % 10];
         },
         move(direction) {
             const end = direction + this.index;
@@ -566,4 +678,54 @@ export default {
         }
     }
 }
+.scoreTips {
+    font-size: 12px;
+    color: #606266;
+    margin-left: 20px;
+}
+.score-content {
+    padding: 10px 40px;
+    .score-list {
+        // padding: 5px 10px;
+        .number1 {
+            width: 130px;
+            display: inline-block;
+        }
+        .number2 {
+            width: 90px;
+            display: inline-block;
+        }
+        .tag {
+            width: 30px;
+            display: inline-block;
+            text-align: center;
+        }
+        .number2 + .number2 {
+            margin-left: 5px;
+        }
+    }
+    .score-desc {
+        font-size: 12px;
+        color: #606266;
+        // padding: 0 10px;
+        .number1 {
+            width: 130px;
+            display: inline-block;
+            text-align: center;
+        }
+        .number2 {
+            width: 90px;
+            display: inline-block;
+            text-align: center;
+        }
+        .number2 + .number2 {
+            margin-left: 5px;
+        }
+        .tag {
+            width: 30px;
+            display: inline-block;
+            text-align: center;
+        }
+    }
+}
 </style>