huimv.client.demo2/src/views/system/deviceConfig.vue

<template>
    <div class="deviceConfig">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">设备配置</h2>
        <section class="section">
            <el-row type="flex">
                <el-col :span="20">
                    <el-form
                        ref="deviceConfig"
                        :model="formData"
                        :rules="rules"
                        label-width="140px"
                    >
                        <el-form-item label="服务器地址">
                            <el-input v-model="formData.serverAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="上传间隔">
                            <el-input v-model="formData.timeInterval">
                                <template slot="append">分钟 [ 1-60 ]</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="1-3日龄高温">
                            <el-input v-model="formData.T1_3">
                                <template slot="append">摄氏度 [ 20-35℃ ]</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="4-7日龄高温">
                            <el-input v-model="formData.T4_7">
                                <template slot="append">摄氏度 [ 20-35℃ ]</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="8-14日龄高温">
                            <el-input v-model="formData.T8_14">
                                <template slot="append">摄氏度 [ 20-35℃ ]</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="15-30日龄高温">
                            <el-input v-model="formData.T15_30">
                                <template slot="append">摄氏度 [ 20-35℃ ]</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-row type="flex" justify="end">
                                <el-button type="primary" @click="submitForm('deviceConfig')">保 存</el-button>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </section>
    </div>
</template>


<script>
import { reqDeviceConfig, reqAddOrUpdateDeviceConfig } from "@/api/system.js";

const rules = {};

export default {
    name: "deviceConfig",
    data() {
        return {
            rules,
            reqInfo: {},
            formData: {
                serverAddress: "",
                timeInterval: "",
                T1_3: "",
                T4_7: "",
                T8_14: "",
                T15_30: ""
            }
        };
    },
    created() {
        this.getDeviceConfig();
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.AddOrUpdateDeviceConfig();
                } else {
                    return false;
                }
            });
        },
        getDeviceConfig() {
            reqDeviceConfig()
                .then(res => {
                    console.log(res);
                    this.reqInfo = res;
                    res.conf.data.forEach(item => {
                        this.formData[item.key] = item.val;
                    });
                })
                .catch(err => {
                    console.error(err);
                });
        },
        AddOrUpdateDeviceConfig() {
            let tempArr = [];
            for (const key in this.formData) {
                tempArr.push({ key, val: this.formData[key] });
            }
            this.reqInfo.conf = JSON.stringify({
                data: tempArr
            });
            reqAddOrUpdateDeviceConfig(this.reqInfo)
                .then(res => {
                    console.log(res);
                    this.getDeviceConfig();
                    if (res.errCode) {
                        this.$message.error(res.errMsg);
                    } else {
                        this.$message.success("成功");
                    }
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.deviceConfig {
    .section {
        width: 650px;
        // background-color: #eee;
        // border-radius: 15px;
        padding: 30px;
    }
}
</style>