autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-05-03 01:20:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
JSOWELL-PC\autum
2023-03-04 16:29:55 +08:00
commit 397ba75479
1007 changed files with 109050 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
jsowell-ui/src/views/pile/basic/detail.vue Normal file
View File

@@ -0,0 +1,410 @@
<template>
<div class="app-container">
<!-- 标签页 -->
<el-tabs
value="first"
type="border-card"
@tab-click="handleClick"
v-loading="loading"
>
<el-tab-pane label="基本信息" name="first">
<el-row type="flex" justify="space-between">
<!-- 左侧内容 -->
<el-col :span="5">
<!-- 充电设备 -->
<div class="advContent">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<span
>充电设备(<span style="color: #bf1c1c">{{ status }}</span
>)</span
>
</div>
<!--二维码-->
<div class="hello">
<vue-qr
ref="Qrcode"
:text="pileDetail.qrCodeURL"
:callback="test + ''"
qid="testQrId"
:width="150"
style="margin-left: 25%"
/>
</div>
<!-- 表格 -->
<div style="margin-bottom: 10px">
<el-descriptions :column="1" border>
<el-descriptions-item
label="SN"
labelStyle="width: 80px"
contentStyle="width: 150px"
>{{ pileDetail.pileSn }}</el-descriptions-item
>
<el-descriptions-item label="运营商">{{
pileDetail.merchantName
}}</el-descriptions-item>
<el-descriptions-item label="站点">{{
pileDetail.stationName
}}</el-descriptions-item>
<!--<el-descriptions-item label="厂商">
<el-tag size="small">举视</el-tag>
</el-descriptions-item>-->
<!-- <el-descriptions-item label="使用车辆类型">{{
pileDetail.matchCars
}}</el-descriptions-item>-->
<el-descriptions-item label="额定功率(kW)">{{
pileDetail.ratedPower
}}</el-descriptions-item>
<!--<el-descriptions-item label="额定电压(V)">{{pileDetail.sn}}</el-descriptions-item>-->
<el-descriptions-item label="额定电流(A)">{{
pileDetail.ratedCurrent
}}</el-descriptions-item>
<el-descriptions-item label="iccid">{{
pileDetail.iccid
}}</el-descriptions-item>
<el-descriptions-item label="sim卡商">
<dict-tag
:options="dict.type.sim_supplier"
:value="pileDetail.simSupplier"
/>
</el-descriptions-item>
<el-descriptions-item label="卡运营商">
<dict-tag
:options="dict.type.sim_operator"
:value="pileDetail.operator"
/>
</el-descriptions-item>
<!-- <el-descriptions-item label="桩类型">-->
<!-- 桩类型 数据-->
<!-- </el-descriptions-item>-->
<el-descriptions-item label="故障原因">
</el-descriptions-item>
<el-descriptions-item label="故障时间">
</el-descriptions-item>
</el-descriptions>
</div>
<!-- <div ></div> -->
</el-card>
</div>
</el-col>
<!-- 右侧内容 -->
<el-col :span="19" style="margin-left: 15px">
<el-card class="box-card" shadow="hover">
<div style="margin: 12px 0">接口列表</div>
<div style="margin-top: 20px">
<!-- 刷新按钮 -->
<el-button
size="medium"
type="primary"
@click="refreshPileConnectorList"
>
刷新
</el-button>
</div>
<div class="sideNav" id="app">
<!-- 接口列表表单 -->
<el-table
:data="connectorList"
style="width: 100%"
v-loading="Loading"
>
<el-table-column
prop="pileConnectorCode"
label="枪口编号"
width="180px"
align="center"
/>
<el-table-column
prop="connectorQrCodeUrl"
label="充电二维码"
width="180px"
align="center"
>
<template slot-scope="scope">
<!-- <el-link @click="qrcodeClick(scope.row)" v-if="scope.row.connectorQrCodeUrl == 0">-->
<!-- <vue-qr ref="Qrcode"-->
<!-- :text="scope.row.connectorQrCodeUrl"-->
<!-- :callback="test" qid="scope.row.connectorId"-->
<!-- :width="qrWidth"-->
<!-- />-->
<!-- </el-link>-->
<el-link @click="qrcodeClick(scope.row)">
<vue-qr
ref="Qrcode"
:text="scope.row.connectorQrCodeUrl"
:callback="test + ''"
qid="scope.row.connectorId"
:width="qrWidth"
/>
</el-link>
</template>
</el-table-column>
<el-table-column
width="118px"
align="center"
prop="status"
label="状态"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.connector_status"
:value="scope.row.status"
/>
</template>
</el-table-column>
<el-table-column
width="80px"
align="center"
prop="type"
label="类型"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.connector_type"
:value="scope.row.type"
/>
</template>
</el-table-column>
<el-table-column
width="118px"
align="center"
prop="instantPower"
label="即时功率（kW）"
/>
<el-table-column prop="soc" label="SOC(°C)" align="center" />
<el-table-column
prop="equipmentOrderNum"
label="设备订单号"
align="center"
width="200"
/>
<el-table-column
prop="orderCode"
label="平台订单"
align="center"
width="200"
/>
<!-- <el-table-column prop="businessType" label="桩类型" align="center" >-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{scope.row.businessType === '1' ? '运营桩':'个人桩'}}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
</el-card>
<el-card style="margin-top: 20px">
<div style="margin: 12px 0">充电桩通信日志</div>
<el-table :data="feedList" stripe style="width: 100%">
<el-table-column
prop="createTime"
label="触发时间"
align="center"
width="200"
>
</el-table-column>
<el-table-column
prop="description"
label="描述"
align="center"
width="200"
>
</el-table-column>
</el-table>
<!--分页-->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getFeedList"
style="margin-bottom: 20px"
/>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<!-- 右侧配置管理页面目前不管 -->
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {
getPileDetailById,
getPileFeedList,
listBasic,
} from "@/api/pile/basic";
import { queryConnectorListByParams } from "@/api/pile/connector";
// 二维码组件
import VueQr from "vue-qr";
export default {
components: { VueQr },
name: "pile-detail",
dicts: ["connector_status", "connector_type", "sim_supplier", "sim_operator"],
data() {
return {
Loading: false,
pileId: this.$route.params.pileId,
// 右侧数据数组
connectorList: [],
stationId: 1,
// 充电桩详情 竖向 表格渲染的数据
pileDetail: { url: "" },
loading: false,
qrWidth: 60,
flag: true,
// 充电桩通信日志
feedList: [],
// 总条数
total: 0,
// 查询参数
queryParams: {
pileSn: null,
pageNum: 1,
pageSize: 5,
},
pileSn: null,
};
},
computed: {
status() {
const status = this.pileDetail.status;
// 0-未知；1-在线；2-离线；3-故障
let str = "";
if (status === "1") {
str = "在线";
} else if (status === "2") {
str = "离线";
} else if (status === "3") {
str = "故障";
} else {
str = "未知";
}
return str;
},
},
created() {
// 查询充电桩详情
this.getPileDetail();
// 查询充电桩接口列表
this.queryPileConnectorList();
},
mounted() {
setTimeout(() => {}, 300);
},
methods: {
//点击二维码事件
qrcodeClick(row) {
if (this.flag) {
this.flag = false;
this.qrWidth = 150;
} else {
this.flag = true;
this.qrWidth = 60;
}
},
// 查询接口列表
queryPileConnectorList() {
const data = {
pileIds: [this.pileId],
};
queryConnectorListByParams(data)
.then((response) => {
console.log("response", response);
this.connectorList = response.rows;
console.log("接口列表", this.connectorList);
})
.catch((error) => {
console.log("错误日志", error);
});
},
// test(dataUrl, id){
// console.log(dataUrl)
// console.log(id)
// },
test() {
console.log("测试");
},
// 查询充电桩详情接口
getPileDetail() {
// console.log(this.pileId);
const queryForm = {
pileId: this.pileId,
};
getPileDetailById(queryForm).then((response) => {
this.pileDetail = response.data;
this.pileSn = this.pileDetail.pileSn;
console.log("getPileDetailById结果：", this.pileDetail);
});
},
handleClick() {
console.log("handleClick");
},
// 刷新按钮重新获取数据
refreshPileConnectorList() {
this.Loading = true;
setTimeout(() => {
this.queryPileConnectorList();
this.Loading = false;
}, 1000);
},
/** 查询充电桩通信日志 */
getFeedList() {
this.loading = true;
this.queryParams.pileSn = this.pileSn;
getPileFeedList(this.queryParams).then((response) => {
console.log("查询充电桩通信日志", response);
this.feedList = response.data.list;
this.total = response.data.total;
this.loading = false;
});
// this.feedList = [
// {
// time: '2016-05-02',
// description: '设备上线'
// },
// {
// time: '2016-05-01',
// description: '设备离线'
// },
// {
// time: '2016-05-01',
// description: '设备离线'
// }
// ];
// this.total = 3;
// this.loading = false;
},
},
watch: {
pileSn(newValue, oldValue) {
if (newValue !== null) {
this.getFeedList();
}
},
},
};
</script>
<style scoped lang="scss">
.advContent {
background: #fff;
border-radius: 5px 5px 0px 0px;
}
.sideNav {
padding: 30px 0 12px;
}
#qrcodeArea img {
height: 80px;
width: 80px;
}
</style>

570
jsowell-ui/src/views/pile/basic/index.vue Normal file
View File

@@ -0,0 +1,570 @@
<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="pileSn">
<el-input
v-model="queryParams.pileSn"
placeholder="请输入桩号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="充电桩状态"
clearable
style="width: 140px"
>
<el-option
v-for="dict in dict.type.pile_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</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" icon="el-icon-refresh-right" 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>
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['pile:basic:batchAdd']">批量新增</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:basic: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:basic: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:basic:export']"
>导出
</el-button>
</el-col>-->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="basicList"
@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="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="sim卡号" align="center" prop="iccid" width="220px"/>
<el-table-column label="sim卡商" align="center" prop="simSupplier">
<template slot-scope="scope">
<dict-tag
:options="dict.type.sim_supplier"
:value="scope.row.simSupplier"
/>
</template>
</el-table-column>
<el-table-column
label="运营商"
align="center"
prop="merchantName"
width="220px"
/>
<el-table-column label="充电站" align="center" prop="stationName" />
<el-table-column
label="注册时间"
align="center"
prop="registrationTime"
/>
<!--<el-table-column label="备注" align="center" prop="remark"/>-->
<!--<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:basic:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['pile:basic: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="50%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="运营商" prop="merchantId">
<el-select
v-model="form.merchantId"
placeholder="请选择运营商"
@change="changeSelectMerchant(form.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="form.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="softwareProtocol">
<el-select
v-model="form.softwareProtocol"
placeholder="软件协议"
clearable
>
<el-option
v-for="dict in dict.type.software_protocol"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生产日期" prop="productionDate">
<el-date-picker
clearable
v-model="form.productionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择生产日期"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="产品型号" prop="modelId">
<el-select v-model="form.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="modelId">
<el-select
v-model="form.chargerPileType"
placeholder="请选择桩类型"
>
<el-option label="运营桩" value="1" />
</el-select>
</el-form-item>
<!--<el-form-item label="充电桩型号" prop="modelId">
<el-input v-model="form.modelId" placeholder="请输入充电桩型号"/>
</el-form-item>-->
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="枪口数量" prop="connectorNum">
<el-input
v-model="form.connectorNum"
placeholder="请输入枪口数量"
style="width: 220px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生产数量" prop="num">
<el-input
v-model="form.num"
placeholder="请输入生产数量"
style="width: 220px"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
placeholder="请输入备注"
style="width: 95%"
/>
</el-form-item>
</el-col>
</el-row>
</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 {
listBasic,
getBasic,
delBasic,
addBasic,
updateBasic,
batchAddBasic,
} 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: "Basic",
dicts: ["pile_status", "software_protocol", "sim_supplier", "connector_type"],
data() {
return {
// 定时器
timer: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备管理表格数据
basicList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
pileSn: null,
status: null,
businessType: null,
softwareProtocol: null,
productionDate: null,
licenceId: null,
modelId: null,
ICCID: null,
simSupplier: null,
merchantId: null,
stationId: null,
faultReason: null,
},
createPile: {
merchantId: null,
stationId: null,
},
// 运营商列表
merchantList: [],
// 站点列表
stationList: [],
// 型号列表
modelList: [],
// 表单参数
form: {},
// 表单校验
rules: {
merchantId: [
{ required: true, message: "请选择运营商", trigger: "blur" },
],
// stationId: [{ required: true, message: "请选择站点", trigger: "blur" }],
softwareProtocol: [
{ required: true, message: "请输入软件协议", trigger: "blur" },
],
productionDate: [
{ required: true, message: "请选择生产日期", trigger: "blur" },
],
modelId: [
{ required: true, message: "请输入产品型号", trigger: "blur" },
],
connectorNum: [
{ required: true, message: "请输入枪口数量", trigger: "blur" },
],
num: [{ required: true, message: "请输入生产数量", trigger: "blur" }],
remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
},
};
},
created() {
this.getList();
this.getMerchantList();
this.getModelList();
},
methods: {
changeSelectMerchant(value) {
// 清空内容
this.createPile.stationId = "";
// 通过接口查
getStationListByMerchantId(value).then((response) => {
// console.log(response.data);
this.stationList = response.data;
});
},
getMerchantList() {
getMerchantList().then((response) => {
this.merchantList = response.rows;
});
},
getModelList() {
listModel().then((response) => {
this.modelList = response.rows;
// console.log(this.modelList);
});
},
/** 查询设备管理列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
listBasic(this.queryParams).then((response) => {
this.basicList = response.rows;
console.log(this.basicList, "首页信息");
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
sn: null,
status: "0",
businessType: null,
softwareProtocol: null,
productionDate: null,
licenceId: null,
modelId: null,
ICCID: null,
simSupplier: null,
merchantId: null,
stationId: null,
faultReason: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
delFlag: null,
remark: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
pageNum: 1
};
// 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;
getBasic(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改设备信息";
});
},
/** 提交按钮 */
submitForm() {
console.log("提交按钮", this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateBasic(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
batchAddBasic(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
submitBatchAdd() {
batchAddBasic(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 delBasic(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"pile/basic/export",
{
...this.queryParams,
},
`basic_${new Date().getTime()}.xlsx`
);
},
},
mounted() {
// 开始定时器
// this.getList();
// this.timer = setInterval(() => {
// setTimeout(this.getList, 0);
// }, 6000 * 60 * 60);
},
// 销毁定时器
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
},
};
</script>

307
jsowell-ui/src/views/pile/connector/index.vue Normal file
View File

@@ -0,0 +1,307 @@
<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="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<!--<el-form-item label="充电枪编号" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入充电枪编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<!--<el-form-item label="所属充电桩id" prop="pileId">
<el-input
v-model="queryParams.pileId"
placeholder="请输入所属充电桩id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<!--<el-form-item label="充电枪编码" prop="connectorCode">
<el-input
v-model="queryParams.connectorCode"
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:connector: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:connector: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:connector: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:connector:export']"
>导出</el-button>
</el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="connectorList" @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="name" />-->
<el-table-column label="充电枪编号" align="center" prop="connectorCode" />
<el-table-column label="充电二维码" align="center" prop="connectorQR" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="类型" align="center" prop="type" />
<el-table-column label="即时功率" align="center" prop="instantPower" />
<el-table-column label="电量" align="center" prop="electricity" />
<el-table-column label="soc" align="center" prop="SOC" />
<el-table-column label="设备订单号" align="center" prop="equipmentOrderNum" />
<el-table-column label="平台订单" align="center" prop="plantformOrderNum" />
<!--<el-table-column label="所属充电桩id" align="center" prop="pileId" />-->
<!--<el-table-column label="充电枪编码" align="center" prop="connectorCode" />-->
<!--<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:connector:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['pile:connector: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="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="充电枪编号，由充电桩SN+01生成" prop="code">
<el-input v-model="form.code" placeholder="请输入充电枪编号，由充电桩SN+01生成" />
</el-form-item>
<el-form-item label="所属充电桩id" prop="pileId">
<el-input v-model="form.pileId" placeholder="请输入所属充电桩id" />
</el-form-item>
<el-form-item label="充电枪编码" prop="connectorCode">
<el-input v-model="form.connectorCode" placeholder="请输入充电枪编码" />
</el-form-item>
<el-form-item label="删除标识" prop="delFlag">
<el-input v-model="form.delFlag" 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 { listConnector, getConnector, delConnector, addConnector, updateConnector } from "@/api/pile/connector";
export default {
name: "Connector",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 充电桩枪口信息表格数据
connectorList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
code: null,
status: null,
type: null,
pileId: null,
connectorCode: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询充电桩枪口信息列表 */
getList() {
this.loading = true;
listConnector(this.queryParams).then(response => {
this.connectorList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
code: null,
status: "0",
type: null,
pileId: null,
connectorCode: 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
getConnector(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) {
updateConnector(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addConnector(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 delConnector(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('pile/connector/export', {
...this.queryParams
}, `connector_${new Date().getTime()}.xlsx`)
}
}
};
</script>

26
jsowell-ui/src/views/pile/merchant/edit.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div class="app-container">
<el-tabs value="first" type="border-card" @tab-click="handleClick">
<el-tab-pane label="配置管理" name="second">
配置管理
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
// import xxxx
export default{
data() {
},
mounted() {
},
methods: {
}
}
</script>

419
jsowell-ui/src/views/pile/merchant/index.vue Normal file
View File

@@ -0,0 +1,419 @@
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="110px"
>
<el-form-item label="运营商名称" prop="merchantName">
<el-input
v-model="queryParams.merchantName"
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:merchant: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:merchant: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:merchant: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:merchant:export']"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="merchantList"
@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="merchantName" />
<el-table-column label="地址" align="center" prop="address" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column
label="组织机构代码"
align="center"
prop="organizationCode"
/>
<el-table-column label="负责人姓名" align="center" prop="managerName" />
<el-table-column
label="负责人电话号码"
align="center"
prop="managerPhone"
/>
<el-table-column
label="客服电话号码"
align="center"
prop="servicePhone"
/>
<el-table-column label="logo" align="center" prop="logoUrl" />
<el-table-column
label="操作"
align="center"
v-if="checkPermi(['pile:merchant:edit'])"
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:merchant:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['pile:merchant: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="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-row>
<el-col span="12">
<el-form-item label="运营商名称" prop="merchantName">
<el-input
v-model="form.merchantName"
placeholder="请输入运营商名称"
/>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="组织机构代码" prop="organizationCode">
<el-input
v-model="form.organizationCode"
placeholder="请输入组织机构代码"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="24">
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入地址" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-form-item label="负责人姓名" prop="managerName">
<el-input
v-model="form.managerName"
placeholder="请输入负责人姓名"
/>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="负责人电话号码" prop="managerPhone">
<el-input
v-model="form.managerPhone"
placeholder="请输入负责人电话号码"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-form-item label="客服电话号码" prop="servicePhone">
<el-input
v-model="form.servicePhone"
placeholder="请输入客服电话号码"
/>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="logo" prop="logoUrl">
<el-input v-model="form.logoUrl" placeholder="请输入logo" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="12">
<el-form-item label="小程序APPID" prop="appId">
<el-input
v-model="form.appId"
placeholder="请输入小程序APPID"
/>
</el-form-item>
</el-col>
</el-row>
<!--<el-form-item label="删除标识" prop="delFlag">
<el-input v-model="form.delFlag" 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 {
listMerchant,
getMerchant,
delMerchant,
addMerchant,
updateMerchant,
} from "@/api/pile/merchant";
import {checkPermi} from "@/utils/permission";
export default {
name: "Merchant",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 充电桩运营商信息表格数据
merchantList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
merchantName: null,
address: null,
status: null,
organizationCode: null,
managerName: null,
managerPhone: null,
servicePhone: null,
logoUrl: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
merchantName: [
{ required: true, message: "请输入运营商名称", trigger: "blur" },
],
organizationCode: [
{ required: true, message: "请输入组织机构代码", trigger: "blur" },
],
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
managerName: [
{ required: true, message: "请输入负责人姓名", trigger: "blur" },
],
managerPhone: [
{ required: true, message: "请输入负责人电话号码", trigger: "blur" },
],
servicePhone: [
{ required: true, message: "请输入客服电话号码", trigger: "blur" },
],
logoUrl: [{ required: true, message: "请输入logo", trigger: "blur" }],
},
};
},
created() {
this.getList();
},
methods: {
checkPermi,
/** 查询充电桩运营商信息列表 */
getList() {
this.loading = true;
listMerchant(this.queryParams).then((response) => {
this.merchantList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
merchantName: null,
address: null,
status: "0",
organizationCode: null,
managerName: null,
managerPhone: null,
servicePhone: null,
logoUrl: 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;
getMerchant(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) {
updateMerchant(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMerchant(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 delMerchant(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"pile/merchant/export",
{
...this.queryParams,
},
`merchant_${new Date().getTime()}.xlsx`
);
},
},
};
</script>

427
jsowell-ui/src/views/pile/model/index.vue Normal file
View File

@@ -0,0 +1,427 @@
<template>
<div class="app-container">
<el-form
v-show="showSearch"
ref="queryForm"
:model="queryParams"
size="small"
:inline="true"
label-width="68px"
>
<el-form-item label="型号名称" prop="modelName">
<el-input
v-model="queryParams.modelName"
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:model:add']"
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['pile:model:edit']"
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['pile:model:remove']"
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['pile:model:export']"
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar
:show-search.sync="showSearch"
@queryTable="getList"
/>
</el-row>
<el-table
v-loading="loading"
:data="modelList"
@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="modelName" />
<el-table-column
label="额定功率"
align="center"
prop="ratedPower"
:formatter="ratedPowerFormat"
/>
<el-table-column
label="额定电流"
align="center"
prop="ratedCurrent"
:formatter="ratedCurrentFormat"
/>
<el-table-column
label="额定电压"
align="center"
prop="ratedVoltage"
:formatter="ratedVoltageFormat"
/>
<el-table-column label="充电类型" align="center" prop="speedType">
<template slot-scope="scope">
<dict-tag
:options="dict.type.speed_type"
:value="scope.row.speedType"
/>
</template>
</el-table-column>
<el-table-column label="充电桩类型" align="center" prop="chargerPileType">
<template slot-scope="scope">
<dict-tag
:options="dict.type.charger_pile_type"
:value="scope.row.chargerPileType"
/>
</template>
</el-table-column>
<el-table-column label="充电枪数量" align="center" prop="connectorNum" />
<el-table-column
label="充电接口标准"
align="center"
prop="interfaceStandard"
/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
v-hasPermi="['pile:model:edit']"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
v-hasPermi="['pile:model:remove']"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</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="30%" append-to-body>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="150px"
label-position="right"
>
<el-form-item label="型号名称" prop="modelName">
<el-input v-model="form.modelName" placeholder="请输入型号名称" />
</el-form-item>
<div style="margin-top: 20px">
<el-form-item label="充电桩类型" prop="chargerPileType">
<el-radio v-model="form.chargerPileType" label="1" border size="small">汽车桩</el-radio>
<el-radio v-model="form.chargerPileType" label="2" border size="small">电单车</el-radio>
</el-form-item>
</div>
<div style="margin-top: 20px" v-if="form.chargerPileType === '1'">
<el-form-item label="充电速度类型" prop="speedType">
<el-radio v-model="form.speedType" label="1" border size="medium">快充</el-radio>
<el-radio v-model="form.speedType" label="2" border size="medium">慢充</el-radio>
</el-form-item>
</div>
<el-form-item label="额定功率，单位kW" prop="ratedPower">
<el-input
v-model="form.ratedPower"
placeholder="请输入额定功率，单位kW"
/>
</el-form-item>
<el-form-item label="额定电流，单位A" prop="ratedCurrent">
<el-input
v-model="form.ratedCurrent"
placeholder="请输入额定电流，单位A"
/>
</el-form-item>
<el-form-item label="额定电压，单位V" prop="ratedVoltage">
<el-input
v-model="form.ratedVoltage"
placeholder="请输入额定电压，单位V"
/>
</el-form-item>
<el-form-item label="充电枪数量" prop="connectorNum">
<el-input
v-model="form.connectorNum"
placeholder="请输入充电枪数量"
/>
</el-form-item>
<el-form-item label="充电接口标准" prop="interfaceStandard">
<el-input
v-model="form.interfaceStandard"
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 {
listModel,
getModel,
delModel,
addModel,
updateModel
} from '@/api/pile/model'
export default {
name: 'Model',
dicts: ['charger_pile_type', 'speed_type'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 充电桩型号信息表格数据
modelList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
modelName: null
},
// 表单参数
form: {},
// 表单校验
rules: {
modelName: [
{ required: true, message: '请输入型号名称', trigger: 'blur' }
],
ratedPower: [
{ required: true, message: '请输入额定功率', trigger: 'blur' }
],
ratedCurrent: [
{ required: true, message: '请输入额定电流', trigger: 'blur' }
],
ratedVoltage: [
{ required: true, message: '请输入额定电压', trigger: 'blur' }
],
connectorNum: [
{ required: true, message: '请选择充电枪数量', trigger: 'blur' }
],
interfaceStandard: [
{ required: true, message: '请输入充电接口标椎', trigger: 'blur' }
],
speedType: [
{ required: true, message: '请选择充电类型', trigger: 'blur' }
],
chargerPileType: [
{ required: true, message: '请选择充电桩类型', trigger: 'blur' }
]
}
}
},
created() {
this.getList()
},
methods: {
/** 查询充电桩型号信息列表 */
getList() {
this.loading = true
listModel(this.queryParams).then((response) => {
this.modelList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
modelName: null,
ratedPower: null,
ratedCurrent: null,
ratedVoltage: null,
speedType: null,
chargerPileType: null,
connectorNum: null,
interfaceStandard: 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
getModel(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) {
updateModel(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addModel(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 delModel(ids)
})
.then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
})
.catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this.download(
'pile/model/export',
{
...this.queryParams
},
`model_${new Date().getTime()}.xlsx`
)
},
// 额定功率格式化
ratedPowerFormat(row) {
// console.log("额定功率格式化", row.ratedPower);
return parseInt(row.ratedPower) + 'kW';
},
// 额定功率格式化
ratedCurrentFormat(row) {
return row.ratedCurrent + 'A';
},
// 额定电压格式化
ratedVoltageFormat(row) {
return row.ratedVoltage + 'V';
}
}
}
</script>

448
jsowell-ui/src/views/pile/sim/index.vue Normal file
View File

@@ -0,0 +1,448 @@
<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="pileSn">
<el-input
v-model="queryParams.pileSn"
placeholder="桩编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="ICCID" prop="iccId">
<el-input
v-model="queryParams.iccId"
placeholder="请输入ICCID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="套餐总流量" prop="totalData">-->
<!-- <el-input-->
<!-- v-model="queryParams.totalData"-->
<!-- placeholder="请输入套餐总流量"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="剩余流量" prop="surplusData">-->
<!-- <el-input-->
<!-- v-model="queryParams.surplusData"-->
<!-- placeholder="请输入剩余流量"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="到期时间" prop="expireTime">-->
<!-- <el-date-picker clearable-->
<!-- v-model="queryParams.expireTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- placeholder="请选择到期时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="SIM卡商" prop="simSupplier">-->
<!-- <el-input-->
<!-- v-model="queryParams.simSupplier"-->
<!-- placeholder="请输入SIM卡商"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="SIM卡商" prop="simSupplier">
<el-select v-model="queryParams.simSupplier" clearable placeholder="请选择">
<el-option
v-for="item in dict.type.sim_supplier"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</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:sim:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
@click="handleRenewSim"
v-hasPermi="['pile:sim: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:sim: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:sim:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="simList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" />-->
<el-table-column label="ICCID" align="center" prop="iccId" width="180px"/>
<el-table-column label="套餐名称" align="center" prop="name" />
<el-table-column label="对应桩号" align="center" prop="pileSn" />
<el-table-column label="sim卡商" align="center" prop="simSupplier" >
<template slot-scope="scope">
<dict-tag
:options="dict.type.sim_supplier"
:value="scope.row.simSupplier"
/>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="simCardStatus" >
<template slot-scope="scope">
<dict-tag
:options="dict.type.sim_status"
:value="scope.row.simCardStatus"
/>
</template>
</el-table-column>
<el-table-column label="套餐总流量" align="center" prop="totalData" />
<el-table-column label="剩余流量" align="center" prop="surplusData" />
<el-table-column label="到期时间" align="center" prop="expireTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="SIM卡运营商" align="center" prop="operator" >
<template slot-scope="scope">
<dict-tag
:options="dict.type.sim_operator"
:value="scope.row.operator"
/>
</template>
</el-table-column>
<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:sim:edit']"-->
<!-- >修改</el-button>-->
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleRenewSim(scope.row)"
v-hasPermi="['pile:sim:edit']"
>续期</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['pile:sim: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"
/>
<!-- 添加或修改充电桩SIM卡信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="套餐名称" prop="name">
<el-input v-model="form.name" placeholder="请输入套餐名称" />
</el-form-item>
<el-form-item label="ICCID" prop="iccid">
<el-input v-model="form.iccid" placeholder="请输入ICCID" />
</el-form-item>
<el-form-item label="套餐总流量" prop="totalData">
<el-input v-model="form.totalData" placeholder="请输入套餐总流量" />
</el-form-item>
<el-form-item label="剩余流量" prop="surplusData">
<el-input v-model="form.surplusData" placeholder="请输入剩余流量" />
</el-form-item>
<el-form-item label="到期时间" prop="expireTime">
<el-date-picker clearable
v-model="form.expireTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择到期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="SIM卡运营商" prop="operator">
<el-input v-model="form.operator" placeholder="请输入SIM卡运营商" />
</el-form-item>
<el-form-item label="删除标识" prop="delFlag">
<el-input v-model="form.delFlag" 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>
<!-- 续费按钮对话框 -->
<el-dialog title="sim卡续费" @close="closeRenewSim" :visible.sync="openRenewSim" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="续费周期" prop="cycleNumber">
<el-input v-model="simRenewCycleNumber" placeholder="请输入续费周期(大于12或为12的倍数)" @input="changeInput"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitSimRenewCycleNumber">确 定</el-button>
<el-button @click="resetSimRenewCycleNumber">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {listSim, getSim, delSim, addSim, updateSim, simRenew, getSimInfo} from "@/api/pile/sim";
export default {
name: "Sim",
dicts: ["sim_supplier", "sim_status", "sim_operator"],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 充电桩SIM卡信息表格数据
simList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
openRenewSim: false,
simRenewCycleNumber: '',
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
iccId: null,
status: null,
totalData: null,
surplusData: null,
expireTime: null,
operator: null,
pileSn: null,
simSupplier : null,
},
value: '',
// 表单参数
form: {},
// 表单校验
rules: {
},
iccidArray: []
};
},
created() {
this.getList();
},
methods: {
/** 查询充电桩SIM卡信息列表 */
getList() {
this.loading = true;
// listSim(this.queryParams).then(response => {
// this.simList = response.rows;
// this.total = response.total;
// this.loading = false;
// });
getSimInfo(this.queryParams).then(res =>{
this.simList = res.rows;
this.total = res.total;
this.loading = false;
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
iccid: null,
status: "0",
totalData: null,
surplusData: null,
expireTime: null,
operator: 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.iccidArray = selection.map(item => item.iccid)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加充电桩SIM卡信息";
},
changeInput() {
const pattern = /^[1-9][0-9]*$/; // 正整数的正则表达式
// 不符合正整数时
if (!pattern.test(this.simRenewCycleNumber)) {
// input 框绑定的内容为空
this.simRenewCycleNumber = ''
}
},
// 关闭续费 对话框
closeRenewSim() {
console.log("关闭续费 对话框");
this.resetSimRenewCycleNumber();
},
/** 续费按钮操作 */
handleRenewSim(row) {
this.openRenewSim = true;
this.iccidArray.push(row.iccid);
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getSim(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改充电桩SIM卡信息";
});
},
// 重置 续费周期相关
resetSimRenewCycleNumber() {
console.log("重置 续费周期相关");
this.openRenewSim = false;
this.simRenewCycleNumber = "";
this.iccidArray = [];
},
// 点击续费提交按钮
submitSimRenewCycleNumber() {
const param = {
iccIds: this.iccidArray,
cycleNumber: this.simRenewCycleNumber
};
console.log("sim卡续费 param:", param);
simRenew(param).then( response => {
console.log("sim卡续费 response:", response);
this.$modal.msgSuccess("续费成功！");
this.openRenewSim = false;
this.getList();
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateSim(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSim(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除充电桩SIM卡信息编号为"' + ids + '"的数据项？').then(function() {
return delSim(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('pile/sim/export', {
...this.queryParams
}, `sim_${new Date().getTime()}.xlsx`)
}
}
};
</script>

345
jsowell-ui/src/views/pile/station/components/SiteInfo.vue Normal file
View 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
View 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
View 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&#45;&#45;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&#45;&#45;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>

207
jsowell-ui/src/views/pile/station/components/amend/electromobile.vue Normal file
View File

@@ -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
View 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>

85
jsowell-ui/src/views/pile/station/components/bondedDevice.vue Normal file
View File

@@ -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
View 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
View 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
View 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
View File

@@ -0,0 +1,3 @@
<template>
<div class="app-container"></div>
</template>

528
jsowell-ui/src/views/pile/station/index.vue Normal file
View 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
View 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
View 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>