autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-04-29 23:50:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
JS-LM
2023-05-10 09:16:09 +08:00
parent d2eed9ad3a
commit e89a9ebba5
4 changed files with 109 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
jsowell-ui/src/views/homeIndex/homeIndex.vue
View File

@@ -1,11 +1,61 @@
<template>
<div>
<h1>电桩</h1>
<hr />
<el-table
stripe
border
:data="tableData"
style="width: 100%">
<el-table-column
label="序号"
type="index"
>
</el-table-column>
<el-table-column
prop="pileSn"
label="编号">
</el-table-column>
<el-table-column
prop="stationName"
label="名称"
>
</el-table-column>
<el-table-column
prop="stationAddress"
label="电站">
</el-table-column>
<el-table-column
prop="type"
label="接口">
</el-table-column>
<el-table-column
prop="power"
label="功率">
</el-table-column>
<el-table-column
prop="degree"
label="度数">
</el-table-column>
<el-table-column
prop="electricityPrice"
label="电费">
</el-table-column>
<el-table-column
prop="servicePrice"
label="服务费">
</el-table-column>
<el-table-column
prop="chargingNumber"
label="充电次数">
</el-table-column>
</el-table>
<h1>概况</h1>
<hr />
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="7">
<el-row :gutter="24">
<el-col :span="4" :xs="24">
<div class="box">
<p>总充电电量</p>
<div>总充电电量</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<i>度</i>
@@ -17,9 +67,9 @@
<div class="progress"></div>
</div>
</el-col>
<el-col :span="7">
<el-col :span="4" :xs="24">
<div class="box">
<p>总充电费用</p>
<div>总充电费用</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
<i>元</i>
@@ -32,9 +82,9 @@
<div class="progress"></div>
</div>
</el-col>
<el-col :span="7">
<el-col :span="4" :xs="24">
<div class="box">
<p>总充电订单数</p>
<div>总充电订单数</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
<i>笔</i>
@@ -46,11 +96,9 @@
<div class="progress"></div>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="7">
<el-col :span="4" :xs="24">
<div class="box">
<p>总充电设备数量</p>
<div>总充电设备数量</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<i>座</i>
@@ -62,9 +110,9 @@
<div class="progress"></div>
</div>
</el-col>
<el-col :span="7" v-hasRole="['admin', 'common']">
<div class="box">
<p>总客户余额</p>
<el-col :span="4" :xs="24" v-hasRole="['admin', 'common']">
<div class="box" >
<div>总客户余额</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<i>元</i>
@@ -74,13 +122,18 @@
></el-image>
</div>
<div class="progress"></div></div
></el-col>
<el-col :span="7">
<div class="box" style="background-color: #ffffff">
<p>总充电电量</p>
>
</el-col>
<el-col :span="4" :xs="24">
<div class="box">
<div>总服务费金额</div>
<div class="box-text">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<i>元</i>
<el-image
style="width: 80px; height: 80px"
:src="require('@/assets/images/shebei.png')"
></el-image>
</div>
<div class="progress"></div>
</div>
@@ -110,6 +163,18 @@ export default {
chart: null,
generalSituation: {},
orderInfo: [],
tableData: [{
pileSn:'9527',
stationName:'举视充电桩',
stationAddress:'昆山市黄埔江南路',
type:'直流',
power:'2131',
degree:'215',
electricityPrice:'565',
servicePrice:'9274',
chargingNumber:'624',
}]
};
}, //图表实例
created() {
@@ -363,12 +428,8 @@ export default {
</script>
<style>
.row-bg {
margin-bottom: 20px;
}
.box {
/*height: 100%;*/
padding: 16px 22px;
padding: 10px;
font-size: 18px;
color: #ffffff;
background-color: #1ab3b3;