fix:修改图片浏览组件

ZhangXianQiang

2024-04-28 d387848d15a40fb16c8a6eefb007d5f7411c5dbc

 src/views/system/threshold/index.vue

@@ -1,58 +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-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['ycl:threshold:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['ycl:threshold:remove']"
        >删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </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>
@@ -62,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>
@@ -86,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 {
@@ -136,7 +187,8 @@
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      videoOpen: false,
      faceOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
@@ -144,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' }
        ],
      }
    }
  },
@@ -160,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
@@ -170,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() {
@@ -186,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() {
@@ -211,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 = '修改运维阈值'
      })
    },
@@ -291,7 +458,7 @@
            value: null
          }
        ]
      } else if (this.form.monitorType === '2') {
      } else if (this.form.monitorType === 'car') {
        this.indicators = [
          {
            label: '过车数据量',
@@ -326,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>