You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

398 lines
13 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="设备ID" prop="deviceId">
<el-input
v-model="queryParams.deviceId"
placeholder="请输入设备ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<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="paramCode">-->
<!-- <el-input-->
<!-- v-model="queryParams.paramCode"-->
<!-- placeholder="请输入参数编号"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="参数名称" prop="paramName">-->
<!-- <el-input-->
<!-- v-model="queryParams.paramName"-->
<!-- placeholder="请输入参数名称"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="参数IP" prop="paramIp">-->
<!-- <el-input-->
<!-- v-model="queryParams.paramIp"-->
<!-- placeholder="请输入参数IP"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="参数地址" prop="paramAddress">-->
<!-- <el-input-->
<!-- v-model="queryParams.paramAddress"-->
<!-- placeholder="请输入参数地址"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="读取频率" prop="readFrequency">-->
<!-- <el-input-->
<!-- v-model="queryParams.readFrequency"-->
<!-- placeholder="请输入读取频率"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="是否标识1-是2-否" prop="isFlag">-->
<!-- <el-input-->
<!-- v-model="queryParams.isFlag"-->
<!-- placeholder="请输入是否标识1-是2-否"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['dms:param:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['dms:param:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['dms:param:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['dms:param:export']"
>导出</el-button>
</el-col>
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
</el-row>
<el-table v-loading="loading" :data="paramList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键标识" align="center" prop="deviceParamId" />-->
<el-table-column label="设备ID" align="center" prop="deviceId" />
<el-table-column label="设备名称" align="center" prop="deviceId" >
<template slot-scope="scope">
<span
v-for="(item, index) in ledgerList"
:key="index"
:value="item.ledgerList"
v-if="scope.row.deviceId == item.deviceId"
>
{{ item.deviceName }}
</span>
</template>
</el-table-column>
<el-table-column label="参数编号" align="center" prop="paramCode" />
<el-table-column label="参数名称" align="center" prop="paramName" />
<el-table-column label="参数IP" align="center" prop="paramIp" />
<el-table-column label="参数地址" align="center" prop="paramAddress" />
<el-table-column label="参数类型" align="center" prop="paramType" />
<el-table-column label="读取频率" align="center" prop="readFrequency" />
<!-- <el-table-column label="是否标识1-是2-否" align="center" prop="isFlag" />-->
<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="['dms:param:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['dms:param: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="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!-- <el-form-item label="设备ID" prop="deviceId">-->
<!-- <el-input v-model="form.deviceId" placeholder="请输入设备ID" />-->
<!-- </el-form-item>-->
<el-form-item label="设备名称" prop="deviceId" >
<el-select v-model="form.deviceId" placeholder="请选择设备">
<el-option
v-for="item in ledgerList"
:key="item.deviceId"
:label="item.deviceName"
:value="item.deviceId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="参数编号" prop="paramCode">
<el-input v-model="form.paramCode" placeholder="请输入参数编号" />
</el-form-item>
<el-form-item label="参数名称" prop="paramName">
<el-input v-model="form.paramName" placeholder="请输入参数名称" />
</el-form-item>
<el-form-item label="参数类型" prop="paramType">
<el-input v-model="form.paramType" placeholder="请输入参数类型" />
</el-form-item>
<el-form-item label="参数IP" prop="paramIp">
<el-input v-model="form.paramIp" placeholder="请输入参数IP" />
</el-form-item>
<el-form-item label="参数地址" prop="paramAddress">
<el-input v-model="form.paramAddress" placeholder="请输入参数地址" />
</el-form-item>
<el-form-item label="读取频率" prop="readFrequency">
<el-input v-model="form.readFrequency" placeholder="请输入读取频率" />
</el-form-item>
<!-- <el-form-item label="是否标识1-是2-否" prop="isFlag">-->
<!-- <el-input v-model="form.isFlag" placeholder="请输入是否标识1-是2-否" />-->
<!-- </el-form-item>-->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listParam, getParam, delParam, addParam, updateParam } from "@/api/dms/param";
import {getDeviceLedgerList, listLedger} from '@/api/dms/ledger'
export default {
name: "Param",
data() {
return {
ledgerList:[],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备参数信息表格数据
paramList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceId: null,
paramCode: null,
paramName: null,
paramIp: null,
paramAddress: null,
paramType: null,
readFrequency: null,
isFlag: null,
deviceName:null,
},
// 表单参数
form: {},
// 表单校验
rules: {
deviceId: [
{ required: true, message: "设备ID", trigger: "blur" }
],
paramName: [
{ required: true, message: "参数名称不能为空", trigger: "blur" }
],
readFrequency :[
{pattern:/^[1-9]\d*$/,message: "读写频率必须为整数",trigger: "blur" }
],
// isFlag: [
// { required: true, message: "是否标识1-是2-否不能为空", trigger: "blur" }
// ],
}
};
},
created() {
this.getList();
this.getDeviveLedger();
},
methods: {
/** 查询设备台账信息列表 */
getDeviveLedger() {
getDeviceLedgerList({}).then(response => {
this.ledgerList = response.data;
});
},
/** 查询设备参数信息列表 */
getList() {
this.loading = true;
listParam(this.queryParams).then(response => {
this.paramList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deviceParamId: null,
deviceId: null,
paramCode: null,
paramName: null,
paramIp: null,
paramAddress: null,
paramType: null,
readFrequency: null,
isFlag: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.deviceParamId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加设备参数信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const deviceParamId = row.deviceParamId || this.ids
getParam(deviceParamId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改设备参数信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.deviceParamId != null) {
updateParam(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addParam(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const paramCode = row.paramCode || this.ids;
const deviceParamIds = row.deviceParamId || this.ids;
this.$modal.confirm('是否确认删除设备参数编号为"' + paramCode + '"的数据项?').then(function() {
return delParam(deviceParamIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('dms/param/export', {
...this.queryParams
}, `param_${new Date().getTime()}.xlsx`)
}
}
};
</script>