修改
This commit is contained in:
cjb
parent
5c303e6e02
commit
c328df6c52
@ -61,7 +61,6 @@ export function get6jytj(params?:Querydata) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
//同比 环比
|
||||
export function gettbhb(type:number) {
|
||||
return server.request({
|
||||
@ -80,3 +79,60 @@ export function gettbhb(type:number) {
|
||||
// data
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
//新版
|
||||
//平台管理员 - 运营商，换电站，认证公司, 机器人 电池
|
||||
export function ptgetotal() {
|
||||
return server.request({
|
||||
url: '/cloud/home/platform/data1',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 金额 占比, 半年交易情况等
|
||||
export function zbjetotal() {
|
||||
return server.request({
|
||||
url: '/cloud/home/platform/data2',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function givealarm() {
|
||||
return server.request({
|
||||
url: '/cloud/home/alarm/data',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//运营商角色
|
||||
//总数
|
||||
export function yysgetotal() {
|
||||
return server.request({
|
||||
url: '/cloud/home/roxy/data1',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//当月和近半年统计
|
||||
export function dybndata() {
|
||||
return server.request({
|
||||
url: '/cloud/home/roxy/data2',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//运营商站端角色
|
||||
export function zddata() {
|
||||
return server.request({
|
||||
url: '/cloud/home/station/data1',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//企业用户角色
|
||||
export function gongsdata() {
|
||||
return server.request({
|
||||
url: '/cloud/home/company/data',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@ -14,6 +14,9 @@ interface Addobj{
|
||||
moreRemainFee?:String //换电时电量剩余过多的服务费
|
||||
fewRemainSoc?:String //换电时电量剩余一般的soc界定
|
||||
fewRemainFee?:String //换电时电量剩余一般的服务费
|
||||
eachKmFee?:String //每公里收费
|
||||
eachSocFee?:String //每SOC收费
|
||||
eachKwhFee?:String //每度电收费
|
||||
}
|
||||
|
||||
export function addhdz(data:Addobj) {
|
||||
|
||||
692
src/views/components/adminhome.vue
Normal file
692
src/views/components/adminhome.vue
Normal file
@ -0,0 +1,692 @@
|
||||
<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 :span="4">
|
||||
<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:'#409EFF'}">
|
||||
<component is="Promotion" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('/vehicle/operator')">
|
||||
<div class="grid-msg-num" :style="{ color: '#409EFF'}">
|
||||
{{ operatotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">运营商</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--换电站-->
|
||||
<el-col :span="6">
|
||||
<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:'#28b3a1'}">
|
||||
<component is="Flag" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/swapstation/hdz')">
|
||||
<div class="grid-msg-num" :style="{ color: '#28b3a1'}">
|
||||
{{ hdztotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">换电站</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('/swapstation/hdz',{status: 1})">
|
||||
<div class="grid-msg-num" :style="{ color: '#b5a210'}">
|
||||
{{ kyhdz }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">可用换电站</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--电池总量-->
|
||||
<el-col :span="7">
|
||||
<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:'#67C23A'}">
|
||||
<component is="SuccessFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/vehicle/company')">
|
||||
<div class="grid-msg-num" :style="{ color: '#67C23A'}">
|
||||
{{ rzcompany }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">认证公司</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" @click="toRout('/vehicle/wxuser')">
|
||||
<div class="grid-msg-num" :style="{ color: '#bc92c9'}">
|
||||
{{ rzuser }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">认证用户</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('/vehicle/car')">
|
||||
<div class="grid-msg-num" :style="{ color: '#3aaec2'}">
|
||||
{{ rzvehicle }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">认证车辆</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--机器人数量-->
|
||||
<el-col :span="7">
|
||||
<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:'#E6A23C'}">
|
||||
<component is="BellFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('swapstation/robot')">
|
||||
<div class="grid-msg-num" :style="{ color: '#E6A23C'}">
|
||||
{{ robottotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">机器人总数</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('swapstation/robot')">
|
||||
<div class="grid-msg-num" :style="{ color: '#34a312'}">
|
||||
{{ kyrobot }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">可用机器人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <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: 150px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<div style="display: flex;justify-content: space-between;cursor:pointer;">
|
||||
<div style="width:31%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff;" @click="toRout('/swapstation/battery')">
|
||||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #409eff;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">电池总量</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{ dctotal }}</div>
|
||||
</div>
|
||||
<div style="width:31%;height: 150px;text-align: center;background: #fff;" @click="toRout('')">
|
||||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #67c23a;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电电池</div>
|
||||
<div style="height: 55px;line-height: 100px;font-size: 40px;font-weight: bold;color: #67c23a;">{{cddctotal}}</div>
|
||||
</div>
|
||||
<div style="width:31%;height: 150px;border-radius: 0 10px 10px 0;text-align: center;background: #fff;" @click="toRout('/swapstation/battery')">
|
||||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #e6a23c;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">可用电池</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #e6a23c;">{{kydctotal}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div style="width: 100%;height: 150px;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: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<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: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{totalOrder}}</div>
|
||||
</div>
|
||||
<div style="width:31%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #bc92c9;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">待支付订单数</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #bc92c9;">{{dzfOrder}}</div>
|
||||
</div>
|
||||
|
||||
<div style="width:31%;height: 150px;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-bottom: 3px solid #ebf5ff;border-radius: 20px 20px 0 0;">收入金额{{totalmoney > 10000000?'（万元）':'（元）'}}</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #e6a23c;">
|
||||
{{ totalmoney }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="9">
|
||||
<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="15">
|
||||
<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 style="width: 100%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<el-table
|
||||
:data="alarmlist"
|
||||
border
|
||||
stripe
|
||||
height="260px"
|
||||
>
|
||||
<el-table-column label="站点名称" min-width="200" align="center" prop="stationName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="报警类型" min-width="200" align="center" prop="alarmType" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="报警时间" min-width="200" align="center" prop="alarmTime" :show-overflow-tooltip="true" />
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="homePage">
|
||||
import {
|
||||
nextTick,
|
||||
onMounted,
|
||||
ref,
|
||||
onBeforeUnmount,
|
||||
watch
|
||||
} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import * as echarts from "echarts"
|
||||
import { useElementSize } from "@vueuse/core"
|
||||
import {
|
||||
ptgetotal,
|
||||
zbjetotal,
|
||||
givealarm
|
||||
} from '@/api/home'
|
||||
|
||||
function glnum(n:any){
|
||||
if(n>10000000){
|
||||
return Math.round((n/1000000)*100)/100
|
||||
}
|
||||
return n/100
|
||||
}
|
||||
|
||||
|
||||
let router = useRouter()
|
||||
function toRout(path:string,query:Record<string, any> = {}) {
|
||||
router.push({
|
||||
path,
|
||||
query
|
||||
})
|
||||
}
|
||||
|
||||
//运营商总数
|
||||
let operatotal = ref('')
|
||||
//换电站总数
|
||||
let hdztotal = ref('')
|
||||
//可用换电站
|
||||
let kyhdz = ref('')
|
||||
|
||||
//电池总量
|
||||
let dctotal = ref('')
|
||||
//充电电池
|
||||
let cddctotal = ref('')
|
||||
//可用电池
|
||||
let kydctotal = ref('')
|
||||
|
||||
//机器人总数
|
||||
let robottotal = ref('')
|
||||
//可用机器人
|
||||
let kyrobot = ref('')
|
||||
|
||||
//认证公司
|
||||
let rzcompany = ref('')
|
||||
//认证用户
|
||||
let rzuser = ref('')
|
||||
//认证车辆
|
||||
let rzvehicle = ref('')
|
||||
|
||||
//同比
|
||||
let tbList = ref<any>([])
|
||||
|
||||
//查询运营商 换电站 电池 机器人
|
||||
ptgetotal().then(rps => {
|
||||
operatotal.value = (rps.data as any).proxyNum
|
||||
hdztotal.value = (rps.data as any).totalStation
|
||||
kyhdz.value = (rps.data as any).workStation
|
||||
dctotal.value = (rps.data as any).totalDC
|
||||
cddctotal.value = (rps.data as any).chargeDC
|
||||
kydctotal.value = (rps.data as any).availableDC
|
||||
robottotal.value = (rps.data as any).totalRobot
|
||||
kyrobot.value = (rps.data as any).availableRobot
|
||||
|
||||
rzcompany.value = (rps.data as any).totalCompanyNum
|
||||
rzuser.value = (rps.data as any).totalUserNum
|
||||
rzvehicle.value = (rps.data as any).totalCarNum
|
||||
|
||||
})
|
||||
|
||||
//告警信息
|
||||
let alarmlist = ref<any>([])
|
||||
givealarm().then((rps:any) => {
|
||||
if(rps.data && rps.data.length > 0){
|
||||
alarmlist.value = rps.data
|
||||
}
|
||||
})
|
||||
|
||||
//查询 公司 用户 车辆
|
||||
// getgyctotal().then(rps => {
|
||||
// rzcompany.value = (rps.data as any).conpany
|
||||
// rzuser.value = (rps.data as any).totalUser
|
||||
// rzvehicle.value = (rps.data as any).totalCar
|
||||
// })
|
||||
|
||||
|
||||
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: 'center',
|
||||
textStyle: {
|
||||
color: '#2363a5',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// top:'20%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true
|
||||
// },
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}({d}%)' // 使用 formatter 来格式化标签，其中 {b} 是名称，{d} 是百分比，{@2019} 是对应年份的数据值（如果需要的话）
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
// legend: {
|
||||
// type: "scroll",
|
||||
// orient: "horizontal",
|
||||
// left: "center",
|
||||
// bottom: 0,
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "pie",
|
||||
top:'10%',
|
||||
radius: ['40%','70%'],
|
||||
data: bzdata.value,
|
||||
padAngle: 2,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
paddingTop:'20px',
|
||||
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%',
|
||||
top:'25%',
|
||||
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: [ "订单", "金额"],
|
||||
top:25
|
||||
//bottom: 0,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data:xdata.value, //["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "订单",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "金额",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value} 元",
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "订单",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value: string) {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
data:yOrder.value, //[80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
yAxisIndex:0
|
||||
},
|
||||
{
|
||||
name: "金额",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value: string) {
|
||||
return value + " 元";
|
||||
},
|
||||
},
|
||||
data:yMoney.value, //[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
yAxisIndex:1
|
||||
},
|
||||
// {
|
||||
// name: "金额",
|
||||
// type: "line",
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value: string) {
|
||||
// return value + " 元";
|
||||
// },
|
||||
// },
|
||||
// data:yMoney.value //[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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
//重新渲染图表
|
||||
const resizeChart = () => {
|
||||
// 折叠板延迟时间
|
||||
setTimeout(() => {
|
||||
myChart4?.resize()
|
||||
myChart5?.resize()
|
||||
//myChart6?.resize()
|
||||
}, 400);
|
||||
};
|
||||
|
||||
// 监听页面大小变化
|
||||
const homePage = ref();
|
||||
const { width: pageWidth } = useElementSize(homePage);
|
||||
watch(pageWidth, () => {
|
||||
resizeChart();
|
||||
});
|
||||
|
||||
//订单总数
|
||||
let totalOrder = ref('')
|
||||
let dzfOrder = ref('')
|
||||
|
||||
//收入金额
|
||||
let jyamount = ref<any>('')
|
||||
let totalmoney = ref<any>('')
|
||||
//支出金额
|
||||
let zcamount = ref<any>('')
|
||||
let totalRefund = ref<any>('')
|
||||
//换电站订单占比统计
|
||||
let bzdata = ref<any>([])
|
||||
|
||||
//6个月订单统计
|
||||
let xdata = ref<any>([])
|
||||
let yMoney = ref<any>([])
|
||||
let yOrder = ref<any>([])
|
||||
|
||||
// 初始化渲染
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
|
||||
zbjetotal().then(rps => {
|
||||
totalOrder.value = (rps.data as any).totalOrderNum //订单总数
|
||||
totalmoney.value = (rps.data as any).totalFinishAmount //完成金额(总金额)
|
||||
totalmoney.value = glnum(totalmoney.value)
|
||||
dzfOrder.value = (rps.data as any).totalPendingOrderNum
|
||||
|
||||
bzdata.value = (rps.data as any).countList.map((n:any) => {
|
||||
return {
|
||||
name:n.proxyName,
|
||||
value:n.quantity
|
||||
}
|
||||
})
|
||||
|
||||
initChart4()
|
||||
|
||||
xdata.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.month
|
||||
})
|
||||
|
||||
yOrder.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.quantity
|
||||
})
|
||||
|
||||
yMoney.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.totalMoney/100
|
||||
})
|
||||
|
||||
initChart5()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
//销毁
|
||||
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;
|
||||
border-right:1px solid #ccc;
|
||||
}
|
||||
|
||||
.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>
|
||||
251
src/views/components/gshome.vue
Normal file
251
src/views/components/gshome.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div ref="homePage" class="page">
|
||||
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<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:'#67C23A'}">
|
||||
<component is="SuccessFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/vehicle/car')">
|
||||
<div class="grid-msg-num" :style="{ color: '#67C23A'}">
|
||||
{{ cltotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">车辆总数</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<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:'#E6A23C'}">
|
||||
<component is="BellFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/vehicle/wxuser')">
|
||||
<div class="grid-msg-num" :style="{ color: '#E6A23C'}">
|
||||
{{ ygtotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">员工总数</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<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:'#E6A23C'}">
|
||||
<component is="BellFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/order/replabatt')">
|
||||
<div class="grid-msg-num" :style="{ color: '#E6A23C'}">
|
||||
{{ djstotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">待支付订单</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<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:'#E6A23C'}">
|
||||
<component is="BellFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right">
|
||||
<div class="grid-msg-num" :style="{ color: '#E6A23C'}">
|
||||
{{ djsjetotal/100 }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">待支付金额</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
<el-row >
|
||||
<el-col :span="24">
|
||||
<div style="width: 100%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<el-table
|
||||
:data="list"
|
||||
border
|
||||
stripe
|
||||
height="700px"
|
||||
>
|
||||
<el-table-column label="换电时间" min-width="200" align="center" prop="swapTime" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="换电车辆" min-width="200" align="center" prop="swapCar" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="换电人" min-width="200" align="center" prop="swapUserName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="换电金额(元)" min-width="200" align="center" prop="swapAmount" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<div>{{scope.row.swapAmount/100}}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="homePage">
|
||||
import {
|
||||
ref,
|
||||
} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import {
|
||||
|
||||
gongsdata
|
||||
} from '@/api/home'
|
||||
|
||||
|
||||
let cltotal = ref<any>('')
|
||||
let ygtotal = ref<any>('')
|
||||
let djstotal = ref<any>('')
|
||||
let djsjetotal = ref<any>('')
|
||||
|
||||
let list = ref<any>([])
|
||||
|
||||
gongsdata().then((rps:any) => {
|
||||
cltotal.value = rps.data.carNum //车辆
|
||||
ygtotal.value = rps.data.userNum //员工
|
||||
|
||||
djsjetotal.value = rps.data.pendingOrderAmount //待支付金额
|
||||
djstotal.value = rps.data.pendingOrderNum //待支付订单
|
||||
|
||||
if(rps.data.orderList && rps.data.orderList.length > 0){
|
||||
list.value = rps.data.orderList
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function glnum(n:any){
|
||||
if(n>10000000){
|
||||
return Math.round((n/1000000)*100)/100
|
||||
}
|
||||
return n/100
|
||||
}
|
||||
|
||||
|
||||
let router = useRouter()
|
||||
function toRout(path:string,query:Record<string, any> = {}) {
|
||||
router.push({
|
||||
path,
|
||||
query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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;
|
||||
border-right:1px solid #ccc;
|
||||
}
|
||||
|
||||
.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>
|
||||
587
src/views/components/operatorhome.vue
Normal file
587
src/views/components/operatorhome.vue
Normal file
@ -0,0 +1,587 @@
|
||||
<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 :span="6">
|
||||
<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:'#28b3a1'}">
|
||||
<component is="Flag" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/swapstation/hdz')">
|
||||
<div class="grid-msg-num" :style="{ color: '#28b3a1'}">
|
||||
{{ hdztotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">换电站</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('/swapstation/hdz',{status: 1})">
|
||||
<div class="grid-msg-num" :style="{ color: '#b5a210'}">
|
||||
{{ kyhdz }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">可用换电站</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--电池总量-->
|
||||
<el-col :span="12">
|
||||
<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:'#67C23A'}">
|
||||
<component is="SuccessFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/swapstation/battery')">
|
||||
<div class="grid-msg-num" :style="{ color: '#67C23A'}">
|
||||
{{ dctotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">电池总量</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" @click="toRout('')">
|
||||
<div class="grid-msg-num" :style="{ color: '#bc92c9'}">
|
||||
{{ dctotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">充电电池</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('/swapstation/battery')">
|
||||
<div class="grid-msg-num" :style="{ color: '#3aaec2'}">
|
||||
{{ kydctotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">可用电池</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--机器人数量-->
|
||||
<el-col :span="6">
|
||||
<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:'#E6A23C'}">
|
||||
<component is="BellFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('swapstation/robot')">
|
||||
<div class="grid-msg-num" :style="{ color: '#E6A23C'}">
|
||||
{{ robottotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">机器人总数</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('swapstation/robot')">
|
||||
<div class="grid-msg-num" :style="{ color: '#34a312'}">
|
||||
{{ kyrobot }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">可用机器人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="24">
|
||||
<div style="display: flex;justify-content: space-between;width: 100%;height: 150px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<div style="width:22%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<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: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{totalOrder}}</div>
|
||||
</div>
|
||||
<div style="width:22%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<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;">当月换电总收入{{totalmoney > 10000000?'（万元）':'（元）'}}</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{totalmoney}}</div>
|
||||
</div>
|
||||
<div style="width:22%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #bc92c9;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">当月待支付订单数</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #bc92c9;">{{dzfOrder}}</div>
|
||||
</div>
|
||||
<div style="width:22%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #bc92c9;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">当月待支付订金额{{djsamount > 10000000?'（万元）':'（元）'}}</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #bc92c9;">{{djsamount}}</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="9">
|
||||
<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="15">
|
||||
<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 style="width: 100%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<el-table
|
||||
:data="alarmlist"
|
||||
border
|
||||
stripe
|
||||
height="260px"
|
||||
>
|
||||
<el-table-column label="站点名称" min-width="200" align="center" prop="stationName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="报警类型" min-width="200" align="center" prop="alarmType" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="报警时间" min-width="200" align="center" prop="alarmTime" :show-overflow-tooltip="true" />
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="homePage">
|
||||
import {
|
||||
nextTick,
|
||||
onMounted,
|
||||
ref,
|
||||
onBeforeUnmount,
|
||||
watch
|
||||
} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import * as echarts from "echarts"
|
||||
import { useElementSize } from "@vueuse/core"
|
||||
import {
|
||||
givealarm,
|
||||
yysgetotal,
|
||||
dybndata
|
||||
|
||||
} from '@/api/home'
|
||||
|
||||
|
||||
function glnum(n:any){
|
||||
if(n>10000000){
|
||||
return Math.round((n/1000000)*100)/100
|
||||
}
|
||||
return n/100
|
||||
}
|
||||
|
||||
|
||||
let router = useRouter()
|
||||
function toRout(path:string,query:Record<string, any> = {}) {
|
||||
router.push({
|
||||
path,
|
||||
query
|
||||
})
|
||||
}
|
||||
|
||||
//运营商总数
|
||||
let operatotal = ref('')
|
||||
//换电站总数
|
||||
let hdztotal = ref('')
|
||||
//可用换电站
|
||||
let kyhdz = ref('')
|
||||
|
||||
//电池总量
|
||||
let dctotal = ref('')
|
||||
//充电电池
|
||||
let cddctotal = ref('')
|
||||
//可用电池
|
||||
let kydctotal = ref('')
|
||||
|
||||
//机器人总数
|
||||
let robottotal = ref('')
|
||||
//可用机器人
|
||||
let kyrobot = ref('')
|
||||
|
||||
//认证公司
|
||||
|
||||
//查询运营商 换电站 电池 机器人
|
||||
yysgetotal().then(rps => {
|
||||
operatotal.value = (rps.data as any).proxyNum
|
||||
hdztotal.value = (rps.data as any).totalStation
|
||||
kyhdz.value = (rps.data as any).workStation
|
||||
dctotal.value = (rps.data as any).totalDC
|
||||
cddctotal.value = (rps.data as any).chargeDC
|
||||
kydctotal.value = (rps.data as any).availableDC
|
||||
robottotal.value = (rps.data as any).totalRobot
|
||||
kyrobot.value = (rps.data as any).availableRobot
|
||||
})
|
||||
|
||||
//告警信息
|
||||
let alarmlist = ref<any>([])
|
||||
givealarm().then((rps:any) => {
|
||||
if(rps.data && rps.data.length > 0){
|
||||
alarmlist.value = rps.data
|
||||
}
|
||||
})
|
||||
|
||||
//查询 公司 用户 车辆
|
||||
// getgyctotal().then(rps => {
|
||||
// rzcompany.value = (rps.data as any).conpany
|
||||
// rzuser.value = (rps.data as any).totalUser
|
||||
// rzvehicle.value = (rps.data as any).totalCar
|
||||
// })
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 图标4
|
||||
const refChart4 = ref();
|
||||
let myChart4: echarts.EChartsType;
|
||||
const initChart4 = () => {
|
||||
if (refChart4.value) {
|
||||
//初始化echarts实例
|
||||
myChart4 = echarts.init(refChart4.value);
|
||||
// 指定图表的配置项和数据
|
||||
const option = {
|
||||
title: {
|
||||
text: '运营商订单占比',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#2363a5',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// top:'20%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true
|
||||
// },
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}({d}%)' // 使用 formatter 来格式化标签，其中 {b} 是名称，{d} 是百分比，{@2019} 是对应年份的数据值（如果需要的话）
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
// legend: {
|
||||
// type: "scroll",
|
||||
// orient: "horizontal",
|
||||
// left: "center",
|
||||
// bottom: 0,
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "pie",
|
||||
top:'10%',
|
||||
radius: ['40%','70%'],
|
||||
data: bzdata.value,
|
||||
padAngle: 2,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
paddingTop:'20px',
|
||||
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%',
|
||||
top:'25%',
|
||||
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: [ "订单", "金额"],
|
||||
top:25
|
||||
//bottom: 0,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data:xdata.value, //["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "订单",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "金额",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value} 元",
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "订单",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value: string) {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
data:yOrder.value, //[80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
yAxisIndex:0
|
||||
},
|
||||
{
|
||||
name: "金额",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value: string) {
|
||||
return value + " 元";
|
||||
},
|
||||
},
|
||||
data:yMoney.value, //[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
yAxisIndex:1
|
||||
},
|
||||
// {
|
||||
// name: "金额",
|
||||
// type: "line",
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value: string) {
|
||||
// return value + " 元";
|
||||
// },
|
||||
// },
|
||||
// data:yMoney.value //[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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
//重新渲染图表
|
||||
const resizeChart = () => {
|
||||
// 折叠板延迟时间
|
||||
setTimeout(() => {
|
||||
myChart4?.resize()
|
||||
myChart5?.resize()
|
||||
//myChart6?.resize()
|
||||
}, 400);
|
||||
};
|
||||
|
||||
// 监听页面大小变化
|
||||
const homePage = ref();
|
||||
const { width: pageWidth } = useElementSize(homePage);
|
||||
watch(pageWidth, () => {
|
||||
resizeChart();
|
||||
});
|
||||
|
||||
//订单总数
|
||||
let totalOrder = ref('')
|
||||
//待支付
|
||||
let dzfOrder = ref('')
|
||||
|
||||
//收入金额
|
||||
let totalmoney = ref<any>('')
|
||||
|
||||
//
|
||||
let djsamount = ref<any>('')
|
||||
//换电站订单占比统计
|
||||
let bzdata = ref<any>([])
|
||||
|
||||
//6个月订单统计
|
||||
let xdata = ref<any>([])
|
||||
let yMoney = ref<any>([])
|
||||
let yOrder = ref<any>([])
|
||||
|
||||
// 初始化渲染
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
|
||||
dybndata().then(rps => {
|
||||
totalOrder.value = (rps.data as any).currentTotalOrderNum //当月订单总数
|
||||
totalmoney.value = (rps.data as any).currentTotalFinishAmount //当月完成金额(总金额)
|
||||
totalmoney.value = glnum(totalmoney.value)
|
||||
dzfOrder.value = (rps.data as any).currentTotalPendingOrderNum //当月待结算订单
|
||||
djsamount.value = (rps.data as any).currentTotalPendingOrderAmount
|
||||
djsamount.value = glnum(djsamount.value)
|
||||
|
||||
bzdata.value = (rps.data as any).countList.map((n:any) => {
|
||||
return {
|
||||
name:n.stationName,
|
||||
value:n.quantity
|
||||
}
|
||||
})
|
||||
|
||||
initChart4()
|
||||
|
||||
xdata.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.month
|
||||
})
|
||||
|
||||
yOrder.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.quantity
|
||||
})
|
||||
|
||||
yMoney.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.totalMoney/100
|
||||
})
|
||||
|
||||
initChart5()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
//销毁
|
||||
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;
|
||||
border-right:1px solid #ccc;
|
||||
}
|
||||
|
||||
.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>
|
||||
530
src/views/components/zdhome.vue
Normal file
530
src/views/components/zdhome.vue
Normal file
@ -0,0 +1,530 @@
|
||||
<template>
|
||||
<div ref="homePage" class="page">
|
||||
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
|
||||
|
||||
<!--电池总量-->
|
||||
<el-col :span="12">
|
||||
<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:'#67C23A'}">
|
||||
<component is="SuccessFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('/swapstation/battery')">
|
||||
<div class="grid-msg-num" :style="{ color: '#67C23A'}">
|
||||
{{ dctotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">电池总量</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" @click="toRout('')">
|
||||
<div class="grid-msg-num" :style="{ color: '#bc92c9'}">
|
||||
{{ dctotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">充电电池</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('/swapstation/battery')">
|
||||
<div class="grid-msg-num" :style="{ color: '#3aaec2'}">
|
||||
{{ kydctotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">可用电池</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--机器人数量-->
|
||||
<el-col :span="12">
|
||||
<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:'#E6A23C'}">
|
||||
<component is="BellFilled" />
|
||||
</el-icon>
|
||||
<div class="grid-msg-right" @click="toRout('swapstation/robot')">
|
||||
<div class="grid-msg-num" :style="{ color: '#E6A23C'}">
|
||||
{{ robottotal }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">机器人总数</div>
|
||||
</div>
|
||||
<div class="grid-msg-right" style="border: none;" @click="toRout('swapstation/robot')">
|
||||
<div class="grid-msg-num" :style="{ color: '#34a312'}">
|
||||
{{ kyrobot }}
|
||||
</div>
|
||||
<div style="font-size: 16px;">可用机器人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="24">
|
||||
<div style="display: flex;justify-content: space-between;width: 100%;height: 150px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<div style="width:32%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<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: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{totalOrder}}</div>
|
||||
</div>
|
||||
<div style="width:32%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #68b564;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">已结算换电订单</div>
|
||||
<div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #68b564;">{{yjstotal}}</div>
|
||||
</div>
|
||||
<div style="width:32%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
|
||||
<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: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{daijstotal}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="24">
|
||||
<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 style="width: 100%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<el-table
|
||||
:data="alarmlist"
|
||||
border
|
||||
stripe
|
||||
height="260px"
|
||||
>
|
||||
<el-table-column label="站点名称" min-width="200" align="center" prop="stationName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="报警类型" min-width="200" align="center" prop="alarmType" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="报警时间" min-width="200" align="center" prop="alarmTime" :show-overflow-tooltip="true" />
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="homePage">
|
||||
import {
|
||||
nextTick,
|
||||
onMounted,
|
||||
ref,
|
||||
onBeforeUnmount,
|
||||
watch
|
||||
} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import * as echarts from "echarts"
|
||||
import { useElementSize } from "@vueuse/core"
|
||||
import {
|
||||
givealarm,
|
||||
zddata
|
||||
} from '@/api/home'
|
||||
|
||||
|
||||
function glnum(n:any){
|
||||
if(n>10000000){
|
||||
return Math.round((n/1000000)*100)/100
|
||||
}
|
||||
return n/100
|
||||
}
|
||||
|
||||
|
||||
let router = useRouter()
|
||||
function toRout(path:string,query:Record<string, any> = {}) {
|
||||
router.push({
|
||||
path,
|
||||
query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//电池总量
|
||||
let dctotal = ref('')
|
||||
//充电电池
|
||||
let cddctotal = ref('')
|
||||
//可用电池
|
||||
let kydctotal = ref('')
|
||||
|
||||
//机器人总数
|
||||
let robottotal = ref('')
|
||||
//可用机器人
|
||||
let kyrobot = ref('')
|
||||
|
||||
//认证公司
|
||||
|
||||
|
||||
//告警信息
|
||||
let alarmlist = ref<any>([])
|
||||
givealarm().then((rps:any) => {
|
||||
if(rps.data && rps.data.length > 0){
|
||||
alarmlist.value = rps.data
|
||||
}
|
||||
})
|
||||
|
||||
//查询 公司 用户 车辆
|
||||
// getgyctotal().then(rps => {
|
||||
// rzcompany.value = (rps.data as any).conpany
|
||||
// rzuser.value = (rps.data as any).totalUser
|
||||
// rzvehicle.value = (rps.data as any).totalCar
|
||||
// })
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 图标4
|
||||
const refChart4 = ref();
|
||||
let myChart4: echarts.EChartsType;
|
||||
const initChart4 = () => {
|
||||
if (refChart4.value) {
|
||||
//初始化echarts实例
|
||||
myChart4 = echarts.init(refChart4.value);
|
||||
// 指定图表的配置项和数据
|
||||
const option = {
|
||||
title: {
|
||||
text: '运营商订单占比',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#2363a5',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// top:'20%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true
|
||||
// },
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}({d}%)' // 使用 formatter 来格式化标签，其中 {b} 是名称，{d} 是百分比，{@2019} 是对应年份的数据值（如果需要的话）
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
// legend: {
|
||||
// type: "scroll",
|
||||
// orient: "horizontal",
|
||||
// left: "center",
|
||||
// bottom: 0,
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "pie",
|
||||
top:'10%',
|
||||
radius: ['40%','70%'],
|
||||
data: bzdata.value,
|
||||
padAngle: 2,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
paddingTop:'20px',
|
||||
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%',
|
||||
top:'25%',
|
||||
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: [ "订单", "金额"],
|
||||
top:25
|
||||
//bottom: 0,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data:xdata.value, //["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "订单",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "金额",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value} 元",
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "订单",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value: string) {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
data:yOrder.value, //[80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
yAxisIndex:0
|
||||
},
|
||||
{
|
||||
name: "金额",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value: string) {
|
||||
return value + " 元";
|
||||
},
|
||||
},
|
||||
data:yMoney.value, //[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
yAxisIndex:1
|
||||
},
|
||||
// {
|
||||
// name: "金额",
|
||||
// type: "line",
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value: string) {
|
||||
// return value + " 元";
|
||||
// },
|
||||
// },
|
||||
// data:yMoney.value //[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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
//重新渲染图表
|
||||
const resizeChart = () => {
|
||||
// 折叠板延迟时间
|
||||
setTimeout(() => {
|
||||
myChart4?.resize()
|
||||
myChart5?.resize()
|
||||
//myChart6?.resize()
|
||||
}, 400);
|
||||
};
|
||||
|
||||
// 监听页面大小变化
|
||||
const homePage = ref();
|
||||
const { width: pageWidth } = useElementSize(homePage);
|
||||
watch(pageWidth, () => {
|
||||
resizeChart();
|
||||
});
|
||||
|
||||
//订单总数
|
||||
let totalOrder = ref('')
|
||||
//待支付
|
||||
let dzfOrder = ref('')
|
||||
|
||||
//收入金额
|
||||
let totalmoney = ref<any>('')
|
||||
|
||||
let yjstotal = ref<any>('')
|
||||
let daijstotal = ref<any>('')
|
||||
|
||||
//
|
||||
let djsamount = ref<any>('')
|
||||
//换电站订单占比统计
|
||||
let bzdata = ref<any>([])
|
||||
|
||||
//6个月订单统计
|
||||
let xdata = ref<any>([])
|
||||
let yMoney = ref<any>([])
|
||||
let yOrder = ref<any>([])
|
||||
|
||||
// 初始化渲染
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
|
||||
//查询运营商 换电站 电池 机器人
|
||||
zddata().then(rps => {
|
||||
dctotal.value = (rps.data as any).totalDC
|
||||
cddctotal.value = (rps.data as any).chargeDC
|
||||
kydctotal.value = (rps.data as any).availableDC
|
||||
robottotal.value = (rps.data as any).totalRobot
|
||||
kyrobot.value = (rps.data as any).availableRobot
|
||||
|
||||
totalOrder.value = (rps.data as any).totalOrderNum //总订单数
|
||||
yjstotal.value = (rps.data as any).totalFinishOrderNum //已结算订单数
|
||||
daijstotal.value = (rps.data as any).totalPendingOrderNum //待结算订单数
|
||||
|
||||
xdata.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.month
|
||||
})
|
||||
|
||||
yOrder.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.quantity
|
||||
})
|
||||
|
||||
yMoney.value = (rps.data as any).trendList.map((n:any) => {
|
||||
return n.totalMoney/100
|
||||
})
|
||||
|
||||
initChart5()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
//销毁
|
||||
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;
|
||||
border-right:1px solid #ccc;
|
||||
}
|
||||
|
||||
.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>
|
||||
1149
src/views/index.vue
1149
src/views/index.vue
File diff suppressed because it is too large
Load Diff
1138
src/views/index1.vue
Normal file
1138
src/views/index1.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -302,7 +302,7 @@
|
||||
|
||||
function gethdzname(n:string) {
|
||||
addata.stationName = n
|
||||
}
|
||||
}
|
||||
|
||||
function showpop(num:any,row?:any){
|
||||
type.value = num
|
||||
|
||||
@ -97,7 +97,8 @@
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: [v?:boolean]
|
||||
cancel: [v?:boolean],
|
||||
update:[]
|
||||
}>()
|
||||
|
||||
let showpop = ref(props.show)
|
||||
@ -179,7 +180,8 @@
|
||||
message: '分配成功'
|
||||
})
|
||||
setTimeout(() => {
|
||||
cancel()
|
||||
showpop.value = false
|
||||
emit('update')
|
||||
},2000)
|
||||
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user