Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
This commit is contained in:
commit
06c625fa76
70
apps/web-antd/src/api/property/reportStatistics/index.ts
Normal file
70
apps/web-antd/src/api/property/reportStatistics/index.ts
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import type { statisticsByTimeQuery } from './model';
|
||||||
|
|
||||||
|
import type { ID, IDS } from '#/api/common';
|
||||||
|
import type { PageResult } from '#/api/common';
|
||||||
|
|
||||||
|
import { commonExport } from '#/api/helper';
|
||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 查询绿植租赁-租赁方案列表
|
||||||
|
// * @param params
|
||||||
|
// * @returns 绿植租赁-租赁方案列表
|
||||||
|
// */
|
||||||
|
// export function rentalPlanList(params?: RentalPlanQuery) {
|
||||||
|
// return requestClient.get<PageResult<RentalPlanVO>>('/property/rentalPlan/list', { params });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 导出绿植租赁-租赁方案列表
|
||||||
|
// * @param params
|
||||||
|
// * @returns 绿植租赁-租赁方案列表
|
||||||
|
// */
|
||||||
|
// export function rentalPlanExport(params?: RentalPlanQuery) {
|
||||||
|
// return commonExport('/property/rentalPlan/export', params ?? {});
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 查询绿植租赁-租赁方案详情
|
||||||
|
// * @param id id
|
||||||
|
// * @returns 绿植租赁-租赁方案详情
|
||||||
|
// */
|
||||||
|
// export function rentalPlanInfo(id: ID) {
|
||||||
|
// return requestClient.get<RentalPlanVO>(`/property/rentalPlan/${id}`);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 新增绿植租赁-租赁方案
|
||||||
|
// * @param data
|
||||||
|
// * @returns void
|
||||||
|
// */
|
||||||
|
// export function rentalPlanAdd(data: RentalPlanForm) {
|
||||||
|
// return requestClient.postWithMsg<void>('/property/rentalPlan', data);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 更新绿植租赁-租赁方案
|
||||||
|
// * @param data
|
||||||
|
// * @returns void
|
||||||
|
// */
|
||||||
|
// export function rentalPlanUpdate(data: RentalPlanForm) {
|
||||||
|
// return requestClient.putWithMsg<void>('/property/rentalPlan', data);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 删除绿植租赁-租赁方案
|
||||||
|
// * @param id id
|
||||||
|
// * @returns void
|
||||||
|
// */
|
||||||
|
// export function rentalPlanRemove(id: ID | IDS) {
|
||||||
|
// return requestClient.deleteWithMsg<void>(`/property/rentalPlan/${id}`);
|
||||||
|
// }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询订单数量趋势
|
||||||
|
* @param timeUnit
|
||||||
|
* @returns void
|
||||||
|
*/
|
||||||
|
export function statisticsByTime(params:statisticsByTimeQuery) {
|
||||||
|
return requestClient.get<any>('/property/rentalOrder/statisticsByTime', { params });
|
||||||
|
}
|
7
apps/web-antd/src/api/property/reportStatistics/model.d.ts
vendored
Normal file
7
apps/web-antd/src/api/property/reportStatistics/model.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export interface statisticsByTimeQuery {
|
||||||
|
/**
|
||||||
|
* 日期范围参数(1日 2周 3月)
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
timeUnit?: number;
|
||||||
|
}
|
@ -149,170 +149,29 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const modalSchema: FormSchemaGetter = () => [
|
export const planInfoColumns: VxeGridProps['columns'] = [
|
||||||
{
|
{
|
||||||
label: '主键',
|
title: '序号',
|
||||||
fieldName: 'id',
|
field: 'id',
|
||||||
component: 'Input',
|
width: 100,
|
||||||
dependencies: {
|
align: 'center'
|
||||||
show: () => false,
|
|
||||||
triggerFields: [''],
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '客户名称',
|
title: '产品名称',
|
||||||
fieldName: 'customerName',
|
field: 'plantName',
|
||||||
component: 'Input',
|
minWidth: 100,
|
||||||
rules: 'required',
|
align: 'center'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '客户类型',
|
title: '产品租金',
|
||||||
fieldName: 'customerType',
|
field: 'rent',
|
||||||
component: 'Select',
|
minWidth: 100,
|
||||||
componentProps: {
|
align: 'center'
|
||||||
options: getDictOptions('wy_khlx')
|
|
||||||
},
|
|
||||||
rules: 'selectRequired',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '租赁周期',
|
title: '产品数量',
|
||||||
fieldName: 'rentalPeriod',
|
field: 'inventory',
|
||||||
component: 'Select',
|
minWidth: 100,
|
||||||
componentProps: {
|
align: 'center'
|
||||||
options: getDictOptions('wy_time_unit')
|
|
||||||
},
|
},
|
||||||
rules: 'selectRequired',
|
]
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '租赁时间',
|
|
||||||
fieldName: 'rentalTime',
|
|
||||||
component: 'RangePicker',
|
|
||||||
componentProps: {
|
|
||||||
showTime: true,
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
valueFormat: 'YYYY-MM-DD',
|
|
||||||
},
|
|
||||||
rules: 'selectRequired',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '租赁方式',
|
|
||||||
fieldName: 'rentalType',
|
|
||||||
component: 'Select',
|
|
||||||
componentProps: {
|
|
||||||
options: getDictOptions('wy_zlfs')
|
|
||||||
},
|
|
||||||
rules: 'selectRequired',
|
|
||||||
formItemClass: 'col-span-2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '租赁方案',
|
|
||||||
fieldName: 'planId',
|
|
||||||
component: 'Select',
|
|
||||||
dependencies: {
|
|
||||||
// 仅当 租赁方式 为 2(套餐) 时显示
|
|
||||||
show: (formValues) => formValues.rentalType === '2',
|
|
||||||
triggerFields: ['rentalType'],
|
|
||||||
},
|
|
||||||
rules: 'selectRequired',
|
|
||||||
formItemClass: 'col-span-2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '方案详情',
|
|
||||||
fieldName: 'planInfo',
|
|
||||||
component: 'Input',
|
|
||||||
dependencies: {
|
|
||||||
// 仅当 租赁方式 为 2(套餐) 时显示
|
|
||||||
show: (formValues) => formValues.rentalType === '2' && formValues.planId != null,
|
|
||||||
triggerFields: ['rentalType'],
|
|
||||||
},
|
|
||||||
formItemClass: 'col-span-2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '绿植产品',
|
|
||||||
fieldName: 'productId',
|
|
||||||
component: 'Select',
|
|
||||||
dependencies: {
|
|
||||||
// 仅当 租赁方式 为 1(单点) 时显示
|
|
||||||
show: (formValues) => formValues.rentalType === '1',
|
|
||||||
triggerFields: ['rentalType'],
|
|
||||||
},
|
|
||||||
rules: 'selectRequired',
|
|
||||||
formItemClass: 'col-span-2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '租赁数量',
|
|
||||||
fieldName: 'productNum',
|
|
||||||
component: 'InputNumber',
|
|
||||||
componentProps: {
|
|
||||||
min: 1,
|
|
||||||
precision: 0,
|
|
||||||
step: 1,
|
|
||||||
placeholder:'租赁数量不可超出绿植产品库存数量'
|
|
||||||
},
|
|
||||||
dependencies: {
|
|
||||||
// 仅当 租赁方式 为 1(单点) 时显示
|
|
||||||
show: (formValues) => formValues.rentalType === '1',
|
|
||||||
triggerFields: ['rentalType', 'productId'],
|
|
||||||
},
|
|
||||||
rules: 'required',
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// label: '应付总额',
|
|
||||||
// fieldName: 'totalAmount',
|
|
||||||
// component: 'Input',
|
|
||||||
// rules: 'required',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: '支付状态',
|
|
||||||
// fieldName: 'paymentStatus',
|
|
||||||
// component: 'Select',
|
|
||||||
// componentProps: {
|
|
||||||
// options: getDictOptions('pro_charging_status'),
|
|
||||||
// },
|
|
||||||
// rules: 'selectRequired',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: '是否续租',
|
|
||||||
// fieldName: 'isRelet',
|
|
||||||
// component: 'RadioGroup',
|
|
||||||
// componentProps: {
|
|
||||||
// buttonStyle: 'solid',
|
|
||||||
// optionType: 'button',
|
|
||||||
// options: getDictOptions('wy_sf'),
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
label: '合同状态',
|
|
||||||
fieldName: 'contractStatus',
|
|
||||||
component: 'Select',
|
|
||||||
componentProps: {
|
|
||||||
options: getDictOptions('wy_htzt'),
|
|
||||||
},
|
|
||||||
rules: 'selectRequired'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '合同编号',
|
|
||||||
fieldName: 'contractCode',
|
|
||||||
component: 'Input',
|
|
||||||
dependencies: {
|
|
||||||
show: (formValues) => formValues.contractStatus != null && formValues.contractStatus != 1,
|
|
||||||
triggerFields: ['contractStatus'],
|
|
||||||
},
|
|
||||||
rules: 'required'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '签署时间',
|
|
||||||
fieldName: 'signTime',
|
|
||||||
component: 'DatePicker',
|
|
||||||
componentProps: {
|
|
||||||
showTime: true,
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
valueFormat: 'YYYY-MM-DD',
|
|
||||||
},
|
|
||||||
dependencies: {
|
|
||||||
show: (formValues) => formValues.contractStatus != null && formValues.contractStatus != 1,
|
|
||||||
triggerFields: ['contractStatus'],
|
|
||||||
},
|
|
||||||
rules: 'required'
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
@ -89,10 +89,10 @@ function handleAdd() {
|
|||||||
modalApi.open();
|
modalApi.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleEdit(row: Required<RentalOrderForm>) {
|
// async function handleEdit(row: Required<RentalOrderForm>) {
|
||||||
modalApi.setData({ id: row.id });
|
// modalApi.setData({ id: row.id });
|
||||||
modalApi.open();
|
// modalApi.open();
|
||||||
}
|
// }
|
||||||
|
|
||||||
async function handleDelete(row: Required<RentalOrderForm>) {
|
async function handleDelete(row: Required<RentalOrderForm>) {
|
||||||
await rentalOrderRemove(row.id);
|
await rentalOrderRemove(row.id);
|
||||||
|
@ -18,12 +18,18 @@ import {rentalPlanInfo, rentalPlanList} from "#/api/property/rentalPlan";
|
|||||||
import {getDictOptions} from "#/utils/dict";
|
import {getDictOptions} from "#/utils/dict";
|
||||||
import type {PropertyVO} from "#/api/property/productManagement/model";
|
import type {PropertyVO} from "#/api/property/productManagement/model";
|
||||||
import type {RentalPlanVO} from "#/api/property/rentalPlan/model";
|
import type {RentalPlanVO} from "#/api/property/rentalPlan/model";
|
||||||
|
import {planInfoColumns} from './data';
|
||||||
|
import {Table} from "ant-design-vue";
|
||||||
|
|
||||||
const emit = defineEmits<{ reload: [] }>();
|
const emit = defineEmits<{ reload: [] }>();
|
||||||
|
|
||||||
const isUpdate = ref(false);
|
const isUpdate = ref(false);
|
||||||
const planList = ref<RentalPlanVO[]>([]);
|
const planList = ref<RentalPlanVO[]>([]);
|
||||||
const plantsList = ref<PropertyVO[]>([]);
|
const plantsList = ref<PropertyVO[]>([]);
|
||||||
|
const planProducts = ref<any[]>([]);
|
||||||
|
const totalAmount = ref(0);
|
||||||
|
const singleAmount = ref(0);
|
||||||
|
const plantInfo = ref<PropertyVO>();
|
||||||
const title = computed(() => {
|
const title = computed(() => {
|
||||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||||
});
|
});
|
||||||
@ -104,7 +110,6 @@ const modalSchema = [
|
|||||||
},
|
},
|
||||||
onChange: async (value: string) => {
|
onChange: async (value: string) => {
|
||||||
await getPlanProducts(value)
|
await getPlanProducts(value)
|
||||||
// const plan= planList.value.find(item => item.id === value);
|
|
||||||
},
|
},
|
||||||
showSearch: true,
|
showSearch: true,
|
||||||
filterOption: (input: any, option: any) =>
|
filterOption: (input: any, option: any) =>
|
||||||
@ -114,7 +119,8 @@ const modalSchema = [
|
|||||||
{
|
{
|
||||||
label: '方案详情',
|
label: '方案详情',
|
||||||
fieldName: 'planInfo',
|
fieldName: 'planInfo',
|
||||||
component: 'Text',
|
component: 'Input',
|
||||||
|
slots: {default: 'planInfo'},
|
||||||
dependencies: {
|
dependencies: {
|
||||||
// 仅当 租赁方式 为 2(套餐) 时显示
|
// 仅当 租赁方式 为 2(套餐) 时显示
|
||||||
show: (formValues: any) => formValues.rentalType === '2' && formValues.planId != null,
|
show: (formValues: any) => formValues.rentalType === '2' && formValues.planId != null,
|
||||||
@ -143,22 +149,12 @@ const modalSchema = [
|
|||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
onChange: async (value: string) => {
|
onChange: async (value: string) => {
|
||||||
const plants = plantsList.value.find(item => item.id === value);
|
plantInfo.value = plantsList.value.find(item => item.id === value);
|
||||||
if (plants) {
|
if (plantInfo.value) {
|
||||||
formApi.updateSchema([{
|
|
||||||
componentProps: () => ({
|
|
||||||
min: 1,
|
|
||||||
max: plants.inventory,
|
|
||||||
precision: 0,
|
|
||||||
}),
|
|
||||||
fieldName: 'productNum',
|
|
||||||
}])
|
|
||||||
}
|
|
||||||
const formValues = await formApi.getValues();
|
const formValues = await formApi.getValues();
|
||||||
if(formValues.productNum){
|
if (formValues.productNum) {
|
||||||
await formApi.setValues({
|
singleAmount.value = (plantInfo.value.rent * formValues.productNum).toFixed(2);
|
||||||
totalAmount: plants.rent*formValues.productNum,
|
}
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showSearch: true,
|
showSearch: true,
|
||||||
@ -174,7 +170,12 @@ const modalSchema = [
|
|||||||
min: 1,
|
min: 1,
|
||||||
precision: 0,
|
precision: 0,
|
||||||
step: 1,
|
step: 1,
|
||||||
placeholder: '租赁数量不可超出绿植产品库存数量'
|
placeholder: '租赁数量不可超出绿植产品库存数量',
|
||||||
|
onChange: async (value: number) => {
|
||||||
|
if (plantInfo.value) {
|
||||||
|
singleAmount.value = (plantInfo.value.rent * value).toFixed(2);
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
dependencies: {
|
dependencies: {
|
||||||
// 仅当 租赁方式 为 1(单点) 时显示
|
// 仅当 租赁方式 为 1(单点) 时显示
|
||||||
@ -184,20 +185,17 @@ const modalSchema = [
|
|||||||
rules: 'required',
|
rules: 'required',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '应付总额',
|
label: '总金额(元)',
|
||||||
fieldName: 'totalAmount',
|
fieldName: 'totalAmount',
|
||||||
component: 'InputNumber',
|
component: 'InputNumber',
|
||||||
|
slots: {default: 'totalAmount'},
|
||||||
dependencies: {
|
dependencies: {
|
||||||
// 仅当 租赁方式 为 1(单点) 时显示
|
// 仅当 租赁方式 为 1(单点) 时显示
|
||||||
show: (formValues: any) => formValues.totalAmount,
|
show: (formValues: any) => formValues.productNum&&formValues.productId&&formValues.rentalType === '1',
|
||||||
triggerFields: ['totalAmount'],
|
triggerFields: ['productNum','rentalType'],
|
||||||
disabled:true,
|
disabled: true,
|
||||||
},
|
|
||||||
componentProps: {
|
|
||||||
addonAfter: '元',
|
|
||||||
precision: 2,
|
|
||||||
stringMode: true,
|
|
||||||
},
|
},
|
||||||
|
labelWidth: 110
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '是否续租',
|
label: '是否续租',
|
||||||
@ -304,14 +302,18 @@ async function handleConfirm() {
|
|||||||
const data = cloneDeep(await formApi.getValues());
|
const data = cloneDeep(await formApi.getValues());
|
||||||
if (data.rentalType == 1) {
|
if (data.rentalType == 1) {
|
||||||
data.planId = undefined;
|
data.planId = undefined;
|
||||||
|
data.totalAmount = singleAmount.value
|
||||||
} else {
|
} else {
|
||||||
data.productId = undefined;
|
data.productId = undefined;
|
||||||
data.productNum = undefined;
|
data.productNum = undefined;
|
||||||
|
data.productList = plantsList.value
|
||||||
|
data.totalAmount = totalAmount.value
|
||||||
}
|
}
|
||||||
if(data.rentalTime){
|
if (data.rentalTime) {
|
||||||
data.startTime=data.rentalTime[0];
|
data.startTime = data.rentalTime[0];
|
||||||
data.endTime=data.rentalTime[1];
|
data.endTime = data.rentalTime[1];
|
||||||
}
|
}
|
||||||
|
|
||||||
await (isUpdate.value ? rentalOrderUpdate(data) : rentalOrderAdd(data));
|
await (isUpdate.value ? rentalOrderUpdate(data) : rentalOrderAdd(data));
|
||||||
resetInitialized();
|
resetInitialized();
|
||||||
emit('reload');
|
emit('reload');
|
||||||
@ -326,16 +328,19 @@ async function handleConfirm() {
|
|||||||
//获取有库存的绿植
|
//获取有库存的绿植
|
||||||
async function getPlanProducts(id: string) {
|
async function getPlanProducts(id: string) {
|
||||||
const res = await rentalPlanInfo(id)
|
const res = await rentalPlanInfo(id)
|
||||||
if (res.productList) {
|
plantsList.value=res.productList;
|
||||||
}
|
// planProducts.value = [{
|
||||||
formApi.updateSchema([{
|
// plantName: '发财树',
|
||||||
fieldName: 'planInfo',
|
// inventory: 3,
|
||||||
componentProps: {
|
// rent: 10,
|
||||||
isHtml: true,
|
// }, {
|
||||||
value: '<div>222222222222222222</div>'
|
// plantName: '绿萝',
|
||||||
},
|
// inventory: 5,
|
||||||
},
|
// rent: 3,
|
||||||
]);
|
// }
|
||||||
|
// ]
|
||||||
|
totalAmount.value = planProducts.value?.reduce((sum, item: any) => sum + (item.rent * item.inventory), 0).toFixed(2)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleClosed() {
|
async function handleClosed() {
|
||||||
@ -347,7 +352,32 @@ async function handleClosed() {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<BasicModal :title="title">
|
<BasicModal :title="title">
|
||||||
<BasicForm/>
|
<BasicForm>
|
||||||
|
<template #planInfo="slotProps">
|
||||||
|
<div v-if="planProducts.length" style="width: 100%">
|
||||||
|
<Table :dataSource="planProducts" :columns="planInfoColumns" :pagination="false"
|
||||||
|
bordered size="small">
|
||||||
|
<template #bodyCell="{ column, record, index }">
|
||||||
|
<template v-if="column.field === 'id'">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ record[column.field] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<div style="text-align: right;margin-right: 20px">
|
||||||
|
<b>总金额(元):</b>
|
||||||
|
{{ totalAmount }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #totalAmount="slotProps">
|
||||||
|
<div>{{ singleAmount }}</div>
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
</BasicModal>
|
</BasicModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -7,6 +7,8 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|||||||
|
|
||||||
import { Button } from 'ant-design-vue';
|
import { Button } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { statisticsByTime } from '#/api/property/reportStatistics';
|
||||||
|
|
||||||
const orderLineRef = ref<EchartsUIType>();
|
const orderLineRef = ref<EchartsUIType>();
|
||||||
const leasePieRef = ref<EchartsUIType>();
|
const leasePieRef = ref<EchartsUIType>();
|
||||||
const customerTypesBarRef = ref<EchartsUIType>();
|
const customerTypesBarRef = ref<EchartsUIType>();
|
||||||
@ -27,14 +29,18 @@ const { renderEcharts: renderConservationTasksBar } = useEcharts(
|
|||||||
const { renderEcharts: renderMaintenanceQualityScoresPei } = useEcharts(
|
const { renderEcharts: renderMaintenanceQualityScoresPei } = useEcharts(
|
||||||
maintenanceQualityScoresPeiRef,
|
maintenanceQualityScoresPeiRef,
|
||||||
);
|
);
|
||||||
|
const timeUnit = ref<number>(1)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
|
// 查询订单数量趋势
|
||||||
|
const res = await statisticsByTime({ timeUnit: timeUnit.value });
|
||||||
|
const xAxisData = res?.time ?? [];
|
||||||
|
const seriesData = res?.counts ?? [];
|
||||||
renderEcharts({
|
renderEcharts({
|
||||||
title: { text: '订单数量趋势' },
|
|
||||||
tooltip: { trigger: 'axis' },
|
tooltip: { trigger: 'axis' },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
data: xAxisData,
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
},
|
},
|
||||||
yAxis: { type: 'value' },
|
yAxis: { type: 'value' },
|
||||||
@ -42,7 +48,7 @@ onMounted(() => {
|
|||||||
{
|
{
|
||||||
name: '订单数',
|
name: '订单数',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [120, 132, 101, 134, 90, 230],
|
data: seriesData,
|
||||||
smooth: true,
|
smooth: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -199,6 +205,15 @@ onMounted(() => {
|
|||||||
],
|
],
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
const nodeOptions = [
|
||||||
|
{ label: '日', value: 1 },
|
||||||
|
{ label: '周', value: 2 },
|
||||||
|
{ label: '月', value: 3 },
|
||||||
|
];
|
||||||
|
function handleAssociationChange(e: any) {
|
||||||
|
console.log(e);
|
||||||
|
timeUnit.value = e.target.value;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
@ -226,6 +241,19 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="row-first">
|
<div class="row-first">
|
||||||
<div class="item1">
|
<div class="item1">
|
||||||
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
|
||||||
|
<span style="font-size: 18px; font-weight: bold;">订单数量趋势</span>
|
||||||
|
<div>
|
||||||
|
<RadioGroup
|
||||||
|
v-model:value="timeUnit"
|
||||||
|
:options="nodeOptions"
|
||||||
|
button-style="solid"
|
||||||
|
option-type="button"
|
||||||
|
@change="handleAssociationChange"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<EchartsUI
|
<EchartsUI
|
||||||
ref="orderLineRef"
|
ref="orderLineRef"
|
||||||
height="350px"
|
height="350px"
|
||||||
@ -300,9 +328,6 @@ onMounted(() => {
|
|||||||
.title-operate {
|
.title-operate {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.calendar {
|
|
||||||
}
|
|
||||||
|
|
||||||
.export {
|
.export {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
@ -339,17 +364,21 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-second {
|
.row-second {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-third {
|
.row-third {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-fouth {
|
.row-fouth {
|
||||||
@ -359,11 +388,19 @@ onMounted(() => {
|
|||||||
.item1 {
|
.item1 {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
// margin: 20px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.item2 {
|
.item2 {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user