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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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