emcp/frontend/src/views/lineSetting/index.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},
    ],
})
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
    })
}
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
                faultItem.enabled = item.enabled
                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
                overLimitItem.enabled = item.enabled
                overLimitItem.output_node = item.output_node
                overLimitItem.limit = item.limit || 0
            }
        })
       })
    })
}
const isswitch = ref(false)
const dialogVisible = ref(false)
const handleSave = () => {
    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: 265px;">越限告警</div>
                    <div class="tab-content-item-box" style="height: 85px;">故障告警</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>
                <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>
                <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>
                <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>
                 <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>
            </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: 20px;

    .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: 20px 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: 40px;
                }
            }

        }

        .save-btn {
            margin-top: 30px;
            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>