| | |
| | | <el-card class="result-card" :class="{ 'selected-card': selectedItemId === item.id }" |
| | | @click.native.stop="handleCardClick(item)"> |
| | | <div class="image-wrapper"> |
| | | <div class="image-container"> |
| | | <el-image slot="error" :src="item.image_path" class="result-image" alt="检测结果" /> |
| | | <!-- <img slot="error" src="@/assets/01.png" class="result-image" alt="检测结果" /> --> |
| | | </div> |
| | | <div class="image-overlay" v-if="item.is_warning == 1"> |
| | | <span class="check-item"> |
| | | {{ item.task_names }} |
| | |
| | | <span>{{ item.video_name }}</span> |
| | | <el-dropdown size="small" trigger="click" @command="handleCommand" class="right-btn"> |
| | | <img src="@/assets/img/modelTraining.png" |
| | | style="width: 16px;height: 16px;margin-left: 10px; vertical-align: middle" @click.stop> |
| | | style="width: 16px;height: 16px;margin-left: 10px; vertical-align: middle" |
| | | @click.stop> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item |
| | | :command="{ ruleName: item.rule_names ? item.rule_names[0].fileName : '', cameraId: item.video_point_id + '', cameraName: item.video_name, imagePath: item.image_path, status: 1 }">正确</el-dropdown-item> |
| | |
| | | if (lists) { |
| | | for (let i = 0; i < lists.length; i++) { |
| | | console.log("333:" + lists[i].video_point_id) |
| | | this.results.push({ |
| | | let item = {} |
| | | item = { |
| | | task_names: lists[i].task_name, |
| | | video_name: lists[i].video_name, |
| | | image_path: "/api-img" + lists[i].image_path, |
| | | video_path: "/api-img" + lists[i].video_path, |
| | | image_path: lists[i].image_path, |
| | | video_path: lists[i].video_path, |
| | | detect_time: lists[i].detect_time, |
| | | event_levels: lists[i].event_level_name, |
| | | zh_desc_class: lists[i].zh_desc_class, |
| | |
| | | is_desc: lists[i].is_desc, |
| | | video_point_id: lists[i].video_point_id, |
| | | rule_names: lists[i].rule_names, |
| | | knowledge_documents: lists[i].knowledge_documents.map(file => { |
| | | }; |
| | | if (lists[i].knowledge_documents) { |
| | | item.knowledge_documents = lists[i].knowledge_documents.map(file => { |
| | | return { |
| | | ...file, |
| | | file_url: "/api-img" + file.file_url, |
| | | fileName: file.title |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | this.results.push(item) |
| | | } |
| | | } |
| | | |
| | |
| | | this.results = []; |
| | | if (lists) { |
| | | for (let i = 0; i < lists.length; i++) { |
| | | this.results.push({ |
| | | let item = {} |
| | | item = { |
| | | task_names: lists[i].task_name, |
| | | video_name: lists[i].video_name, |
| | | image_path: "/api-img" + lists[i].image_path, |
| | | video_path: "/api-img" + lists[i].video_path, |
| | | image_path: lists[i].image_path, |
| | | video_path: lists[i].video_path, |
| | | detect_time: lists[i].detect_time, |
| | | event_levels: lists[i].event_level_name, |
| | | zh_desc_class: lists[i].zh_desc_class, |
| | |
| | | is_desc: lists[i].is_desc, |
| | | video_point_id: lists[i].video_point_id, |
| | | rule_names: lists[i].rule_names, |
| | | knowledge_documents: lists[i].knowledge_documents.map(file => { |
| | | return { |
| | | ...file, |
| | | file_url: "/api-img" + file.file_url, |
| | | fileName: file.title |
| | | } |
| | | }), |
| | | risk_description: lists[i].risk_description, |
| | | suggestion: lists[i].suggestion |
| | | }); |
| | | }; |
| | | if (lists[i].knowledge_documents) { |
| | | item.knowledge_documents = lists[i].knowledge_documents.map(file => { |
| | | return { |
| | | ...file, |
| | | fileName: file.title |
| | | } |
| | | }) |
| | | } |
| | | this.results.push(item) |
| | | } |
| | | } |
| | | this.totalResults = response.data.pagination.total; |
| | |
| | | }, |
| | | // 新增详情展示方法 |
| | | showDetail(item) { |
| | | // console.info(item) |
| | | console.log(item) |
| | | this.backendData = item.is_warning == 1 ? true : false; |
| | | // console.info(item.is_warning) |
| | | this.currentMediaType = "image"; |
| | |
| | | overflow: visible; |
| | | border-radius: 6px 6px 0 0; |
| | | |
| | | .result-image { |
| | | .image-container { |
| | | position: relative; |
| | | width: 100%; |
| | | // height: 130px; |
| | | padding-top: 56.25%; |
| | | /* 16:9宽高比 */ |
| | | background-color: #f5f7fa; |
| | | /* 加载时的背景色 */ |
| | | } |
| | | |
| | | .result-image { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | transition: transform 0.3s; |
| | | } |
| | | |
| | | .image-overlay { |