mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-04-20 11:05:18 +08:00
391 lines
11 KiB
Vue
391 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<h1>概况</h1>
|
|
<hr />
|
|
<div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
|
|
<div class="box">
|
|
<el-image class="box-image"
|
|
:src="require('@/assets/images/lightning.png')"
|
|
/>
|
|
<div class="flex1">
|
|
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
|
|
<div>总充电电量(度)</div>
|
|
<div class="progress" />
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<el-image class="box-image"
|
|
:src="require('@/assets/images/zongfeiyong.png')" />
|
|
<div class="flex1">
|
|
<b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
|
|
<div>总充电费用(元)</div>
|
|
<div class="progress" />
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<el-image
|
|
class="box-image"
|
|
:src="require('@/assets/images/dingdan.png')" />
|
|
<div class="flex1">
|
|
<b class="box-h1">{{ generalSituation.totalChargingQuantity}}</b>
|
|
<div>总充电订单数(笔)</div>
|
|
<div class="progress" />
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<el-image
|
|
class="box-image"
|
|
:src="require('@/assets/images/shebei.png')" />
|
|
<div class="flex1">
|
|
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
|
|
<div>总充电设备数量(座)</div>
|
|
<div class="progress" />
|
|
</div>
|
|
</div>
|
|
<div class="box" v-hasRole="['admin', 'common']">
|
|
<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 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>
|
|
<h1>订单</h1>
|
|
<hr />
|
|
<el-button style="background-color: #1ab394; color: #ffffff"
|
|
>最近30天</el-button
|
|
>
|
|
<div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
|
|
<hr />
|
|
<!-- <h1>启动充电渠道</h1> -->
|
|
<!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
|
|
<!-- <hr /> -->
|
|
<!-- <hr /> -->
|
|
<!-- <h1>设备</h1> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Echarts from "echarts";
|
|
import { getGeneralSituation, getOrderInfo } from "@/api/index";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
generalSituation: {},
|
|
orderInfo: [],
|
|
tableData: [{
|
|
pileSn:'9527',
|
|
stationName:'有电充充电桩',
|
|
stationAddress:'昆山市黄埔江南路',
|
|
type:'直流',
|
|
power:'2131',
|
|
degree:'215',
|
|
electricityPrice:'565',
|
|
servicePrice:'9274',
|
|
chargingNumber:'624',
|
|
|
|
}]
|
|
};
|
|
}, //图表实例
|
|
created() {
|
|
this.getGeneral();
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
this.rose();
|
|
},
|
|
methods: {
|
|
async getGeneral() {
|
|
const { obj } = await getGeneralSituation({});
|
|
console.log("首页信息", obj);
|
|
this.generalSituation = obj;
|
|
},
|
|
async getOrder() {
|
|
const { obj } = await getOrderInfo({});
|
|
this.orderInfo = obj;
|
|
console.log("订单信息", this.orderInfo);
|
|
},
|
|
async init() {
|
|
await this.getOrder();
|
|
this.$nextTick(() => {
|
|
this.chart = Echarts.init(this.$refs.chart);
|
|
console.log("柱状图", this.orderInfo);
|
|
let str = this.orderInfo.map((item) => {
|
|
return item.date;
|
|
});
|
|
console.log(str);
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: { show: true, readOnly: false },
|
|
magicType: { show: true, type: ["line", "bar"] },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
legend: {
|
|
data: [
|
|
"总订单金额",
|
|
"尖时段总用电量",
|
|
"峰时段总用电量",
|
|
"平时段总用电量",
|
|
"谷时段总用电量",
|
|
],
|
|
},
|
|
dataZoom: {
|
|
show: false,
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
data: str,
|
|
axisLine: { onZero: false },
|
|
},
|
|
],
|
|
animation: true,
|
|
animationDuration: 2000,
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "电费",
|
|
position: "left",
|
|
alignTicks: true,
|
|
axisLabel: {
|
|
formatter: "{value} ￥",
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
name: "电量",
|
|
position: "right",
|
|
alignTicks: true,
|
|
axisLabel: {
|
|
formatter: "{value} kwh",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "总用电量",
|
|
type: "line",
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalElectricity;
|
|
}),
|
|
symbolSize: 1,
|
|
symbol: "circle",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(252,120,48,0)",
|
|
barBorderRadius: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "总订单金额",
|
|
type: "line",
|
|
yAxisIndex: 0,
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalOrderAmount;
|
|
}),
|
|
},
|
|
{
|
|
name: "尖时段总用电量",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalSharpUsedElectricity;
|
|
}),
|
|
barWidth: "35%", //柱子宽度
|
|
// barGap: 1, //柱子之间间距
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#ff4949",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "峰时段总用电量",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalPeakUsedElectricity;
|
|
}),
|
|
barWidth: "35%",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#ffba00",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "平时段总用电量",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalFlatUsedElectricity;
|
|
}),
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#12ce65",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "谷时段总用电量",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalValleyUsedElectricity;
|
|
}),
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#909399",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
this.chart.setOption(option);
|
|
});
|
|
},
|
|
rose() {
|
|
this.$nextTick(() => {
|
|
this.chartDom = Echarts.init(this.$refs.chartDom);
|
|
let option = {
|
|
legend: {
|
|
top: "bottom",
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "Nightingale Chart",
|
|
type: "pie",
|
|
radius: [50, 250],
|
|
center: ["50%", "50%"],
|
|
roseType: "area",
|
|
itemStyle: {
|
|
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" },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
this.chartDom.setOption(option);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
display: flex;
|
|
height: 100px;
|
|
padding: 10px;
|
|
/* font-size: 18px; */
|
|
color: #ffffff;
|
|
background-color: #1ab3b3;
|
|
border-radius: 8px;
|
|
box-shadow: 0 15px 10px -11px #1ab394;
|
|
margin-right: 24px;
|
|
margin-bottom: 20px;
|
|
.box-image{
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|