<template> <el-row> <el-col :span="6"> <el-statistic :value="summaryData.effectiveActivityCount"> <template #title> <div style="display: inline-flex; align-items: center"> 市场活动 </div> </template> <template #suffix>/{{ summaryData.totalActivityCount }}</template> </el-statistic> </el-col> <el-col :span="6"> <el-statistic title="线索总数" :value="summaryData.totalClueCount" /> </el-col> <el-col :span="6"> <el-statistic title="客户总数" :value="summaryData.totalCustomerCount" /> </el-col> <el-col :span="6"> <el-statistic :value="summaryData.su***essTranAmount"> <template #title> <div style="display: inline-flex; align-items: center"> 交易总额 </div> </template> <template #suffix>/{{ summaryData.totalTranAmount }}</template> </el-statistic> </el-col> </el-row> </template> <script> import { doGet } from '../http/httpRequest'; import { messageTip } from '../util/util'; export default { name : "StatisticView", mounted(){ this.loadSummary(); }, data(){ return { summaryData : {} } }, methods : { loadSummary(){ doGet("/api/summary/data",{}).then(resp => { if(resp.data.code === 200){ this.summaryData = resp.data.data; } else{ messageTip("网络异常","error"); } }); } } } </script> <style scoped> .el-row{ text-align: center; } </style><template>
<el-row>
<el-col :span="6">
<el-statistic :value="summaryData.effectiveActivityCount">
<template #title>
<div style="display: inline-flex; align-items: center">
市场活动
</div>
</template>
<template #suffix>/{{ summaryData.totalActivityCount }}</template>
</el-statistic>
</el-col>
<el-col :span="6">
<el-statistic title="线索总数" :value="summaryData.totalClueCount" />
</el-col>
<el-col :span="6">
<el-statistic title="客户总数" :value="summaryData.totalCustomerCount" />
</el-col>
<el-col :span="6">
<el-statistic :value="summaryData.su***essTranAmount">
<template #title>
<div style="display: inline-flex; align-items: center">
交易总额
</div>
</template>
<template #suffix>/{{ summaryData.totalTranAmount }}</template>
</el-statistic>
</el-col>
</el-row>
</template>
<script>
import { doGet } from '../http/httpRequest';
import { messageTip } from '../util/util';
export default {
name : "StatisticView",
mounted(){
this.loadSummary();
},
data(){
return {
summaryData : {}
}
},
methods : {
loadSummary(){
doGet("/api/summary/data",{}).then(resp => {
if(resp.data.code === 200){
this.summaryData = resp.data.data;
}
else{
messageTip("网络异常","error");
}
});
}
}
}
</script>
<style scoped>
.el-row{
text-align: center;
}
</style>
javascript">import { createRouter,createWebHistory } from "vue-router"; const router = createRouter({ // 路由历史 history:createWebHistory(), // 配置路由,可以配置多个路由 routes:[ { //路由路径 path:"/", //对应路径的页面 ***ponent:() => import('../view/login.vue') }, { //路由路径 path:"/dashboard", //对应路径的页面 ***ponent:() => import('../view/dashboard.vue'), // 子路由 children : [ { // 子路由的path开始不能有/ path:"", //对应路径的页面 ***ponent:() => import('../view/StatisticView.vue'), }, { // 子路由的path开始不能有/ path:"user", //对应路径的页面 ***ponent:() => import('../view/userView.vue'), }, { // 子路由路径 path:"user/detail/:id", //路由路径所展示的页面 ***ponent : () => import('../view/userDetail.vue') }, { path:"activity", ***ponent : () => import('../view/activityView.vue') }, { path:"activity/add", ***ponent : () => import('../view/activityRecordView.vue') }, { path:"activity/edit/:id", ***ponent : () => import('../view/activityRecordView.vue') }, { path:"activity/detail/:id", ***ponent : () => import('../view/activityDetail.vue') }, { path:"clue", ***ponent : () => import('../view/clueView.vue') }, { path:"clue/add", ***ponent : () => import('../view/clueRecordView.vue') }, { path:"clue/edit/:id", ***ponent : () => import('../view/clueRecordView.vue') }, { path:"clue/detail/:id", ***ponent : () => import('../view/clueDetailView.vue') }, { path:"customer", ***ponent : () => import('../view/customerView.vue') } ] } ] }); export default router;import { createRouter,createWebHistory } from "vue-router";
const router = createRouter({
// 路由历史
history:createWebHistory(),
// 配置路由,可以配置多个路由
routes:[
{
//路由路径
path:"/",
//对应路径的页面
***ponent:() => import('../view/login.vue')
},
{
//路由路径
path:"/dashboard",
//对应路径的页面
***ponent:() => import('../view/dashboard.vue'),
// 子路由
children : [
{
// 子路由的path开始不能有/
path:"",
//对应路径的页面
***ponent:() => import('../view/StatisticView.vue'),
},
{
// 子路由的path开始不能有/
path:"user",
//对应路径的页面
***ponent:() => import('../view/userView.vue'),
},
{
// 子路由路径
path:"user/detail/:id",
//路由路径所展示的页面
***ponent : () => import('../view/userDetail.vue')
},
{
path:"activity",
***ponent : () => import('../view/activityView.vue')
},
{
path:"activity/add",
***ponent : () => import('../view/activityRecordView.vue')
},
{
path:"activity/edit/:id",
***ponent : () => import('../view/activityRecordView.vue')
},
{
path:"activity/detail/:id",
***ponent : () => import('../view/activityDetail.vue')
},
{
path:"clue",
***ponent : () => import('../view/clueView.vue')
},
{
path:"clue/add",
***ponent : () => import('../view/clueRecordView.vue')
},
{
path:"clue/edit/:id",
***ponent : () => import('../view/clueRecordView.vue')
},
{
path:"clue/detail/:id",
***ponent : () => import('../view/clueDetailView.vue')
},
{
path:"customer",
***ponent : () => import('../view/customerView.vue')
}
]
}
]
});
export default router;
