fuliqi
2024-04-19 fed41b2fd390ae729c05f63fcbc9f5e93cfd8f71
src/views/system/threshold/index.vue
@@ -18,25 +18,40 @@
      <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">
        <template slot-scope="scope">
          <div v-for="item in JSON.parse(scope.row.indicator)" :key="item" style="display: flex;flex-direction: row">
            <div style="width: 120px;text-align: right">{{ item.label }}</div>
            <div style="width: 60px;text-align: right">{{ item.value}}</div>
          <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 v-for="item in JSON.parse(scope.row.indicator)" :key="item" style="display: flex;flex-direction: row">
            <div style="width: 120px;text-align: right">{{ item.label }}</div>
            <div style="width: 60px;text-align: right">{{ item.value2}}</div>
          <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>
@@ -46,8 +61,8 @@
            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-->
@@ -70,36 +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-half-width" v-model="indicator.value" placeholder="工单阈值"/>
          <el-input style="float: right;" class="el-input-half-width" v-model="indicator.value2" placeholder="下发阈值"/>
      </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 {
@@ -121,7 +187,8 @@
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      videoOpen: false,
      faceOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
@@ -129,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' }
        ],
      }
    }
  },
@@ -145,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
@@ -155,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() {
@@ -171,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() {
@@ -196,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 = '修改运维阈值'
      })
    },
@@ -276,7 +458,7 @@
            value: null
          }
        ]
      } else if (this.form.monitorType === '2') {
      } else if (this.form.monitorType === 'car') {
        this.indicators = [
          {
            label: '过车数据量',
@@ -311,24 +493,20 @@
            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
          }
        ]
      }
    }
@@ -339,4 +517,12 @@
.el-input-half-width {
  width: calc(50% - 6px); /* 减去一些间隔 */
}
.table-row {
  display: flex;
  flex-direction: row;
}
.table-row-item {
  width: 120px;
  text-align: center;
}
</style>