From d387848d15a40fb16c8a6eefb007d5f7411c5dbc Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期日, 28 四月 2024 13:32:27 +0800
Subject: [PATCH] fix:修改图片浏览组件
---
src/views/system/threshold/index.vue | 325 +++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 263 insertions(+), 62 deletions(-)
diff --git a/src/views/system/threshold/index.vue b/src/views/system/threshold/index.vue
index a334492..3a2d583 100644
--- a/src/views/system/threshold/index.vue
+++ b/src/views/system/threshold/index.vue
@@ -1,33 +1,57 @@
<template>
<div class="app-container">
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button
- type="primary"
- plain
- icon="el-icon-plus"
- size="mini"
- @click="handleAdd"
- v-hasPermi="['ycl:threshold:add']"
- >鏂板
- </el-button>
- </el-col>
- </el-row>
+<!-- <el-row :gutter="10" class="mb8">-->
+<!-- <el-col :span="1.5">-->
+<!-- <el-button-->
+<!-- type="primary"-->
+<!-- plain-->
+<!-- icon="el-icon-plus"-->
+<!-- size="mini"-->
+<!-- @click="handleAdd"-->
+<!-- v-hasPermi="['ycl:threshold:add']"-->
+<!-- >鏂板-->
+<!-- </el-button>-->
+<!-- </el-col>-->
+<!-- </el-row>-->
<el-table v-loading="loading" :data="thresholdList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="璁惧绫诲瀷" align="center" prop="monitorType">
<template slot-scope="scope">
- <span v-show="scope.row['monitorType'] === '1'">浜鸿劯</span>
- <span v-show="scope.row['monitorType'] === '2'">杞﹁締</span>
- <span v-show="scope.row['monitorType'] === '3'">瑙嗛</span>
+ <span v-show="scope.row['monitorType'] === 'face'">浜鸿劯</span>
+ <span v-show="scope.row['monitorType'] === 'car'">杞﹁締</span>
+ <span v-show="scope.row['monitorType'] === 'video'">瑙嗛</span>
</template>
</el-table-column>
- <el-table-column label="瓒呮椂澶╂暟" align="center" prop="timeout"/>
- <el-table-column label="鎸囨爣" align="center" prop="indicator">
+ <el-table-column label="宸ュ崟闃堝��" align="center" prop="indicator">
<template slot-scope="scope">
- <div v-for="item in JSON.parse(scope.row.indicator)" :key="item">
- {{ item.label }}锛歿{ item.value }}
+ <div class="table-row" style="display: flex;flex-direction: row">
+ <div class="table-row-item">鍥惧儚璐ㄩ噺</div>
+ <div class="table-row-item">{{ scope.row.imageQuality }}</div>
+ </div>
+ <div class="table-row" style="display: flex;flex-direction: row">
+ <div class="table-row-item">瑙嗛璐ㄩ噺</div>
+ <div class="table-row-item">{{ scope.row.videoQuality }}</div>
+ </div>
+ <div class="table-row" style="display: flex;flex-direction: row">
+ <div class="table-row-item">鏍囨敞鍑嗙‘鐜�</div>
+ <div class="table-row-item">{{ scope.row.annotationAccuracy }}</div>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="涓嬪彂闃堝��" align="center" prop="indicator">
+ <template slot-scope="scope">
+ <div class="table-row" style="display: flex;flex-direction: row">
+ <div class="table-row-item">鍥惧儚璐ㄩ噺</div>
+ <div class="table-row-item">{{ scope.row.imageQualityAuto }}</div>
+ </div>
+ <div class="table-row" style="display: flex;flex-direction: row">
+ <div class="table-row-item">瑙嗛璐ㄩ噺</div>
+ <div class="table-row-item">{{ scope.row.videoQualityAuto }}</div>
+ </div>
+ <div class="table-row" style="display: flex;flex-direction: row">
+ <div class="table-row-item">鏍囨敞鍑嗙‘鐜�</div>
+ <div class="table-row-item">{{ scope.row.annotationAccuracyAuto }}</div>
</div>
</template>
</el-table-column>
@@ -37,18 +61,18 @@
size="mini"
type="text"
icon="el-icon-edit"
- @click="handleUpdate(scope.row)"
v-hasPermi="['ycl:threshold:edit']"
+ @click="updateWho(scope.row)"
>淇敼
</el-button>
- <el-button
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleDelete(scope.row)"
- v-hasPermi="['ycl:threshold:remove']"
- >鍒犻櫎
- </el-button>
+<!-- <el-button-->
+<!-- size="mini"-->
+<!-- type="text"-->
+<!-- icon="el-icon-delete"-->
+<!-- @click="handleDelete(scope.row)"-->
+<!-- v-hasPermi="['ycl:threshold:remove']"-->
+<!-- >鍒犻櫎-->
+<!-- </el-button>-->
</template>
</el-table-column>
</el-table>
@@ -61,35 +85,87 @@
@pagination="getList"
/>
- <!-- 娣诲姞鎴栦慨鏀硅繍缁撮槇鍊煎璇濇 -->
- <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+ <!-- 浜鸿劯闃堝�� -->
+ <el-dialog title="淇敼浜鸿劯宸ュ崟闃堝��" :visible.sync="faceOpen" width="400px" append-to-body>
+ <el-form ref="faceForm" :model="faceForm" :rules="rules" label-width="150px">
<el-form-item label="璁惧绫诲瀷" prop="monitorType">
- <el-select v-model="form.monitorType" placeholder="璇烽�夋嫨璁惧绫诲瀷" @change="handleModeNameChange">
- <el-option label="浜鸿劯" value="1"/>
- <el-option label="杞﹁締" value="2"/>
- <el-option label="瑙嗛" value="3"/>
+ <el-select v-model="faceForm.monitorType" placeholder="璇烽�夋嫨璁惧绫诲瀷" @change="handleModeNameChange">
+ <el-option label="浜鸿劯" value="face"/>
+ <el-option label="杞﹁締" value="car"/>
+ <el-option label="瑙嗛" value="video"/>
</el-select>
</el-form-item>
- <el-form-item label="瓒呮椂澶╂暟" prop="timeout" label-width="150px">
- <el-input type="number" min="0" max="1000" v-model="form.timeout" placeholder="璇疯緭鍏ヨ秴鏃跺ぉ鏁�"/>
- </el-form-item>
- <el-form-item :label="indicator.label" prop="indexOneValue" v-for="indicator in indicators" label-width="150px">
- <el-input class="el-input-width" v-model="indicator.value" :placeholder="'璇疯緭鍏�' + indicator.label"/>
+
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" @click="editFace">纭� 瀹�</el-button>
+ <el-button @click="cancelFace">鍙� 娑�</el-button>
+ </div>
+ </el-dialog>
+
+ <!-- 杞﹁締闃堝�� -->
+ <el-dialog title="淇敼杞﹁締宸ュ崟闃堝��" :visible.sync="faceOpen" width="400px" append-to-body>
+ <el-form ref="faceForm" :model="faceForm" :rules="rules" label-width="150px">
+ <el-form-item label="璁惧绫诲瀷" prop="monitorType">
+ <el-select v-model="faceForm.monitorType" placeholder="璇烽�夋嫨璁惧绫诲瀷" @change="handleModeNameChange">
+ <el-option label="浜鸿劯" value="face"/>
+ <el-option label="杞﹁締" value="car"/>
+ <el-option label="瑙嗛" value="video"/>
+ </el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
- <el-button @click="cancel">鍙� 娑�</el-button>
+ <el-button type="primary" @click="editCar">纭� 瀹�</el-button>
+ <el-button @click="cancelCar">鍙� 娑�</el-button>
</div>
</el-dialog>
+
+ <!-- 瑙嗛闃堝�� -->
+ <el-dialog title="淇敼瑙嗛宸ュ崟闃堝��" :visible.sync="videoOpen" width="500px" append-to-body>
+ <el-form ref="videoForm" :model="videoForm" :rules="rules" label-width="100px">
+ <el-form-item label="璁惧绫诲瀷" prop="monitorType">
+ <el-select v-model="videoForm.monitorType" disabled placeholder="璇烽�夋嫨璁惧绫诲瀷" @change="handleModeNameChange">
+ <el-option label="浜鸿劯" value="face"/>
+ <el-option label="杞﹁締" value="car"/>
+ <el-option label="瑙嗛" value="video"/>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍥惧儚璐ㄩ噺" prop="imageQuality" label-width="100px">
+ <el-select v-model="videoForm.imageQuality" placeholder="宸ュ崟闃堝��" @change="handleModeNameChange">
+ <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.image_qualify"/>
+ </el-select>
+ <el-select v-model="videoForm.imageQualityAuto" placeholder="涓嬪彂闃堝��" @change="handleModeNameChange">
+ <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.image_qualify"/>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="瑙嗛璐ㄩ噺" prop="videoQuality" label-width="100px">
+ <el-select v-model="videoForm.videoQuality" placeholder="宸ュ崟闃堝��" @change="handleModeNameChange">
+ <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.video_qualify"/>
+ </el-select>
+ <el-select v-model="videoForm.videoQualityAuto" placeholder="涓嬪彂闃堝��" @change="handleModeNameChange">
+ <el-option :key="dict.value" :label="dict.value" v-for="dict in dict.type.video_qualify"/>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏍囨敞鍑嗙‘鐜�" prop="annotationAccuracy" label-width="100px">
+ <el-input v-model="videoForm.annotationAccuracy" type="number" size="small" placeholder="宸ュ崟闃堝��"></el-input>
+ <el-input v-model="videoForm.annotationAccuracy" type="number" size="small" placeholder="涓嬪彂闃堝��"></el-input>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" @click="editVideo">纭� 瀹�</el-button>
+ <el-button @click="cancelVideo">鍙� 娑�</el-button>
+ </div>
+ </el-dialog>
+
</div>
</template>
<script>
-import { listThreshold, getThreshold, delThreshold, addThreshold, updateThreshold } from '@/api/platform/threshold'
+import { listThreshold, getThreshold, editVideo } from '@/api/platform/threshold'
+import { editCar, editFace, getCar, getFace, getVideo } from '../../../api/platform/threshold'
export default {
+ dicts: ['image_qualify', 'video_qualify'],
name: 'Threshold',
data() {
return {
@@ -111,7 +187,8 @@
// 寮瑰嚭灞傛爣棰�
title: '',
// 鏄惁鏄剧ず寮瑰嚭灞�
- open: false,
+ videoOpen: false,
+ faceOpen: false,
// 鏌ヨ鍙傛暟
queryParams: {
pageNum: 1,
@@ -119,15 +196,23 @@
monitorType: null
},
// 琛ㄥ崟鍙傛暟
- form: {},
+ videoForm: {},
+ carForm: {},
+ faceForm: {},
// 琛ㄥ崟鏍￠獙
rules: {
monitorType: [
{ required: true, message: '璁惧绫诲瀷锛�1浜鸿劯 2杞﹁締 3瑙嗛涓嶈兘涓虹┖', trigger: 'change' }
],
- timeout: [
- { required: true, message: '瓒呮椂澶╂暟涓嶈兘涓虹┖', trigger: 'blur' }
- ]
+ videoQuality: [
+ { required: true, message: '璇烽�夋嫨瑙嗛璐ㄩ噺闃堝��', trigger: 'change' }
+ ],
+ imageQuality: [
+ { required: true, message: '璇烽�夋嫨鍥惧儚璐ㄩ噺闃堝��', trigger: 'change' }
+ ],
+ annotationAccuracy: [
+ { required: true, message: '璇峰～鍐欐爣娉ㄥ噯纭巼闃堝��', trigger: 'blur' }
+ ],
}
}
},
@@ -135,6 +220,48 @@
this.getList()
},
methods: {
+ editVideo() {
+ this.$refs['videoForm'].validate(validate => {
+ if (validate) {
+ editVideo(this.videoForm).then(res => {
+ if (res.code === 200) {
+ this.$message.success("淇敼鎴愬姛")
+ this.getList();
+ } else {
+ this.$message.success("淇敼澶辫触")
+ }
+ })
+ }
+ })
+ },
+ editFace() {
+ this.$refs['faceForm'].validate(validate => {
+ if (validate) {
+ editFace(this.videoForm).then(res => {
+ if (res.code === 200) {
+ this.$message.success("淇敼鎴愬姛")
+ this.getList();
+ } else {
+ this.$message.success("淇敼澶辫触")
+ }
+ })
+ }
+ })
+ },
+ editCar() {
+ this.$refs['carForm'].validate(validate => {
+ if (validate) {
+ editCar(this.carForm).then(res => {
+ if (res.code === 200) {
+ this.$message.success("淇敼鎴愬姛")
+ this.getList();
+ } else {
+ this.$message.success("淇敼澶辫触")
+ }
+ })
+ }
+ })
+ },
/** 鏌ヨ杩愮淮闃堝�煎垪琛� */
getList() {
this.loading = true
@@ -145,9 +272,17 @@
})
},
// 鍙栨秷鎸夐挳
- cancel() {
- this.open = false
- this.reset()
+ cancelFace() {
+ this.faceOpen = false
+ this.resetFace()
+ },
+ cancelCar() {
+ this.carOpen = false
+ this.resetCar()
+ },
+ cancelVideo() {
+ this.videoOpen = false
+ this.resetVideo()
},
// 琛ㄥ崟閲嶇疆
reset() {
@@ -161,6 +296,45 @@
deleted: null
}
this.resetForm('form')
+ },
+ resetVideo() {
+ this.videoForm = {
+ id: null,
+ monitorType: "",
+ imageQuality: "",
+ imageQualityAuto: "",
+ videoQuality: "",
+ videoQualityAuto: "",
+ annotationAccuracy: null,
+ annotationAccuracyAuto: null,
+ }
+ this.resetForm('videoForm')
+ },
+ resetFace() {
+ this.faceForm = {
+ id: null,
+ monitorType: "",
+ imageQuality: "",
+ imageQualityAuto: "",
+ videoQuality: "",
+ videoQualityAuto: "",
+ annotationAccuracy: null,
+ annotationAccuracyAuto: null,
+ }
+ this.resetForm('faceForm')
+ },
+ resetCar() {
+ this.carForm = {
+ id: null,
+ monitorType: "",
+ imageQuality: "",
+ imageQualityAuto: "",
+ videoQuality: "",
+ videoQualityAuto: "",
+ annotationAccuracy: null,
+ annotationAccuracyAuto: null,
+ }
+ this.resetForm('carForm')
},
/** 鎼滅储鎸夐挳鎿嶄綔 */
handleQuery() {
@@ -186,13 +360,31 @@
this.handleModeNameChange()
},
/** 淇敼鎸夐挳鎿嶄綔 */
+ updateWho(row) {
+ if (row.monitorType === 'face') {
+ getFace(row.id).then(response => {
+ this.faceForm = response.data
+ this.faceOpen = true;
+ })
+ } else if (row.monitorType === 'car') {
+ getCar(row.id).then(response => {
+ this.carForm = response.data
+ this.carOpen = true;
+ })
+ } else {
+ getVideo(row.id).then(response => {
+ this.videoForm = response.data
+ this.videoOpen = true;
+ })
+ }
+ },
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getThreshold(id).then(response => {
this.form = response.data
this.indicators = JSON.parse(this.form.indicator)
- this.open = true
+ this.videoOpen = true
this.title = '淇敼杩愮淮闃堝��'
})
},
@@ -266,7 +458,7 @@
value: null
}
]
- } else if (this.form.monitorType === '2') {
+ } else if (this.form.monitorType === 'car') {
this.indicators = [
{
label: '杩囪溅鏁版嵁閲�',
@@ -301,27 +493,36 @@
value: null
}
]
- } else if (this.form.monitorType === '3') {
+ } else if (this.form.monitorType === 'video') {
this.indicators = [
{
- label: '閲囬泦璁惧鎬绘暟',
+ label: '褰曞儚璐ㄩ噺',
value: null
},
{
- label: '鐩戞祴姝ｅ父璁惧鏁�',
+ label: '鏍囨敞鍑嗙‘鐜�',
value: null
},
{
- label: '缂栫爜寮傚父璁惧鏁�',
+ label: '鍥惧儚璐ㄩ噺',
value: null
},
- {
- label: '缁忕含搴﹀紓甯歌澶囨暟',
- value: null
- }
]
}
}
}
}
</script>
+<style>
+.el-input-half-width {
+ width: calc(50% - 6px); /* 鍑忓幓涓�浜涢棿闅� */
+}
+.table-row {
+ display: flex;
+ flex-direction: row;
+}
+.table-row-item {
+ width: 120px;
+ text-align: center;
+}
+</style>
--
Gitblit v1.8.0