486 lines
19 KiB
Vue
486 lines
19 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { fetchLineAlarmSetting, saveLineAlarmSetting, verifyAccessPassword } from '@/api/platform'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
const lineTabs = ref([
|
||
{
|
||
label: '线路一定值',
|
||
value: '1'
|
||
},
|
||
{
|
||
label: '线路二定值',
|
||
value: '2'
|
||
},
|
||
{
|
||
label: '线路三定值',
|
||
value: '3'
|
||
},
|
||
{
|
||
label: '线路四定值',
|
||
value: '4'
|
||
},
|
||
{
|
||
label: '线路五定值',
|
||
value: '5'
|
||
}
|
||
])
|
||
const activeTab = ref('1')
|
||
const infoList = ref({
|
||
line_no: 1,
|
||
fault_alarm: [
|
||
{ category: 'PT断线', delay: 0, enabled: false, output_node: '', limit: 0 },
|
||
{ category: 'CT断线', delay: 0, enabled: false, output_node: '', limit: 0 },
|
||
],
|
||
over_limit_alarm: [
|
||
{ category: '电压', delay: 0, enabled: false, output_node: '', limit: 0 },
|
||
{ category: '电流', delay: 0, enabled: false, output_node: '', limit: 0 },
|
||
{ category: '差流', delay: 0, enabled: false, output_node: '', limit: 0 },
|
||
{ category: '功率', delay: 0, enabled: false, output_node: '', limit: 0 },
|
||
{ category: '频率', delay: 0, enabled: false, output_node: '', limit: 0 },
|
||
],
|
||
transformer_change: [
|
||
{ category: 'PT变比',value: 0,},
|
||
{ category: 'CT变比',value: 0,},
|
||
]
|
||
|
||
})
|
||
const options = ref([
|
||
{
|
||
label: '开出1',
|
||
value: '开出1'
|
||
},
|
||
{
|
||
label: '开出2',
|
||
value: '开出2'
|
||
},
|
||
{
|
||
label: '开出3',
|
||
value: '开出3'
|
||
},
|
||
{
|
||
label: '开出4',
|
||
value: '开出4'
|
||
},
|
||
{
|
||
label: '开出5',
|
||
value: '开出5'
|
||
},
|
||
{
|
||
label: '开出6',
|
||
value: '开出6'
|
||
},
|
||
{
|
||
label: '开出7',
|
||
value: '开出7'
|
||
},
|
||
{
|
||
label: '开出8',
|
||
value: '开出8'
|
||
},
|
||
{
|
||
label: '开出9',
|
||
value: '开出9'
|
||
},
|
||
{
|
||
label: '开出10',
|
||
value: '开出10'
|
||
},
|
||
{
|
||
label: '开出11',
|
||
value: '开出11'
|
||
},
|
||
{
|
||
label: '开出12',
|
||
value: '开出12'
|
||
},
|
||
])
|
||
const cleardata = () => {
|
||
infoList.value.fault_alarm.forEach(item => {
|
||
item.delay! = 0
|
||
item.enabled! = false
|
||
item.output_node! = ''
|
||
item.limit! = 0
|
||
})
|
||
infoList.value.over_limit_alarm.forEach(item => {
|
||
item.delay! = 0
|
||
item.enabled! = false
|
||
item.output_node! = ''
|
||
item.limit! = 0
|
||
})
|
||
infoList.value.transformer_change.forEach(item => {
|
||
item.value! = 0
|
||
})
|
||
}
|
||
const currentLine = ref(1)
|
||
const handleTabClick = (tab: string) => {
|
||
activeTab.value = tab
|
||
infoList.value.line_no = Number(tab)
|
||
currentLine.value = Number(tab)
|
||
init()
|
||
}
|
||
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
const init = () => {
|
||
fetchLineAlarmSetting(currentLine.value).then(res => {
|
||
infoList.value.line_no = res.line_no
|
||
cleardata()
|
||
res.fault_alarm.forEach(item => {
|
||
infoList.value.fault_alarm.forEach((faultItem, idx) => {
|
||
if (faultItem.category === item.category) {
|
||
faultItem.delay! = item.delay || 0
|
||
faultItem.enabled! = item.enabled || false
|
||
faultItem.output_node! = item.output_node || ''
|
||
faultItem.limit! = item.limit || 0
|
||
}
|
||
})
|
||
})
|
||
res.over_limit_alarm.forEach(item => {
|
||
infoList.value.over_limit_alarm.forEach((overLimitItem, idx) => {
|
||
if (overLimitItem.category === item.category) {
|
||
overLimitItem.delay! = item.delay || 0
|
||
overLimitItem.enabled! = item.enabled || false
|
||
overLimitItem.output_node! = item.output_node || ''
|
||
overLimitItem.limit! = item.limit || 0
|
||
}
|
||
})
|
||
})
|
||
res.transformer_change.forEach(item => {
|
||
infoList.value.transformer_change.forEach((transformerChangeItem, idx) => {
|
||
if (transformerChangeItem.category === item.category) {
|
||
transformerChangeItem.value! = item.value || 0
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
const isswitch = ref(false)
|
||
const dialogVisible = ref(false)
|
||
const handleSave = () => {
|
||
console.log(infoList.value)
|
||
ElMessageBox.prompt('请输入密码', '保存', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
closeOnClickModal: false,
|
||
// inputType: 'password',
|
||
})
|
||
.then(({ value }) => {
|
||
verifyAccessPassword(value).then((res: any) => {
|
||
if (res.data) {
|
||
if (isswitch.value) {
|
||
return
|
||
}
|
||
isswitch.value = true
|
||
saveLineAlarmSetting(infoList.value).then(res => {
|
||
if (res.code === 200) {
|
||
ElMessage.success('保存成功')
|
||
init()
|
||
isswitch.value = false
|
||
} else {
|
||
ElMessage.error('保存失败')
|
||
}
|
||
})
|
||
} else {
|
||
isswitch.value = false
|
||
dialogVisible.value = true
|
||
}
|
||
})
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="line-page">
|
||
<div class="line-tabs">
|
||
<div class="tab-item" v-for="item in lineTabs" :key="item.value"
|
||
:class="{ 'is-active': activeTab === item.value }" @click="handleTabClick(item.value)">
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
<div class="line-tabs-box">
|
||
<div class="tab-content">
|
||
<div class="tab-content-item">
|
||
<div class="tab-content-item-box" style="height: 235px;">越限告警</div>
|
||
<div class="tab-content-item-box" style="height: 75px;">故障告警</div>
|
||
<div class="tab-content-item-box" style="height: 35px;">互感器变比</div>
|
||
</div>
|
||
<div class="tab-content-item">
|
||
<div class="tab-content-item-box box-height">类别</div>
|
||
<div class="tab-content-item-box box-color box-height">电压</div>
|
||
<div class="tab-content-item-box box-color box-height">电流</div>
|
||
<div class="tab-content-item-box box-color box-height">差流</div>
|
||
<div class="tab-content-item-box box-color box-height">功率</div>
|
||
<div class="tab-content-item-box box-color box-height">频率</div>
|
||
<div class="tab-content-item-box box-color box-height">PT断线</div>
|
||
<div class="tab-content-item-box box-color box-height">CT断线</div>
|
||
<div class="tab-content-item-box box-color box-height">PT变比</div>
|
||
</div>
|
||
<div class="tab-content-item">
|
||
<div class="tab-content-item-box box-height">限值</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[0].limit" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[1].limit" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[2].limit" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.fault_alarm[0].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.fault_alarm[1].limit" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height" style="border: none;">
|
||
<img src="@/assets/images/menuicon/noitem.png" style="width: 100%; height: 100%;" alt="">
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height" style="border: none;">
|
||
<img src="@/assets/images/menuicon/noitem.png" style="width: 100%; height: 100%;" alt="">
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.transformer_change[0].value" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
</div>
|
||
<div class="tab-content-item">
|
||
<div class="tab-content-item-box box-height">延时（s）</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[0].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[1].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[2].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[3].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.over_limit_alarm[4].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.fault_alarm[0].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.fault_alarm[1].delay" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
CT变比
|
||
</div>
|
||
</div>
|
||
<div class="tab-content-item">
|
||
<div class="tab-content-item-box box-height">输出节点</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-select v-model="infoList.over_limit_alarm[0].output_node">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-select v-model="infoList.over_limit_alarm[1].output_node">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-select v-model="infoList.over_limit_alarm[2].output_node">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-select v-model="infoList.over_limit_alarm[3].output_node">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-select v-model="infoList.over_limit_alarm[4].output_node">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-select v-model="infoList.fault_alarm[0].output_node">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-select v-model="infoList.fault_alarm[1].output_node">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-input-number v-model="infoList.transformer_change[1].value" style="width: 100%;"
|
||
:controls="false" />
|
||
</div>
|
||
</div>
|
||
<div class="tab-content-item">
|
||
<div class="tab-content-item-box box-height">是否投入</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-switch v-model="infoList.over_limit_alarm[0].enabled"></el-switch>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-switch v-model="infoList.over_limit_alarm[1].enabled"></el-switch>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-switch v-model="infoList.over_limit_alarm[2].enabled"></el-switch>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-switch v-model="infoList.over_limit_alarm[3].enabled"></el-switch>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-switch v-model="infoList.over_limit_alarm[4].enabled"></el-switch>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-switch v-model="infoList.fault_alarm[0].enabled"></el-switch>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height">
|
||
<el-switch v-model="infoList.fault_alarm[1].enabled"></el-switch>
|
||
</div>
|
||
<div class="tab-content-item-box box-color box-height" style="border: none;">
|
||
<img src="@/assets/images/menuicon/noitem.png" style="width: 100%; height: 100%;" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
|
||
</div>
|
||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" :show-close="false" title="错误提示" width="300">
|
||
<div style="color: #FF4D4F;font-size: 16px;text-align: center;">原密码验证错误！</div>
|
||
<template #footer>
|
||
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.line-page {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 15px;
|
||
|
||
.line-tabs {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding-left: 20px;
|
||
|
||
.tab-item {
|
||
width: 120px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background-color: #e9ecf3;
|
||
border: 1px solid #dfe4ee;
|
||
border-radius: 10px;
|
||
border-bottom-right-radius: 0px;
|
||
border-bottom-left-radius: 0px;
|
||
box-shadow: 0px 0px 6px rgba(232, 236, 244, 1);
|
||
font-size: 14px;
|
||
color: #606060;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.is-active {
|
||
color: #ffffff;
|
||
background-color: #0099ff;
|
||
border-color: #0099ff;
|
||
}
|
||
}
|
||
|
||
.line-tabs-box {
|
||
width: 100%;
|
||
|
||
.tab-content {
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 60px 0;
|
||
background-color: #ffffff;
|
||
// height: calc(100vh - 260px);
|
||
border-radius: 4px;
|
||
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
|
||
padding: 10px 20px;
|
||
min-height: max-content;
|
||
gap: 5px;
|
||
|
||
.tab-content-item {
|
||
width: calc(100% / 6);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
|
||
.tab-content-item-box {
|
||
width: 100%;
|
||
background-color: #f9fafe;
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(228, 228, 228, 1);
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #787878;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
text-align: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.box-color {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.box-height {
|
||
height: 35px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.save-btn {
|
||
margin-top: 10px;
|
||
width: 150px;
|
||
height: 40px;
|
||
font-size: 14px;
|
||
background-color: #0099ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-select__wrapper),
|
||
:deep(.el-input__wrapper) {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
background: transparent !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
:deep(.el-select__wrapper.is-hover),
|
||
:deep(.el-input__wrapper.is-hover),
|
||
:deep(.el-select__wrapper.is-focused),
|
||
:deep(.el-input__wrapper.is-focused) {
|
||
box-shadow: none !important;
|
||
border: none !important;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
text-align: center !important;
|
||
}
|
||
</style> |