添加机房定位信息管理

whychdw

2020-11-23 0e6a93250d8c5e921ae45e42f3347c04d75f9d62

添加机房定位信息管理

 src/components/PageMenu.vue

@@ -122,6 +122,13 @@
                            closable: true
                        },
                        {
                            label: "机房定位信息管理",
                            name: "homeAddressInfoManage",
                            src: "#/dataMager/homeAddressInfoManage",
                            permitName: 'batt_map_edit_permit',
                            closable: true
                        },
                        {
                            label: "电池信息统计分析",
                            name: 'produceTotal',
                            src: "#/dataMager/produceTotal",

 src/pages/AddLicense.vue

New file
@@ -0,0 +1,51 @@
<template>
    <div class="params-container">
        <el-form
                ref="ruleForm"
                size="mini"
                label-position="top"
                :model="params"
                :rules="rules"
                class="params-dialog">
            <el-form-item label="激活码" prop="license">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 20, maxRows: 30}"
                    placeholder="请输入内容"
                    v-model="params.license"></el-input>
            </el-form-item>
            <div class="form-footer">
                <three-btn>确定</three-btn>
                <three-btn>取消</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "AddLicense",
        data() {
            return {
                params: {
                    license: ""
                },
                rules: {}
            }
        }
    }
</script>

<style scoped>
.params-container {
    padding: 8px 8px 0 8px;
    background-color: #ececec;
}
.form-footer {
    margin-top: 16px;
    text-align: right;
}
.form-footer .three-btn {
    margin-left: 12px;
}
</style>

 src/pages/dataMager/battGroupMager.vue

@@ -277,7 +277,7 @@
                <el-table-column
                fixed="right"
                label="操作"
                width="240"
                width="250"
                align="center">
                    <template slot-scope="scope">
                        <el-button :disabled="!isCanEdit" @click="handleClick(scope.row)" type="primary" size="mini">编辑</el-button>

 src/pages/dataMager/dialog/AddHomeInfo.vue

New file
@@ -0,0 +1,218 @@
<template>
    <div class="params-container">
        <el-form
            ref="ruleForm"
            size="mini"
            label-position="top"
            :model="params"
            :rules="rules"
            class="params-dialog bg-white">
            <el-form-item label="机房名称" prop="StationName">
                <el-select
                    v-model="homeName"
                    placeholder="请选择"
                    @change="change"
                    filterable>
                    <el-option
                        v-for="item in homeList" :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="Address">
                <el-input
                    type="textarea"
                    :rows="3"
                    resize="none"
                    placeholder="请输入详细地址"
                    v-model="params.Address">
                </el-input>
            </el-form-item>
            <el-row :gutter="layout.gutter">
                <el-col :span="layout.span">
                    <el-form-item label="经度" prop="longitude">
                        <el-input
                                placeholder="请输入经度"
                                v-model="params.longitude">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                    <el-form-item label="纬度" prop="latitude">
                        <el-input
                                placeholder="请输入纬度"
                                v-model="params.latitude">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="form-footer">
                <three-btn @click="validData">确定</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
    import {
        addMapHomeList,
        addMapStation
    } from "@/assets/js/api"

    export default {
        name: "AddHomeInfo",
        props: {
            visible: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                layout: {
                    span: 12,
                    gutter: 16
                },
                homeName: "",
                homeList: [],
                point: {
                    lng: 0,
                    lat: 0,
                },
                params: {
                    StationName1: '',        // 省
                    StationName2: '',        // 市
                    StationName5: '',        // 区县
                    StationName3: '',        // 站点名称
                    StationName: '',        // 站点全称
                    Address:'',                //机房物理信息
                    longitude:'',                // 经度
                    latitude:'',                // 纬度
                    information:"",                //备注
                },
                rules: {
                    StationName:[
                        {required: true, message: '请选择要添加的机房', trigger: 'change'},
                    ],
                    Address: [
                        {required: true, message: '详细地址不能为空', trigger: 'change'},
                    ],
                    longitude: [
                        {required: true, message: '不能为空', trigger: 'change'},
                    ],
                    latitude: [
                        {required: true, message: '不能为空', trigger: 'change'},
                    ],
                }
            }
        },
        methods: {
            // 根据选择的机房更新详细地址的省-市-区县
            change(value) {
                let infos = value.split('-');
                // 解析的长度大于2
                if(infos.length>3) {
                    this.params.StationName1 = infos[0];    // 省
                    this.params.StationName2 = infos[1];    // 市
                    this.params.StationName5 = infos[2];    // 区县
                    this.params.StationName3 = infos[3];    // 机房名称
                    this.params.StationName = value;        // 机房全称
                    this.params.Address = infos[0]+'-'+infos[1]+'-'+infos[2]+'-';       // 省-市-区县-
                }
            },
            init() {
                this.homeName = "";     //  初始化下拉框
                this.params.StationName1 = "";    // 省
                this.params.StationName2 = "";    // 市
                this.params.StationName5 = "";    // 区县
                this.params.StationName3 = "";    // 机房名称
                this.params.StationName = "";        // 机房全称
                this.params.Address = "";       // 地址
            },
            // 查询可添加坐标点机房
            addMapHomeList() {
                // 显示加载等待框
                let loading = this.$layer.loading();
                // 查询后台
                addMapHomeList().then(res=>{
                    let rs = JSON.parse(res.data.result);
                    let data = [];
                    if (rs.code == 1) {
                        data = rs.data.map(item => {
                            let home = item.StationName1 + '-' + item.StationName2 + '-' + item
                                .StationName5 + '-' + item.StationName3;
                            item.label = home;
                            item.value = home;
                            return item;
                        });
                    }
                    // 设置组件的值
                    this.homeList = data;

                    // 关闭加载等待框
                    this.$layer.close(loading);
                }).catch(error=>{
                    console.log(error);
                    // 关闭加载等待框
                    this.$layer.close(loading);
                });
            },
            validData() {
                this.$refs.ruleForm.validate((valid) => {
                    // 校验通过
                    if (valid) {
                        // 设置经纬度
                        // this.params.longitude = this.point.lng;
                        // this.params.latitude = this.point.lat;
                        this.$layer.confirm('确认添加机房到该位置', {icon: 3, title: '系统提示'}, (index)=>{
                            // 关闭弹出框
                            this.$layer.close(index);
                            // 添加机房到地图
                            this.addHome();
                        });

                    }else {
                        this.$layer.msg('存在校验未通过的数据！');
                        return false;
                    }
                });
            },
            addHome() {
                // 请求后台添加机房到地图
                addMapStation(this.params).then(res=>{
                    let rs = JSON.parse(res.data.result);
                    if(rs.code === 1) {
                        this.$layer.msg('添加成功！');
                        this.$emit('handleEvent', 1);
                    }else {
                        this.$layer.msg('添加失败！');
                        this.$emit('handleEvent', 0);
                    }
                }).catch(error=>{
                    console.log(error);
                });
            },
            close() {
                this.$emit("update:visible", false);
            },
        },
        mounted() {
            // 查询未添加位置信息的机房
            this.addMapHomeList();
        }
    }
</script>

<style scoped>
    .params-container {
        width: 400px;
        background-color: #ffffff;
    }
    .table-layout {
        margin-top: 16px;
    }
    .bg-white .table-cell {
        color: #000000;
    }
</style>

 src/pages/dataMager/dialog/EditHomeInfo.vue

New file
@@ -0,0 +1,214 @@
<template>
    <div class="params-container">
        <el-form
                ref="ruleForm"
                size="mini"
                label-position="top"
                :model="params"
                :rules="rules"
                class="params-dialog bg-white">
            <el-form-item label="机房名称" prop="StationName">
                <el-input
                    placeholder="请输入机房名称"
                    v-model="params.StationName"
                    readonly="readonly">
                </el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="Address">
                <el-input
                    type="textarea"
                    :rows="3"
                    resize="none"
                    placeholder="请输入详细地址"
                    v-model="params.Address">
                </el-input>
            </el-form-item>
            <el-row :gutter="layout.gutter">
                <el-col :span="layout.span">
                    <el-form-item label="经度" prop="longitude">
                        <el-input
                            placeholder="请输入经度"
                            v-model="params.longitude">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                    <el-form-item label="纬度" prop="latitude">
                        <el-input
                            placeholder="请输入纬度"
                            v-model="params.latitude">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="form-footer">
                <three-btn @click="validData">确定</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
    import {
        addMapHomeList,
        addMapStation
    } from "@/assets/js/api"

    export default {
        name: "EditHomeInfo",
        props: {
            batt: {
                type: Object,
                default() {
                    return {}
                }
            },
            visible: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                layout: {
                    span: 12,
                    gutter: 16
                },
                homeName: "",
                homeList: [],
                point: {
                    lng: 0,
                    lat: 0,
                },
                params: {
                    StationName1: '',        // 省
                    StationName2: '',        // 市
                    StationName5: '',        // 区县
                    StationName3: '',        // 站点名称
                    StationName: '',        // 站点全称
                    Address:'',                //机房物理信息
                    longitude:'',                // 经度
                    latitude:'',                // 纬度
                    information:"",                //备注
                },
                rules: {
                    StationName:[
                        {required: true, message: '请选择要添加的机房', trigger: 'change'},
                    ],
                    Address: [
                        {required: true, message: '详细地址不能为空', trigger: 'change'},
                    ],
                    longitude: [
                        {required: true, message: '不能为空', trigger: 'change'},
                    ],
                    latitude: [
                        {required: true, message: '不能为空', trigger: 'change'},
                    ],
                }
            }
        },
        methods: {
            // 根据选择的机房更新详细地址的省-市-区县
            change(value) {
                let infos = value.split('-');
                // 解析的长度大于2
                if(infos.length>3) {
                    this.params.StationName1 = infos[0];    // 省
                    this.params.StationName2 = infos[1];    // 市
                    this.params.StationName5 = infos[2];    // 区县
                    this.params.StationName3 = infos[3];    // 机房名称
                    this.params.StationName = value;        // 机房全称
                    this.params.Address = infos[0]+'-'+infos[1]+'-'+infos[2]+'-';       // 省-市-区县-
                }
            },
            init() {
                // 初始化值
                for(let key in this.params) {
                    this.params[key] = this.batt[key]?this.batt[key]: "";
                }
            },
            // 查询可添加坐标点机房
            addMapHomeList() {
                // 显示加载等待框
                let loading = this.$layer.loading();
                // 查询后台
                addMapHomeList().then(res=>{
                    let rs = JSON.parse(res.data.result);
                    let data = [];
                    if (rs.code == 1) {
                        data = rs.data.map(item => {
                            let home = item.StationName1 + '-' + item.StationName2 + '-' + item
                                .StationName5 + '-' + item.StationName3;
                            item.label = home;
                            item.value = home;
                            return item;
                        });
                    }
                    // 设置组件的值
                    this.homeList = data;

                    // 关闭加载等待框
                    this.$layer.close(loading);
                }).catch(error=>{
                    console.log(error);
                    // 关闭加载等待框
                    this.$layer.close(loading);
                });
            },
            validData() {
                this.$refs.ruleForm.validate((valid) => {
                    // 校验通过
                    if (valid) {
                        // 设置经纬度
                        // this.params.longitude = this.point.lng;
                        // this.params.latitude = this.point.lat;
                        this.$layer.confirm('确认添加机房到该位置', {icon: 3, title: '系统提示'}, (index)=>{
                            // 关闭弹出框
                            this.$layer.close(index);
                            // 添加机房到地图
                            this.addHome();
                        });

                    }else {
                        this.$layer.msg('存在校验未通过的数据！');
                        return false;
                    }
                });
            },
            addHome() {
                // 请求后台添加机房到地图
                addMapStation(this.params).then(res=>{
                    let rs = JSON.parse(res.data.result);
                    if(rs.code === 1) {
                        this.$layer.msg('添加成功！');
                        this.$emit('handleEvent', 1);
                    }else {
                        this.$layer.msg('添加失败！');
                        this.$emit('handleEvent', 0);
                    }
                }).catch(error=>{
                    console.log(error);
                });
            },
            close() {
                this.$emit("update:visible", false);
            },
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>
    .params-container {
        width: 400px;
        background-color: #ffffff;
    }
    .table-layout {
        margin-top: 16px;
    }
    .bg-white .table-cell {
        color: #000000;
    }
</style>

 src/pages/dataMager/homeAddressInfoManage.vue

New file
@@ -0,0 +1,171 @@
<template>
    <flex-layout>
        <div class="flex-page-content">
            <el-table
                stripe
                size="mini"
                header-row-class-name="header-primary"
                height="100%" :data="table.data">
                <el-table-column
                v-for="header in table.headers" :key="header.prop"
                :prop="header.prop"
                :label="header.label"
                :min-width="header.minWidth"
                align="center"
                :resizable="false"></el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="160"
                        align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" size="mini">编辑</el-button>
                        <el-button @click="delMapHome(scope.row)" type="danger" size="mini" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex-page-footer" slot="footer">
            <div class="el-pagination-btns">
                <el-button type="primary" @click="searchMap" round size="mini" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="addDialog = true" round size="mini">添加机房</el-button>
            </div>
        </div>
        <!-- 添加机房面板 -->
        <el-dialog
            title="添加机房"
            width="auto"
            :visible.sync="addDialog"
            :close-on-click-modal="false"
            top="0"
            class="dialog-center"
            :modal-append-to-body="false">
            <add-home-info v-if="addDialog" @handleEvent="handleAddInfo"></add-home-info>
        </el-dialog>
        <!-- 编辑机房面板 -->
        <el-dialog
                title="编辑机房"
                width="auto"
                :visible.sync="editDialog"
                :close-on-click-modal="false"
                top="0"
                class="dialog-center"
                :modal-append-to-body="false">
            <edit-home-info :batt="batt" v-if="editDialog" @handleEvent="handleEditInfo"></edit-home-info>
        </el-dialog>
    </flex-layout>
</template>

<script>
    import AddHomeInfo from "@/pages/dataMager/dialog/AddHomeInfo";
    import EditHomeInfo from "@/pages/dataMager/dialog/EditHomeInfo";
    import {
        delMapHome,
        searchMap,
    } from '@/assets/js/api'
    export default {
        name: "homeAddressInfoManage",
        components: {
            AddHomeInfo,
            EditHomeInfo,
        },
        data() {
            return {
                batt: {},
                addDialog: false,
                editDialog: false,
                table: {
                    headers: [
                        {
                            prop:"StationName",
                            label: "机房名称",
                            minWidth: 360
                        },
                        {
                            prop:"longitude",
                            label: "经度",
                            minWidth: 180
                        },
                        {
                            prop:"latitude",
                            label: "纬度",
                            minWidth: 180
                        },
                        {
                            prop:"Address",
                            label: "地址",
                            minWidth: 360
                        },
                    ],
                    data: []
                }
            }
        },
        methods: {
            // 查询机房的位置信息
            searchMap() {
                // 开启等待框
                let loading = this.$layer.loading();
                // 查询后台
                searchMap().then(res=>{
                    let rs = JSON.parse(res.data.result);
                    // 设置表格的值
                    this.table.data = rs;
                    // 关闭等待框
                    this.$layer.close(loading);
                }).catch(error=>{
                    console.log(error);
                    // 关闭等待框
                    this.$layer.close(loading);
                });
            },
            handleAddInfo() {
                // 查询机房
                this.searchMap();
                // 关闭添加框
                this.addDialog = false;
            },
            handleEditInfo() {
                // 查询机房
                this.searchMap();
                // 关闭添加框
                this.editDialog = false;
            },
            handleClick(row) {
                this.batt = row;
                this.editDialog = true;
            },
            delMapHome(row) {
                // 添加确认框
                this.$layer.confirm('确认删除' + row.StationName+"定位信息", {
                    icon: 3,
                    title: '系统提示'
                }, (index) => {
                    // 关闭确认框
                    this.$layer.close(index);
                    // 执行删除操作
                    delMapHome(row).then(res => {
                        let rs = JSON.parse(res.data.result);
                        if (rs.code == 1) {
                            this.$layer.msg('删除成功');
                        } else {
                            this.$layer.msg('删除失败');
                        }
                        // 查询信息
                        this.searchMap();
                    }).catch(error => {
                        console.log(error);
                    });
                });
            },
        },
        mounted() {
            // 查询地图上的机房的定位
            this.searchMap();
        }
    }
</script>

<style scoped>

</style>

 src/pages/login.vue

@@ -23,99 +23,114 @@
                    <el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
                </el-form-item>
                <el-form-item>
                    <a href="javascript:;" class="regBtn">立即注册</a>
                    <a href="javascript:;" @click="license.show = true" class="regBtn">平台注册</a>
                </el-form-item>
            </el-form>
        </div>
        <!-- license弹框输入面板 -->
        <el-dialog
                title="激活码输入提示" width="600px"
                :visible.sync="license.show"
                :close-on-click-modal="false" top="0"
                class="dialog-center" :modal-append-to-body="false">
            <add-license v-if="license.show"></add-license>
        </el-dialog>
    </div>
</template>

<script>
    import {
        login,
        initDBPool,
        checkLoginSession
    } from "@/assets/js/api";
import AddLicense from "@/pages/AddLicense";
import {
    login,
    initDBPool,
    checkLoginSession
} from "@/assets/js/api";

    export default {
        data() {
            return {
                loading: false,
                labelPosition: "right" /*  登录表单 */ ,
                formLabelAlign: {
                    name: "",
                    region: "",
                    type: ""
                },
                /* 登录表单el-form 的 数据绑定 */
                loginForm: {
                    username: "",
                    password: ""
                }
            };
        },
        methods: {
            /* 初始化连接池  检测后台session*/
            async woData() {
                const [pool, sessions] = await Promise.all([initDBPool, checkLoginSession])
                /*   console.log('pool',pool);
                    console.log('sessions',sessions); */
export default {
    components: {
        AddLicense
    },
    data() {
        return {
            loading: false,
            labelPosition: "right" /*  登录表单 */ ,
            formLabelAlign: {
                name: "",
                region: "",
                type: ""
            },
            onSubmit() {
                if(this.loading) {
                    return;
                }
                // 校验用户
                if(this.loginForm.username && this.loginForm.password) {
                    // 开启等待框
                    this.loading = true;
                    login(this.loginForm.username,this.loginForm.password).then(res=>{
                        // 关闭等待
                        this.loading = false;
                        let rs = JSON.parse(res.data.result);
                        if(rs.code == 1) {
                            this.$message.success("登录成功");
                            sessionStorage.setItem('username', this.loginForm.username);
                            this.$router.push("/home");
                            // 设置用户的权限
                            this.$store.dispatch('user/getPermits');
                        }else {
                            this.$message.error(rs.msg);
                        }
            /* 登录表单el-form 的 数据绑定 */
            loginForm: {
                username: "",
                password: ""
            },
            license: {
                show: false
            },
        };
    },
    methods: {
        /* 初始化连接池  检测后台session*/
        async woData() {
            const [pool, sessions] = await Promise.all([initDBPool, checkLoginSession])
            /*   console.log('pool',pool);
                console.log('sessions',sessions); */
        },
        onSubmit() {
            if(this.loading) {
                return;
            }
            // 校验用户
            if(this.loginForm.username && this.loginForm.password) {
                // 开启等待框
                this.loading = true;
                login(this.loginForm.username,this.loginForm.password).then(res=>{
                    // 关闭等待
                    this.loading = false;
                    let rs = JSON.parse(res.data.result);
                    if(rs.code == 1) {
                        this.$message.success("登录成功");
                        sessionStorage.setItem('username', this.loginForm.username);
                        this.$router.push("/home");
                        // 设置用户的权限
                        this.$store.dispatch('user/getPermits');
                    }else {
                        this.$message.error(rs.msg);
                    }

                    }).catch(error=>{
                        // 关闭等待
                        this.loading = false;
                        console.log(error);
                        this.$message.error("网络异常");
                    });
                }else {
                    this.$message.error("用户名或密码不能为空");
                }
            },
                }).catch(error=>{
                    // 关闭等待
                    this.loading = false;
                    console.log(error);
                    this.$message.error("网络异常");
                });
            }else {
                this.$message.error("用户名或密码不能为空");
            }
        },
        mounted() {
            // 初始化user的信息
            this.$store.commit('user/init');
            // 初始化登录状态
            sessionStorage.setItem('username', "");
        }
    };
    },
    mounted() {
        // 初始化user的信息
        this.$store.commit('user/init');
        // 初始化登录状态
        sessionStorage.setItem('username', "");
    }
};
</script>

<style>
    .login_from .el-input__inner{
        height: 48px;
        line-height: 48px;
    }
    .el-science-blue .login_from  .el-input.is-disabled .el-input__inner, .el-science-blue .login_from  .el-input__inner {
        background-color: transparent;
        border-color: #e4e4e4;
        color: #868686;
    }
    .el-science-blue .login_from  .el-input__prefix, .el-input__suffix, .el-science-blue .login_from  .el-select .el-input .el-select__caret {
        color: #007fe1;
    }
.login_from .el-input__inner{
    height: 48px;
    line-height: 48px;
}
.el-science-blue .login_from  .el-input.is-disabled .el-input__inner, .el-science-blue .login_from  .el-input__inner {
    background-color: transparent;
    border-color: #e4e4e4;
    color: #868686;
}
.el-science-blue .login_from  .el-input__prefix, .el-input__suffix, .el-science-blue .login_from  .el-select .el-input .el-select__caret {
    color: #007fe1;
}
</style>

<style lang="less" scoped>

 src/router/routes.js

@@ -44,6 +44,13 @@
        component: (resolve) => require(['../pages/dataMager/battGroupMager.vue'], resolve)
    },
    {
        path: '/dataMager/homeAddressInfoManage',
        meta: {
            name: '机房位置信息配置'
        },
        component: (resolve) => require(['../pages/dataMager/homeAddressInfoManage.vue'], resolve)
    },
    {
        path: '/dataMager/produceTotal',
        name: 'produceTotal',
        meta: {