楼宇能效监测控制系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

963 lines
30 KiB

<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"
>
<el-form-item label="仪表类型" prop="mtType">
<el-select
v-model="queryParams.mtType"
placeholder="请选择仪表类型"
clearable
filterable
>
<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
filterable
>
<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
filterable
>
<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="['device:cpm: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="['device:cpm: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="['device:cpm: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"
stripe
>
<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="digits" />
<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="curTime" />
<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="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="deviceLedgerId"
:formatter="formatDeviceLedger"
>
</el-table-column>
<el-table-column label="别名" align="center" prop="otherName" />
<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="['device:cpm:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['device:cpm: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" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="仪表类型" prop="mtType">
<el-select
v-model="form.mtType"
placeholder="请选择仪表类型"
clearable
filterable
>
<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
filterable
>
<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
filterable
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
filterable
>
<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
filterable
>
<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
filterable
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
filterable
>
<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
filterable
>
<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
filterable
>
<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
filterable
@change="handleDeviceType"
>
<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="设备名称" prop="deviceLedgerId">
<el-select
v-model="form.deviceLedgerId"
placeholder="请选择设备名称"
clearable
filterable
>
<el-option
v-for="item in ledgerList"
:key="item.id"
:label="item.deviceName"
:value="item.id"
/>
</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 {
cpmList,
getCPM,
delCPM,
addCPM,
updateCPM,
} from "@/api/device/gather";
import { ledgerList } from "@/api/device/ledger";
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" },
],
},
ledgerList: [], //设备台账列表
};
},
created() {
this.getLedgerList();
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;
});
},
// 选择采集设备的时候,请求设备台账列表
handleDeviceType() {
this.getLedgerList();
},
// 查找设备台账列表
getLedgerList() {
let data = {
pageNum: 1,
pageSize: 100000,
deviceType: this.form.terminalDeviceType,
};
ledgerList(data).then((response) => {
this.ledgerList = response.rows;
});
},
// 格式化设备类型的函数
formatDeviceLedger(row, column, cellValue) {
// 查找 devices 数组中 id 等于 cellValue 的对象
const device = this.ledgerList.find((item) => item.id === cellValue);
// 如果找到,返回对应的 deviceName,否则返回原始值
return device ? device.deviceName : cellValue;
},
// 取消按钮
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 !== null
? response.data.deviceLedgerId.toString()
: null,
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 = "修改设备参数信息";
this.getLedgerList();
console.log("打开修改弹框的时候,设备类型是", this.form.deviceLedgerId);
});
},
/** 提交按钮 */
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>
<style scoped lang="scss">
/* 媒体查询适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 140px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7.5rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.4rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>