autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-07-05 22:47:59 +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

770
jsowell-ui/src/views/homeIndex/homeIndex.vue
View File

@@ -1,416 +1,430 @@
<template> <template>
<el-row :gutter="0" type="flex" style="flex-wrap:wrap">
<div> <div>
<h1>概况</h1> <h1>概况</h1>
<hr /> <hr/>
<div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px"> <el-row >
<el-col :span="4"> <div style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px">
<div class="box" style="background-color: #ffba00;">
<el-image class="box-image"
:src="require('@/assets/images/lightning.png')"
/>
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingDegree}}</b>
<div>总充电电量(度)</div>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="box" style="background-color: #c74542;">
<el-image class="box-image"
:src="require('@/assets/images/zongfeiyong.png')" />
<div class="flex1">
<b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
<div>总充电费用(元)</div>
</div>
</div>
</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: #ffba00;">
<el-image <el-image class="box-image"
class="box-image" :src="require('@/assets/images/lightning.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.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: #909399;"> <div class="box" style="background-color: #c74542;">
<el-image <el-image class="box-image"
class="box-image" :src="require('@/assets/images/zongfeiyong.png')"/>
:src="require('@/assets/images/shebei.png')" /> <div class="flex1">
<div class="flex1"> <b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</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" v-hasRole="['admin', 'common']" style="background-color: #ff4949;"> <div class="box" style="background-color: #12ce65;">
<el-image <el-image
class="box-image" class="box-image"
:src="require('@/assets/images/yue.png')" :src="require('@/assets/images/dingdan.png')"/>
></el-image> <div class="flex1">
<div class="flex1"> <b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b> <div>总充电订单数(笔)</div>
<div>总客户余额(元)</div> </div>
</div> </div>
</div> </el-col>
</el-col>
<!-- <div class="box">--> <el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
<!-- <div>总服务费金额</div>--> <div class="box" style="background-color: #909399;">
<!-- <div class="box-text">--> <el-image
<!-- <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>--> class="box-image"
<!-- <i>元</i>--> :src="require('@/assets/images/shebei.png')"/>
<!-- <el-image--> <div class="flex1">
<!-- class="box-image"--> <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<!-- :src="require('@/assets/images/shebei.png')"--> <div>总充电设备数量(座)</div>
<!-- ></el-image>--> </div>
<!-- </div>--> </div>
<!-- <div class="progress"></div>--> </el-col>
<!-- </div>-->
<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;">
<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>
</div>
</el-col>
<!-- <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>
</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> </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>
</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() {
return { return {
chart: null, chart: null,
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',
}] }]
};
}, //图表实例
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); }, //图表实例
}); created() {
this.getGeneral();
}, },
rose() { mounted() {
this.$nextTick(() => { this.init();
this.chartDom = Echarts.init(this.$refs.chartDom); // this.rose();
let option = { },
legend: { methods: {
top: "bottom", async getGeneral() {
}, const {obj} = await getGeneralSituation({});
toolbox: { console.log("首页信息", obj);
show: true, this.generalSituation = obj;
feature: { },
mark: { show: true }, async getOrder() {
dataView: { show: true, readOnly: false }, const {obj} = await getOrderInfo({});
restore: { show: true }, this.orderInfo = obj;
saveAsImage: { show: true }, console.log("订单信息", this.orderInfo);
}, },
}, async init() {
series: [ await this.getOrder();
{ this.$nextTick(() => {
name: "Nightingale Chart", this.chart = Echarts.init(this.$refs.chart);
type: "pie", console.log("柱状图", this.orderInfo);
radius: [50, 250], let str = this.orderInfo.map((item) => {
center: ["50%", "50%"], return item.date;
roseType: "area", });
itemStyle: { console.log(str);
borderRadius: 8, let option = {
}, tooltip: {
data: [ trigger: "axis",
{ value: 40, name: "rose 1" }, axisPointer: {
{ value: 38, name: "rose 2" }, type: "shadow",
{ value: 32, name: "rose 3" }, },
{ value: 30, name: "rose 4" }, },
{ value: 28, name: "rose 5" }, toolbox: {
{ value: 26, name: "rose 6" }, feature: {
{ value: 22, name: "rose 7" }, dataView: {show: true, readOnly: false},
{ value: 18, name: "rose 8" }, magicType: {show: true, type: ["line", "bar"]},
], restore: {show: true},
}, saveAsImage: {show: true},
], },
}; },
this.chartDom.setOption(option); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
display: flex; display: flex;
height: 100px; height: 100px;
padding: 10px; padding: 10px;
/* font-size: 18px; */ /* font-size: 18px; */
color: #ffffff; color: #ffffff;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 15px 10px -11px black; box-shadow: 0 15px 10px -11px black;
margin-right: 24px; margin-right: 24px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
.box-image{
width: 60px; .box-image {
height: 60px; width: 60px;
// background-size: 100% 100%; height: 60px;
// position: absolute; // background-size: 100% 100%;
// right: 0; // position: absolute;
// bottom: 0; // right: 0;
// filter: drop-shadow(40px 0px gray); // bottom: 0;
} // filter: drop-shadow(40px 0px gray);
.flex1{ }
flex: 1;
margin-left: 5px; .flex1 {
} flex: 1;
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]: "",