mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-04-26 14:05:04 +08:00
commit
This commit is contained in:
389
jsowell-ui/src/views/homeIndex/homeIndex.vue
Normal file
389
jsowell-ui/src/views/homeIndex/homeIndex.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>概况</h1>
|
||||
<hr />
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="7">
|
||||
<div class="box">
|
||||
<p>总充电电量</p>
|
||||
<div class="box-text">
|
||||
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
|
||||
<i>度</i>
|
||||
<el-image
|
||||
style="width: 80px; height: 80px"
|
||||
:src="require('@/assets/images/lightning.png')"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="box">
|
||||
<p>总充电费用</p>
|
||||
<div class="box-text">
|
||||
<b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
|
||||
<i>元</i>
|
||||
<!-- <image src="/assets/images/login-background.jpg"></image> -->
|
||||
<el-image
|
||||
style="width: 80px; height: 80px"
|
||||
:src="require('@/assets/images/zongfeiyong.png')"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="box">
|
||||
<p>总充电订单数</p>
|
||||
<div class="box-text">
|
||||
<b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
|
||||
<i>笔</i>
|
||||
<el-image
|
||||
style="width: 80px; height: 80px"
|
||||
:src="require('@/assets/images/dingdan.png')"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="7">
|
||||
<div class="box">
|
||||
<p>总充电设备数量</p>
|
||||
<div class="box-text">
|
||||
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
|
||||
<i>座</i>
|
||||
<el-image
|
||||
style="width: 80px; height: 80px"
|
||||
:src="require('@/assets/images/shebei.png')"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="box">
|
||||
<p>总客户余额</p>
|
||||
<div class="box-text">
|
||||
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
|
||||
<i>元</i>
|
||||
<el-image
|
||||
style="width: 80px; height: 80px"
|
||||
:src="require('@/assets/images/yue.png')"
|
||||
></el-image>
|
||||
</div>
|
||||
<div class="progress"></div></div
|
||||
></el-col>
|
||||
<el-col :span="7">
|
||||
<div class="box" style="background-color: #ffffff">
|
||||
<p>总充电电量</p>
|
||||
<div class="box-text">
|
||||
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
|
||||
<i>元</i>
|
||||
</div>
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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: [],
|
||||
};
|
||||
}, //图表实例
|
||||
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>
|
||||
.row-bg {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.box {
|
||||
/*height: 100%;*/
|
||||
padding: 16px 22px;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
background-color: #1ab3b3;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 15px 10px -11px #1ab394;
|
||||
}
|
||||
.box-h1 {
|
||||
margin-top: -14px;
|
||||
font-size: 47px;
|
||||
}
|
||||
.box-text {
|
||||
margin-top: -13px;
|
||||
}
|
||||
.progress {
|
||||
border: 3px solid #fff;
|
||||
margin-right: 30%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user