mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-11-10 12:48:23 +08:00
refactor(dashboard): 移除仪表盘中i18n相关
This commit is contained in:
parent
c4f15a8887
commit
2d7757c3ba
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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',
|
||||||
},
|
},
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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: '门店' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -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(),
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user