feat: 视屏播放

src/components/Video/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <video
+    :src="src"
+    controls
+    :style="style"
+    class="video"
+  />
+</template>
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  poster: {
+    type: String,
+    default: ''
+  },
+  style: {
+    type: Object,
+    default: () => ({
+      width: '100%',
+      height: '100%'
+    })
+  }
+})
+</script>

src/views/vi/testProject/evaluate/icon/rate.svg

@@ -0,0 +1 @@
+<svg t="1770775328199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6764" width="200" height="200"><path d="M515.736216 0L913.297297 397.561081V1024H110.702703V0h405.033513z m-226.663784 512c0 34.926703 7.942919 60.720432 23.828757 77.408865 15.885838 16.660757 37.915676 24.991135 66.034162 24.991135 27.177514 0 48.709189-8.38573 64.622703-25.129514 15.913514-16.771459 23.856432-42.509838 23.856432-77.270486 0-34.926703-7.942919-60.720432-23.856432-77.408865-15.885838-16.660757-37.915676-24.991135-66.006486-24.991135-27.205189 0-48.764541 8.38573-64.650379 25.129514-15.885838 16.771459-23.856432 42.509838-23.856432 77.270486z m145.767784 307.2l210.916325-409.6h-54.963892l-212.54919 409.6h56.596757z m121.772973-102.538378c0 34.871351 7.915243 60.692757 23.801081 77.43654 15.913514 16.743784 37.915676 25.101838 66.034162 25.101838 27.205189 0 48.764541-8.358054 64.650379-25.101838 15.885838-16.743784 23.856432-42.537514 23.856432-77.43654 0-34.705297-7.970595-60.416-23.856432-77.159784-15.885838-16.743784-37.721946-25.101838-65.480649-25.101838-27.564973 0-49.262703 8.358054-65.176216 25.101838s-23.856432 42.454486-23.856432 77.159784z m-208.121081-190.02119c0-24.465297 3.210378-40.904649 9.631135-49.262702 4.870919-6.171676 11.568432-9.271351 20.120216-9.271352 8.745514 0 15.526054 3.182703 20.396973 9.492757 6.199351 8.219676 9.326703 24.576 9.326703 49.041297s-3.127351 40.876973-9.326703 49.262703c-4.870919 6.171676-11.651459 9.243676-20.396973 9.243676-8.579459 0-15.249297-3.072-20.120216-9.243676-6.420757-8.38573-9.603459-24.797405-9.603459-49.262703z m267.540757 204.8c0-24.465297 3.210378-40.904649 9.631135-49.262702 4.649514-6.171676 11.347027-9.271351 20.092541-9.271352s15.55373 3.099676 20.396973 9.243676c6.227027 8.38573 9.326703 24.825081 9.326702 49.262703 0 24.492973-3.182703 40.904649-9.603459 49.290378-4.677189 6.171676-11.347027 9.243676-20.120216 9.243676-8.551784 0-15.221622-3.182703-20.092541-9.492757-6.420757-8.219676-9.631135-24.548324-9.631135-49.013622z" fill="#65BEE0" p-id="6765"></path></svg>

src/views/vi/testProject/evaluate/icon/score.svg

@@ -0,0 +1 @@
+<svg t="1770774849202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5692" width="200" height="200"><path d="M411 344.6l-18.9 45.1h37.4L411 344.6z m0 0" p-id="5693" fill="#65BEE0"></path><path d="M799.9 349.5L631.4 181.1c-9.2-9.2-21.8-14.4-34.9-14.4H272.9c-27.3 0-49.3 22.1-49.4 49.4V808c0 27.2 22.1 49.3 49.4 49.4H765c27.2 0 49.3-22.1 49.4-49.4V384.4c-0.1-13-5.2-25.6-14.5-34.9z m-477.7 79.4l65-155.4c1.7-7 6.5-12.9 12.9-16.1 6.5-3.2 14-3.4 20.6-0.6 6.9 2.9 12.2 8.8 14.2 16.1l64.2 156.4c3.7 8.2 2.7 17.9-2.8 25.1-5.4 7.2-14.4 10.9-23.4 9.6-8.9-1.3-16.5-7.4-19.6-15.9l-3.8-9.2h-78.2l-3.8 9c-5.3 12.6-19.7 18.5-32.3 13.2-12.3-5.3-18.3-19.8-13-32.2z m392 256.4c0 6.5-2.6 12.8-7.2 17.4-4.6 4.6-10.9 7.2-17.4 7.2H345.5c-13.6 0-24.7-11-24.7-24.7 0-13.6 11.1-24.7 24.7-24.7h344.1c6.6 0 12.9 2.6 17.5 7.3 4.6 4.7 7.2 11.1 7.1 17.6v-0.1z m0-148.7c0 6.5-2.6 12.8-7.2 17.4-4.6 4.6-10.9 7.2-17.4 7.2H345.5c-13.6 0-24.7-11-24.7-24.7 0-13.6 11.1-24.7 24.7-24.7h344.1c6.6 0 12.9 2.6 17.5 7.3 4.6 4.7 7.2 11.1 7.1 17.6v-0.1z m0-148c0 6.5-2.6 12.8-7.2 17.4-4.6 4.6-10.9 7.2-17.4 7.2h-97.3c-13.6 0-24.7-11-24.7-24.7 0-13.6 11-24.7 24.7-24.7h97.3c6.6 0 12.9 2.6 17.6 7.3 4.6 4.7 7.2 11.1 7.1 17.7v-0.2z m0 0" p-id="5694" fill="#65BEE0"></path></svg>

src/views/vi/testProject/evaluate/icon/timer.svg

@@ -0,0 +1 @@
+<svg t="1770776752245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8863" width="200" height="200"><path d="M512 917.504c-223.6416 0-405.504-181.8624-405.504-405.504S288.3584 106.496 512 106.496s405.504 181.8624 405.504 405.504-181.8624 405.504-405.504 405.504z m0-765.952c-198.656 0-360.448 161.792-360.448 360.448s161.792 360.448 360.448 360.448 360.448-161.792 360.448-360.448S710.656 151.552 512 151.552z" fill="#1296db" p-id="8864"></path><path d="M512 512c-12.4928 0-22.528-10.0352-22.528-22.528V250.88c0-12.4928 10.0352-22.528 22.528-22.528s22.528 10.0352 22.528 22.528V489.472c0 12.4928-10.0352 22.528-22.528 22.528z" fill="#1296db" p-id="8865"></path><path d="M493.3632 477.5936c6.9632-10.24 21.0944-12.9024 31.3344-5.9392l144.5888 98.9184c10.24 6.9632 12.9024 21.0944 5.9392 31.3344s-21.0944 12.9024-31.3344 5.9392l-144.5888-98.9184c-10.24-6.9632-12.9024-20.8896-5.9392-31.3344z" fill="#65BEE0" p-id="8866"></path></svg>

src/views/vi/testProject/evaluate/index.vue

@@ -15,6 +15,16 @@
         <div class="schemaList">
           <el-card class="category-card" v-for="item in schemaList"  :class="{ activeItem: activeSchema === item.schemeId }" @click="clickSchema(item)">
             <div class="name">{{ item.schemeName }}</div>
+            <div class="icon-container">
+              <div class="icon-item">
+                <div class="icon-box"><img :src="timerSvg" width="16" height="16" title="响应时间">：{{ item.responseTime }}</div>
+                <div class="icon-box"><img :src="scoreSvg" width="16" height="16" title="响应时间得分" />：{{ item.responseTimeScore }}</div>
+              </div>
+              <div class="icon-item">
+                <div class="icon-box"><img :src="rateSvg" width="16" height="16" title="成功率" /> ：{{ item.successRate }}</div>
+                <div class="icon-box"><img :src="scoreSvg" width="16" height="16" title="成功率得分" /> ：{{ item.successRateScore }}</div>
+              </div>
+            </div>
           </el-card>
         </div>
       </div>
@@ -27,7 +37,11 @@
               <el-tag :type="statusType[row.status] || 'info'">{{ statusTypeContext[row.status] }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="videoPath" label="视频路径" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="videoPath" label="视频路径" show-overflow-tooltip>
+            <template #default="{ row }">
+              <el-text class="mx-1" type="primary" @click="openVideoDialog(row)">播放视频</el-text>
+            </template>
+          </el-table-column>
           <el-table-column prop="itemResponseTime" label="响应时间" />
           <el-table-column prop="failureReason" label="失败原因"></el-table-column>
           <el-table-column prop="executionDetail" label="执行详情" />
@@ -35,12 +49,19 @@
       </div>
     </div>
   
+  <el-dialog v-model="centerDialogVisible" title="播放视频" width="800" center>
+    <Video :src="videoSrc" />
+  </el-dialog>
   </div>
 </template>
 <script setup>
 import { onMounted } from 'vue';
 import Info from './info.vue';
 import { getValuationProject } from '@/api/vi/project'
+import Video from '@/components/Video/index.vue'
+import scoreSvg from './icon/score.svg'
+import rateSvg from './icon/rate.svg'
+import timerSvg from './icon/timer.svg'
 
 const route = useRoute();
 
@@ -81,6 +102,13 @@ const statusTypeContext = {
   3: '评估失败'
 }
 
+const centerDialogVisible = ref(false)
+const videoSrc = ref('')
+const openVideoDialog = (row) => {
+  videoSrc.value = row.videoPath
+  centerDialogVisible.value = true
+}
+
 onMounted(() => {
   getListScheme()
 })
@@ -139,6 +167,32 @@ onMounted(() => {
           border-radius: 8px;
           margin-bottom: 12px;
 
+          :deep(.el-card__body) {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+          
+
+          .icon-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-direction: column;
+
+            .icon-item {
+              display: flex;
+              align-items: center;
+              width: 100%;
+              cursor: pointer;
+
+              .icon-box {
+                width: 74px;
+                display: flex;
+                align-items: center;
+              }
+            }
+          }
         }
 
         .activeItem {