240 lines
7.6 KiB
Vue
240 lines
7.6 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { fetchAiAlarmSetting, saveAiAlarmSetting, verifyAccessPassword } from '@/api/platform'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
||
const channelList = ref([
|
||
{ channel_no: 1, singal_type: '4~20mA', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 2, singal_type: '1~5V', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 3, singal_type: '4~20mA', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 4, singal_type: '1~5V', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 5, singal_type: '4~20mA', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 6, singal_type: '1~5V', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 7, singal_type: '4~20mA', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 8, singal_type: '1~5V', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 9, singal_type: '4~20mA', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 10, singal_type: '1~5V', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 11, singal_type: '4~20mA', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
{ channel_no: 12, singal_type: '1~5V', output_node: '', limit_low: 0, limit_high: 8, delay: 8, enabled: false },
|
||
])
|
||
|
||
const nodeOptions = ref(['开出一', '开出二'])
|
||
const isswitch = ref(false)
|
||
const handleSave = () => {
|
||
ElMessageBox.prompt('请输入密码', '保存', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
closeOnClickModal: false,
|
||
// inputType: 'password',
|
||
})
|
||
.then(({ value }) => {
|
||
verifyAccessPassword(value).then((res: any) => {
|
||
if (res.code === 200) {
|
||
if (isswitch.value) {
|
||
return
|
||
}
|
||
isswitch.value = true
|
||
saveAiAlarmSetting(channelList.value).then(res => {
|
||
if (res.code === 200) {
|
||
ElMessage.success('保存成功')
|
||
init()
|
||
isswitch.value = false
|
||
}
|
||
})
|
||
}else{
|
||
ElMessage.error('密码错误')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const init = () => {
|
||
fetchAiAlarmSetting().then(res => {
|
||
console.log(res, 989)
|
||
res.forEach(item => {
|
||
channelList.value.forEach((channel: any) => {
|
||
if (channel.channel_no === item.channel_no) {
|
||
channel.singal_type = item.singal_type
|
||
channel.output_node = item.output_node
|
||
channel.limit_low = item.limit_low
|
||
channel.limit_high = item.limit_high
|
||
channel.delay = item.delay
|
||
channel.enabled = item.enabled
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="ai-alarm-container">
|
||
<div class="panel">
|
||
<div class="row header-row">
|
||
<div class="cell cell-no">通道号</div>
|
||
<div class="cell cell-type" style="color: #787878;">信号类型</div>
|
||
<div class="cell cell-line">下限值</div>
|
||
<div class="cell cell-category">上限值</div>
|
||
<div class="cell cell-low">延时（s）</div>
|
||
<div class="cell cell-high">输出节点</div>
|
||
<div class="cell cell-high">是否投入</div>
|
||
</div>
|
||
<div class="row" v-for="(item, idx) in channelList" :key="idx">
|
||
<div class="cell cell-no">{{ item.channel_no }}</div>
|
||
<div class="cell cell-type" style="background: #ffffff;">{{ item.singal_type }}</div>
|
||
<div class="cell cell-line" style="background: #ffffff;">
|
||
<el-input-number v-model="item.limit_low" style="width: 100%;" :controls="false" />
|
||
</div>
|
||
<div class="cell cell-low" style="background: #ffffff;">
|
||
<el-input-number v-model="item.limit_high" style="width: 100%;" :controls="false" />
|
||
</div>
|
||
<div class="cell cell-high" style="background: #ffffff;">
|
||
<el-input-number v-model="item.delay" style="width: 100%;" :controls="false" />
|
||
</div>
|
||
<div class="cell cell-line" style="background: #ffffff;">
|
||
<el-select v-model="item.output_node">
|
||
<el-option v-for="line in nodeOptions" :key="line" :value="line" :label="line"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="cell cell-category" style="background: #ffffff;">
|
||
<el-switch v-model="item.enabled" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-wrap">
|
||
<button class="save-btn" @click="handleSave">保存</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.ai-alarm-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 20px;
|
||
|
||
.panel {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 16px;
|
||
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
|
||
}
|
||
|
||
.title {
|
||
margin: 0 0 16px 0;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #363636;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
margin-bottom: 8px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.header-row .cell {
|
||
background-color: #f9fafe;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cell {
|
||
border: 1px solid #e4e4e4;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 37px;
|
||
box-sizing: border-box;
|
||
background-color: #f9fafe;
|
||
color: #787878;
|
||
|
||
&+.cell {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
.cell-no {
|
||
width: 100px;
|
||
background: #f9fafe;
|
||
}
|
||
|
||
.cell-type {
|
||
flex: 1;
|
||
background: transparent;
|
||
color: #363636;
|
||
}
|
||
|
||
.cell-line {
|
||
flex: 1;
|
||
}
|
||
|
||
.cell-category {
|
||
flex: 1;
|
||
}
|
||
|
||
.cell-low {
|
||
flex: 1;
|
||
}
|
||
|
||
.cell-high {
|
||
flex: 1;
|
||
}
|
||
|
||
select,
|
||
input {
|
||
width: 85%;
|
||
height: 32px;
|
||
border: none;
|
||
outline: none;
|
||
text-align: center;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.btn-wrap {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.save-btn {
|
||
background-color: #0099ff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
width: 150px;
|
||
height: 40px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
// 去掉所有边框 + 阴影
|
||
: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> |