<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: 350px; margin-right: 20px;color: #656565;">
|
<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].valueAuto"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditVideo"
|
></el-input>
|
<span v-else>{{ item.valueAuto }}</span>
|
<span class="unit" v-if="item.countType=='percent'">%</span>
|
<span class="unit" 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].value"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditVideo"
|
></el-input>
|
<span v-else>{{ item.value }}</span>
|
<span class="unit" v-if="item.countType=='percent'">%</span>
|
<span class="unit" 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: 350px; margin-right: 20px;color: #656565;">
|
<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].valueAuto"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditFace"
|
></el-input>
|
<span v-else>{{ item.valueAuto }}</span>
|
<span class="unit" v-if="item.countType=='percent'">%</span>
|
<span class="unit" 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].value"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditFace"
|
></el-input>
|
<span v-else>{{ item.value }}</span>
|
<span class="unit" v-if="item.countType=='percent'">%</span>
|
<span class="unit" 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: 350px; margin-right: 20px;color: #656565;">
|
<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: 206px;
|
"
|
>
|
工单阈值
|
</div>
|
<div>
|
<el-form ref="form" label-width="160px">
|
<el-form-item
|
v-for="(item, index) in thresholdList.car"
|
:label="item.name + '：'"
|
: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 class="unit" v-if="item.countType=='percent'">%</span>
|
<span class="unit" 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].value"
|
size="mini"
|
style="width: 100px"
|
:type="item.countType=='int'?'number':''"
|
v-if="ifEditCar"
|
></el-input>
|
<span v-else>{{ item.value }}</span>
|
<span class="unit" v-if="item.countType=='percent'">%</span>
|
<span class="unit" v-if="item.countType=='second'">秒</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</el-card></el-col
|
>
|
</el-row>
|
|
<el-row class="content-warp">
|
<div class="header—text" style="margin-bottom: 5px">工单白名单</div>
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
|
<el-form-item label="关键字" prop="keyword">
|
<el-input
|
v-model="queryParams.keyword"
|
placeholder="设备编码/点位名"
|
clearable
|
@keyup.enter.native="getWhiteList"
|
@clear="getWhiteList"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="small" @click="getWhiteList">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</el-row>
|
<el-row class="content-warp">
|
<el-button size="small" type="success" @click="whiteOpen" plain>新增</el-button>
|
<el-button size="small" type="danger" @click="bathDelete" plain>删除</el-button>
|
<el-button type="primary" plain icon="el-icon-top" v-loading="download" size="mini" @click="handleExport"
|
>导出白名单</el-button>
|
<el-popover style="margin-left: 10px" placement="bottom" trigger="hover" content="导入白名单">
|
<div class="bottom_">
|
<el-upload
|
ref="upload"
|
class="upload-demo"
|
drag
|
:action="importUrl"
|
:file-list="fileList"
|
:before-upload="beforeUpload"
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
|
</el-upload>
|
</div>
|
<div>
|
<el-button class="bottom_" type="primary" size="small" v-loading="upload" @click="handleImport"
|
>导入</el-button>
|
</div>
|
<el-button type="primary" size="small" plain icon="el-icon-bottom" slot="reference" >导入白名单</el-button>
|
</el-popover>
|
</el-row>
|
<el-row class="content-warp">
|
<el-col :span="24">
|
<el-table v-loading="loading" :data="workOrderWhiteList" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" align="center" prop="id"/>
|
<el-table-column label="设备编码" align="center" prop="serialNumber"/>
|
<el-table-column label="点位名称" align="center" prop="pointName"/>
|
<el-table-column label="故障类型" align="center" prop="errorType"/>
|
<el-table-column label="备注" align="center" prop="remark"/>
|
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleWhiteUpdate(scope.row)"
|
>修改</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:auto-scroll="false"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getWhiteList"
|
/>
|
</el-col>
|
</el-row>
|
|
<!-- 新增白名单-->
|
<el-dialog
|
:title="title"
|
:visible.sync="whiteShow"
|
width="500px"
|
:close-on-click-modal="false"
|
:before-close="whiteClose">
|
<div>
|
<el-form :model="whiteForm" label-position="top" :rules="whiteFormRules" ref="whiteForm" size="small" class="add-form">
|
<el-form-item label="点位" prop="serialNumber" >
|
<el-select
|
v-model="whiteForm.pointName"
|
filterable
|
remote
|
reserve-keyword
|
:disabled = "whiteForm.id"
|
placeholder="国标码/点位名称搜索"
|
:remote-method="remoteGetPoints"
|
@change="setPointId"
|
:loading="selectLoading"
|
style="width: 460px">
|
<el-option
|
v-for="item in pointList"
|
:key="item.id"
|
:label="item.value"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="故障类型" prop="errorTypeList">
|
<el-select v-model="whiteForm.errorTypeList" multiple>
|
<el-option v-for="dict in dict.type.error_type"
|
:value="dict.value"
|
:key="dict.value"
|
:label="dict.label"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注信息" prop="remark">
|
<el-input v-model="whiteForm.remark"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="whiteClose">取 消</el-button>
|
<el-button type="primary" @click="whiteSubmit">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
|
</template>
|
|
<script>
|
import {
|
listThreshold,
|
getThreshold,
|
updateThreshold,
|
importData,
|
editCar,
|
editFace,
|
getCar,
|
getFace,
|
getVideo,
|
getWhiteList,
|
getWhite,
|
addWhiteList,
|
bathDelete,
|
updateWhite,
|
whiteExport
|
} from "@/api/platform/threshold";
|
|
import { pointSelectData } from "@/api/platform/point";
|
export default {
|
dicts: ["image_qualify", "video_qualify", "error_type"],
|
name: "Threshold",
|
data() {
|
return {
|
download: false,
|
scrollPosition: 0, // 用于保存滚动位置
|
// 下拉加载
|
selectLoading: false,
|
ifEditVideo: false,
|
ifEditFace: false,
|
ifEditCar: false,
|
// 点位list
|
pointList: [],
|
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,
|
serialNumber: null,
|
pointName: 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"},
|
],
|
},
|
// 白名单列表
|
workOrderWhiteList: [],
|
// 新增框
|
whiteShow: false,
|
whiteForm: {
|
serialNumber: "",
|
remark: "",
|
},
|
// 新增框校验
|
whiteFormRules: {
|
serialNumber: [
|
{required: true, message: "设备不能为空", trigger: "blur"},
|
],
|
errorTypeList: [
|
{ required: true, message: "请选择故障类型", trigger: "blur" }
|
],
|
},
|
// 导入文件路径
|
importUrl: '',
|
fileList: [],
|
importFile: null,
|
upload: false,
|
};
|
},
|
created() {
|
this.getList();
|
this.getWhiteList();
|
},
|
methods: {
|
setPointId(selectedValue) {
|
const selectedItem = this.pointList.find(item => item.value === selectedValue);
|
this.whiteForm.serialNumber = selectedItem.id
|
},
|
// 远程搜索点位
|
remoteGetPoints(query) {
|
if (query !== '') {
|
this.selectLoading = true;
|
let data = {
|
"keyword": query
|
}
|
pointSelectData(data).then(res => {
|
this.pointList = res.data;
|
this.selectLoading = false;
|
})
|
} else {
|
this.pointList = [];
|
}
|
},
|
handleExport() {
|
this.download = true
|
whiteExport().then(res => {
|
// 将二进制数据转换为 Blob 对象
|
let blob = new Blob([res], { type: 'application/octet-stream' });
|
|
// 创建下载链接
|
let downloadLink = document.createElement('a');
|
downloadLink.href = URL.createObjectURL(blob);
|
downloadLink.setAttribute('download', "工单白名单清单.xlsx"); // 设置下载文件的文件名
|
downloadLink.style.display = 'none';
|
// 添加到页面并触发下载
|
document.body.appendChild(downloadLink);
|
downloadLink.click();
|
document.body.removeChild(downloadLink);
|
this.download = false
|
})
|
},
|
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;
|
});
|
},
|
getWhiteList() {
|
// 保存当前滚动位置
|
this.loading = true;
|
getWhiteList(this.queryParams).then((response) => {
|
this.workOrderWhiteList = response.data;
|
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,
|
},
|
];
|
}
|
},
|
// 打开新增框
|
whiteOpen() {
|
this.title = "新增白名单"
|
this.whiteShow = true;
|
},
|
// 关闭新增框
|
whiteClose() {
|
this.whiteShow = false;
|
this.whiteReset();
|
},
|
// 白名单框提交
|
whiteSubmit() {
|
this.$refs["whiteForm"].validate((valid) => {
|
if (valid) {
|
if (this.whiteForm.id != null) {
|
updateWhite(this.whiteForm).then((response) => {
|
this.$modal.msgSuccess("修改成功");
|
this.whiteShow = false;
|
this.getWhiteList();
|
this.whiteReset();
|
});
|
} else {
|
addWhiteList(this.whiteForm).then((response) => {
|
this.$modal.msgSuccess("新增成功");
|
this.whiteShow = false;
|
this.getWhiteList();
|
this.whiteReset();
|
});
|
}
|
}
|
});
|
},
|
// 新增框重置
|
whiteReset() {
|
this.whiteForm = {
|
serialNumber: "",
|
remark: "",
|
};
|
},
|
/** 修改按钮操作 */
|
handleWhiteUpdate(row) {
|
this.whiteReset();
|
const id = row.id
|
getWhite(id).then(response => {
|
this.whiteForm = response.data;
|
this.title = "修改白名单";
|
this.whiteShow = true;
|
});
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.id)
|
this.single = selection.length !== 1
|
this.multiple = !selection.length
|
},
|
// 批量删除
|
bathDelete() {
|
bathDelete(this.ids).then(() => {
|
this.getWhiteList();
|
this.$modal.msgSuccess("批量删除成功");
|
this.ids = [];
|
})
|
},
|
beforeUpload(file) {
|
this.importFile = file
|
this.fileList = [file]
|
return false
|
},
|
// 导入白名单
|
handleImport() {
|
this.upload = true;
|
let formData = new FormData()
|
formData.append("file", this.importFile)
|
importData(formData).then(res => {
|
this.$message.success("导入成功")
|
this.upload = false
|
this.fileList = []
|
this.getWhiteList()
|
}).catch(()=>{
|
this.upload = false
|
})
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.add-form /deep/ .el-form-item {
|
margin-bottom: 20px;
|
}
|
|
::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;
|
font-size: large;
|
}
|
::v-deep .el-form-item {
|
margin-bottom: 0px; /* 根据需求调整这个值 */
|
}
|
::v-deep .el-form-item__label {
|
color: #8d8d8d;
|
}
|
.unit {
|
margin-left: 5px;
|
display: inline-block;
|
}
|
.content-warp {
|
margin-top: 10px;
|
}
|
.bottom_ {
|
width: 100%;
|
margin-bottom: 8px;
|
}
|
|
</style>
|
