mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-29 14:46:41 +08:00
feat: add vtable plugin
This commit is contained in:
Rui-Sun
parent
0c0d606ae5
commit
2486d9d296
@ -58,6 +58,8 @@
|
||||
"@sa/hooks": "workspace:*",
|
||||
"@sa/materials": "workspace:*",
|
||||
"@sa/utils": "workspace:*",
|
||||
"@visactor/vchart": "1.12.8",
|
||||
"@visactor/vue-vtable": "1.10.1",
|
||||
"@vueuse/components": "^11.1.0",
|
||||
"@vueuse/core": "11.1.0",
|
||||
"clipboard": "2.0.11",
|
||||
|
||||
11978
pnpm-lock.yaml
11978
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
0
src/hooks/common/vchart.ts
Normal file
0
src/hooks/common/vchart.ts
Normal file
0
src/hooks/common/vtable.ts
Normal file
0
src/hooks/common/vtable.ts
Normal file
@ -200,6 +200,7 @@ const local: App.I18n.Schema = {
|
||||
plugin_charts: 'Charts',
|
||||
plugin_charts_echarts: 'ECharts',
|
||||
plugin_charts_antv: 'AntV',
|
||||
plugin_charts_vchart: 'VChart',
|
||||
plugin_editor: 'Editor',
|
||||
plugin_editor_quill: 'Quill',
|
||||
plugin_editor_markdown: 'Markdown',
|
||||
@ -213,7 +214,9 @@ const local: App.I18n.Schema = {
|
||||
plugin_excel: 'Excel',
|
||||
plugin_pdf: 'PDF preview',
|
||||
plugin_gantt: 'Gantt Chart',
|
||||
plugin_typeit: 'Typeit'
|
||||
plugin_typeit: 'Typeit',
|
||||
plugin_tables: 'Tables',
|
||||
plugin_tables_vtable: 'VTable'
|
||||
},
|
||||
page: {
|
||||
login: {
|
||||
|
||||
@ -200,6 +200,7 @@ const local: App.I18n.Schema = {
|
||||
plugin_charts: '图表',
|
||||
plugin_charts_echarts: 'ECharts',
|
||||
plugin_charts_antv: 'AntV',
|
||||
plugin_charts_vchart: 'VChart',
|
||||
plugin_editor: '编辑器',
|
||||
plugin_editor_quill: '富文本编辑器',
|
||||
plugin_editor_markdown: 'MD 编辑器',
|
||||
@ -213,7 +214,9 @@ const local: App.I18n.Schema = {
|
||||
plugin_excel: 'Excel',
|
||||
plugin_pdf: 'PDF 预览',
|
||||
plugin_gantt: '甘特图',
|
||||
plugin_typeit: '打字机'
|
||||
plugin_typeit: '打字机',
|
||||
plugin_tables: '表格',
|
||||
plugin_tables_vtable: 'VTable'
|
||||
},
|
||||
page: {
|
||||
login: {
|
||||
|
||||
@ -42,6 +42,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
|
||||
plugin_barcode: () => import("@/views/plugin/barcode/index.vue"),
|
||||
plugin_charts_antv: () => import("@/views/plugin/charts/antv/index.vue"),
|
||||
plugin_charts_echarts: () => import("@/views/plugin/charts/echarts/index.vue"),
|
||||
plugin_charts_vchart: () => import("@/views/plugin/charts/vchart/index.vue"),
|
||||
plugin_copy: () => import("@/views/plugin/copy/index.vue"),
|
||||
plugin_editor_markdown: () => import("@/views/plugin/editor/markdown/index.vue"),
|
||||
plugin_editor_quill: () => import("@/views/plugin/editor/quill/index.vue"),
|
||||
@ -53,6 +54,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
|
||||
plugin_pinyin: () => import("@/views/plugin/pinyin/index.vue"),
|
||||
plugin_print: () => import("@/views/plugin/print/index.vue"),
|
||||
plugin_swiper: () => import("@/views/plugin/swiper/index.vue"),
|
||||
plugin_tables_vtable: () => import("@/views/plugin/tables/vtable/index.vue"),
|
||||
plugin_typeit: () => import("@/views/plugin/typeit/index.vue"),
|
||||
plugin_video: () => import("@/views/plugin/video/index.vue"),
|
||||
"user-center": () => import("@/views/user-center/index.vue"),
|
||||
|
||||
@ -424,6 +424,15 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
i18nKey: 'route.plugin_charts_echarts',
|
||||
icon: 'simple-icons:apacheecharts'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'plugin_charts_vchart',
|
||||
path: '/plugin/charts/vchart',
|
||||
component: 'view.plugin_charts_vchart',
|
||||
meta: {
|
||||
title: 'plugin_charts_vchart',
|
||||
i18nKey: 'route.plugin_charts_vchart'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -549,6 +558,26 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
icon: 'simple-icons:swiper'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'plugin_tables',
|
||||
path: '/plugin/tables',
|
||||
meta: {
|
||||
title: 'plugin_tables',
|
||||
i18nKey: 'route.plugin_tables',
|
||||
icon: 'icon-park-outline:table'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'plugin_tables_vtable',
|
||||
path: '/plugin/tables/vtable',
|
||||
component: 'view.plugin_tables_vtable',
|
||||
meta: {
|
||||
title: 'plugin_tables_vtable',
|
||||
i18nKey: 'route.plugin_tables_vtable'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'plugin_typeit',
|
||||
path: '/plugin/typeit',
|
||||
|
||||
@ -213,6 +213,7 @@ const routeMap: RouteMap = {
|
||||
"plugin_charts": "/plugin/charts",
|
||||
"plugin_charts_antv": "/plugin/charts/antv",
|
||||
"plugin_charts_echarts": "/plugin/charts/echarts",
|
||||
"plugin_charts_vchart": "/plugin/charts/vchart",
|
||||
"plugin_copy": "/plugin/copy",
|
||||
"plugin_editor": "/plugin/editor",
|
||||
"plugin_editor_markdown": "/plugin/editor/markdown",
|
||||
@ -225,6 +226,8 @@ const routeMap: RouteMap = {
|
||||
"plugin_pinyin": "/plugin/pinyin",
|
||||
"plugin_print": "/plugin/print",
|
||||
"plugin_swiper": "/plugin/swiper",
|
||||
"plugin_tables": "/plugin/tables",
|
||||
"plugin_tables_vtable": "/plugin/tables/vtable",
|
||||
"plugin_typeit": "/plugin/typeit",
|
||||
"plugin_video": "/plugin/video",
|
||||
"user-center": "/user-center"
|
||||
|
||||
5
src/typings/elegant-router.d.ts
vendored
5
src/typings/elegant-router.d.ts
vendored
@ -67,6 +67,7 @@ declare module "@elegant-router/types" {
|
||||
"plugin_charts": "/plugin/charts";
|
||||
"plugin_charts_antv": "/plugin/charts/antv";
|
||||
"plugin_charts_echarts": "/plugin/charts/echarts";
|
||||
"plugin_charts_vchart": "/plugin/charts/vchart";
|
||||
"plugin_copy": "/plugin/copy";
|
||||
"plugin_editor": "/plugin/editor";
|
||||
"plugin_editor_markdown": "/plugin/editor/markdown";
|
||||
@ -79,6 +80,8 @@ declare module "@elegant-router/types" {
|
||||
"plugin_pinyin": "/plugin/pinyin";
|
||||
"plugin_print": "/plugin/print";
|
||||
"plugin_swiper": "/plugin/swiper";
|
||||
"plugin_tables": "/plugin/tables";
|
||||
"plugin_tables_vtable": "/plugin/tables/vtable";
|
||||
"plugin_typeit": "/plugin/typeit";
|
||||
"plugin_video": "/plugin/video";
|
||||
"user-center": "/user-center";
|
||||
@ -184,6 +187,7 @@ declare module "@elegant-router/types" {
|
||||
| "plugin_barcode"
|
||||
| "plugin_charts_antv"
|
||||
| "plugin_charts_echarts"
|
||||
| "plugin_charts_vchart"
|
||||
| "plugin_copy"
|
||||
| "plugin_editor_markdown"
|
||||
| "plugin_editor_quill"
|
||||
@ -195,6 +199,7 @@ declare module "@elegant-router/types" {
|
||||
| "plugin_pinyin"
|
||||
| "plugin_print"
|
||||
| "plugin_swiper"
|
||||
| "plugin_tables_vtable"
|
||||
| "plugin_typeit"
|
||||
| "plugin_video"
|
||||
| "user-center"
|
||||
|
||||
71
src/views/plugin/charts/vchart/index.vue
Normal file
71
src/views/plugin/charts/vchart/index.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { onUnmounted } from 'vue';
|
||||
// import { useEcharts } from '@/hooks/common/echarts';
|
||||
// import {
|
||||
// barOptions,
|
||||
// gaugeOptions,
|
||||
// getPictorialBarOption,
|
||||
// getScatterOption,
|
||||
// lineOptions,
|
||||
// pieOptions,
|
||||
// radarOptions
|
||||
// } from './data';
|
||||
|
||||
// const { domRef: pieRef } = useEcharts(() => pieOptions, { onRender() {} });
|
||||
// const { domRef: lineRef } = useEcharts(() => lineOptions, { onRender() {} });
|
||||
// const { domRef: barRef } = useEcharts(() => barOptions, { onRender() {} });
|
||||
// const { domRef: pictorialBarRef } = useEcharts(() => getPictorialBarOption(), { onRender() {} });
|
||||
// const { domRef: radarRef } = useEcharts(() => radarOptions, { onRender() {} });
|
||||
// const { domRef: scatterRef } = useEcharts(() => getScatterOption(), { onRender() {} });
|
||||
// const { domRef: gaugeRef, setOptions: setGaugeOptions } = useEcharts(() => gaugeOptions, { onRender() {} });
|
||||
|
||||
// let intervalId: NodeJS.Timeout;
|
||||
|
||||
// function initGaugeChart() {
|
||||
// intervalId = setInterval(() => {
|
||||
// const date = new Date();
|
||||
// const second = date.getSeconds();
|
||||
// const minute = date.getMinutes() + second / 60;
|
||||
// const hour = (date.getHours() % 12) + minute / 60;
|
||||
|
||||
// setGaugeOptions({
|
||||
// animationDurationUpdate: 300,
|
||||
// series: [
|
||||
// {
|
||||
// name: 'hour',
|
||||
// animation: hour !== 0,
|
||||
// data: [{ value: hour }]
|
||||
// },
|
||||
// {
|
||||
// name: 'minute',
|
||||
// animation: minute !== 0,
|
||||
// data: [{ value: minute }]
|
||||
// },
|
||||
// {
|
||||
// animation: second !== 0,
|
||||
// name: 'second',
|
||||
// data: [{ value: second }]
|
||||
// }
|
||||
// ]
|
||||
// });
|
||||
// }, 1000);
|
||||
// }
|
||||
|
||||
// function clearGaugeChart() {
|
||||
// clearInterval(intervalId);
|
||||
// }
|
||||
|
||||
// initGaugeChart();
|
||||
|
||||
onUnmounted(() => {
|
||||
// clearGaugeChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpace vertical :size="16">
|
||||
<div>vchart</div>
|
||||
</NSpace>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
694
src/views/plugin/tables/vtable/data.ts
Normal file
694
src/views/plugin/tables/vtable/data.ts
Normal file
@ -0,0 +1,694 @@
|
||||
const listTableRecords = [
|
||||
{
|
||||
'Row ID': '7981',
|
||||
'Order ID': 'CA-2015-103800',
|
||||
'Order Date': '2015/1/3',
|
||||
'Ship Date': '2015/1/7',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'DP-13000',
|
||||
'Customer Name': 'Darren Powers',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Houston',
|
||||
State: 'Texas',
|
||||
'Postal Code': '77095',
|
||||
Region: 'Central',
|
||||
'Product ID': 'OFF-PA-10000174',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Paper',
|
||||
'Product Name': 'Message Book, Wirebound, Four 5 1/2" X 4" Forms/Pg., 200 Dupl. Sets/Book',
|
||||
Sales: '16.448',
|
||||
Quantity: '2',
|
||||
Discount: '0.2',
|
||||
Profit: '5.5512'
|
||||
},
|
||||
{
|
||||
'Row ID': '740',
|
||||
'Order ID': 'CA-2015-112326',
|
||||
'Order Date': '2015/1/4',
|
||||
'Ship Date': '2015/1/8',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'PO-19195',
|
||||
'Customer Name': 'Phillina Ober',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Naperville',
|
||||
State: 'Illinois',
|
||||
'Postal Code': '60540',
|
||||
Region: 'Central',
|
||||
'Product ID': 'OFF-LA-10003223',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Labels',
|
||||
'Product Name': 'Avery 508',
|
||||
Sales: '11.784',
|
||||
Quantity: '3',
|
||||
Discount: '0.2',
|
||||
Profit: '4.2717'
|
||||
},
|
||||
{
|
||||
'Row ID': '741',
|
||||
'Order ID': 'CA-2015-112326',
|
||||
'Order Date': '2015/1/4',
|
||||
'Ship Date': '2015/1/8',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'PO-19195',
|
||||
'Customer Name': 'Phillina Ober',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Naperville',
|
||||
State: 'Illinois',
|
||||
'Postal Code': '60540',
|
||||
Region: 'Central',
|
||||
'Product ID': 'OFF-ST-10002743',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Storage',
|
||||
'Product Name': 'SAFCO Boltless Steel Shelving',
|
||||
Sales: '272.736',
|
||||
Quantity: '3',
|
||||
Discount: '0.2',
|
||||
Profit: '-64.7748'
|
||||
},
|
||||
{
|
||||
'Row ID': '742',
|
||||
'Order ID': 'CA-2015-112326',
|
||||
'Order Date': '2015/1/4',
|
||||
'Ship Date': '2015/1/8',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'PO-19195',
|
||||
'Customer Name': 'Phillina Ober',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Naperville',
|
||||
State: 'Illinois',
|
||||
'Postal Code': '60540',
|
||||
Region: 'Central',
|
||||
'Product ID': 'OFF-BI-10004094',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Binders',
|
||||
'Product Name': 'GBC Standard Plastic Binding Systems Combs',
|
||||
Sales: '3.54',
|
||||
Quantity: '2',
|
||||
Discount: '0.8',
|
||||
Profit: '-5.487'
|
||||
},
|
||||
{
|
||||
'Row ID': '1760',
|
||||
'Order ID': 'CA-2015-141817',
|
||||
'Order Date': '2015/1/5',
|
||||
'Ship Date': '2015/1/12',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'MB-18085',
|
||||
'Customer Name': 'Mick Brown',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Philadelphia',
|
||||
State: 'Pennsylvania',
|
||||
'Postal Code': '19143',
|
||||
Region: 'East',
|
||||
'Product ID': 'OFF-AR-10003478',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Art',
|
||||
'Product Name': 'Avery Hi-Liter EverBold Pen Style Fluorescent Highlighters, 4/Pack',
|
||||
Sales: '19.536',
|
||||
Quantity: '3',
|
||||
Discount: '0.2',
|
||||
Profit: '4.884'
|
||||
},
|
||||
{
|
||||
'Row ID': '5328',
|
||||
'Order ID': 'CA-2015-130813',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/8',
|
||||
'Ship Mode': 'Second Class',
|
||||
'Customer ID': 'LS-17230',
|
||||
'Customer Name': 'Lycoris Saunders',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Los Angeles',
|
||||
State: 'California',
|
||||
'Postal Code': '90049',
|
||||
Region: 'West',
|
||||
'Product ID': 'OFF-PA-10002005',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Paper',
|
||||
'Product Name': 'Xerox 225',
|
||||
Sales: '19.44',
|
||||
Quantity: '3',
|
||||
Discount: '0',
|
||||
Profit: '9.3312'
|
||||
},
|
||||
{
|
||||
'Row ID': '7181',
|
||||
'Order ID': 'CA-2015-106054',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/7',
|
||||
'Ship Mode': 'First Class',
|
||||
'Customer ID': 'JO-15145',
|
||||
'Customer Name': "Jack O'Briant",
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Athens',
|
||||
State: 'Georgia',
|
||||
'Postal Code': '30605',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-AR-10002399',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Art',
|
||||
'Product Name': 'Dixon Prang Watercolor Pencils, 10-Color Set with Brush',
|
||||
Sales: '12.78',
|
||||
Quantity: '3',
|
||||
Discount: '0',
|
||||
Profit: '5.2398'
|
||||
},
|
||||
{
|
||||
'Row ID': '7475',
|
||||
'Order ID': 'CA-2015-167199',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/10',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'ME-17320',
|
||||
'Customer Name': 'Maria Etezadi',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Henderson',
|
||||
State: 'Kentucky',
|
||||
'Postal Code': '42420',
|
||||
Region: 'South',
|
||||
'Product ID': 'FUR-CH-10004063',
|
||||
Category: 'Furniture',
|
||||
'Sub-Category': 'Chairs',
|
||||
'Product Name': "Global Deluxe High-Back Manager's Chair",
|
||||
Sales: '2573.82',
|
||||
Quantity: '9',
|
||||
Discount: '0',
|
||||
Profit: '746.4078'
|
||||
},
|
||||
{
|
||||
'Row ID': '7476',
|
||||
'Order ID': 'CA-2015-167199',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/10',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'ME-17320',
|
||||
'Customer Name': 'Maria Etezadi',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Henderson',
|
||||
State: 'Kentucky',
|
||||
'Postal Code': '42420',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-BI-10004632',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Binders',
|
||||
'Product Name': 'Ibico Hi-Tech Manual Binding System',
|
||||
Sales: '609.98',
|
||||
Quantity: '2',
|
||||
Discount: '0',
|
||||
Profit: '274.491'
|
||||
},
|
||||
{
|
||||
'Row ID': '7477',
|
||||
'Order ID': 'CA-2015-167199',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/10',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'ME-17320',
|
||||
'Customer Name': 'Maria Etezadi',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Henderson',
|
||||
State: 'Kentucky',
|
||||
'Postal Code': '42420',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-AR-10001662',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Art',
|
||||
'Product Name': 'Rogers Handheld Barrel Pencil Sharpener',
|
||||
Sales: '5.48',
|
||||
Quantity: '2',
|
||||
Discount: '0',
|
||||
Profit: '1.4796'
|
||||
},
|
||||
{
|
||||
'Row ID': '7478',
|
||||
'Order ID': 'CA-2015-167199',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/10',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'ME-17320',
|
||||
'Customer Name': 'Maria Etezadi',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Henderson',
|
||||
State: 'Kentucky',
|
||||
'Postal Code': '42420',
|
||||
Region: 'South',
|
||||
'Product ID': 'TEC-PH-10004977',
|
||||
Category: 'Technology',
|
||||
'Sub-Category': 'Phones',
|
||||
'Product Name': 'GE 30524EE4',
|
||||
Sales: '391.98',
|
||||
Quantity: '2',
|
||||
Discount: '0',
|
||||
Profit: '113.6742'
|
||||
},
|
||||
{
|
||||
'Row ID': '7479',
|
||||
'Order ID': 'CA-2015-167199',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/10',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'ME-17320',
|
||||
'Customer Name': 'Maria Etezadi',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Henderson',
|
||||
State: 'Kentucky',
|
||||
'Postal Code': '42420',
|
||||
Region: 'South',
|
||||
'Product ID': 'TEC-PH-10004539',
|
||||
Category: 'Technology',
|
||||
'Sub-Category': 'Phones',
|
||||
'Product Name': 'Wireless Extenders zBoost YX545 SOHO Signal Booster',
|
||||
Sales: '755.96',
|
||||
Quantity: '4',
|
||||
Discount: '0',
|
||||
Profit: '204.1092'
|
||||
},
|
||||
{
|
||||
'Row ID': '7480',
|
||||
'Order ID': 'CA-2015-167199',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/10',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'ME-17320',
|
||||
'Customer Name': 'Maria Etezadi',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Henderson',
|
||||
State: 'Kentucky',
|
||||
'Postal Code': '42420',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-FA-10001883',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Fasteners',
|
||||
'Product Name': 'Alliance Super-Size Bands, Assorted Sizes',
|
||||
Sales: '31.12',
|
||||
Quantity: '4',
|
||||
Discount: '0',
|
||||
Profit: '0.3112'
|
||||
},
|
||||
{
|
||||
'Row ID': '7481',
|
||||
'Order ID': 'CA-2015-167199',
|
||||
'Order Date': '2015/1/6',
|
||||
'Ship Date': '2015/1/10',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'ME-17320',
|
||||
'Customer Name': 'Maria Etezadi',
|
||||
Segment: 'Home Office',
|
||||
Country: 'United States',
|
||||
City: 'Henderson',
|
||||
State: 'Kentucky',
|
||||
'Postal Code': '42420',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-PA-10000955',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Paper',
|
||||
'Product Name': 'Southworth 25% Cotton Granite Paper & Envelopes',
|
||||
Sales: '6.54',
|
||||
Quantity: '1',
|
||||
Discount: '0',
|
||||
Profit: '3.0084'
|
||||
},
|
||||
{
|
||||
'Row ID': '7661',
|
||||
'Order ID': 'CA-2015-105417',
|
||||
'Order Date': '2015/1/7',
|
||||
'Ship Date': '2015/1/12',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'VS-21820',
|
||||
'Customer Name': 'Vivek Sundaresam',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Huntsville',
|
||||
State: 'Texas',
|
||||
'Postal Code': '77340',
|
||||
Region: 'Central',
|
||||
'Product ID': 'FUR-FU-10004864',
|
||||
Category: 'Furniture',
|
||||
'Sub-Category': 'Furnishings',
|
||||
'Product Name': 'Howard Miller 14-1/2" Diameter Chrome Round Wall Clock',
|
||||
Sales: '76.728',
|
||||
Quantity: '3',
|
||||
Discount: '0.6',
|
||||
Profit: '-53.7096'
|
||||
},
|
||||
{
|
||||
'Row ID': '7662',
|
||||
'Order ID': 'CA-2015-105417',
|
||||
'Order Date': '2015/1/7',
|
||||
'Ship Date': '2015/1/12',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'VS-21820',
|
||||
'Customer Name': 'Vivek Sundaresam',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Huntsville',
|
||||
State: 'Texas',
|
||||
'Postal Code': '77340',
|
||||
Region: 'Central',
|
||||
'Product ID': 'OFF-BI-10003708',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Binders',
|
||||
'Product Name': 'Acco Four Pocket Poly Ring Binder with Label Holder, Smoke, 1"',
|
||||
Sales: '10.43',
|
||||
Quantity: '7',
|
||||
Discount: '0.8',
|
||||
Profit: '-18.2525'
|
||||
},
|
||||
{
|
||||
'Row ID': '593',
|
||||
'Order ID': 'CA-2015-135405',
|
||||
'Order Date': '2015/1/9',
|
||||
'Ship Date': '2015/1/13',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'MS-17830',
|
||||
'Customer Name': 'Melanie Seite',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Laredo',
|
||||
State: 'Texas',
|
||||
'Postal Code': '78041',
|
||||
Region: 'Central',
|
||||
'Product ID': 'OFF-AR-10004078',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Art',
|
||||
'Product Name': 'Newell 312',
|
||||
Sales: '9.344',
|
||||
Quantity: '2',
|
||||
Discount: '0.2',
|
||||
Profit: '1.168'
|
||||
},
|
||||
{
|
||||
'Row ID': '594',
|
||||
'Order ID': 'CA-2015-135405',
|
||||
'Order Date': '2015/1/9',
|
||||
'Ship Date': '2015/1/13',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'MS-17830',
|
||||
'Customer Name': 'Melanie Seite',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Laredo',
|
||||
State: 'Texas',
|
||||
'Postal Code': '78041',
|
||||
Region: 'Central',
|
||||
'Product ID': 'TEC-AC-10001266',
|
||||
Category: 'Technology',
|
||||
'Sub-Category': 'Accessories',
|
||||
'Product Name': 'Memorex Micro Travel Drive 8 GB',
|
||||
Sales: '31.2',
|
||||
Quantity: '3',
|
||||
Discount: '0.2',
|
||||
Profit: '9.75'
|
||||
},
|
||||
{
|
||||
'Row ID': '866',
|
||||
'Order ID': 'CA-2015-149020',
|
||||
'Order Date': '2015/1/10',
|
||||
'Ship Date': '2015/1/15',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'AJ-10780',
|
||||
'Customer Name': 'Anthony Jacobs',
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Springfield',
|
||||
State: 'Virginia',
|
||||
'Postal Code': '22153',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-LA-10004272',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Labels',
|
||||
'Product Name': 'Avery 482',
|
||||
Sales: '2.89',
|
||||
Quantity: '1',
|
||||
Discount: '0',
|
||||
Profit: '1.3583'
|
||||
},
|
||||
{
|
||||
'Row ID': '867',
|
||||
'Order ID': 'CA-2015-149020',
|
||||
'Order Date': '2015/1/10',
|
||||
'Ship Date': '2015/1/15',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'AJ-10780',
|
||||
'Customer Name': 'Anthony Jacobs',
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Springfield',
|
||||
State: 'Virginia',
|
||||
'Postal Code': '22153',
|
||||
Region: 'South',
|
||||
'Product ID': 'FUR-FU-10000965',
|
||||
Category: 'Furniture',
|
||||
'Sub-Category': 'Furnishings',
|
||||
'Product Name': 'Howard Miller 11-1/2" Diameter Ridgewood Wall Clock',
|
||||
Sales: '51.94',
|
||||
Quantity: '1',
|
||||
Discount: '0',
|
||||
Profit: '21.2954'
|
||||
},
|
||||
{
|
||||
'Row ID': '717',
|
||||
'Order ID': 'CA-2015-130092',
|
||||
'Order Date': '2015/1/11',
|
||||
'Ship Date': '2015/1/14',
|
||||
'Ship Mode': 'First Class',
|
||||
'Customer ID': 'SV-20365',
|
||||
'Customer Name': 'Seth Vernon',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Dover',
|
||||
State: 'Delaware',
|
||||
'Postal Code': '19901',
|
||||
Region: 'East',
|
||||
'Product ID': 'FUR-FU-10000010',
|
||||
Category: 'Furniture',
|
||||
'Sub-Category': 'Furnishings',
|
||||
'Product Name': 'DAX Value U-Channel Document Frames, Easel Back',
|
||||
Sales: '9.94',
|
||||
Quantity: '2',
|
||||
Discount: '0',
|
||||
Profit: '3.0814'
|
||||
},
|
||||
{
|
||||
'Row ID': '764',
|
||||
'Order ID': 'CA-2015-162775',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/15',
|
||||
'Ship Mode': 'Second Class',
|
||||
'Customer ID': 'CS-12250',
|
||||
'Customer Name': 'Chris Selesnick',
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Bossier City',
|
||||
State: 'Louisiana',
|
||||
'Postal Code': '71111',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-EN-10001990',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Envelopes',
|
||||
'Product Name': 'Staple envelope',
|
||||
Sales: '11.36',
|
||||
Quantity: '2',
|
||||
Discount: '0',
|
||||
Profit: '5.3392'
|
||||
},
|
||||
{
|
||||
'Row ID': '765',
|
||||
'Order ID': 'CA-2015-162775',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/15',
|
||||
'Ship Mode': 'Second Class',
|
||||
'Customer ID': 'CS-12250',
|
||||
'Customer Name': 'Chris Selesnick',
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Bossier City',
|
||||
State: 'Louisiana',
|
||||
'Postal Code': '71111',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-EN-10001532',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Envelopes',
|
||||
'Product Name': 'Brown Kraft Recycled Envelopes',
|
||||
Sales: '50.94',
|
||||
Quantity: '3',
|
||||
Discount: '0',
|
||||
Profit: '25.47'
|
||||
},
|
||||
{
|
||||
'Row ID': '766',
|
||||
'Order ID': 'CA-2015-162775',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/15',
|
||||
'Ship Mode': 'Second Class',
|
||||
'Customer ID': 'CS-12250',
|
||||
'Customer Name': 'Chris Selesnick',
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Bossier City',
|
||||
State: 'Louisiana',
|
||||
'Postal Code': '71111',
|
||||
Region: 'South',
|
||||
'Product ID': 'TEC-AC-10003174',
|
||||
Category: 'Technology',
|
||||
'Sub-Category': 'Accessories',
|
||||
'Product Name': 'Plantronics S12 Corded Telephone Headset System',
|
||||
Sales: '646.74',
|
||||
Quantity: '6',
|
||||
Discount: '0',
|
||||
Profit: '258.696'
|
||||
},
|
||||
{
|
||||
'Row ID': '767',
|
||||
'Order ID': 'CA-2015-162775',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/15',
|
||||
'Ship Mode': 'Second Class',
|
||||
'Customer ID': 'CS-12250',
|
||||
'Customer Name': 'Chris Selesnick',
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Bossier City',
|
||||
State: 'Louisiana',
|
||||
'Postal Code': '71111',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-BI-10004187',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Binders',
|
||||
'Product Name': '3-ring staple pack',
|
||||
Sales: '5.64',
|
||||
Quantity: '3',
|
||||
Discount: '0',
|
||||
Profit: '2.7072'
|
||||
},
|
||||
{
|
||||
'Row ID': '768',
|
||||
'Order ID': 'CA-2015-162775',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/15',
|
||||
'Ship Mode': 'Second Class',
|
||||
'Customer ID': 'CS-12250',
|
||||
'Customer Name': 'Chris Selesnick',
|
||||
Segment: 'Corporate',
|
||||
Country: 'United States',
|
||||
City: 'Bossier City',
|
||||
State: 'Louisiana',
|
||||
'Postal Code': '71111',
|
||||
Region: 'South',
|
||||
'Product ID': 'OFF-ST-10000025',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Storage',
|
||||
'Product Name': 'Fellowes Stor/Drawer Steel Plus Storage Drawers',
|
||||
Sales: '572.58',
|
||||
Quantity: '6',
|
||||
Discount: '0',
|
||||
Profit: '34.3548'
|
||||
},
|
||||
{
|
||||
'Row ID': '2979',
|
||||
'Order ID': 'CA-2015-109232',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/16',
|
||||
'Ship Mode': 'Second Class',
|
||||
'Customer ID': 'ND-18370',
|
||||
'Customer Name': 'Natalie DeCherney',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'Mount Pleasant',
|
||||
State: 'South Carolina',
|
||||
'Postal Code': '29464',
|
||||
Region: 'South',
|
||||
'Product ID': 'FUR-CH-10000422',
|
||||
Category: 'Furniture',
|
||||
'Sub-Category': 'Chairs',
|
||||
'Product Name': 'Global Highback Leather Tilter in Burgundy',
|
||||
Sales: '545.94',
|
||||
Quantity: '6',
|
||||
Discount: '0',
|
||||
Profit: '87.3504'
|
||||
},
|
||||
{
|
||||
'Row ID': '4938',
|
||||
'Order ID': 'CA-2015-157147',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/18',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'BD-11605',
|
||||
'Customer Name': 'Brian Dahlen',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'San Francisco',
|
||||
State: 'California',
|
||||
'Postal Code': '94109',
|
||||
Region: 'West',
|
||||
'Product ID': 'OFF-ST-10000078',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Storage',
|
||||
'Product Name': 'Tennsco 6- and 18-Compartment Lockers',
|
||||
Sales: '1325.85',
|
||||
Quantity: '5',
|
||||
Discount: '0',
|
||||
Profit: '238.653'
|
||||
},
|
||||
{
|
||||
'Row ID': '4939',
|
||||
'Order ID': 'CA-2015-157147',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/18',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'BD-11605',
|
||||
'Customer Name': 'Brian Dahlen',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'San Francisco',
|
||||
State: 'California',
|
||||
'Postal Code': '94109',
|
||||
Region: 'West',
|
||||
'Product ID': 'FUR-BO-10003034',
|
||||
Category: 'Furniture',
|
||||
'Sub-Category': 'Bookcases',
|
||||
'Product Name': "O'Sullivan Elevations Bookcase, Cherry Finish",
|
||||
Sales: '333.999',
|
||||
Quantity: '3',
|
||||
Discount: '0.15',
|
||||
Profit: '3.9294'
|
||||
},
|
||||
{
|
||||
'Row ID': '4940',
|
||||
'Order ID': 'CA-2015-157147',
|
||||
'Order Date': '2015/1/13',
|
||||
'Ship Date': '2015/1/18',
|
||||
'Ship Mode': 'Standard Class',
|
||||
'Customer ID': 'BD-11605',
|
||||
'Customer Name': 'Brian Dahlen',
|
||||
Segment: 'Consumer',
|
||||
Country: 'United States',
|
||||
City: 'San Francisco',
|
||||
State: 'California',
|
||||
'Postal Code': '94109',
|
||||
Region: 'West',
|
||||
'Product ID': 'OFF-AR-10003514',
|
||||
Category: 'Office Supplies',
|
||||
'Sub-Category': 'Art',
|
||||
'Product Name': '4009 Highlighters by Sanford',
|
||||
Sales: '19.9',
|
||||
Quantity: '5',
|
||||
Discount: '0',
|
||||
Profit: '6.567'
|
||||
}
|
||||
];
|
||||
|
||||
export { listTableRecords };
|
||||
692
src/views/plugin/tables/vtable/index.vue
Normal file
692
src/views/plugin/tables/vtable/index.vue
Normal file
@ -0,0 +1,692 @@
|
||||
<script setup lang="tsx">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import {
|
||||
Group,
|
||||
Image,
|
||||
ListColumn,
|
||||
ListTable,
|
||||
Menu,
|
||||
PivotChart,
|
||||
PivotColumnDimension,
|
||||
PivotCorner,
|
||||
PivotIndicator,
|
||||
PivotRowDimension,
|
||||
PivotTable,
|
||||
Tag,
|
||||
Text,
|
||||
registerChartModule
|
||||
} from '@visactor/vue-vtable';
|
||||
import VChart from '@visactor/vchart';
|
||||
import { listTableRecords } from './data';
|
||||
|
||||
registerChartModule('vchart', VChart);
|
||||
|
||||
// list table
|
||||
const listTableRef = ref(null);
|
||||
const listRecords = ref<Record<string, string | number>[]>(listTableRecords);
|
||||
|
||||
// pivot table
|
||||
const pivotTableRef = ref(null);
|
||||
const pivotTableOptions = ref({
|
||||
tooltip: {
|
||||
isShowOverflowTextTooltip: true
|
||||
},
|
||||
dataConfig: {
|
||||
sortRules: [
|
||||
{
|
||||
sortField: 'Category',
|
||||
sortBy: ['Office Supplies', 'Technology', 'Furniture']
|
||||
}
|
||||
]
|
||||
},
|
||||
widthMode: 'standard'
|
||||
});
|
||||
const pivotTableIndicators = ref([
|
||||
{
|
||||
indicatorKey: 'Quantity',
|
||||
title: 'Quantity',
|
||||
width: 'auto',
|
||||
showSort: false,
|
||||
headerStyle: { fontWeight: 'normal' },
|
||||
style: {
|
||||
padding: [16, 28, 16, 28],
|
||||
color(args: any) {
|
||||
return args.dataValue >= 0 ? 'black' : 'red';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
indicatorKey: 'Sales',
|
||||
title: 'Sales',
|
||||
width: 'auto',
|
||||
showSort: false,
|
||||
headerStyle: { fontWeight: 'normal' },
|
||||
format: (rec: string) => `$${Number(rec).toFixed(2)}`,
|
||||
style: {
|
||||
padding: [16, 28, 16, 28],
|
||||
color(args: any) {
|
||||
return args.dataValue >= 0 ? 'black' : 'red';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
indicatorKey: 'Profit',
|
||||
title: 'Profit',
|
||||
width: 'auto',
|
||||
showSort: false,
|
||||
headerStyle: { fontWeight: 'normal' },
|
||||
format: (rec: string) => `$${Number(rec).toFixed(2)}`,
|
||||
style: {
|
||||
padding: [16, 28, 16, 28],
|
||||
color(args: any) {
|
||||
return args.dataValue >= 0 ? 'black' : 'red';
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
const pivotTableRows = ref([
|
||||
{
|
||||
dimensionKey: 'City',
|
||||
title: 'City',
|
||||
headerStyle: { textStick: true },
|
||||
width: 'auto'
|
||||
}
|
||||
]);
|
||||
const pivotTableRecords = ref([]);
|
||||
|
||||
// pivot chart
|
||||
const pivotChartRef = ref(null);
|
||||
const pivotChartColumns = [
|
||||
{
|
||||
dimensionKey: 'Region',
|
||||
title: 'Region',
|
||||
headerStyle: {
|
||||
textStick: true
|
||||
}
|
||||
},
|
||||
'Category'
|
||||
];
|
||||
const pivotChartRows = [
|
||||
{
|
||||
dimensionKey: 'Order Year',
|
||||
title: 'Order Year',
|
||||
headerStyle: {
|
||||
textStick: true
|
||||
}
|
||||
},
|
||||
'Ship Mode'
|
||||
];
|
||||
const pivotChartIndicators = [
|
||||
{
|
||||
indicatorKey: 'Quantity',
|
||||
title: 'Quantity',
|
||||
width: 'auto',
|
||||
cellType: 'chart',
|
||||
chartModule: 'vchart',
|
||||
chartSpec: {
|
||||
stack: true,
|
||||
type: 'bar',
|
||||
data: {
|
||||
id: 'data',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Accessories',
|
||||
'Phones',
|
||||
'Copiers',
|
||||
'Machines'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Quantity',
|
||||
seriesField: 'Segment-Indicator',
|
||||
axes: [
|
||||
{ orient: 'left', visible: true, label: { visible: true } },
|
||||
{ orient: 'bottom', visible: true }
|
||||
],
|
||||
bar: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { opacity: 0.2 }
|
||||
}
|
||||
},
|
||||
scales: [
|
||||
{
|
||||
id: 'color',
|
||||
type: 'ordinal',
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
],
|
||||
range: [
|
||||
'#2E62F1',
|
||||
'#4DC36A',
|
||||
'#FF8406',
|
||||
'#FFCC00',
|
||||
'#4F44CF',
|
||||
'#5AC8FA',
|
||||
'#003A8C',
|
||||
'#B08AE2',
|
||||
'#FF6341',
|
||||
'#98DD62',
|
||||
'#07A199',
|
||||
'#87DBDD'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
style: { padding: 1 }
|
||||
},
|
||||
{
|
||||
indicatorKey: 'Sales',
|
||||
title: 'Sales & Profit',
|
||||
cellType: 'chart',
|
||||
chartModule: 'vchart',
|
||||
chartSpec: {
|
||||
type: 'common',
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: {
|
||||
id: 'data1',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Accessories',
|
||||
'Phones',
|
||||
'Copiers',
|
||||
'Machines'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: true,
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Sales',
|
||||
seriesField: 'Segment-Indicator',
|
||||
bar: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { opacity: 0.2 }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
data: {
|
||||
id: 'data2',
|
||||
fields: {
|
||||
'Sub-Category': {
|
||||
sortIndex: 0,
|
||||
domain: [
|
||||
'Chairs',
|
||||
'Tables',
|
||||
'Bookcases',
|
||||
'Furnishings',
|
||||
'Binders',
|
||||
'Art',
|
||||
'Storage',
|
||||
'Appliances',
|
||||
'Envelopes',
|
||||
'Fasteners',
|
||||
'Paper',
|
||||
'Labels',
|
||||
'Supplies',
|
||||
'Phones',
|
||||
'Accessories',
|
||||
'Machines',
|
||||
'Copiers'
|
||||
]
|
||||
},
|
||||
'Segment-Indicator': {
|
||||
sortIndex: 1,
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
stack: false,
|
||||
xField: ['Sub-Category'],
|
||||
yField: 'Profit',
|
||||
seriesField: 'Segment-Indicator',
|
||||
line: {
|
||||
state: {
|
||||
selected: { lineWidth: 3 },
|
||||
selected_reverse: { lineWidth: 1 }
|
||||
}
|
||||
},
|
||||
point: {
|
||||
state: {
|
||||
selected: { fill: 'yellow' },
|
||||
selected_reverse: { fill: '#ddd' }
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
scales: [
|
||||
{
|
||||
id: 'color',
|
||||
type: 'ordinal',
|
||||
domain: [
|
||||
'Consumer-Quantity',
|
||||
'Corporate-Quantity',
|
||||
'Home Office-Quantity',
|
||||
'Consumer-Sales',
|
||||
'Corporate-Sales',
|
||||
'Home Office-Sales',
|
||||
'Consumer-Profit',
|
||||
'Corporate-Profit',
|
||||
'Home Office-Profit'
|
||||
],
|
||||
range: [
|
||||
'#2E62F1',
|
||||
'#4DC36A',
|
||||
'#FF8406',
|
||||
'#FFCC00',
|
||||
'#4F44CF',
|
||||
'#5AC8FA',
|
||||
'#003A8C',
|
||||
'#B08AE2',
|
||||
'#FF6341',
|
||||
'#98DD62',
|
||||
'#07A199',
|
||||
'#87DBDD'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
style: { padding: 1 }
|
||||
}
|
||||
];
|
||||
const pivotChartOptions = ref({
|
||||
rows: pivotChartRows,
|
||||
columns: pivotChartColumns,
|
||||
indicators: pivotChartIndicators,
|
||||
indicatorsAsCol: false,
|
||||
defaultRowHeight: 200,
|
||||
defaultHeaderRowHeight: 50,
|
||||
defaultColWidth: 280,
|
||||
defaultHeaderColWidth: 100,
|
||||
indicatorTitle: '指标',
|
||||
autoWrapText: true,
|
||||
corner: {
|
||||
titleOnDimension: 'row',
|
||||
headerStyle: { autoWrapText: true }
|
||||
},
|
||||
legends: {
|
||||
orient: 'bottom',
|
||||
type: 'discrete',
|
||||
data: [
|
||||
{ label: 'Consumer-Quantity', shape: { fill: '#2E62F1', symbolType: 'circle' } },
|
||||
{ label: 'Consumer-Quantity', shape: { fill: '#4DC36A', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Quantity', shape: { fill: '#FF8406', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Sales', shape: { fill: '#FFCC00', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Sales', shape: { fill: '#4F44CF', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Sales', shape: { fill: '#5AC8FA', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Profit', shape: { fill: '#003A8C', symbolType: 'square' } },
|
||||
{ label: 'Consumer-Profit', shape: { fill: '#B08AE2', symbolType: 'square' } },
|
||||
{ label: 'Home Office-Profit', shape: { fill: '#FF6341', symbolType: 'square' } }
|
||||
]
|
||||
},
|
||||
theme: {
|
||||
bodyStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1] },
|
||||
headerStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '#CCE0FF' } },
|
||||
rowHeaderStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '#CCE0FF' } },
|
||||
cornerHeaderStyle: { borderColor: 'gray', borderLineWidth: [0, 1, 1, 0], hover: { cellBgColor: '' } },
|
||||
cornerRightTopCellStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||
cornerLeftBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '' } },
|
||||
cornerRightBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1], hover: { cellBgColor: '' } },
|
||||
rightFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||
bottomFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 1], hover: { cellBgColor: '' } },
|
||||
selectionStyle: { cellBgColor: '', cellBorderColor: '' },
|
||||
frameStyle: { borderLineWidth: 0 }
|
||||
}
|
||||
});
|
||||
const pivotChartRecords = ref({} as any);
|
||||
const handleLegendItemClick = (args: { value: any }) => {
|
||||
(pivotChartRef?.value as any)?.vTableInstance.updateFilterRules([
|
||||
{
|
||||
filterKey: 'Segment-Indicator',
|
||||
filteredValues: args.value
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
// custom layout list table
|
||||
const customLayoutListTableRef = ref(null);
|
||||
const customLayoutListTableOptions = ref({
|
||||
defaultRowHeight: 80
|
||||
});
|
||||
const customLayoutListTableRecords = ref([
|
||||
{
|
||||
bloggerId: 1,
|
||||
bloggerName: 'Virtual Anchor Xiaohua',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
|
||||
introduction:
|
||||
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
|
||||
fansCount: 400,
|
||||
worksCount: 10,
|
||||
viewCount: 5,
|
||||
city: 'Dream City',
|
||||
tags: ['game', 'anime', 'food']
|
||||
},
|
||||
{
|
||||
bloggerId: 2,
|
||||
bloggerName: 'Virtual anchor little wolf',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
|
||||
fansCount: 800,
|
||||
worksCount: 20,
|
||||
viewCount: 15,
|
||||
city: 'City of Music',
|
||||
tags: ['music', 'travel', 'photography']
|
||||
},
|
||||
{
|
||||
bloggerId: 3,
|
||||
bloggerName: 'Virtual anchor bunny',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
|
||||
fansCount: 600,
|
||||
worksCount: 15,
|
||||
viewCount: 10,
|
||||
city: 'City of Art',
|
||||
tags: ['painting', 'handmade', 'beauty makeup']
|
||||
},
|
||||
{
|
||||
bloggerId: 4,
|
||||
bloggerName: 'Virtual anchor kitten',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
|
||||
fansCount: 1000,
|
||||
worksCount: 30,
|
||||
viewCount: 20,
|
||||
city: 'Health City',
|
||||
tags: ['dance', 'fitness', 'cooking']
|
||||
},
|
||||
{
|
||||
bloggerId: 5,
|
||||
bloggerName: 'Virtual anchor Bear',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
|
||||
fansCount: 1200,
|
||||
worksCount: 25,
|
||||
viewCount: 18,
|
||||
city: 'City of Wisdom',
|
||||
tags: ['Movie', 'Literature']
|
||||
},
|
||||
{
|
||||
bloggerId: 6,
|
||||
bloggerName: 'Virtual anchor bird',
|
||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
|
||||
introduction:
|
||||
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
|
||||
fansCount: 900,
|
||||
worksCount: 12,
|
||||
viewCount: 8,
|
||||
city: 'Happy City',
|
||||
tags: ['music', 'performance', 'variety']
|
||||
}
|
||||
]);
|
||||
const customLayoutListTableColumnStyle = ref({ fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold' });
|
||||
onMounted(() => {
|
||||
// pivot tablt records
|
||||
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
|
||||
.then(res => res.json())
|
||||
.then(jsonData => {
|
||||
// update record
|
||||
pivotTableRecords.value = jsonData;
|
||||
});
|
||||
|
||||
// pivot chart records
|
||||
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// update record
|
||||
pivotChartRecords.value = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full">
|
||||
<NSpace vertical :size="16">
|
||||
<NCard title="List Table" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<ListTable ref="listTableRef" :options="{}" :records="listRecords" height="400px">
|
||||
<ListColumn field="Order ID" title="Order ID" width="auto" />
|
||||
<ListColumn field="Customer ID" title="Customer ID" width="auto" />
|
||||
<ListColumn field="Product Name" title="Product Name" width="auto" />
|
||||
<ListColumn field="Category" title="Category" width="auto" />
|
||||
<ListColumn field="Sub-Category" title="Sub-Category" width="auto" />
|
||||
<ListColumn field="Region" title="Region" width="auto" />
|
||||
<ListColumn field="City" title="City" width="auto" />
|
||||
<ListColumn field="Order Date" title="Order Date" width="auto" />
|
||||
<ListColumn field="Quantity" title="Quantity" width="auto" />
|
||||
<ListColumn field="Sales" title="Sales" width="auto" />
|
||||
<ListColumn field="Profit" title="Profit" width="auto" />
|
||||
</ListTable>
|
||||
</NCard>
|
||||
|
||||
<NCard title="Pivot Table" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<PivotTable ref="pivotTableRef" :options="pivotTableOptions" :records="pivotTableRecords" height="400px">
|
||||
<PivotColumnDimension
|
||||
title="Category"
|
||||
dimension-key="Category"
|
||||
:header-style="{ textStick: true }"
|
||||
width="auto"
|
||||
/>
|
||||
<PivotRowDimension
|
||||
v-for="(row, index) in pivotTableRows"
|
||||
:key="index"
|
||||
:dimension-key="row.dimensionKey"
|
||||
:title="row.title"
|
||||
:header-style="row.headerStyle"
|
||||
:width="row.width"
|
||||
/>
|
||||
<PivotIndicator
|
||||
v-for="(indicator, index) in pivotTableIndicators"
|
||||
:key="index"
|
||||
:indicator-key="indicator.indicatorKey"
|
||||
:title="indicator.title"
|
||||
:width="indicator.width"
|
||||
:show-sort="indicator.showSort"
|
||||
:header-style="indicator.headerStyle"
|
||||
:format="indicator.format"
|
||||
:style="indicator.style"
|
||||
/>
|
||||
<PivotCorner title-on-dimension="row" />
|
||||
<Menu menu-type="html" :context-menu-items="['copy', 'paste', 'delete', '...']" />
|
||||
</PivotTable>
|
||||
</NCard>
|
||||
|
||||
<NCard title="Pivot Chart" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<PivotChart
|
||||
ref="pivotChartRef"
|
||||
:options="pivotChartOptions"
|
||||
:records="pivotChartRecords"
|
||||
height="800px"
|
||||
@on-legend-item-click="handleLegendItemClick"
|
||||
/>
|
||||
</NCard>
|
||||
|
||||
<NCard title="Custom Component" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<ListTable
|
||||
ref="customLayoutListTableRef"
|
||||
:options="customLayoutListTableOptions"
|
||||
:records="customLayoutListTableRecords"
|
||||
height="400px"
|
||||
>
|
||||
<!-- Order Number Column -->
|
||||
<ListColumn field="bloggerId" title="order number" width="100" />
|
||||
|
||||
<!-- Anchor Nickname Column with Custom Layout -->
|
||||
<ListColumn field="bloggerName" title="anchor nickname" :width="330">
|
||||
<template #customLayout="{ record, height, width }">
|
||||
<Group :height="height" :width="width" display="flex" flex-direction="row" flex-wrap="nowrap">
|
||||
<!-- Avatar Group -->
|
||||
<Group
|
||||
:height="height"
|
||||
:width="60"
|
||||
display="flex"
|
||||
flex-direction="column"
|
||||
align-items="center"
|
||||
justify-content="space-around"
|
||||
fill="red"
|
||||
:opacity="0.1"
|
||||
>
|
||||
<Image id="icon0" :width="50" :height="50" :image="record.bloggerAvatar" :corner-radius="25" />
|
||||
</Group>
|
||||
<!-- Blogger Info Group -->
|
||||
<Group :height="height" :width="width - 60" display="flex" flex-direction="column" flex-wrap="nowrap">
|
||||
<Group
|
||||
:height="height / 2"
|
||||
:width="width - 60"
|
||||
display="flex"
|
||||
flex-wrap="wrap"
|
||||
align-items="center"
|
||||
fill="orange"
|
||||
:opacity="0.1"
|
||||
>
|
||||
<Text
|
||||
:text="record.bloggerName"
|
||||
:font-size="13"
|
||||
font-family="sans-serif"
|
||||
fill="black"
|
||||
:bounds-padding="[0, 0, 0, 10]"
|
||||
/>
|
||||
<Image
|
||||
id="location"
|
||||
image="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/location.svg"
|
||||
:width="15"
|
||||
:height="15"
|
||||
:bounds-padding="[0, 0, 0, 10]"
|
||||
cursor="pointer"
|
||||
/>
|
||||
<Text :text="record.city" :font-size="11" font-family="sans-serif" fill="#6f7070" />
|
||||
</Group>
|
||||
<!-- Tags Group -->
|
||||
<Group
|
||||
:height="height / 2"
|
||||
:width="width - 60"
|
||||
display="flex"
|
||||
align-items="center"
|
||||
fill="yellow"
|
||||
:opacity="0.1"
|
||||
>
|
||||
<Tag
|
||||
v-for="tag in record?.tags"
|
||||
:key="tag"
|
||||
:text="tag"
|
||||
:text-style="{ fontSize: 10, fontFamily: 'sans-serif', fill: 'rgb(51, 101, 238)' }"
|
||||
:panel="{ visible: true, fill: '#f4f4f2', cornerRadius: 5 }"
|
||||
:space="5"
|
||||
:bounds-padding="[0, 0, 0, 5]"
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
</template>
|
||||
</ListColumn>
|
||||
|
||||
<!-- Other Columns -->
|
||||
<ListColumn
|
||||
field="fansCount"
|
||||
title="Fans Count"
|
||||
width="120"
|
||||
:field-format="rec => rec.fansCount + 'w'"
|
||||
:style="customLayoutListTableColumnStyle"
|
||||
/>
|
||||
<ListColumn field="worksCount" title="Works Count" :style="customLayoutListTableColumnStyle" width="135" />
|
||||
<ListColumn
|
||||
field="viewCount"
|
||||
title="View Count"
|
||||
width="120"
|
||||
:field-format="rec => rec.viewCount + 'w'"
|
||||
:style="customLayoutListTableColumnStyle"
|
||||
/>
|
||||
</ListTable>
|
||||
</NCard>
|
||||
|
||||
<NCard :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||
<WebSiteLink label="More VTable Demos: " link="https://www.visactor.com/vtable/example" />
|
||||
</NCard>
|
||||
</NSpace>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user