mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-06 02:50:13 +08:00
commit
This commit is contained in:
345
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
Normal file
345
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:label-position="labelPosition"
|
||||
label-width="120px"
|
||||
:model="station"
|
||||
:rules="rules"
|
||||
ref="stationRef"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="站点名称" prop="stationName">
|
||||
<el-input v-model="station.stationName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="area" label="站点区域">
|
||||
<!--<el-input v-model="station.areaCode"> </el-input>-->
|
||||
<el-cascader
|
||||
size="large"
|
||||
:options="options"
|
||||
v-model="areaCodeList"
|
||||
@change="handleChange"
|
||||
disabled
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="address" label="地址">
|
||||
<el-input v-model="station.address" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationTel" label="联系电话">
|
||||
<el-input v-model="station.stationTel"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="matchCars" label="适配车辆类型">
|
||||
<el-select v-model="station.selectMatchCars" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in dict.type.match_cars"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="publicFlag" label="是否对外开放">
|
||||
<el-select v-model="station.publicFlag" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in publicFlagOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="openFlag" label="是否营业中">
|
||||
<el-select v-model="station.openFlag" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in openFlagOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="merchantAdminName" label="管理员">
|
||||
<el-input
|
||||
v-model="
|
||||
station.merchantAdminName === null
|
||||
? '无'
|
||||
: station.merchantAdminName
|
||||
"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationLng" label="经度">
|
||||
<el-input v-model="station.stationLng" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationLat" label="纬度">
|
||||
<el-input v-model="station.stationLat" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="merchantName" label="运营商">
|
||||
<el-input
|
||||
v-model="
|
||||
station.merchantName === null ? '无' : station.merchantName
|
||||
"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="stationType" label="站点类型">
|
||||
<el-select v-model="station.stationType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in dict.type.station_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="construction" label="建设场所">
|
||||
<el-select v-model="station.construction" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in dict.type.construction_type"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="electricityPrice" label="充电费率">
|
||||
<el-input
|
||||
v-model="
|
||||
station.electricityPrice === null ? 0 : station.electricityPrice
|
||||
"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="servicePrice" label="服务费率">
|
||||
<el-input
|
||||
v-model="station.servicePrice === null ? 0 : station.servicePrice"
|
||||
disabled
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="businessHours" label="营业时间">
|
||||
<el-input v-model="station.businessHours"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-button type="primary" style="margin-left: 94%" @click="present"
|
||||
>提交</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getStationInfo,
|
||||
updateStation,
|
||||
} from "@/api/pile/station.js";
|
||||
import bus from "@/bus/bus";
|
||||
import { regionData} from "element-china-area-data";
|
||||
|
||||
export default {
|
||||
dicts: ["station_type", "match_cars", "construction_type"],
|
||||
data() {
|
||||
return {
|
||||
options: regionData,
|
||||
labelPosition: "right",
|
||||
station: {
|
||||
stationName: "",
|
||||
areaCode: "",
|
||||
address: "",
|
||||
stationTel: "",
|
||||
matchCars: "",
|
||||
selectMatchCars: [],
|
||||
publicFlag: "",
|
||||
openFlag: "",
|
||||
merchantAdminName: "",
|
||||
stationLng: "",
|
||||
stationLat: "",
|
||||
merchantId: "",
|
||||
stationStatus: "",
|
||||
construction: "",
|
||||
businessHours: "",
|
||||
},
|
||||
stationId: this.$route.params.id,
|
||||
publicFlagOptions: [
|
||||
{
|
||||
value: "1",
|
||||
label: "是",
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "否",
|
||||
},
|
||||
],
|
||||
openFlagOptions: [
|
||||
{
|
||||
value: "1",
|
||||
label: "是",
|
||||
},
|
||||
{
|
||||
value: "0",
|
||||
label: "否",
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
stationName: [
|
||||
{ required: true, message: "请输入站点名称", trigger: "blur" },
|
||||
],
|
||||
areaCode: [
|
||||
{ required: true, message: "请输入站点区域", trigger: "blur" },
|
||||
],
|
||||
address: [
|
||||
{ required: true, message: "请输入地址", trigger: "blur" }
|
||||
],
|
||||
stationTel: [
|
||||
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
||||
],
|
||||
matchCars: [
|
||||
{ required: true, message: "请输入适配车辆类型", trigger: "blur" },
|
||||
],
|
||||
publicFlag: [
|
||||
{ required: true, message: "请填写是否对外开放", trigger: "blur" },
|
||||
],
|
||||
openFlag: [
|
||||
{ required: true, message: "是否营业中", trigger: "blur" }
|
||||
],
|
||||
// merchantAdminName: [
|
||||
// { required: true, message: "请输入管理员", trigger: "blur" },
|
||||
// ],
|
||||
stationLng: [
|
||||
{ required: true, message: "请输入经度", trigger: "blur" },
|
||||
],
|
||||
stationLat: [
|
||||
{ required: true, message: "请输入纬度", trigger: "blur" },
|
||||
],
|
||||
// merchantId: [
|
||||
// { required: true, message: "请输入管理员", trigger: "blur" },
|
||||
// ],
|
||||
stationType: [
|
||||
{ required: true, message: "请输入站点类型", trigger: "blur" },
|
||||
],
|
||||
construction: [
|
||||
{ required: true, message: "请输入建设场所", trigger: "blur" },
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: "请输入充电费率", trigger: "blur" },
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "请输入服务费率", trigger: "blur" }
|
||||
],
|
||||
businessHours: [
|
||||
{ required: true, message: "请输入营业时间", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log("111");
|
||||
},
|
||||
// 渲染表格数据
|
||||
async queryStationInfo() {
|
||||
const res = await getStationInfo(this.stationId);
|
||||
console.log(res);
|
||||
this.station = res.data;
|
||||
console.log("queryStationInfo表格数据", this.station);
|
||||
},
|
||||
// 提交按钮
|
||||
present() {
|
||||
// console.log("matchCars提交时：", this.station.matchCars);
|
||||
// console.log("selectMatchCars提交时：", this.station.selectMatchCars);
|
||||
|
||||
// 赋值
|
||||
this.station.matchCars = this.station.selectMatchCars.join(",");
|
||||
// console.log("matchCars赋值后：", this.station.matchCars);
|
||||
this.$refs.stationRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.subUpdate();
|
||||
this.$message.success("提交成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 修改充电站信息
|
||||
async subUpdate() {
|
||||
await updateStation(this.station);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 接收map 地图传过来的搜索值
|
||||
bus.$on("res", (data) => {
|
||||
// console.log("data", data); // data就是它传过来的值
|
||||
// console.log("原始this.station", this.station);
|
||||
// 地址
|
||||
this.detailedAddress = data.address;
|
||||
// console.log("详细地址", data.address);
|
||||
var adcode = data.adcode;
|
||||
var areaCode = [];
|
||||
areaCode[0] = adcode.substr(0,2) + "0000";
|
||||
areaCode[1] = adcode.substr(0,4) + "00";
|
||||
areaCode[2] = adcode;
|
||||
// console.log("拼装的areaCode", areaCode);
|
||||
// 修改数据
|
||||
this.station.areaCode = areaCode.join(",");
|
||||
this.station.stationLng = String(data.pos[0]);
|
||||
this.station.stationLat = String(data.pos[1]);
|
||||
// console.log("修改后this.station", this.station);
|
||||
|
||||
// 优化之后
|
||||
let newAddress2 = this.detailedAddress
|
||||
.replace(/(?<=[省市区])/g, "$&,")
|
||||
.split(",");
|
||||
let end = newAddress2.pop();
|
||||
console.log("详细地址", end);
|
||||
this.station.address = end;
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
areaCodeList() {
|
||||
return this.station.areaCode.split(",");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
36
jsowell-ui/src/views/pile/station/components/amend.vue
Normal file
36
jsowell-ui/src/views/pile/station/components/amend.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<!-- 修改默认费率 -->
|
||||
<div>
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<el-tab-pane label="基本信息" name="first">
|
||||
<!-- 基本信息 -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="电动汽车（按电量）" name="second">
|
||||
<Car />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="电动单车（按功率时长）" name="third">
|
||||
<Electromobile />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import Car from './amend/car.vue'
|
||||
import Electromobile from './amend/electromobile.vue'
|
||||
|
||||
export default {
|
||||
components: { Car, Electromobile },
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
489
jsowell-ui/src/views/pile/station/components/amend/car.vue
Normal file
489
jsowell-ui/src/views/pile/station/components/amend/car.vue
Normal file
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<div style="width: 80%; margin-left: 90px; position: relative">
|
||||
<!-- 电汽车 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"
|
||||
><div class="grid-content bg-purple" style="margin-left: 20px">
|
||||
时段
|
||||
</div></el-col
|
||||
>
|
||||
<el-col :span="8"
|
||||
><div class="grid-content bg-purple">电费(元/度)</div></el-col
|
||||
>
|
||||
<el-col :span="6"
|
||||
><div class="grid-content bg-purple">服务费(元/度)</div></el-col
|
||||
>
|
||||
</el-row>
|
||||
<!-- 表单数据 -->
|
||||
<el-form :model="carBillingDetail" ref="addForm" :rules="carRules">
|
||||
<!-- 尖 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<el-button type="danger">尖时段</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="electricityPriceA">
|
||||
<el-input
|
||||
v-model="carBillingDetail.electricityPriceA"
|
||||
type="text"
|
||||
placeholder="0"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="servicePriceA">
|
||||
<el-input
|
||||
v-model="carBillingDetail.servicePriceA"
|
||||
placeholder="0"
|
||||
clearable
|
||||
type="text"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 峰 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<el-button type="warning">峰时段</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="electricityPriceB">
|
||||
<el-input
|
||||
v-model="carBillingDetail.electricityPriceB"
|
||||
type="text"
|
||||
placeholder="0"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="servicePriceB">
|
||||
<el-input
|
||||
v-model="carBillingDetail.servicePriceB"
|
||||
placeholder="0"
|
||||
clearable
|
||||
type="text"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 平 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<el-button type="success">平时段</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="electricityPriceC">
|
||||
<el-input
|
||||
v-model="carBillingDetail.electricityPriceC"
|
||||
type="text"
|
||||
placeholder="1.5"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="servicePriceC">
|
||||
<el-input
|
||||
v-model="carBillingDetail.servicePriceC"
|
||||
placeholder="0"
|
||||
clearable
|
||||
type="text"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 谷 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<el-button type="info">谷时段</el-button>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="electricityPriceD">
|
||||
<el-input
|
||||
v-model="carBillingDetail.electricityPriceD"
|
||||
type="text"
|
||||
placeholder="0"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="servicePriceD">
|
||||
<el-input
|
||||
v-model="carBillingDetail.servicePriceD"
|
||||
placeholder="0"
|
||||
clearable
|
||||
type="text"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span>24小时尖峰平谷分布设置</span>
|
||||
<!--<div class="frame">
|
||||
平-0:00-24:00
|
||||
<el-link :underline="false" @click="reviseVisible = true">
|
||||
<i class="el-icon-edit el-icon--right"/>
|
||||
</el-link>
|
||||
<el-link :underline="false" @click="tClose">
|
||||
<i class="el-icon-close"/>
|
||||
</el-link>
|
||||
</div>-->
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="item in dynamicTags"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
style="margin: 10px 10px 10px 0; width: 160px; height: 30px"
|
||||
effect="dark"
|
||||
>
|
||||
{{ item.label }}
|
||||
<i
|
||||
class="el-icon-edit el-icon--right"
|
||||
@click="editBtn(item.label)"
|
||||
/>
|
||||
<i class="el-icon-close" @click="deleteBtn(item.label)" />
|
||||
</el-tag>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="reviseVisible = true">增加计费时段</el-button>
|
||||
<el-button>占桩收费模板</el-button>
|
||||
<div style="position: absolute; bottom: 0px; right: 10px">
|
||||
<el-button @click="hCancel">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="设置计费时段"
|
||||
:visible.sync="reviseVisible"
|
||||
width="40%"
|
||||
append-to-body
|
||||
>
|
||||
<p>开始时间</p>
|
||||
<el-time-select
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '00:00',
|
||||
step: '00:30',
|
||||
end: '24:00',
|
||||
}"
|
||||
placeholder="选择开始时间"
|
||||
:disabled="selectDisabled"
|
||||
/>
|
||||
<p>标签</p>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="1">尖</el-radio>
|
||||
<el-radio :label="2">峰</el-radio>
|
||||
<el-radio :label="3">平</el-radio>
|
||||
<el-radio :label="4">谷</el-radio>
|
||||
</el-radio-group>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="reviseVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="clickSelectStartTimeConfirm"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addBillingTemplate } from "@/api/billing/template.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//这是 子组件
|
||||
carBillingDetail: {
|
||||
electricityPriceA: "",
|
||||
servicePriceA: "",
|
||||
electricityPriceB: "",
|
||||
servicePriceB: "",
|
||||
electricityPriceC: "",
|
||||
servicePriceC: "",
|
||||
electricityPriceD: "",
|
||||
servicePriceD: "",
|
||||
timeArray: [
|
||||
{
|
||||
type: "1",
|
||||
startTime: "00:00",
|
||||
endTime: "24:00",
|
||||
},
|
||||
],
|
||||
},
|
||||
// 修改弹框
|
||||
reviseVisible: false,
|
||||
// 开始时间
|
||||
startTime: "",
|
||||
// 结束时间
|
||||
endTime: "",
|
||||
// 标签 单选框
|
||||
radio: 3,
|
||||
selectDisabled: false,
|
||||
// 选择的开始时间 默认00:00开始，24:00结束（云快充协议需要24:00,不认23:59）
|
||||
selectStartTime: [
|
||||
{
|
||||
startTime: "00:00",
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
// 校验规则
|
||||
carRules: {
|
||||
electricityPriceA: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
servicePriceA: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
electricityPriceB: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
servicePriceB: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
electricityPriceC: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
servicePriceC: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
electricityPriceD: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
servicePriceD: [
|
||||
{ required: true, message: "请输入数字", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
async doAdd() {
|
||||
try {
|
||||
// 通知父组件关闭弹窗,更新数据 子组件
|
||||
this.$emit("success");
|
||||
// this.carBillingDetail = {
|
||||
// electricityPriceA: "",
|
||||
// servicePriceA: "",
|
||||
// electricityPriceB: "",
|
||||
// servicePriceB: "",
|
||||
// electricityPriceC: "",
|
||||
// servicePriceC: "",
|
||||
// electricityPriceD: "",
|
||||
// servicePriceD: "",
|
||||
// timeArray: [
|
||||
// {
|
||||
// type: "1",
|
||||
// startTime: "00:00",
|
||||
// endTime: "24:00",
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// await addBillingTemplate(this.carBillingDetail)
|
||||
} catch (error) {
|
||||
this.$message.error("error");
|
||||
}
|
||||
},
|
||||
// 取消按钮
|
||||
hCancel() {
|
||||
this.$emit("carClose");
|
||||
// console.log(1);
|
||||
},
|
||||
// 确认按钮
|
||||
onSubmit() {
|
||||
this.$emit("valied", this.carBillingDetail);
|
||||
this.$refs.addForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.doAdd();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.$refs.addForm.resetFields();
|
||||
console.log("电汽车重置");
|
||||
},
|
||||
editBtn(param) {
|
||||
console.log("点击修改按钮", param);
|
||||
const splitArr = param.split("-");
|
||||
const editType = splitArr[0].trim();
|
||||
if (editType === "尖") {
|
||||
this.radio = 1;
|
||||
} else if (editType === "峰") {
|
||||
this.radio = 2;
|
||||
} else if (editType === "平") {
|
||||
this.radio = 3;
|
||||
} else {
|
||||
this.radio = 4;
|
||||
}
|
||||
// console.log("radio", this.radio);
|
||||
this.startTime = splitArr[1].trim();
|
||||
// 打开对话框
|
||||
this.reviseVisible = true;
|
||||
this.selectDisabled = true;
|
||||
},
|
||||
deleteBtn(param) {
|
||||
const splitArr = param.split("-");
|
||||
const delObj = splitArr[1].trim();
|
||||
if (delObj === "00:00") {
|
||||
return;
|
||||
}
|
||||
this.selectStartTime = this.selectStartTime.filter(
|
||||
(item) => item.startTime !== delObj
|
||||
);
|
||||
// 调生成方法
|
||||
this.generateTimeArray();
|
||||
},
|
||||
clickSelectStartTimeConfirm() {
|
||||
let e = {
|
||||
startTime: this.startTime,
|
||||
type: this.radio,
|
||||
};
|
||||
// startTime在原数组中存在，把老的删掉
|
||||
this.selectStartTime = this.selectStartTime.filter(
|
||||
(item) => item.startTime !== this.startTime
|
||||
);
|
||||
// 新时间插入数组最后
|
||||
this.selectStartTime.push(e);
|
||||
// selectStartTime根据startTime排序
|
||||
this.selectStartTime.sort((a, b) =>
|
||||
a.startTime.localeCompare(b.startTime)
|
||||
);
|
||||
// 关闭对话框
|
||||
this.reviseVisible = false;
|
||||
// 调生成方法
|
||||
this.generateTimeArray();
|
||||
},
|
||||
// 生成timeArray
|
||||
generateTimeArray() {
|
||||
// 原来的timeArray初始化为空数组
|
||||
this.carBillingDetail.timeArray = [];
|
||||
// 使用selectStartTime中的数据重新生成数据
|
||||
for (let i = 0; i < this.selectStartTime.length; i++) {
|
||||
let start = this.selectStartTime[i];
|
||||
let end = this.selectStartTime[i + 1];
|
||||
// 遍历到最后一位时，取不到end，就给默认结束时间24:00
|
||||
if (end === undefined) {
|
||||
end = {
|
||||
startTime: "24:00",
|
||||
};
|
||||
}
|
||||
let time = {
|
||||
type: String(start.type),
|
||||
startTime: start.startTime,
|
||||
endTime: end.startTime,
|
||||
};
|
||||
this.carBillingDetail.timeArray.push(time);
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
reviseVisible(newName, oldName) {
|
||||
// console.log("reviseVisible发生变化", newName);
|
||||
if (newName === false) {
|
||||
this.selectDisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
dynamicTags() {
|
||||
let tags = [];
|
||||
this.carBillingDetail.timeArray.map((x) => {
|
||||
// console.log(x.type);
|
||||
let type;
|
||||
let desc;
|
||||
if (x.type === "1") {
|
||||
type = "danger";
|
||||
desc = "尖";
|
||||
} else if (x.type === "2") {
|
||||
type = "warning";
|
||||
desc = "峰";
|
||||
} else if (x.type === "3") {
|
||||
type = "success";
|
||||
desc = "平";
|
||||
} else {
|
||||
type = "info";
|
||||
desc = "谷";
|
||||
}
|
||||
let label = desc + " - " + x.startTime + " - " + x.endTime;
|
||||
let tag = {
|
||||
type: type,
|
||||
label: label,
|
||||
};
|
||||
tags.push(tag);
|
||||
});
|
||||
return tags;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.frame {
|
||||
width: 126px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
// min-height: 100px;
|
||||
// padding-bottom: 95px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 电单车页面 -->
|
||||
<!-- 表单 -->
|
||||
<el-form
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
:model="formLabelAlign"
|
||||
:rules="electRules"
|
||||
style="width: 95%"
|
||||
ref="electForm"
|
||||
>
|
||||
<div class="txt">
|
||||
<p>
|
||||
<b
|
||||
>以下配置应用于电动汽车占桩费计算。例如
|
||||
免费占桩时间30分钟，封顶金额25元 占桩费单价2元/分钟</b
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
表示：充电结束30分钟内不收取费用，超过30分钟的时间按每分钟2元收费，封顶25元。
|
||||
</p>
|
||||
</div>
|
||||
<el-form-item label="最小单位费用(元):" prop="type">
|
||||
<el-input v-model="formLabelAlign.type" type="text" placeholder="0" />
|
||||
</el-form-item>
|
||||
<div class="txt">
|
||||
<p>
|
||||
<b
|
||||
>本设置只应用于电动自行车（按功率时长）的计费策略，当费用不足最小单位费用的整数倍时，将会安装最小单位费用的整数倍收取（前几分钟不参与计费）。</b
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
如，最小单位费用的是0.5元，当费用为1.1元时，将会收取1.5元；当费用为1.5元时，将会收取1.5元
|
||||
</p>
|
||||
<p>
|
||||
如，<i>免费充电时长的是5分钟</i>，当充电时长是4分钟时，将不会收取费用；当充电时长是6分钟，将会根据计费模板收取6分钟的费用
|
||||
</p>
|
||||
</div>
|
||||
<el-form-item label="免费充电时长(分钟):" prop="minute">
|
||||
<el-input v-model="formLabelAlign.minute" type="text" placeholder="5" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 按钮 -->
|
||||
<div class="btn">
|
||||
<div class="p1">
|
||||
功率-0W至300W
|
||||
<el-link :underline="false"
|
||||
><i
|
||||
class="el-icon-edit el-icon--right"
|
||||
@click="dialogFormVisible = true"
|
||||
/></el-link>
|
||||
<el-link :underline="false"><i class="el-icon-close" /></el-link>
|
||||
</div>
|
||||
<div class="energy">
|
||||
电费:1元<span>{{ num }}小时</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
style="width: 170px"
|
||||
type="text"
|
||||
@click="dialogFormVisible = true"
|
||||
>增加功率分段</el-button
|
||||
>
|
||||
<span slot="footer" class="dialog-footer" style="margin-left: 60%">
|
||||
<el-button @click="electCancel">取 消</el-button>
|
||||
<el-button type="primary" @click="addElect">确 定</el-button>
|
||||
</span>
|
||||
|
||||
<el-dialog
|
||||
title="设置功率分段"
|
||||
:visible.sync="dialogFormVisible"
|
||||
append-to-body
|
||||
>
|
||||
<el-form :model="form">
|
||||
<el-form-item label="充电功率(W):" :label-width="formLabelWidth">
|
||||
<el-input
|
||||
v-model.number="form.name"
|
||||
min="0"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="费用(1元X小时):" :label-width="formLabelWidth">
|
||||
<el-input
|
||||
v-model.number="form.region"
|
||||
type="number"
|
||||
placeholder="2"
|
||||
min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formLabelAlign: {
|
||||
type: "",
|
||||
minute: "",
|
||||
},
|
||||
// 弹框
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: "",
|
||||
region: "",
|
||||
},
|
||||
formLabelWidth: "120px",
|
||||
num: "2",
|
||||
electRules: {
|
||||
type: [
|
||||
{ required: true, message: "最小单位费用多少元", trigger: "blur" },
|
||||
{
|
||||
pattern: /^[0-9]+(.[0-9]{2})?$/,
|
||||
message: "可以保留两位小数",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
minute: [
|
||||
{ required: true, message: "免费充电时长", trigger: "blur" },
|
||||
{ pattern: /^\d+$/, message: "请输入数字", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 取消按钮
|
||||
electCancel() {
|
||||
// 通知父组件关闭
|
||||
this.$emit("electClose");
|
||||
},
|
||||
// 确认按钮
|
||||
addElect() {
|
||||
this.$emit("valied");
|
||||
this.$refs.electForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.doAdd();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 重置表单
|
||||
electResetForm() {
|
||||
this.$refs.electForm.resetFields();
|
||||
console.log("电单车重置");
|
||||
},
|
||||
// 发送请求
|
||||
async doAdd() {
|
||||
try {
|
||||
// await addBillingTemplate(this.carBillingDetail);
|
||||
// 通知父组件关闭弹窗,更新数据
|
||||
this.$emit("electSuccess");
|
||||
this.formLabelAlign = {
|
||||
name: "",
|
||||
region: "",
|
||||
type: "",
|
||||
minute: "",
|
||||
};
|
||||
this.electResetForm();
|
||||
} catch (error) {
|
||||
this.$message.error("error");
|
||||
}
|
||||
},
|
||||
// hSubmit() {
|
||||
// this.$refs.addForm.validate((valid) => {
|
||||
// if (valid) {
|
||||
// // 做添加
|
||||
// // this.$emit('close')
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.txt {
|
||||
margin-left: 150px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #fff;
|
||||
background-color: skyblue;
|
||||
}
|
||||
.btn {
|
||||
margin-left: 150px;
|
||||
width: 180px;
|
||||
height: 70px;
|
||||
border: 1px solid green;
|
||||
.p1 {
|
||||
font-size: 18px;
|
||||
padding: 2px;
|
||||
height: 35px;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
.energy {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
357
jsowell-ui/src/views/pile/station/components/billing.vue
Normal file
357
jsowell-ui/src/views/pile/station/components/billing.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 充电站详情 -->
|
||||
<!-- 计费模块 -->
|
||||
<!-- 按钮栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!--<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="clickaAdditional"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>-->
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="clickRefresh"
|
||||
>刷新</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="clickImport"
|
||||
>导入</el-button
|
||||
>
|
||||
</el-col>
|
||||
<!--<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['tool:gen:import']"
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-upload"
|
||||
size="mini"
|
||||
@click="openImportTable"
|
||||
>导入</el-button
|
||||
>
|
||||
</el-col>-->
|
||||
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
|
||||
</el-row>
|
||||
<!-- 表单区域 -->
|
||||
|
||||
<el-table
|
||||
:data="stationBillingTemplate"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column label="模板编号" prop="templateCode" />
|
||||
<el-table-column label="名称" prop="templateName" />
|
||||
<!-- matchCars 使用车辆描述 -->
|
||||
<el-table-column label="描述" prop="remark" />
|
||||
<el-table-column label="设备类型" prop="deviceType">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.charger_pile_type"
|
||||
:value="scope.row.deviceType"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column label="默认" prop="id">
|
||||
<el-switch
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
/>
|
||||
</el-table-column>-->
|
||||
<el-table-column label="上次发布时间" prop="publishTime" />
|
||||
<el-table-column label="操作" align="center" width="250">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="issue(scope.row.templateId)"
|
||||
>
|
||||
发布
|
||||
</el-button>
|
||||
|
||||
<el-button type="text" size="small" @click="outerVisible = true"
|
||||
>绑定设备
|
||||
</el-button>
|
||||
<!-- <el-col :span="5">
|
||||
<el-button type="text" size="small" @click="expDialog = true"
|
||||
>费率详情页</el-button
|
||||
>
|
||||
</el-col> -->
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleUpdate(scope.row.templateId)"
|
||||
>修改默认费率
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="delBilling(scope.row.templateId)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 弹框 -->
|
||||
<el-dialog
|
||||
title="发布计费模板"
|
||||
background-color:pink
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
height="50%"
|
||||
>
|
||||
<!--<el-date-picker
|
||||
v-model="value3"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
default-time="12:00:00"
|
||||
/>-->
|
||||
点击立即发布后，会将该计费模板下发到当前站点下所有的充电桩上面
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="clickPublish"> 立即发布 </el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog width="70%" title="绑定设备" :visible.sync="outerVisible">
|
||||
<BondedDevice ref="bondedDevice" />
|
||||
</el-dialog>
|
||||
<!-- 费率详情页 -->
|
||||
<!-- <el-dialog title="费率详情页" :visible.sync="expDialog" width="30%">
|
||||
<Expenses />
|
||||
</el-dialog> -->
|
||||
<el-dialog title="导入" :visible.sync="expDialog" width="30%">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="选择计费模板" label-width="100px">
|
||||
<el-select
|
||||
placeholder="请选择选择计费模板"
|
||||
v-model="selectTemplateId"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in publicBillingTemplate"
|
||||
:key="item.templateCode"
|
||||
:label="item.templateName"
|
||||
:value="item.templateId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitBtn">提交</el-button>
|
||||
<el-button @click="expDialog = false">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="修改默认费率"
|
||||
:visible.sync="amendDialog"
|
||||
width="70%"
|
||||
height="70%"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<!-- <Amend /> -->
|
||||
<add-billing
|
||||
@success="success"
|
||||
:billingTemplateId="billingTemplateId"
|
||||
ref="addBill"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BondedDevice from "./bondedDevice.vue";
|
||||
import Expenses from "./expenses.vue";
|
||||
import {
|
||||
listTemplate,
|
||||
delTemplate,
|
||||
queryStationBillingTemplateList,
|
||||
queryPublicBillingTemplateList,
|
||||
stationImportBillingTemplate,
|
||||
publishBillingTemplate,
|
||||
} from "@/api/billing/template.js";
|
||||
import AddBilling from "../../../billing/template/components/addBilling.vue";
|
||||
|
||||
export default {
|
||||
components: { BondedDevice, Expenses, AddBilling },
|
||||
dicts: ["charger_pile_type"],
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
// 绑定设备
|
||||
outerVisible: false,
|
||||
// 开关
|
||||
value: true,
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
// 选择计费模板弹框
|
||||
expDialog: false,
|
||||
amendDialog: false,
|
||||
// 站点计费模板列表
|
||||
stationBillingTemplate: [],
|
||||
// 公共计费模板列表
|
||||
publicBillingTemplate: [],
|
||||
// 选择的计费模板id
|
||||
selectTemplateId: "",
|
||||
// 发布的计费模板id
|
||||
publishTemplateId: "",
|
||||
// 日期
|
||||
value3: "",
|
||||
stationId: this.$route.params.id,
|
||||
form: {
|
||||
region: "",
|
||||
},
|
||||
// 需要向子组件传递的值
|
||||
billingTemplateId: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 发送请求
|
||||
// this.templateList();
|
||||
// this.getStationBillingTemplateList();
|
||||
},
|
||||
methods: {
|
||||
// 新增计费模板
|
||||
clickaAdditional() {
|
||||
// 打开弹窗
|
||||
this.amendDialog = true;
|
||||
console.log("新增计费模板按钮");
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(billingTemplateId) {
|
||||
console.log("点击修改按钮", billingTemplateId);
|
||||
this.amendDialog = true;
|
||||
this.billingTemplateId = String(billingTemplateId);
|
||||
this.title = "修改计费模板";
|
||||
},
|
||||
closeDialog() {
|
||||
console.log("closeDialog");
|
||||
this.billingTemplateId = "";
|
||||
this.clickRefresh();
|
||||
},
|
||||
// 通知父 关闭弹框
|
||||
success() {
|
||||
this.amendDialog = false;
|
||||
this.$refs.addBill.resetForm();
|
||||
this.getStationBillingTemplateList();
|
||||
},
|
||||
// 发布按钮
|
||||
issue(id) {
|
||||
this.dialogVisible = true;
|
||||
console.log("发布", id);
|
||||
this.publishTemplateId = id;
|
||||
},
|
||||
// 立即发布按钮
|
||||
clickPublish() {
|
||||
this.dialogVisible = false;
|
||||
const data = {
|
||||
stationId: this.stationId,
|
||||
templateId: this.publishTemplateId,
|
||||
};
|
||||
publishBillingTemplate(data).then(() => {
|
||||
this.$message.success("发布计费模板成功");
|
||||
this.publishTemplateId = "";
|
||||
});
|
||||
},
|
||||
/** 打开导入表弹窗 */
|
||||
openImportTable() {
|
||||
console.log("111");
|
||||
// this.$refs.import.show();
|
||||
},
|
||||
// 按钮 删除功能
|
||||
delBilling(id) {
|
||||
console.log("删除", id);
|
||||
delTemplate(id).then((response) => {
|
||||
this.$message.success("删除计费模板成功");
|
||||
this.clickRefresh();
|
||||
});
|
||||
},
|
||||
|
||||
// 获取计费模块列表信息
|
||||
async templateList() {
|
||||
const res = await listTemplate();
|
||||
console.log(res);
|
||||
this.tableData = res.rows;
|
||||
},
|
||||
|
||||
// 查询公共计费模板
|
||||
getPublicBillingTemplateList() {
|
||||
queryPublicBillingTemplateList().then((response) => {
|
||||
console.log(response.rows);
|
||||
this.publicBillingTemplate = response.rows;
|
||||
});
|
||||
},
|
||||
|
||||
// 通过站点id查询计费模板
|
||||
getStationBillingTemplateList() {
|
||||
// console.log("通过站点id查询计费模板", this.stationId)
|
||||
queryStationBillingTemplateList(this.stationId).then((response) => {
|
||||
// console.log("通过站点id查询计费模板 result: ", response.rows);
|
||||
this.stationBillingTemplate = response.rows;
|
||||
});
|
||||
},
|
||||
// 刷新按钮
|
||||
clickRefresh() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.getStationBillingTemplateList();
|
||||
this.loading = false;
|
||||
}, 800);
|
||||
},
|
||||
clickImport() {
|
||||
console.log("点击导入");
|
||||
this.getPublicBillingTemplateList();
|
||||
this.expDialog = true;
|
||||
},
|
||||
// 提交按钮
|
||||
submitBtn() {
|
||||
this.expDialog = false;
|
||||
// console.log("提交成功", this.selectTemplateId, this.stationId);
|
||||
const data = {
|
||||
stationId: this.stationId,
|
||||
billingTemplateId: this.selectTemplateId,
|
||||
};
|
||||
stationImportBillingTemplate(data).then((response) => {
|
||||
this.clickRefresh();
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
expDialog(newName, oldName) {
|
||||
if (newName === false) {
|
||||
this.selectTemplateId = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="text" @click="refresh">刷新</el-button>
|
||||
<el-button type="text" @click="dialogFormVisible = true">添加</el-button>
|
||||
<!-- 绑定设备 -->
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="设备编号" width="150" />
|
||||
<el-table-column property="name" label="型号" width="150" />
|
||||
<el-table-column property="address" label="供应商" />
|
||||
<el-table-column property="address" label="额定功率" />
|
||||
<el-table-column property="address" label="注册时间" />
|
||||
<el-table-column property="address" label="操作" />
|
||||
<!--放置分页 -->
|
||||
</el-table>
|
||||
<!-- 添加按钮 内层-->
|
||||
<el-dialog title="Add" :visible.sync="dialogFormVisible" append-to-body>
|
||||
<el-form ref="form" :model="form">
|
||||
<div style="">
|
||||
<el-form-item label="选择设备">
|
||||
<el-select
|
||||
v-model="form.region"
|
||||
placeholder="选择需要应用计费模板的设备"
|
||||
>
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item>
|
||||
<div style="margin-left: 60%">
|
||||
<el-button type="primary" @click="submitForm('form')"
|
||||
>提交</el-button
|
||||
>
|
||||
<el-button @click="resetForm('form')">重置</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "王小虎",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
],
|
||||
form: {
|
||||
region: "",
|
||||
},
|
||||
formLabelWidth: "120px",
|
||||
// 添加
|
||||
dialogFormVisible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 刷新
|
||||
refresh() {
|
||||
alert("刷新成功");
|
||||
},
|
||||
// 添加 弹框 按钮
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert("提交成功");
|
||||
} else {
|
||||
console.log("提交失败,请重新提交");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
this.form = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
51
jsowell-ui/src/views/pile/station/components/expenses.vue
Normal file
51
jsowell-ui/src/views/pile/station/components/expenses.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>电动汽车</h2>
|
||||
<p>单位:电费/服务</p>
|
||||
<el-button style="margin: 5px 5px 5px 0" type="info" disabled
|
||||
>0:00 - 7:00 电费:1.54元/ 服务费:0元</el-button
|
||||
>
|
||||
<el-button type="success" disabled style="margin: 5px 5px 5px 0"
|
||||
>7:00 - 9:00 1.65/0</el-button
|
||||
>
|
||||
<el-button style="margin: 5px 5px 5px 0" type="primary" disabled
|
||||
>9:00 - 11:30 2/0</el-button
|
||||
>
|
||||
<el-button type="success" disabled style="margin: 5px 5px 5px 0"
|
||||
>11:30 - 14:00 1.65/0</el-button
|
||||
>
|
||||
<el-button style="margin: 5px 5px 5px 0" type="primary" disabled
|
||||
>14:00 - 16:30 2/0</el-button
|
||||
>
|
||||
<el-button type="success" disabled style="margin: 5px 5px 5px 0"
|
||||
>16:30 - 19:00 1.65/0</el-button
|
||||
>
|
||||
<el-button style="margin: 5px 5px 5px 0" type="primary" disabled
|
||||
>19:00 - 21:00 2/0</el-button
|
||||
>
|
||||
<el-button type="success" disabled style="margin: 5px 5px 5px 0"
|
||||
>21:00 - 24:00 1.65/0</el-button
|
||||
>
|
||||
|
||||
<h2>电动自行车</h2>
|
||||
<el-row>
|
||||
<el-button type="success" disabled>00:00 - 12:00 1元4小时</el-button>
|
||||
<el-button type="danger" disabled>12:00 - 24:00 1元2小时</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-button --sucess {
|
||||
margin-left: 30px;
|
||||
}
|
||||
</style>
|
||||
106
jsowell-ui/src/views/pile/station/connectorList.vue
Normal file
106
jsowell-ui/src/views/pile/station/connectorList.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin: auto 20px">
|
||||
<!-- 刷新按钮 -->
|
||||
<el-button size="medium" type="primary" @click="refreshList"
|
||||
>刷新</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<el-table v-loading="loading" :data="connectorList">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="枪口编号" prop="pileConnectorCode" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.connector_status"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="电桩类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.connector_type"
|
||||
:value="scope.row.type"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column label="充电时长" align="center" prop="type" />-->
|
||||
|
||||
<el-table-column
|
||||
label="功率（kW）"
|
||||
align="center"
|
||||
prop="instantPower"
|
||||
/>
|
||||
<el-table-column label="电流（A）" align="center" prop="current" />
|
||||
<el-table-column label="电压（V）" align="center" prop="voltage" />
|
||||
<el-table-column label="温度（°C）" align="center" prop="temperature" />
|
||||
<el-table-column label="SOC（%）" align="center" prop="soc" />
|
||||
<!--<el-table-column label="用户信息" align="center" prop="plantformOrderNum" />-->
|
||||
<!--<el-table-column label="订单" align="center" prop="plantformOrderNum" />-->
|
||||
<!--<el-table-column label="车牌号" align="center" prop="plantformOrderNum" />-->
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { queryConnectorListByParams } from "@/api/pile/connector";
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
dicts: ["connector_type", "connector_status"],
|
||||
// props: {
|
||||
// stationId: {
|
||||
// type: String,
|
||||
// required: true
|
||||
// }
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
connectorList: [],
|
||||
queryParams: {
|
||||
stationIdList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
stationId: this.$route.params.id,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getList();
|
||||
},
|
||||
methods: {
|
||||
refreshList() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.getList();
|
||||
this.loading = false;
|
||||
}, 800);
|
||||
},
|
||||
getList() {
|
||||
this.queryParams.stationIdList.push(this.stationId);
|
||||
this.loading = true;
|
||||
// console.log(this.queryParams, "充电站接口列表");
|
||||
queryConnectorListByParams(this.queryParams).then((response) => {
|
||||
this.connectorList = response.rows;
|
||||
// console.log("接口列表", this.connectorList);
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
105
jsowell-ui/src/views/pile/station/detail.vue
Normal file
105
jsowell-ui/src/views/pile/station/detail.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="订单" name="order">
|
||||
<stationOrderList ref="order" :stationId="stationId"/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="设备" name="pile">
|
||||
<pileList ref="pile" :stationId="stationId"/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="充电接口" name="connector">
|
||||
<connectorList ref="connector" :stationId="stationId"/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="基本资料" name="stationInfo">
|
||||
<div class="over">
|
||||
<div id="map_wrap">
|
||||
<MapContainer ref="map"/>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<site-info ref="stationInfo"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!--<el-tab-pane label="账单" ></el-tab-pane>-->
|
||||
|
||||
<el-tab-pane label="计费模块" name="billing">
|
||||
<!-- billing 文件到时引入 -->
|
||||
<billing ref="billing" :stationId="stationId"/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="客户管理" name="member">
|
||||
角色管理
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="运营管理" name="operation">
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Billing from "./components/billing.vue";
|
||||
import SiteInfo from "./components/SiteInfo.vue";
|
||||
import connectorList from "./connectorList.vue";
|
||||
import pileList from "./pileList.vue";
|
||||
import MapContainer from "../../../components/MapContainer/MapContainer.vue";
|
||||
import stationOrderList from "@/views/pile/station/stationOrderList";
|
||||
export default {
|
||||
components: {
|
||||
SiteInfo,
|
||||
pileList,
|
||||
connectorList,
|
||||
Billing,
|
||||
MapContainer,
|
||||
stationOrderList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'pile',
|
||||
stationId: this.$route.params.id,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// console.log(this.stationId, "充电桩详情 create");
|
||||
},
|
||||
mounted() {
|
||||
this.initializeData(this.activeName);
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
this.initializeData(tab.name);
|
||||
},
|
||||
|
||||
// 执行对应页面的查询数据方法
|
||||
initializeData(name) {
|
||||
console.log("执行对应页面的查询数据方法", name)
|
||||
if (name === "pile") {
|
||||
this.$refs.pile.getPileList();
|
||||
} else if (name === "connector") {
|
||||
this.$refs.connector.getList();
|
||||
} else if (name === "billing") {
|
||||
this.$refs.billing.getStationBillingTemplateList();
|
||||
} else if (name === "stationInfo") {
|
||||
this.$refs.map.queryStationInfo();
|
||||
this.$refs.stationInfo.queryStationInfo();
|
||||
} else if (name === "order") {
|
||||
this.$refs.order.dataLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#container {
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
// margin-left: 50%; transform: translate(-50%,0);
|
||||
}
|
||||
</style>
|
||||
3
jsowell-ui/src/views/pile/station/edit.vue
Normal file
3
jsowell-ui/src/views/pile/station/edit.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div class="app-container"></div>
|
||||
</template>
|
||||
528
jsowell-ui/src/views/pile/station/index.vue
Normal file
528
jsowell-ui/src/views/pile/station/index.vue
Normal file
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="站点名称" prop="stationName">
|
||||
<el-input
|
||||
v-model="queryParams.stationName"
|
||||
placeholder="请输入站点名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['pile:station:add']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['pile:station:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['pile:station:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['pile:station:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="stationList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="80" align="center" />
|
||||
<!--<el-table-column label="" align="center" prop="id" />-->
|
||||
<el-table-column label="站点名称" align="center" prop="stationName">
|
||||
<template slot-scope="scope">
|
||||
<router-link
|
||||
:to="'/station/detail/index/' + scope.row.id"
|
||||
class="link-type"
|
||||
>
|
||||
<span>{{ scope.row.stationName }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column label="容量" align="center" prop="capacity" />-->
|
||||
<!--<el-table-column label="充电站国家代码" align="center" prop="countryCode" />-->
|
||||
<el-table-column label="省市区" align="center" prop="areaCode">
|
||||
<template slot-scope="scope">
|
||||
{{ getCodeToText(scope.row.areaCode, null) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="站点地址" align="center" prop="address" />
|
||||
<el-table-column label="所属运营商" align="center" prop="merchantName" />
|
||||
<!--<el-table-column label="站点电话" align="center" prop="stationTel" />-->
|
||||
<!--<el-table-column label="服务电话" align="center" prop="serviceTel" />-->
|
||||
<el-table-column label="站点类型" align="center" prop="stationType">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.station_type"
|
||||
:value="scope.row.stationType"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="站点状态" align="center" prop="stationStatus">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.station_status"
|
||||
:value="scope.row.stationStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="充电设备数量" align="center" prop="pileNum" />
|
||||
<el-table-column label="是否对外开放" align="center" prop="publicFlag">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.publicFlag"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
@change="changeFlag(scope.row)"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否营业中" align="center" prop="openFlag">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.openFlag"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
@change="changeFlag(scope.row)"
|
||||
>
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="管理员" align="center" prop="merchantAdminName" />
|
||||
|
||||
<!--<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['pile:station:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['pile:station:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改充电站信息对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="所属运营商">
|
||||
<el-select v-model="form.merchantId" placeholder="请选择运营商">
|
||||
<el-option
|
||||
v-for="item in merchantList"
|
||||
:key="item.merchantName"
|
||||
:label="item.merchantName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="站点名称" prop="stationName">
|
||||
<el-input v-model="form.stationName" placeholder="请输入站点名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="省市区" prop="areaCode">
|
||||
<!--<el-input v-model="form.areaCode" placeholder="请输入充电站省市辖区编码" />-->
|
||||
<el-cascader
|
||||
size="large"
|
||||
:options="options"
|
||||
v-model="form.areaCode"
|
||||
@change="handleChange"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="站点地址" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入站点地址" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="站点管理员" prop="merchantAdminName">
|
||||
<el-input v-model="form.stationAdminName" placeholder="站点管理员" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="站点电话" prop="stationTel">
|
||||
<el-input v-model="form.stationTel" placeholder="站点电话" />
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listStation,
|
||||
getStation,
|
||||
delStation,
|
||||
addStation,
|
||||
updateStation,
|
||||
fastCreateStation,
|
||||
} from "@/api/pile/station";
|
||||
import { getMerchantList } from "@/api/pile/merchant";
|
||||
import { regionData, CodeToText } from "element-china-area-data";
|
||||
|
||||
export default {
|
||||
name: "Station",
|
||||
dicts: ["station_status", "station_type"],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 充电站信息表格数据
|
||||
stationList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
stationName: null,
|
||||
aloneApply: null,
|
||||
accountNumber: null,
|
||||
capacity: null,
|
||||
publicParking: null,
|
||||
parkingNumber: null,
|
||||
countryCode: null,
|
||||
areaCode: null,
|
||||
address: null,
|
||||
stationTel: null,
|
||||
serviceTel: null,
|
||||
stationType: null,
|
||||
stationStatus: null,
|
||||
parkNums: null,
|
||||
stationLng: null,
|
||||
stationLat: null,
|
||||
siteGuide: null,
|
||||
construction: null,
|
||||
pictures: null,
|
||||
matchCars: null,
|
||||
parkInfo: null,
|
||||
parkOwner: null,
|
||||
parkManager: null,
|
||||
openAllDay: null,
|
||||
businessHours: null,
|
||||
parkFree: null,
|
||||
payment: null,
|
||||
supportOrder: null,
|
||||
toiletFlag: null,
|
||||
storeFlag: null,
|
||||
restaurantFlag: null,
|
||||
loungeFlag: null,
|
||||
canopyFlag: null,
|
||||
printerFlag: null,
|
||||
barrierFlag: null,
|
||||
parkingLockFlag: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
stationName: [
|
||||
{ required: true, message: "请输入站点名称", trigger: "blur" },
|
||||
],
|
||||
areaCode: [
|
||||
{ required: true, message: "请输入选择区域", trigger: "blur" },
|
||||
],
|
||||
address: [
|
||||
{ required: true, message: "请输入站点地址", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
options: regionData,
|
||||
selectedOptions: [],
|
||||
merchantList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getMerchantList();
|
||||
},
|
||||
methods: {
|
||||
getMerchantList() {
|
||||
getMerchantList().then((response) => {
|
||||
this.merchantList = response.rows;
|
||||
});
|
||||
},
|
||||
changeFlag(info) {
|
||||
// console.log(info);
|
||||
updateStation(info).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
getCodeToText(codeStr, codeArray) {
|
||||
if (null === codeStr && null === codeArray) {
|
||||
return null;
|
||||
} else if (null === codeArray) {
|
||||
codeArray = codeStr.split(",");
|
||||
}
|
||||
|
||||
let area = "";
|
||||
switch (codeArray.length) {
|
||||
case 1:
|
||||
area += CodeToText[codeArray[0]];
|
||||
break;
|
||||
case 2:
|
||||
area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
|
||||
break;
|
||||
case 3:
|
||||
area +=
|
||||
CodeToText[codeArray[0]] +
|
||||
"/" +
|
||||
CodeToText[codeArray[1]] +
|
||||
"/" +
|
||||
CodeToText[codeArray[2]];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return area;
|
||||
},
|
||||
handleChange(value) {
|
||||
let areaCode = value.join(",");
|
||||
console.log("选择区域", areaCode);
|
||||
this.form.areaCode = areaCode;
|
||||
},
|
||||
/** 查询充电站信息列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listStation(this.queryParams).then((response) => {
|
||||
this.stationList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
stationName: null,
|
||||
aloneApply: null,
|
||||
accountNumber: null,
|
||||
capacity: null,
|
||||
publicParking: null,
|
||||
parkingNumber: null,
|
||||
countryCode: null,
|
||||
areaCode: null,
|
||||
address: null,
|
||||
stationTel: null,
|
||||
serviceTel: null,
|
||||
stationType: null,
|
||||
stationStatus: "0",
|
||||
parkNums: null,
|
||||
stationLng: null,
|
||||
stationLat: null,
|
||||
siteGuide: null,
|
||||
construction: null,
|
||||
pictures: null,
|
||||
matchCars: null,
|
||||
parkInfo: null,
|
||||
parkOwner: null,
|
||||
parkManager: null,
|
||||
openAllDay: null,
|
||||
businessHours: null,
|
||||
parkFree: null,
|
||||
payment: null,
|
||||
supportOrder: null,
|
||||
remark: null,
|
||||
toiletFlag: null,
|
||||
storeFlag: null,
|
||||
restaurantFlag: null,
|
||||
loungeFlag: null,
|
||||
canopyFlag: null,
|
||||
printerFlag: null,
|
||||
barrierFlag: null,
|
||||
parkingLockFlag: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
delFlag: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加充电站信息";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids;
|
||||
getStation(id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改充电站信息";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateStation(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
// addStation(this.form).then((response) => {
|
||||
// this.$modal.msgSuccess("新增成功");
|
||||
// this.open = false;
|
||||
// this.getList();
|
||||
// });
|
||||
this.fastCreateStation();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 快速建站
|
||||
fastCreateStation() {
|
||||
console.log("点击快速建站");
|
||||
fastCreateStation(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal
|
||||
.confirm('是否确认删除充电站信息编号为"' + ids + '"的数据项？')
|
||||
.then(function () {
|
||||
return delStation(ids);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
"pile/station/export",
|
||||
{
|
||||
...this.queryParams,
|
||||
},
|
||||
`station_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
333
jsowell-ui/src/views/pile/station/pileList.vue
Normal file
333
jsowell-ui/src/views/pile/station/pileList.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item label="桩号" prop="pileSn">
|
||||
<el-input
|
||||
v-model="queryParams.pileSn"
|
||||
placeholder="请输入桩号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 切换运营商按钮 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['pile:station:add']"
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="click"
|
||||
>批量修改站点</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="pileList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="桩号" align="center" prop="sn">
|
||||
<template slot-scope="scope">
|
||||
<router-link
|
||||
:to="'/pile/detail/index/' + scope.row.pileId"
|
||||
class="link-type"
|
||||
>
|
||||
<span>{{ scope.row.pileSn }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.pile_status"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接口数量" align="center" prop="gunNum" />
|
||||
<el-table-column label="电桩类型" align="center" prop="pileType">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.connector_type"
|
||||
:value="scope.row.pileType"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="运营商" align="center" prop="merchantName" />
|
||||
<el-table-column label="充电站" align="center" prop="stationName" />
|
||||
<el-table-column
|
||||
label="注册时间"
|
||||
align="center"
|
||||
prop="registrationTime"
|
||||
/>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getPileList"
|
||||
/>
|
||||
|
||||
<!-- 修改充电桩站点 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
|
||||
<el-form ref="form" :model="updateData" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="已选择的桩">
|
||||
<el-tag v-for="tag in updateData.pileSnList" :key="tag">
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="运营商">
|
||||
<el-select
|
||||
v-model="updateData.merchantId"
|
||||
placeholder="请选择运营商"
|
||||
@change="changeSelectMerchant(updateData.merchantId)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in merchantList"
|
||||
:key="item.merchantName"
|
||||
:label="item.merchantName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="站点" prop="stationId">
|
||||
<el-select
|
||||
v-model="updateData.stationId"
|
||||
placeholder="请选择站点"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in stationList"
|
||||
:key="item.id"
|
||||
:label="item.stationName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品型号" prop="modelId">
|
||||
<el-select v-model="updateData.modelId" placeholder="请选择产品型号">
|
||||
<el-option
|
||||
v-for="item in modelList"
|
||||
:key="item.modelName"
|
||||
:label="item.modelName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="枪口数量" prop="connectorNum">
|
||||
<el-input
|
||||
v-model="updateData.connectorNum"
|
||||
placeholder="请输入枪口数量"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="batchUpdate">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { batchUpdatePileList, listBasic } from "@/api/pile/basic";
|
||||
import { getMerchantList } from "@/api/pile/merchant";
|
||||
import { getStationListByMerchantId } from "@/api/pile/station";
|
||||
import {listModel} from "@/api/pile/model";
|
||||
|
||||
export default {
|
||||
name: "PileList",
|
||||
dicts: ["pile_status", "software_protocol", "connector_type"],
|
||||
props: {
|
||||
stationId: "",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
stationId: null,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pileSn: null,
|
||||
},
|
||||
pileList: [],
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 运营商列表
|
||||
merchantList: [],
|
||||
// 站点列表
|
||||
stationList: [],
|
||||
// 更新站点参数
|
||||
updateData: {
|
||||
merchantId: null,
|
||||
stationId: null,
|
||||
pileIdList: [],
|
||||
pileSnList: [],
|
||||
connectorNum: null,
|
||||
modelId: null,
|
||||
},
|
||||
// 型号列表
|
||||
modelList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.getPileList();
|
||||
},
|
||||
methods: {
|
||||
getModelList() {
|
||||
listModel().then((response) => {
|
||||
// console.log(this.modelList);
|
||||
this.modelList = response.rows;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getPileList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1
|
||||
};
|
||||
// this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 查询充电桩列表 */
|
||||
getPileList() {
|
||||
this.loading = true;
|
||||
this.queryParams.stationId = this.stationId;
|
||||
listBasic(this.queryParams).then((response) => {
|
||||
this.pileList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
// console.log(this.pileList);
|
||||
});
|
||||
},
|
||||
getMerchantList() {
|
||||
getMerchantList().then((response) => {
|
||||
this.merchantList = response.rows;
|
||||
});
|
||||
},
|
||||
changeSelectMerchant(value) {
|
||||
console.log(value);
|
||||
// 通过接口查
|
||||
getStationListByMerchantId(value).then((response) => {
|
||||
this.stationList = response.data;
|
||||
});
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
// console.log(selection);
|
||||
this.updateData.pileSnList = selection.map((item) => item.pileSn);
|
||||
this.updateData.pileIdList = selection.map((item) => item.pileId);
|
||||
// console.log(this.updateData.pileIdList);
|
||||
},
|
||||
/** 按钮操作 */
|
||||
click() {
|
||||
if (this.updateData.pileIdList.length === 0) {
|
||||
return this.$message({
|
||||
message: "请选择充电桩",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
this.getMerchantList();
|
||||
this.getModelList();
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "更换站点";
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
reset() {
|
||||
this.updateData.merchantId = null;
|
||||
this.updateData.stationId = null;
|
||||
this.updateData.modelId = null;
|
||||
this.updateData.connectorNum = null;
|
||||
},
|
||||
batchUpdate() {
|
||||
if (this.updateData.merchantId === null) {
|
||||
return this.$message({
|
||||
message: "请选择运营商",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
if (this.updateData.stationId === null) {
|
||||
return this.$message({
|
||||
message: "请选择站点",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
console.log("点击批量更新", this.updateData);
|
||||
this.loading = true;
|
||||
batchUpdatePileList(this.updateData)
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
});
|
||||
this.open = false;
|
||||
this.getPileList();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
373
jsowell-ui/src/views/pile/station/stationOrderList.vue
Normal file
373
jsowell-ui/src/views/pile/station/stationOrderList.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="168px" @submit.native.prevent>
|
||||
|
||||
<el-form-item label="订单编号" prop="orderCode">
|
||||
<el-input
|
||||
v-model="queryParams.orderCode"
|
||||
placeholder="请输入订单编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="订单状态" prop="orderStatus">
|
||||
<el-select
|
||||
v-model="queryParams.orderStatus"
|
||||
placeholder="请选择订单状态"
|
||||
clearable
|
||||
style="width: 140px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.type.order_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手机号码" prop="mobileNumber">
|
||||
<el-input
|
||||
v-model="queryParams.mobileNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="createTimeRange"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:clearable=false
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-col>
|
||||
<div>
|
||||
{{dateDescription}}期间，总用电量{{sumUsedElectricity}}度，总消费金额{{sumOrderAmount}}元
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<!--<el-table-column label="主键" align="center" prop="id"/>-->
|
||||
<el-table-column label="订单编号" align="center" prop="orderCode" width="280px">
|
||||
<template slot-scope="scope">
|
||||
<router-link
|
||||
:to="'/order/index/orderDetail/'+scope.row.orderCode"
|
||||
class="link-type"
|
||||
>
|
||||
<span>{{ scope.row.orderCode }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column label="订单状态" align="center" prop="orderStatus">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.order_status"
|
||||
:value="scope.row.orderStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe"/>
|
||||
<el-table-column label="会员昵称" align="center" prop="nickName" width="120px"/>
|
||||
|
||||
<el-table-column label="电话号码" align="center" prop="mobileNumber" width="120px"/>
|
||||
|
||||
<el-table-column label="站点" align="center" prop="stationName"/>
|
||||
<el-table-column label="充电桩枪口号" align="center" prop="pileConnectorCode" width="200px"/>
|
||||
<el-table-column label="微信商户订单号" align="center" prop="outTradeNo" width="165px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.payMode === '1' ? '一' : scope.row.outTradeNo === null ? '一' : scope.row.outTradeNo}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="启动方式" align="center" prop="startMode" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.start_mode"
|
||||
:value="scope.row.startMode"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="支付方式" align="center" prop="payMode">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.pay_mode"
|
||||
:value="scope.row.payMode"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="支付状态" align="center" prop="payStatus">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.pay_status"
|
||||
:value="scope.row.payStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="支付金额" align="center" prop="payAmount">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.payAmount === null ? '一' : scope.row.payAmount}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="充电度数" align="center" prop="chargingDegree" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.chargingDegree === null ? '一' : scope.row.chargingDegree}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="起始soc" align="center" prop="startSoc" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.startSoc === null ? '一' : scope.row.startSoc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="终止soc" align="center" prop="endSoc" >
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.endSoc === null ? '一' : scope.row.endSoc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!--<el-table-column label="订单生成日期" align="center" prop="createTime" width="180"/>-->
|
||||
<el-table-column label="开始充电时间" align="center" prop="chargeStartTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.chargeStartTime === null ? '一' : scope.row.chargeStartTime}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束充电时间" align="center" prop="chargeEndTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.chargeEndTime === null ? '一' : scope.row.chargeEndTime}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单总金额" align="center" prop="orderAmount" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.orderAmount === '0.00' ? '一' : scope.row.orderAmount}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listOrder, totalData} from "@/api/order/order";
|
||||
import Template from "@/views/billing/template";
|
||||
import {listStation} from "@/api/pile/station";
|
||||
import {getDay} from "@/utils/common";
|
||||
|
||||
export default {
|
||||
name: "stationOrderList",
|
||||
components: {Template},
|
||||
props: {
|
||||
stationId: "",
|
||||
},
|
||||
dicts: ['order_status', 'start_mode', 'pay_mode', 'pay_status'],
|
||||
data() {
|
||||
return {
|
||||
dateDescription: '',
|
||||
sumOrderAmount:'',
|
||||
sumUsedElectricity:'',
|
||||
// 遮罩
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 子表选中数据
|
||||
checkedOrderDetail: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 订单表格数据
|
||||
orderList: [],
|
||||
// 订单详情表格数据
|
||||
orderDetailList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderCode: null,
|
||||
mobileNumber: null,
|
||||
orderStatus: null,
|
||||
stationId: this.stationId,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
// 站点列表
|
||||
stationList: [],
|
||||
// 订单创建时间范围
|
||||
createTimeRange: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// console.log('stationOrderList 站点id：', this.stationId);
|
||||
// this.dataLoading();
|
||||
},
|
||||
methods: {
|
||||
async dataLoading() {
|
||||
console.log("加载站点订单数据...")
|
||||
// 设置默认日期
|
||||
await this.defaultDate();
|
||||
// 查询订单列表
|
||||
this.getList();
|
||||
// 查询站点列表
|
||||
this.getStationList();
|
||||
// 获取订单总金额
|
||||
this.getOrderTotalData();
|
||||
},
|
||||
/** 查询订单列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listOrder(this.queryParams).then(response => {
|
||||
this.orderList = response.rows;
|
||||
console.log('order里面的参数', this.orderList)
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 获取订单总金额数据
|
||||
getOrderTotalData() {
|
||||
totalData(this.queryParams).then(response => {
|
||||
console.log('getOrderTotalData', response);
|
||||
this.dateDescription = response.data.dateDescription;
|
||||
this.sumOrderAmount = response.data.sumOrderAmount;
|
||||
this.sumUsedElectricity = response.data.sumUsedElectricity;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
orderCode: null,
|
||||
orderStatus: "0",
|
||||
memberId: null,
|
||||
nickName: null,
|
||||
mobileNumber: null,
|
||||
stationId: null,
|
||||
connectorCode: null,
|
||||
startMode: null,
|
||||
payMode: null,
|
||||
payStatus: null,
|
||||
payAmount: null,
|
||||
payTime: null,
|
||||
orderAmount: null,
|
||||
startSoc: null,
|
||||
endSoc: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
delFlag: null
|
||||
};
|
||||
this.orderDetailList = [];
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
// 获取订单列表
|
||||
this.getList();
|
||||
// 获取订单总金额
|
||||
this.getOrderTotalData();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
|
||||
/** 订单详情序号 */
|
||||
rowOrderDetailIndex({row, rowIndex}) {
|
||||
row.index = rowIndex + 1;
|
||||
},
|
||||
|
||||
/** 复选框选中数据 */
|
||||
handleOrderDetailSelectionChange(selection) {
|
||||
this.checkedOrderDetail = selection.map(item => item.index)
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('order/order/export', {
|
||||
...this.queryParams
|
||||
}, `order_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 查询充电站信息列表 */
|
||||
getStationList() {
|
||||
const queryStationParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 999
|
||||
};
|
||||
listStation(queryStationParams).then((response) => {
|
||||
console.log("订单列表页-查询站点列表", response)
|
||||
this.stationList = response.rows;
|
||||
});
|
||||
},
|
||||
|
||||
//设置默认日期
|
||||
defaultDate () {
|
||||
console.log(getDay(-7));
|
||||
//字符串拼接，开始时间，结束时间
|
||||
let beg = getDay(-7) + " 00:00:00"; //当月第一天
|
||||
let end = getDay(0) + " 23:59:59"; //当天
|
||||
this.createTimeRange = [beg, end] //将值设置给插件绑定的数据
|
||||
// console.log("defaultDate", this.createTimeRange);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
createTimeRange(newValue, oldValue) {
|
||||
if (newValue != null && newValue.length > 0) {
|
||||
this.queryParams.startTime = newValue[0];
|
||||
this.queryParams.endTime = newValue[1];
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user