init
This commit is contained in:
MeSHard
41
src/views/Home.vue
Normal file
41
src/views/Home.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<div class="home-content">
|
||||
<Button @click="getUserData">ajax 测试</Button>
|
||||
|
||||
<Input :rows="30" style="margin-top: 20px" v-model="userInfo" type="textarea" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchUserData } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
data() {
|
||||
return {
|
||||
userInfo: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserData() {
|
||||
fetchUserData().then(res => {
|
||||
this.userInfo = JSON.stringify(res, null, 4)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-container {
|
||||
padding: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.home-content {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
86
src/views/Msg.vue
Normal file
86
src/views/Msg.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<div>按钮</div>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Button>Default</Button>
|
||||
<Button type="primary">Primary</Button>
|
||||
<Button type="dashed">Dashed</Button>
|
||||
<Button type="text">Text</Button>
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Button type="info">Info</Button>
|
||||
<Button type="success">Success</Button>
|
||||
<Button type="warning">Warning</Button>
|
||||
<Button type="error">Error</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
<div>图标</div>
|
||||
<Icon type="ios-checkmark" />
|
||||
<div>
|
||||
<Title>h1. View Design</Title>
|
||||
<Title :level="2">h2. View Design</Title>
|
||||
<Title :level="3">h3. View Design</Title>
|
||||
<Title :level="4">h4. View Design</Title>
|
||||
<Title :level="5">h5. View Design</Title>
|
||||
</div>
|
||||
<div>分页</div>
|
||||
<Table border :columns="columns" :data="data"></Table>
|
||||
<Page :total="100" show-sizer />
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'msg',
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
23
src/views/Other.vue
Normal file
23
src/views/Other.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
单独的路由
|
||||
<div>
|
||||
<Button @click="reback" type="primary" style="margin-left: 100px">返回</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'other',
|
||||
methods: {
|
||||
reback() {
|
||||
this.$router.back()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
21
src/views/Password.vue
Normal file
21
src/views/Password.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
修改密码
|
||||
<input type="text">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'password',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
284
src/views/T1.vue
Normal file
284
src/views/T1.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div style="padding: 10px">
|
||||
<div style="background: #fff; border-radius: 8px; padding: 20px;">
|
||||
<div class="query-c">
|
||||
查询：
|
||||
<Input search placeholder="请输入查询内容" style="width: auto" />
|
||||
</div>
|
||||
<br>
|
||||
<Table max-height="670" border stripe :columns="columns1" :data="data1"></Table>
|
||||
<br>
|
||||
<Page :total="100" show-sizer show-elevator/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 't1',
|
||||
data() {
|
||||
return {
|
||||
columns1: [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
},
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 20,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
date: '2016-10-03',
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'London No. 1 Lake Park',
|
||||
date: '2016-10-01',
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
date: '2016-10-02',
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
src/views/UserInfo.vue
Normal file
22
src/views/UserInfo.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
基本资料
|
||||
<input type="text">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'userinfo',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
261
src/views/charging_pile/Fault.vue
Normal file
261
src/views/charging_pile/Fault.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="充电桩名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="Name" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
||||
</FormItem>
|
||||
<FormItem label="E-mail" prop="mail">
|
||||
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
||||
</FormItem>
|
||||
<FormItem label="City" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="Date">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Gender" prop="gender">
|
||||
<RadioGroup v-model="formValidate.gender">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Hobby" prop="interest">
|
||||
<CheckboxGroup v-model="formValidate.interest">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Desc" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
||||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetChargeZ } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: '站点名称',
|
||||
key: 'charge_station_id',
|
||||
},
|
||||
{
|
||||
title: '充电桩编号',
|
||||
key: 'ConnectorID',
|
||||
},
|
||||
{
|
||||
title: '充电桩类型',
|
||||
key: 'EquipmentType',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
city: '',
|
||||
gender: '',
|
||||
interest: [],
|
||||
date: '',
|
||||
time: '',
|
||||
desc: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
||||
],
|
||||
city: [
|
||||
{ required: true, message: 'Please select the city', trigger: 'change' },
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: 'Please select gender', trigger: 'change' },
|
||||
],
|
||||
interest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
||||
],
|
||||
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()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await GetChargeZ({ page: 1, status: 'fault' }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
265
src/views/charging_pile/Pile.vue
Normal file
265
src/views/charging_pile/Pile.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="充电桩名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="Name" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
||||
</FormItem>
|
||||
<FormItem label="E-mail" prop="mail">
|
||||
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
||||
</FormItem>
|
||||
<FormItem label="City" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="Date">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Gender" prop="gender">
|
||||
<RadioGroup v-model="formValidate.gender">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Hobby" prop="interest">
|
||||
<CheckboxGroup v-model="formValidate.interest">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Desc" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
||||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetChargeZ } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: '站点名称',
|
||||
key: 'charge_station_name',
|
||||
},
|
||||
{
|
||||
title: '充电桩编号',
|
||||
key: 'ConnectorID',
|
||||
},
|
||||
{
|
||||
title: '充电桩状态',
|
||||
key: 'status_text',
|
||||
},
|
||||
{
|
||||
title: '位号',
|
||||
key: 'no',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
city: '',
|
||||
gender: '',
|
||||
interest: [],
|
||||
date: '',
|
||||
time: '',
|
||||
desc: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
||||
],
|
||||
city: [
|
||||
{ required: true, message: 'Please select the city', trigger: 'change' },
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: 'Please select gender', trigger: 'change' },
|
||||
],
|
||||
interest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
||||
],
|
||||
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()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await GetChargeZ({ page: 1 }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
262
src/views/charging_pile/Price.vue
Normal file
262
src/views/charging_pile/Price.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="站点名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="Name" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
||||
</FormItem>
|
||||
<FormItem label="E-mail" prop="mail">
|
||||
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
||||
</FormItem>
|
||||
<FormItem label="City" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="Date">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Gender" prop="gender">
|
||||
<RadioGroup v-model="formValidate.gender">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Hobby" prop="interest">
|
||||
<CheckboxGroup v-model="formValidate.interest">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Desc" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
||||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetPerPrice } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: '站点名称',
|
||||
key: 'charge_station_name',
|
||||
},
|
||||
{
|
||||
title: '电费',
|
||||
key: 'ElectricityFee',
|
||||
},
|
||||
{
|
||||
title: '服务费',
|
||||
key: 'ServiceFee',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
city: '',
|
||||
gender: '',
|
||||
interest: [],
|
||||
date: '',
|
||||
time: '',
|
||||
desc: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
||||
],
|
||||
city: [
|
||||
{ required: true, message: 'Please select the city', trigger: 'change' },
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: 'Please select gender', trigger: 'change' },
|
||||
],
|
||||
interest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
||||
],
|
||||
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()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await GetPerPrice({ page: 1 }).then((res) => {
|
||||
this.total = res.total
|
||||
|
||||
this.data = res.yuan
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
273
src/views/charging_pile/Station.vue
Normal file
273
src/views/charging_pile/Station.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="站点名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="添加站点" :mask-closable="false">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="站点名称" prop="charge_station_name">
|
||||
<Input v-model="formValidate.charge_station_name" placeholder="站点名称" />
|
||||
</FormItem>
|
||||
<FormItem label="站点编号" prop="charge_station_number">
|
||||
<Input v-model="formValidate.charge_station_number" placeholder="站点编号" />
|
||||
</FormItem>
|
||||
<FormItem label="城市" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="地址" prop="address">
|
||||
<Input v-model="formValidate.address" placeholder="地址" />
|
||||
</FormItem>
|
||||
<FormItem label="联系电话" prop="charge_station_phone">
|
||||
<Input v-model="formValidate.charge_station_phone" placeholder="联系电话" />
|
||||
</FormItem>
|
||||
<FormItem label="精度" prop="longitude">
|
||||
<Input v-model="formValidate.longitude" placeholder="精度" />
|
||||
</FormItem>
|
||||
<FormItem label="纬度" prop="latitude">
|
||||
<Input v-model="formValidate.latitude" placeholder="纬度" />
|
||||
</FormItem>
|
||||
<FormItem label="电费" prop="ElectricityFee">
|
||||
<Input v-model="formValidate.ElectricityFee" placeholder="电费" />
|
||||
</FormItem>
|
||||
<FormItem label="服务费" prop="ServiceFee">
|
||||
<Input v-model="formValidate.ServiceFee" placeholder="服务费" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="cancel">取消</Button>
|
||||
<Button type="primary" @click="ok">确定</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
GetPosition,
|
||||
} from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: '站点名称',
|
||||
key: 'charge_station_name',
|
||||
},
|
||||
{
|
||||
title: '站点编号',
|
||||
key: 'charge_station_number',
|
||||
},
|
||||
{
|
||||
title: '站点地址',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: '精度',
|
||||
key: 'longitude',
|
||||
},
|
||||
{
|
||||
title: '纬度',
|
||||
key: 'latitude',
|
||||
},
|
||||
{
|
||||
title: '电价',
|
||||
key: 'ElectricityFee',
|
||||
},
|
||||
{
|
||||
title: '服务费',
|
||||
key: 'ServiceFee',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
charge_station_name: '',
|
||||
charge_station_number: '',
|
||||
city: '',
|
||||
charge_station_phone: '',
|
||||
longitude: [],
|
||||
latitude: '',
|
||||
ElectricityFee: '',
|
||||
ServiceFee: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
charge_station_name: [{
|
||||
required: true,
|
||||
message: 'The name cannot be empty',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
charge_station_number: [{
|
||||
required: true,
|
||||
message: 'Mailbox cannot be empty',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
city: [{
|
||||
required: true,
|
||||
message: 'Please select the city',
|
||||
trigger: 'change',
|
||||
}],
|
||||
address: [{
|
||||
required: true,
|
||||
message: 'Please select gender',
|
||||
trigger: 'change',
|
||||
}],
|
||||
longitude: [{
|
||||
required: true,
|
||||
message: 'Please select the date',
|
||||
trigger: 'change',
|
||||
}],
|
||||
latitude: [{
|
||||
required: true,
|
||||
message: 'Please select time',
|
||||
trigger: 'change',
|
||||
}],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await GetPosition({
|
||||
page: 1,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
702
src/views/customer_center/CorporateClient.vue
Normal file
702
src/views/customer_center/CorporateClient.vue
Normal file
@@ -0,0 +1,702 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="name" label="企业名称：">
|
||||
<Input type="text" v-model="formInline.name" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="credit_code" label="企业代码：">
|
||||
<Input type="text" v-model="formInline.credit_code" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
<Button type="primary" @click="resetSubmit('formInline')" style="margin-left: 8px">重置</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="add">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px"
|
||||
@click="show_user_list(row.id)">员工账号</Button>
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show_car_list(row.id)">企业车辆</Button>
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show_rechage_list(row.id)">充值记录</Button>
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show_chage_list(row.id)">充电记录</Button>
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.id)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(row.id)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
|
||||
@on-page-size-change="onChangePageSize" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" :title="formValidate.id ? '编辑企业' : '新增企业'" :mask-closable="false">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="企业名称" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="请输入企业名称" />
|
||||
</FormItem>
|
||||
<FormItem label="企业统一社会信用代码" prop="credit_code">
|
||||
<Input v-model="formValidate.credit_code" placeholder="请输入企业统一社会信用代码" />
|
||||
</FormItem>
|
||||
<div style="display: flex;">
|
||||
<FormItem label="联系人" prop="username">
|
||||
<Input v-model="formValidate.username" placeholder="请输入联系人" />
|
||||
</FormItem>
|
||||
<FormItem label="联系电话" prop="phone">
|
||||
<Input v-model="formValidate.phone" placeholder="请输入联系电话" />
|
||||
</FormItem>
|
||||
</div>
|
||||
<FormItem label="折扣" prop="discount">
|
||||
<RadioGroup v-model="formValidate.discount">
|
||||
<Radio label="1">电费和服务费</Radio>
|
||||
<Radio label="2">仅服务费</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="折扣范围" prop="range">
|
||||
<Input v-model="formValidate.range" placeholder="请输入折扣">
|
||||
<template #suffix>
|
||||
<div style="line-height:32px;border-left:1px solid #c3b8b8;">%</div>
|
||||
</template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem label="扣款账户" prop="account">
|
||||
<RadioGroup v-model="formValidate.account">
|
||||
<Radio label="1">企业账户</Radio>
|
||||
<Radio label="2">个人钱包</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="备注" prop="marks">
|
||||
<Input v-model="formValidate.marks" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="请输入备注信息..." />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<!--解决弹框自动关闭-->
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="cancel">取消</Button>
|
||||
<Button type="primary" @click="ok">确定</Button>
|
||||
</div>
|
||||
|
||||
</Modal>
|
||||
|
||||
<!-- 员工账号 -->
|
||||
<Modal v-model="user_list_show_modal" title="员工账号" :mask-closable="false" :fullscreen="true"
|
||||
:footer-hide="true">
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="addUser">添加</Button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="user_columns" stripe :height="tableHeight" :data="user_data">
|
||||
<template #group_id="{ row }">
|
||||
<strong v-if="row.group_id == 1">管理员</strong>
|
||||
</template>
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px"
|
||||
@click="showUser(row.id)">编辑</Button>
|
||||
<Button type="error" size="small" @click="removeUser(row.id)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="user_total" show-total show-sizer class="page" @on-change="onChangeUserPage"
|
||||
@on-page-size-change="onChangeUserPageSize" />
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 员工账号 添加、编辑 -->
|
||||
<Modal v-model="user_show_modal" :title="formUserValidate.id ? '编辑员工账号' : '新增员工账号'" :mask-closable="false">
|
||||
<Form ref="formUserValidate" :model="formUserValidate" :rules="ruleUserValidate" :label-width="80">
|
||||
<FormItem label="联系电话" prop="phone">
|
||||
<Input v-model="formUserValidate.phone" placeholder="请输入联系电话" />
|
||||
</FormItem>
|
||||
<FormItem label="管理员" prop="group_id">
|
||||
<RadioGroup v-model="formUserValidate.group_id">
|
||||
<Radio label="1">是</Radio>
|
||||
<Radio label="0">否</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<!--解决弹框自动关闭-->
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="user_cancel">取消</Button>
|
||||
<Button type="primary" @click="user_ok">确定</Button>
|
||||
</div>
|
||||
|
||||
</Modal>
|
||||
|
||||
<!-- 企业车辆 -->
|
||||
<Modal v-model="car_list_show_modal" title="企业车辆" :mask-closable="false" :fullscreen="true"
|
||||
:footer-hide="true">
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="addCar">添加</Button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="car_columns" stripe :height="tableHeight" :data="car_data">
|
||||
<template #vin_type="{ row }">
|
||||
{{ row.vin_type == 2 ? '关闭' : '开启' }}
|
||||
</template>
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px"
|
||||
@click="showCar(row.id)">编辑</Button>
|
||||
<Button type="error" size="small" @click="removeCar(row.id)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="user_total" show-total show-sizer class="page" @on-change="onChangeUserPage"
|
||||
@on-page-size-change="onChangeUserPageSize" />
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 企业车辆 添加、编辑 -->
|
||||
<Modal v-model="car_show_modal" :title="formCarValidate.id ? '编辑车辆信息' : '新增企业车辆'" :mask-closable="false">
|
||||
<Form ref="formCarValidate" :model="formCarValidate" :rules="ruleCarValidate" :label-width="80">
|
||||
<FormItem label="车辆" prop="car_number">
|
||||
<Input v-model="formCarValidate.car_number" placeholder="请输入车辆车牌号" />
|
||||
</FormItem>
|
||||
<FormItem label="VIN码" prop="car_vin">
|
||||
<Input v-model="formCarValidate.car_vin" placeholder="请输入VIN码" />
|
||||
</FormItem>
|
||||
<FormItem label="内部编号" prop="car_no">
|
||||
<Input v-model="formCarValidate.car_no" placeholder="请输入内部编号" />
|
||||
</FormItem>
|
||||
<FormItem label="车辆所有人" prop="car_user">
|
||||
<Input v-model="formCarValidate.car_user" placeholder="请输入车辆所有人" />
|
||||
</FormItem>
|
||||
<FormItem label="VIN充电类型" prop="vin_type">
|
||||
<RadioGroup v-model="formCarValidate.vin_type">
|
||||
<Radio label="1">开启</Radio>
|
||||
<Radio label="2">关闭</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<!--解决弹框自动关闭-->
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="car_cancel">取消</Button>
|
||||
<Button type="primary" @click="car_ok">确定</Button>
|
||||
</div>
|
||||
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getEnterpriseList, getEnterpriseSave, getEnterpriseDelete, getEnterpriseRead, getEnterpriseUpdate,
|
||||
getEnterpriseUserList, getEnterpriseUserUpdate, getEnterpriseUserSave, getEnterpriseUserRead, getEnterpriseUserDelete,
|
||||
getEnterpriseCarList, getEnterpriseCarUpdate, getEnterpriseCarSave, getEnterpriseCarRead, getEnterpriseCarDelete } from '@/api'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
name: '',
|
||||
credit_code: '',
|
||||
},
|
||||
ruleInline: {
|
||||
},
|
||||
columns: [{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '企业名称',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '企业统一社会信用代码',
|
||||
key: 'credit_code',
|
||||
},
|
||||
{
|
||||
title: '账户余额',
|
||||
key: 'money',
|
||||
},
|
||||
{
|
||||
title: '联系人',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 300,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
id: null,
|
||||
name: '',
|
||||
credit_code: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
discount: '1',
|
||||
range: '',
|
||||
account: '1',
|
||||
marks: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '请输入企业名称',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
credit_code: [{
|
||||
required: true,
|
||||
message: '请输入企业统一社会信用代码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
username: [{
|
||||
required: true,
|
||||
message: '请输入联系人',
|
||||
trigger: 'change',
|
||||
}],
|
||||
phone: [{
|
||||
required: true,
|
||||
message: '请输入联系电话',
|
||||
trigger: 'change',
|
||||
}],
|
||||
},
|
||||
// 用户
|
||||
user_list_show_modal: false,
|
||||
user_show_modal: false,
|
||||
user_columns: [{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '用户',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '管理员',
|
||||
slot: 'group_id',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 300,
|
||||
align: 'center',
|
||||
}],
|
||||
formUserValidate: {
|
||||
id: null,
|
||||
phone: '',
|
||||
group_id: '0',
|
||||
enterprise_id: '',
|
||||
},
|
||||
ruleUserValidate: {
|
||||
phone: [{
|
||||
required: true,
|
||||
message: '请输入联系电话',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
},
|
||||
user_data: [],
|
||||
user_total: 0,
|
||||
userPage: 1,
|
||||
userPageSize: 10,
|
||||
// 车辆
|
||||
car_list_show_modal: false,
|
||||
car_show_modal: false,
|
||||
car_columns: [{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '车辆',
|
||||
key: 'car_number',
|
||||
},
|
||||
{
|
||||
title: 'VIN码',
|
||||
key: 'car_vin',
|
||||
},
|
||||
{
|
||||
title: '内部编号',
|
||||
key: 'car_no',
|
||||
},
|
||||
{
|
||||
title: '车辆所有人',
|
||||
key: 'car_user',
|
||||
},
|
||||
{
|
||||
title: 'VIN充电类型',
|
||||
slot: 'vin_type',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 300,
|
||||
align: 'center',
|
||||
}],
|
||||
formCarValidate: {
|
||||
id: null,
|
||||
car_number: '',
|
||||
car_vin: '',
|
||||
enterprise_id: '',
|
||||
car_no: '',
|
||||
car_user: '',
|
||||
vin_type: '1',
|
||||
},
|
||||
ruleCarValidate: {
|
||||
car_number: [{
|
||||
required: true,
|
||||
message: '请输入车辆车牌号',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
car_vin: [{
|
||||
required: true,
|
||||
message: '请输入车辆VIN码',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
},
|
||||
car_data: [],
|
||||
car_total: 0,
|
||||
carPage: 1,
|
||||
carPageSize: 10,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
// 列表
|
||||
async getList() {
|
||||
await getEnterpriseList({
|
||||
page: this.page,
|
||||
pageSize: this.pageSize,
|
||||
...this.formInline,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
this.getList()
|
||||
},
|
||||
resetSubmit() {
|
||||
this.$refs.formInline.resetFields()
|
||||
this.getList()
|
||||
},
|
||||
// 详情
|
||||
async show(id) {
|
||||
await getEnterpriseRead({ id }).then(res => {
|
||||
this.formValidate = { ...res.data }
|
||||
this.formValidate.discount = String(this.formValidate.discount)
|
||||
this.formValidate.account = String(this.formValidate.account)
|
||||
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 getEnterpriseDelete({ 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.id) {
|
||||
await getEnterpriseUpdate(this.formValidate).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getList()
|
||||
this.cancel()
|
||||
})
|
||||
} else {
|
||||
await getEnterpriseSave(this.formValidate).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getList()
|
||||
this.cancel()
|
||||
})
|
||||
}
|
||||
},
|
||||
add() {
|
||||
this.show_modal = true
|
||||
this.$refs.formValidate.resetFields()
|
||||
this.formValidate.id = ''
|
||||
},
|
||||
cancel() {
|
||||
this.$refs.formValidate.resetFields()
|
||||
this.show_modal = false
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
// 员工账号列表
|
||||
show_user_list(id) {
|
||||
this.user_list_show_modal = true
|
||||
this.formUserValidate.enterprise_id = id
|
||||
this.getEnterpriseUserList()
|
||||
},
|
||||
async getEnterpriseUserList() {
|
||||
await getEnterpriseUserList({
|
||||
enterprise_id: this.formUserValidate.enterprise_id,
|
||||
page: this.userPage,
|
||||
pageSize: this.userPageSize,
|
||||
}).then((res) => {
|
||||
this.user_data = res.data
|
||||
this.user_total = res.total
|
||||
})
|
||||
},
|
||||
// 添加员工账号 弹窗显示
|
||||
addUser() {
|
||||
this.$refs.formUserValidate.resetFields()
|
||||
this.formUserValidate.id = ''
|
||||
this.user_show_modal = true
|
||||
},
|
||||
// 关闭新增弹窗
|
||||
user_cancel() {
|
||||
this.user_show_modal = false
|
||||
this.$refs.formUserValidate.resetFields()
|
||||
},
|
||||
// 提交员工账号数据
|
||||
async user_ok() {
|
||||
const valid = await new Promise(resolve => this.$refs.formUserValidate.validate(resolve))
|
||||
|
||||
if (!valid) {
|
||||
this.$Message.error('请正确填写表单')
|
||||
return
|
||||
}
|
||||
if (this.formUserValidate.id) {
|
||||
await getEnterpriseUserUpdate(this.formUserValidate).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getEnterpriseUserList()
|
||||
this.user_cancel()
|
||||
})
|
||||
} else {
|
||||
await getEnterpriseUserSave(this.formUserValidate).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getEnterpriseUserList()
|
||||
this.user_cancel()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 编辑员工账号信息
|
||||
async showUser(id) {
|
||||
await getEnterpriseUserRead({ id }).then(res => {
|
||||
this.formUserValidate = { ...res.data }
|
||||
this.formUserValidate.group_id = String(this.formUserValidate.group_id)
|
||||
this.user_show_modal = true
|
||||
})
|
||||
},
|
||||
// 删除员工账号信息
|
||||
async removeUser(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 getEnterpriseUserDelete({ id }).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getEnterpriseUserList()
|
||||
})
|
||||
},
|
||||
onChangeUserPage(e) {
|
||||
if (this.userPage != e) {
|
||||
this.userPage = e
|
||||
this.getEnterpriseUserList()
|
||||
}
|
||||
},
|
||||
onChangeUserPageSize(e) {
|
||||
if (this.userPageSize != e) {
|
||||
this.userPage = 1
|
||||
this.userPageSize = e
|
||||
this.getEnterpriseUserList()
|
||||
}
|
||||
},
|
||||
// 企业车辆列表
|
||||
show_car_list(id) {
|
||||
this.car_list_show_modal = true
|
||||
this.formCarValidate.enterprise_id = id
|
||||
this.getEnterpriseCarList()
|
||||
},
|
||||
async getEnterpriseCarList() {
|
||||
await getEnterpriseCarList({
|
||||
enterprise_id: this.formCarValidate.enterprise_id,
|
||||
page: this.carPage,
|
||||
pageSize: this.carPageSize,
|
||||
}).then((res) => {
|
||||
this.car_data = res.data
|
||||
this.car_total = res.total
|
||||
})
|
||||
},
|
||||
// 添加车辆信息 弹窗显示
|
||||
addCar() {
|
||||
this.$refs.formCarValidate.resetFields()
|
||||
this.formCarValidate.id = ''
|
||||
this.car_show_modal = true
|
||||
},
|
||||
// 关闭新增弹窗
|
||||
car_cancel() {
|
||||
this.car_show_modal = false
|
||||
this.$refs.formCarValidate.resetFields()
|
||||
},
|
||||
// 提交车辆数据
|
||||
async car_ok() {
|
||||
const valid = await new Promise(resolve => this.$refs.formCarValidate.validate(resolve))
|
||||
|
||||
if (!valid) {
|
||||
this.$Message.error('请正确填写表单')
|
||||
return
|
||||
}
|
||||
if (this.formCarValidate.id) {
|
||||
await getEnterpriseCarUpdate(this.formCarValidate).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getEnterpriseCarList()
|
||||
this.car_cancel()
|
||||
})
|
||||
} else {
|
||||
await getEnterpriseCarSave(this.formCarValidate).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getEnterpriseCarList()
|
||||
this.car_cancel()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 编辑车辆信息
|
||||
async showCar(id) {
|
||||
await getEnterpriseCarRead({ id }).then(res => {
|
||||
this.formCarValidate = { ...res.data }
|
||||
this.formCarValidate.vin_type = String(this.formCarValidate.vin_type)
|
||||
this.car_show_modal = true
|
||||
})
|
||||
},
|
||||
// 删除车辆信息
|
||||
async removeCar(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 getEnterpriseCarDelete({ id }).then(res => {
|
||||
this.$Message.success(res.msg)
|
||||
this.getEnterpriseCarList()
|
||||
})
|
||||
},
|
||||
onChangeCarPage(e) {
|
||||
if (this.carPage != e) {
|
||||
this.carPage = e
|
||||
this.getEnterpriseCarList()
|
||||
}
|
||||
},
|
||||
onChangeCarPageSize(e) {
|
||||
if (this.carPageSize != e) {
|
||||
this.carPage = 1
|
||||
this.carPageSize = e
|
||||
this.getEnterpriseCarList()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
273
src/views/customer_center/WxUser.vue
Normal file
273
src/views/customer_center/WxUser.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="客户名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="Name" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
||||
</FormItem>
|
||||
<FormItem label="E-mail" prop="mail">
|
||||
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
||||
</FormItem>
|
||||
<FormItem label="City" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="Date">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Gender" prop="gender">
|
||||
<RadioGroup v-model="formValidate.gender">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Hobby" prop="interest">
|
||||
<CheckboxGroup v-model="formValidate.interest">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Desc" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
||||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetUser } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: '区域',
|
||||
key: 'area',
|
||||
},
|
||||
{
|
||||
title: '用户名称',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: 'openid',
|
||||
key: 'openid',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '余额',
|
||||
key: 'account',
|
||||
},
|
||||
{
|
||||
title: '冻结余额',
|
||||
key: 'FrozenAccount',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
city: '',
|
||||
gender: '',
|
||||
interest: [],
|
||||
date: '',
|
||||
time: '',
|
||||
desc: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
||||
],
|
||||
city: [
|
||||
{ required: true, message: 'Please select the city', trigger: 'change' },
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: 'Please select gender', trigger: 'change' },
|
||||
],
|
||||
interest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
||||
],
|
||||
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()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await GetUser({ type: '', page: 1 }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
261
src/views/operations_center/activity.vue
Normal file
261
src/views/operations_center/activity.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="充电桩名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="Name" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
||||
</FormItem>
|
||||
<FormItem label="E-mail" prop="mail">
|
||||
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
||||
</FormItem>
|
||||
<FormItem label="City" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="Date">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Gender" prop="gender">
|
||||
<RadioGroup v-model="formValidate.gender">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Hobby" prop="interest">
|
||||
<CheckboxGroup v-model="formValidate.interest">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Desc" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
||||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEventList } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: '活动名称',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: '活动状态',
|
||||
key: 'statusMsg',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'create_time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
city: '',
|
||||
gender: '',
|
||||
interest: [],
|
||||
date: '',
|
||||
time: '',
|
||||
desc: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
||||
],
|
||||
city: [
|
||||
{ required: true, message: 'Please select the city', trigger: 'change' },
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: 'Please select gender', trigger: 'change' },
|
||||
],
|
||||
interest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
||||
],
|
||||
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()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getEventList({ page: 1 }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
261
src/views/operations_center/coupon.vue
Normal file
261
src/views/operations_center/coupon.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="优惠券名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="Name" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
||||
</FormItem>
|
||||
<FormItem label="E-mail" prop="mail">
|
||||
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
||||
</FormItem>
|
||||
<FormItem label="City" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="Date">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Gender" prop="gender">
|
||||
<RadioGroup v-model="formValidate.gender">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Hobby" prop="interest">
|
||||
<CheckboxGroup v-model="formValidate.interest">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Desc" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
||||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEventList } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: '优惠券名称',
|
||||
key: 'title',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'statusMsg',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'create_time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
city: '',
|
||||
gender: '',
|
||||
interest: [],
|
||||
date: '',
|
||||
time: '',
|
||||
desc: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
||||
],
|
||||
city: [
|
||||
{ required: true, message: 'Please select the city', trigger: 'change' },
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: 'Please select gender', trigger: 'change' },
|
||||
],
|
||||
interest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
||||
],
|
||||
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()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getEventList({ page: 1 }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
9
src/views/operations_center/invoice.vue
Normal file
9
src/views/operations_center/invoice.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>safsa</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
9
src/views/operations_center/user_vip.vue
Normal file
9
src/views/operations_center/user_vip.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>safsa</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
201
src/views/order/charge_order.vue
Normal file
201
src/views/order/charge_order.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="用户手机号">
|
||||
<Input type="text" v-model="formInline.phone" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #order="{ row, index }">
|
||||
订单编号: {{ row.order_number }}<br>
|
||||
开始时间: {{ row.start_time }}<br>
|
||||
结束时间: {{ row.end_time }}
|
||||
</template>
|
||||
<template #pile="{ row, index }">
|
||||
充电站名称: {{ row.charge_station_name }}<br>
|
||||
充电桩编号: {{ row.ConnectorID}}
|
||||
</template>
|
||||
<template #user="{ row, index }">
|
||||
openId: {{ row.openid }}<br>
|
||||
手机号: {{ row.phone}}<br>
|
||||
VIN: {{ row.vin }}
|
||||
</template>
|
||||
<template #power="{ row, index }">
|
||||
电量: {{ row.TotalPower }}<br>
|
||||
电费: {{ row.ElecMoney}}<br>
|
||||
服务费: {{ row.SeviceMoney }}<br>
|
||||
总计: {{ row.TotalMoney }}<br>
|
||||
</template>
|
||||
<template #type="{ row, index }">
|
||||
订单类型: {{ row.type_text }}<br>
|
||||
<div v-if="row.type == 1">
|
||||
充值金额: {{ row.WithholdingMoney }}<br>
|
||||
退还金额: {{ row.FeedbackMoney }}<br>
|
||||
{{row.is_wind == 0 ? '未结算' : '已结算'}}
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ row, index }">
|
||||
<!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> -->
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
|
||||
@on-page-size-change="onChangePageSize"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getChargeOrder } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'order_id',
|
||||
width: '80',
|
||||
},
|
||||
{
|
||||
title: '订单信息',
|
||||
slot: 'order',
|
||||
width: '280',
|
||||
},
|
||||
{
|
||||
title: '充电站信息',
|
||||
slot: 'pile',
|
||||
width: '240',
|
||||
},
|
||||
{
|
||||
title: '用户信息',
|
||||
slot: 'user',
|
||||
width: '310',
|
||||
},
|
||||
{
|
||||
title: '充电信息',
|
||||
slot: 'power',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '充电类型',
|
||||
slot: 'type',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getChargeOrder({ page: this.page, pageSize: this.pageSize, ...this.formInline }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
this.getList()
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
140
src/views/order/order_total.vue
Normal file
140
src/views/order/order_total.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline :label-width="120">
|
||||
<FormItem prop="user" label="时间">
|
||||
<Input type="text" v-model="formInline.user" placeholder="Username"></Input>
|
||||
</FormItem>
|
||||
<FormItem prop="password" label="充电桩">
|
||||
<Input type="password" v-model="formInline.password" placeholder="Password"></Input>
|
||||
</FormItem>
|
||||
<FormItem prop="password" label="充电站">
|
||||
<Input type="password" v-model="formInline.password" placeholder="Password"></Input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div id="main" ref="chartContainer" style="width: 100%; height: 400px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'Total',
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
chartInstance: null,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
}
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.$refs.chartContainer) return
|
||||
|
||||
// 销毁旧实例
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
}
|
||||
|
||||
this.chartInstance = echarts.init(this.$refs.chartContainer)
|
||||
|
||||
// 模拟数据
|
||||
const xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
const orderData = [120, 132, 101, 134, 90, 230, 210]
|
||||
const revenueData = [220, 182, 191, 234, 290, 330, 310]
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '充电订单趋势',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['订单量', '收入'],
|
||||
top: 30,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [{
|
||||
name: '订单量',
|
||||
type: 'line',
|
||||
data: orderData,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#5470c6',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'line',
|
||||
data: revenueData,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#91cc75',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
this.chartInstance.setOption(option)
|
||||
|
||||
// 响应式调整
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
|
||||
handleResize() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#main {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
177
src/views/order/recharge_order.vue
Normal file
177
src/views/order/recharge_order.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="openid">
|
||||
<Input type="text" v-model="formInline.openid" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> -->
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
|
||||
@on-page-size-change="onChangePageSize" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getReChargeOrder } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
openid: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '订单编号',
|
||||
key: 'out_trade_no',
|
||||
},
|
||||
{
|
||||
title: '用户',
|
||||
key: 'openid',
|
||||
},
|
||||
{
|
||||
title: '充值金额',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
title: '已用金额',
|
||||
key: 'total_used',
|
||||
},
|
||||
{
|
||||
title: '充值状态',
|
||||
key: 'trade_state',
|
||||
},
|
||||
{
|
||||
title: '充值时间',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getReChargeOrder({
|
||||
page: this.page,
|
||||
pageSize: this.pageSize,
|
||||
...this.formInline,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.getList()
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
190
src/views/order/refund_order.vue
Normal file
190
src/views/order/refund_order.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="openid">
|
||||
<Input type="text" v-model="formInline.openid" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> -->
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
|
||||
@on-page-size-change="onChangePageSize"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRefundOrder } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
openid: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '订单编号',
|
||||
key: 'out_trade_no',
|
||||
},
|
||||
{
|
||||
title: '用户',
|
||||
key: 'openid',
|
||||
},
|
||||
{
|
||||
title: '用户手机号',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '退款金额',
|
||||
key: 'refund_total',
|
||||
},
|
||||
{
|
||||
title: '退还账户',
|
||||
key: 'user_received_account',
|
||||
},
|
||||
{
|
||||
title: '退款状态',
|
||||
key: 'status',
|
||||
},
|
||||
{
|
||||
title: '退款时间',
|
||||
key: 'create_time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getRefundOrder({
|
||||
page: this.page,
|
||||
pageSize: this.pageSize,
|
||||
...this.formInline,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
9
src/views/reports/activation.vue
Normal file
9
src/views/reports/activation.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
9
src/views/reports/backup_and_repair.vue
Normal file
9
src/views/reports/backup_and_repair.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
183
src/views/reports/caiwu_reports.vue.vue
Normal file
183
src/views/reports/caiwu_reports.vue.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="用户">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="类型">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="起止时间">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> -->
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
|
||||
@on-page-size-change="onChangePageSize" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCaiWuData } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: 'Id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '用户',
|
||||
key: 'openid',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type_text',
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
key: 'money',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'mark',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
key: 'createtime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getCaiWuData({
|
||||
page: this.page,
|
||||
pageSize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
9
src/views/reports/income_analysis.vue
Normal file
9
src/views/reports/income_analysis.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
9
src/views/reports/rate.vue
Normal file
9
src/views/reports/rate.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
9
src/views/reports/yunwei_reports.vue
Normal file
9
src/views/reports/yunwei_reports.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>322534</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
203
src/views/reports/yunying_reports.vue
Normal file
203
src/views/reports/yunying_reports.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="站点">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="充电桩">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="起止时间">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> -->
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
|
||||
@on-page-size-change="onChangePageSize" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getYunYingData } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: '充电站名称',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '桩类型',
|
||||
key: 'out_trade_no',
|
||||
},
|
||||
{
|
||||
title: '桩数量',
|
||||
key: 'openid',
|
||||
},
|
||||
{
|
||||
title: '枪数量',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
title: '充电次数',
|
||||
key: 'total_used',
|
||||
},
|
||||
{
|
||||
title: '充电电量(度)',
|
||||
key: 'trade_state',
|
||||
},
|
||||
{
|
||||
title: '充电金额(元)',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '电费',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '服务费',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '总时长',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '尖峰平谷电量',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getYunYingData({
|
||||
page: this.page,
|
||||
pageSize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
273
src/views/system/admin.vue
Normal file
273
src/views/system/admin.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="用户名：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="show_modal = true">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
|
||||
@on-cancel="cancel">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="Name" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="Enter your name" />
|
||||
</FormItem>
|
||||
<FormItem label="E-mail" prop="mail">
|
||||
<Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
|
||||
</FormItem>
|
||||
<FormItem label="City" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="Select your city">
|
||||
<Option value="beijing">New York</Option>
|
||||
<Option value="shanghai">London</Option>
|
||||
<Option value="shenzhen">Sydney</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="Date">
|
||||
<Row>
|
||||
<Col span="11">
|
||||
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
|
||||
</Col>
|
||||
<Col span="2" style="text-align: center">-</Col>
|
||||
<Col span="11">
|
||||
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
<FormItem label="Gender" prop="gender">
|
||||
<RadioGroup v-model="formValidate.gender">
|
||||
<Radio label="male">Male</Radio>
|
||||
<Radio label="female">Female</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Hobby" prop="interest">
|
||||
<CheckboxGroup v-model="formValidate.interest">
|
||||
<Checkbox label="Eat"></Checkbox>
|
||||
<Checkbox label="Sleep"></Checkbox>
|
||||
<Checkbox label="Run"></Checkbox>
|
||||
<Checkbox label="Movie"></Checkbox>
|
||||
</CheckboxGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Desc" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="Enter something..." />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
|
||||
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetAdmin } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
key: 'nickname',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '岗位',
|
||||
key: 'position',
|
||||
},
|
||||
{
|
||||
title: '角色名',
|
||||
key: 'roles',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
city: '',
|
||||
gender: '',
|
||||
interest: [],
|
||||
date: '',
|
||||
time: '',
|
||||
desc: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: 'The name cannot be empty', trigger: 'blur' },
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' },
|
||||
],
|
||||
city: [
|
||||
{ required: true, message: 'Please select the city', trigger: 'change' },
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: 'Please select gender', trigger: 'change' },
|
||||
],
|
||||
interest: [
|
||||
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
|
||||
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
|
||||
],
|
||||
time: [
|
||||
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' },
|
||||
],
|
||||
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()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await GetAdmin({ page: 1 }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
247
src/views/system/auth.vue
Normal file
247
src/views/system/auth.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- <div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="充电桩名称：">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div> -->
|
||||
<div class="action-btn">
|
||||
<Button type="primary" @click="add">添加</Button>
|
||||
<!-- <Button type="error">删除</Button> -->
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
|
||||
<Button type="error" size="small" @click="remove(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 添加、编辑 -->
|
||||
<Modal v-model="show_modal" title="添加角色" :mask-closable="false">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<FormItem label="角色名" prop="name">
|
||||
<Input v-model="formValidate.name" placeholder="请输入角色名" />
|
||||
</FormItem>
|
||||
<FormItem label="所属上级" prop="pid">
|
||||
<Select v-model="formValidate.pid" style="width:200px">
|
||||
<Option :value="0">无</Option>
|
||||
<Option v-for="item in roles_data" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="权限菜单" prop="roles">
|
||||
<Tree :data="menu_data" ref="tree" show-checkbox style="height: 300px;overflow-y: auto;"></Tree>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="cancel">取消</Button>
|
||||
<Button type="primary" @click="ok">确定</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
GetRole,
|
||||
getMenuList,
|
||||
} from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '角色名称',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
formValidate: {
|
||||
name: '',
|
||||
pid: 0,
|
||||
roles: '',
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '请输入角色名',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
roles: [{
|
||||
required: true,
|
||||
message: '请选择权限菜单',
|
||||
}],
|
||||
},
|
||||
cityList: [{
|
||||
value: 'New York',
|
||||
label: 'New York',
|
||||
}],
|
||||
menu_data: [{
|
||||
title: 'parent 1',
|
||||
expand: false,
|
||||
children: [{
|
||||
title: 'parent 1-1',
|
||||
expand: true,
|
||||
children: [{
|
||||
title: 'leaf 1-1-1',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
title: 'leaf 1-1-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'parent 1-2',
|
||||
expand: true,
|
||||
children: [{
|
||||
title: 'leaf 1-2-1',
|
||||
},
|
||||
{
|
||||
title: 'leaf 1-2-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await GetRole({
|
||||
page: 1,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
async ok() {
|
||||
let menuIds = this.$refs.tree.getCheckedAndIndeterminateNodes()
|
||||
this.formValidate.roles = menuIds.map(item => item.id)
|
||||
const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
|
||||
if (!valid) {
|
||||
this.$Message.error('请正确填写表单')
|
||||
return
|
||||
}
|
||||
// if (this.formValidate.id) { } else { }
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.show_modal = false
|
||||
this.$refs.formValidate.resetFields()
|
||||
},
|
||||
async add() {
|
||||
this.show_modal = true
|
||||
await this.getMenuList()
|
||||
},
|
||||
async getMenuList() {
|
||||
await getMenuList().then((res) => {
|
||||
this.menu_data = res
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
188
src/views/system/log.vue
Normal file
188
src/views/system/log.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="时间">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<Table border :columns="columns" stripe :height="tableHeight" :data="data">
|
||||
<template #action="{ row, index }">
|
||||
</template>
|
||||
</Table>
|
||||
<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
|
||||
@on-page-size-change="onChangePageSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLogList } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: 'ip',
|
||||
key: 'ip',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'method',
|
||||
},
|
||||
{
|
||||
title: '参数',
|
||||
key: 'params',
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'url',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
key: 'create_time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.calculateTableHeight)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
|
||||
const searchHeight = document.querySelector('.search-area').offsetHeight
|
||||
const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
|
||||
const pageHeight = 32 // 分页组件大约高度
|
||||
const margins = 40 // 上下边距总和
|
||||
this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
|
||||
},
|
||||
async getList() {
|
||||
await getLogList({ page: this.page, pageSize: this.pageSize }).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
handleSubmit2(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
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}`,
|
||||
})
|
||||
},
|
||||
remove(index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
ok() {
|
||||
this.$Message.info('Clicked ok')
|
||||
},
|
||||
cancel() {
|
||||
this.$Message.info('Clicked cancel')
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.search-area{
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
border: 1px solid #F3F7FD;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
152
src/views/system/system.vue
Normal file
152
src/views/system/system.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- tab切换 -->
|
||||
<div class="tab" ref="tabHeader">
|
||||
<div v-for="(item, index) in tab" @click="changeTab(index)" :key="index" class="tab_children"
|
||||
:class="{ active: item.check }">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域（动态高度） -->
|
||||
<div class="content" :style="{ height: tableHeight + 'px', overflow: 'auto' }">
|
||||
<div v-if="currentTab === 'system'">系统参数内容</div>
|
||||
<div v-else-if="currentTab === 'charge_sate'">充电费率内容</div>
|
||||
<div v-else-if="currentTab === 'invoice'">发票配置内容</div>
|
||||
</div>
|
||||
|
||||
<!-- 固定在底部的提交按钮 -->
|
||||
<div class="footer">
|
||||
<Button type="primary" @click="submitForm">提交</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
tableHeight: 500, // 初始高度，单位px
|
||||
currentTab: 'system',
|
||||
tab: [{
|
||||
type: 'system',
|
||||
name: '系统参数',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
type: 'charge_sate',
|
||||
name: '充电费率',
|
||||
check: false,
|
||||
},
|
||||
{
|
||||
type: 'invoice',
|
||||
name: '发票配置',
|
||||
check: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calculateTableHeight()
|
||||
window.addEventListener('resize', this.calculateTableHeight)
|
||||
// 添加防抖处理，避免频繁计算
|
||||
this.debouncedCalculate = this.$utils.debounce(this.calculateTableHeight, 100)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.debouncedCalculate)
|
||||
},
|
||||
methods: {
|
||||
calculateTableHeight() {
|
||||
try {
|
||||
const container = this.$el
|
||||
const tabHeader = this.$refs.tabHeader
|
||||
const footer = container.querySelector('.footer')
|
||||
|
||||
if (!container || !tabHeader || !footer) return
|
||||
|
||||
// 计算可用高度 = 容器高度 - tab高度 - footer高度 - 内边距
|
||||
const containerHeight = container.clientHeight
|
||||
const tabHeight = tabHeader.offsetHeight
|
||||
const footerHeight = footer.offsetHeight
|
||||
const padding = 40 // 上下内边距总和
|
||||
|
||||
this.tableHeight = containerHeight - tabHeight - footerHeight - padding
|
||||
|
||||
// 设置最小高度，避免内容区域太小
|
||||
this.tableHeight = Math.max(this.tableHeight, 200)
|
||||
} catch (e) {
|
||||
// console.error('计算高度出错:', e)
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.show = false
|
||||
},
|
||||
changeTab(index) {
|
||||
this.tab.forEach((item, i) => {
|
||||
item.check = i === index
|
||||
})
|
||||
this.currentTab = this.tab[index].type
|
||||
},
|
||||
submitForm() {
|
||||
// console.log('提交表单')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab_children {
|
||||
padding: 8px 16px;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab_children:hover {
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
/* 防止内容区域被压缩 */
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eee;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user