image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-09-20 02:34:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(dashboard): 移除仪表盘中i18n相关

Browse Source
This commit is contained in:
悠静萝莉 2024-08-31 05:18:12 +08:00
parent c4f15a8887
commit 2d7757c3ba
No known key found for this signature in database
GPG Key ID: 4EDF1CA1CEA8EBCC
8 changed files with 62 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/dashboard/base/components/MiddleChart.vue
View File

@ -1,12 +1,7 @@
<template>
<t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="9">
<t-card
:title="$t('pages.dashboardBase.topPanel.analysis.title')"
:subtitle="currentMonth"
class="dashboard-chart-card"
:bordered="false"
>
<t-card title="统计数据" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
<template #actions>
<div class="dashboard-chart-title-container">
<t-date-range-picker
@ -26,12 +21,7 @@
</t-card>
</t-col>
<t-col :xs="12" :xl="3">
<t-card
:title="$t('pages.dashboardBase.topPanel.analysis.channels')"
:subtitle="currentMonth"
class="dashboard-chart-card"
:bordered="false"
>
<t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
<div
id="countContainer"
class="dashboard-chart-container"

22
src/pages/dashboard/base/components/OutputOverview.vue
View File

@ -4,8 +4,8 @@
<t-col :xs="12" :xl="9">
<t-card
:bordered="false"
:title="$t('pages.dashboardBase.outputOverview.title')"
:subtitle="$t('pages.dashboardBase.outputOverview.subtitle')"
title="出入库概览"
subtitle="(件)"
:class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
>
<template #actions>
@ -23,34 +23,26 @@
<t-col :xs="12" :xl="3">
<t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }">
<template #actions>
<t-button>{{ $t('pages.dashboardBase.outputOverview.export') }}</t-button>
<t-button>导出数据</t-button>
</template>
<t-row>
<t-col :xs="6" :xl="12">
<t-card
:bordered="false"
:subtitle="$t('pages.dashboardBase.outputOverview.month.input')"
class="inner-card"
>
<t-card :bordered="false" subtitle="本月入库总计（件）" class="inner-card">
<div class="inner-card__content">
<div class="inner-card__content-title">1726</div>
<div class="inner-card__content-footer">
{{ $t('pages.dashboardBase.outputOverview.since') }}
自从上周以来
<trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
</div>
</div>
</t-card>
</t-col>
<t-col :xs="6" :xl="12">
<t-card
:bordered="false"
:subtitle="$t('pages.dashboardBase.outputOverview.month.output')"
class="inner-card"
>
<t-card :bordered="false" subtitle="本月出库总计（件）" class="inner-card">
<div class="inner-card__content">
<div class="inner-card__content-title">226</div>
<div class="inner-card__content-footer">
{{ $t('pages.dashboardBase.outputOverview.since') }}
自从上周以来
<trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
</div>
</div>

41
src/pages/dashboard/base/components/RankList.vue
View File

@ -1,11 +1,11 @@
<template>
<t-row :gutter="16" class="row-container">
<t-col :xs="12" :xl="6">
<t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
<t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
<template #actions>
<t-radio-group default-value="dateVal" variant="default-filled">
<t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button>
<t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button>
<t-radio-button value="dateVal">本周</t-radio-button>
<t-radio-button value="monthVal">近三月</t-radio-button>
</t-radio-group>
</template>
<t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
@ -20,19 +20,17 @@
</span>
</template>
<template #operation="slotProps">
<t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
$t('pages.dashboardBase.rankList.info')
}}</t-link>
<t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
</template>
</t-table>
</t-card>
</t-col>
<t-col :xs="12" :xl="6">
<t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
<t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
<template #actions>
<t-radio-group default-value="dateVal" variant="default-filled">
<t-radio-button value="dateVal">{{ $t('pages.dashboardBase.rankList.week') }}</t-radio-button>
<t-radio-button value="monthVal">{{ $t('pages.dashboardBase.rankList.month') }}</t-radio-button>
<t-radio-button value="dateVal">本周</t-radio-button>
<t-radio-button value="monthVal">近三月</t-radio-button>
</t-radio-group>
</template>
<t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
@ -45,9 +43,7 @@
<trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
</template>
<template #operation="slotProps">
<t-link theme="primary" @click="rehandleClickOp(slotProps)">{{
$t('pages.dashboardBase.rankList.info')
}}</t-link>
<t-link theme="primary" @click="rehandleClickOp(slotProps)">详情</t-link>
</template>
</t-table>
</t-card>
@ -59,7 +55,6 @@
import type { TdBaseTableProps } from 'tdesign-vue-next';
import Trend from '@/components/trend/index.vue';
import { t } from '@/locales';
import { BUY_TEND_LIST, SALE_TEND_LIST } from '../constants';
@ -67,7 +62,7 @@ const SALE_COLUMNS: TdBaseTableProps['columns'] = [
{
align: 'center',
colKey: 'index',
title: t('pages.dashboardBase.saleColumns.index'),
title: '排名',
width: 70,
fixed: 'left',
},
@ -75,25 +70,25 @@ const SALE_COLUMNS: TdBaseTableProps['columns'] = [
align: 'left',
ellipsis: true,
colKey: 'productName',
title: t('pages.dashboardBase.saleColumns.productName'),
title: '客户名称',
width: 150,
},
{
align: 'center',
colKey: 'growUp',
width: 70,
title: t('pages.dashboardBase.saleColumns.growUp'),
title: '较上周',
},
{
align: 'center',
colKey: 'count',
title: t('pages.dashboardBase.saleColumns.count'),
title: '订单量',
width: 70,
},
{
align: 'center',
colKey: 'operation',
title: t('pages.dashboardBase.saleColumns.operation'),
title: '操作',
width: 70,
fixed: 'right',
},
@ -103,7 +98,7 @@ const BUY_COLUMNS: TdBaseTableProps['columns'] = [
{
align: 'center',
colKey: 'index',
title: t('pages.dashboardBase.buyColumns.index'),
title: '排名',
width: 70,
fixed: 'left',
},
@ -112,24 +107,24 @@ const BUY_COLUMNS: TdBaseTableProps['columns'] = [
ellipsis: true,
colKey: 'productName',
width: 150,
title: t('pages.dashboardBase.buyColumns.productName'),
title: '客户名称',
},
{
align: 'center',
colKey: 'growUp',
width: 70,
title: t('pages.dashboardBase.buyColumns.growUp'),
title: '较上周',
},
{
align: 'center',
colKey: 'count',
title: t('pages.dashboardBase.buyColumns.count'),
title: '订单量',
width: 70,
},
{
align: 'center',
colKey: 'operation',
title: t('pages.dashboardBase.buyColumns.operation'),
title: '操作',
width: 70,
fixed: 'right',
},

3
src/pages/dashboard/base/components/TopPanel.vue
View File

@ -32,7 +32,7 @@
<template #footer>
<div class="dashboard-item-bottom">
<div class="dashboard-item-block">
{{ $t('pages.dashboardBase.topPanel.cardTips') }}
自从上周以来
<trend
class="dashboard-item-trend"
:type="item.upTrend ? 'up' : 'down'"
@ -64,7 +64,6 @@ import { nextTick, onMounted, ref, watch } from 'vue';
// 导入样式
import Trend from '@/components/trend/index.vue';
import { t } from '@/locales';
import { useSettingStore } from '@/store';
import { changeChartsTheme } from '@/utils/color';

19
src/pages/dashboard/base/index.ts
View File

@ -2,11 +2,10 @@ import dayjs from 'dayjs';
import { EChartsOption } from 'echarts';
import { TChartColor } from '@/config/color';
import { t } from '@/locales/index';
import { getRandomArray } from '@/utils/charts';
import { getChartListColor } from '@/utils/color';
/** 首页 dashboard 折线图 */
/** 首页 仪表盘 折线图 */
export function constructInitDashboardDataset(type: string) {
const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
@ -164,16 +163,16 @@ export function constructInitDataset({
left: 'center',
bottom: '0',
orient: 'horizontal',
data: [t('pages.dashboardBase.chart.thisMonth'), t('pages.dashboardBase.chart.lastMonth')],
data: ['本月', '上月'],
},
series: [
{
name: t('pages.dashboardBase.chart.thisMonth'),
name: '本月',
data: outArray,
type: 'bar',
},
{
name: t('pages.dashboardBase.chart.lastMonth'),
name: '本月',
data: inArray,
type: 'bar',
},
@ -233,7 +232,7 @@ export function getLineChartDataSet({
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: [t('pages.dashboardBase.chart.thisMonth'), t('pages.dashboardBase.chart.lastMonth')],
data: ['本月', '上月'],
textStyle: {
fontSize: 12,
color: placeholderColor,
@ -265,7 +264,7 @@ export function getLineChartDataSet({
},
series: [
{
name: t('pages.dashboardBase.chart.thisMonth'),
name: '本月',
data: outArray,
type: 'line',
smooth: false,
@ -281,7 +280,7 @@ export function getLineChartDataSet({
},
},
{
name: t('pages.dashboardBase.chart.lastMonth'),
name: '上月',
data: inArray,
type: 'line',
smooth: false,
@ -389,9 +388,9 @@ export function getPieChartDataSet({
data: [
{
value: 1048,
name: t('pages.dashboardBase.topPanel.analysis.channel1'),
name: '线上',
},
{ value: radius * 7, name: t('pages.dashboardBase.topPanel.analysis.channel2') },
{ value: radius * 7, name: '门店' },
],
},
],

22
src/pages/dashboard/detail/constants.ts
View File

@ -1,34 +1,32 @@
import { t } from '@/locales';
export const PANE_LIST_DATA = [
{
title: t('pages.dashboardDetail.topPanel.paneList.totalRequest'),
title: '总申请数（次）',
number: '1126',
upTrend: '10%',
},
{
title: t('pages.dashboardDetail.topPanel.paneList.suppliers'),
title: '供应商数量（个）',
number: '13',
downTrend: '13%',
},
{
title: t('pages.dashboardDetail.topPanel.paneList.productCategory'),
title: '采购商品品类（类）',
number: '4',
upTrend: '10%',
},
{
title: t('pages.dashboardDetail.topPanel.paneList.applicant'),
title: '申请人数量（人）',
number: 90,
downTrend: '44%',
leftType: 'icon-file-paste',
},
{
title: t('pages.dashboardDetail.topPanel.paneList.completionRate'),
title: '申请完成率（%）',
number: 80.5,
upTrend: '70%',
},
{
title: t('pages.dashboardDetail.topPanel.paneList.arrivalRate'),
title: '到货及时率（%）',
number: 78,
upTrend: '16%',
},
@ -36,17 +34,17 @@ export const PANE_LIST_DATA = [
export const PRODUCT_LIST = [
{
description: t('pages.dashboardDetail.sslDescription'),
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
index: 1,
isSetup: true,
name: t('pages.dashboardDetail.ssl'),
name: 'SSL证书',
type: 4,
},
{
description: t('pages.dashboardDetail.sslDescription'),
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
index: 1,
isSetup: true,
name: t('pages.dashboardDetail.ssl'),
name: 'SSL证书',
type: 4,
},
];

31
src/pages/dashboard/detail/index.ts
View File

@ -1,9 +1,9 @@
import dayjs from 'dayjs';
import { TChartColor } from '@/config/color';
import { t } from '@/locales';
import { getDateArray, getRandomArray } from '@/utils/charts';
import { getChartListColor } from '@/utils/color';
/**
* 散点图数据
*
@ -88,10 +88,7 @@ export function getScatterDataSet({
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: [
t(`pages.dashboardDetail.procurement.goods.massageMachine`),
t(`pages.dashboardDetail.procurement.goods.coffeeMachine`),
],
data: ['按摩仪', '咖啡机'],
itemHeight: 8,
itemWidth: 8,
textStyle: {
@ -101,13 +98,13 @@ export function getScatterDataSet({
},
series: [
{
name: t(`pages.dashboardDetail.procurement.goods.massageMachine`),
name: '按摩仪',
symbolSize: 10,
data: outArray.reverse(),
type: 'scatter',
},
{
name: t(`pages.dashboardDetail.procurement.goods.coffeeMachine`),
name: '咖啡机',
symbolSize: 10,
data: inArray.concat(inArray.reverse()),
type: 'scatter',
@ -122,10 +119,7 @@ export function getFolderLineDataSet({
placeholderColor,
borderColor,
}: { dateTime?: Array<string> } & TChartColor) {
let dateArray = [];
for (let i = 1; i < 7; i++) {
dateArray.push(t(`pages.dashboardDetail.chart.week${i}`));
}
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
if (dateTime.length > 0) {
const divideNum = 7;
dateArray = getDateArray(dateTime, divideNum);
@ -142,12 +136,7 @@ export function getFolderLineDataSet({
left: 'center',
bottom: '0',
orient: 'horizontal', // legend 横向布局。
data: [
t(`pages.dashboardDetail.procurement.goods.cup`),
t(`pages.dashboardDetail.procurement.goods.tea`),
t(`pages.dashboardDetail.procurement.goods.honey`),
t(`pages.dashboardDetail.procurement.goods.flour`),
],
data: ['杯子', '茶叶', '蜂蜜', '面粉'],
textStyle: {
fontSize: 12,
color: placeholderColor,
@ -186,7 +175,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: t(`pages.dashboardDetail.procurement.goods.cup`),
name: '杯子',
stack: '总量',
data: [
getRandomArray(),
@ -207,7 +196,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: t(`pages.dashboardDetail.procurement.goods.tea`),
name: '茶叶',
stack: '总量',
data: [
getRandomArray(),
@ -228,7 +217,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: t(`pages.dashboardDetail.procurement.goods.honey`),
name: '蜂蜜',
stack: '总量',
data: [
getRandomArray(),
@ -249,7 +238,7 @@ export function getFolderLineDataSet({
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
name: t(`pages.dashboardDetail.procurement.goods.flour`),
name: '面粉',
stack: '总量',
data: [
getRandomArray(),

14
src/pages/dashboard/detail/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="dashboard-panel-detail">
<t-card :title="$t('pages.dashboardDetail.topPanel.title')" class="dashboard-detail-card" :bordered="false">
<t-card title="本月采购申请情况" class="dashboard-detail-card" :bordered="false">
<t-row :gutter="[16, 16]">
<t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
<t-card class="dashboard-list-card" :description="item.title">
<div class="dashboard-list-card__number">{{ item.number }}</div>
<div class="dashboard-list-card__text">
<div class="dashboard-list-card__text-left">
{{ $t('pages.dashboardDetail.topPanel.quarter') }}
环比
<trend class="icon" :type="item.upTrend ? 'up' : 'down'" :describe="item.upTrend || item.downTrend" />
</div>
<t-icon name="chevron-right" />
@ -18,7 +18,7 @@
</t-card>
<t-row :gutter="[16, 16]" class="row-margin">
<t-col :xs="12" :xl="9">
<t-card class="dashboard-detail-card" :title="$t('pages.dashboardDetail.procurement.title')" :bordered="false">
<t-card class="dashboard-detail-card" title="采购商品申请趋势" subtitle="(件)" :bordered="false">
<template #actions>
<t-date-range-picker
class="card-date-picker-container"
@ -41,11 +41,7 @@
/>
</t-col>
</t-row>
<t-card
:class="['dashboard-detail-card', 'row-margin']"
:title="$t('pages.dashboardDetail.satisfaction.title')"
:bordered="false"
>
<t-card :class="['dashboard-detail-card', 'row-margin']" title="采购商品满意度分布" :bordered="false">
<template #actions>
<t-date-range-picker
class="card-date-picker-container"
@ -55,7 +51,7 @@
style="display: inline-block; margin-right: var(--td-comp-margin-s); width: 248px"
@change="onSatisfyChange"
/>
<t-button class="card-date-button"> {{ $t('pages.dashboardDetail.satisfaction.export') }} </t-button>
<t-button class="card-date-button"> 导出数据 </t-button>
</template>
<div id="scatterContainer" style="width: 100%; height: 434px" />
</t-card>