气体管理/区域管理

zhouwenxuan

2023-08-30 15669173497dce16b5d0f17bf4bef36c0d87115c

气体管理/区域管理

 src/api/basicDataManage/areaManage/index.ts

对比新文件
@@ -0,0 +1,43 @@
import request from '/@/utils/request';

export function areaManageApi() {
    return {

        //区域分页列表
        getAreaPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/region/page`,
                method: 'post',
                data: data
            });
        },

        //区域新增
        addArea: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/region/add`,
                method: 'post',
                data: data
            });
        },

        //区域删除
        delArea: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/region/del`,
                method: 'post',
                data: data
            });
        },

        //区域修改
        editArea: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/region/update`,
                method: 'post',
                data: data
            });
        },

    };
}

 src/api/basicDataManage/gasManage/index.ts

对比新文件
@@ -0,0 +1,24 @@
import request from '/@/utils/request';

export function gasManageApi() {
    return {

        //气体分页列表
        getGasPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/gasCategory/page`,
                method: 'post',
                data: data
            });
        },

        //气体新增
        addGas: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/gasCategory/add`,
                method: 'post',
                data: data
            });
        },
    };
}

 src/router/index.ts

@@ -85,7 +85,7 @@
        } else {
            const storesRoutesList = useRoutesList(pinia);
            const { routesList } = storeToRefs(storesRoutesList);
            if (routesList.value.length === 0) {
            if ( routesList.value && routesList.value.length === 0) {
                // 后端控制路由：路由数据初始化，防止刷新时丢失
                await initBackEndControlRoutes();
                // 动态添加路由：防止非首页刷新时跳转回首页的问题

 src/types/areaManage.d.ts

@@ -13,7 +13,7 @@
            pageIndex: number;
            pageSize: number;
            searchParams:{
                areaName: string
                name: string
            }
        };
    }
@@ -24,6 +24,7 @@
    title: string;
    isShowUserDialog: boolean;
    areaForm: {
        id: string;
        areaName: string;
        areaLngLat: Array<LngLat>;
        areaColor: string;

 src/types/gasManage.d.ts

@@ -14,7 +14,7 @@
            pageIndex: number;
            pageSize: number;
            searchParams:{
                gasName: string
                name: string
            }
        };
    }

 src/views/basicDataManage/areaManage/component/areaDialog.vue

@@ -5,7 +5,7 @@
            v-model="state.isShowUserDialog"
            width="600px"
        >
            <el-form :model="state.areaForm" size="default" ref="areaRef" :rules="state.areaFormRules" label-width="110px">
            <el-form :model="state.areaForm" size="default" ref="areaRef" :rules="state.title == '查看区域' ? '' :state.areaFormRules" label-width="110px">
                <el-form-item label="区域名称:" prop="areaName">
                    <el-input v-model.trim="state.areaForm.areaName" :disabled="state.disabled" ></el-input>
                </el-form-item>
@@ -65,6 +65,8 @@
import {reactive, ref} from "vue";
import { AreaState } from "/@/types/areaManage";
import lngDialog from "./lngDialog.vue";
import {areaManageApi} from "/@/api/basicDataManage/areaManage";
import {ElMessage} from "element-plus/es";

const areaRef = ref();
const lngRef = ref();
@@ -74,6 +76,7 @@
    title: '',
    isShowUserDialog: false,
    areaForm: {
        id: '',
        areaName: '',
        areaLngLat: [],
        areaColor: '',
@@ -86,6 +89,7 @@
});
const openDialog = (type: string, value: any) => {
    state.isShowUserDialog = true;
    reset();
    if (type === '新增') {
        state.disabled = false;
        state.title = '新增区域';
@@ -99,7 +103,60 @@
        state.areaForm = JSON.parse(JSON.stringify(value));
    }
};
const onSubmit = () => {
const onSubmit = async () => {
    if(state.title == '新增区域' || state.title == '修改区域') {
        const valid = areaRef.value.validate();
        if(valid){
            if(state.title == '新增区域'){
                const param = {
                    name: state.areaForm.areaName,
                    color: state.areaForm.areaColor,
                    regionLngLats: state.areaForm.areaLngLat.map(item => {
                        return {
                            lng: item.lng,
                            lat: item.lat
                        }
                    })
                }
                let res = await  areaManageApi().addArea(param);
                if(res.data.code == 100) {
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    });
                }else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }else if(state.title == '修改区域'){
                const param = {
                    id: state.areaForm.id,
                    name: state.areaForm.areaName,
                    color: state.areaForm.areaColor,
                    regionLngLats: state.areaForm.areaLngLat.map(item => {
                        return {
                            lng: item.lng,
                            lat: item.lat
                        }
                    })
                }
                let res = await areaManageApi().editArea(param);
                if(res.data.code == 100) {
                    ElMessage({
                        type: 'success',
                        message: '修改成功'
                    });
                }else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }
        }
    }
    console.log("form",state.areaForm)
    areaRef.value.clearValidate();
    state.isShowUserDialog = false;
@@ -115,6 +172,7 @@
}
const reset = () => {
    state.areaForm = {
        id: '',
        areaName: '',
        areaLngLat: [],
        areaColor: '',

 src/views/basicDataManage/areaManage/index.vue

@@ -3,10 +3,10 @@
        <el-card shadow="hover">
            <div class="system-menu-search mb15">
                <el-form :inline="true" >
                    <el-form-item label="气体名称：">
                        <el-input  v-model="state.tableData.listQuery.searchParams.areaName"  placeholder="区域名称" ></el-input>
                    <el-form-item label="区域名称：">
                        <el-input  v-model="state.tableData.listQuery.searchParams.name"  placeholder="区域名称" ></el-input>
                    </el-form-item>
                    <el-button size="default" type="primary" class="ml10">
                    <el-button size="default" type="primary" class="ml10" @click="search()">
                        <el-icon>
                            <ele-Search />
                        </el-icon>
@@ -32,7 +32,7 @@
                <el-table-column align="center"  label="区域经纬度">
                    <template #default="scope">
                        <div v-for="(item, index) in scope.row.areaLngLat" :key="index">
                            [{{item.lng}},{{item.lat}}]
                            [ {{item.lng}} , {{item.lat}} ]
                        </div>
                    </template>
                </el-table-column>
@@ -65,44 +65,57 @@
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {reactive, ref, onMounted} from "vue";
import { TableDataState } from "/@/types/areaManage";
import areaDialog from "./component/areaDialog.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {areaManageApi} from "/@/api/basicDataManage/areaManage";

const areaRef = ref();
const state = reactive<TableDataState>({
    tableData: {
        data: [
            // {
            //     id: 'xxx',
            //     areaName: 'xxx',
            //     areaLngLat: [
            //         {
            //             lng: '11',
            //             lat:'22'
            //         },
            //         {
            //             lng: '11',
            //             lat:'22'
            //         }
            //     ],
            //     areaColor: "#ffffff"
            // }
        ],
        data: [],
        total: 0,
        loading: false,
        listQuery: {
            pageIndex: 1,
            pageSize: 10,
            searchParams:{
                areaName:''
                name: ''
            }
        }
    }
});

const initAreaData = () => {
//页面加载
onMounted(() => {
    initAreaData();
});

const initAreaData = async () => {
    let res = await areaManageApi().getAreaPage(state.tableData.listQuery);
    if(res.data.code == 100) {
        if(res.data.data && res.data.data.length > 0) {
            state.tableData.data = res.data.data.map((item: any) => {
                return {
                    id: item.id,
                    areaName: item.name,
                    areaLngLat: item.regionLngLats,
                    areaColor: item.color
                }
            });
        }else {
            state.tableData.data = [];
        }
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
    }else {
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
    console.log("数据列表")
};
const onHandleSizeChange = (val: number) => {
@@ -125,17 +138,31 @@
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .then( async() => {
            let res = await areaManageApi().delArea({id: val.id});
            if(res.data.code == 100) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                reset();
            }else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
};
const search = () => {
    state.tableData.listQuery.pageIndex = 1;
    initAreaData();
}
const reset = () => {
    state.tableData.listQuery.searchParams.areaName = '';
    state.tableData.listQuery.pageIndex = 1;
    state.tableData.listQuery.searchParams.name = '';
    initAreaData();
}
</script>
<style scoped lang="scss">

 src/views/basicDataManage/gasManage/component/gasDialog.vue

@@ -5,7 +5,7 @@
            v-model="state.isShowUserDialog"
            width="500px"
        >
            <el-form :model="state.gasForm" size="default" ref="gasRef" :rules="state.gasFormRules" label-width="110px">
            <el-form :model="state.gasForm" size="default" ref="gasRef" :rules="state.title == '新增气体' ? state.gasFormRules : ''" label-width="110px">
                <el-form-item label="气体名称:" prop="gasName">
                    <el-input v-model.trim="state.gasForm.gasName" :disabled="state.disabled" ></el-input>
                </el-form-item>
@@ -32,6 +32,8 @@
<script setup lang="ts">
import {reactive, ref} from "vue";
import { GasState } from "/@/types/gasManage";
import {gasManageApi} from "/@/api/basicDataManage/gasManage";
import {ElMessage} from "element-plus";

const gasRef = ref();
const emit = defineEmits(["getGasData"]);
@@ -69,10 +71,37 @@
        state.gasForm = JSON.parse(JSON.stringify(value));
    }
};
const onSubmit = () => {
    gasRef.value.clearValidate();
    state.isShowUserDialog = false;
    emit('getGasData');
const onSubmit = async () => {
        if(state.title == '新增气体'){
            const valid = await gasRef.value.validate();
            if(valid) {
                const param = {
                    molecularFormula: state.gasForm.gasMolecularFormula,
                    name: state.gasForm.gasName,
                    unit: state.gasForm.gasUnit,
                    threshold: state.gasForm.gasThreshold
                }
                let res = await gasManageApi().addGas(param);
                if (res.data.code === 100) {
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    });
                    gasRef.value.clearValidate();
                    state.isShowUserDialog = false;
                    emit('getGasData');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }
        }else {
            gasRef.value.clearValidate();
            state.isShowUserDialog = false;
            emit('getGasData');
        }
};

const handleClose = () => {

 src/views/basicDataManage/gasManage/index.vue

@@ -4,9 +4,9 @@
            <div class="system-menu-search mb15">
                <el-form :inline="true" >
                    <el-form-item label="气体名称：">
                        <el-input  v-model="state.tableData.listQuery.searchParams.gasName"  placeholder="气体名称" ></el-input>
                        <el-input  v-model="state.tableData.listQuery.searchParams.name"  placeholder="气体名称" ></el-input>
                    </el-form-item>
                    <el-button size="default" type="primary" class="ml10">
                    <el-button size="default" type="primary" class="ml10" @click="search()">
                        <el-icon>
                            <ele-Search />
                        </el-icon>
@@ -60,9 +60,11 @@
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {onMounted, reactive, ref} from "vue";
import { TableDataState } from "/@/types/gasManage";
import gasDialog from "./component/gasDialog.vue";
import { gasManageApi } from "/@/api/basicDataManage/gasManage";
import {ElMessage} from "element-plus";

const gasRef = ref();
const state = reactive<TableDataState>({
@@ -74,14 +76,42 @@
            pageIndex: 1,
            pageSize: 10,
            searchParams:{
                gasName:''
                name :''
            }
        }
    }
});
//页面加载
onMounted(() => {
    initGasData();
});

const initGasData = () => {
    console.log("数据列表")
const initGasData = async () => {
    let res = await gasManageApi().getGasPage(state.tableData.listQuery);
    console.log("res",res)
    if (res.data.code === 100) {
        if(res.data.data && res.data.data.length > 0){
            state.tableData.data = res.data.data.map((item: any) => {
                return {
                    id: item.id,
                    gasName: item.name,
                    gasMolecularFormula: item.molecularFormula,
                    gasThreshold: item.threshold,
                    gasUnit: item.unit
                }
            });
        }else {
            state.tableData.data = [];
        }
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
    } else {
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};
const onHandleSizeChange = (val: number) => {
    state.tableData.listQuery.pageSize = val;
@@ -95,8 +125,14 @@
const openDialog = (type: string, value: any) => {
    gasRef.value.openDialog(type, value);
};
const search = () => {
    state.tableData.listQuery.pageIndex = 1;
    initGasData();
}
const reset = () => {
    state.tableData.listQuery.searchParams.gasName = '';
    state.tableData.listQuery.searchParams.name = '';
    state.tableData.listQuery.pageIndex = 1;
    initGasData();
}
</script>
<style scoped lang="scss">

 src/views/system/user/index.vue

@@ -253,7 +253,7 @@
            initUserTableData();
            initRoleTableData();
            getRoleData();
            getExpertsData();
            // getExpertsData();
            getDepList()
        });
        return {