修改
This commit is contained in:
cjb
parent
5c303e6e02
commit
c328df6c52
@ -61,7 +61,6 @@ export function get6jytj(params?:Querydata) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//同比 环比
|
//同比 环比
|
||||||
export function gettbhb(type:number) {
|
export function gettbhb(type:number) {
|
||||||
return server.request({
|
return server.request({
|
||||||
@ -80,3 +79,60 @@ export function gettbhb(type:number) {
|
|||||||
// data
|
// 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 //换电时电量剩余过多的服务费
|
moreRemainFee?:String //换电时电量剩余过多的服务费
|
||||||
fewRemainSoc?:String //换电时电量剩余一般的soc界定
|
fewRemainSoc?:String //换电时电量剩余一般的soc界定
|
||||||
fewRemainFee?:String //换电时电量剩余一般的服务费
|
fewRemainFee?:String //换电时电量剩余一般的服务费
|
||||||
|
eachKmFee?:String //每公里收费
|
||||||
|
eachSocFee?:String //每SOC收费
|
||||||
|
eachKwhFee?:String //每度电收费
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addhdz(data:Addobj) {
|
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) {
|
function gethdzname(n:string) {
|
||||||
addata.stationName = n
|
addata.stationName = n
|
||||||
}
|
}
|
||||||
|
|
||||||
function showpop(num:any,row?:any){
|
function showpop(num:any,row?:any){
|
||||||
type.value = num
|
type.value = num
|
||||||
|
|||||||
@ -97,7 +97,8 @@
|
|||||||
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
cancel: [v?:boolean]
|
cancel: [v?:boolean],
|
||||||
|
update:[]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
let showpop = ref(props.show)
|
let showpop = ref(props.show)
|
||||||
@ -179,7 +180,8 @@
|
|||||||
message: '分配成功'
|
message: '分配成功'
|
||||||
})
|
})
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
cancel()
|
showpop.value = false
|
||||||
|
emit('update')
|
||||||
},2000)
|
},2000)
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user