mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-15 23:38:32 +08:00
505 lines
14 KiB
Vue
505 lines
14 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<h1>概况 (自2023-01-01起)</h1>
|
|
<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>
|
|
</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>
|
|
<h1>订单</h1>
|
|
<hr />
|
|
<el-form :model="queryParams" ref="queryForm" size="small" inline label-width="68px">
|
|
<el-form-item label="筛选日期" prop="tradeDate">
|
|
<el-date-picker
|
|
v-model="createTimeRange"
|
|
style="width: 240px"
|
|
value-format="yyyy-MM-dd"
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:clearable="false"
|
|
@change="init"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- <el-button style="background-color: #1ab394; color: #ffffff">最近30天 </el-button> -->
|
|
<div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
|
|
<hr />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Echarts from "echarts";
|
|
import { barDataView } 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",
|
|
},
|
|
],
|
|
createTimeRange: [],
|
|
queryParams: {},
|
|
};
|
|
}, //图表实例
|
|
created() {
|
|
this.getGeneral();
|
|
},
|
|
mounted() {
|
|
this.setDefaultDateRange();
|
|
// this.rose();
|
|
},
|
|
methods: {
|
|
async getGeneral() {
|
|
const { obj } = await getGeneralSituation({});
|
|
console.log("首页信息", obj);
|
|
this.generalSituation = obj;
|
|
},
|
|
async getOrder() {
|
|
const { obj, resCode } = await getOrderInfo({
|
|
startTime: `${this.createTimeRange[0]} 00:00:00`,
|
|
endTime: `${this.createTimeRange[1]} 23:59:59`,
|
|
});
|
|
console.log("订单信息", obj, resCode);
|
|
if (resCode === "00100000") {
|
|
this.orderInfo = obj;
|
|
}
|
|
},
|
|
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, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "尖时段总金额",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalSharpAmount;
|
|
}),
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
// color: "#909399",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "峰时段总金额",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalPeakAmount;
|
|
}),
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
// color: "#909399",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "平时段总金额",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalFlatAmount;
|
|
}),
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
// color: "#909399",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "谷时段总金额",
|
|
type: "bar",
|
|
yAxisIndex: 1,
|
|
stack: "one",
|
|
data: this.orderInfo.map((item) => {
|
|
return item.totalValleyAmount;
|
|
}),
|
|
emphasis: {
|
|
focus: "series",
|
|
blurScope: "coordinateSystem",
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
// color: "#909399",
|
|
opacity: 1,
|
|
barBorderRadius: 1, //柱子菱角
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
option.toolbox.feature.dataView = barDataView(
|
|
[
|
|
"时间/日期",
|
|
"总用电量",
|
|
"总订单金额",
|
|
"尖时段总用电量",
|
|
"峰时段总用电量",
|
|
"平时段总用电量",
|
|
"谷时段总用电量",
|
|
"尖时段总金额",
|
|
"峰时段总金额",
|
|
"平时段总金额",
|
|
"谷时段总金额",
|
|
],
|
|
"电量电费"
|
|
);
|
|
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);
|
|
});
|
|
},
|
|
setDefaultDateRange() {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); // 计算30天前的日期
|
|
this.createTimeRange = [this.formatDateTime(start), this.formatDateTime(end)];
|
|
this.init();
|
|
},
|
|
formatDateTime(date) {
|
|
const y = date.getFullYear();
|
|
let m = date.getMonth() + 1;
|
|
m = m < 10 ? "0" + m : m;
|
|
let d = date.getDate();
|
|
d = d < 10 ? "0" + d : d;
|
|
let h = date.getHours();
|
|
return `${y}-${m}-${d}`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// .app-container{
|
|
// overflow: scroll;
|
|
// }
|
|
.box {
|
|
position: relative;
|
|
width: 15rem;
|
|
display: flex;
|
|
height: 6.25rem;
|
|
padding: 0.8rem;
|
|
/* font-size: 18px; */
|
|
color: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 15px 0.8rem -11px black;
|
|
margin-right: 24px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
|
|
.box-image {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 3.75rem;
|
|
height: 3.75rem;
|
|
// background-size: 100% 100%;
|
|
// position: absolute;
|
|
// right: 0;
|
|
// bottom: 0;
|
|
// filter: drop-shadow(40px 0px gray);
|
|
}
|
|
|
|
.flex1 {
|
|
flex: 1;
|
|
margin-left: 48px;
|
|
}
|
|
}
|
|
|
|
.box-h1 {
|
|
/* margin-top: -14px; */
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.box-text {
|
|
margin-top: 0px;
|
|
}
|
|
</style>
|