mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-13 06:20:07 +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>
|
||||
Reference in New Issue
Block a user