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

update

Browse Source
This commit is contained in:
Lemon
2023-06-30 14:33:51 +08:00
parent 333cb3f80d
commit 67ff743ff2
2 changed files with 394 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,49 +1,51 @@
<template>
<el-row :gutter="0" type="flex" style="flex-wrap:wrap">
<div>
<h1>概况</h1>
<hr />
<hr/>
<el-row >
<div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px">
<el-col :span="4">
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<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>
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<div>总充电电量(度)</div>
</div>
</div>
</el-col>
<el-col :span="4">
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" style="background-color: #c74542;">
<el-image class="box-image"
:src="require('@/assets/images/zongfeiyong.png')" />
:src="require('@/assets/images/zongfeiyong.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
<b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
<div>总充电费用(元)</div>
</div>
</div>
</el-col>
<el-col :span="4">
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" style="background-color: #12ce65;">
<el-image
class="box-image"
:src="require('@/assets/images/dingdan.png')" />
:src="require('@/assets/images/dingdan.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingQuantity}}</b>
<b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
<div>总充电订单数(笔)</div>
</div>
</div>
</el-col>
<el-col :span="4">
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" style="background-color: #909399;">
<el-image
class="box-image"
:src="require('@/assets/images/shebei.png')" />
:src="require('@/assets/images/shebei.png')"/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<div>总充电设备数量(座)</div>
@@ -51,7 +53,7 @@
</div>
</el-col>
<el-col :span="4">
<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">
<el-image
class="box-image"
@@ -63,37 +65,39 @@
</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 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>
<h1>订单</h1>
<hr />
<hr/>
<el-button style="background-color: #1ab394; color: #ffffff"
>最近30天</el-button
>最近30天
</el-button
>
<div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
<hr />
<hr/>
<!-- <h1>启动充电渠道</h1> -->
<!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
<!-- <hr /> -->
<!-- <hr /> -->
<!-- <h1>设备</h1> -->
</div>
</el-row>
</template>
<script>
import Echarts from "echarts";
import { getGeneralSituation, getOrderInfo } from "@/api/index";
import {getGeneralSituation, getOrderInfo} from "@/api/index";
export default {
data() {
@@ -102,15 +106,15 @@ export default {
generalSituation: {},
orderInfo: [],
tableData: [{
pileSn:'9527',
stationName:'有电充充电桩',
stationAddress:'昆山市黄埔江南路',
type:'直流',
power:'2131',
degree:'215',
electricityPrice:'565',
servicePrice:'9274',
chargingNumber:'624',
pileSn: '9527',
stationName: '有电充充电桩',
stationAddress: '昆山市黄埔江南路',
type: '直流',
power: '2131',
degree: '215',
electricityPrice: '565',
servicePrice: '9274',
chargingNumber: '624',
}]
};
@@ -124,12 +128,12 @@ export default {
},
methods: {
async getGeneral() {
const { obj } = await getGeneralSituation({});
const {obj} = await getGeneralSituation({});
console.log("首页信息", obj);
this.generalSituation = obj;
},
async getOrder() {
const { obj } = await getOrderInfo({});
const {obj} = await getOrderInfo({});
this.orderInfo = obj;
console.log("订单信息", this.orderInfo);
},
@@ -151,10 +155,10 @@ export default {
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ["line", "bar"]},
restore: {show: true},
saveAsImage: {show: true},
},
},
legend: {
@@ -182,7 +186,7 @@ export default {
type: "category",
boundaryGap: true,
data: str,
axisLine: { onZero: false },
axisLine: {onZero: false},
},
],
animation: true,
@@ -329,10 +333,10 @@ export default {
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true },
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true},
},
},
series: [
@@ -346,14 +350,14 @@ export default {
borderRadius: 8,
},
data: [
{ value: 40, name: "rose 1" },
{ value: 38, name: "rose 2" },
{ value: 32, name: "rose 3" },
{ value: 30, name: "rose 4" },
{ value: 28, name: "rose 5" },
{ value: 26, name: "rose 6" },
{ value: 22, name: "rose 7" },
{ value: 18, name: "rose 8" },
{value: 40, name: "rose 1"},
{value: 38, name: "rose 2"},
{value: 32, name: "rose 3"},
{value: 30, name: "rose 4"},
{value: 28, name: "rose 5"},
{value: 26, name: "rose 6"},
{value: 22, name: "rose 7"},
{value: 18, name: "rose 8"},
],
},
],
@@ -377,7 +381,8 @@ export default {
margin-right: 24px;
margin-bottom: 20px;
position: relative;
.box-image{
.box-image {
width: 60px;
height: 60px;
// background-size: 100% 100%;
@@ -386,31 +391,40 @@ export default {
// bottom: 0;
// filter: drop-shadow(40px 0px gray);
}
.flex1{
.flex1 {
flex: 1;
margin-left: 5px;
}
}
.box-h1 {
/* margin-top: -14px; */
font-size: 47px;
}
.box-text {
margin-top: 0px;
}
.progress {
border: 3px solid #fff;
margin-top: 5px;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.el-col-lg-4-8 {
width: 20%;
}
</style>

4
jsowell-ui/vue.config.js
View File

@@ -35,9 +35,9 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:8080`,
target: `http://localhost:8080`,
// 更改代理为本地地址
target: `http://192.168.2.3:8080`,
// target: `http://192.168.2.3:8080`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",