首页统计
This commit is contained in:
parent
e476ec2647
commit
d69b863361
|
|
@ -3,6 +3,13 @@ import { defHttp } from '/@/utils/http/axios';
|
|||
enum Api {
|
||||
loginfo = '/sys/loginfo',
|
||||
visitInfo = '/sys/visitInfo',
|
||||
totalInfo = '/zh/home/totalInfo',
|
||||
todayInfo = '/zh/home/todayInfo',
|
||||
orderTypeCn = '/zh/home/getOrderTypeCn',
|
||||
xqtd = '/zh/home/getXqtd',
|
||||
sbtd = '/zh/home/getSbtd',
|
||||
hytd = '/zh/home/getHytd',
|
||||
sstd = '/zh/home/getSstd',
|
||||
}
|
||||
/**
|
||||
* 日志统计信息
|
||||
|
|
@ -14,3 +21,46 @@ export const getLoginfo = (params) => defHttp.get({ url: Api.loginfo, params },
|
|||
* @param params
|
||||
*/
|
||||
export const getVisitInfo = (params) => defHttp.get({ url: Api.visitInfo, params }, { isTransformResponse: false });
|
||||
|
||||
|
||||
/**
|
||||
* 总览
|
||||
* @param params
|
||||
*/
|
||||
export const getTotalInfo = (params) => defHttp.get({ url: Api.totalInfo, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 今日
|
||||
* @param params
|
||||
*/
|
||||
export const getTodayInfo = (params) => defHttp.get({ url: Api.todayInfo, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 订单类别统计
|
||||
* @param params
|
||||
*/
|
||||
export const getOrderTypeCn = (params) => defHttp.get({ url: Api.orderTypeCn, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 小区投递
|
||||
* @param params
|
||||
*/
|
||||
export const getXqtd = (params) => defHttp.get({ url: Api.xqtd, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 设备投递
|
||||
* @param params
|
||||
*/
|
||||
export const getSbtd = (params) => defHttp.get({ url: Api.sbtd, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 会员投递
|
||||
* @param params
|
||||
*/
|
||||
export const getHytd = (params) => defHttp.get({ url: Api.hytd, params }, { isTransformResponse: false });
|
||||
|
||||
/**
|
||||
* 实时投递
|
||||
* @param params
|
||||
*/
|
||||
export const getSstd = (params) => defHttp.get({ url: Api.sstd, params });
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import {BasicColumn} from "@/components/Table";
|
||||
|
||||
export interface GrowCardItem {
|
||||
icon: string;
|
||||
title: string;
|
||||
|
|
@ -217,3 +219,31 @@ export const table1 = {
|
|||
total: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export const orderColumns : BasicColumn[] =[
|
||||
{
|
||||
title: '会员手机号',
|
||||
dataIndex: 'phone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '投递时间',
|
||||
dataIndex: 'addTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '小区名称',
|
||||
dataIndex: 'housingestateName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '设备地点',
|
||||
dataIndex: 'content',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '重量（KG）',
|
||||
dataIndex: 'weight',
|
||||
align: 'center'
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,24 +1,397 @@
|
|||
<template>
|
||||
<IndexChart v-if="indexStyle === 0"></IndexChart>
|
||||
<IndexDef v-if="indexStyle === 1"></IndexDef>
|
||||
<IndexBdc v-if="indexStyle == 2"></IndexBdc>
|
||||
<IndexTask v-if="indexStyle == 3"></IndexTask>
|
||||
<div style="width: 100%; text-align: right; margin-top: 20px">
|
||||
首页主题：
|
||||
<a-radio-group v-model:value="indexStyle">
|
||||
<a-radio :value="0">默认</a-radio>
|
||||
<a-radio :value="1">销量统计</a-radio>
|
||||
<a-radio :value="2">业务统计</a-radio>
|
||||
<a-radio :value="3">我的任务</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
|
||||
<a-row :gutter="16" style="padding:16px 0px 0px 16px;width: 100%">
|
||||
<a-col :span="4">
|
||||
<a-card>
|
||||
<div>总投递重量（T）</div>
|
||||
<div class="card-title">{{formData.tdzlA}}</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card>
|
||||
<div>总投递次数（次）</div>
|
||||
<div class="card-title">{{formData.tdcsA}}</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card>
|
||||
<div>总清运重量（T）</div>
|
||||
<div class="card-title">{{formData.qyzlA}}</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card>
|
||||
<div>总会员（人）</div>
|
||||
<div class="card-title">{{formData.hyrsA}}</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card>
|
||||
<div>总区域（个）</div>
|
||||
<div class="card-title">{{formData.qysA}}</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-card>
|
||||
<div>总设备（台）</div>
|
||||
<div style="display: flex">
|
||||
<span class="card-title">{{formData.sbsA}}</span>
|
||||
<span style="margin-left: 20px;font-weight: bold;">
|
||||
<div style="color: #1890ff">在线 {{formData.zxsbsA}}</div>
|
||||
<div style="color: #ff3333">离线 {{formData.lxsbsA}}</div>
|
||||
</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16" style="padding:16px 0px 0px 16px;width: 100%">
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<div>
|
||||
<div class="space-between"><span>今日投递重量（T）</span><span>昨日</span></div>
|
||||
<div class="space-between"><span class="card-title">{{formData.tdzlT}}</span><span>{{formData.tdzlY}}</span></div>
|
||||
<div>
|
||||
<span>较昨日</span>
|
||||
<span v-if="formData.tdzlR<0" class="down">{{formData.tdzlR}}%</span>
|
||||
<span v-else class="up">{{formData.tdzlR}}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<div class="space-between"><span>今日投递次数（次）</span><span>昨日</span></div>
|
||||
<div class="space-between"><span class="card-title">{{formData.tdcsT}}</span><span>{{formData.tdcsY}}</span></div>
|
||||
<div>
|
||||
<span>较昨日</span>
|
||||
<span v-if="formData.tdcsR<0" class="down">{{formData.tdcsR}}%</span>
|
||||
<span v-else class="up">{{formData.tdcsR}}%</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<div class="space-between"><span>今日清运重量（T）</span><span>昨日</span></div>
|
||||
<div class="space-between"><span class="card-title">{{formData.qyzlT}}</span><span>{{formData.qyzlY}}</span></div>
|
||||
<div>
|
||||
<span>较昨日</span>
|
||||
<span v-if="formData.qyzlR<0" class="down">{{formData.qyzlR}}%</span>
|
||||
<span v-else class="up">{{formData.qyzlR}}%</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<div class="space-between"><span>今日新增会员（人）</span><span>昨日</span></div>
|
||||
<div class="space-between"><span class="card-title">{{formData.hyrsT}}</span><span>{{formData.hyrsY}}</span></div>
|
||||
<div>
|
||||
<span>较昨日</span>
|
||||
<span v-if="formData.hyrsR<0" class="down">{{formData.hyrsR}}%</span>
|
||||
<span v-else class="up">{{formData.hyrsR}}%</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16" style="padding:16px 0px 0px 16px;width: 100%">
|
||||
<a-col :span="8">
|
||||
<div style="background: #ffffff;border-radius: 4px;border: 1px solid #f0f0f0;padding: 5px;">
|
||||
<BarAndLine
|
||||
:chartData="xqtdSource" height="400px"
|
||||
:option="{ title: { text: '小区投递次排行', left: 'left' } }"
|
||||
:yAxis="xqtdYAxis"
|
||||
:axisLabel="{ rotate: 45}"
|
||||
></BarAndLine>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div style="background: #ffffff;border-radius: 4px;border: 1px solid #f0f0f0;padding: 5px;">
|
||||
<BarAndLine
|
||||
:chartData="sbtdSource" height="400px"
|
||||
:option="{ title: { text: '设备投递次排行', left: 'left' } }"
|
||||
:yAxis="xqtdYAxis"
|
||||
:axisLabel="{ rotate: 45}"
|
||||
></BarAndLine>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div style="background: #ffffff;border-radius: 4px;border: 1px solid #f0f0f0;padding: 5px;">
|
||||
<BarAndLine
|
||||
:chartData="hytdSource" height="400px"
|
||||
:option="{ title: { text: '会员投递次排行', left: 'left' } }"
|
||||
:yAxis="hytdYAxis"
|
||||
:axisLabel="{ rotate: 45}"
|
||||
></BarAndLine>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16" style="padding:16px 0px 16px 16px;width: 100%">
|
||||
<a-col :span="10">
|
||||
<div style="background: #ffffff;border-radius: 4px;border: 1px solid #f0f0f0;padding: 5px;">
|
||||
<Pie :chartData="pieDataSource" height="400px"
|
||||
:option="{ title: { text: '订单类型分布', left: 'left' } }"
|
||||
:radius="['30%','70%']"
|
||||
:legend="{ orient: 'vertical',left: 'right'}"
|
||||
:itemStyle="{borderRadius: 8}"
|
||||
></Pie>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div style="background: #ffffff;border-radius: 4px;border: 1px solid #f0f0f0;padding: 5px;">
|
||||
<!-- <a-table :dataSource="dataSource" :columns="orderColumns">
|
||||
</a-table>-->
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)"/>
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import IndexDef from './homePage/IndexDef.vue';
|
||||
import IndexChart from './homePage/IndexChart.vue';
|
||||
import IndexBdc from './homePage/IndexBdc.vue';
|
||||
import IndexTask from './homePage/IndexTask.vue';
|
||||
import {onMounted, reactive, ref} from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import Pie from '/@/components/chart/Pie.vue';
|
||||
import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
||||
import {getTotalInfo, getTodayInfo, getOrderTypeCn, getXqtd, getSbtd, getHytd, getSstd} from './api';
|
||||
import {orderColumns} from './data';
|
||||
|
||||
const queryParam = reactive<any>({});
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '实时投递信息',
|
||||
api: getSstd,
|
||||
pagination: true,
|
||||
columns: orderColumns,
|
||||
showIndexColumn: true,
|
||||
canResize: true,
|
||||
// 显示表格设置
|
||||
showTableSetting: false,
|
||||
showActionColumn: false,
|
||||
size: 'small',
|
||||
striped: true,
|
||||
minHeight: 272,
|
||||
maxHeight: 272,
|
||||
formConfig: {
|
||||
compact: true,
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const labelCol = reactive({
|
||||
xs:24,
|
||||
sm:4,
|
||||
xl:6,
|
||||
xxl:4
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
});
|
||||
|
||||
const formData = reactive<any>({
|
||||
tdzlA: '',//总投递重量
|
||||
tdcsA: '',//总投递次数
|
||||
qyzlA: '',//总清运重量
|
||||
hyrsA: '',//总会员人数
|
||||
qysA: '',//总区域数
|
||||
sbsA: '',//总设备数
|
||||
zxsbsA: '',//在线设备数
|
||||
lxsbsA: '',//离线设备数
|
||||
|
||||
tdzlT: '',//今日递重量
|
||||
tdcsT: '',//今日递次数
|
||||
qyzlT: '',//今日运重量
|
||||
hyrsT: '',//今日新增会员人数
|
||||
|
||||
tdzlY: '',//昨日递重量
|
||||
tdcsY: '',//昨日递次数
|
||||
qyzlY: '',//昨日运重量
|
||||
hyrsY: '',//昨日新增会员人数
|
||||
|
||||
tdzlR: '',//较昨日递重量比例
|
||||
tdcsR: '',//较昨日递次数比例
|
||||
qyzlR: '',//较昨日运重量比例
|
||||
hyrsR: '',//较昨日新增会员人数比例
|
||||
});
|
||||
|
||||
const dataSource = ref([]);
|
||||
const pieDataSource = ref([]);
|
||||
const xqtdSource = ref([]);
|
||||
const sbtdSource = ref([]);
|
||||
const hytdSource = ref([]);
|
||||
const xqtdYAxis = ref([{type: 'value', name: '投递重量',axisLabel: {formatter: '{value} T'}},{type: 'value',name: '投递次数',axisLabel: {formatter: '{value} 次'}}]);
|
||||
const hytdYAxis = ref([{type: 'value', name: '投递重量',axisLabel: {formatter: '{value} KG'}},{type: 'value',name: '投递次数',axisLabel: {formatter: '{value} 次'}}]);
|
||||
|
||||
async function loadTotalData() {
|
||||
const resData = await getTotalInfo({});
|
||||
const res = resData.result;
|
||||
formData.tdzlA = res.tdzlA;
|
||||
formData.tdcsA = res.tdcsA;
|
||||
formData.qyzlA = res.qyzlA;
|
||||
formData.hyrsA = res.hyrsA;
|
||||
formData.qysA = res.qysA;
|
||||
formData.sbsA = res.sbsA;
|
||||
formData.zxsbsA = res.zxsbsA;
|
||||
formData.lxsbsA = res.lxsbsA;
|
||||
}
|
||||
|
||||
async function loadTodayData() {
|
||||
const resData = await getTodayInfo({});
|
||||
const res = resData.result;
|
||||
formData.tdzlT = res.tdzlT;
|
||||
formData.tdcsT = res.tdcsT;
|
||||
formData.qyzlT = res.qyzlT;
|
||||
formData.hyrsT = res.hyrsT;
|
||||
formData.tdzlY = res.tdzlY;
|
||||
formData.tdcsY = res.tdcsY;
|
||||
formData.qyzlY = res.qyzlY;
|
||||
formData.hyrsY = res.hyrsY;
|
||||
formData.tdzlR = res.tdzlR;
|
||||
formData.tdcsR = res.tdcsR;
|
||||
formData.qyzlR = res.qyzlR;
|
||||
formData.hyrsR = res.hyrsR;
|
||||
}
|
||||
|
||||
async function loadOrderTypeCn() {
|
||||
const resData = await getOrderTypeCn({});
|
||||
const res = resData.result;
|
||||
pieDataSource.value = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
pieDataSource.value.push({
|
||||
name: `${res[i].type}`,
|
||||
value: res[i].cn,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function loadXqtd() {
|
||||
const resData = await getXqtd({});
|
||||
const res = resData.result;
|
||||
xqtdSource.value = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
xqtdSource.value.push({
|
||||
name: `${res[i].housingestateName}`,
|
||||
value: res[i].weight,
|
||||
type: '投递重量',
|
||||
seriesType: 'bar',
|
||||
});
|
||||
xqtdSource.value.push({
|
||||
name: `${res[i].housingestateName}`,
|
||||
value: res[i].cn,
|
||||
type: '投递次数',
|
||||
seriesType: 'line',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSbtd() {
|
||||
const resData = await getSbtd({});
|
||||
const res = resData.result;
|
||||
sbtdSource.value = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
let name = res[i].imei;
|
||||
if(res[i].housingestateName!=null&&res[i].content!=null){
|
||||
name = res[i].housingestateName+'-'+res[i].content;
|
||||
}
|
||||
sbtdSource.value.push({
|
||||
name: `${name}`,
|
||||
value: res[i].weight,
|
||||
type: '投递重量',
|
||||
seriesType: 'bar',
|
||||
});
|
||||
sbtdSource.value.push({
|
||||
name: `${name}`,
|
||||
value: res[i].cn,
|
||||
type: '投递次数',
|
||||
seriesType: 'line',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function loadHytd() {
|
||||
const resData = await getHytd({});
|
||||
const res = resData.result;
|
||||
hytdSource.value = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
hytdSource.value.push({
|
||||
name: `${res[i].phone}`,
|
||||
value: res[i].weight,
|
||||
type: '投递重量',
|
||||
seriesType: 'bar',
|
||||
});
|
||||
hytdSource.value.push({
|
||||
name: `${res[i].phone}`,
|
||||
value: res[i].cn,
|
||||
type: '投递次数',
|
||||
seriesType: 'line',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 实时投递
|
||||
async function loadSstd(){
|
||||
try {
|
||||
dataSource.value = [];
|
||||
const res = await getSstd({});
|
||||
console.log(res);
|
||||
dataSource.value = res.result;
|
||||
} catch (error) {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTotalData();
|
||||
loadTodayData();
|
||||
loadOrderTypeCn();
|
||||
loadXqtd();
|
||||
loadSbtd();
|
||||
loadHytd();
|
||||
// loadSstd();
|
||||
})
|
||||
|
||||
const indexStyle = ref(0);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.card-title{
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.up{
|
||||
margin-left:10px;
|
||||
color: #ff3333;
|
||||
}
|
||||
|
||||
.down{
|
||||
margin-left:10px;
|
||||
color: #21cc71;
|
||||
}
|
||||
|
||||
:deep(.ant-table-title) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue