28 changed files with 4333 additions and 106 deletions
@ -0,0 +1,44 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询报警编码列表
|
||||
export function alarmCodeList(query) { |
||||
return request({ |
||||
url: "/alarm/ac/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 根据id查询编码信息
|
||||
export function getAlarmCode(acId) { |
||||
return request({ |
||||
url: "/alarm/ac/" + acId, |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 新增报警编码
|
||||
export function addAlarmCode(data) { |
||||
return request({ |
||||
url: "/alarm/ac", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 修改报警编码信息
|
||||
export function updateAlarmCode(data) { |
||||
return request({ |
||||
url: "/alarm/ac", |
||||
method: "put", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 删除报警编码信息
|
||||
export function delAlarmCode(acIds) { |
||||
return request({ |
||||
url: "/alarm/ac/" + acIds, |
||||
method: "delete", |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询报警记录列表
|
||||
export function alarmRecordList(query) { |
||||
return request({ |
||||
url: "/alarm/ard/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 根据id查询报警记录信息
|
||||
export function getAlarmRecord(ardId) { |
||||
return request({ |
||||
url: "/alarm/ard/" + ardId, |
||||
method: "get", |
||||
}); |
||||
} |
||||
@ -0,0 +1,44 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询仪表报警规则列表
|
||||
export function alarmRuleList(query) { |
||||
return request({ |
||||
url: "/alarm/ar/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 根据id查询报警规则信息
|
||||
export function getAlarmRule(arId) { |
||||
return request({ |
||||
url: "/alarm/ar/" + arId, |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 新增报警规则
|
||||
export function addAlarmRule(data) { |
||||
return request({ |
||||
url: "/alarm/ar", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 修改报警规则信息
|
||||
export function updateAlarmRule(data) { |
||||
return request({ |
||||
url: "/alarm/ar", |
||||
method: "put", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 删除报警编码信息
|
||||
export function delAlarmRule(arIds) { |
||||
return request({ |
||||
url: "/alarm/ar/" + arIds, |
||||
method: "delete", |
||||
}); |
||||
} |
||||
@ -1,44 +1,44 @@
|
||||
import request from '@/utils/request' |
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询网关列表
|
||||
export function gatewayList(query) { |
||||
// 查询设备采集参数列表
|
||||
export function cpmList(query) { |
||||
return request({ |
||||
url: '/device/gateway/list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
url: "/device/cpm/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 根据id查询网关信息
|
||||
export function getGateway(gwId) { |
||||
// 根据id查询设备采集参数信息
|
||||
export function getCPM(cpmId) { |
||||
return request({ |
||||
url: '/device/gateway/' + gwId, |
||||
method: 'get' |
||||
}) |
||||
url: "/device/cpm/" + cpmId, |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 新增网关参数
|
||||
export function addGateway(data) { |
||||
// 新增设备采集参数
|
||||
export function addCPM(data) { |
||||
return request({ |
||||
url: '/device/gateway', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
url: "/device/cpm", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 修改网关参数
|
||||
export function updateGateway(data) { |
||||
// 修改设备采集参数
|
||||
export function updateCPM(data) { |
||||
return request({ |
||||
url: '/device/gateway', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
url: "/device/cpm", |
||||
method: "put", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 删除网关参数
|
||||
export function delGateway(gwIds) { |
||||
// 删除设备采集参数
|
||||
export function delCPM(cpmIds) { |
||||
return request({ |
||||
url: '/device/gateway/' + gwIds, |
||||
method: 'delete' |
||||
}) |
||||
url: "/device/cpm/" + cpmIds, |
||||
method: "delete", |
||||
}); |
||||
} |
||||
|
||||
@ -1,44 +1,44 @@
|
||||
import request from '@/utils/request' |
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询网关列表
|
||||
export function gatewayList(query) { |
||||
// 批量创建二维码
|
||||
export function createCode(query) { |
||||
return request({ |
||||
url: '/device/gateway/list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
url: "/device/qr/create", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 根据id查询网关信息
|
||||
export function getGateway(gwId) { |
||||
//获取二维码列表数据
|
||||
export function codeList(query) { |
||||
return request({ |
||||
url: '/device/gateway/' + gwId, |
||||
method: 'get' |
||||
}) |
||||
url: "/device/qr/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 新增网关参数
|
||||
export function addGateway(data) { |
||||
// 根据id查询二维码数据信息
|
||||
export function getCode(qrId) { |
||||
return request({ |
||||
url: '/device/gateway', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
url: "/device/qr/" + qrId, |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 修改网关参数
|
||||
export function updateGateway(data) { |
||||
// 修改二维码
|
||||
export function updateCode(data) { |
||||
return request({ |
||||
url: '/device/gateway', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
url: "/device/qr", |
||||
method: "put", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 删除网关参数
|
||||
export function delGateway(gwIds) { |
||||
// 删除二维码
|
||||
export function delCode(qrIds) { |
||||
return request({ |
||||
url: '/device/gateway/' + gwIds, |
||||
method: 'delete' |
||||
}) |
||||
url: "/device/qr/" + qrIds, |
||||
method: "delete", |
||||
}); |
||||
} |
||||
|
||||
@ -0,0 +1,44 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询备件库存列表
|
||||
export function spareList(query) { |
||||
return request({ |
||||
url: "/device/spare/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 根据id查询备件库存信息
|
||||
export function getSpare(spareId) { |
||||
return request({ |
||||
url: "/device/spare/" + spareId, |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 新增备件库存
|
||||
export function addSpare(data) { |
||||
return request({ |
||||
url: "/device/spare", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 修改备件库存
|
||||
export function updateSpare(data) { |
||||
return request({ |
||||
url: "/device/spare", |
||||
method: "put", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 删除备件库存
|
||||
export function delSpare(spareIds) { |
||||
return request({ |
||||
url: "/device/spare/" + spareIds, |
||||
method: "delete", |
||||
}); |
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询出入库列表
|
||||
export function spareInOutList(query) { |
||||
return request({ |
||||
url: "/device/spareInOut/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
||||
// 添加出入库信息
|
||||
export function addSpareInOut(data) { |
||||
return request({ |
||||
url: "/device/spareInOut", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
|
||||
// 图片url
|
||||
export const imgUrl = "http://192.168.1.222:8080"; |
||||
|
||||
|
||||
export default { |
||||
imgUrl, |
||||
}; |
||||
@ -0,0 +1,495 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
label-width="68px" |
||||
> |
||||
<el-form-item label="消息编码" prop="msgCode"> |
||||
<el-input |
||||
v-model="queryParams.msgCode" |
||||
placeholder="请输入消息编码" |
||||
clearable |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="采集类别" prop="status"> |
||||
<el-select |
||||
v-model="queryParams.status" |
||||
placeholder="选择采集类别" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_collection_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="事件类型" prop="eventType"> |
||||
<el-select |
||||
v-model="queryParams.eventType" |
||||
placeholder="选择事件类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_event_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="报警等级" prop="alarmLevel"> |
||||
<el-select |
||||
v-model="queryParams.alarmLevel" |
||||
placeholder="选择报警等级" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_level" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<div class="primary-btn" v-hasPermi="['system:post:add']"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-plus" |
||||
size="mini" |
||||
@click="handleAdd" |
||||
>新增</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="success-btn" v-hasPermi="['system:post:edit']"> |
||||
<el-button |
||||
type="success" |
||||
icon="el-icon-edit" |
||||
size="mini" |
||||
:disabled="single" |
||||
@click="handleUpdate" |
||||
>修改</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="delete-btn" v-hasPermi="['system:post:remove']"> |
||||
<el-button |
||||
type="delete" |
||||
icon="el-icon-delete" |
||||
size="mini" |
||||
:disabled="multiple" |
||||
@click="handleDelete" |
||||
>删除</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
@selection-change="handleSelectionChange" |
||||
> |
||||
<el-table-column type="selection" width="55" align="center" /> |
||||
<el-table-column label="消息编码" align="center" prop="msgCode" /> |
||||
<el-table-column label="采集类别" align="center" prop="collectionType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_collection_type" |
||||
:value="scope.row.collectionType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="事件类型" align="center" prop="eventType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_event_type" |
||||
:value="scope.row.eventType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="报警等级" align="center" prop="alarmLevel"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_level" |
||||
:value="scope.row.alarmLevel" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="消息标题" align="center" prop="msgTitle" /> |
||||
<el-table-column label="消息内容" align="center" prop="msgContent" /> |
||||
<!-- <el-table-column |
||||
label="更新时间" |
||||
align="center" |
||||
prop="updateTime" |
||||
width="180" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.updateTime) }}</span> |
||||
</template> |
||||
</el-table-column> --> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['system:post:edit']" |
||||
>修改</el-button |
||||
> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-delete" |
||||
@click="handleDelete(scope.row)" |
||||
v-hasPermi="['system:post:remove']" |
||||
>删除</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 添加或报警编码对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="消息编码" prop="msgCode"> |
||||
<el-input v-model="form.msgCode" placeholder="请输入消息编码" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="采集类别" prop="collectionType"> |
||||
<el-select |
||||
v-model="form.collectionType" |
||||
placeholder="请选择采集类别" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_collection_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="事件类型" prop="eventType"> |
||||
<el-select |
||||
v-model="form.eventType" |
||||
placeholder="请选择事件类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_event_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="报警等级" prop="alarmLevel"> |
||||
<el-select |
||||
v-model="form.alarmLevel" |
||||
placeholder="请选择报警等级" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_level" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="24"> |
||||
<el-form-item label="消息标题" prop="msgTitle"> |
||||
<el-input v-model="form.msgTitle" placeholder="请输入消息标题" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="24"> |
||||
<el-form-item label="消息内容" prop="msgContent"> |
||||
<el-input |
||||
v-model="form.msgContent" |
||||
type="textarea" |
||||
placeholder="请输入消息内容" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
alarmCodeList, |
||||
getAlarmCode, |
||||
delAlarmCode, |
||||
addAlarmCode, |
||||
updateAlarmCode, |
||||
} from "@/api/alarm/alarmCode"; |
||||
|
||||
export default { |
||||
name: "alarmCode", |
||||
dicts: ["alarm_collection_type", "alarm_event_type", "alarm_level"], |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 网关表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
msgCode: "", |
||||
collectionType: "", |
||||
eventType: "", |
||||
alarmLevel: "", |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
msgCode: [ |
||||
{ required: true, message: "消息编码不能为空", trigger: "blur" }, |
||||
], |
||||
collectionType: [ |
||||
{ required: true, message: "请选择采集类别", trigger: "blur" }, |
||||
], |
||||
eventType: [ |
||||
{ required: true, message: "请选择事件类型", trigger: "blur" }, |
||||
], |
||||
alarmLevel: [ |
||||
{ required: true, message: "请选择报警等级", trigger: "blur" }, |
||||
], |
||||
msgTitle: [ |
||||
{ required: true, message: "消息标题不能为空", trigger: "blur" }, |
||||
], |
||||
msgContent: [ |
||||
{ required: true, message: "消息内容不能为空", trigger: "blur" }, |
||||
], |
||||
}, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
/** 查询报警编码列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
alarmCodeList(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
msgCode: "", |
||||
collectionType: "", |
||||
eventType: "", |
||||
alarmLevel: "", |
||||
msgTitle: "", |
||||
msgContent: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
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 = "添加报警编码"; |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
const acId = row.id || this.ids; |
||||
console.log(""); |
||||
getAlarmCode(acId).then((response) => { |
||||
// this.form = response.data; |
||||
this.form = { |
||||
id: response.data.id, |
||||
msgCode: response.data.msgCode, |
||||
collectionType: |
||||
response.data.collectionType !== null |
||||
? response.data.collectionType.toString() |
||||
: null, |
||||
eventType: |
||||
response.data.eventType !== null |
||||
? response.data.eventType.toString() |
||||
: null, |
||||
alarmLevel: |
||||
response.data.alarmLevel !== null |
||||
? response.data.alarmLevel.toString() |
||||
: null, |
||||
msgTitle: response.data.msgTitle, |
||||
msgContent: response.data.msgContent, |
||||
}; |
||||
this.open = true; |
||||
this.title = "修改报警编码"; |
||||
}); |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
updateAlarmCode(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
console.log("新增参数", this.form); |
||||
addAlarmCode(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 delAlarmCode(Ids); |
||||
}) |
||||
.then(() => { |
||||
this.getList(); |
||||
this.$modal.msgSuccess("删除成功"); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,379 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
label-width="68px" |
||||
> |
||||
<el-form-item label="设备名称" prop="deviceName"> |
||||
<el-input |
||||
v-model="queryParams.deviceName" |
||||
placeholder="请输入设备名称" |
||||
clearable |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="报警类型" prop="alarmType"> |
||||
<el-select |
||||
v-model="queryParams.alarmType" |
||||
placeholder="选择报警类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="事件类型" prop="eventType"> |
||||
<el-select |
||||
v-model="queryParams.eventType" |
||||
placeholder="选择事件类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_event_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="报警等级" prop="alarmLevel"> |
||||
<el-select |
||||
v-model="queryParams.alarmLevel" |
||||
placeholder="选择报警等级" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_level" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="报警内容" prop="content"> |
||||
<el-input |
||||
v-model="queryParams.content" |
||||
placeholder="请输入报警内容" |
||||
clearable |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table v-loading="loading" :data="postList"> |
||||
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
||||
<el-table-column label="仪表名称" align="center" prop="cpmName" /> |
||||
<el-table-column label="报警类型" align="center" prop="alarmType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_type" |
||||
:value="scope.row.alarmType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="事件类型" align="center" prop="eventType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_event_type" |
||||
:value="scope.row.eventType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="报警等级" align="center" prop="alarmLevel"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_level" |
||||
:value="scope.row.alarmLevel" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="报警内容" align="center" prop="content" /> |
||||
<!-- <el-table-column |
||||
label="更新时间" |
||||
align="center" |
||||
prop="updateTime" |
||||
width="180" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.updateTime) }}</span> |
||||
</template> |
||||
</el-table-column> --> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-tickets" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['system:post:edit']" |
||||
>详情</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 修改报警记录对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备名称" prop="deviceName"> |
||||
<el-input |
||||
v-model="form.deviceName" |
||||
placeholder="请输入设备名称" |
||||
readonly |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="报警类型" prop="alarmType"> |
||||
<el-select |
||||
v-model="form.alarmType" |
||||
placeholder="请选择报警类型" |
||||
disabled |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="事件类型" prop="eventType"> |
||||
<el-select |
||||
v-model="form.eventType" |
||||
placeholder="请选择事件类型" |
||||
disabled |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_event_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="报警等级" prop="alarmLevel"> |
||||
<el-select |
||||
v-model="form.alarmLevel" |
||||
placeholder="请选择报警等级" |
||||
disabled |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_level" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="仪表名称" prop="cpmName"> |
||||
<el-input v-model="form.cpmName" readonly /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="报警时间" prop="createTime"> |
||||
<el-input v-model="form.createTime" readonly /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="24"> |
||||
<el-form-item label="报警内容" prop="content"> |
||||
<el-input v-model="form.content" type="textarea" readonly /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { alarmRecordList, getAlarmRecord } from "@/api/alarm/alarmRecord"; |
||||
|
||||
export default { |
||||
name: "alarmRecord", |
||||
dicts: ["alarm_type", , "alarm_type", "alarm_event_type", "alarm_level"], |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 网关表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
alarmType: "", |
||||
deviceName: "", |
||||
eventType: "", |
||||
alarmLevel: "", |
||||
content: "", |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
/** 查询报警编码列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
alarmRecordList(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
msgCode: "", |
||||
collectionType: "", |
||||
eventType: "", |
||||
alarmLevel: "", |
||||
msgTitle: "", |
||||
msgContent: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
const acId = row.id || this.ids; |
||||
console.log(""); |
||||
getAlarmRecord(acId).then((response) => { |
||||
// this.form = response.data; |
||||
this.form = { |
||||
id: response.data.id, |
||||
deviceName: response.data.deviceName, |
||||
alarmType: |
||||
response.data.alarmType !== null |
||||
? response.data.alarmType.toString() |
||||
: null, |
||||
eventType: |
||||
response.data.eventType !== null |
||||
? response.data.eventType.toString() |
||||
: null, |
||||
alarmLevel: |
||||
response.data.alarmLevel !== null |
||||
? response.data.alarmLevel.toString() |
||||
: null, |
||||
cpmName: response.data.cpmName, |
||||
content: response.data.content, |
||||
createTime: response.data.createTime, |
||||
}; |
||||
this.open = true; |
||||
this.title = "报警记录详情"; |
||||
}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,812 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
label-width="68px" |
||||
> |
||||
<el-form-item label="报警类型" prop="alarmType"> |
||||
<el-select |
||||
v-model="queryParams.alarmType" |
||||
placeholder="选择报警类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="事件类型" prop="eventType"> |
||||
<el-select |
||||
v-model="queryParams.eventType" |
||||
placeholder="选择事件类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_event_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="报警等级" prop="alarmLevel"> |
||||
<el-select |
||||
v-model="queryParams.alarmLevel" |
||||
placeholder="选择报警等级" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_level" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<div class="primary-btn" v-hasPermi="['system:post:add']"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-plus" |
||||
size="mini" |
||||
@click="handleAdd" |
||||
>新增</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="success-btn" v-hasPermi="['system:post:edit']"> |
||||
<el-button |
||||
type="success" |
||||
icon="el-icon-edit" |
||||
size="mini" |
||||
:disabled="single" |
||||
@click="handleUpdate" |
||||
>修改</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="delete-btn" v-hasPermi="['system:post:remove']"> |
||||
<el-button |
||||
type="delete" |
||||
icon="el-icon-delete" |
||||
size="mini" |
||||
:disabled="multiple" |
||||
@click="handleDelete" |
||||
>删除</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
@selection-change="handleSelectionChange" |
||||
> |
||||
<el-table-column type="selection" width="55" align="center" /> |
||||
<el-table-column label="报警类型" align="center" prop="alarmType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_type" |
||||
:value="scope.row.alarmType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="事件类型" align="center" prop="eventType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_event_type" |
||||
:value="scope.row.eventType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="报警等级" align="center" prop="alarmLevel"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_level" |
||||
:value="scope.row.alarmLevel" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
||||
<el-table-column label="仪表名称" align="center" prop="cpmId"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag :options="dict.type.sys_mt_type" :value="scope.row.cpmId" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="报警延时时间" |
||||
align="center" |
||||
prop="delayTimes" |
||||
width="110" |
||||
/> |
||||
<el-table-column label="时段设置" align="center" prop="timePeriodSet"> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.timePeriodSet === 0">全时段</span> |
||||
<span v-if="scope.row.timePeriodSet === 1">自定义时段</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="开始时段" align="center" prop="beginTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.beginTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="结束时段" align="center" prop="endTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.endTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="触发事件" align="center" prop="triggerEvent"> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.triggerEvent === 0">开</span> |
||||
<span v-if="scope.row.triggerEvent === 1">关</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="条件1" align="center" prop="condition1" /> |
||||
<el-table-column label="阈值1" align="center" prop="threshold1" /> |
||||
<el-table-column label="条件2" align="center" prop="condition2" /> |
||||
<el-table-column label="阈值2" align="center" prop="threshold2" /> |
||||
<!-- <el-table-column label="能源节点" align="center" prop="energyNode" /> |
||||
<el-table-column label="能源类型" align="center" prop="energyType" /> --> |
||||
<el-table-column label="状态" align="center" prop="status"> |
||||
<template slot-scope="scope"> |
||||
<span |
||||
:class="getStatusClass(scope.row.status)" |
||||
v-if="scope.row.status === 0" |
||||
>已启用</span |
||||
> |
||||
<span |
||||
:class="getStatusClass(scope.row.status)" |
||||
v-if="scope.row.status === 1" |
||||
>未启用</span |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['system:post:edit']" |
||||
>修改</el-button |
||||
> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-delete" |
||||
@click="handleDelete(scope.row)" |
||||
v-hasPermi="['system:post:remove']" |
||||
>删除</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 添加或报警规则对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="110px"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备名称" prop="ledgerId"> |
||||
<el-select |
||||
v-model="form.ledgerId" |
||||
placeholder="请选择设备类型" |
||||
clearable |
||||
@change="handleDevice" |
||||
> |
||||
<el-option |
||||
v-for="item in devices" |
||||
:key="item.id" |
||||
:label="item.deviceName" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="仪表名称" prop="cpmId"> |
||||
<el-select |
||||
v-model="form.cpmId" |
||||
placeholder="请选择仪表类型" |
||||
clearable |
||||
@change="handleMeter" |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_mt_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="报警类型" prop="alarmType"> |
||||
<el-select |
||||
v-model="form.alarmType" |
||||
placeholder="请选择报警类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="报警延时时间" prop="delayTimes"> |
||||
<el-input |
||||
clearable |
||||
v-model="form.delayTimes" |
||||
placeholder="请输入" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="事件类型" prop="eventType"> |
||||
<el-select |
||||
v-model="form.eventType" |
||||
placeholder="请选择事件类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_event_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="报警等级" prop="alarmLevel"> |
||||
<el-select |
||||
v-model="form.alarmLevel" |
||||
placeholder="请选择报警等级" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_level" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="触发事件" prop="triggerEvent"> |
||||
<el-select |
||||
v-model="form.triggerEvent" |
||||
placeholder="请选择" |
||||
clearable |
||||
> |
||||
<el-option label="开" value="0" /> |
||||
<el-option label="关" value="1" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="时段设置" prop="timePeriodSet"> |
||||
<el-select |
||||
v-model="form.timePeriodSet" |
||||
placeholder="请选择" |
||||
clearable |
||||
> |
||||
<el-option label="全时段" value="0" /> |
||||
<el-option label="自定义时段" value="1" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center" v-if="form.timePeriodSet === '1'"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="开始时段" prop="beginTime"> |
||||
<el-date-picker |
||||
v-model="form.beginTime" |
||||
type="date" |
||||
value-format="yyyy-MM-dd" |
||||
placeholder="选择日期" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="结束时段" prop="endTime"> |
||||
<el-date-picker |
||||
v-model="form.endTime" |
||||
type="date" |
||||
value-format="yyyy-MM-dd" |
||||
placeholder="选择日期" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="条件1" prop="condition1"> |
||||
<el-input |
||||
clearable |
||||
v-model="form.condition1" |
||||
placeholder="请输入条件" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="阈值1" prop="threshold1"> |
||||
<el-input |
||||
clearable |
||||
v-model="form.threshold1" |
||||
placeholder="请输入阈值" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="条件2" prop="condition2"> |
||||
<el-input |
||||
clearable |
||||
v-model="form.condition2" |
||||
placeholder="请输入条件" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="阈值2" prop="threshold2"> |
||||
<el-input |
||||
clearable |
||||
v-model="form.threshold2" |
||||
placeholder="请输入阈值" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="flex-start"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-select v-model="form.status" placeholder="请选择" clearable> |
||||
<el-option label="已启用" value="0" /> |
||||
<el-option label="未启用" value="1" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
alarmRuleList, |
||||
getAlarmRule, |
||||
delAlarmRule, |
||||
addAlarmRule, |
||||
updateAlarmRule, |
||||
} from "@/api/alarm/alarmRule"; |
||||
import { ledgerList } from "@/api/device/ledger"; |
||||
import { cpmList } from "@/api/device/gather"; |
||||
export default { |
||||
name: "alarmRule", |
||||
dicts: ["alarm_type", "alarm_event_type", "alarm_level", "sys_mt_type"], |
||||
data() { |
||||
// 自定义校验规则 |
||||
const validateBeginTime = (rule, value, callback) => { |
||||
if (this.form.timePeriodSet === "1") { |
||||
if (!value) { |
||||
callback(new Error("请选择开始时段")); |
||||
} else { |
||||
callback(); |
||||
} |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
const validateEndTime = (rule, value, callback) => { |
||||
if (this.form.timePeriodSet === "1") { |
||||
if (!value) { |
||||
callback(new Error("请选择结束时段")); |
||||
} else if (new Date(value) <= new Date(this.form.beginTime)) { |
||||
callback(new Error("结束时间必须大于开始时间")); |
||||
} else { |
||||
callback(); |
||||
} |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
const validateAtLeastOnePair = (rule, value, callback) => { |
||||
const { condition1, threshold1, condition2, threshold2 } = this.form; |
||||
if ((condition1 && threshold1) || (condition2 && threshold2)) { |
||||
callback(); |
||||
} else { |
||||
callback(new Error("至少要有一组条件和阈值不能为空")); |
||||
} |
||||
}; |
||||
|
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 网关表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
alarmType: "", |
||||
eventType: "", |
||||
alarmLevel: "", |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
ledgerId: [ |
||||
{ required: true, message: "设备名称不能为空", trigger: "blur" }, |
||||
], |
||||
cpmId: [ |
||||
{ required: true, message: "仪表名称不能为空", trigger: "blur" }, |
||||
], |
||||
eventType: [ |
||||
{ required: true, message: "请选择事件类型", trigger: "blur" }, |
||||
], |
||||
alarmLevel: [ |
||||
{ required: true, message: "请选择报警等级", trigger: "blur" }, |
||||
], |
||||
alarmType: [ |
||||
{ required: true, message: "请选择报警事件", trigger: "blur" }, |
||||
], |
||||
delayTimes: [ |
||||
{ required: true, message: "消息内容不能为空", trigger: "blur" }, |
||||
], |
||||
timePeriodSet: [ |
||||
{ required: true, message: "请选择一个时段设置", trigger: "blur" }, |
||||
], |
||||
beginTime: [ |
||||
{ |
||||
validator: validateBeginTime, |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
endTime: [ |
||||
{ |
||||
validator: validateEndTime, |
||||
trigger: "change", |
||||
}, |
||||
], |
||||
status: [{ required: true, message: "请选择状态", trigger: "blur" }], |
||||
condition1: [{ validator: validateAtLeastOnePair, trigger: "blur" }], |
||||
threshold1: [{ validator: validateAtLeastOnePair, trigger: "blur" }], |
||||
condition2: [{ validator: validateAtLeastOnePair, trigger: "blur" }], |
||||
threshold2: [{ validator: validateAtLeastOnePair, trigger: "blur" }], |
||||
}, |
||||
devices: [], //设备列表 |
||||
meters: [], //仪表列表 |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getDeviceList(); |
||||
this.getMeterList(); |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 表格动态类名 |
||||
getStatusClass(status) { |
||||
switch (status) { |
||||
case 0: |
||||
return "status-green"; |
||||
case 1: |
||||
return "status-red"; |
||||
default: |
||||
return ""; |
||||
} |
||||
}, |
||||
// 查询设备列表 |
||||
getDeviceList() { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 100000, |
||||
}; |
||||
ledgerList(data).then((response) => { |
||||
this.devices = response.rows; |
||||
}); |
||||
}, |
||||
// 查询仪表列表 |
||||
getMeterList() { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 100000, |
||||
}; |
||||
cpmList(data).then((response) => { |
||||
this.meters = response.rows; |
||||
}); |
||||
}, |
||||
/** 查询报警编码列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
alarmRuleList(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
eventType: "", |
||||
alarmLevel: "", |
||||
alarmType: "", |
||||
ledgerId: "", |
||||
deviceName: "", |
||||
cpmId: "", |
||||
cpmName: "", |
||||
delayTimes: "", |
||||
timePeriodSet: "", |
||||
beginTime: "", |
||||
endTime: "", |
||||
triggerEvent: "", |
||||
condition1: "", |
||||
threshold1: "", |
||||
condition2: "", |
||||
threshold2: "", |
||||
energyNode: "", |
||||
energyType: "", |
||||
status: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
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; |
||||
}, |
||||
// 弹框选择设备名称 |
||||
handleDevice(selectedValue) { |
||||
// 通过选中的 value 找到对应的 label |
||||
const selectedItem = this.devices.find( |
||||
(item) => item.id === selectedValue |
||||
); |
||||
if (selectedItem) { |
||||
const selectedLabel = selectedItem.deviceName; |
||||
console.log("选中的 value:", selectedValue); |
||||
console.log("选中的 label:", selectedLabel); |
||||
// 在这里可以进行其他操作，比如发送请求等 |
||||
this.form.ledgerId = selectedValue; |
||||
this.form.deviceName = selectedLabel; |
||||
} |
||||
}, |
||||
// 弹框选择仪表名称 |
||||
handleMeter(selectedValue) { |
||||
// 通过选中的 value 找到对应的 label |
||||
const selectedItem = this.meters.find( |
||||
(item) => item.id === selectedValue |
||||
); |
||||
if (selectedItem) { |
||||
const selectedLabel = selectedItem.mtType; |
||||
console.log("选中的 value:", selectedValue); |
||||
console.log("选中的 label:", selectedLabel); |
||||
// 在这里可以进行其他操作，比如发送请求等 |
||||
this.form.cpmId = selectedValue; |
||||
this.form.cpmName = selectedLabel; |
||||
} |
||||
}, |
||||
/** 新增按钮操作 */ |
||||
handleAdd() { |
||||
this.reset(); |
||||
this.open = true; |
||||
this.title = "添加报警规则"; |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
const arId = row.id || this.ids; |
||||
console.log(""); |
||||
getAlarmRule(arId).then((response) => { |
||||
// this.form = response.data; |
||||
this.form = { |
||||
id: response.data.id, |
||||
eventType: |
||||
response.data.eventType !== null |
||||
? response.data.eventType.toString() |
||||
: null, |
||||
alarmLevel: |
||||
response.data.alarmLevel !== null |
||||
? response.data.alarmLevel.toString() |
||||
: null, |
||||
alarmType: |
||||
response.data.alarmType !== null |
||||
? response.data.alarmType.toString() |
||||
: null, |
||||
ledgerId: response.data.ledgerId, |
||||
deviceName: response.data.deviceName, |
||||
cpmId: response.data.cpmId, |
||||
cpmName: response.data.cpmName, |
||||
delayTimes: response.data.delayTimes, |
||||
timePeriodSet: |
||||
response.data.timePeriodSet !== null |
||||
? response.data.timePeriodSet.toString() |
||||
: null, |
||||
beginTime: response.data.beginTime, |
||||
endTime: response.data.endTime, |
||||
triggerEvent: |
||||
response.data.triggerEvent !== null |
||||
? response.data.triggerEvent.toString() |
||||
: null, |
||||
condition1: response.data.condition1, |
||||
threshold1: response.data.threshold1, |
||||
condition2: response.data.condition2, |
||||
threshold2: response.data.threshold2, |
||||
energyNode: "", |
||||
energyType: "", |
||||
status: |
||||
response.data.status !== null |
||||
? response.data.status.toString() |
||||
: null, |
||||
}; |
||||
this.open = true; |
||||
this.title = "修改报警规则"; |
||||
}); |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
updateAlarmRule(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
console.log("新增参数", this.form); |
||||
addAlarmRule(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 delAlarmRule(Ids); |
||||
}) |
||||
.then(() => { |
||||
this.getList(); |
||||
this.$modal.msgSuccess("删除成功"); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.status-green { |
||||
color: rgb(7, 214, 110); |
||||
} |
||||
.status-red { |
||||
color: red; |
||||
} |
||||
</style> |
||||
@ -1,4 +1,871 @@
|
||||
<template> |
||||
<div>设备采集参数管理</div> |
||||
</template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
label-width="90px" |
||||
> |
||||
<el-form-item label="仪表类型" prop="mtType"> |
||||
<el-select |
||||
v-model="queryParams.mtType" |
||||
placeholder="请选择仪表类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_mt_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="系统类型" prop="systemType"> |
||||
<el-select |
||||
v-model="queryParams.systemType" |
||||
placeholder="请选择系统类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="参数类型" prop="paramType"> |
||||
<el-select |
||||
v-model="queryParams.paramType" |
||||
placeholder="请选择采集参数类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_param_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="设备台账id" prop="deviceLedgerId"> |
||||
<el-input v-model="queryParams.deviceLedgerId"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="日期范围" prop="timeArr"> |
||||
<el-date-picker |
||||
style="width: 220px" |
||||
v-model="timeArr" |
||||
type="daterange" |
||||
unlink-panels |
||||
range-separator="~" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
value-format="yyyy-MM-dd" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<div class="primary-btn" v-hasPermi="['system:post:add']"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-plus" |
||||
size="mini" |
||||
@click="handleAdd" |
||||
>新增</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="success-btn" v-hasPermi="['system:post:edit']"> |
||||
<el-button |
||||
type="success" |
||||
icon="el-icon-edit" |
||||
size="mini" |
||||
:disabled="single" |
||||
@click="handleUpdate" |
||||
>修改</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="delete-btn" v-hasPermi="['system:post:remove']"> |
||||
<el-button |
||||
type="delete" |
||||
icon="el-icon-delete" |
||||
size="mini" |
||||
:disabled="multiple" |
||||
@click="handleDelete" |
||||
>删除</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
@selection-change="handleSelectionChange" |
||||
> |
||||
<el-table-column type="selection" width="55" align="center" /> |
||||
<el-table-column label="仪表类型" align="center" prop="mtType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_mt_type" |
||||
:value="scope.row.mtType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column |
||||
label="仪表编号" |
||||
align="center" |
||||
prop="mtCode" |
||||
/> --> |
||||
<el-table-column label="仪表表号" align="center" prop="mtNum" /> |
||||
<el-table-column label="寄存器地址" align="center" prop="registerAddr" /> |
||||
<el-table-column label="功能码" align="center" prop="funcCode" /> |
||||
<el-table-column label="识别码" align="center" prop="mtCaliberPulse" /> |
||||
<el-table-column label="口径脉冲" align="center" prop="identifyCode" /> |
||||
<el-table-column label="仪表范围" align="center" prop="mtRange" /> |
||||
<el-table-column label="倍率" align="center" prop="mtRatio" /> |
||||
<el-table-column label="保留位数" align="center" prop="mtInitValue" /> |
||||
<el-table-column label="数据类型" align="center" prop="dataType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_data_type" |
||||
:value="scope.row.dataType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="当前值" align="center" prop="curValue" /> |
||||
<el-table-column label="是否累计" align="center" prop="mtIsSum"> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.mtIsSum === 0">否</span> |
||||
<span v-if="scope.row.mtIsSum === 1">是</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="单位" align="center" prop="unit" /> |
||||
<el-table-column label="排序" align="center" prop="sort" /> |
||||
<el-table-column label="网关Id" align="center" prop="gatewayId" /> |
||||
<el-table-column |
||||
label="仪表设备通信参数" |
||||
align="center" |
||||
prop="communicationParamId" |
||||
/> |
||||
<el-table-column label="协议类型" align="center" prop="protocolType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_protocol_type" |
||||
:value="scope.row.protocolType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="通讯方式" align="center" prop="communicationType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_communication_type" |
||||
:value="scope.row.communicationType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="寄存器大小" align="center" prop="registerSize" /> |
||||
<el-table-column label="是否使用" align="center" prop="isUse"> |
||||
<template slot-scope="scope"> |
||||
<span v-if="scope.row.isUse === 0">是</span> |
||||
<span v-if="scope.row.isUse === 1">否</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="别名" align="center" prop="otherName" /> |
||||
<el-table-column label="累计/瞬时标识" align="center" prop="grade" /> |
||||
<el-table-column label="系统类型" align="center" prop="systemType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_type" |
||||
:value="scope.row.systemType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
|
||||
<el-table-column |
||||
label="采集设备" |
||||
align="center" |
||||
prop="terminalDeviceType" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_device_type" |
||||
:value="scope.row.terminalDeviceType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="参数类型" align="center" prop="paramType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_param_type" |
||||
:value="scope.row.paramType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="采集类别" align="center" prop="collectionType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.alarm_collection_type" |
||||
:value="scope.row.collectionType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column label="创建时间" align="center" prop="createTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="备注" align="center" prop="remark" /> --> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['system:post:edit']" |
||||
>修改</el-button |
||||
> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-delete" |
||||
@click="handleDelete(scope.row)" |
||||
v-hasPermi="['system:post:remove']" |
||||
>删除</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 添加或修改设备采集参数对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="仪表类型" prop="mtType"> |
||||
<el-select |
||||
v-model="form.mtType" |
||||
placeholder="请选择仪表类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_mt_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="仪表表号" prop="mtNum"> |
||||
<el-input v-model="form.mtNum" placeholder="请输入仪表表号" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="采集编号" prop="mtCode"> |
||||
<el-input v-model="form.mtCode" placeholder="请输入采集编号" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="寄存器地址" prop="registerAddr"> |
||||
<el-input |
||||
v-model="form.registerAddr" |
||||
placeholder="请输入仪表表号" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="功能码" prop="funcCode"> |
||||
<el-input v-model="form.funcCode" placeholder="请输入功能码" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="识别码" prop="identifyCode"> |
||||
<el-input |
||||
v-model="form.identifyCode" |
||||
placeholder="请输入识别码" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="口径脉冲" prop="mtCaliberPulse"> |
||||
<el-input |
||||
v-model="form.mtCaliberPulse" |
||||
placeholder="请输入口径脉冲" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="仪表范围" prop="mtRange"> |
||||
<el-input v-model="form.mtRange" placeholder="请输入仪表范围" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="倍率" prop="mtRatio"> |
||||
<el-input v-model="form.mtRatio" placeholder="请输入倍率" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="初始值" prop="mtInitValue"> |
||||
<el-input v-model="form.mtInitValue" placeholder="请输入初始值" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="保留位数" prop="digits"> |
||||
<el-input v-model="form.digits" placeholder="请输入保留位数" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="数据类型" prop="dataType"> |
||||
<el-select |
||||
v-model="form.dataType" |
||||
placeholder="请选择数据类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_data_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="是否累计" prop="mtIsSum"> |
||||
<el-select |
||||
clearable |
||||
placeholder="请选择是否" |
||||
v-model="form.mtIsSum" |
||||
> |
||||
<el-option label="否" value="0"></el-option> |
||||
<el-option label="是" value="1"></el-option> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="单位" prop="unit"> |
||||
<el-input |
||||
v-model="form.unit" |
||||
placeholder="请输入单位" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="排序" prop="sort"> |
||||
<el-input |
||||
v-model="form.sort" |
||||
placeholder="请输入排序" /></el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="网关id" prop="gatewayId"> |
||||
<el-input |
||||
v-model="form.gatewayId" |
||||
placeholder="请输入网关id" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备通信参数" prop="communicationParamId"> |
||||
<el-input |
||||
v-model="form.communicationParamId" |
||||
placeholder="请输设备通信参数" /></el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="寄存器大小" prop="registerSize"> |
||||
<el-input |
||||
v-model="form.registerSize" |
||||
placeholder="请输入寄存器大小" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="协议类型" prop="protocolType"> |
||||
<el-select |
||||
v-model="form.protocolType" |
||||
placeholder="请选择协议类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_protocol_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="通信类型" prop="communicationType"> |
||||
<el-select |
||||
v-model="form.communicationType" |
||||
placeholder="请选择通信类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_communication_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="是否使用" prop="isUse"> |
||||
<el-select |
||||
clearable |
||||
placeholder="请选择是否" |
||||
v-model="form.isUse" |
||||
> |
||||
<el-option label="是" value="0"></el-option> |
||||
<el-option label="否" value="1"></el-option> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="别名" prop="otherName"> |
||||
<el-input |
||||
v-model="form.otherName" |
||||
placeholder="请输入别名" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="累计/瞬时标识" prop="grade"> |
||||
<el-input v-model="form.grade" placeholder="请输入标识" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="系统类型" prop="systemType"> |
||||
<el-select |
||||
v-model="form.systemType" |
||||
placeholder="请选择系统类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="参数类型" prop="paramType"> |
||||
<el-select |
||||
v-model="form.paramType" |
||||
placeholder="请选择参数类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_param_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="采集类别" prop="collectionType"> |
||||
<el-select |
||||
v-model="form.collectionType" |
||||
placeholder="请选择采集类别" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.alarm_collection_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="采集设备" prop="terminalDeviceType"> |
||||
<el-select |
||||
v-model="form.terminalDeviceType" |
||||
placeholder="请选择采集设备" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_device_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备台账id" prop="deviceLedgerId"> |
||||
<el-input |
||||
v-model="form.deviceLedgerId" |
||||
placeholder="请输入id" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
cpmList, |
||||
getCPM, |
||||
delCPM, |
||||
addCPM, |
||||
updateCPM, |
||||
} from "@/api/device/gather"; |
||||
|
||||
export default { |
||||
name: "gather", |
||||
dicts: [ |
||||
"sys_mt_type", |
||||
"sys_type", |
||||
"sys_param_type", |
||||
"sys_data_type", |
||||
"sys_protocol_type", |
||||
"sys_communication_type", |
||||
"sys_device_type", |
||||
"alarm_collection_type", |
||||
], |
||||
data() { |
||||
return { |
||||
timeArr: [], |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 设备参数表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
beginTime: "", |
||||
endTime: "", |
||||
mtType: "", |
||||
mtNum: "", |
||||
deviceLedgerId: "", |
||||
systemType: "", |
||||
paramType: "", |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
mtType: [ |
||||
{ required: true, message: "请选择仪表类型", trigger: "blur" }, |
||||
], |
||||
}, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeArr); |
||||
if (!this.timeArr) { |
||||
this.$nextTick(() => { |
||||
this.timeArr = []; |
||||
this.queryParams.beginTime = ""; |
||||
this.queryParams.endTime = ""; |
||||
}); |
||||
} else { |
||||
this.queryParams.beginTime = this.timeArr[0]; |
||||
this.queryParams.endTime = this.timeArr[1]; |
||||
} |
||||
}, |
||||
/** 查询设备参数列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
cpmList(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
remark: "", |
||||
deviceLedgerId: "", |
||||
mtType: "", |
||||
mtNum: "", |
||||
mtCode: "", |
||||
registerAddr: "", |
||||
funcCode: "", |
||||
identifyCode: "", |
||||
mtCaliberPulse: "", |
||||
mtRange: "", |
||||
mtRatio: "", |
||||
mtInitValue: "", |
||||
digits: "", |
||||
dataType: "", |
||||
mtIsSum: "", |
||||
unit: "", |
||||
sort: "", |
||||
gatewayId: "", |
||||
communicationParamId: "", |
||||
protocolType: "", |
||||
communicationType: "", |
||||
registerSize: "", |
||||
isUse: "", |
||||
otherName: "", |
||||
grade: "", |
||||
paramType: "", |
||||
systemType: "", |
||||
terminalDeviceType: "", |
||||
collectionType: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
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 = "添加设备采集参数信息"; |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
const cpmId = row.id || this.ids; |
||||
console.log("row", row); |
||||
getCPM(cpmId).then((response) => { |
||||
console.log("打印结果", response.data); |
||||
// this.form = response.data; |
||||
this.form = { |
||||
id: response.data.id, |
||||
remark: response.data.remark, |
||||
deviceLedgerId: response.data.deviceLedgerId, |
||||
mtType: |
||||
response.data.mtType !== null |
||||
? response.data.mtType.toString() |
||||
: null, |
||||
mtNum: response.data.mtNum, |
||||
mtCode: response.data.mtCode, |
||||
registerAddr: response.data.registerAddr, |
||||
funcCode: response.data.funcCode, |
||||
identifyCode: response.data.identifyCode, |
||||
mtCaliberPulse: response.data.mtCaliberPulse, |
||||
mtRange: response.data.mtRange, |
||||
mtRatio: response.data.mtRatio, |
||||
mtInitValue: response.data.mtInitValue, |
||||
digits: response.data.digits, |
||||
dataType: |
||||
response.data.dataType !== null |
||||
? response.data.dataType.toString() |
||||
: null, |
||||
mtIsSum: |
||||
response.data.mtIsSum !== null |
||||
? response.data.mtIsSum.toString() |
||||
: null, |
||||
unit: response.data.unit, |
||||
sort: response.data.sort, |
||||
gatewayId: response.data.gatewayId, |
||||
communicationParamId: response.data.communicationParamId, |
||||
protocolType: |
||||
response.data.protocolType !== null |
||||
? response.data.protocolType.toString() |
||||
: null, |
||||
communicationType: |
||||
response.data.communicationType !== null |
||||
? response.data.communicationType.toString() |
||||
: null, |
||||
registerSize: response.data.registerSize, |
||||
isUse: |
||||
response.data.isUse !== null |
||||
? response.data.isUse.toString() |
||||
: null, |
||||
otherName: response.data.otherName, |
||||
grade: response.data.grade, |
||||
paramType: |
||||
response.data.paramType !== null |
||||
? response.data.paramType.toString() |
||||
: null, |
||||
systemType: |
||||
response.data.systemType !== null |
||||
? response.data.systemType.toString() |
||||
: null, |
||||
collectionType: |
||||
response.data.collectionType !== null |
||||
? response.data.collectionType.toString() |
||||
: null, |
||||
terminalDeviceType: |
||||
response.data.terminalDeviceType !== null |
||||
? response.data.terminalDeviceType.toString() |
||||
: null, |
||||
}; |
||||
this.open = true; |
||||
this.title = "修改设备参数信息"; |
||||
}); |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
updateCPM(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
console.log("新增参数", this.form); |
||||
addCPM(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 delCPM(Ids); |
||||
}) |
||||
.then(() => { |
||||
this.getList(); |
||||
this.$modal.msgSuccess("删除成功"); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
@ -1,3 +1,555 @@
|
||||
<template> |
||||
<div>设备二维码</div> |
||||
</template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
label-width="90px" |
||||
> |
||||
<el-form-item label="二维码状态" prop="status"> |
||||
<el-select |
||||
v-model="queryParams.status" |
||||
placeholder="请选择状态" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.qrcode_status" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<div class="primary-btn" v-hasPermi="['system:post:add']"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-folder-add" |
||||
size="mini" |
||||
@click="handleAdd" |
||||
>批量生成二维码</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="success-btn" v-hasPermi="['system:post:edit']"> |
||||
<el-button |
||||
type="success" |
||||
icon="el-icon-edit" |
||||
size="mini" |
||||
:disabled="single" |
||||
@click="handleUpdate" |
||||
>修改</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="delete-btn" v-hasPermi="['system:post:remove']"> |
||||
<el-button |
||||
type="delete" |
||||
icon="el-icon-delete" |
||||
size="mini" |
||||
:disabled="multiple" |
||||
@click="handleDelete" |
||||
>删除</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
@selection-change="handleSelectionChange" |
||||
> |
||||
<el-table-column type="selection" width="55" align="center" /> |
||||
<el-table-column label="二维码序列号" align="center" prop="serialNum" /> |
||||
<el-table-column label="二维码图片" align="center" prop="picContent"> |
||||
<template slot-scope="scope"> |
||||
<div |
||||
@click="goPreView(scope.row.picContent)" |
||||
style=" |
||||
width: 100%; |
||||
height: 30px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
cursor: pointer; |
||||
" |
||||
> |
||||
<img |
||||
style="height: 100%" |
||||
v-if="scope.row.picContent" |
||||
:src="imgUrl + scope.row.picContent" |
||||
alt="Base64 Image" |
||||
/> |
||||
<span v-else></span> |
||||
</div> |
||||
<!-- <div class="success-btn"> |
||||
<el-button |
||||
type="success" |
||||
size="mini" |
||||
@click="goPreView(scope.row.picContent)" |
||||
>预览</el-button |
||||
> |
||||
</div> --> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="关联设备ID" |
||||
align="center" |
||||
prop="deviceLedgerId" |
||||
/> |
||||
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
||||
<el-table-column label="绑定时间" align="center" prop="bindTime"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.bindTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="二维码状态" align="center" prop="status"> |
||||
<template slot-scope="scope"> |
||||
<!-- 包裹 dict-tag 组件，根据状态绑定不同的类名 --> |
||||
<span :class="getStatusClass(scope.row.status)"> |
||||
<dict-tag |
||||
:options="dict.type.qrcode_status" |
||||
:value="scope.row.status" |
||||
/> |
||||
</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['system:post:edit']" |
||||
>修改</el-button |
||||
> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-delete" |
||||
@click="handleDelete(scope.row)" |
||||
v-hasPermi="['system:post:remove']" |
||||
>删除</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 修改二维码对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="24"> |
||||
<el-form-item label="二维码序列号" prop="serialNum"> |
||||
<el-input v-model="form.serialNum" disabled placeholder="" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<!-- <el-col :span="12"> |
||||
<el-form-item label="绑定时间" prop="bindTime"> |
||||
<el-date-picker |
||||
v-model="form.bindTime" |
||||
type="date" |
||||
disabled |
||||
value-format="yyyy-MM-dd" |
||||
placeholder="" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-col> --> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备名称" prop="deviceLedgerId"> |
||||
<el-select |
||||
v-model="form.deviceLedgerId" |
||||
placeholder="请选择设备名称" |
||||
clearable |
||||
@change="handleDeviceChange" |
||||
> |
||||
<el-option |
||||
v-for="item in devices" |
||||
:key="item.id" |
||||
:label="item.deviceName" |
||||
:value="item.id" |
||||
/> </el-select></el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="二维码状态" prop="status"> |
||||
<el-select |
||||
v-model="form.status" |
||||
placeholder="请选择状态" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.qrcode_status" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<!-- 二维码预览弹框 --> |
||||
<el-dialog |
||||
title="二维码预览" |
||||
:visible.sync="isCodePreview" |
||||
width="500px" |
||||
append-to-body |
||||
> |
||||
<div class="dialog-img"> |
||||
<img class="qrCodeImg" :src="codePreViewUrl" alt="Base64 Image" /> |
||||
</div> |
||||
</el-dialog> |
||||
<!-- 批量生成二维码弹框 --> |
||||
<el-dialog |
||||
title="批量生成二维码" |
||||
:visible.sync="isMoreqrCode" |
||||
width="500px" |
||||
append-to-body |
||||
> |
||||
<el-form |
||||
ref="qrCodeForm" |
||||
:model="qrCodeForm" |
||||
:rules="qrCodeForms" |
||||
label-width="120px" |
||||
> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="24"> |
||||
<el-form-item label="二维码个数" prop="qrNum"> |
||||
<el-input |
||||
v-model="qrCodeForm.qrNum" |
||||
placeholder="请输入小于50的正整数" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="isMoreqrCode = false">取 消</el-button> |
||||
<el-button type="primary" @click="submitqrCodeForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getCode, |
||||
codeList, |
||||
delCode, |
||||
createCode, |
||||
updateCode, |
||||
} from "@/api/device/qrCode"; |
||||
import { ledgerList } from "@/api/device/ledger"; |
||||
import { imgUrl } from "@/utils/global"; |
||||
export default { |
||||
name: "qrCode", |
||||
dicts: ["qrcode_status", "sys_device_type"], |
||||
data() { |
||||
return { |
||||
timeArr: [], |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 网关表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
status: "", |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
status: [ |
||||
{ required: true, message: "请选择二维码状态", trigger: "blur" }, |
||||
], |
||||
}, |
||||
isCodePreview: false, //预览 |
||||
imgUrl: "", |
||||
codePreViewUrl: "", |
||||
isMoreqrCode: false, //批量生成二维码 |
||||
qrCodeForm: {}, |
||||
qrCodeForms: { |
||||
qrNum: [ |
||||
{ required: true, message: "二维码个数不能为空", trigger: "blur" }, |
||||
], |
||||
}, |
||||
devices: [], //设备列表 |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getDevices(); |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 查询设备列表 |
||||
getDevices() { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 1000000, |
||||
}; |
||||
ledgerList(data).then((response) => { |
||||
this.devices = response.rows; |
||||
}); |
||||
}, |
||||
/** 查询二维码列表 */ |
||||
getList() { |
||||
this.imgUrl = imgUrl; |
||||
this.loading = true; |
||||
codeList(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 表格字典时候动态类 |
||||
getStatusClass(status) { |
||||
switch (status) { |
||||
case 0: |
||||
return "status-green"; |
||||
case 1: |
||||
return "status-red"; |
||||
default: |
||||
return ""; |
||||
} |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
handleDeviceChange(selectedValue) { |
||||
// 通过选中的 value 找到对应的 label |
||||
const selectedItem = this.devices.find( |
||||
(item) => item.id === selectedValue |
||||
); |
||||
if (selectedItem) { |
||||
const selectedLabel = selectedItem.deviceName; |
||||
console.log("选中的 value:", selectedValue); |
||||
console.log("选中的 label:", selectedLabel); |
||||
// 在这里可以进行其他操作，比如发送请求等 |
||||
this.form.deviceLedgerId = selectedValue; |
||||
this.form.deviceName = selectedLabel; |
||||
} |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
serialNum: "", |
||||
picContent: "", |
||||
deviceLedgerId: "", |
||||
deviceName: "", |
||||
bindTime: "", |
||||
status: "", |
||||
remark: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
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.isMoreqrCode = true; |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
const ledgerId = row.id || this.ids; |
||||
console.log(""); |
||||
getCode(ledgerId).then((response) => { |
||||
// this.form = response.data; |
||||
this.form = { |
||||
id: response.data.id, |
||||
serialNum: response.data.serialNum, |
||||
picContent: response.data.picContent, |
||||
deviceLedgerId: response.data.deviceLedgerId, |
||||
deviceName: response.data.deviceName, |
||||
bindTime: response.data.bindTime, |
||||
status: |
||||
response.data.status !== null |
||||
? response.data.status.toString() |
||||
: null, |
||||
remark: response.data.remark, |
||||
}; |
||||
this.open = true; |
||||
this.title = "修改二维码信息"; |
||||
}); |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
updateCode(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
// 批量生成二维码 |
||||
submitqrCodeForm: function () { |
||||
this.$refs["qrCodeForm"].validate((valid) => { |
||||
if (valid) { |
||||
console.log("新增参数", this.qrCodeForm); |
||||
createCode(this.qrCodeForm).then((response) => { |
||||
this.$modal.msgSuccess("新增成功"); |
||||
this.isMoreqrCode = false; |
||||
this.getList(); |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
/** 删除按钮操作 */ |
||||
handleDelete(row) { |
||||
const qrIds = row.id || this.ids; |
||||
this.$modal |
||||
.confirm('是否确认删除二维码编号为"' + qrIds + '"的数据项？') |
||||
.then(function () { |
||||
return delCode(qrIds); |
||||
}) |
||||
.then(() => { |
||||
this.getList(); |
||||
this.$modal.msgSuccess("删除成功"); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
// 预览二维码 |
||||
goPreView(item) { |
||||
this.codePreViewUrl = ""; |
||||
console.log("二维码url", item); |
||||
this.isCodePreview = true; |
||||
this.codePreViewUrl = this.imgUrl + item; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.dialog-img { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.qrCodeImg { |
||||
width: 150px; |
||||
height: 150px; |
||||
} |
||||
} |
||||
.status-green { |
||||
color: rgb(7, 214, 110); |
||||
} |
||||
.status-red { |
||||
color: red; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,461 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
label-width="90px" |
||||
> |
||||
<el-form-item label="备件序列号" prop="serialNum"> |
||||
<el-input |
||||
v-model="queryParams.serialNum" |
||||
placeholder="请输入备件序列号" |
||||
clearable |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="备件名称" prop="spareName"> |
||||
<el-input |
||||
v-model="queryParams.spareName" |
||||
placeholder="请输入备件名称" |
||||
clearable |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="日期范围" prop="timeArr"> |
||||
<el-date-picker |
||||
style="width: 220px" |
||||
v-model="timeArr" |
||||
type="daterange" |
||||
unlink-panels |
||||
range-separator="~" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
value-format="yyyy-MM-dd" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<div class="primary-btn" v-hasPermi="['system:post:add']"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-plus" |
||||
size="mini" |
||||
@click="handleAdd" |
||||
>新增</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="success-btn" v-hasPermi="['system:post:edit']"> |
||||
<el-button |
||||
type="success" |
||||
icon="el-icon-edit" |
||||
size="mini" |
||||
:disabled="single" |
||||
@click="handleUpdate" |
||||
>修改</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="delete-btn" v-hasPermi="['system:post:remove']"> |
||||
<el-button |
||||
type="delete" |
||||
icon="el-icon-delete" |
||||
size="mini" |
||||
:disabled="multiple" |
||||
@click="handleDelete" |
||||
>删除</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
@selection-change="handleSelectionChange" |
||||
> |
||||
<el-table-column type="selection" width="55" align="center" /> |
||||
<el-table-column label="备件序列号" align="center" prop="serialNum" /> |
||||
<el-table-column label="备件名称" align="center" prop="spareName" /> |
||||
<el-table-column label="规格与型号" align="center" prop="modelSpecs" /> |
||||
<el-table-column label="设备类型Id" align="center" prop="deviceTypeId" /> |
||||
<el-table-column label="库存数量" align="center" prop="inventoryLevels" /> |
||||
<el-table-column |
||||
label="最低库存" |
||||
align="center" |
||||
prop="minInventoryLevels" |
||||
/> |
||||
<el-table-column label="使用年限" align="center" prop="serviceLife" /> |
||||
<el-table-column label="单价" align="center" prop="unitPrice" /> |
||||
<el-table-column |
||||
label="更新时间" |
||||
align="center" |
||||
prop="updateTime" |
||||
width="180" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.updateTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['system:post:edit']" |
||||
>修改</el-button |
||||
> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-delete" |
||||
@click="handleDelete(scope.row)" |
||||
v-hasPermi="['system:post:remove']" |
||||
>删除</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 添加或修改备件库存对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="95px"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备序列号" prop="serialNum"> |
||||
<el-input |
||||
v-model="form.serialNum" |
||||
placeholder="请输入设备序列号" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备名称" prop="spareName"> |
||||
<el-input |
||||
v-model="form.spareName" |
||||
placeholder="请输入设备名称" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="规格与型号" prop="modelSpecs"> |
||||
<el-input |
||||
v-model="form.modelSpecs" |
||||
placeholder="请输入规格与型号" |
||||
clearable |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设备类型Id" prop="deviceTypeId"> |
||||
<el-input |
||||
v-model="form.deviceTypeId" |
||||
placeholder="请输入设备类型Id" |
||||
clearable |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="库存数量" prop="inventoryLevels"> |
||||
<el-input |
||||
v-model="form.inventoryLevels" |
||||
placeholder="请输入库存数量" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="最低库存" prop="minInventoryLevels"> |
||||
<el-input |
||||
v-model="form.minInventoryLevels" |
||||
placeholder="请输入最低库存" |
||||
clearable |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="使用年限" prop="serviceLife"> |
||||
<el-input |
||||
v-model="form.serviceLife" |
||||
placeholder="请输入使用年限" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="单价" prop="unitPrice"> |
||||
<el-input |
||||
v-model="form.unitPrice" |
||||
placeholder="请输入单价" |
||||
clearable |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
spareList, |
||||
getSpare, |
||||
delSpare, |
||||
addSpare, |
||||
updateSpare, |
||||
} from "@/api/device/spare"; |
||||
|
||||
export default { |
||||
name: "spare", |
||||
data() { |
||||
return { |
||||
timeArr: [], |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 网关表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
serialNum: "", |
||||
spareName: "", |
||||
beginTime: "", |
||||
endTime: "", |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
serialNum: [ |
||||
{ required: true, message: "设备序列号不能为空", trigger: "blur" }, |
||||
], |
||||
spareName: [ |
||||
{ required: true, message: "备件名称不能为空", trigger: "blur" }, |
||||
], |
||||
}, |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeArr); |
||||
if (!this.timeArr) { |
||||
this.$nextTick(() => { |
||||
this.timeArr = []; |
||||
this.queryParams.beginTime = ""; |
||||
this.queryParams.endTime = ""; |
||||
}); |
||||
} else { |
||||
this.queryParams.beginTime = this.timeArr[0]; |
||||
this.queryParams.endTime = this.timeArr[1]; |
||||
} |
||||
}, |
||||
/** 查询设备件库存列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
spareList(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
serialNum: "", |
||||
spareName: "", |
||||
modelSpecs: "", |
||||
deviceTypeId: "", |
||||
inventoryLevels: "", |
||||
minInventoryLevels: "", |
||||
serviceLife: "", |
||||
unitPrice: "", |
||||
remark: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
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 = "添加备件库存"; |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
const gwId = row.id || this.ids; |
||||
console.log(""); |
||||
getSpare(gwId).then((response) => { |
||||
// this.form = response.data; |
||||
this.form = { |
||||
id: response.data.id, |
||||
serialNum: response.data.serialNum, |
||||
spareName: response.data.spareName, |
||||
modelSpecs: response.data.modelSpecs, |
||||
deviceTypeId: response.data.deviceTypeId, |
||||
inventoryLevels: response.data.inventoryLevels, |
||||
minInventoryLevels: response.data.minInventoryLevels, |
||||
serviceLife: response.data.serviceLife, |
||||
unitPrice: response.data.unitPrice, |
||||
remark: response.data.remark, |
||||
}; |
||||
this.open = true; |
||||
this.title = "修改备件库存"; |
||||
}); |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
updateSpare(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
console.log("新增参数", this.form); |
||||
addSpare(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 delSpare(Ids); |
||||
}) |
||||
.then(() => { |
||||
this.getList(); |
||||
this.$modal.msgSuccess("删除成功"); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,436 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
label-width="90px" |
||||
> |
||||
<el-form-item label="备件序列号" prop="serialNum"> |
||||
<el-input |
||||
v-model="queryParams.serialNum" |
||||
placeholder="请输入备件序列号" |
||||
clearable |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="备件名称" prop="spareName"> |
||||
<el-input |
||||
v-model="queryParams.spareName" |
||||
placeholder="请输入备件名称" |
||||
clearable |
||||
@keyup.enter.native="handleQuery" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="操作类型" prop="operaType"> |
||||
<el-select |
||||
v-model="queryParams.operaType" |
||||
placeholder="请选择操作类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in dict.type.sys_inout_type" |
||||
:key="dict.value" |
||||
:label="dict.label" |
||||
:value="dict.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="日期范围" prop="timeArr"> |
||||
<el-date-picker |
||||
style="width: 220px" |
||||
v-model="timeArr" |
||||
type="daterange" |
||||
unlink-panels |
||||
range-separator="~" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
value-format="yyyy-MM-dd" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<div class="primary-btn" v-hasPermi="['system:post:add']"> |
||||
<el-button type="primary" size="mini" @click="handleOut" |
||||
><svg-icon |
||||
icon-class="Outbound" |
||||
style="margin-right: 5px; font-size: 13px" |
||||
/>出库</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="primary-btn" v-hasPermi="['system:post:add']"> |
||||
<el-button type="primary" size="mini" @click="handleIn" |
||||
><svg-icon |
||||
icon-class="Inbound" |
||||
style="margin-right: 5px; font-size: 13px" |
||||
/>入库</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="postList"> |
||||
<!-- <el-table-column label="库存备件Id" align="center" prop="sparePartsId" /> --> |
||||
<el-table-column label="备件名称" align="center" prop="spareName" /> |
||||
<el-table-column label="出入库操作类型" align="center" prop="operaType"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag |
||||
:options="dict.type.sys_inout_type" |
||||
:value="scope.row.operaType" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="出入库量" align="center" prop="intOutNum" /> |
||||
<el-table-column label="库存数量" align="center" prop="inventoryLevels" /> |
||||
<el-table-column |
||||
label="出入库时间" |
||||
align="center" |
||||
prop="createTime" |
||||
width="180" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 出入库对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body> |
||||
<el-form ref="form" label-width="95px"> |
||||
<el-table :data="dialogList"> |
||||
<el-table-column label="备件名称" prop="spareName" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-select |
||||
v-model="scope.row.sparePartsId" |
||||
@change="handleSpare(scope.row, scope.row.sparePartsId)" |
||||
> |
||||
<el-option |
||||
v-for="item in spares" |
||||
:key="item.id" |
||||
:label="item.spareName" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="数量" width="150"> |
||||
<template slot-scope="scope"> |
||||
<el-input |
||||
placeholder="请填写" |
||||
v-model="scope.row.intOutNum" |
||||
@blur="blurColumn(scope.row, scope.$index)" |
||||
@input="updateNextRowMes(scope.row, scope.$index)" |
||||
></el-input> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="当前库存" width="150" prop="inventoryLevels"> |
||||
</el-table-column> |
||||
<el-table-column prop="data1" label="操作" width="130"> |
||||
<template slot-scope="scope"> |
||||
<div class="table-btn"> |
||||
<div class="delete-btn"> |
||||
<el-button |
||||
size="mini" |
||||
type="delete" |
||||
icon="el-icon-delete" |
||||
@click="delectList(scope.row)" |
||||
>删除</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="success-btn" style="margin-top: 10px"> |
||||
<el-button type="success" size="mini" @click="addPriceSet" |
||||
>添加设置</el-button |
||||
> |
||||
</div> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { spareInOutList, addSpareInOut } from "@/api/device/spareInOut"; |
||||
import { spareList } from "@/api/device/spare"; |
||||
export default { |
||||
name: "spareInOut", |
||||
dicts: ["sys_inout_type"], |
||||
data() { |
||||
return { |
||||
timeArr: [], |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 网关表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
serialNum: "", |
||||
spareName: "", |
||||
beginTime: "", |
||||
endTime: "", |
||||
operaType: "", |
||||
}, |
||||
dialogList: [], //弹框表格 |
||||
sparesList: [], //弹框备件列表 |
||||
spares: [], |
||||
}; |
||||
}, |
||||
created() { |
||||
this.getList(); |
||||
this.getSparesList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeArr); |
||||
if (!this.timeArr) { |
||||
this.$nextTick(() => { |
||||
this.timeArr = []; |
||||
this.queryParams.beginTime = ""; |
||||
this.queryParams.endTime = ""; |
||||
}); |
||||
} else { |
||||
this.queryParams.beginTime = this.timeArr[0]; |
||||
this.queryParams.endTime = this.timeArr[1]; |
||||
} |
||||
}, |
||||
/** 查询出入库列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
spareInOutList(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
/** 出库按钮操作 */ |
||||
handleOut() { |
||||
this.open = true; |
||||
this.title = "出库"; |
||||
this.dialogList = []; |
||||
}, |
||||
/** 入库按钮操作 */ |
||||
handleIn() { |
||||
this.open = true; |
||||
this.title = "入库"; |
||||
this.dialogList = []; |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
console.log("出入库参数", this.dialogList); |
||||
for (const row of this.dialogList) { |
||||
// 检查字段 |
||||
const intOutNumValid = this.isValidValue(row.intOutNum); |
||||
// 只要有一个字段无效，就给出错误提示并终止循环 |
||||
if (!intOutNumValid) { |
||||
this.$message.warning(`${this.title}数量不能有空值`); |
||||
return; |
||||
} |
||||
} |
||||
addSpareInOut(this.dialogList).then((response) => { |
||||
this.$modal.msgSuccess(`${this.title}成功`); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
}, |
||||
// 定义一个函数来检查值是否为有效的数字或非空字符串 |
||||
isValidValue(value) { |
||||
if (typeof value === "number" && !isNaN(value)) { |
||||
return true; |
||||
} |
||||
if (typeof value === "string" && value.trim() !== "") { |
||||
return true; |
||||
} |
||||
return false; |
||||
}, |
||||
// 取消编辑 column |
||||
blurColumn(row, index) { |
||||
console.log("blurColumn"); |
||||
// this.$set(this.dialogList[index], "edit", false); |
||||
}, |
||||
// 格式化 |
||||
updateNextRowMes(row, index) { |
||||
// row.intOutNum = Number(row.intOutNum); |
||||
if (this.title === "出库" && row.intOutNum > row.inventoryLevels) { |
||||
this.$message.warning("出库数量不能大于库存剩余量"); |
||||
row.intOutNum = ""; |
||||
} |
||||
}, |
||||
// 弹框-表格-删除 |
||||
delectList(row) { |
||||
const index = this.dialogList.indexOf(row); |
||||
if (index > -1) { |
||||
// 移除当前行 |
||||
this.dialogList.splice(index, 1); |
||||
} |
||||
}, |
||||
// 弹框-select选择事件 |
||||
handleSpare(row, selectedValue) { |
||||
console.log("当前行", row); |
||||
console.log("当前select选中值", selectedValue); |
||||
// 通过选中的 value 找到对应的 label |
||||
const selectedItem = this.spares.find( |
||||
(item) => item.id === selectedValue |
||||
); |
||||
if (selectedItem) { |
||||
const selectedLabel = selectedItem.spareName; |
||||
console.log("选中的 value:", selectedValue); |
||||
console.log("选中的 label:", selectedLabel); |
||||
// 筛选出符合条件的元素，然后提取 inventoryLevels 值 |
||||
const inventoryLevels = this.sparesList |
||||
.filter((item) => item.id === selectedValue) |
||||
.map((item) => item.inventoryLevels); |
||||
// 定义要添加的数据对象 |
||||
const newItem = { |
||||
sparePartsId: selectedValue, |
||||
spareName: selectedLabel, |
||||
intOutNum: "", |
||||
inventoryLevels: inventoryLevels[0], |
||||
}; |
||||
console.log("this.dialogList", this.dialogList); |
||||
// // 将新数据对象添加到 dialogList 数组中 |
||||
// this.dialogList.push(newItem); |
||||
// 直接修改 row 的属性 |
||||
row.sparePartsId = newItem.sparePartsId; |
||||
row.spareName = newItem.spareName; |
||||
row.inventoryLevels = newItem.inventoryLevels; |
||||
} |
||||
}, |
||||
// 弹框-表格-添加设置 |
||||
addPriceSet() { |
||||
let sparePartsId = ""; |
||||
let spareName = ""; |
||||
let inventoryLevels = ""; |
||||
let operaType = ""; |
||||
if (this.title === "出库") { |
||||
operaType = 1; |
||||
} else if (this.title === "入库") { |
||||
operaType = 0; |
||||
} |
||||
// 检查 spares 数组是否有元素 |
||||
if (this.spares.length > 0) { |
||||
sparePartsId = this.spares[0].id; |
||||
spareName = this.spares[0].spareName; |
||||
inventoryLevels = this.spares[0].inventoryLevels; |
||||
} |
||||
// 定义要添加的数据对象 |
||||
const newItem = { |
||||
sparePartsId: sparePartsId, |
||||
spareName: spareName, |
||||
intOutNum: "", |
||||
inventoryLevels: inventoryLevels, |
||||
operaType: operaType, |
||||
}; |
||||
// 将新数据对象添加到 dialogList 数组中 |
||||
this.dialogList.push(newItem); |
||||
}, |
||||
// 获取出入库弹框的的备件列表 |
||||
getSparesList() { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 100000, |
||||
}; |
||||
spareList(data).then((response) => { |
||||
this.spares = response.rows; |
||||
this.sparesList = response.rows; |
||||
// 获取到了备件列表后处理值 |
||||
}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
Loading…
Reference in new issue