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

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

@@ -35,9 +35,9 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [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, changeOrigin: true,
pathRewrite: { pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "", ["^" + process.env.VUE_APP_BASE_API]: "",