bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

养护站列表

Browse Source
This commit is contained in:
huangchenhao 2025-10-31 16:16:56 +08:00
parent 14f00b6613
commit 178badf4f5
7 changed files with 528 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -25,6 +25,7 @@
"pnpm": ">=8.0.0"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.2",
"@vueuse/core": "^14.0.0",
"dayjs": "^1.11.18",
"element-plus": "^2.11.5",

3
packages/screen/src/component/MyDialog/index.js Normal file
View File

@ -0,0 +1,3 @@
import MyDialog from './index.vue'
export default MyDialog

39
packages/screen/src/component/MyDialog/index.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<el-dialog :visible.sync="visible" :title="title" :width="width">
<slot></slot>
<template #footer>
<div class="dialog-footer">
<el-button @click="onCancel">取消</el-button>
<el-button type="primary" @click="onConfirm"> 确认 </el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
width: {
type: String,
default: "50%",
},
title: {
type: String,
default: "",
},
onConfirm: {
type: Function,
default: () => {},
},
onCancel: {
type: Function,
default: () => {},
},
});
</script>
<style>
</style>

17
packages/screen/src/utils/request.js
View File

@ -6,11 +6,16 @@ const service = axios.create({
})
export async function request(config) {
const res = await service(config)
if (res === null || res === undefined) {
return res
}
if (Object.prototype.hasOwnProperty.call(res, 'data')) {
return res.data
try {
const res = await service(config)
if (res === null || res === undefined) {
return res
}
if (Object.prototype.hasOwnProperty.call(res, 'data')) {
return res.data
}
} catch (error) {
console.log(error)
return null
}
}

609
packages/screen/src/views/ServiceStationManagePage/index.vue
View File

@ -1,187 +1,511 @@
<template>
<DynamicTable
:dataSource="tableData"
:columns="columns"
:toolbar="toolbar"
:autoHeight="true"
:pagination="pagination"
></DynamicTable>
<div class="root">
<div class="search-box">
<el-input
v-model="params.qxmc"
style="width: 240px; margin-right: 10px"
size="large"
placeholder="请输入区县名称"
:suffix-icon="Search"
@change="handleSearch"
/>
<el-select
v-model="params.zdlx"
style="width: 240px; margin-right: 10px"
size="large"
placeholder="站点类型"
:suffix-icon="Search"
@change="handleSearch"
:options="zdlxOptions"
clearable
/>
</div>
<div class="event-box">
<el-button type="primary" size="large" @click="openAddDialog"
>新增</el-button
>
</div>
<DynamicTable
:dataSource="tableData"
:columns="columns"
:autoHeight="true"
:pagination="pagination"
></DynamicTable>
<div class="dialog-container">
<MyDialog
v-model="dialogVisible"
title="站点详情"
:onConfirm="handleConfirm"
:onCancel="handleCancel"
width="40%"
>
<el-form
label-position="right"
label-width="auto"
style="
max-width: 600px;
max-height: 60vh;
overflow-y: auto;
padding-right: 12px;
"
>
<el-form-item label="区县名称">
<el-input disabled v-model="detailData.qxmc" />
</el-form-item>
<el-form-item label="站点类型">
<el-input disabled v-model="detailData.zdlx" />
</el-form-item>
<el-form-item label="路线编码">
<el-input disabled v-model="detailData.lxbm" />
</el-form-item>
<el-form-item label="里程桩号">
<el-input disabled v-model="detailData.lczh" />
</el-form-item>
<el-form-item label="行政等级">
<el-input disabled v-model="detailData.xzdj" />
</el-form-item>
<el-form-item label="机动车月交通流量">
<el-input disabled v-model="detailData.yjtll" />
</el-form-item>
<el-form-item label="技术等级">
<el-input disabled v-model="detailData.jsdj" />
</el-form-item>
<el-form-item label="服务保障点具体名称">
<el-input disabled v-model="detailData.mc" />
</el-form-item>
<el-form-item label="产权隶属单位">
<el-input disabled v-model="detailData.ssdw" />
</el-form-item>
<el-form-item label="经度">
<el-input disabled v-model="detailData.jd" />
</el-form-item>
<el-form-item label="纬度">
<el-input disabled v-model="detailData.wd" />
</el-form-item>
<el-form-item label="充电桩根数">
<el-input disabled v-model="detailData.cdzgs" />
</el-form-item>
<el-form-item label="是否对外开放">
<el-input disabled v-model="detailData.sfdwkf" />
</el-form-item>
<el-form-item label="对外开放的是否有如厕功能">
<el-input disabled v-model="detailData.sfdwkfrc" />
</el-form-item>
</el-form>
</MyDialog>
<MyDialog
v-model="editDialogVisible"
:title="isEdit ? '编辑站点' : '新增站点'"
:onConfirm="isEdit ? handleEditConfirm : handleAddConfirm"
:onCancel="handleEditCancel"
width="40%"
>
<el-form
ref="editFormRef"
:model="editForm"
label-position="right"
label-width="auto"
:rules="editRules"
style="
max-width: 600px;
max-height: 60vh;
overflow-y: auto;
padding-right: 12px;
"
>
<el-form-item label="区县名称" prop="qxmc">
<el-input v-model="editForm.qxmc" />
</el-form-item>
<el-form-item label="站点类型" prop="zdlx">
<el-select
v-model="editForm.zdlx"
placeholder="请选择站点类型"
:options="zdlxOptions"
/>
</el-form-item>
<el-form-item label="路线编码" prop="lxbm">
<el-input v-model="editForm.lxbm" />
</el-form-item>
<el-form-item label="里程桩号" prop="lczh">
<el-input v-model="editForm.lczh" />
</el-form-item>
<el-form-item label="行政等级" prop="xzdj">
<el-input v-model="editForm.xzdj" />
</el-form-item>
<el-form-item label="机动车月交通流量" prop="yjtll">
<el-input v-model="editForm.yjtll" />
</el-form-item>
<el-form-item label="技术等级" prop="jsdj">
<el-input v-model="editForm.jsdj" />
</el-form-item>
<el-form-item label="服务保障点具体名称" prop="mc">
<el-input v-model="editForm.mc" />
</el-form-item>
<el-form-item label="产权隶属单位" prop="ssdw">
<el-input v-model="editForm.ssdw" />
</el-form-item>
<el-form-item label="经度" prop="jd">
<el-input v-model="editForm.jd" />
</el-form-item>
<el-form-item label="纬度" prop="wd">
<el-input v-model="editForm.wd" />
</el-form-item>
<el-form-item label="充电桩根数" prop="cdzgs">
<el-input v-model="editForm.cdzgs" />
</el-form-item>
<el-form-item label="是否对外开放" prop="sfdwkf">
<el-input v-model="editForm.sfdwkf" />
</el-form-item>
<el-form-item label="对外开放的是否有如厕功能" prop="sfdwkfrc">
<el-input v-model="editForm.sfdwkfrc" />
</el-form-item>
<el-form-item label="备注" prop="bz">
<el-input v-model="editForm.bz" />
</el-form-item>
</el-form>
</MyDialog>
</div>
</div>
</template>
<script lang="ts" setup>
import DynamicTable from "../../component/DynamicTable";
import { h, ref, onMounted, reactive } from "vue";
import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
import { request } from "@/utils/request";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import { de } from "element-plus/es/locales.mjs";
const tableData = ref([
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
{
county: "潼南",
road_code: "G319线",
mile_code: "2654+000",
level: "国道",
monthly_traffic: "5625",
tec_level: "二级",
name: "三汇停车区",
service_station_address: "交通公路部门",
},
]);
const tableData = ref([]);
const detailData = ref({});
const dialogVisible = ref(false);
const handleCancel = () => {
dialogVisible.value = false;
};
const handleConfirm = () => {
dialogVisible.value = false;
};
// 表单初始状态
const INIT_FORM = {
id: "",
zdlx: "",
lxbm: "",
qxmc: "",
lczh: "",
xzdj: "",
yjtll: 0,
jsdj: "",
mc: "",
ssdw: "",
jd: "",
wd: "",
cdzgs: "",
sfdwkf: "",
sfdwkfrc: "",
bz: "",
};
// 站点类型选项
const zdlxOptions = [
{ label: "服务设施", value: "服务设施" },
{ label: "加油站", value: "加油站" },
{ label: "加气站", value: "加气站" },
{ label: "加氢站", value: "加氢站" },
{ label: "充电站", value: "充电站" },
];
// 是否在编辑状态
const isEdit = ref(false);
const editFormRef = ref();
const editForm = reactive({ ...INIT_FORM });
const editDialogVisible = ref(false);
const openEditDialog = (row) => {
editForm.id = row.id;
Object.assign(editForm, row);
editDialogVisible.value = true;
};
// 表单校验规则
const editRules = {
qxmc: [{ required: true, message: "请输入区县名称", trigger: "blur" }],
zdlx: [{ required: true, message: "请输入站点类型", trigger: "blur" }],
lxbm: [{ required: true, message: "请输入路线编码", trigger: "blur" }],
lczh: [{ required: true, message: "请输入里程桩号", trigger: "blur" }],
xzdj: [{ required: true, message: "请输入行政等级", trigger: "blur" }],
yjtll: [
{
required: true,
message: "请输入机动车月交通流量",
trigger: "blur",
},
{
type: "number",
message: "请输入正确的机动车月交通流量",
trigger: "blur",
},
],
jsdj: [{ required: true, message: "请输入技术等级", trigger: "blur" }],
mc: [
{ required: true, message: "请输入服务保障点具体名称", trigger: "blur" },
],
ssdw: [{ required: true, message: "请输入产权隶属单位", trigger: "blur" }],
jd: [{ required: true, message: "请输入经度", trigger: "blur" }],
wd: [{ required: true, message: "请输入纬度", trigger: "blur" }],
cdzgs: [{ required: true, message: "请输入充电桩根数", trigger: "blur" }],
sfdwkf: [{ required: true, message: "请输入是否对外开放", trigger: "blur" }],
sfdwkfrc: [
{
required: true,
message: "请输入对外开放的是否有如厕功能",
trigger: "blur",
},
],
};
const handleEditCancel = () => {
editDialogVisible.value = false;
};
const handleEditConfirm = async () => {
try {
await editFormRef.value.validate();
const res = await request({
url: `/api/yhz`,
method: "PUT",
data: toRaw(editForm),
});
if (res.code === "00000") {
ElMessage({
message: "编辑成功",
type: "success",
});
getTableData();
editDialogVisible.value = false;
} else {
throw new Error(res.message);
}
} catch (error) {
console.log(error.message);
ElMessage({
message: error.message,
type: "error",
});
}
};
const resetForm = () => {
Object.assign(editForm, INIT_FORM);
};
// 打开新增站点弹窗
const openAddDialog = () => {
resetForm();
isEdit.value = false;
editDialogVisible.value = true;
};
// 新增站点
const handleAddConfirm = async () => {
try {
await editFormRef.value.validate();
const res = await request({
url: "/api/yhz",
method: "POST",
data: toRaw(editForm),
});
if (res.code === "00000") {
ElMessage({
message: "新增成功",
type: "success",
});
getTableData();
editDialogVisible.value = false;
} else {
throw new Error(res.message);
}
} catch (error) {
ElMessage({
message: error.message,
type: "error",
});
console.log(error.message);
}
};
// 搜索条件
const params = reactive({
qxmc: "",
zdlx: "",
});
const handleSearch = () => {
// 重置分页到第一页
pagination.current = 1;
getTableData();
};
// 获取养护站详情
const getDetailData = async (row) => {
try {
const res = await request({
url: `/api/yhz/${row.id}`,
method: "GET",
});
if (res.code === "00000") {
detailData.value = res.data;
} else {
detailData.value = {};
throw new Error(res.message);
}
} catch (error) {
console.log(error.message);
}
};
// 获取养护站列表
const getTableData = async () => {
try {
const params = {
pageNum: pagination.current,
pageSize: pagination.pageSize,
};
const res = await request({
url: "/api/yhz/list",
method: "GET",
params: params,
params: {
...params,
pageNum: pagination.current,
pageSize: pagination.pageSize,
},
});
} catch (error) {}
if (res.code === "00000") {
tableData.value = res.data.records;
pagination.total = res.data.total;
} else {
throw new Error(res.message);
}
} catch (error) {
console.log(error.message);
}
};
onMounted(() => {
getTableData();
});
const columns = [
{
prop: "county",
label: "区县",
prop: "qxmc",
label: "区县名称",
},
{
prop: "road_code",
prop: "zdlx",
label: "站点类型",
},
{
prop: "lxbm",
label: "路线编码",
// minWidth: 160,
},
{
prop: "mile_code",
prop: "lczh",
label: "里程桩号",
},
{
prop: "level",
label: "行政等级(仅划分:国道、省道、农村公路三类)",
prop: "xzdj",
label: "行政等级",
},
{
prop: "monthly_traffic",
prop: "yjtll",
label: "机动车月交通流量",
},
{
prop: "tec_level",
prop: "jsdj",
label: "技术等级",
},
{
prop: "name",
prop: "mc",
label: "服务保障点具体名称",
},
{
prop: "type",
label: "类型",
prop: "ssdw",
label: "产权隶属单位",
},
{
prop: "jd",
label: "经度",
},
{
prop: "wd",
label: "纬度",
},
{
prop: "cdzgs",
label: "充电桩根数",
},
{
prop: "sfdwkf",
label: "是否对外开放",
},
{
prop: "sfdwkfrc",
label: "对外开放的是否有如厕功能",
},
{
label: "操作",
fixed: "right",
width: 100,
width: 150,
render: (row) => () =>
h(
ElButton,
{
type: "text",
onClick: () => {
console.log(row);
h("div", { class: "action-btns" }, [
h(
ElButton,
{
type: "primary",
link: true,
onClick: async () => {
await getDetailData(row);
dialogVisible.value = true;
},
},
},
() => "详情"
),
() => "详情"
),
h(
ElButton,
{
type: "success",
link: true,
style: "margin-left: 10px;",
onClick: async () => {
await getDetailData(row);
isEdit.value = true;
openEditDialog(row);
},
},
() => "编辑"
),
h(
ElButton,
{
type: "danger",
link: true,
style: "margin-left: 10px;",
onClick: async () => {
try {
await ElMessageBox.confirm("确定要删除该站点吗？", "删除确认", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
});
const res = await request({
url: `/api/yhz/${row.id}`,
method: "DELETE",
});
if (res.code === "00000") {
ElMessage.success("删除成功");
getTableData();
}
} catch (error) {
if (error instanceof Error) {
ElMessage.error(error.message || "删除失败");
}
}
},
},
() => "删除"
),
]),
},
];
@ -194,11 +518,18 @@ const pagination = reactive({
onChange: (page: number, pageSize: number) => {
pagination.current = page;
pagination.pageSize = pageSize;
getTableData();
getTableData();
},
});
</script>
<style lang="scss" scoped>
.root {
height: 100%;
padding: 45px;
}
.event-box {
margin: 20px 0;
}
</style>

2
packages/screen/vite.config.js
View File

@ -27,7 +27,7 @@ export default defineConfig({
cors: true,
proxy: {
'/api': {
target: '',
target: 'http://8.137.54.85:8661/',
changeOrigin: true,
},
}

3
pnpm-lock.yaml generated
View File

@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@element-plus/icons-vue':
specifier: ^2.3.2
version: 2.3.2(vue@3.5.22)
'@vueuse/core':
specifier: ^14.0.0
version: 14.0.0(vue@3.5.22)