autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-05-03 17:40:13 +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

423
jsowell-ui/src/views/order/abnormalRecord/index.vue Normal file
View File

@@ -0,0 +1,423 @@
<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="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单编号/交易流水号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<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="startTime">
<el-input
v-model="queryParams.startTime"
placeholder="请输入开始时间"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-input
v-model="queryParams.endTime"
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="['order:abnormalRecord: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="['order:abnormalRecord: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="['order:abnormalRecord: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="['order:abnormalRecord:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>-->
<el-table v-loading="loading" :data="abnormalRecordList" @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" />
<el-table-column label="桩编码" align="center" prop="pileSn" />
<el-table-column label="枪口号" align="center" prop="connectorCode" />
<el-table-column label="开始时间" align="center" prop="startTime" />
<el-table-column label="结束时间" align="center" prop="endTime" />
<!-- <el-table-column label="尖单价" align="center" prop="sharpPrice" />-->
<!-- <el-table-column label="尖电量" align="center" prop="sharpUsedElectricity" />-->
<!-- <el-table-column label="计损尖电量" align="center" prop="sharpPlanLossElectricity" />-->
<!-- <el-table-column label="尖金额" align="center" prop="sharpAmount" />-->
<!-- <el-table-column label="峰单价" align="center" prop="peakPrice" />-->
<!-- <el-table-column label="峰电量" align="center" prop="peakUsedElectricity" />-->
<!-- <el-table-column label="计损峰电量" align="center" prop="peakPlanLossElectricity" />-->
<!-- <el-table-column label="峰金额" align="center" prop="peakAmount" />-->
<!-- <el-table-column label="平单价" align="center" prop="flatPrice" />-->
<!-- <el-table-column label="平电量" align="center" prop="flatUsedElectricity" />-->
<!-- <el-table-column label="计损平电量" align="center" prop="flatPlanLossElectricity" />-->
<!-- <el-table-column label="平金额" align="center" prop="flatAmount" />-->
<!-- <el-table-column label="谷单价" align="center" prop="valleyPrice" />-->
<!-- <el-table-column label="谷电量" align="center" prop="valleyUsedElectricity" />-->
<!-- <el-table-column label="计损谷电量" align="center" prop="valleyPlanLossElectricity" />-->
<!-- <el-table-column label="谷金额" align="center" prop="valleyAmount" />-->
<!-- <el-table-column label="电表总起值" align="center" prop="ammeterTotalStart" />-->
<!-- <el-table-column label="电表总止值" align="center" prop="ammeterTotalEnd" />-->
<el-table-column label="总电量" align="center" prop="totalElectricity" />
<!-- <el-table-column label="计损总电量" align="center" prop="planLossTotalElectricity" />-->
<el-table-column label="消费金额" align="center" prop="consumptionAmount" />
<!-- <el-table-column label="VIN码" align="center" prop="vinCode" />-->
<!-- <el-table-column label="交易标识" align="center" prop="transactionIdentifier" />-->
<!-- <el-table-column label="交易时间" align="center" prop="transactionTime" />-->
<el-table-column label="停止原因" align="center" prop="stopReasonMsg" />
<!-- <el-table-column label="物理卡号" align="center" prop="logicCard" />-->
<!--<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="['order:abnormalRecord:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['order:abnormalRecord: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="orderCode">
<el-input v-model="form.orderCode" placeholder="请输入订单编号/交易流水号" />
</el-form-item>
<el-form-item label="桩编码" prop="pileSn">
<el-input v-model="form.pileSn" placeholder="请输入桩编码" />
</el-form-item>
<el-form-item label="枪号" prop="connectorCode">
<el-input v-model="form.connectorCode" placeholder="请输入枪号" />
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-input v-model="form.startTime" placeholder="请输入开始时间" />
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-input v-model="form.endTime" placeholder="请输入结束时间" />
</el-form-item>
<el-form-item label="尖单价 精确到小数点后五位" prop="sharpPrice">
<el-input v-model="form.sharpPrice" placeholder="请输入尖单价 精确到小数点后五位" />
</el-form-item>
<el-form-item label="尖电量 精确到小数点后四位" prop="sharpUsedElectricity">
<el-input v-model="form.sharpUsedElectricity" placeholder="请输入尖电量 精确到小数点后四位" />
</el-form-item>
<el-form-item label="计损尖电量" prop="sharpPlanLossElectricity">
<el-input v-model="form.sharpPlanLossElectricity" placeholder="请输入计损尖电量" />
</el-form-item>
<el-form-item label="尖金额" prop="sharpAmount">
<el-input v-model="form.sharpAmount" placeholder="请输入尖金额" />
</el-form-item>
<el-form-item label="峰单价 精确到小数点后五位" prop="peakPrice">
<el-input v-model="form.peakPrice" placeholder="请输入峰单价 精确到小数点后五位" />
</el-form-item>
<el-form-item label="峰电量" prop="peakUsedElectricity">
<el-input v-model="form.peakUsedElectricity" placeholder="请输入峰电量" />
</el-form-item>
<el-form-item label="计损峰电量" prop="peakPlanLossElectricity">
<el-input v-model="form.peakPlanLossElectricity" placeholder="请输入计损峰电量" />
</el-form-item>
<el-form-item label="峰金额" prop="peakAmount">
<el-input v-model="form.peakAmount" placeholder="请输入峰金额" />
</el-form-item>
<el-form-item label="平单价 精确到小数点后五位" prop="flatPrice">
<el-input v-model="form.flatPrice" placeholder="请输入平单价 精确到小数点后五位" />
</el-form-item>
<el-form-item label="平电量" prop="flatUsedElectricity">
<el-input v-model="form.flatUsedElectricity" placeholder="请输入平电量" />
</el-form-item>
<el-form-item label="计损平电量" prop="flatPlanLossElectricity">
<el-input v-model="form.flatPlanLossElectricity" placeholder="请输入计损平电量" />
</el-form-item>
<el-form-item label="平金额" prop="flatAmount">
<el-input v-model="form.flatAmount" placeholder="请输入平金额" />
</el-form-item>
<el-form-item label="谷单价 精确到小数点后五位" prop="valleyPrice">
<el-input v-model="form.valleyPrice" placeholder="请输入谷单价 精确到小数点后五位" />
</el-form-item>
<el-form-item label="谷电量" prop="valleyUsedElectricity">
<el-input v-model="form.valleyUsedElectricity" placeholder="请输入谷电量" />
</el-form-item>
<el-form-item label="计损谷电量" prop="valleyPlanLossElectricity">
<el-input v-model="form.valleyPlanLossElectricity" placeholder="请输入计损谷电量" />
</el-form-item>
<el-form-item label="谷金额" prop="valleyAmount">
<el-input v-model="form.valleyAmount" placeholder="请输入谷金额" />
</el-form-item>
<el-form-item label="电表总起值" prop="ammeterTotalStart">
<el-input v-model="form.ammeterTotalStart" placeholder="请输入电表总起值" />
</el-form-item>
<el-form-item label="电表总止值" prop="ammeterTotalEnd">
<el-input v-model="form.ammeterTotalEnd" placeholder="请输入电表总止值" />
</el-form-item>
<el-form-item label="总电量" prop="totalElectricity">
<el-input v-model="form.totalElectricity" placeholder="请输入总电量" />
</el-form-item>
<el-form-item label="计损总电量" prop="planLossTotalElectricity">
<el-input v-model="form.planLossTotalElectricity" placeholder="请输入计损总电量" />
</el-form-item>
<el-form-item label="消费金额 精确到小数点后四位，包含电费、 服务费" prop="consumptionAmount">
<el-input v-model="form.consumptionAmount" placeholder="请输入消费金额 精确到小数点后四位，包含电费、 服务费" />
</el-form-item>
<el-form-item label="VIN 码 VIN 码，此处 VIN 码和充电时 VIN 码不同， 正序直接上传， 无需补 0 和反序" prop="vinCode">
<el-input v-model="form.vinCode" placeholder="请输入VIN 码 VIN 码，此处 VIN 码和充电时 VIN 码不同， 正序直接上传， 无需补 0 和反序" />
</el-form-item>
<el-form-item label="交易标识(0x01app启动; 0x02卡启动; 0x04离线卡启动; 0x05vin码启动充电)" prop="transactionIdentifier">
<el-input v-model="form.transactionIdentifier" placeholder="请输入交易标识(0x01app启动; 0x02卡启动; 0x04离线卡启动; 0x05vin码启动充电)" />
</el-form-item>
<el-form-item label="交易时间 CP56Time2a 格式" prop="transactionTime">
<el-input v-model="form.transactionTime" placeholder="请输入交易时间 CP56Time2a 格式" />
</el-form-item>
<el-form-item label="停止原因" prop="stopReasonMsg">
<el-input v-model="form.stopReasonMsg" placeholder="请输入停止原因" />
</el-form-item>
<el-form-item label="物理卡号 不足 8 位补 0" prop="logicCard">
<el-input v-model="form.logicCard" placeholder="请输入物理卡号 不足 8 位补 0" />
</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 { listAbnormalRecord, getAbnormalRecord, delAbnormalRecord, addAbnormalRecord, updateAbnormalRecord } from "@/api/order/abnormalRecord";
export default {
name: "AbnormalRecord",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 订单异常记录表格数据
abnormalRecordList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderCode: null,
pileSn: null,
startTime: null,
endTime: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询订单异常记录列表 */
getList() {
this.loading = true;
listAbnormalRecord(this.queryParams).then(response => {
this.abnormalRecordList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
orderCode: null,
pileSn: null,
connectorCode: null,
startTime: null,
endTime: null,
sharpPrice: null,
sharpUsedElectricity: null,
sharpPlanLossElectricity: null,
sharpAmount: null,
peakPrice: null,
peakUsedElectricity: null,
peakPlanLossElectricity: null,
peakAmount: null,
flatPrice: null,
flatUsedElectricity: null,
flatPlanLossElectricity: null,
flatAmount: null,
valleyPrice: null,
valleyUsedElectricity: null,
valleyPlanLossElectricity: null,
valleyAmount: null,
ammeterTotalStart: null,
ammeterTotalEnd: null,
totalElectricity: null,
planLossTotalElectricity: null,
consumptionAmount: null,
vinCode: null,
transactionIdentifier: null,
transactionTime: null,
stopReasonMsg: null,
logicCard: null,
createTime: 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
getAbnormalRecord(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) {
updateAbnormalRecord(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addAbnormalRecord(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 delAbnormalRecord(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('order/abnormalRecord/export', {
...this.queryParams
}, `abnormalRecord_${new Date().getTime()}.xlsx`)
}
}
};
</script>

521
jsowell-ui/src/views/order/order/index.vue Normal file
View File

@@ -0,0 +1,521 @@
<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="stationId">
<el-select
v-model="queryParams.stationId"
placeholder="请选择站点"
clearable
style="width: 140px"
>
<el-option
v-for="station in stationList"
:key="station.id"
:label="station.stationName"
:value="station.id"
/>
</el-select>
</el-form-item>
<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>
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['order:order:export']">导出</el-button>
<div>
{{dateDescription}}期间，总用电量{{sumUsedElectricity}}度，总消费金额{{sumOrderAmount}}元
</div>
</el-row>
<!--<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="['order:order: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="['order:order: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="['order:order:remove']"
>删除</el-button>
</el-col>
&lt;!&ndash;<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['order:order:export']"
>导出</el-button>
</el-col>&ndash;&gt;
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</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="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="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-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="['order:order:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['order:order: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"
/>
</div>
</template>
<script>
import {listOrder, getOrder, delOrder, addOrder, updateOrder, 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: "Order",
components: {Template},
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: null,
startTime: null,
endTime: null,
},
// 表单参数
form: {},
// 表单校验
rules: {},
// 站点列表
stationList: [],
// 订单创建时间范围
createTimeRange: [],
};
},
created() {
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
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加订单";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getOrder(id).then(response => {
this.form = response.data;
this.orderDetailList = response.data.orderDetailList;
this.open = true;
this.title = "修改订单";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.orderDetailList = this.orderDetailList;
if (this.form.id != null) {
updateOrder(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addOrder(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 delOrder(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 订单详情序号 */
rowOrderDetailIndex({row, rowIndex}) {
row.index = rowIndex + 1;
},
/** 订单详情添加按钮操作 */
handleAddOrderDetail() {
let obj = {};
obj.totalUsedElectricity = "";
obj.totalOrderAmount = "";
obj.totalElectricityAmount = "";
obj.totalServiceAnount = "";
obj.sharpUsedElectricity = "";
obj.sharpElectricityPrice = "";
obj.sharpServicePrice = "";
obj.peakUsedElectricity = "";
obj.peakElectricityPrice = "";
obj.peakServicePrice = "";
obj.flatUsedElectricity = "";
obj.flatElectricityPrice = "";
obj.flatServicePrice = "";
obj.valleyUsedElectricity = "";
obj.valleyElectricityPrice = "";
obj.valleyServicePrice = "";
this.orderDetailList.push(obj);
},
/** 订单详情删除按钮操作 */
handleDeleteOrderDetail() {
if (this.checkedOrderDetail.length === 0) {
this.$modal.msgError("请先选择要删除的订单详情数据");
} else {
const orderDetailList = this.orderDetailList;
const checkedOrderDetail = this.checkedOrderDetail;
this.orderDetailList = orderDetailList.filter(function (item) {
return checkedOrderDetail.indexOf(item.index) === -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 () {
//字符串拼接，开始时间，结束时间
let beg = getDay(-7) + " 00:00:00"; //当月第一天
let end = getDay(0) + " 23:59:59"; //当天
this.createTimeRange = [beg, end] //将值设置给插件绑定的数据
// return this.createTimeRange;
},
},
watch: {
createTimeRange(newValue, oldValue) {
// console.log("createTimeRange发生变化", newValue, oldValue);
if (newValue != null && newValue.length > 0) {
this.queryParams.startTime = newValue[0];
this.queryParams.endTime = newValue[1];
}
},
}
};
</script>

318
jsowell-ui/src/views/order/order/orderDetail.vue Normal file
View File

@@ -0,0 +1,318 @@
<template>
<div class="app-container">
<!-- 进度条-->
<el-card class="cardStyle">
<div style="margin: 30px">
<div
style="text-align: center; margin-bottom: 30px"
v-if="
orderDetail[0].orderStatus === '4' ||
orderDetail[0].orderStatus === '6'
"
>
停止理由：
<span style="color: red">{{ orderDetail[0].stopReasonMsg }}</span>
</div>
<el-steps
:active="orderDetail[0].orderStatus !== '6' ? 2 : 4"
align-center
finish-status="success"
>
<el-step
title="客户下单"
:description="orderDetail[0].createTime"
></el-step>
<el-step
title="开始充电"
:description="status(orderDetail[0].orderStatus)"
></el-step>
<el-step
title="结束充电"
:description="orderDetail[0].endTime"
></el-step>
<el-step title="完成充电" description="充电时长"></el-step>
</el-steps>
</div>
</el-card>
<!-- 订单信息 -->
<el-card class="cardStyle">
<h3>订单信息</h3>
<el-table style="width: 100%" :data="orderDetail" border>
<el-table-column
prop="orderCode"
label="订单号"
align="center"
width="280"
></el-table-column>
<el-table-column prop="orderStatus" label="订单状态" align="center">
<template slot-scope="scope">
<span>{{ status(scope.row.orderStatus) }}</span>
</template>
</el-table-column>
<!-- <el-table-column-->
<!-- prop="orderAmount"-->
<!-- label="订单金额"-->
<!-- align="center"-->
<!-- ></el-table-column>-->
<el-table-column prop="createTime" label="创建时间" align="center"/>
<el-table-column prop="startTime" label="开始时间" align="center"/>
<el-table-column prop="endTime" label="结束时间" align="center">
<template slot-scope="scope">
<span>{{
scope.row.endTime === "" ? "一" : scope.row.endTime
}}</span>
</template>
</el-table-column>
<el-table-column prop="startSOC" label="起始SOC" align="center">
<template slot-scope="scope">
<span>{{
scope.row.startSOC === null ? "一" : scope.row.startSOC
}}</span>
</template>
</el-table-column>
<el-table-column prop="endSOC" label="终止SOC" align="center">
<template slot-scope="scope">
<span>{{
scope.row.endSOC === null ? "一" : scope.row.endSOC
}}</span>
</template>
</el-table-column>
<el-table-column prop="stopReasonMsg" label="订单停止原因" align="center">
<template slot-scope="scope">
<span>{{
scope.row.stopReasonMsg === null ? "一" : scope.row.stopReasonMsg
}}</span>
</template>
</el-table-column>
</el-table>
<div class="marginTop"></div>
</el-card>
<el-card class="cardStyle">
<h3>实时订单数据</h3>
<el-table style="width: 100%" :data="orderRealTimeInfo" border>
<el-table-column prop="orderAmount" label="消费金额" align="center" width="280">
<template slot-scope="scope">
<span>￥{{
scope.row.orderAmount === "0.0000" ? "0" : scope.row.orderAmount
}} </span>
</template>
</el-table-column>
<!-- <el-table-column prop="totalElectricityAmount" label="总电费" align="center">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{-->
<!-- scope.row.totalElectricityAmount === null ? "一" : scope.row.totalElectricityAmount-->
<!-- }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="totalServiceAmount" label="总服务费" align="center">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{-->
<!-- scope.row.totalServiceAmount === null ? "一" : scope.row.totalServicedAmount-->
<!-- }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column prop="chargedDegree" label="充电度数" align="center">
<template slot-scope="scope">
<span>{{
scope.row.chargedDegree === "0.0000" ? "0" : scope.row.chargedDegree
}}</span>
</template>
</el-table-column>
<el-table-column prop="chargingTime" label="充电时长" align="center">
<template slot-scope="scope">
<span>{{
scope.row.chargingTime === null ? "一" : scope.row.chargingTime
}} min</span>
</template>
</el-table-column>
<el-table-column prop="soc" label="当前soc" align="center">
<template slot-scope="scope">
<span>{{
scope.row.soc === null ? "一" : scope.row.soc
}}</span>
</template>
</el-table-column>
<!-- <el-table-column-->
<!-- prop="startTime"-->
<!-- label=""-->
<!-- align="center"-->
<!-- ></el-table-column>-->
<!-- <el-table-column-->
<!-- prop="endTime"-->
<!-- label="结束时间"-->
<!-- align="center"-->
<!-- ></el-table-column>-->
<!-- <el-table-column prop="startSOC" label="起始SOC" align="center">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{-->
<!-- scope.row.startSOC === null ? "一" : scope.row.startSOC-->
<!-- }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="endSOC" label="终止SOC" align="center">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{-->
<!-- scope.row.endSOC === null ? "一" : scope.row.endSOC-->
<!-- }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="stopReasonMsg"-->
<!-- label="订单停止原因"-->
<!-- align="center"-->
<!-- ></el-table-column>-->
</el-table>
<div class="marginTop"></div>
</el-card>
<!-- 支付信息-->
<el-card class="cardStyle">
<h3>支付信息</h3>
<el-table style="width: 100%" :data="payDetail" border>
<el-table-column prop="payAmount" label="支付金额" align="center"/>
<el-table-column prop="payModeDesc" label="支付方式" align="center"/>
<el-table-column prop="payStatus" label="支付状态" align="center">
<template slot-scope="scope">
<span>{{
scope.row.payStatus === "1" ? "支付完成" : "待支付"
}}</span>
</template>
</el-table-column>
<el-table-column prop="payTime" label="支付时间" align="center"/>
<el-table-column prop="outTradeNo" label="商务单号" align="center">
<template slot-scope="scope">
<span>{{
scope.row.outTradeNo === null ? "一" : scope.row.outTradeNo
}}</span>
</template>
</el-table-column>
</el-table>
<div class="marginTop"></div>
</el-card>
<!-- -->
<!-- <el-card class="cardStyle">
<h3>消费信息</h3>
<el-table style="width: 100%" :data="payDetail" border>
<el-table-column prop="payAmount" label="支付金额" align="center"></el-table-column>
<el-table-column prop="payModeDesc" label="支付方式" align="center"></el-table-column>
<el-table-column prop="payStatus" label="支付状态" align="center">
<template slot-scope="scope">
<span>{{scope.row.payStatus === '1' ? '支付完成' :'待支付'}}</span>
</template>
</el-table-column>
<el-table-column prop="payTime" label="支付时间" align="center"></el-table-column>
<el-table-column prop="outTradeNo" label="商务单号" align="center">
<template slot-scope="scope">
<span>{{scope.row.outTradeNo === null ? '一' :scope.row.outTradeNo}}</span>
</template>
</el-table-column>
</el-table>
<div class="marginTop"></div>
</el-card> -->
<!-- 设备信息 -->
<el-card class="cardStyle">
<h3>设备信息</h3>
<el-table style="width: 100%" :data="pileIn" border>
<el-table-column prop="merchantName" label="运营商名称" align="center"/>
<el-table-column prop="pileSn" label="设备编号" align="center"/>
<el-table-column prop="ratedCurrent" label="额定电流(A)" align="center"/>
<el-table-column prop="ratedVoltage" label="额定电压(V)" align="center"/>
<el-table-column prop="ratedPower" label="额定功率(KW)" align="center"/>
</el-table>
<div class="marginTop"></div>
</el-card>
<!-- 用户信息 -->
<el-card class="cardStyle">
<h3>用户信息</h3>
<el-table style="width: 100%" :data="userInfo" border>
<el-table-column prop="nickName" label="用户昵称" align="center"/>
<el-table-column prop="mobileNumber" label="用户手机号" align="center"/>
<el-table-column prop="principalBalance" label="本金金额" align="center"/>
<el-table-column prop="giftBalance" label="赠送金额" align="center"/>
<el-table-column prop="totalAccountAmount" label="总金额" align="center"/>
</el-table>
<div class="marginTop"></div>
</el-card>
<!-- 时间 描述-->
<el-card
class="cardStyle"
v-if="
orderDetail[0].orderStatus === '1' || orderDetail[0].orderStatus === '6'
"
>
<div class="marginTop"></div>
<order-echarts :obj="obj"></order-echarts>
</el-card>
</div>
</template>
<script>
import { getOrder } from "@/api/order/order";
import OrderEcharts from "@/views/order/order/orderEcharts";
export default {
name: "",
components: { OrderEcharts },
data() {
return {
orderList: this.$route.params.orderCode,
orderDetail: [],
payDetail: [],
userInfo: [],
obj: {},
pileIn: [],
orderRealTimeInfo: null,
};
},
created() {
this.getOrderDetail();
},
methods: {
async getOrderDetail() {
console.log("主页面传递过来的参数", this.orderList);
// console.log(this.orderList.orderCode)
const { data } = await getOrder(this.orderList);
console.log("getOrder", data);
this.obj = data;
this.orderDetail = [data.orderInfo];
console.log("this.orderDetail", this.orderDetail);
this.payDetail = data.payRecordList;
console.log("this.payDetail", this.payDetail);
this.userInfo = [data.memberInfo];
console.log("this.userInfo", this.userInfo);
this.pileIn = [data.pileInfo];
console.log("this.pileIn", this.pileIn);
this.orderRealTimeInfo = [data.orderRealTimeInfo];
},
status(e) {
let arr = [
"未启动",
"充电中",
"待结算",
"待补缴",
"异常",
"可疑",
"订单完成",
"超时关闭",
];
return e ? arr[e] : arr[0];
},
},
};
</script>
<style>
.cardStyle {
margin-bottom: 10px;
}
.marginTop {
margin-top: 10px;
}
</style>

241
jsowell-ui/src/views/order/order/orderEcharts.vue Normal file
View File

@@ -0,0 +1,241 @@
<template>
<div ref="chart" :style="{ width: '100%', height: '600px' }"></div>
</template>
<script>
import Echarts from "echarts";
export default {
data() {
return { chart: null };
}, //图表实例
props: {
obj: {
type: Object,
required: true,
},
},
mounted() {
this.init();
console.log("父组件传递过来的值", this.obj);
window.addEventListener("resize", () => {
this.chart.resize();
});
},
methods: {
init() {
// 初始化echarts实例
this.chart = Echarts.init(this.$refs.chart);
// let date = [this.orderDetail.startTime,this.orderDetail.endTime];
// let arr = [this.orderDetail.startTime,this.orderDetail.endTime]
// let data = [this.orderDetail.startTime,this.orderDetail.endTime]
// console.log(date,arr,data)
// 绘制图表
let option = {
tooltip: {
trigger: "axis",
// position: function (pt) {
// return [pt[0], '10%'];
// }
axisPointer: {
type: "cross",
},
},
title: {
left: "left",
text: "电压、电流、功率数据表",
},
toolbox: {
// 右上角的图标
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
// dataZoom: {
// yAxisIndex: 'none'
// },
saveAsImage: { show: true },
},
},
legend: {
data: ["电流", "电压", "功率",'SOC'],
},
xAxis: {
type: "category",
axisTick: {
alignWithLabel: true,
},
// boundaryGap: false,
// data: date // x轴数据
// data:['2020-12.20','2021-12.20']
data: this.obj.realTimeMonitorDataList
.map((str) => {
return str.time.replace(" ", "\n");
}),
},
yAxis: [
{
type: "value",
// boundaryGap: [0, '100%']
name: "电流",
position: "left",
alignTicks: true,
axisLabel: {
formatter: "{value} A",
},
axisLine: {
show: true,
lineStyle: {
color: "#5470C6",
},
},
// axisPointer: {
// snap: true
// }
},
{
type: "value",
// boundaryGap: [0, '100%']
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: "#EE6666",
},
},
name: "电压",
position: "right",
offset: 60,
axisLabel: {
formatter: "{value} V",
},
},
{
type: "value",
position: "right",
// boundaryGap: [0, '100%']
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: "#91CC75",
},
},
name: "功率",
axisLabel: {
formatter: "{value}W",
},
},
{
type: "value",
position: "right",
// boundaryGap: [0, '100%']
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: "#91CC75",
},
},
name: "SOC",
axisLabel: {
formatter: "{value}",
},
},
],
// dataZoom: [
// {
// type: 'inside',
// start: 0,
// end: 10
// },
// {
// start: 0,
// end: 10
// }
// ],
series: [
{
name: "电流",
type: "line",
// symbol: 'none',
smooth: true,
yAxisIndex: 0,
// sampling: 'lttb',
tooltip: {
valueFormatter: function (value) {
return value + " V/A";
},
},
// itemStyle: {
// color: 'rgb(255, 70, 131)'
// },
// data: data
data: this.obj.realTimeMonitorDataList
.map((item) => {
return item.instantCurrent;
}),
},
{
name: "电压",
type: "line",
yAxisIndex: 1,
// symbol: 'none',
// sampling: 'lttb',
tooltip: {
valueFormatter: function (value) {
return value + "V";
},
},
// itemStyle: {
// color: 'pink'
// },
data: this.obj.realTimeMonitorDataList
.map((item) => {
return item.instantVoltage;
}),
// data: arr
},
{
name: "功率",
type: "line",
yAxisIndex: 2,
// symbol: 'none',
// sampling: 'lttb',
tooltip: {
valueFormatter: function (value) {
return value + " W";
},
},
// itemStyle: {
// color: 'black'
// },
data: this.obj.realTimeMonitorDataList
.map((item) => {
return item.instantPower;
}),
},
{
name: "SOC",
type: "line",
yAxisIndex: 3,
// symbol: 'none',
// sampling: 'lttb',
tooltip: {
valueFormatter: function (value) {
return value + " W";
},
},
// itemStyle: {
// color: 'black'
// },
data: this.obj.realTimeMonitorDataList
.map((item) => {
return item.soc;
}),
},
],
};
this.chart.setOption(option);
},
},
};
</script>