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

修改首页

Browse Source
This commit is contained in:
admin-lmm
2023-07-14 17:32:24 +08:00
parent e34aed7cb0
commit 017556418c
2 changed files with 98 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
jsowell-ui/src/views/homeIndex/echarts.js Normal file
View File

@@ -0,0 +1,35 @@
export function barDataView(titleName, fileName) {
var dataView = {
show: true,
readOnly: false,
lang: ['数据视图', '关闭', '刷新'],
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data // 坐标数据
var series = opt.series // 折线图数据
var tdHeads = ''
for (let index = 0; index < titleName.length; index++) {
// 样式
tdHeads += '<td style="height:30px;text-align: center;">' + titleName[index] + '</td>'
}
var tdBodys = '' // 表数据
var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:centerborder:1px solid #ccc;border-collapse:collapse;" ><tbody><tr>' + tdHeads + ' </tr>'
// 组装表数据
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
var temp = series[j].data[i]
if (temp != null && temp !== undefined) {
tdBodys += '<td>' + temp + '</td>'
} else {
tdBodys += '<td></td>'
}
}
// 样式
table += '<tr style="height:30px;text-align: center;"><td >' + axisData[i] + '</td>' + tdBodys + '</tr>'
tdBodys = ''
}
table += '</tbody></table>'
return table
}
}
return dataView
}

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

@@ -1,9 +1,57 @@
<template>
<div>
<div class="app-container">
<h1>概况</h1>
<hr/>
<el-row >
<div style="display: flex;justify-content: space-between;margin-top: 10px;flex-wrap: wrap;">
<div class="box" style="background-color: #ffba00;">
<el-image class="box-image"
:src="require('@/assets/images/lightning.png')"
/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingDegree}}</b>
<div>总充电电量(度)</div>
</div>
</div>
<div class="box" style="background-color: #c74542;">
<el-image class="box-image"
:src="require('@/assets/images/zongfeiyong.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
<div>总充电费用(元)</div>
</div>
</div>
<div class="box" style="background-color: #12ce65;">
<el-image
class="box-image"
:src="require('@/assets/images/dingdan.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
<div>总充电订单数(笔)</div>
</div>
</div>
<div class="box" style="background-color: #909399;">
<el-image
class="box-image"
:src="require('@/assets/images/shebei.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<div>总充电设备数量(座)</div>
</div>
</div>
<div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">
<el-image
class="box-image"
:src="require('@/assets/images/yue.png')"
></el-image>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<div>总客户余额(元)</div>
</div>
</div>
</div>
<!-- <el-row >
<div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px">
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
@@ -65,20 +113,8 @@
</div>
</div>
</el-col>
<!-- <div class="box">-->
<!-- <div>总服务费金额</div>-->
<!-- <div class="box-text">-->
<!-- <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>-->
<!-- <i>元</i>-->
<!-- <el-image-->
<!-- class="box-image"-->
<!-- :src="require('@/assets/images/shebei.png')"-->
<!-- ></el-image>-->
<!-- </div>-->
<!-- <div class="progress"></div>-->
<!-- </div>-->
</div>
</el-row>
</el-row> -->
<h1>订单</h1>
<hr/>
<el-button style="background-color: #1ab394; color: #ffffff"
@@ -97,6 +133,7 @@
</template>
<script>
import Echarts from "echarts";
import { barDataView } from "./echarts";
import {getGeneralSituation, getOrderInfo} from "@/api/index";
export default {
@@ -320,6 +357,7 @@ export default {
},
],
};
option.toolbox.feature.dataView = barDataView(['时间/日期','总用电量','总订单金额','尖时段总用电量','峰时段总用电量','平时段总用电量','谷时段总用电量'],'电量电费')
this.chart.setOption(option);
});
},
@@ -370,21 +408,24 @@ export default {
</script>
<style lang="scss" scoped>
// .app-container{
// overflow: scroll;
// }
.box {
width: 15rem;
display: flex;
height: 100px;
padding: 10px;
height: 6.25rem;
padding: 0.8rem;
/* font-size: 18px; */
color: #ffffff;
border-radius: 8px;
box-shadow: 0 15px 10px -11px black;
box-shadow: 0 15px 0.8rem -11px black;
margin-right: 24px;
margin-bottom: 20px;
position: relative;
.box-image {
width: 60px;
height: 60px;
width: 3.75rem;
height: 3.75rem;
// background-size: 100% 100%;
// position: absolute;
// right: 0;
@@ -400,7 +441,7 @@ export default {
.box-h1 {
/* margin-top: -14px; */
font-size: 47px;
font-size: 2rem;
}
.box-text {