charge123/charge-pile-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
MeSHard
2025-11-19 16:48:30 +08:00
parent 14d3f34f94
commit 1973f19305
3 changed files with 414 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/charging_pile/Pile.vue
View File

@@ -25,9 +25,9 @@
@on-page-size-change="onChangePageSize" /> @on-page-size-change="onChangePageSize" />
</div> </div>
<!-- ConnectorID 充电桩编号 -->
<!-- charge_station_id 所属充电站 --> <!-- charge_station_id 所属充电站 -->
<!-- ConnectorID 充电桩编号 -->
<!-- no 位号 -->
<!-- 添加、编辑 --> <!-- 添加、编辑 -->
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok" <Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"

659
src/views/charging_pile/Price.vue
View File

@@ -1,262 +1,425 @@
<template> <template>
<div class="container"> <div class="container">
<div class="search-area"> <div class="search-area">
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline"> <Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
<FormItem prop="user" label="站点名称："> <FormItem prop="user" label="站点名称：">
<Input type="text" v-model="formInline.user" placeholder="" /> <Input type="text" v-model="formInline.user" placeholder="" />
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button> <Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
</FormItem> </FormItem>
</Form> </Form>
</div> </div>
<div class="action-btn"> <div class="action-btn">
<Button type="primary" @click="show_modal = true">添加</Button> <Button type="primary" @click="add">添加</Button>
<!-- <Button type="error">删除</Button> --> <!-- <Button type="error">删除</Button> -->
</div> </div>
<div class="table-container"> <div class="table-container">
<Table border :columns="columns" stripe :height="tableHeight" :data="data"> <Table border :columns="columns" stripe :height="tableHeight" :data="data">
<template #action="{ row, index }"> <template #action="{ row, index }">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button> <Button type="primary" size="small" style="margin-right: 5px"
<Button type="error" size="small" @click="remove(index)">删除</Button> @click="show(row.charge_station_id)">编辑</Button>
</template> <Button type="error" size="small" @click="remove(row.charge_station_id)">删除</Button>
</Table> </template>
<Page :total="total" show-total show-sizer class="page" /> </Table>
</div> <Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
@on-page-size-change="onChangePageSize" />
</div>
<!-- 添加、编辑 --> <!-- 添加、编辑 -->
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok" <Modal v-model="show_modal" title="添加" :mask-closable="false" @on-ok="ok" @on-cancel="cancel">
@on-cancel="cancel"> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="站点名称" prop="charge_station_id">
<FormItem label="Name" prop="name"> <Select v-model="formValidate.charge_station_id" style="width:200px">
<Input v-model="formValidate.name" placeholder="Enter your name" /> <Option v-for="item in data" :value="item.charge_station_id" :key="item.charge_station_id">
</FormItem> {{ item.charge_station_name }}
<FormItem label="E-mail" prop="mail"> </Option>
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" /> </Select>
</FormItem> </FormItem>
<FormItem label="City" prop="city"> <FormItem label="电费" prop="ElectricityFee">
<Select v-model="formValidate.city" placeholder="Select your city"> <Row class="header-row">
<Option value="beijing">New York</Option> <Col span="6">开始时间</Col>
<Option value="shanghai">London</Option> <Col span="6">结束时间</Col>
<Option value="shenzhen">Sydney</Option> <Col span="6">电费金额（元）</Col>
</Select> <Col span="3">
</FormItem> <Button type="primary" @click="addNewItem" icon="plus">新增时段</Button>
<FormItem label="Date"> </Col>
<Row> </Row>
<Col span="11"> <Row v-for="(item, index) in electricityFeeArr" :key="item.id || index" class="data-row">
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker> <Col span="6">
</Col> <TimePicker placeholder="开始时间" format="HH:mm" valueFormat="HH:mm" style="width: 100px"
<Col span="2" style="text-align: center">-</Col> v-model="item.startTime" />
<Col span="11"> </Col>
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker> <Col span="6">
</Col> <TimePicker placeholder="结束时间" format="HH:mm" valueFormat="HH:mm" style="width: 100px"
</Row> v-model="item.endTime" />
</FormItem> </Col>
<FormItem label="Gender" prop="gender"> <Col span="6">
<RadioGroup v-model="formValidate.gender"> <InputNumber placeholder="金额" style="width: 100px" :min="0" :precision="2"
<Radio label="male">Male</Radio> v-model="item.feeAmount" />
<Radio label="female">Female</Radio> 元
</RadioGroup> </Col>
</FormItem> <Col span="3">
<FormItem label="Hobby" prop="interest"> <Button type="danger" icon="delete" size="small" @click="removeItem(index)"
<CheckboxGroup v-model="formValidate.interest"> :disabled="electricityFeeArr.length <= 1">
<Checkbox label="Eat"></Checkbox> 删除
<Checkbox label="Sleep"></Checkbox> </Button>
<Checkbox label="Run"></Checkbox> </Col>
<Checkbox label="Movie"></Checkbox> </Row>
</CheckboxGroup>
</FormItem> <div v-if="electricityFeeArr.length === 0" class="empty-state">
<FormItem label="Desc" prop="desc"> 暂无电费时段配置，请点击上方按钮添加
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" </div>
placeholder="Enter something..." /> </FormItem>
</FormItem> <FormItem label="服务费" prop="ServiceFee">
<FormItem> <Input v-model="formValidate.ServiceFee" />
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button> </FormItem>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> <div slot="footer">
</FormItem> <Button type="text" @click="cancel">取消</Button>
</Form> <Button type="primary" @click="ok">确定</Button>
</Modal> </div>
</div> </Form>
</Modal>
</div>
</template> </template>
<script> <script>
import { GetPerPrice } from '@/api' import {
getStationList,
addPosition,
getStationRead,
getStationUpdate,
getStationDelete,
} from '@/api'
export default { export default {
name: 'charging_station', name: 'charging_station',
data() { data() {
return { return {
show_modal: false, page: 1,
total: 100, pageSize: 10,
tableHeight: 500, show_modal: false,
formInline: { total: 100,
user: '', tableHeight: 500,
password: '', formInline: {
}, user: '',
ruleInline: {}, password: '',
columns: [ },
{ ruleInline: {},
title: '站点名称', columns: [{
key: 'charge_station_name', title: '站点名称',
}, key: 'charge_station_name',
{ },
title: '电费', {
key: 'ElectricityFee', title: '电费',
}, key: 'ElectricityFee',
{ },
title: '服务费', {
key: 'ServiceFee', title: '服务费',
}, key: 'ServiceFee',
{ },
title: '操作', {
slot: 'action', title: '操作',
width: 150, slot: 'action',
align: 'center', width: 150,
}, align: 'center',
], },
data: [], ],
formValidate: { data: [],
name: '', formValidate: {
mail: '', charge_station_id: '',
city: '', ElectricityFee: '',
gender: '', ServiceFee: '',
interest: [], },
date: '', ruleValidate: {
time: '', charge_station_id: [{
desc: '', required: true,
}, message: '请选择充电站',
ruleValidate: { trigger: 'blur',
name: [ }],
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }, ElectricityFee: [{
], required: true,
mail: [ message: '请输入电费',
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' }, trigger: 'change',
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }, }],
], ServiceFee: [{
city: [ required: true,
{ required: true, message: 'Please select the city', trigger: 'change' }, message: '请输入服务费',
], trigger: 'change',
gender: [ }],
{ required: true, message: 'Please select gender', trigger: 'change' }, },
], electricityFeeArr: [{
interest: [ id: 1,
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' }, startTime: '00:00',
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }, endTime: '08:00',
], feeAmount: 0.50,
date: [ },
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }, {
], id: 2,
time: [ startTime: '08:00',
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }, endTime: '18:00',
], feeAmount: 0.80,
desc: [ },
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' }, ],
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }, }
], },
}, mounted() {
} this.getList()
}, this.calculateTableHeight()
mounted() { window.addEventListener('resize', this.calculateTableHeight)
this.getList() },
this.calculateTableHeight() beforeDestroy() {
window.addEventListener('resize', this.calculateTableHeight) window.removeEventListener('resize', this.calculateTableHeight)
}, },
beforeDestroy() { methods: {
window.removeEventListener('resize', this.calculateTableHeight) calculateTableHeight() {
}, // 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
methods: { const searchHeight = document.querySelector('.search-area').offsetHeight
calculateTableHeight() { const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距 const pageHeight = 32 // 分页组件大约高度
const searchHeight = document.querySelector('.search-area').offsetHeight const margins = 40 // 上下边距总和
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
const pageHeight = 32 // 分页组件大约高度 },
const margins = 40 // 上下边距总和 async getList() {
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130 await getStationList({
}, page: this.page,
async getList() { pageSize: this.pageSize,
await GetPerPrice({ page: 1 }).then((res) => { ...this.formInline,
this.total = res.total }).then((res) => {
this.total = res.data.total
this.data = res.data.data
})
},
handleSubmit() {
this.getList()
},
add() {
this.show_modal = true
this.$refs.formValidate.resetFields()
this.formValidate.charge_station_id = ''
},
cancel() {
this.$refs.formValidate.resetFields()
this.show_modal = false
},
// 详情
async show(id) {
await getStationRead({
id,
}).then(res => {
this.formValidate = {
...res.data,
}
this.show_modal = true
})
},
async remove(id) {
const confirm = await new Promise(resolve => {
this.$Modal.confirm({
title: '确认删除',
content: '您确定要删除此项吗？',
onOk: () => resolve(true),
onCancel: () => resolve(false),
})
})
if (!confirm) {
this.$Message.info('已取消删除')
return
}
await getStationDelete({
id,
}).then(res => {
this.$Message.success(res.msg)
this.getList()
})
},
async ok() {
const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
if (!valid) {
this.$Message.error('请正确填写表单')
return
}
if (this.formValidate.charge_station_id) {
await getStationUpdate(this.formValidate).then(res => {
this.$Message.success(res.msg)
this.getList()
this.cancel()
})
} else {
await addPosition(this.formValidate).then((res) => {
this.$Message.success(res.msg)
this.cancel()
this.getList()
})
}
},
onChangePage(e) {
if (this.page != e) {
this.page = e
this.getList()
}
},
onChangePageSize(e) {
if (this.pageSize != e) {
this.page = 1
this.pageSize = e
this.getList()
}
},
// 添加新的电费时段
addNewItem() {
const lastItem = this.electricityFeeArr[this.electricityFeeArr.length - 1]
this.data = res.yuan this.electricityFeeArr.push({
this.page = res.current_page id: Date.now(), // 使用时间戳作为唯一标识
}) startTime: '',
}, endTime: '',
handleSubmit(name) { feeAmount: lastItem ? lastItem.feeAmount : 0.60,
this.$refs[name].validate((valid) => { })
if (valid) { },
this.$Message.success('Success!') /**
} else { * 删除指定索引的电费时段
this.$Message.error('Fail!') */
} removeItem(index) {
}) if (this.electricityFeeArr.length <= 1) {
}, this.$message.warning('至少保留一个电费时段')
handleReset(name) { return
this.$refs[name].resetFields() }
},
handleSubmit2(name) { this.$confirm({
this.$refs[name].validate((valid) => { title: '确认删除',
if (valid) { content: '确定要删除这个电费时段吗？',
this.$Message.success('Success!') onOk: () => {
} else { this.electricityFeeArr.splice(index, 1)
this.$Message.error('Fail!') this.$message.success('删除成功')
} },
}) })
}, },
show(index) {
this.$Modal.info({ /**
title: 'User Info', * 获取完整的电费配置数据
content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`, */
}) getFeeConfigData() {
}, return this.electricityFeeArr.map(item => ({
remove(index) { start_time: item.startTime,
this.data.splice(index, 1) end_time: item.endTime,
}, amount: Number(item.feeAmount || 0),
ok() { }))
this.$Message.info('Clicked ok') },
}, /**
cancel() { * 校验电费配置数据的有效性
this.$Message.info('Clicked cancel') */
}, validateConfig() {
}, const errors = []
}
this.electricityFeeArr.forEach((item, index) => {
if (!item.startTime) {
errors.push(`第${index + 1}行的开始时间为空`)
}
if (!item.endTime) {
errors.push(`第${index + 1}行的结束时间为空`)
}
if (!item.feeAmount && item.feeAmount !== 0) {
errors.push(`第${index + 1}行的电费金额为空`)
}
if (parseFloat(item.feeAmount) < 0) {
errors.push(`第${index + 1}行的电费金额不能为负数`)
}
})
return {
isValid: errors.length === 0,
errors,
}
},
},
watch: {
electricityFeeArr: {
handler(newVal) {
console.log('电费配置发生变化:', newVal)
// 如果需要实时提交到父组件
// this.$emit('config-change', newVal);
},
deep: true,
},
},
}
</script> </script>
<style scoped> <style scoped>
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.action-btn { .action-btn {
margin: 20px 0; margin: 20px 0;
background-color: white; background-color: white;
padding: 20px; padding: 20px;
border: 1px solid #F3F7FD; border: 1px solid #F3F7FD;
border-radius: 15px; border-radius: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
button {
margin-right: 20px;
}
}
.table-container { button {
flex: 1; margin-right: 20px;
display: flex; }
flex-direction: column; }
}
.page { .table-container {
margin-top: 10px; flex: 1;
text-align: right; display: flex;
} flex-direction: column;
.search-area{ }
background-color: white;
padding-top: 20px; .page {
border: 1px solid #F3F7FD; margin-top: 10px;
border-radius: 15px; text-align: right;
} }
.search-area {
background-color: white;
padding-top: 20px;
border: 1px solid #F3F7FD;
border-radius: 15px;
}
.electricity-fee-container {
padding: 20px;
border: 1px solid #e8e8e8;
border-radius: 6px;
}
.header-row {
font-weight: bold;
margin-bottom: 15px;
color: #1890ff;
}
.data-row {
margin-bottom: 12px;
align-items: center;
transition: all 0.3s ease;
}
.data-row:hover {
background-color: #fafafa;
}
.last-row {
margin-bottom: 25px;
}
.empty-state {
text-align: center;
color: #999;
padding: 40px 0;
font-style: italic;
}
</style> </style>

2
src/views/charging_pile/Station.vue
View File

@@ -11,7 +11,7 @@
</Form> </Form>
</div> </div>
<div class="action-btn"> <div class="action-btn">
<Button type="primary" @click="show">添加</Button> <Button type="primary" @click="add">添加</Button>
<!-- <Button type="error">删除</Button> --> <!-- <Button type="error">删除</Button> -->
</div> </div>
<div class="table-container"> <div class="table-container">