525 lines
15 KiB
Vue
525 lines
15 KiB
Vue
<template>
|
||
<div ref="homePage" class="page">
|
||
<!-- <el-button
|
||
type="primary"
|
||
plain
|
||
icon="Plus"
|
||
@click="testsx()">测试失效</el-button> -->
|
||
|
||
<el-row :gutter="20" class="mgb20">
|
||
<el-col v-for="(item, index) in messageList" :key="index" :span="messageList.length -1 == index?4:5">
|
||
<div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||
<div class="grid-message" style="background: #fff;border-radius:15px">
|
||
<el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{ background: item.color }">
|
||
<component :is="item.icon" />
|
||
</el-icon>
|
||
<div class="grid-msg-right">
|
||
<div class="grid-msg-num" :style="{ color: item.color }">
|
||
{{ item.count }}
|
||
</div>
|
||
<div style="font-size: 16px;">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="mgb20">
|
||
<el-col :span="12">
|
||
<div style="width: 100%;height: 200px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<div style="width:31%;height: 92px;border-radius: 10px 0 0 0;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #409eff;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">认证公司</div>
|
||
<div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #409eff;">989</div>
|
||
</div>
|
||
<div style="width:31%;height: 92px;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #67c23a;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">认证用户</div>
|
||
<div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #67c23a;">662</div>
|
||
</div>
|
||
<div style="width:31%;height: 90px;border-radius: 0 10px 0 0;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #e6a23c;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">认证车辆</div>
|
||
<div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #e6a23c;">599</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;width:100%;height: 90px;border-radius: 0 0 10px 10px;margin-top: 18px;justify-content: space-between;">
|
||
<div style="width:31%;height: 90px;border-radius: 0 0 0 10px;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #20b2aa;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩总数量</div>
|
||
<div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #20b2aa;">789</div>
|
||
</div>
|
||
<div style="width:31%;height: 90px;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #b7a948;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩在用数量</div>
|
||
<div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #b7a948;">489</div>
|
||
</div>
|
||
<div style="width:31%;height: 90px;border-radius: 0 0 10px 0;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #83abc3;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩可用数量</div>
|
||
<div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #83abc3;">367</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div style="width: 100%;height: 200px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<div style="width:31%;height: 200px;border-radius: 10px 0 0 10px;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #409eff;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">换电订单数</div>
|
||
<div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #409eff;">89</div>
|
||
</div>
|
||
<div style="width:31%;height: 200px;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #67c23a;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">充电订单数</div>
|
||
<div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #67c23a;">66</div>
|
||
</div>
|
||
<div style="width:31%;height: 200px;border-radius: 0 10px 10px 0;text-align: center;background: #fff;">
|
||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #e6a23c;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">订单金额</div>
|
||
<div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #e6a23c;">599</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" class="mgb20">
|
||
<el-col :span="8">
|
||
<div ref="refChart4" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<div ref="refChart5" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<div ref="refChart6" class="chart-cont2" style="height: 240px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup name="homePage">
|
||
import { nextTick, onMounted, ref } from "vue";
|
||
import * as echarts from "echarts";
|
||
import { onBeforeUnmount } from "vue";
|
||
import { watch } from "vue";
|
||
import { useElementSize } from "@vueuse/core";
|
||
|
||
// import { getToken,removeToken } from '@/utils/auth'
|
||
// import { checktoken } from '@/api/login'
|
||
|
||
//测试登录失效
|
||
// function testsx() {
|
||
// checktoken({
|
||
// token:getToken() as string
|
||
// }).then(rps => {
|
||
// if(rps.code != 1000){
|
||
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
|
||
const messageList = ref([
|
||
{
|
||
type: "mytask",
|
||
name: "运营商",
|
||
count: 0,
|
||
color: "#409EFF",
|
||
icon: "Promotion",
|
||
linkUrl: "/workbench/workflow/task/myProcess",
|
||
},
|
||
{
|
||
type: "todo",
|
||
name: "换电站",
|
||
count: 55,
|
||
color: "#409EFF",
|
||
icon: "Flag",
|
||
linkUrl: "/workbench/workflow/task/todo",
|
||
},
|
||
{
|
||
type: "done",
|
||
name: "电池总量",
|
||
count: 0,
|
||
color: "#67C23A",
|
||
icon: "SuccessFilled",
|
||
linkUrl: "/workbench/workflow/task/done",
|
||
},
|
||
{
|
||
type: "conclude",
|
||
name: "充电电池数量",
|
||
count: 0,
|
||
color: "#67C23A",
|
||
icon: "Checked",
|
||
linkUrl: "/workbench/workflow/task/done",
|
||
},
|
||
{
|
||
type: "message",
|
||
name: "可用电池数量",
|
||
count: 0,
|
||
color: "#E6A23C",
|
||
icon: "BellFilled",
|
||
linkUrl: "#",
|
||
},
|
||
// {
|
||
// type: "warninng",
|
||
// name: "预警信息",
|
||
// count: 0,
|
||
// color: "#F56C6C",
|
||
// icon: "WarningFilled",
|
||
// linkUrl: "#",
|
||
// },
|
||
]);
|
||
|
||
|
||
// 图标4
|
||
const refChart4 = ref();
|
||
let myChart4: echarts.EChartsType;
|
||
const initChart4 = () => {
|
||
if (refChart4.value) {
|
||
//初始化echarts实例
|
||
myChart4 = echarts.init(refChart4.value);
|
||
// 指定图表的配置项和数据
|
||
const option = {
|
||
title: {
|
||
text: "换电站收入占比",
|
||
left: "left",
|
||
textStyle: {
|
||
color: '#2363a5',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
},
|
||
legend: {
|
||
type: "scroll",
|
||
orient: "horizontal",
|
||
left: "center",
|
||
bottom: 0,
|
||
},
|
||
series: [
|
||
{
|
||
name: "数量",
|
||
type: "pie",
|
||
radius: ['40%','70%'],
|
||
data: [
|
||
{ value: 1048, name: "充电订单" },
|
||
{ value: 735, name: "换电订单" },
|
||
{ value: 580, name: "认证" },
|
||
{ value: 484, name: "换电" },
|
||
{ value: 300, name: "充电" },
|
||
],
|
||
padAngle: 2,
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||
},
|
||
},
|
||
itemStyle:{
|
||
borderRadius: 3
|
||
}
|
||
},
|
||
],
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart4.setOption(option);
|
||
}
|
||
};
|
||
|
||
// 图标5
|
||
const refChart5 = ref();
|
||
let myChart5: echarts.EChartsType;
|
||
const initChart5 = () => {
|
||
if (refChart5.value) {
|
||
//初始化echarts实例
|
||
myChart5 = echarts.init(refChart5.value);
|
||
// 指定图表的配置项和数据
|
||
const option = {
|
||
title: {
|
||
text: "换电站信息统计",
|
||
left: "center",
|
||
textStyle: {
|
||
color: '#2363a5',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
crossStyle: {
|
||
color: "#999",
|
||
},
|
||
},
|
||
},
|
||
// toolbox: {
|
||
// feature: {
|
||
// dataView: { title: "数据视图", show: true, readOnly: false },
|
||
// magicType: {
|
||
// title: { line: "折线图", bar: "柱状图" },
|
||
// show: true,
|
||
// type: ["line", "bar"],
|
||
// },
|
||
// restore: { title: "刷新", show: true },
|
||
// saveAsImage: { title: "下载", show: true },
|
||
// },
|
||
// },
|
||
legend: {
|
||
data: [ "换电营收", "换电量"],
|
||
bottom: 0,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "换电营收",
|
||
min: 0,
|
||
max: 250,
|
||
interval: 50,
|
||
axisLabel: {
|
||
formatter: "{value} 元",
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
name: "换电量",
|
||
min: 0,
|
||
max: 25,
|
||
interval: 5,
|
||
axisLabel: {
|
||
formatter: "{value} 度",
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "换电营收",
|
||
type: "bar",
|
||
tooltip: {
|
||
valueFormatter: function (value: string) {
|
||
return value + " ml";
|
||
},
|
||
},
|
||
data: [80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||
},
|
||
{
|
||
name: "换电量",
|
||
type: "bar",
|
||
tooltip: {
|
||
valueFormatter: function (value: string) {
|
||
return value + " ml";
|
||
},
|
||
},
|
||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||
},
|
||
{
|
||
name: "换电营收",
|
||
type: "line",
|
||
tooltip: {
|
||
valueFormatter: function (value: string) {
|
||
return value + " ml";
|
||
},
|
||
},
|
||
data: [5.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||
},
|
||
{
|
||
name: "换电量",
|
||
type: "line",
|
||
tooltip: {
|
||
valueFormatter: function (value: string) {
|
||
return value + " ml";
|
||
},
|
||
},
|
||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||
}
|
||
],
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart5.setOption(option);
|
||
}
|
||
};
|
||
|
||
// 图标6
|
||
const refChart6 = ref()
|
||
let myChart6: echarts.EChartsType
|
||
const initChart6 = () => {
|
||
if (refChart6.value) {
|
||
//初始化echarts实例
|
||
myChart6 = echarts.init(refChart6.value)
|
||
// 指定图表的配置项和数据
|
||
const option = {
|
||
title: {
|
||
text: "换电车辆统计",
|
||
left: "center",
|
||
textStyle: {
|
||
color: '#2363a5',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
crossStyle: {
|
||
color: "#999",
|
||
},
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: ["合肥站", "南京站", "长沙站", "石家庄站", "海口站", "无锡汇聚换电站"],
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value"
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
barWidth:'15%',
|
||
data: [80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4],
|
||
}
|
||
],
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart6.setOption(option);
|
||
}
|
||
};
|
||
|
||
//重新渲染图表
|
||
const resizeChart = () => {
|
||
// 折叠板延迟时间
|
||
setTimeout(() => {
|
||
myChart4?.resize()
|
||
myChart5?.resize()
|
||
myChart6?.resize()
|
||
}, 400);
|
||
};
|
||
|
||
// 监听页面大小变化
|
||
const homePage = ref();
|
||
const { width: pageWidth } = useElementSize(homePage);
|
||
watch(pageWidth, () => {
|
||
resizeChart();
|
||
});
|
||
|
||
|
||
// 初始化渲染
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
initChart4();
|
||
initChart5();
|
||
initChart6();
|
||
window.addEventListener("resize", resizeChart);
|
||
});
|
||
});
|
||
|
||
//销毁
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("resize", resizeChart);
|
||
});
|
||
|
||
// defineExpose无需导入，直接使用
|
||
// defineExpose({ value });
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@message-width: 80px;
|
||
|
||
.page {
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.grid-message {
|
||
display: flex;
|
||
align-items: center;
|
||
height: @message-width;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.grid-msg-right {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.grid-msg-num {
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.grid-msg-icon {
|
||
font-size: 50px;
|
||
width: @message-width;
|
||
height: @message-width;
|
||
text-align: center;
|
||
line-height: @message-width;
|
||
color: #fff;
|
||
}
|
||
|
||
.chart-cont {
|
||
height: 140px;
|
||
|
||
> h1 {
|
||
color: #606266;
|
||
font-weight: normal;
|
||
display: flex;
|
||
font-size: 14px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
> p {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 30px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
> div {
|
||
height: 60px;
|
||
width: 100%;
|
||
|
||
> p {
|
||
margin: 0;
|
||
padding-top: 10px;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-cont2 {
|
||
height: 260px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
</style>
|