emcp/frontend/src/views/communicationSetting/index.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { fetchDeviceNet, fetchDevicePort, saveDeviceNetConfig, saveDevicePortConfig, verifyAccessPassword, fetchChannelConfig } from '@/api/platform'
// 表单数据
const formData: any = ref({
    nic: '',
    ip: '',
    mask: '',
    gateway: '',
    protocol: '',
})
const formData2: any = ref({
    port: '',
    baud: null,
    parity: '',
    data_bits: null,
    stop_bits: null,
    protocol: ''
})
const networkCardOptions: any = ref([
    { label: '网卡一', value: '网卡一' },
    { label: '网卡二', value: '网卡二' },
])

const tcpProtocolOptions: any = [
    { label: 'Modbus TCP', value: 'Modbus TCP' },
    { label: 'IEC104 ', value: 'IEC104' }
]

const comPortOptions: any = ref([
    { label: 'COM1', value: 'COM1' },
    { label: 'COM2', value: 'COM2' },
])

const baudRateOptions = [
    { label: '9600', value: 9600 },
    { label: '19200', value: 19200 },
    { label: '38400', value: 38400 },
    { label: '57600', value: 57600 },
    { label: '115200', value: 115200 }
]

const parityOptions = [
    { label: 'NONE', value: 'NONE' },
    { label: 'EVEN', value: 'EVEN' },
    { label: 'ODD', value: 'ODD' }
]

const dataBitsOptions = [
    { label: '5', value: 5 },
    { label: '6', value: 6 },
    { label: '7', value: 7 },
    { label: '8', value: 8 }
]

const stopBitsOptions = [
    { label: '1', value: 1 },
    { label: '2', value: 2 }
]

const rtuProtocolOptions = [
    { label: 'Modbus RTU', value: 'Modbus RTU' },
    { label: 'IEC101 ', value: 'IEC101' }
]

// 保存
const handleSave = () => {
    ElMessageBox.prompt('请输入密码', '保存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
    })
        .then(({ value }) => {
            verifyAccessPassword(value).then((res: any) => {
                if (res.data) {
                    
                    saveDeviceNetConfig(formData.value).then((res: any) => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: `保存成功`,
                            })
                        } else {
                            ElMessage({
                                type: 'info',
                                message: '保存失败',
                            })
                        }
                    })
                    saveDevicePortConfig(formData2.value).then((res: any) => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: `保存成功`,
                            })
                        } else {
                            ElMessage({
                                type: 'info',
                                message: '保存失败',
                            })
                        }
                    })
                    
                } else {
                    ElMessage({
                        type: 'info',
                        message: '密码错误,不能修改！',
                    })
                }
            })
        })
        .catch(() => {
            //   ElMessage({
            //     type: 'info',
            //     message: '密码错误',
            //   })
        })
    console.log('保存配置:', formData.value)
}
const config: any = ref({})
const handleChange = (val: any) => {
    fetchDeviceNet(val).then((res: any) => {
        formData.value = res
    })
}
const handleChangePort = (val: any) => {
    fetchDevicePort(val).then((res: any) => {
        formData2.value = res
    })
}
function init() {
    fetchDeviceNet('网卡一').then((res: any) => {
        formData.value = res
    })
    fetchDevicePort('COM1').then((res: any) => {
        formData2.value = res
    })
    fetchChannelConfig().then((res: any) => {
        config.value = res
    })
}
onMounted(() => {
    init()
})

</script>

<template>
    <div class="communication-container">
        <el-form :model="formData" label-width="100px" class="form-wrapper">
            <div class="section">
                <div class="section-title">
                    <div class="icon"></div>
                    <div>常规配置</div>
                </div>
                <div class="form-row">
                    <el-form-item label="网卡号">
                        <el-select v-model="formData.nic" placeholder="请选择" @change="handleChange">
                            <el-option v-for="item in networkCardOptions" :key="item.value" :label="item.label"
                                :value="item.label" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="IP地址">
                        <el-input v-model="formData.ip" />
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="子网掩码">
                        <el-input v-model="formData.mask" />
                    </el-form-item>
                    <el-form-item label="默认网关">
                        <el-input v-model="formData.gateway" />
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="通讯协议">
                        <el-select v-model="formData.protocol" placeholder="请选择">
                            <el-option v-for="item in tcpProtocolOptions" :key="item.value" :label="item.label"
                                :value="item.label" />
                        </el-select>
                    </el-form-item>
                    <el-form-item />
                </div>
            </div>
            <div class="section">
                <div class="section-title">
                    <div class="icon"></div>
                    <div>串口设置</div>
                </div>
                <div class="form-row">
                    <el-form-item label="串口号">
                        <el-select v-model="formData2.port" placeholder="请选择" @change="handleChangePort">
                            <el-option v-for="item in comPortOptions" :key="item.label" :label="item.label"
                                :value="item.label" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="波特率">
                        <el-select v-model="formData2.baud" placeholder="请选择">
                            <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="校验位">
                        <el-select v-model="formData2.parity" placeholder="请选择">
                            <el-option v-for="item in parityOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据位">
                        <el-select v-model="formData2.data_bits" placeholder="请选择">
                            <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="停止位">
                        <el-select v-model="formData2.stop_bits" placeholder="请选择">
                            <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="通讯协议">
                        <el-select v-model="formData2.protocol" placeholder="请选择">
                            <el-option v-for="item in rtuProtocolOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </div>
            </div>

        </el-form>
        <div class="btn-wrapper">
            <el-button type="primary" style="background-color: #0099ff;width: 150px;height: 40px;"
                @click="handleSave">保存</el-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.communication-container {
    width: 100%;
    height: 100%;
    padding: 20px;

    .form-wrapper {
        background: #fff;
        padding: 20px 50px;
        border-radius: 4px;
        padding-bottom: 120px;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
    }

    .section {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #ebeef5;

        &:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .section-title {
            font-size: 16px;
            font-weight: 500;
            margin: 0 0 21px 0;
            display: flex;
            align-items: center;
            font-weight: 700;
            font-style: normal;
            font-size: 18px;
            color: #333333;

            .icon {
                width: 4px;
                height: 14px;
                margin-right: 8px;
                background-color: #0099ff;
            }
        }
    }

    .form-row {
        display: flex;
        gap: 40px;
        margin-bottom: 16px;

        .el-form-item {
            flex: 1;
            margin-bottom: 0;
        }
    }

    .btn-wrapper {
        margin-top: 20px;
    }

}

:deep(.el-form-item--label-right .el-form-item__label) {
    text-align: left;
    justify-content: flex-start;
    color: #787878;
}

:deep(.el-select__placeholder) {
    color: #363636;
}

:deep(.el-input__inner) {
    color: #363636;
    min-height: 40px;
}

:deep(.el-select__wrapper) {
    min-height: 40px;
}
</style>