mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-04 18:10:10 +08:00
占桩订单
This commit is contained in:
BOOL\25024
@@ -1,77 +1,66 @@
|
||||
<template>
|
||||
|
||||
<div class="app-container">
|
||||
<h1>概况 (自2023-01-01起)</h1>
|
||||
<hr/>
|
||||
<hr />
|
||||
<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">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingDegree}}</div>
|
||||
<div>总充电电量(度)</div>
|
||||
</div>
|
||||
<el-image class="box-image" :src="require('@/assets/images/lightning.png')" />
|
||||
<div class="flex1">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingDegree }}</div>
|
||||
<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">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
|
||||
<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">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
|
||||
<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">
|
||||
<div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
|
||||
<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">-->
|
||||
<!-- <div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>-->
|
||||
<!-- <div>总客户余额(元)</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">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingAmount }}</div>
|
||||
<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">
|
||||
<div class="box-h1">{{ generalSituation.totalChargingQuantity }}</div>
|
||||
<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">
|
||||
<div class="box-h1">{{ generalSituation.totalPileQuantity }}</div>
|
||||
<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">-->
|
||||
<!-- <div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>-->
|
||||
<!-- <div>总客户余额(元)</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
<h1>订单</h1>
|
||||
<hr/>
|
||||
<el-button style="background-color: #1ab394; color: #ffffff"
|
||||
>最近30天
|
||||
</el-button
|
||||
>
|
||||
<hr />
|
||||
<el-button style="background-color: #1ab394; color: #ffffff">最近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>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import Echarts from "echarts";
|
||||
import { barDataView } from "./echarts";
|
||||
import {getGeneralSituation, getOrderInfo} from "@/api/index";
|
||||
import { getGeneralSituation, getOrderInfo } from "@/api/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -102,14 +91,16 @@ 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({});
|
||||
this.orderInfo = obj;
|
||||
console.log("订单信息", this.orderInfo);
|
||||
const { obj, resCode } = await getOrderInfo({});
|
||||
console.log("订单信息", obj, resCode);
|
||||
if (resCode === '00100000') {
|
||||
this.orderInfo = obj;
|
||||
}
|
||||
},
|
||||
async init() {
|
||||
await this.getOrder();
|
||||
@@ -129,10 +120,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: {
|
||||
@@ -160,7 +151,7 @@ export default {
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: str,
|
||||
axisLine: {onZero: false},
|
||||
axisLine: { onZero: false },
|
||||
},
|
||||
],
|
||||
animation: true,
|
||||
@@ -294,7 +285,7 @@ export default {
|
||||
},
|
||||
],
|
||||
};
|
||||
option.toolbox.feature.dataView = barDataView(['时间/日期','总用电量','总订单金额','尖时段总用电量','峰时段总用电量','平时段总用电量','谷时段总用电量'],'电量电费')
|
||||
option.toolbox.feature.dataView = barDataView(['时间/日期', '总用电量', '总订单金额', '尖时段总用电量', '峰时段总用电量', '平时段总用电量', '谷时段总用电量'], '电量电费')
|
||||
this.chart.setOption(option);
|
||||
});
|
||||
},
|
||||
@@ -308,10 +299,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: [
|
||||
@@ -325,14 +316,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" },
|
||||
],
|
||||
},
|
||||
],
|
||||
@@ -361,6 +352,7 @@ export default {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
.box-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -378,10 +370,12 @@ export default {
|
||||
margin-left: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-h1 {
|
||||
/* margin-top: -14px; */
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user