<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>
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
|
<el-card style="margin-bottom: 20px; height: 450px; margin-right: 20px">
|
<div style="display: flex; justify-content: space-between">
|
<div class="header—text">视频</div>
|
<div>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
v-hasPermi="['ycl:threshold:edit']"
|
@click="showEdit('video')"
|
v-if="!ifEditVideo"
|
>修改
|
</el-button>
|
<el-button
|
size="mini"
|
type="primary"
|
@click="saveEdit('video')"
|
v-if="ifEditVideo"
|
>保存
|
</el-button>
|
</div>
|
</div>
|
<div
|
style="
|
margin: 20px;
|
display: flex;
|
width: 400px;
|
justify-content: space-between;
|
"
|
>
|
<div>
|
<div
|
style="
|
font-size: small;
|
display: flex;
|
flex-direction: row-reverse;
|
width: 192px;
|
"
|
>
|
工单阈值
|
</div>
|
<div>
|
<el-form label-width="140px">
|
<el-form-item
|
v-for="(item, index) in thresholdList.video"
|
:label="item.name + '：'"
|
:key="item.id"
|
>
|
<el-input
|
v-model="videoList[index].value"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditVideo"
|
></el-input>
|
<span v-else>{{ item.value }}</span>
|
<span v-if="item.countType=='percent'">%</span>
|
<span v-if="item.countType=='second'">秒</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div>
|
<span style="font-size: small">下发阈值</span>
|
<div>
|
<el-form ref="form">
|
<el-form-item
|
v-for="(item, index) in thresholdList.video"
|
label=""
|
:key="item.id"
|
>
|
<el-input
|
v-model="videoList[index].valueAuto"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditVideo"
|
></el-input>
|
<span v-else>{{ item.valueAuto }}</span>
|
<span v-if="item.countType=='percent'">%</span>
|
<span v-if="item.countType=='second'">秒</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
|
<el-card style="margin-bottom: 20px; height: 450px; margin-right: 20px">
|
<div style="display: flex; justify-content: space-between">
|
<div class="header—text">人脸</div>
|
<div>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
v-hasPermi="['ycl:threshold:edit']"
|
@click="showEdit('face')"
|
v-if="!ifEditFace"
|
>修改
|
</el-button>
|
<el-button
|
size="mini"
|
type="primary"
|
@click="saveEdit('face')"
|
v-if="ifEditFace"
|
>保存
|
</el-button>
|
</div>
|
</div>
|
<div
|
style="
|
margin: 20px;
|
display: flex;
|
width: 400px;
|
justify-content: space-between;
|
"
|
>
|
<div>
|
<div
|
style="
|
font-size: small;
|
display: flex;
|
flex-direction: row-reverse;
|
width: 190px;
|
"
|
>
|
工单阈值
|
</div>
|
<div>
|
<el-form label-width="140px">
|
<el-form-item
|
v-for="(item, index) in thresholdList.face"
|
:label="item.name + '：'"
|
:key="item.id"
|
>
|
<el-input
|
v-model="faceList[index].value"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditFace"
|
></el-input>
|
<span v-else>{{ item.value }}</span>
|
<span v-if="item.countType=='percent'">%</span>
|
<span v-if="item.countType=='second'">秒</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div>
|
<span style="font-size: small">下发阈值</span>
|
<div>
|
<el-form ref="form">
|
<el-form-item
|
v-for="(item, index) in thresholdList.face"
|
label=""
|
:key="item.id"
|
>
|
<el-input
|
v-model="faceList[index].valueAuto"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditFace"
|
></el-input>
|
<span v-else>{{ item.valueAuto }}</span>
|
<span v-if="item.countType=='percent'">%</span>
|
<span v-if="item.countType=='second'">秒</span>
|
</el-form-item
|
>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</el-card></el-col
|
>
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
|
<el-card style="margin-bottom: 20px; height: 450px; margin-right: 20px">
|
<div style="display: flex; justify-content: space-between">
|
<div class="header—text">车辆</div>
|
<div>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
v-hasPermi="['ycl:threshold:edit']"
|
@click="showEdit('car')"
|
v-if="!ifEditCar"
|
>修改
|
</el-button>
|
<el-button
|
size="mini"
|
type="primary"
|
@click="saveEdit('car')"
|
v-if="ifEditCar"
|
>保存
|
</el-button>
|
</div>
|
</div>
|
<div
|
style="
|
margin: 20px;
|
display: flex;
|
width: 400px;
|
justify-content: space-between;
|
"
|
>
|
<div>
|
<div
|
style="
|
font-size: small;
|
display: flex;
|
flex-direction: row-reverse;
|
width: 232px;
|
"
|
>
|
工单阈值
|
</div>
|
<div>
|
<el-form ref="form" label-width="180px">
|
<el-form-item
|
v-for="(item, index) in thresholdList.car"
|
:label="item.name + '：'"
|
:key="item.id"
|
>
|
<el-input
|
v-model="carList[index].value"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditCar"
|
></el-input>
|
<span v-else>{{ item.value }}</span>
|
<span v-if="item.countType=='percent'">%</span>
|
<span v-if="item.countType=='second'">秒</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div>
|
<span style="font-size: small">下发阈值</span>
|
<div>
|
<el-form ref="form">
|
<el-form-item
|
v-for="(item, index) in thresholdList.car"
|
label=""
|
:key="item.id"
|
>
|
<el-input
|
v-model="carList[index].valueAuto"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditCar"
|
></el-input>
|
<span v-else>{{ item.valueAuto }}</span>
|
<span v-if="item.countType=='percent'">%</span>
|
<span v-if="item.countType=='second'">秒</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</el-card></el-col
|
>
|
</el-row>
|
|
<!-- 人脸阈值 -->
|
<el-dialog
|
title="修改人脸工单阈值"
|
:visible.sync="faceOpen"
|
width="700px"
|
append-to-body
|
>
|
<el-form
|
ref="faceForm"
|
:model="faceForm"
|
label-width="150px"
|
:inline="true"
|
>
|
<el-form-item class="fixedWidth" label="抓拍量" prop="captureNum">
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.captureNum"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.captureNumAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item class="fixedWidth" label="过车缺失率" prop="timelyRate">
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.timelyRate"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.timelyRateAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item class="fixedWidth" label="延迟量" prop="delayAmount">
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.delayAmount"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.delayAmountAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="fixedWidth"
|
label="设备活跃率"
|
prop="deviceActiveRate"
|
>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.deviceActiveRate"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.deviceActiveRateAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="fixedWidth"
|
label="抓拍及时率"
|
prop="timelyCapture"
|
>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.timelyCapture"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.timelyCaptureAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="fixedWidth"
|
label="时钟准确率"
|
prop="deviceActiveRate"
|
>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.timeAccuracy"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="faceForm.timeAccuracyAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
</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="carOpen"
|
width="700px"
|
append-to-body
|
>
|
<el-form
|
ref="faceForm"
|
:model="faceForm"
|
label-width="150px"
|
:inline="true"
|
>
|
<el-form-item class="fixedWidth" label="过车数据量" prop="passCarNum">
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.passCarNum"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.passCarNumAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="fixedWidth"
|
label="过车缺失率"
|
prop="passCarMissRate"
|
>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.passCarMissRate"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.passCarMissRateAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="fixedWidth"
|
label="有效过车数据量"
|
prop="passCarEffectiveNum"
|
>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.passCarEffectiveNum"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.passCarEffectiveNumAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="fixedWidth"
|
label="设备活跃率"
|
prop="deviceActiveRate"
|
>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.deviceActiveRate"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.deviceActiveRateAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="fixedWidth"
|
label="抓拍及时率"
|
prop="timelyCapture"
|
>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.timelyCapture"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.timelyCaptureAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
<el-form-item class="fixedWidth" label="时钟准确率" prop="timeAccuracy">
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.timeAccuracy"
|
placeholder="工单阈值"
|
/>
|
<el-input
|
clearable
|
size="small"
|
v-model="carForm.timeAccuracyAuto"
|
placeholder="下发阈值"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="editCar">确 定</el-button>
|
<el-button @click="cancelCar">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 视频阈值 -->
|
<el-dialog
|
title="修改视频工单阈值"
|
:visible.sync="videoOpen"
|
width="700px"
|
append-to-body
|
>
|
<el-form
|
ref="videoForm"
|
:model="videoForm"
|
label-width="100px"
|
:inline="true"
|
>
|
<el-form-item
|
class="fixedWidth"
|
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
|
class="fixedWidth"
|
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
|
class="fixedWidth"
|
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,
|
updateThreshold,
|
} 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 {
|
ifEditVideo: false,
|
ifEditFace: false,
|
ifEditCar: false,
|
indicators: [],
|
// 遮罩层
|
loading: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 运维阈值表格数据
|
thresholdList: {},
|
videoList: [],
|
faceList: [],
|
carList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
videoOpen: false,
|
faceOpen: false,
|
carOpen: false,
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
monitorType: null,
|
},
|
// 表单参数
|
videoForm: {},
|
carForm: {},
|
faceForm: {},
|
// 表单校验
|
faceRules: {
|
monitorType: [
|
{ required: true, message: "设备类型不能为空", trigger: "change" },
|
],
|
captureNum: [
|
{ required: true, message: "请填写抓拍量", trigger: "blur" },
|
],
|
timelyRate: [
|
{ required: true, message: "请填写及时率", trigger: "blur" },
|
],
|
delayAmount: [
|
{ required: true, message: "请填写延迟量", trigger: "blur" },
|
],
|
deviceActiveRate: [
|
{ required: true, message: "请填写设备活跃率", trigger: "blur" },
|
],
|
timeAccuracy: [
|
{ required: true, message: "请填写时钟准确率", trigger: "blur" },
|
],
|
timelyCapture: [
|
{ required: true, message: "请填写抓拍及时率", trigger: "blur" },
|
],
|
},
|
carRules: {
|
monitorType: [
|
{ required: true, message: "设备类型不能为空", trigger: "change" },
|
],
|
passCarNum: [
|
{ required: true, message: "请填写过车数据量", trigger: "blur" },
|
],
|
passCarMissRate: [
|
{ required: true, message: "请填写过车缺失率", trigger: "blur" },
|
],
|
passCarEffectiveNum: [
|
{ required: true, message: "请填写有效过车数据量", trigger: "blur" },
|
],
|
timelyCapture: [
|
{ required: true, message: "请填写抓拍及时率", trigger: "blur" },
|
],
|
deviceActiveRate: [
|
{ required: true, message: "请填写设备活跃率", trigger: "blur" },
|
],
|
timeAccuracy: [
|
{ required: true, message: "请填写时钟准确率", trigger: "blur" },
|
],
|
},
|
rules: {
|
monitorType: [
|
{
|
required: true,
|
message: "设备类型：1人脸 2车辆 3视频不能为空",
|
trigger: "change",
|
},
|
],
|
videoQuality: [
|
{ required: true, message: "请选择视频质量阈值", trigger: "change" },
|
],
|
imageQuality: [
|
{ required: true, message: "请选择图像质量阈值", trigger: "change" },
|
],
|
annotationAccuracy: [
|
{ required: true, message: "请填写标注准确率阈值", trigger: "blur" },
|
],
|
},
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
showEdit(value) {
|
if (value == "video") {
|
this.videoList = JSON.parse(JSON.stringify(this.thresholdList.video));
|
this.ifEditVideo = true;
|
}
|
if (value == "face") {
|
this.faceList = JSON.parse(JSON.stringify(this.thresholdList.face));
|
this.ifEditFace = true;
|
}
|
if (value == "car") {
|
this.carList = JSON.parse(JSON.stringify(this.thresholdList.car));
|
this.ifEditCar = true;
|
}
|
},
|
saveEdit(value) {
|
let data = []
|
if (value == "video") {
|
data = this.videoList;
|
this.ifEditVideo = false;
|
}
|
if (value == "face") {
|
data = this.faceList;
|
this.ifEditFace = false;
|
}
|
if (value == "car") {
|
data = this.carList;
|
this.ifEditCar = false;
|
}
|
updateThreshold(data).then((response) => {
|
this.$modal.msgSuccess("修改成功");
|
this.getList();
|
});
|
},
|
showContent(row) {
|
if (row.monitorType === "car") {
|
}
|
},
|
editVideo() {
|
// this.$refs['videoForm'].validate(validate => {
|
// if (validate) {
|
editVideo(this.videoForm).then((res) => {
|
if (res.code === 200) {
|
this.$message.success("修改成功");
|
this.videoOpen = false;
|
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.faceOpen = false;
|
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.carOpen = false;
|
this.getList();
|
} else {
|
this.$message.success("修改失败");
|
}
|
// })
|
// }
|
});
|
},
|
/** 查询运维阈值列表 */
|
getList() {
|
this.loading = true;
|
listThreshold(this.queryParams).then((response) => {
|
this.thresholdList = response.data;
|
this.videoList = JSON.parse(JSON.stringify(this.thresholdList.video));
|
this.faceList = JSON.parse(JSON.stringify(this.thresholdList.face));
|
this.carList = JSON.parse(JSON.stringify(this.thresholdList.car));
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
// 取消按钮
|
cancelFace() {
|
this.faceOpen = false;
|
this.resetFace();
|
},
|
cancelCar() {
|
this.carOpen = false;
|
this.resetCar();
|
},
|
cancelVideo() {
|
this.videoOpen = false;
|
this.resetVideo();
|
},
|
// 表单重置
|
reset() {
|
this.form = {
|
id: null,
|
monitorType: null,
|
timeout: null,
|
indicator: null,
|
createTime: null,
|
updateTime: null,
|
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() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map((item) => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.reset();
|
this.open = true;
|
this.title = "添加运维阈值";
|
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.videoOpen = true;
|
this.title = "修改运维阈值";
|
});
|
},
|
/** 提交按钮 */
|
submitForm() {
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
// 将indicators转为json赋值到form
|
this.form.indicator = JSON.stringify(this.indicators);
|
if (this.form.id != null) {
|
updateThreshold(this.form).then((response) => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.getList();
|
});
|
} else {
|
addThreshold(this.form).then((response) => {
|
this.$modal.msgSuccess("新增成功");
|
this.open = false;
|
this.getList();
|
});
|
}
|
}
|
});
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
const ids = row.id || this.ids;
|
this.$modal
|
.confirm('是否确认删除运维阈值编号为"' + ids + '"的数据项？')
|
.then(function () {
|
return delThreshold(ids);
|
})
|
.then(() => {
|
this.getList();
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
},
|
/** 切换不同指标 */
|
handleModeNameChange() {
|
if (this.form.monitorType === "1" || this.form.monitorType === null) {
|
this.indicators = [
|
{
|
label: "抓拍量",
|
value: null,
|
},
|
{
|
label: "及时率",
|
value: null,
|
},
|
{
|
label: "延迟量",
|
value: null,
|
},
|
{
|
label: "抽检量",
|
value: null,
|
},
|
{
|
label: "设备活跃率",
|
value: null,
|
},
|
{
|
label: "抓拍及时率",
|
value: null,
|
},
|
{
|
label: "时钟准确率",
|
value: null,
|
},
|
{
|
label: "时钟不准确率",
|
value: null,
|
},
|
];
|
} else if (this.form.monitorType === "car") {
|
this.indicators = [
|
{
|
label: "过车数据量",
|
value: null,
|
},
|
{
|
label: "过车缺失率",
|
value: null,
|
},
|
{
|
label: "有效过车数据量",
|
value: null,
|
},
|
{
|
label: "抽检量",
|
value: null,
|
},
|
{
|
label: "设备活跃率",
|
value: null,
|
},
|
{
|
label: "抓拍及时率",
|
value: null,
|
},
|
{
|
label: "时钟准确率",
|
value: null,
|
},
|
{
|
label: "时钟不准确率",
|
value: null,
|
},
|
];
|
} else if (this.form.monitorType === "video") {
|
this.indicators = [
|
{
|
label: "录像质量",
|
value: null,
|
},
|
{
|
label: "标注准确率",
|
value: null,
|
},
|
{
|
label: "图像质量",
|
value: null,
|
},
|
];
|
}
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
::v-deep .el-input-half-width {
|
width: calc(50% - 6px); /* 减去一些间隔 */
|
}
|
::v-deep .table-row {
|
display: flex;
|
flex-direction: row;
|
}
|
::v-deep .table-row-item {
|
width: 120px;
|
text-align: center;
|
}
|
.fixedWidth {
|
width: 200px;
|
}
|
.threshold {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.header—text {
|
font-weight: bold;
|
}
|
::v-deep .el-form-item {
|
margin-bottom: 0px; /* 根据需求调整这个值 */
|
}
|
</style>
|
