feat: 设备告警配置 开放表格编辑 操作
This commit is contained in:
nieli
parent
53b6f32614
commit
e5a9c08749
|
|
@ -14,11 +14,11 @@ port= 9988
|
|||
// 陈志荣 本地
|
||||
//target = http://192.168.18.140:8899
|
||||
// 黄明 本地
|
||||
target = http://192.168.18.134:8899
|
||||
// target = http://192.168.18.134:8899
|
||||
//target = http://192.168.18.139:8899
|
||||
// target = http://192.168.18.136:8899
|
||||
|
||||
// 测试端
|
||||
// target = http://192.168.10.241:32024
|
||||
// 开发端
|
||||
// target = http://192.168.10.241:30646
|
||||
target = http://192.168.10.241:30646
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="e-fail-message">
|
||||
<span v-if="message" class="form-item__error">* {{ message }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EFailMessage",
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
val: {
|
||||
type: [String, Number],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
message: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
val() {
|
||||
//this.handleVerification();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleVerification() {
|
||||
this.$emit("verification", this.form, (msg) => {
|
||||
this.message = msg;
|
||||
return;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.e-fail-message {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.form-item__error {
|
||||
color: #ff4949;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div class="e-table-input">
|
||||
<el-input v-model="form[pops]" @input="handleInput" :disabled="disabled"/>
|
||||
<e-fail-message
|
||||
:val="form[pops]"
|
||||
:form="form"
|
||||
ref="eFailMessage"
|
||||
@verification="handleVerification"
|
||||
></e-fail-message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EFailMessage from './EFailMessage'
|
||||
export default {
|
||||
name: "ETableInput",
|
||||
components: {EFailMessage},
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
require: true
|
||||
},
|
||||
pops: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
form: {
|
||||
deep: true,
|
||||
handler: function () {
|
||||
this.verificationEvent();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
verificationEvent() {
|
||||
this.$refs.eFailMessage?.handleVerification()
|
||||
},
|
||||
handleInput(e) {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleVerification(e, callback) {
|
||||
this.$emit('handleVerification', e, callback);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="device-alarm-config">
|
||||
<!-- <el-row style="margin-bottom: 10px">
|
||||
<el-row style="margin-bottom: 10px">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
|
|
@ -8,16 +8,31 @@
|
|||
size="mini"
|
||||
:disabled="disabledAck"
|
||||
@click="handleSendAck"
|
||||
>同步</el-button
|
||||
>同步下发</el-button
|
||||
>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="同步下发"
|
||||
width="350"
|
||||
trigger="hover">
|
||||
<div>
|
||||
<p>设备配置需要先下发到指定设备，设备配置完成后同步到云端平台</p>
|
||||
<span style="display: block; width: 100%; color: red;">注意*:</span>
|
||||
<span style="color: red;">
|
||||
欠压：报警值 < 最小预警值 < 最大预警值 < 正常值 </br>
|
||||
过压：正常值 < 最小预警值 < 最大预警值 < 报警值
|
||||
</span>
|
||||
</div>
|
||||
<i class="el-icon-question" slot="reference" style="margin-left: 10px; font-size: 20px;"></i>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</el-row>
|
||||
<el-table
|
||||
border
|
||||
:loading="loading"
|
||||
:data="list"
|
||||
class="alarm-table"
|
||||
:height="list.length >= 3 ? '202' : ''"
|
||||
:height="monthTradingTableHeight"
|
||||
:highlight-pageNum-row="true"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -51,6 +66,7 @@
|
|||
active-color="#13ce66"
|
||||
inactive-color="#dcdfe6"
|
||||
class="switch-wrap"
|
||||
@change="handleAlarmSta(scope.row.alarmSta)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -75,18 +91,31 @@
|
|||
prop="alarmValue"
|
||||
label="告警值"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<e-table-input @handleVerification="alarmValueTableCallback" :disabled="!scope.row.alarmSta" :form="scope.row" pops="alarmValue" />
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="warnValueMin"
|
||||
label="最小告警值"
|
||||
label="最小预警值"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<e-table-input @handleVerification="warnValueMinTableCallback" :disabled="!scope.row.warnSta" :form="scope.row" pops="warnValueMin" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="warnValueMax"
|
||||
label="最大告警值"
|
||||
label="最大预警值"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<e-table-input @handleVerification="warnValueMaxTableCallback" :disabled="!scope.row.warnSta" :form="scope.row" pops="warnValueMax" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
|
|
@ -198,6 +227,7 @@ import {
|
|||
deviceSendAlarmConfig,
|
||||
} from "@/api/iot/device";
|
||||
import DialogTemplate from "@/components/DialogTemplate";
|
||||
import ETableInput from '@/components/EUpdateTable/ETableInput'
|
||||
export default {
|
||||
name: "DeviceAlarmConfig",
|
||||
props: {
|
||||
|
|
@ -212,13 +242,14 @@ export default {
|
|||
},
|
||||
components: {
|
||||
DialogTemplate,
|
||||
ETableInput
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
alarmParamOption: [],
|
||||
loading: false,
|
||||
updateGenTable: false,
|
||||
updateGenTable: true,
|
||||
title: "修改",
|
||||
open: false,
|
||||
form: {},
|
||||
|
|
@ -226,6 +257,7 @@ export default {
|
|||
isAck: false,
|
||||
disabledAck: false,
|
||||
uvpList: ["ul_cfg"],
|
||||
monthTradingTableHeight: 'auto',
|
||||
rules: {
|
||||
warnValueMin: [
|
||||
{
|
||||
|
|
@ -263,6 +295,113 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
handleAlarmSta(v) {
|
||||
console.log(v)
|
||||
},
|
||||
|
||||
alarmValueTableCallback(row, callback) {
|
||||
console.log(row)
|
||||
if (!row.alarmSta) {
|
||||
callback();
|
||||
return
|
||||
}
|
||||
|
||||
if(!row.alarmValue && row.alarmValue !== 0) {
|
||||
callback('告警值不能为空！')
|
||||
return
|
||||
}
|
||||
|
||||
const isExp =
|
||||
/^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
|
||||
|
||||
if (row.alarmValue && !isExp.test(row.alarmValue)) {
|
||||
callback("只可以输入数字类型！");
|
||||
return
|
||||
}
|
||||
|
||||
if (!row.warnSta) {
|
||||
callback();
|
||||
return
|
||||
}
|
||||
|
||||
if (this.uvpList.indexOf(row.type) >= 0) {
|
||||
if (
|
||||
(row.warnValueMin || row.warnValueMin === 0) &&
|
||||
+row.warnValueMin < +row.alarmValue
|
||||
) {
|
||||
callback("需要小于最小预警值！");
|
||||
return
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
(row.warnValueMax || row.warnValueMax === 0) &&
|
||||
+row.warnValueMax > +row.alarmValue
|
||||
) {
|
||||
callback("需要大于最大预警值！");
|
||||
return
|
||||
}
|
||||
}
|
||||
callback();
|
||||
},
|
||||
|
||||
warnValueMaxTableCallback(row, callback) {
|
||||
if (!row.warnSta) {
|
||||
callback();
|
||||
return
|
||||
}
|
||||
|
||||
if (!row.warnValueMax && row.warnValueMax !== 0) {
|
||||
callback();
|
||||
return
|
||||
}
|
||||
|
||||
const isExp =
|
||||
/^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
|
||||
|
||||
if (row.warnValueMax && !isExp.test(row.warnValueMax)) {
|
||||
callback("只可以输入数字类型！");
|
||||
return
|
||||
}
|
||||
|
||||
if (
|
||||
(row.warnValueMin || row.warnValueMin === 0) &&
|
||||
+row.warnValueMax < +row.warnValueMin
|
||||
) {
|
||||
callback("需要大于最小预警值！");
|
||||
return
|
||||
}
|
||||
callback();
|
||||
},
|
||||
|
||||
warnValueMinTableCallback(row, callback) {
|
||||
if (!row.warnSta) {
|
||||
callback();
|
||||
return
|
||||
}
|
||||
|
||||
if (!row.warnValueMin && row.warnValueMin !== 0) {
|
||||
callback();
|
||||
return
|
||||
}
|
||||
|
||||
const isExp =
|
||||
/^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
|
||||
if (row.warnValueMin && !isExp.test(row.warnValueMin)) {
|
||||
callback("只可以输入数字类型！");
|
||||
return
|
||||
}
|
||||
|
||||
if (
|
||||
(row.warnValueMax || row.warnValueMax === 0) &&
|
||||
+row.warnValueMin > +row.warnValueMax
|
||||
) {
|
||||
callback("需要小于最大预警值！");
|
||||
return
|
||||
}
|
||||
|
||||
callback();
|
||||
},
|
||||
|
||||
alarmValue(rule, value, callback) {
|
||||
if (!this.form.alarmSta) {
|
||||
callback();
|
||||
|
|
@ -341,6 +480,7 @@ export default {
|
|||
},
|
||||
handleSendAck() {
|
||||
var deviceId = this.deviceId;
|
||||
var list = [...this.list];
|
||||
this.$prompt("请输入登录密码", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
|
|
@ -349,7 +489,9 @@ export default {
|
|||
inputErrorMessage: "登录密码不能为空",
|
||||
}).then(({ value }) => {
|
||||
let params = {
|
||||
data: {},
|
||||
data: {
|
||||
params: list,
|
||||
},
|
||||
deviceId: deviceId,
|
||||
verifyKey: value,
|
||||
};
|
||||
|
|
@ -374,15 +516,17 @@ export default {
|
|||
const list = this.list.map((v) => {
|
||||
return v.type === this.form.type ? Object.assign(v, this.form) : v;
|
||||
});
|
||||
updateDeviceAlarmConfig({
|
||||
devKey: this.deviceKey,
|
||||
params: [...list],
|
||||
}).then((res) => {
|
||||
this.getList();
|
||||
// this.disabledAck = true;
|
||||
this.open = false;
|
||||
this.$forceUpdate();
|
||||
});
|
||||
// 暂时不保存-- 使用统一保存下发方式
|
||||
// updateDeviceAlarmConfig({
|
||||
// devKey: this.deviceKey,
|
||||
// params: [...list],
|
||||
// }).then((res) => {
|
||||
// this.getList();
|
||||
// this.open = false;
|
||||
// this.$forceUpdate();
|
||||
// });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -397,7 +541,6 @@ export default {
|
|||
return this.selectDictLabel(this.alarmParamOption, row.type);
|
||||
},
|
||||
getList() {
|
||||
console.log(this.deviceKey);
|
||||
if (!this.deviceKey && this.deviceKey !== "0") {
|
||||
return;
|
||||
}
|
||||
|
|
@ -405,6 +548,7 @@ export default {
|
|||
getDeviceAlarmConfig(this.deviceKey)
|
||||
.then((response) => {
|
||||
this.list = response.data.alarmCfg;
|
||||
this.monthTradingTableHeight = this.list.length >= 6 ? '387' : 'auto'
|
||||
this.isAck = response.data.isAck === 1 ? true : false;
|
||||
this.loading = false;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -63,7 +63,11 @@
|
|||
<span class="centent secret" :title="infoData.devicePassword">{{
|
||||
infoData.devicePassword
|
||||
}}</span>
|
||||
<el-button type="text" size="small" v-if="isTenant === false" @click.stop="upldatePassword"
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
v-if="isTenant === false"
|
||||
@click.stop="upldatePassword"
|
||||
>修改密码</el-button
|
||||
>
|
||||
<div v-else>
|
||||
|
|
@ -195,6 +199,61 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="group-list-info"
|
||||
style="margin-top: 15px"
|
||||
v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
|
||||
>
|
||||
<div class="top">
|
||||
<div class="top-label">
|
||||
<svg-icon
|
||||
icon-class="A_product1"
|
||||
style="margin-right: 2px; height: 20px; width: 20px"
|
||||
/>告警配置
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="group-list-table"
|
||||
style="border: 0"
|
||||
v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
|
||||
>
|
||||
<device-alarm-config
|
||||
v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
|
||||
:deviceId="infoData.deviceId"
|
||||
:deviceKey="infoData.deviceKey"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="group-list-info"
|
||||
style="margin-top: 15px"
|
||||
v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
|
||||
>
|
||||
<div class="top">
|
||||
<div class="top-label">
|
||||
<svg-icon
|
||||
icon-class="A_product1"
|
||||
style="margin-right: 2px; height: 20px; width: 20px"
|
||||
/>定时器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="group-list-table"
|
||||
style="border: 0"
|
||||
v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
|
||||
>
|
||||
<device-timing-config
|
||||
v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
|
||||
:deviceId="infoData.deviceId"
|
||||
:deviceKey="infoData.deviceKey"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改设备对话框 -->
|
||||
<el-dialog
|
||||
class="eldialog-wrap"
|
||||
|
|
@ -224,9 +283,12 @@
|
|||
</template>
|
||||
<script>
|
||||
import { updateDevice, resetPssword } from "@/api/iot/device";
|
||||
import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig";
|
||||
import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig";
|
||||
export default {
|
||||
name: "DeviceInfo",
|
||||
props: ["infoData", "isTenant"],
|
||||
components: { DeviceTimingConfig, DeviceAlarmConfig },
|
||||
data() {
|
||||
const validatorNull = (rule, value, callback) => {
|
||||
callback();
|
||||
|
|
|
|||
|
|
@ -9,13 +9,23 @@
|
|||
@click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
<el-button
|
||||
type="success"
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="handleSendAck"
|
||||
>同步</el-button
|
||||
> -->
|
||||
>同步下发</el-button
|
||||
>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="同步下发"
|
||||
width="350"
|
||||
trigger="hover">
|
||||
<div>
|
||||
<p>设备定时需要先下发到指定设备，设备配置完成后同步到云端平台</p>
|
||||
</div>
|
||||
<i class="el-icon-question" slot="reference" style="margin-left: 10px; font-size: 20px;"></i>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
|
|
@ -23,7 +33,7 @@
|
|||
:loading="loading"
|
||||
:data="list"
|
||||
class="alarm-table"
|
||||
:height="list.length >= 3 ? '202' : ''"
|
||||
:height="monthTradingTableHeight"
|
||||
:highlight-pageNum-row="true"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -54,8 +64,8 @@
|
|||
<el-switch
|
||||
size="mini"
|
||||
v-model="scope.row.sw"
|
||||
active-text="开启"
|
||||
inactive-text="关闭"
|
||||
active-text="开闸"
|
||||
inactive-text="合闸"
|
||||
:disabled="!updateGenTable"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
|
|
@ -153,6 +163,8 @@
|
|||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
default-time="12:00:00"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
|
@ -161,7 +173,7 @@
|
|||
<el-select
|
||||
v-model="form.mode"
|
||||
placeholder="请选择周期"
|
||||
clearable
|
||||
:clearable="false"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
|
|
@ -210,37 +222,24 @@ export default {
|
|||
list: [],
|
||||
alarmParamOption: [],
|
||||
loading: false,
|
||||
updateGenTable: false,
|
||||
updateGenTable: true,
|
||||
title: "修改",
|
||||
open: false,
|
||||
form: {},
|
||||
pointTime: "",
|
||||
updateIndex: null,
|
||||
monthTradingTableHeight: 'auto',
|
||||
isAck: false,
|
||||
disabledAck: false,
|
||||
uvpList: ["ul_cfg"],
|
||||
rules: {
|
||||
warnValueMin: [
|
||||
point: [
|
||||
{
|
||||
required: true,
|
||||
validator: this.warnValueMin,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
alarmValue: [
|
||||
{
|
||||
required: true,
|
||||
validator: this.alarmValue,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
warnValueMax: [
|
||||
{
|
||||
required: true,
|
||||
validator: this.warnValueMax,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
@ -256,6 +255,12 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
warnValueMin(rule, value, callback) {
|
||||
if (!this.pointTime) {
|
||||
callback(new Error("开始时间不能为空！"));
|
||||
}
|
||||
callback();
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row, index) {
|
||||
this.$confirm("是否删除该数据", "警告", {
|
||||
|
|
@ -267,12 +272,14 @@ export default {
|
|||
list = list.map((v, idx) => {
|
||||
return Object.assign(v, {num: ++idx})
|
||||
})
|
||||
this.sendSumbit(list);
|
||||
// this.sendSumbit(list);
|
||||
this.list = list;
|
||||
this.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
handleSendAck() {
|
||||
var deviceId = this.deviceId;
|
||||
var list = [...this.list];
|
||||
this.$prompt("请输入登录密码", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
|
|
@ -281,7 +288,9 @@ export default {
|
|||
inputErrorMessage: "登录密码不能为空",
|
||||
}).then(({ value }) => {
|
||||
let params = {
|
||||
data: {},
|
||||
data: {
|
||||
params: list
|
||||
},
|
||||
deviceId: deviceId,
|
||||
verifyKey: value,
|
||||
};
|
||||
|
|
@ -328,7 +337,8 @@ export default {
|
|||
list = list.concat([this.form]);
|
||||
}
|
||||
|
||||
this.sendSumbit(list);
|
||||
this.open = false;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -368,6 +378,7 @@ export default {
|
|||
getDeviceTimingConfig(this.deviceKey)
|
||||
.then((response) => {
|
||||
this.list = response.data;
|
||||
this.monthTradingTableHeight = this.list.length >= 5 ? '290px' : 'auto'
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue