mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 02:45:30 +08:00
Feat/updateconfig (#2)
* feat: update eslint config and npmpkg * feat: update color config * feat: eslint update * feat: update ts config Co-authored-by: yue.peng <yue.peng@ly.com> Co-authored-by: pengYYYYY <pengyue970715@gmail.com>
This commit is contained in:
PY
GitHub
parent
07b63e32fa
commit
75df4f1672
|
|
@ -2,29 +2,12 @@ snapshot*
|
||||||
dist
|
dist
|
||||||
lib
|
lib
|
||||||
es
|
es
|
||||||
|
esm
|
||||||
node_modules
|
node_modules
|
||||||
common
|
src/_common
|
||||||
static
|
static
|
||||||
cypress
|
cypress
|
||||||
script/test/cypress
|
script/test/cypress
|
||||||
_site
|
_site
|
||||||
temp*
|
temp*
|
||||||
static/
|
static/
|
||||||
|
|
||||||
examples
|
|
||||||
site/*
|
|
||||||
!site/v3.js
|
|
||||||
src/addon
|
|
||||||
src/calendar
|
|
||||||
src/locale
|
|
||||||
src/upload
|
|
||||||
src/dropdown
|
|
||||||
src/transfer
|
|
||||||
src/time-picker
|
|
||||||
src/utils
|
|
||||||
src/textarea
|
|
||||||
typings
|
|
||||||
dist
|
|
||||||
es
|
|
||||||
lib
|
|
||||||
types
|
|
||||||
3
globals.d.ts
vendored
3
globals.d.ts
vendored
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
// 通用声明
|
// 通用声明
|
||||||
declare type ClassName = { [className: string]: any } | ClassName[] | string;
|
declare type ClassName = { [className: string]: any } | ClassName[] | string;
|
||||||
|
|
||||||
|
|
@ -13,5 +12,3 @@ declare module '*.svg' {
|
||||||
const CONTENT: string;
|
const CONTENT: string;
|
||||||
export default CONTENT;
|
export default CONTENT;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>TDesign Starter Vue Next</title>
|
<title>TDesign Vue Next Starter</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<router-view />
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@ export default defineComponent({
|
||||||
&-container {
|
&-container {
|
||||||
padding: 24px 32px;
|
padding: 24px 32px;
|
||||||
margin: 16px 0;
|
margin: 16px 0;
|
||||||
background: #fff;
|
background: @bg-color-container;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -135,7 +135,7 @@ export default defineComponent({
|
||||||
|
|
||||||
&-describe {
|
&-describe {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0, 0, 0, 0.6);
|
color: @bg-color-container;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<card>
|
<div class="result-container">
|
||||||
<div class="result-container">
|
<img class="result-bg-img" :src="bgUrl" />
|
||||||
<img class="result-bg-img" :src="bgUrl">
|
<div class="result-title">
|
||||||
<div class="result-tip">
|
{{ title }}
|
||||||
{{ tip }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<router-link class="tdesign-pro-main-link" to="/">
|
|
||||||
<t-button theme="primary" variant="text">
|
|
||||||
返回首页
|
|
||||||
</t-button>
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</card>
|
<div class="result-tip">
|
||||||
|
{{ tip }}
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, PropType } from 'vue';
|
import { defineComponent, PropType } from 'vue';
|
||||||
import Card from '@/components/card/index.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Result',
|
name: 'Result',
|
||||||
components: { Card },
|
|
||||||
props: {
|
props: {
|
||||||
bgUrl: {
|
bgUrl: {
|
||||||
type: String as PropType<string>,
|
type: String as PropType<string>,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
title: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
tip: {
|
tip: {
|
||||||
type: String as PropType<string>,
|
type: String as PropType<string>,
|
||||||
default: '',
|
default: '',
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<img :class="className" :src="url">
|
<img :class="className" :src="url" />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, computed, PropType } from 'vue';
|
import { defineComponent, computed, PropType } from 'vue';
|
||||||
|
|
@ -35,7 +35,6 @@ export default defineComponent({
|
||||||
@import url('@/style/index.less');
|
@import url('@/style/index.less');
|
||||||
|
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,14 +12,7 @@
|
||||||
<path d="M11.5 8L8 11.5L4.5 8" stroke="currentColor" stroke-width="1.5" />
|
<path d="M11.5 8L8 11.5L4.5 8" stroke="currentColor" stroke-width="1.5" />
|
||||||
<path d="M8 11L8 4" stroke="currentColor" stroke-width="1.5" />
|
<path d="M8 11L8 4" stroke="currentColor" stroke-width="1.5" />
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
v-else
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path d="M4.5 8L8 4.5L11.5 8" stroke="currentColor" stroke-width="1.5" />
|
<path d="M4.5 8L8 4.5L11.5 8" stroke="currentColor" stroke-width="1.5" />
|
||||||
<path d="M8 5V12" stroke="currentColor" stroke-width="1.5" />
|
<path d="M8 5V12" stroke="currentColor" stroke-width="1.5" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -70,6 +63,7 @@ export default defineComponent({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
@import '@/style/variables.less';
|
||||||
.trend {
|
.trend {
|
||||||
&-container {
|
&-container {
|
||||||
&__up {
|
&__up {
|
||||||
|
|
|
||||||
|
|
@ -52,8 +52,8 @@ const COLOR_TOKEN: ColorSeries = {
|
||||||
},
|
},
|
||||||
CYAN: {
|
CYAN: {
|
||||||
'@brand-color': '#0594FA',
|
'@brand-color': '#0594FA',
|
||||||
'@brand-color-1': '#ECF2FE',
|
'@brand-color-1': '#D6F7FF',
|
||||||
'@brand-color-2': '#D4E3FC',
|
'@brand-color-2': '#85DAFF',
|
||||||
'@brand-color-3': '#BBD3FB',
|
'@brand-color-3': '#BBD3FB',
|
||||||
'@brand-color-4': '#96BBF8',
|
'@brand-color-4': '#96BBF8',
|
||||||
'@brand-color-5': '#699EF5',
|
'@brand-color-5': '#699EF5',
|
||||||
|
|
@ -159,7 +159,7 @@ export function getBrandColor(type: string): ColorToken {
|
||||||
|
|
||||||
export function getColorList(colorArray: ColorToken[]): string[] {
|
export function getColorList(colorArray: ColorToken[]): string[] {
|
||||||
const pureColorList = [];
|
const pureColorList = [];
|
||||||
colorArray.map(colorToken => Object.keys(colorToken).map(key => pureColorList.push(colorToken[key])));
|
colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
|
||||||
|
|
||||||
return pureColorList;
|
return pureColorList;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ export default [
|
||||||
path: '/dashboard',
|
path: '/dashboard',
|
||||||
icon: 'dashboard',
|
icon: 'dashboard',
|
||||||
title: '仪表盘',
|
title: '仪表盘',
|
||||||
component: '../Layouts/index.tsx',
|
component: '../layouts/index.tsx',
|
||||||
redirect: '/dashboard/base',
|
redirect: '/dashboard/base',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
@ -22,7 +22,7 @@ export default [
|
||||||
path: '/list',
|
path: '/list',
|
||||||
icon: 'view-module',
|
icon: 'view-module',
|
||||||
title: '列表页',
|
title: '列表页',
|
||||||
component: '../Layouts/index.tsx',
|
component: '../layouts/index.tsx',
|
||||||
redirect: '/list/base',
|
redirect: '/list/base',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
@ -51,7 +51,7 @@ export default [
|
||||||
path: '/form',
|
path: '/form',
|
||||||
icon: 'queue',
|
icon: 'queue',
|
||||||
title: '表单页',
|
title: '表单页',
|
||||||
component: '../Layouts/index.tsx',
|
component: '../layouts/index.tsx',
|
||||||
redirect: '/form/base',
|
redirect: '/form/base',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
@ -70,7 +70,7 @@ export default [
|
||||||
path: '/detail',
|
path: '/detail',
|
||||||
icon: 'layers',
|
icon: 'layers',
|
||||||
title: '详情页',
|
title: '详情页',
|
||||||
component: '../Layouts/index.tsx',
|
component: '../layouts/index.tsx',
|
||||||
redirect: '/detail/base',
|
redirect: '/detail/base',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
@ -101,7 +101,7 @@ export default [
|
||||||
path: '/result',
|
path: '/result',
|
||||||
icon: 'check-circle',
|
icon: 'check-circle',
|
||||||
title: '结果页',
|
title: '结果页',
|
||||||
component: '../Layouts/index.tsx',
|
component: '../layouts/index.tsx',
|
||||||
redirect: '/result/success',
|
redirect: '/result/success',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
@ -145,7 +145,7 @@ export default [
|
||||||
path: '/user',
|
path: '/user',
|
||||||
icon: 'user-circle',
|
icon: 'user-circle',
|
||||||
title: '个人页',
|
title: '个人页',
|
||||||
component: '../Layouts/index.tsx',
|
component: '../layouts/index.tsx',
|
||||||
redirect: '/user/index',
|
redirect: '/user/index',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
@ -159,7 +159,7 @@ export default [
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
title: '登录页',
|
title: '登录页',
|
||||||
component: '../Layouts/blank.vue',
|
component: '../layouts/blank.vue',
|
||||||
icon: 'chevron-right-rectangle',
|
icon: 'chevron-right-rectangle',
|
||||||
redirect: '/login/index',
|
redirect: '/login/index',
|
||||||
children: [
|
children: [
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ export default {
|
||||||
showFooter: true,
|
showFooter: true,
|
||||||
isSidebarCompact: false,
|
isSidebarCompact: false,
|
||||||
showBreadcrumb: false,
|
showBreadcrumb: false,
|
||||||
theme: 'dark',
|
mode: 'light',
|
||||||
layout: 'side',
|
layout: 'side',
|
||||||
splitMenu: false,
|
splitMenu: false,
|
||||||
isFooterAside: false,
|
isFooterAside: false,
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
|
import STYLE_CONFIG from '@/config/style';
|
||||||
|
|
||||||
export interface ResDataType {
|
export interface ResDataType {
|
||||||
code: number,
|
code: number;
|
||||||
data: any
|
data: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MenuRoute {
|
export interface MenuRoute {
|
||||||
|
|
@ -9,3 +11,9 @@ export interface MenuRoute {
|
||||||
icon?: string;
|
icon?: string;
|
||||||
children: MenuRoute[];
|
children: MenuRoute[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type ModeType = 'dark' | 'light';
|
||||||
|
|
||||||
|
export type SettingType = typeof STYLE_CONFIG;
|
||||||
|
|
||||||
|
export type ClassName = { [className: string]: any } | ClassName[] | string;
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,42 @@
|
||||||
@import '@/style/index';
|
@import '@/style/index';
|
||||||
|
|
||||||
@media (max-width: @screen-md-max) {
|
@media (max-width: @screen-md-max) {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-tabs__content {
|
.t-tabs__content {
|
||||||
padding-top: @spacer-3;
|
padding-top: @spacer-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-title-text-default {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-option {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: right !important;
|
||||||
|
|
||||||
|
.dashboard-chart-title-left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-self: left;
|
||||||
|
width: 100%;
|
||||||
|
color: rgba(0, 0, 0, .4);
|
||||||
|
font-size: 15px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard-panel {
|
.dashboard-panel {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.card-container {
|
.card-container {
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
|
|
@ -21,6 +45,10 @@
|
||||||
color: @text-color-primary;
|
color: @text-color-primary;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.t-table-content {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-table th,
|
.t-table th,
|
||||||
|
|
@ -50,7 +78,6 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: black;
|
color: black;
|
||||||
|
|
@ -64,12 +91,12 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
> .t-icon {
|
> .t-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -106,9 +133,7 @@
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// min-width: 300px;
|
|
||||||
height: 320px;
|
height: 320px;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -257,12 +282,12 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
background: #ECF2FE;
|
background: @brand-color-1;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
||||||
.t-icon {
|
.t-icon {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: #0052D9;
|
color: @brand-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -291,7 +316,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-pannel {
|
.overview-pannel {
|
||||||
background-color: white;
|
background-color: @bg-color-container;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,40 @@
|
||||||
import { getBrandColor } from '@/config/color';
|
|
||||||
import dayjs, { Dayjs } from 'dayjs';
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
|
import * as echarts from 'echarts/core';
|
||||||
|
import { getBrandColor } from '@/config/color';
|
||||||
|
import store from '@/store';
|
||||||
|
|
||||||
|
const { state } = store;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 依据主题类型获取颜色
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @param {string} theme
|
||||||
|
* @returns {}
|
||||||
|
*/
|
||||||
|
export function getColorFromTheme(theme: string) {
|
||||||
|
const themeColor = getBrandColor(theme);
|
||||||
|
const themeColorList: Array<string> = [];
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-restricted-syntax
|
||||||
|
for (const key in themeColor) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(themeColor, key)) {
|
||||||
|
const elementColor = themeColor[key];
|
||||||
|
|
||||||
|
themeColorList.push(elementColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return themeColorList;
|
||||||
|
}
|
||||||
|
|
||||||
/** 图表颜色 */
|
/** 图表颜色 */
|
||||||
let chartListColor: Array<string> = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
|
function chartListColor(): Array<string> {
|
||||||
|
const colorList: Array<string> = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
|
||||||
|
const { setting } = state;
|
||||||
|
|
||||||
|
return getColorFromTheme(setting.brandTheme) || colorList;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取表头数据
|
* 获取表头数据
|
||||||
|
|
@ -24,20 +56,6 @@ export function getDateArray(dateTime: string[] = [], divideNum = 10): string[]
|
||||||
|
|
||||||
return timeArray;
|
return timeArray;
|
||||||
}
|
}
|
||||||
export class DashboardBase {
|
|
||||||
/** 更新容器尺寸 */
|
|
||||||
setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void {
|
|
||||||
const container = containerCopyValue;
|
|
||||||
try {
|
|
||||||
if (container && container.style && container.parentElement) {
|
|
||||||
container.style.width = `${container.parentElement.clientWidth - absWidth}px`;
|
|
||||||
container.style.height = `${container.parentElement.clientHeight - absHeight}px`;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// hook
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取随机数
|
* 获取随机数
|
||||||
|
|
@ -47,7 +65,7 @@ export class DashboardBase {
|
||||||
*
|
*
|
||||||
* @memberOf DashboardBase
|
* @memberOf DashboardBase
|
||||||
*/
|
*/
|
||||||
export function getRandomArray(num = 100): number {
|
export function getRandomArray(num = 100) {
|
||||||
let resultNum = Number((Math.random() * num).toFixed(0));
|
let resultNum = Number((Math.random() * num).toFixed(0));
|
||||||
|
|
||||||
if (resultNum <= 1) {
|
if (resultNum <= 1) {
|
||||||
|
|
@ -86,51 +104,66 @@ export function constructInitDashbordDataset(type: string) {
|
||||||
{
|
{
|
||||||
data: [150, 230, 224, 218, 135, 147, 260],
|
data: [150, 230, 224, 218, 135, 147, 260],
|
||||||
type,
|
type,
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 0,
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: '最大值' },
|
||||||
|
{ type: 'min', name: '最小值' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
return lineDataset;
|
return lineDataset;
|
||||||
}
|
}
|
||||||
if (type === 'bar') {
|
const barDataset = {
|
||||||
const barDataset = {
|
...datasetAxis,
|
||||||
...datasetAxis,
|
color: chartListColor(),
|
||||||
color: chartListColor,
|
series: [
|
||||||
series: [
|
{
|
||||||
{
|
data: [
|
||||||
data: [
|
100,
|
||||||
100,
|
130,
|
||||||
130,
|
184,
|
||||||
184,
|
218,
|
||||||
218,
|
{
|
||||||
{
|
value: 135,
|
||||||
value: 135,
|
itemStyle: {
|
||||||
itemStyle: {
|
color: chartListColor()[1],
|
||||||
color: '#ECF2FE',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
value: 118,
|
{
|
||||||
itemStyle: {
|
value: 118,
|
||||||
color: '#ECF2FE',
|
itemStyle: {
|
||||||
},
|
color: chartListColor()[1],
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
value: 60,
|
{
|
||||||
itemStyle: {
|
value: 60,
|
||||||
color: '#ECF2FE',
|
itemStyle: {
|
||||||
},
|
color: chartListColor()[1],
|
||||||
},
|
},
|
||||||
],
|
},
|
||||||
type,
|
],
|
||||||
},
|
type,
|
||||||
],
|
barWidth: 9,
|
||||||
};
|
},
|
||||||
return barDataset;
|
],
|
||||||
}
|
};
|
||||||
|
return barDataset;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 柱状图数据源 */
|
/** 柱状图数据源 */
|
||||||
export function constructInitDataset(dateTime: Array<Dayjs> = []) {
|
export function constructInitDataset(dateTime: Array<string> = []) {
|
||||||
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
|
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
|
||||||
const divideNum = 10;
|
const divideNum = 10;
|
||||||
const timeArray = [];
|
const timeArray = [];
|
||||||
|
|
@ -139,8 +172,8 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
|
||||||
for (let i = 0; i < divideNum; i++) {
|
for (let i = 0; i < divideNum; i++) {
|
||||||
// const [timeArray, inArray, outArray] = dataset;
|
// const [timeArray, inArray, outArray] = dataset;
|
||||||
if (dateTime.length > 0) {
|
if (dateTime.length > 0) {
|
||||||
const dateAbsTime: number = (dateTime[1].valueOf() - dateTime[0].valueOf()) / divideNum;
|
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||||
const enhandTime: number = dateTime[0].valueOf() + dateAbsTime * i;
|
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||||
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
|
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
|
||||||
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -156,16 +189,28 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
|
||||||
// console.log('timeArray..', timeArray);
|
// console.log('timeArray..', timeArray);
|
||||||
|
|
||||||
const dataset = {
|
const dataset = {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: timeArray,
|
data: timeArray,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: chartListColor()[1],
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '5%',
|
top: '5%',
|
||||||
|
|
@ -174,21 +219,34 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
|
||||||
bottom: '60px',
|
bottom: '60px',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
|
icon: 'rect',
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 4,
|
||||||
|
itemGap: 48,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'rgba(0, 0, 0, 0.6)',
|
||||||
|
},
|
||||||
left: 'center',
|
left: 'center',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
orient: 'horizontal',
|
orient: 'horizontal',
|
||||||
data: ['出库', '入库'],
|
data: ['本月', '上月'],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '出库',
|
name: '本月',
|
||||||
data: outArray,
|
data: outArray,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '入库',
|
name: '上月',
|
||||||
data: inArray,
|
data: inArray,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: chartListColor()[1],
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
@ -197,7 +255,7 @@ export function constructInitDataset(dateTime: Array<Dayjs> = []) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 平滑图数据 */
|
/** 平滑图数据 */
|
||||||
export function getSmoothLineDataSet(dateTime: any = []): any {
|
export function getSmoothLineDataSet(dateTime = []) {
|
||||||
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
|
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
|
||||||
if (dateTime.length > 0) {
|
if (dateTime.length > 0) {
|
||||||
const devideNum = 7;
|
const devideNum = 7;
|
||||||
|
|
@ -205,27 +263,44 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10px',
|
||||||
|
left: '0',
|
||||||
|
right: '20px',
|
||||||
|
bottom: '36px',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: dateArray,
|
data: dateArray,
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E3E6EB',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
},
|
axisLabel: {
|
||||||
tooltip: {
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
// 坐标轴指示器，坐标轴触发有效
|
|
||||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['本月', '上月'],
|
data: ['本月', '上月'],
|
||||||
icon: 'roundRect',
|
icon: 'circle',
|
||||||
bottom: '15%',
|
bottom: '0',
|
||||||
itemGap: 60,
|
itemGap: 48,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemWidth: 8,
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
|
@ -241,7 +316,15 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
color: '#BCC4D0',
|
color: chartListColor()[0],
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#0053D92F',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '本月',
|
name: '本月',
|
||||||
|
|
@ -256,17 +339,17 @@ export function getSmoothLineDataSet(dateTime: any = []): any {
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
areaStyle: {
|
showSymbol: true,
|
||||||
opacity: 0.1,
|
symbol: 'circle',
|
||||||
},
|
symbolSize: 8,
|
||||||
color: '#0052D9',
|
color: chartListColor()[1],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 折线图数据 */
|
/** 折线图数据 */
|
||||||
export function getFolderlineDataSet(dateTime: any = []): any {
|
export function getFolderlineDataSet(dateTime?: []) {
|
||||||
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||||
if (dateTime.length > 0) {
|
if (dateTime.length > 0) {
|
||||||
const devideNum = 7;
|
const devideNum = 7;
|
||||||
|
|
@ -274,7 +357,7 @@ export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
grid: {
|
grid: {
|
||||||
top: '5%',
|
top: '5%',
|
||||||
right: '1px',
|
right: '1px',
|
||||||
|
|
@ -290,15 +373,31 @@ export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: dateArray,
|
data: dateArray,
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E3E6EB',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
name: '杯子',
|
name: '杯子',
|
||||||
stack: '总量',
|
stack: '总量',
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -311,8 +410,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
name: '茶叶',
|
name: '茶叶',
|
||||||
stack: '总量',
|
stack: '总量',
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -325,8 +433,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
name: '蜂蜜',
|
name: '蜂蜜',
|
||||||
stack: '总量',
|
stack: '总量',
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -339,8 +456,17 @@ export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
name: '面粉',
|
name: '面粉',
|
||||||
stack: '总量',
|
stack: '总量',
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -353,6 +479,12 @@ export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
getRandomArray(),
|
getRandomArray(),
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
@ -365,21 +497,37 @@ export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
* @param {Array<string>} [dateTime=[]]
|
* @param {Array<string>} [dateTime=[]]
|
||||||
* @returns {*}
|
* @returns {*}
|
||||||
*/
|
*/
|
||||||
export function getLineChartDataSet(checkedValues = ''): any {
|
export function getLineChartDataSet(dateTime: Array<string> = []) {
|
||||||
let dateValueList = [];
|
const divideNum = 10;
|
||||||
if (checkedValues === 'monthVal') {
|
const timeArray = [];
|
||||||
dateValueList = ['1', '3', '8', '13', '18', '23', '28'];
|
const inArray = [];
|
||||||
} else {
|
const outArray = [];
|
||||||
dateValueList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
for (let i = 0; i < divideNum; i++) {
|
||||||
|
// const [timeArray, inArray, outArray] = dataset;
|
||||||
|
if (dateTime.length > 0) {
|
||||||
|
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||||
|
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||||
|
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
|
||||||
|
timeArray.push(dayjs(enhandTime).format('MM-DD'));
|
||||||
|
} else {
|
||||||
|
timeArray.push(
|
||||||
|
dayjs()
|
||||||
|
.subtract(divideNum - i, 'day')
|
||||||
|
.format('MM-DD'),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
inArray.push(getRandomArray().toString());
|
||||||
|
outArray.push(getRandomArray().toString());
|
||||||
}
|
}
|
||||||
const dataSet = {
|
const dataSet = {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '0',
|
left: '0',
|
||||||
right: '0',
|
right: '20px',
|
||||||
top: '5px',
|
top: '5px',
|
||||||
bottom: '36px',
|
bottom: '36px',
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
|
|
@ -388,47 +536,82 @@ export function getLineChartDataSet(checkedValues = ''): any {
|
||||||
left: 'center',
|
left: 'center',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
orient: 'horizontal', // legend 横向布局。
|
orient: 'horizontal', // legend 横向布局。
|
||||||
data: ['付款金额', '收款金额'],
|
data: ['本月', '上月'],
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'rgba(0, 0, 0, 0.6)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: dateValueList,
|
data: timeArray,
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E3E6EB',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '付款金额',
|
name: '本月',
|
||||||
data: [
|
data: outArray,
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
],
|
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: false,
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
// hover color
|
||||||
|
// emphasis: {
|
||||||
|
// color: '#000000'
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#0053D92F',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '收款金额',
|
name: '上月',
|
||||||
data: [
|
data: inArray,
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
getRandomArray(),
|
|
||||||
],
|
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: false,
|
||||||
|
showSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
color: '#BCC4D0',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#BCC4D0',
|
||||||
|
},
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
// hover color
|
||||||
|
// emphasis: {
|
||||||
|
// color: '#000000'
|
||||||
|
// }
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
// console.log('getLineChartDataSet..', dataSet);
|
|
||||||
return dataSet;
|
return dataSet;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -452,19 +635,72 @@ export function getSelftItemList(productName: string, devideNum: number): string
|
||||||
* 散点图数据
|
* 散点图数据
|
||||||
*
|
*
|
||||||
* @export
|
* @export
|
||||||
* @returns {any[]}
|
* @returns {}
|
||||||
*/
|
*/
|
||||||
export function getScattlerDataSet(): any {
|
export function getScattlerDataSet(dateTime: Array<string> = []) {
|
||||||
|
const divideNum = 10;
|
||||||
|
const timeArray = [];
|
||||||
|
const inArray = [];
|
||||||
|
const outArray = [];
|
||||||
|
for (let i = 0; i < divideNum; i++) {
|
||||||
|
// const [timeArray, inArray, outArray] = dataset;
|
||||||
|
if (dateTime.length > 0) {
|
||||||
|
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||||
|
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||||
|
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
|
||||||
|
timeArray.push(dayjs(enhandTime).format('MM-DD'));
|
||||||
|
} else {
|
||||||
|
timeArray.push(
|
||||||
|
dayjs()
|
||||||
|
.subtract(divideNum - i, 'day')
|
||||||
|
.format('MM-DD'),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
inArray.push(getRandomArray().toString());
|
||||||
|
outArray.push(getRandomArray().toString());
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
xAxis: {},
|
xAxis: {
|
||||||
yAxis: {},
|
data: timeArray,
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E3E6EB',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
// splitLine: { show: false},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
padding: [0, 0, 0, 60],
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '5%',
|
top: '5px',
|
||||||
left: '18px',
|
left: '25px',
|
||||||
right: '5px',
|
right: '5px',
|
||||||
bottom: '60px',
|
bottom: '60px',
|
||||||
},
|
},
|
||||||
|
|
@ -472,36 +708,21 @@ export function getScattlerDataSet(): any {
|
||||||
left: 'center',
|
left: 'center',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
orient: 'horizontal', // legend 横向布局。
|
orient: 'horizontal', // legend 横向布局。
|
||||||
data: ['满意度'],
|
data: ['按摩仪', '咖啡机'],
|
||||||
|
itemHeight: 8,
|
||||||
|
itemWidth: 8,
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '满意度',
|
name: '按摩仪',
|
||||||
symbolSize: 10,
|
symbolSize: 10,
|
||||||
data: [
|
data: outArray.reverse(),
|
||||||
[getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 8.04)],
|
type: 'scatter',
|
||||||
[getRandomArray(Math.random() * 8.07), getRandomArray(Math.random() * 6.95)],
|
},
|
||||||
[getRandomArray(Math.random() * 13.0), getRandomArray(Math.random() * 7.58)],
|
{
|
||||||
[getRandomArray(Math.random() * 9.05), getRandomArray(Math.random() * 8.81)],
|
name: '咖啡机',
|
||||||
[getRandomArray(Math.random() * 11.0), getRandomArray(Math.random() * 8.33)],
|
symbolSize: 10,
|
||||||
[getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 7.66)],
|
data: inArray.concat(inArray.reverse()),
|
||||||
[getRandomArray(Math.random() * 13.4), getRandomArray(Math.random() * 6.81)],
|
|
||||||
[getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 6.33)],
|
|
||||||
[getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 8.96)],
|
|
||||||
[getRandomArray(Math.random() * 12.5), getRandomArray(Math.random() * 6.82)],
|
|
||||||
[getRandomArray(Math.random() * 9.15), getRandomArray(Math.random() * 7.2)],
|
|
||||||
[getRandomArray(Math.random() * 11.5), getRandomArray(Math.random() * 7.2)],
|
|
||||||
[getRandomArray(Math.random() * 3.03), getRandomArray(Math.random() * 4.23)],
|
|
||||||
[getRandomArray(Math.random() * 12.2), getRandomArray(Math.random() * 7.83)],
|
|
||||||
[getRandomArray(Math.random() * 2.02), getRandomArray(Math.random() * 4.47)],
|
|
||||||
[getRandomArray(Math.random() * 1.05), getRandomArray(Math.random() * 3.33)],
|
|
||||||
[getRandomArray(Math.random() * 4.05), getRandomArray(Math.random() * 4.96)],
|
|
||||||
[getRandomArray(Math.random() * 6.03), getRandomArray(Math.random() * 7.24)],
|
|
||||||
[getRandomArray(Math.random() * 12.0), getRandomArray(Math.random() * 6.26)],
|
|
||||||
[getRandomArray(Math.random() * 12.0), getRandomArray(Math.random() * 8.84)],
|
|
||||||
[getRandomArray(Math.random() * 7.08), getRandomArray(Math.random() * 5.82)],
|
|
||||||
[getRandomArray(Math.random() * 5.02), getRandomArray(Math.random() * 5.68)],
|
|
||||||
],
|
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -512,11 +733,9 @@ export function getScattlerDataSet(): any {
|
||||||
* 获域图数据结构
|
* 获域图数据结构
|
||||||
*
|
*
|
||||||
* @export
|
* @export
|
||||||
* @returns {any[]}
|
* @returns {}
|
||||||
*/
|
*/
|
||||||
export function getAreaChartDataSet(text = ''): any {
|
export function getAreaChartDataSet() {
|
||||||
console.log(text);
|
|
||||||
|
|
||||||
const xAxisData = [];
|
const xAxisData = [];
|
||||||
const data1 = [];
|
const data1 = [];
|
||||||
const data2 = [];
|
const data2 = [];
|
||||||
|
|
@ -527,7 +746,7 @@ export function getAreaChartDataSet(text = ''): any {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
// title: {
|
// title: {
|
||||||
// text: '柱状图动画延迟',
|
// text: '柱状图动画延迟',
|
||||||
// },
|
// },
|
||||||
|
|
@ -585,10 +804,10 @@ export function getAreaChartDataSet(text = ''): any {
|
||||||
* @param {boolean} [isMonth=false]
|
* @param {boolean} [isMonth=false]
|
||||||
* @returns {*}
|
* @returns {*}
|
||||||
*/
|
*/
|
||||||
export function getColumnChartDataSet(isMonth = false): any {
|
export function getColumnChartDataSet(isMonth = false) {
|
||||||
if (isMonth) {
|
if (isMonth) {
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
legend: {
|
legend: {
|
||||||
left: 'center',
|
left: 'center',
|
||||||
top: '10%',
|
top: '10%',
|
||||||
|
|
@ -640,9 +859,8 @@ export function getColumnChartDataSet(isMonth = false): any {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
|
|
@ -695,6 +913,8 @@ export function getColumnChartDataSet(isMonth = false): any {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const lastYearList: Array<any> = [100, 120, 140, 160, 180, 200, 210];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 柱状图数据结构
|
* 柱状图数据结构
|
||||||
*
|
*
|
||||||
|
|
@ -702,21 +922,25 @@ export function getColumnChartDataSet(isMonth = false): any {
|
||||||
* @param {boolean} [isMonth=false]
|
* @param {boolean} [isMonth=false]
|
||||||
* @returns {*}
|
* @returns {*}
|
||||||
*/
|
*/
|
||||||
export function get2ColBarChartDataSet(): any {
|
export function get2ColBarChartDataSet(isMonth = false) {
|
||||||
|
let lastYearListCopy = lastYearList.concat([]);
|
||||||
|
let thisYearListCopy = lastYearList.concat([]);
|
||||||
|
|
||||||
|
if (isMonth) {
|
||||||
|
lastYearListCopy = lastYearListCopy.reverse();
|
||||||
|
thisYearListCopy = thisYearListCopy.reverse();
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'item',
|
||||||
axisPointer: {
|
|
||||||
// 坐标轴指示器，坐标轴触发有效
|
|
||||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '0',
|
top: '10px',
|
||||||
left: '0',
|
left: '0',
|
||||||
right: '0',
|
right: '0',
|
||||||
// bottom: '10%',
|
bottom: '36px',
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
|
|
@ -726,32 +950,40 @@ export function get2ColBarChartDataSet(): any {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
alignWithLabel: true,
|
alignWithLabel: true,
|
||||||
},
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#E3E6EB',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.4)',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
legend: {
|
legend: {
|
||||||
data: ['去年', '今年'],
|
data: ['去年', '今年'],
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
itemGap: 60,
|
icon: 'rect',
|
||||||
|
itemGap: 48,
|
||||||
|
itemHeight: 4,
|
||||||
|
itemWidth: 12,
|
||||||
|
itemStyle: {},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '去年',
|
name: '去年',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '20%',
|
barWidth: '30%',
|
||||||
data: [
|
data: lastYearListCopy,
|
||||||
getRandomArray(Math.random() * 100),
|
|
||||||
getRandomArray(Math.random() * 200),
|
|
||||||
getRandomArray(Math.random() * 300),
|
|
||||||
getRandomArray(Math.random() * 400),
|
|
||||||
getRandomArray(Math.random() * 500),
|
|
||||||
getRandomArray(Math.random() * 600),
|
|
||||||
getRandomArray(Math.random() * 700),
|
|
||||||
],
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#BCC4D0',
|
color: '#BCC4D0',
|
||||||
},
|
},
|
||||||
|
|
@ -759,18 +991,11 @@ export function get2ColBarChartDataSet(): any {
|
||||||
{
|
{
|
||||||
name: '今年',
|
name: '今年',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '20%',
|
barWidth: '30%',
|
||||||
data: [
|
data: thisYearListCopy,
|
||||||
getRandomArray(Math.random() * 100),
|
|
||||||
getRandomArray(Math.random() * 200),
|
|
||||||
getRandomArray(Math.random() * 300),
|
|
||||||
getRandomArray(Math.random() * 400),
|
|
||||||
getRandomArray(Math.random() * 500),
|
|
||||||
getRandomArray(Math.random() * 600),
|
|
||||||
getRandomArray(Math.random() * 700),
|
|
||||||
],
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: (params) => {
|
color: (params) => {
|
||||||
|
// console.log('chartListColor', chartListColor());
|
||||||
if (params.value >= 200) {
|
if (params.value >= 200) {
|
||||||
return '#E34D59';
|
return '#E34D59';
|
||||||
}
|
}
|
||||||
|
|
@ -789,9 +1014,9 @@ export function get2ColBarChartDataSet(): any {
|
||||||
* @param {number} [radius=1]
|
* @param {number} [radius=1]
|
||||||
* @returns {*}
|
* @returns {*}
|
||||||
*/
|
*/
|
||||||
export function getPieChartDataSet(radius = 42): any {
|
export function getPieChartDataSet(radius = 42) {
|
||||||
return {
|
return {
|
||||||
color: chartListColor,
|
color: chartListColor(),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
|
|
@ -800,6 +1025,12 @@ export function getPieChartDataSet(radius = 42): any {
|
||||||
right: '0',
|
right: '0',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 4,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'rgba(0, 0, 0, 0.6)',
|
||||||
|
},
|
||||||
left: 'center',
|
left: 'center',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
orient: 'horizontal', // legend 横向布局。
|
orient: 'horizontal', // legend 横向布局。
|
||||||
|
|
@ -808,17 +1039,43 @@ export function getPieChartDataSet(radius = 42): any {
|
||||||
{
|
{
|
||||||
name: '销售渠道',
|
name: '销售渠道',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['45%', '60%'],
|
radius: ['48%', '60%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'center',
|
position: 'center',
|
||||||
|
formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
|
||||||
|
rich: {
|
||||||
|
value: {
|
||||||
|
color: '#303133',
|
||||||
|
fontSize: 36,
|
||||||
|
fontWeight: 'normal',
|
||||||
|
lineHeight: 46,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
color: '#909399',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: '12',
|
formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
|
||||||
fontWeight: 'bold',
|
rich: {
|
||||||
|
value: {
|
||||||
|
color: '#303133',
|
||||||
|
fontSize: 36,
|
||||||
|
fontWeight: 'normal',
|
||||||
|
lineHeight: 46,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
color: '#909399',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
|
|
@ -833,40 +1090,16 @@ export function getPieChartDataSet(radius = 42): any {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 依据主题类型获取颜色
|
|
||||||
*
|
|
||||||
* @export
|
|
||||||
* @param {string} theme
|
|
||||||
* @returns {any[]}
|
|
||||||
*/
|
|
||||||
export function getColorFromTheme(theme: string): any[] {
|
|
||||||
const themeColor: any = getBrandColor(theme);
|
|
||||||
const themeColorList: Array<any> = [];
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-restricted-syntax
|
|
||||||
for (const key in themeColor) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(themeColor, key)) {
|
|
||||||
const elementColor: any = themeColor[key];
|
|
||||||
|
|
||||||
themeColorList.push(elementColor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return themeColorList;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 更改图表主题颜色
|
* 更改图表主题颜色
|
||||||
*
|
*
|
||||||
* @export
|
* @export
|
||||||
* @param {Array<any>} chartsList
|
* @param {Array<string>} chartsList
|
||||||
* @param {string} theme
|
* @param {string} theme
|
||||||
*/
|
*/
|
||||||
export function changeChartsTheme(chartsList: Array<any>, theme: string): void {
|
export function changeChartsTheme(chartsList: echarts.EChartsType[]) {
|
||||||
if (chartsList && chartsList.length) {
|
if (chartsList && chartsList.length) {
|
||||||
const chartChangeColor: Array<any> = getColorFromTheme(theme) || chartListColor;
|
const chartChangeColor: any = chartListColor();
|
||||||
chartListColor = chartChangeColor;
|
|
||||||
|
|
||||||
for (let index = 0; index < chartsList.length; index++) {
|
for (let index = 0; index < chartsList.length; index++) {
|
||||||
const elementChart: any = chartsList[index];
|
const elementChart: any = chartsList[index];
|
||||||
|
|
|
||||||
|
|
@ -3,30 +3,35 @@ export const PANE_LIST_DATA = [
|
||||||
title: '总申请数（次）',
|
title: '总申请数（次）',
|
||||||
count: 1126,
|
count: 1126,
|
||||||
percent: 10,
|
percent: 10,
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
title: '供应商数量（个）',
|
title: '供应商数量（个）',
|
||||||
count: 1126,
|
count: 1126,
|
||||||
percent: -13,
|
percent: -13,
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
title: '采购商品品类（类）',
|
title: '采购商品品类（类）',
|
||||||
count: 1126,
|
count: 1126,
|
||||||
percent: 10,
|
percent: 10,
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
title: '申请人数量（人）',
|
title: '申请人数量（人）',
|
||||||
count: 1126,
|
count: 1126,
|
||||||
percent: 44,
|
percent: 44,
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
title: '申请完成率（%）',
|
title: '申请完成率（%）',
|
||||||
count: 1126,
|
count: 1126,
|
||||||
percent: 70,
|
percent: 70,
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
title: '到货及时率（%）',
|
title: '到货及时率（%）',
|
||||||
count: 78,
|
count: 78,
|
||||||
percent: 16,
|
percent: 16,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const PRODUCT_LIST = [
|
export const PRODUCT_LIST = [
|
||||||
{
|
{
|
||||||
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
|
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
|
||||||
index: 1,
|
index: 1,
|
||||||
|
|
|
||||||
|
|
@ -21,12 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="operater-item">
|
<div class="operater-item">
|
||||||
<span class="operater-item-info">{{ data.info }}</span>
|
<span class="operater-item-info">{{ data.info }}</span>
|
||||||
<t-icon
|
<t-icon class="operater-item-icon" name="chevron-right" size="small" style="color: rgba(0, 0, 0, 0.26)" />
|
||||||
class="operater-item-icon"
|
|
||||||
name="chevron-right"
|
|
||||||
size="small"
|
|
||||||
style="color: rgba(0, 0, 0, 0.26)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="operater-footer">
|
<div class="operater-footer">
|
||||||
|
|
@ -36,8 +31,8 @@
|
||||||
theme="line"
|
theme="line"
|
||||||
:percentage="(data.use / data.stock) * 100"
|
:percentage="(data.use / data.stock) * 100"
|
||||||
:label="false"
|
:label="false"
|
||||||
:color="(data.use / data.stock) < 0.5 ? '#E24D59' : ''"
|
:color="data.use / data.stock < 0.5 ? '#E24D59' : ''"
|
||||||
:track-color="(data.use / data.stock) < 0.5 ? '#FCD4D4' : '#D4E3FC'"
|
:track-color="data.use / data.stock < 0.5 ? '#FCD4D4' : '#D4E3FC'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -50,6 +45,9 @@ export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,10 @@
|
||||||
|
interface TableRowType {
|
||||||
|
index: number;
|
||||||
|
pdName: string;
|
||||||
|
purchaseNum: number;
|
||||||
|
updateTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
export const BASE_INFO_DATA = [
|
export const BASE_INFO_DATA = [
|
||||||
{
|
{
|
||||||
name: '合同名称',
|
name: '合同名称',
|
||||||
|
|
@ -84,14 +91,14 @@ export const TABLE_COLUMNS_DATA = [
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
colKey: 'index',
|
colKey: 'index',
|
||||||
title: '申请号',
|
title: '申请号',
|
||||||
sorter: (a, b) => a.index.substr(3) - b.index.substr(3),
|
sorter: (a: TableRowType, b: TableRowType) => a.index - b.index,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
minWidth: '100',
|
minWidth: '100',
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
colKey: 'pdName',
|
colKey: 'pdName',
|
||||||
title: '产品名称',
|
title: '产品名称',
|
||||||
sorter: (a, b) => a.pdName.length - b.pdName.length,
|
sorter: (a: TableRowType, b: TableRowType) => a.pdName.length - b.pdName.length,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
minWidth: '250',
|
minWidth: '250',
|
||||||
|
|
@ -104,7 +111,7 @@ export const TABLE_COLUMNS_DATA = [
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
colKey: 'purchaseNum',
|
colKey: 'purchaseNum',
|
||||||
title: '采购数量',
|
title: '采购数量',
|
||||||
sorter: (a, b) => a.purchaseNum - b.purchaseNum,
|
sorter: (a: TableRowType, b: TableRowType) => a.purchaseNum - b.purchaseNum,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
minWidth: '100',
|
minWidth: '100',
|
||||||
|
|
@ -118,7 +125,7 @@ export const TABLE_COLUMNS_DATA = [
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
colKey: 'updateTime',
|
colKey: 'updateTime',
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
|
sorter: (a: TableRowType, b: TableRowType) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
|
|
||||||
|
|
@ -33,12 +33,8 @@
|
||||||
<card title="产品目录">
|
<card title="产品目录">
|
||||||
<template #option>
|
<template #option>
|
||||||
<t-radio-group default-value="dateVal">
|
<t-radio-group default-value="dateVal">
|
||||||
<t-radio-button value="dateVal">
|
<t-radio-button value="dateVal"> 季度 </t-radio-button>
|
||||||
季度
|
<t-radio-button value="monthVal"> 月份 </t-radio-button>
|
||||||
</t-radio-button>
|
|
||||||
<t-radio-button value="monthVal">
|
|
||||||
月份
|
|
||||||
</t-radio-button>
|
|
||||||
</t-radio-group>
|
</t-radio-group>
|
||||||
</template>
|
</template>
|
||||||
<t-row class="operater-block-container">
|
<t-row class="operater-block-container">
|
||||||
|
|
@ -150,7 +146,7 @@ export default defineComponent({
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
try {
|
try {
|
||||||
const res:ResDataType = await request.get('/api/get-purchase-list');
|
const res: ResDataType = await request.get('/api/get-purchase-list');
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
const { list = [] } = res.data;
|
const { list = [] } = res.data;
|
||||||
data.value = list;
|
data.value = list;
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-base-panel {
|
.detail-base-panel {
|
||||||
background-color: white;
|
background-color: @bg-color-container;
|
||||||
padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4;
|
padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="detail-base-panel">
|
<div class="detail-base-panel">
|
||||||
<t-row class="detail-base-info" justify="space-between">
|
<t-row class="detail-base-info" justify="space-between">
|
||||||
<p class="detail-base-info-title">
|
<p class="detail-base-info-title">基本信息</p>
|
||||||
基本信息
|
|
||||||
</p>
|
|
||||||
</t-row>
|
</t-row>
|
||||||
<div class="info-block">
|
<div class="info-block">
|
||||||
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
|
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
|
||||||
|
|
@ -23,9 +21,7 @@
|
||||||
<t-divider style="margin-top: 24px; margin-bottom: 23px; border-top-color: rgba(255, 255, 255, 0)" />
|
<t-divider style="margin-top: 24px; margin-bottom: 23px; border-top-color: rgba(255, 255, 255, 0)" />
|
||||||
<div class="update-history">
|
<div class="update-history">
|
||||||
<t-row class="detail-base-info" justify="space-between">
|
<t-row class="detail-base-info" justify="space-between">
|
||||||
<p class="detail-base-info-title">
|
<p class="detail-base-info-title">变更记录</p>
|
||||||
变更记录
|
|
||||||
</p>
|
|
||||||
</t-row>
|
</t-row>
|
||||||
<t-steps class="detail-base-info-steps" direction="vertical" theme="dot" :current="1">
|
<t-steps class="detail-base-info-steps" direction="vertical" theme="dot" :current="1">
|
||||||
<t-step-item title="上传合同附件" content="这里是提示文字" />
|
<t-step-item title="上传合同附件" content="这里是提示文字" />
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
interface TableRowType {
|
||||||
|
name: string;
|
||||||
|
updateTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
export const BASE_INFO_DATA = [
|
export const BASE_INFO_DATA = [
|
||||||
{
|
{
|
||||||
name: '集群名',
|
name: '集群名',
|
||||||
|
|
@ -81,14 +86,13 @@ export const BASE_INFO_DATA = [
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
export const TABLE_COLUMNS = [
|
export const TABLE_COLUMNS = [
|
||||||
{
|
{
|
||||||
minWidth: '250',
|
minWidth: '250',
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
colKey: 'name',
|
colKey: 'name',
|
||||||
title: '项目名称',
|
title: '项目名称',
|
||||||
sorter: (a, b) => a.name.substr(10) - b.name.substr(10),
|
sorter: (a: TableRowType, b: TableRowType) => a.name.length - b.name.length,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
minWidth: '200',
|
minWidth: '200',
|
||||||
|
|
@ -102,7 +106,7 @@ export const TABLE_COLUMNS = [
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
colKey: 'updateTime',
|
colKey: 'updateTime',
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
|
sorter: (a: TableRowType, b: TableRowType) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import '@/style/variables.less';
|
@import '@/style/variables.less';
|
||||||
|
|
||||||
.secondary-notification {
|
.secondary-notification {
|
||||||
background-color: white;
|
background-color: @bg-color-container;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
padding: @spacer-3 @spacer-4;
|
padding: @spacer-3 @spacer-4;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
</t-list-item>
|
</t-list-item>
|
||||||
</t-list>
|
</t-list>
|
||||||
<div v-else class="secondary-msg-list__empty-list">
|
<div v-else class="secondary-msg-list__empty-list">
|
||||||
<img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空">
|
<img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
|
||||||
<p>暂无通知</p>
|
<p>暂无通知</p>
|
||||||
</div>
|
</div>
|
||||||
</t-tab-panel>
|
</t-tab-panel>
|
||||||
|
|
@ -48,10 +48,11 @@
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref, computed } from 'vue';
|
import { defineComponent, ref, computed, ComputedRef } from 'vue';
|
||||||
import { useStore } from 'vuex';
|
import { useStore } from 'vuex';
|
||||||
import { NOTIFICATION_TYPES } from '@/constants';
|
import { NOTIFICATION_TYPES } from '@/constants';
|
||||||
import ReadIcon from '@/assets/read.svg?component';
|
import ReadIcon from '@/assets/read.svg?component';
|
||||||
|
import { NotificationItem } from '@/store/interface';
|
||||||
|
|
||||||
const TAB_LIST = [
|
const TAB_LIST = [
|
||||||
{
|
{
|
||||||
|
|
@ -75,27 +76,27 @@ export default defineComponent({
|
||||||
const tabValue = ref('msgData');
|
const tabValue = ref('msgData');
|
||||||
|
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const selectedItem = ref(undefined);
|
const selectedItem = ref<NotificationItem>();
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|
||||||
const { msgData } = store.state.notification;
|
const { msgData } = store.state.notification;
|
||||||
|
|
||||||
const msgDataList = computed(() => {
|
const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
|
||||||
if (tabValue.value === 'msgData') return msgData;
|
if (tabValue.value === 'msgData') return msgData;
|
||||||
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
|
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
|
||||||
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
|
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
|
||||||
return [];
|
return [];
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleClickDeleteBtn = (item) => {
|
const handleClickDeleteBtn = (item: NotificationItem) => {
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
selectedItem.value = item;
|
selectedItem.value = item;
|
||||||
};
|
};
|
||||||
|
|
||||||
const setReadStatus = (item) => {
|
const setReadStatus = (item: NotificationItem) => {
|
||||||
const changeMsg = msgData;
|
const changeMsg = msgData;
|
||||||
changeMsg.forEach((e) => {
|
changeMsg.forEach((e: NotificationItem) => {
|
||||||
if (e.id === item.id) {
|
if (e.id === item.id) {
|
||||||
e.status = !e.status;
|
e.status = !e.status;
|
||||||
}
|
}
|
||||||
|
|
@ -106,8 +107,8 @@ export default defineComponent({
|
||||||
const deleteMsg = () => {
|
const deleteMsg = () => {
|
||||||
const item = selectedItem.value;
|
const item = selectedItem.value;
|
||||||
const changeMsg = msgData;
|
const changeMsg = msgData;
|
||||||
changeMsg.forEach((e, index) => {
|
changeMsg.forEach((e: NotificationItem, index: number) => {
|
||||||
if (e.id === item.id) {
|
if (e.id === item?.id) {
|
||||||
changeMsg.splice(index, 1);
|
changeMsg.splice(index, 1);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
.@{prefix} {
|
.@{prefix} {
|
||||||
|
|
||||||
&-panel {
|
&-panel {
|
||||||
background-color: white;
|
background-color: @bg-color-container;
|
||||||
padding: @spacer-3;
|
padding: @spacer-3;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
.@{prefix} {
|
.@{prefix} {
|
||||||
|
|
||||||
&-panel {
|
&-panel {
|
||||||
background-color: white;
|
background-color: @bg-color-container;
|
||||||
|
|
||||||
&.@{prefix}-step-panel {
|
&.@{prefix}-step-panel {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,8 @@
|
||||||
class="step-form"
|
class="step-form"
|
||||||
:data="formData1"
|
:data="formData1"
|
||||||
:rules="FORM_RULES"
|
:rules="FORM_RULES"
|
||||||
label-align="left"
|
label-align="right"
|
||||||
@submit="({ validateResult }) => onSubmit({ validateResult }, 1)"
|
@submit="(result) => onSubmit(result, 1)"
|
||||||
>
|
>
|
||||||
<t-form-item label="合同名称" name="name">
|
<t-form-item label="合同名称" name="name">
|
||||||
<t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
|
<t-select v-model="formData1.name" :style="{ width: '480px' }" class="demo-select-base" clearable>
|
||||||
|
|
@ -44,13 +44,9 @@
|
||||||
</t-option>
|
</t-option>
|
||||||
</t-select>
|
</t-select>
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
<t-form-item label="开票金额">
|
<t-form-item label="开票金额"> {{ amount }} 元 </t-form-item>
|
||||||
{{ amount }} 元
|
|
||||||
</t-form-item>
|
|
||||||
<t-form-item>
|
<t-form-item>
|
||||||
<t-button theme="primary" type="submit">
|
<t-button theme="primary" type="submit"> 提交申请 </t-button>
|
||||||
提交申请
|
|
||||||
</t-button>
|
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
</t-form>
|
</t-form>
|
||||||
|
|
||||||
|
|
@ -62,7 +58,7 @@
|
||||||
:rules="FORM_RULES"
|
:rules="FORM_RULES"
|
||||||
label-align="left"
|
label-align="left"
|
||||||
@reset="onReset(0)"
|
@reset="onReset(0)"
|
||||||
@submit="({ validateResult }) => onSubmit({ validateResult }, 2)"
|
@submit="(result) => onSubmit(result, 2)"
|
||||||
>
|
>
|
||||||
<t-form-item label="发票抬头" name="title">
|
<t-form-item label="发票抬头" name="title">
|
||||||
<t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
|
<t-input v-model="formData2.title" :style="{ width: '480px' }" placeholder="请输入发票抬头" />
|
||||||
|
|
@ -86,12 +82,8 @@
|
||||||
<t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
|
<t-input v-model="formData2.tel" :style="{ width: '480px' }" placeholder="请输入通知手机" />
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
<t-form-item>
|
<t-form-item>
|
||||||
<t-button type="reset" theme="default" variant="base">
|
<t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
|
||||||
上一步
|
<t-button theme="primary" type="submit"> 下一步 </t-button>
|
||||||
</t-button>
|
|
||||||
<t-button theme="primary" type="submit">
|
|
||||||
下一步
|
|
||||||
</t-button>
|
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
</t-form>
|
</t-form>
|
||||||
|
|
||||||
|
|
@ -103,7 +95,7 @@
|
||||||
:rules="FORM_RULES"
|
:rules="FORM_RULES"
|
||||||
label-align="left"
|
label-align="left"
|
||||||
@reset="onReset(1)"
|
@reset="onReset(1)"
|
||||||
@submit="({ validateResult }) => onSubmit({ validateResult }, 6)"
|
@submit="(result) => onSubmit(result, 6)"
|
||||||
>
|
>
|
||||||
<t-form-item label="收货人" name="consignee">
|
<t-form-item label="收货人" name="consignee">
|
||||||
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
|
<t-input v-model="formData3.consignee" :style="{ width: '480px' }" placeholder="请输入收货人" />
|
||||||
|
|
@ -128,31 +120,19 @@
|
||||||
<t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
|
<t-textarea v-model="formData3.fullAddress" :style="{ width: '480px' }" placeholder="请输入详细地址" />
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
<t-form-item>
|
<t-form-item>
|
||||||
<t-button type="reset" theme="default" variant="base">
|
<t-button type="reset" theme="default" variant="base"> 上一步 </t-button>
|
||||||
上一步
|
<t-button theme="primary" type="submit"> 下一步 </t-button>
|
||||||
</t-button>
|
|
||||||
<t-button theme="primary" type="submit">
|
|
||||||
下一步
|
|
||||||
</t-button>
|
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
</t-form>
|
</t-form>
|
||||||
|
|
||||||
<!-- 分步表单4 -->
|
<!-- 分步表单4 -->
|
||||||
<div v-show="activeForm === 6" class="step-form-4">
|
<div v-show="activeForm === 6" class="step-form-4">
|
||||||
<t-icon name="check-circle-filled" style="color: green" size="52px" />
|
<t-icon name="check-circle-filled" style="color: green" size="52px" />
|
||||||
<p class="text">
|
<p class="text">完成开票申请</p>
|
||||||
完成开票申请
|
<p class="tips">预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待</p>
|
||||||
</p>
|
|
||||||
<p class="tips">
|
|
||||||
预计1～3个工作日会将电子发票发至邮箱，发票邮寄请耐心等待
|
|
||||||
</p>
|
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<t-button theme="primary" @click="onReset(0)">
|
<t-button theme="primary" @click="onReset(0)"> 再次申请 </t-button>
|
||||||
再次申请
|
<t-button variant="base" theme="default" @click="complete"> 查看进度 </t-button>
|
||||||
</t-button>
|
|
||||||
<t-button variant="base" theme="default" @click="complete">
|
|
||||||
查看进度
|
|
||||||
</t-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -160,11 +140,18 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref, computed } from 'vue';
|
import { defineComponent, ref, computed } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
import { ValidateResultContext } from 'tdesign-vue-next';
|
||||||
import { PREFIX } from '@/config/global';
|
import { PREFIX } from '@/config/global';
|
||||||
import { FORM_RULES, NAME_OPTIONS, TYPE_OPTIONS, ADDRESS_OPTIONS, INITIAL_DATA1, INITIAL_DATA2, INITIAL_DATA3 } from './constants';
|
|
||||||
// 导入样式
|
import {
|
||||||
import './index.less';
|
FORM_RULES,
|
||||||
|
NAME_OPTIONS,
|
||||||
|
TYPE_OPTIONS,
|
||||||
|
ADDRESS_OPTIONS,
|
||||||
|
INITIAL_DATA1,
|
||||||
|
INITIAL_DATA2,
|
||||||
|
INITIAL_DATA3,
|
||||||
|
} from './constants';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'FormStep',
|
name: 'FormStep',
|
||||||
|
|
@ -198,12 +185,12 @@ export default defineComponent({
|
||||||
formData3,
|
formData3,
|
||||||
activeForm,
|
activeForm,
|
||||||
amount,
|
amount,
|
||||||
onSubmit({ validateResult }, val) {
|
onSubmit(result: ValidateResultContext<FormData>, val: number) {
|
||||||
if (validateResult === true) {
|
if (result.validateResult === true) {
|
||||||
activeForm.value = val;
|
activeForm.value = val;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onReset(val) {
|
onReset(val: number) {
|
||||||
activeForm.value = val;
|
activeForm.value = val;
|
||||||
},
|
},
|
||||||
complete() {
|
complete() {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,12 @@ export const COLUMNS = [
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
colKey: 'name',
|
colKey: 'name',
|
||||||
},
|
},
|
||||||
{ title: '合同状态', colKey: 'status', width: 150, cell: { col: 'status' } },
|
{
|
||||||
|
title: '合同状态',
|
||||||
|
colKey: 'status',
|
||||||
|
width: 150,
|
||||||
|
cell: { col: 'status' },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '合同编号',
|
title: '合同编号',
|
||||||
minWidth: '100',
|
minWidth: '100',
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,10 @@ export default defineComponent({
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import '@/style/index';
|
@import '@/style/index';
|
||||||
|
|
||||||
.@{prefix} {
|
.@{prefix} {
|
||||||
&-panel {
|
&-panel {
|
||||||
background-color: white;
|
background-color: @bg-color-container;
|
||||||
padding: @spacer-3;
|
padding: @spacer-3;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,9 +48,7 @@
|
||||||
<div class="check-container">
|
<div class="check-container">
|
||||||
<t-checkbox>我已阅读并同意 </t-checkbox><span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
|
<t-checkbox>我已阅读并同意 </t-checkbox><span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
|
||||||
</div>
|
</div>
|
||||||
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
|
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
|
||||||
注册
|
|
||||||
</t-button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-container">
|
<div class="bottom-container">
|
||||||
<span class="tip" @click="type = 'eamil'">使用手机号注册</span>
|
<span class="tip" @click="type = 'eamil'">使用手机号注册</span>
|
||||||
|
|
@ -103,9 +101,7 @@
|
||||||
<div class="check-container">
|
<div class="check-container">
|
||||||
<t-checkbox>我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
|
<t-checkbox>我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
|
||||||
</div>
|
</div>
|
||||||
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
|
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister"> 注册 </t-button>
|
||||||
注册
|
|
||||||
</t-button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-container">
|
<div class="bottom-container">
|
||||||
<span class="tip" @click="type = 'phone'">使用邮箱注册</span>
|
<span class="tip" @click="type = 'phone'">使用邮箱注册</span>
|
||||||
|
|
@ -117,7 +113,7 @@
|
||||||
import { defineComponent, ref } from 'vue';
|
import { defineComponent, ref } from 'vue';
|
||||||
import { useCounter } from '@/utils/hooks';
|
import { useCounter } from '@/utils/hooks';
|
||||||
|
|
||||||
const getEmails = (search:string) => [
|
const getEmails = (search: string) => [
|
||||||
{
|
{
|
||||||
value: `${search}@qq.com`,
|
value: `${search}@qq.com`,
|
||||||
label: `${search}@qq.com`,
|
label: `${search}@qq.com`,
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,13 @@
|
||||||
<div class="login-wrapper">
|
<div class="login-wrapper">
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<div class="title-container">
|
<div class="title-container">
|
||||||
<img class="icon" src="https://tdesign.gtimg.com/pro-template/logo%402x.png">
|
<img class="icon" src="https://tdesign.gtimg.com/pro-template/logo%402x.png" />
|
||||||
<div class="side-title">
|
<div class="side-title">
|
||||||
<p class="tip1">
|
<p class="tip1">
|
||||||
{{ type == 'register' ? '没有账号吗?' : "已有账号?" }}
|
{{ type == 'register' ? '没有账号吗?' : '已有账号?' }}
|
||||||
</p>
|
</p>
|
||||||
<p class="tip2" @click="switchType(type == 'register' ? 'login' : 'register')">
|
<p class="tip2" @click="switchType(type == 'register' ? 'login' : 'register')">
|
||||||
{{ type == 'register' ? '登录' : "注册新账号" }}
|
{{ type == 'register' ? '登录' : '注册新账号' }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -33,7 +33,7 @@ export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const type = ref('login');
|
const type = ref('login');
|
||||||
|
|
||||||
const switchType = (val:string) => {
|
const switchType = (val: string) => {
|
||||||
type.value = val;
|
type.value = val;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,10 @@
|
||||||
<card>
|
<card>
|
||||||
<div class="result-success">
|
<div class="result-success">
|
||||||
<t-icon class="result-success-icon" name="close-circle-filled" />
|
<t-icon class="result-success-icon" name="close-circle-filled" />
|
||||||
<div class="result-success-title">
|
<div class="result-success-title">项目创建失败</div>
|
||||||
项目创建失败
|
<div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
|
||||||
</div>
|
|
||||||
<div class="result-success-describe">
|
|
||||||
企业微信联系检查创建者权限，或返回修改
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<t-button @click="() => $router.push('/form/base')">
|
<t-button @click="() => $router.push('/form/base')"> 返回修改 </t-button>
|
||||||
返回修改
|
|
||||||
</t-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</card>
|
</card>
|
||||||
|
|
@ -38,13 +32,13 @@ export default defineComponent({
|
||||||
height: 75vh;
|
height: 75vh;
|
||||||
&-icon {
|
&-icon {
|
||||||
font-size: 64px;
|
font-size: 64px;
|
||||||
color: @error-color;
|
color: @text-color-secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: rgba(0, 0, 0, 0.9);
|
color: @text-color-primary;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
@ -52,7 +46,7 @@ export default defineComponent({
|
||||||
&-describe {
|
&-describe {
|
||||||
margin: 8px 0 32px;
|
margin: 8px 0 32px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0, 0, 0, 0.6);
|
color: @text-color-secondary;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,19 +2,11 @@
|
||||||
<card>
|
<card>
|
||||||
<div class="result-success">
|
<div class="result-success">
|
||||||
<t-icon class="result-success-icon" name="check-circle-filled" />
|
<t-icon class="result-success-icon" name="check-circle-filled" />
|
||||||
<div class="result-success-title">
|
<div class="result-success-title">项目已创建成功</div>
|
||||||
项目已创建成功
|
<div class="result-success-describe">可以联系负责人分发应用</div>
|
||||||
</div>
|
|
||||||
<div class="result-success-describe">
|
|
||||||
可以联系负责人分发应用
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<t-button theme="default" @click="() => $router.push('/detail/advanced')">
|
<t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
|
||||||
查看进度
|
<t-button @click="() => $router.push('/form/base')"> 再次创建 </t-button>
|
||||||
</t-button>
|
|
||||||
<t-button @click="() => $router.push('/form/base')">
|
|
||||||
再次创建
|
|
||||||
</t-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</card>
|
</card>
|
||||||
|
|
@ -24,6 +16,7 @@
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
import Card from '@/components/card/index.vue';
|
import Card from '@/components/card/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'ResultSuccess',
|
name: 'ResultSuccess',
|
||||||
components: { Card },
|
components: { Card },
|
||||||
|
|
@ -48,7 +41,7 @@ export default defineComponent({
|
||||||
&-title {
|
&-title {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: rgba(0, 0, 0, 0.9);
|
color: @text-color-primary;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
@ -56,7 +49,7 @@ export default defineComponent({
|
||||||
&-describe {
|
&-describe {
|
||||||
margin: 8px 0 32px;
|
margin: 8px 0 32px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0, 0, 0, 0.6);
|
color: @text-color-primary;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
||||||
import routeConfig from '@/config/routes';
|
import routeConfig from '@/config/routes';
|
||||||
|
|
||||||
const layoutModules = import.meta.glob('../Layouts/*');
|
const layoutModules = import.meta.glob('../layouts/*');
|
||||||
const pagesModules = import.meta.glob('../pages/**/*.vue');
|
const pagesModules = import.meta.glob('../pages/**/*.vue');
|
||||||
const fristPagesModules = import.meta.glob('../pages/*.vue');
|
const fristPagesModules = import.meta.glob('../pages/*.vue');
|
||||||
const modules = Object.assign({}, layoutModules, fristPagesModules, pagesModules);
|
const modules = { ...layoutModules, ...fristPagesModules, ...pagesModules };
|
||||||
|
|
||||||
const getMenuRoutes = (list) => {
|
const getMenuRoutes = (list) => {
|
||||||
if (!list) {
|
if (!list) {
|
||||||
|
|
@ -42,4 +42,3 @@ const router = createRouter({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
export default router;
|
export default router;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
// 定义的state初始值
|
// 定义的state初始值
|
||||||
|
import { NotificationItem } from '../interface'
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
msgData: [
|
msgData: [
|
||||||
{
|
{
|
||||||
|
|
@ -58,15 +60,18 @@ const state = {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type NotificationStateType = typeof state;
|
||||||
|
type MsgDataType = typeof state.msgData;
|
||||||
|
|
||||||
const mutations = {
|
const mutations = {
|
||||||
setMsgData(state, data) {
|
setMsgData(state: NotificationStateType, data: MsgDataType) {
|
||||||
state.msgData = data;
|
state.msgData = data;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const getters = {
|
const getters = {
|
||||||
unreadMsg: state => state.msgData.filter(item => item.status),
|
unreadMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => item.status),
|
||||||
readMsg: state => state.msgData.filter(item => !item.status),
|
readMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => !item.status),
|
||||||
};
|
};
|
||||||
|
|
||||||
const actions = {};
|
const actions = {};
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,13 @@ import MENU_CONFIG from '@/config/routes';
|
||||||
// 定义的state初始值
|
// 定义的state初始值
|
||||||
const state = {
|
const state = {
|
||||||
...STYLE_CONFIG,
|
...STYLE_CONFIG,
|
||||||
|
showSettingPanel: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const mutations = {
|
const mutations = {
|
||||||
update(state, payload) {
|
update(state, payload) {
|
||||||
state.showBreadcrumb = payload.showBreadcrumb;
|
state.showBreadcrumb = payload.showBreadcrumb;
|
||||||
state.theme = payload.theme;
|
state.mode = payload.mode;
|
||||||
state.layout = payload.layout;
|
state.layout = payload.layout;
|
||||||
state.isSidebarCompact = payload.isSidebarCompact;
|
state.isSidebarCompact = payload.isSidebarCompact;
|
||||||
state.logoPosition = payload.logoPosition;
|
state.logoPosition = payload.logoPosition;
|
||||||
|
|
@ -18,6 +19,7 @@ const mutations = {
|
||||||
state.isSidebarFixed = payload.isSidebarFixed;
|
state.isSidebarFixed = payload.isSidebarFixed;
|
||||||
state.isHeaderFixed = payload.isHeaderFixed;
|
state.isHeaderFixed = payload.isHeaderFixed;
|
||||||
state.showHeader = payload.showHeader;
|
state.showHeader = payload.showHeader;
|
||||||
|
state.showFooter = payload.showFooter;
|
||||||
},
|
},
|
||||||
toggleSidebarCompact(state) {
|
toggleSidebarCompact(state) {
|
||||||
state.isSidebarCompact = !state.isSidebarCompact;
|
state.isSidebarCompact = !state.isSidebarCompact;
|
||||||
|
|
@ -25,17 +27,20 @@ const mutations = {
|
||||||
showSidebarCompact(state, payload) {
|
showSidebarCompact(state, payload) {
|
||||||
state.isSidebarCompact = payload;
|
state.isSidebarCompact = payload;
|
||||||
},
|
},
|
||||||
|
toggleSettingPanel(state, payload) {
|
||||||
|
state.showSettingPanel = payload;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const getters = {
|
const getters = {
|
||||||
showHeader: state => state.showHeader,
|
showHeader: (state) => state.showHeader,
|
||||||
showSidebar: state => state.layout !== 'top',
|
showSidebar: (state) => state.layout !== 'top',
|
||||||
showSidebarLogo: state => state.layout === 'side',
|
showSidebarLogo: (state) => state.layout === 'side',
|
||||||
showHeaderLogo: state => state.layout !== 'side',
|
showHeaderLogo: (state) => state.layout !== 'side',
|
||||||
headerMenu: (state) => {
|
headerMenu: (state) => {
|
||||||
if (state.layout === 'mix') {
|
if (state.layout === 'mix') {
|
||||||
if (state.splitMenu) {
|
if (state.splitMenu) {
|
||||||
return MENU_CONFIG.map(menu => ({
|
return MENU_CONFIG.map((menu) => ({
|
||||||
...menu,
|
...menu,
|
||||||
children: [],
|
children: [],
|
||||||
}));
|
}));
|
||||||
|
|
@ -51,29 +56,35 @@ const getters = {
|
||||||
const item = MENU_CONFIG[index];
|
const item = MENU_CONFIG[index];
|
||||||
if (item.children && item.children.length > 0) {
|
if (item.children && item.children.length > 0) {
|
||||||
if (rootState.route.path.indexOf(item.path) === 0) {
|
if (rootState.route.path.indexOf(item.path) === 0) {
|
||||||
return item.children.map(menuRouter => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
|
return item.children.map((menuRouter) => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return MENU_CONFIG;
|
return MENU_CONFIG;
|
||||||
},
|
},
|
||||||
showAsideFooter: (state) => {
|
showFooter: (state) => state.showFooter,
|
||||||
if (state.layout === 'mix' && !state.isSidebarFixed) {
|
showSettingBtn: (state) => !state.showHeader,
|
||||||
return state.showFooter && state.isAsideFooter;
|
|
||||||
}
|
|
||||||
return state.showFooter;
|
|
||||||
},
|
|
||||||
|
|
||||||
showMainFooter: (state) => {
|
|
||||||
if (state.layout === 'mix' && !state.isSidebarFixed) {
|
|
||||||
return state.showFooter && !state.isAsideFooter;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const actions = {};
|
const actions = {
|
||||||
|
async changeTheme({ commit, dispatch }, payload) {
|
||||||
|
console.log(payload);
|
||||||
|
dispatch('changeMode', payload);
|
||||||
|
dispatch('changeBrandTheme', payload);
|
||||||
|
commit('update', payload);
|
||||||
|
},
|
||||||
|
changeMode({ state }, payload) {
|
||||||
|
if (payload.mode !== state.mode) {
|
||||||
|
document.documentElement.setAttribute('theme-mode', payload.mode === 'dark' ? 'dark' : '');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeBrandTheme({ state }, payload) {
|
||||||
|
if (payload.brand !== state.brandTheme) {
|
||||||
|
document.documentElement.setAttribute('theme-color', payload.brandTheme);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@
|
||||||
|
|
||||||
@import './font-family.less';
|
@import './font-family.less';
|
||||||
|
|
||||||
@import './sidenav.less';
|
@import './side-nav.less';
|
||||||
|
|
||||||
|
@import './theme/index.less';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
|
|
@ -118,7 +120,7 @@ p {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.@{prefix}-sidenav-layout {
|
.@{prefix}-sideNav-layout {
|
||||||
|
|
||||||
&-relative {
|
&-relative {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sidenav {
|
&-sideNav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&-sidenav-placeholder {
|
&-sideNav-placeholder {
|
||||||
flex: 1 1 232px;
|
flex: 1 1 232px;
|
||||||
min-width: 232px;
|
min-width: 232px;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
13
src/style/theme/cyan.less
Normal file
13
src/style/theme/cyan.less
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
:root[theme-color='cyan'],
|
||||||
|
:root[theme-color='cyan'][theme-mode='dark'] {--td-brand-color: #0594FA;
|
||||||
|
--td-brand-color-1: #D6F7FF;
|
||||||
|
--td-brand-color-2: #B2ECFF;
|
||||||
|
--td-brand-color-3: #85DAFF;
|
||||||
|
--td-brand-color-4: #5CC5FC;
|
||||||
|
--td-brand-color-5: #31ADFB;
|
||||||
|
--td-brand-color-6: #0594FA;
|
||||||
|
--td-brand-color-7: #007EDF;
|
||||||
|
--td-brand-color-8: #0068C0;
|
||||||
|
--td-brand-color-9: #00549E;
|
||||||
|
--td-brand-color-10: #00417D;
|
||||||
|
}
|
||||||
164
src/style/theme/dark.less
Normal file
164
src/style/theme/dark.less
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
:root[theme-mode='dark'] {
|
||||||
|
--td-brand-color-1: #1B2F51;
|
||||||
|
--td-brand-color-2: #173463;
|
||||||
|
--td-brand-color-3: #143975;
|
||||||
|
--td-brand-color-4: #103D88;
|
||||||
|
--td-brand-color-5: #0D429A;
|
||||||
|
--td-brand-color-6: #054BBE;
|
||||||
|
--td-brand-color-7: #2667D4;
|
||||||
|
--td-brand-color-8: #4582E6;
|
||||||
|
--td-brand-color-9: #699EF5;
|
||||||
|
--td-brand-color-10: #96BBF8;
|
||||||
|
|
||||||
|
--td-warning-color-1: #4F2A1D;
|
||||||
|
--td-warning-color-2: #582F21;
|
||||||
|
--td-warning-color-3: #733C23;
|
||||||
|
--td-warning-color-4: #A75D2B;
|
||||||
|
--td-warning-color-5: #CF6E2D;
|
||||||
|
--td-warning-color-6: #DC7633;
|
||||||
|
--td-warning-color-7: #E8935C;
|
||||||
|
--td-warning-color-8: #ECBF91;
|
||||||
|
--td-warning-color-9: #EED7BF;
|
||||||
|
--td-warning-color-10: #F3E9DC;
|
||||||
|
|
||||||
|
--td-error-color-1: #472324;
|
||||||
|
--td-error-color-2: #5E2A2D;
|
||||||
|
--td-error-color-3: #703439;
|
||||||
|
--td-error-color-4: #83383E;
|
||||||
|
--td-error-color-5: #A03F46;
|
||||||
|
--td-error-color-6: #C64751;
|
||||||
|
--td-error-color-7: #DE6670;
|
||||||
|
--td-error-color-8: #EC888E;
|
||||||
|
--td-error-color-9: #EDB1B6;
|
||||||
|
--td-error-color-10: #EECED0;
|
||||||
|
|
||||||
|
--td-success-color-1: #193A2A;
|
||||||
|
--td-success-color-2: #1A4230;
|
||||||
|
--td-success-color-3: #17533D;
|
||||||
|
--td-success-color-4: #0D7A55;
|
||||||
|
--td-success-color-5: #059465;
|
||||||
|
--td-success-color-6: #43AF8A;
|
||||||
|
--td-success-color-7: #46BF96;
|
||||||
|
--td-success-color-8: #80D2B6;
|
||||||
|
--td-success-color-9: #B4E1D3;
|
||||||
|
--td-success-color-10: #DEEDE8;
|
||||||
|
|
||||||
|
--td-gray-color-1: #F3F3F3;
|
||||||
|
--td-gray-color-2: #EEEEEE;
|
||||||
|
--td-gray-color-3: #E7E7E7;
|
||||||
|
--td-gray-color-4: #DCDCDC;
|
||||||
|
--td-gray-color-5: #C5C5C5;
|
||||||
|
--td-gray-color-6: #A6A6A6;
|
||||||
|
--td-gray-color-7: #8B8B8B;
|
||||||
|
--td-gray-color-8: #777777;
|
||||||
|
--td-gray-color-9: #5E5E5E;
|
||||||
|
--td-gray-color-10: #4B4B4B;
|
||||||
|
--td-gray-color-11: #383838;
|
||||||
|
--td-gray-color-12: #2C2C2C;
|
||||||
|
--td-gray-color-13: #242424;
|
||||||
|
--td-gray-color-14: #181818;
|
||||||
|
|
||||||
|
// 文字 & 图标 颜色
|
||||||
|
--td-font-white-1: rgba(255, 255, 255, .9);
|
||||||
|
--td-font-white-2: rgba(255, 255, 255, .55);
|
||||||
|
--td-font-white-3: rgba(255, 255, 255, .35);
|
||||||
|
--td-font-white-4: rgba(255, 255, 255, .22);
|
||||||
|
|
||||||
|
--td-font-gray-1: rgba(0, 0, 0, .9);
|
||||||
|
--td-font-gray-2: rgba(0, 0, 0, .6);
|
||||||
|
--td-font-gray-3: rgba(0, 0, 0, .4);
|
||||||
|
--td-font-gray-4: rgba(0, 0, 0, .26);
|
||||||
|
|
||||||
|
// 基础颜色
|
||||||
|
--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
|
||||||
|
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
|
||||||
|
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
|
||||||
|
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功
|
||||||
|
|
||||||
|
|
||||||
|
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
|
||||||
|
--td-brand-color-hover: var(--td-brand-color-7); // hover态
|
||||||
|
--td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
|
||||||
|
--td-brand-color-active: var(--td-brand-color-9); // 点击态
|
||||||
|
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
|
||||||
|
--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
|
||||||
|
|
||||||
|
// 警告色扩展
|
||||||
|
--td-warning-color-hover: var(--td-warning-color-4);
|
||||||
|
--td-warning-color-focus: var(--td-warning-color-2);
|
||||||
|
--td-warning-color-active: var(--td-warning-color-6);
|
||||||
|
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||||
|
--td-warning-color-light: var(--td-warning-color-1);
|
||||||
|
|
||||||
|
// 失败/错误色扩展
|
||||||
|
--td-error-color-hover: var(--td-error-color-5);
|
||||||
|
--td-error-color-focus: var(--td-error-color-2);
|
||||||
|
--td-error-color-active: var(--td-error-color-7);
|
||||||
|
--td-error-color-disabled: var(--td-error-color-3);
|
||||||
|
--td-error-color-light: var(--td-error-color-1);
|
||||||
|
|
||||||
|
// 成功色扩展
|
||||||
|
--td-success-color-hover: var(--td-success-color-4);
|
||||||
|
--td-success-color-focus: var(--td-success-color-2);
|
||||||
|
--td-success-color-active: var(--td-success-color-6);
|
||||||
|
--td-success-color-disabled: var(--td-success-color-3);
|
||||||
|
--td-success-color-light: var(--td-success-color-1);
|
||||||
|
|
||||||
|
// 遮罩
|
||||||
|
--td-mask-active: rgba(0, 0, 0, .4); // 遮罩-弹出
|
||||||
|
--td-mask-disabled: rgba(0, 0, 0, .6); // 遮罩-禁用
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
--td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
|
||||||
|
--td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
|
||||||
|
--td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover
|
||||||
|
--td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active
|
||||||
|
--td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select
|
||||||
|
|
||||||
|
--td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
|
||||||
|
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover
|
||||||
|
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active
|
||||||
|
|
||||||
|
--td-bg-color-component: var(--td-gray-color-11); // 色彩 - 组件
|
||||||
|
--td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover
|
||||||
|
--td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active
|
||||||
|
--td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
|
||||||
|
|
||||||
|
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||||
|
--td-bg-color-specialcomponent: transparent;
|
||||||
|
|
||||||
|
// 文本颜色
|
||||||
|
--td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要
|
||||||
|
--td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
|
||||||
|
--td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
|
||||||
|
--td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
|
||||||
|
--td-text-color-anti: #fff; // 色彩-文字-反色
|
||||||
|
--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
|
||||||
|
--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
|
||||||
|
|
||||||
|
// 分割线
|
||||||
|
--td-border-level-1-color: var(--td-gray-color-11);
|
||||||
|
--td-component-stroke: var(--td-gray-color-11);
|
||||||
|
// 边框
|
||||||
|
--td-border-level-2-color: var(--td-gray-color-9);
|
||||||
|
--td-component-border: var(--td-gray-color-9);
|
||||||
|
|
||||||
|
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||||
|
--td-shadow-1: 0px 4px 6px rgba(0, 0, 0, .06), 0px 1px 10px rgba(0, 0, 0, .08), 0px 2px 4px rgba(0, 0, 0, .12);
|
||||||
|
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||||
|
--td-shadow-2: 0px 8px 10px rgba(0, 0, 0, .12), 0px 3px 14px rgba(0, 0, 0, .1), 0px 5px 5px rgba(0, 0, 0, .16);
|
||||||
|
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||||
|
--td-shadow-3: 0px 16px 24px rgba(0, 0, 0, .14), 0px 6px 30px rgba(0, 0, 0, .12), 0px 8px 10px rgba(0, 0, 0, .2);
|
||||||
|
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
|
||||||
|
|
||||||
|
--td-shadow-inset-top: inset 0px .5px 0px #5E5E5E;
|
||||||
|
--td-shadow-inset-right: inset .5px 0px 0px #5E5E5E;
|
||||||
|
--td-shadow-inset-bottom: inset 0px -.5px 0px #5E5E5E;
|
||||||
|
--td-shadow-inset-left: inset -.5px 0px 0px #5E5E5E;
|
||||||
|
|
||||||
|
// table 特定阴影
|
||||||
|
--td-table-shadow-color: rgba(0, 0, 0, .55);
|
||||||
|
|
||||||
|
// 滚动条颜色
|
||||||
|
--td-scrollbar-color: rgba(255, 255, 255, .1);
|
||||||
|
}
|
||||||
14
src/style/theme/green.less
Normal file
14
src/style/theme/green.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
:root[theme-color='green'],
|
||||||
|
:root[theme-color='green'][theme-mode='dark'] {
|
||||||
|
--td-brand-color: #00A870;
|
||||||
|
--td-brand-color-1: #DFF7ED;
|
||||||
|
--td-brand-color-2: #A9E8CD;
|
||||||
|
--td-brand-color-3: #69D5AB;
|
||||||
|
--td-brand-color-4: #30BF8B;
|
||||||
|
--td-brand-color-5: #00A870;
|
||||||
|
--td-brand-color-6: #00935D;
|
||||||
|
--td-brand-color-7: #007E4A;
|
||||||
|
--td-brand-color-8: #006937;
|
||||||
|
--td-brand-color-9: #005426;
|
||||||
|
--td-brand-color-10: #004114;
|
||||||
|
}
|
||||||
17
src/style/theme/index.less
Normal file
17
src/style/theme/index.less
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
@import './cyan.less';
|
||||||
|
|
||||||
|
@import './green.less';
|
||||||
|
|
||||||
|
@import './light.less';
|
||||||
|
|
||||||
|
@import './orange.less';
|
||||||
|
|
||||||
|
@import './pink.less';
|
||||||
|
|
||||||
|
@import './purple.less';
|
||||||
|
|
||||||
|
@import './red.less';
|
||||||
|
|
||||||
|
@import './yellow.less';
|
||||||
|
|
||||||
|
@import './dark.less';
|
||||||
169
src/style/theme/light.less
Normal file
169
src/style/theme/light.less
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
:root,
|
||||||
|
:root[theme-mode='light'] {
|
||||||
|
--td-brand-color-8: #0052D9;
|
||||||
|
--td-brand-color-1: #ECF2FE;
|
||||||
|
--td-brand-color-2: #D4E3FC;
|
||||||
|
--td-brand-color-3: #BBD3FB;
|
||||||
|
--td-brand-color-4: #96BBF8;
|
||||||
|
--td-brand-color-5: #699EF5;
|
||||||
|
--td-brand-color-6: #4787F0;
|
||||||
|
--td-brand-color-7: #266FE8;
|
||||||
|
--td-brand-color-8: #0052D9;
|
||||||
|
--td-brand-color-9: #0034B5;
|
||||||
|
--td-brand-color-10: #001F97;
|
||||||
|
|
||||||
|
--td-warning-color-1: #FEF3E6;
|
||||||
|
--td-warning-color-2: #F9E0C7;
|
||||||
|
--td-warning-color-3: #F7C797;
|
||||||
|
--td-warning-color-4: #F2995F;
|
||||||
|
--td-warning-color-5: #ED7B2F;
|
||||||
|
--td-warning-color-6: #D35A21;
|
||||||
|
--td-warning-color-7: #BA431B;
|
||||||
|
--td-warning-color-8: #9E3610;
|
||||||
|
--td-warning-color-9: #842B0B;
|
||||||
|
--td-warning-color-10: #5A1907;
|
||||||
|
|
||||||
|
--td-error-color-1: #FDECEE;
|
||||||
|
--td-error-color-2: #F9D7D9;
|
||||||
|
--td-error-color-3: #F8B9BE;
|
||||||
|
--td-error-color-4: #F78D94;
|
||||||
|
--td-error-color-5: #F36D78;
|
||||||
|
--td-error-color-6: #E34D59;
|
||||||
|
--td-error-color-7: #C9353F;
|
||||||
|
--td-error-color-8: #B11F26;
|
||||||
|
--td-error-color-9: #951114;
|
||||||
|
--td-error-color-10: #680506;
|
||||||
|
|
||||||
|
--td-success-color-1: #E8F8F2;
|
||||||
|
--td-success-color-2: #BCEBDC;
|
||||||
|
--td-success-color-3: #85DBBE;
|
||||||
|
--td-success-color-4: #48C79C;
|
||||||
|
--td-success-color-5: #00A870;
|
||||||
|
--td-success-color-6: #078D5C;
|
||||||
|
--td-success-color-7: #067945;
|
||||||
|
--td-success-color-8: #056334;
|
||||||
|
--td-success-color-9: #044F2A;
|
||||||
|
--td-success-color-10: #033017;
|
||||||
|
|
||||||
|
--td-gray-color-1: #F3F3F3;
|
||||||
|
--td-gray-color-2: #EEEEEE;
|
||||||
|
--td-gray-color-3: #E7E7E7;
|
||||||
|
--td-gray-color-4: #DCDCDC;
|
||||||
|
--td-gray-color-5: #C5C5C5;
|
||||||
|
--td-gray-color-6: #A6A6A6;
|
||||||
|
--td-gray-color-7: #8B8B8B;
|
||||||
|
--td-gray-color-8: #777777;
|
||||||
|
--td-gray-color-9: #5E5E5E;
|
||||||
|
--td-gray-color-10: #4B4B4B;
|
||||||
|
--td-gray-color-11: #383838;
|
||||||
|
--td-gray-color-12: #2C2C2C;
|
||||||
|
--td-gray-color-13: #242424;
|
||||||
|
--td-gray-color-14: #181818;
|
||||||
|
|
||||||
|
// 文字 & 图标 颜色
|
||||||
|
--td-font-white-1: rgba(255, 255, 255, 1);
|
||||||
|
--td-font-white-2: rgba(255, 255, 255, .55);
|
||||||
|
--td-font-white-3: rgba(255, 255, 255, .35);
|
||||||
|
--td-font-white-4: rgba(255, 255, 255, .22);
|
||||||
|
|
||||||
|
--td-font-gray-1: rgba(0, 0, 0, .9);
|
||||||
|
--td-font-gray-2: rgba(0, 0, 0, .6);
|
||||||
|
--td-font-gray-3: rgba(0, 0, 0, .4);
|
||||||
|
--td-font-gray-4: rgba(0, 0, 0, .26);
|
||||||
|
|
||||||
|
// 基础颜色
|
||||||
|
--td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
|
||||||
|
--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
|
||||||
|
--td-error-color: var(--td-error-color-6); // 色彩-功能-失败
|
||||||
|
--td-success-color: var(--td-success-color-5); // 色彩-功能-成功
|
||||||
|
|
||||||
|
|
||||||
|
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
|
||||||
|
--td-brand-color-hover: var(--td-brand-color-7); // hover态
|
||||||
|
--td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
|
||||||
|
--td-brand-color-active: var(--td-brand-color-9); // 点击态
|
||||||
|
--td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
|
||||||
|
--td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
|
||||||
|
|
||||||
|
// 警告色扩展
|
||||||
|
--td-warning-color-hover: var(--td-warning-color-4);
|
||||||
|
--td-warning-color-focus: var(--td-warning-color-2);
|
||||||
|
--td-warning-color-active: var(--td-warning-color-6);
|
||||||
|
--td-warning-color-disabled: var(--td-warning-color-3);
|
||||||
|
--td-warning-color-light: var(--td-warning-color-1);
|
||||||
|
|
||||||
|
// 失败/错误色扩展
|
||||||
|
--td-error-color-hover: var(--td-error-color-5);
|
||||||
|
--td-error-color-focus: var(--td-error-color-2);
|
||||||
|
--td-error-color-active: var(--td-error-color-7);
|
||||||
|
--td-error-color-disabled: var(--td-error-color-3);
|
||||||
|
--td-error-color-light: var(--td-error-color-1);
|
||||||
|
|
||||||
|
// 成功色扩展
|
||||||
|
--td-success-color-hover: var(--td-success-color-4);
|
||||||
|
--td-success-color-focus: var(--td-success-color-2);
|
||||||
|
--td-success-color-active: var(--td-success-color-6);
|
||||||
|
--td-success-color-disabled: var(--td-success-color-3);
|
||||||
|
--td-success-color-light: var(--td-success-color-1);
|
||||||
|
|
||||||
|
// 遮罩
|
||||||
|
--td-mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出
|
||||||
|
--td-mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
--td-bg-color-page: var(--td-gray-color-2); // 色彩 - page
|
||||||
|
--td-bg-color-container: #fff; // 色彩 - 容器
|
||||||
|
--td-bg-color-container-hover: var(--td-gray-color-1); // 色彩 - 容器 - hover
|
||||||
|
--td-bg-color-container-active: var(--td-gray-color-3); // 色彩 - 容器 - active
|
||||||
|
--td-bg-color-container-select: #fff; // 色彩 - 容器 - select
|
||||||
|
|
||||||
|
--td-bg-color-secondarycontainer: var(--td-gray-color-1); // 色彩 - 次级容器
|
||||||
|
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); // 色彩 - 次级容器 - hover
|
||||||
|
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4); // 色彩 - 次级容器 - active
|
||||||
|
|
||||||
|
--td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件
|
||||||
|
--td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover
|
||||||
|
--td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active
|
||||||
|
--td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled
|
||||||
|
|
||||||
|
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||||
|
--td-bg-color-specialcomponent: #fff;
|
||||||
|
|
||||||
|
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||||
|
--td-bg-color-specialcomponent: #fff;
|
||||||
|
|
||||||
|
// 文本颜色
|
||||||
|
--td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要
|
||||||
|
--td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
|
||||||
|
--td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明
|
||||||
|
--td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
|
||||||
|
--td-text-color-anti: #fff; // 色彩-文字-反色
|
||||||
|
--td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
|
||||||
|
--td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
|
||||||
|
|
||||||
|
// 分割线
|
||||||
|
--td-border-level-1-color: var(--td-gray-color-3);
|
||||||
|
--td-component-stroke: var(--td-gray-color-3);
|
||||||
|
// 边框
|
||||||
|
--td-border-level-2-color: var(--td-gray-color-4);
|
||||||
|
--td-component-border: var(--td-gray-color-4);
|
||||||
|
|
||||||
|
// 基础/下层 投影 hover 使用的组件包括：表格 /
|
||||||
|
--td-shadow-1: 0px 1px 10px rgba(0, 0, 0, .05), 0px 4px 5px rgba(0, 0, 0, .08), 0px 2px 4px -1px rgba(0, 0, 0, .12);
|
||||||
|
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
|
||||||
|
--td-shadow-2: 0px 3px 14px 2px rgba(0, 0, 0, .05), 0px 8px 10px 1px rgba(0, 0, 0, .06), 0px 5px 5px -3px rgba(0, 0, 0, .1);
|
||||||
|
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
|
||||||
|
--td-shadow-3: 0px 6px 30px 5px rgba(0, 0, 0, .05), 0px 16px 24px 2px rgba(0, 0, 0, .04), 0px 8px 10px -5px rgba(0, 0, 0, .08);
|
||||||
|
|
||||||
|
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
|
||||||
|
--td-shadow-inset-top: inset 0px .5px 0px #DCDCDC;
|
||||||
|
--td-shadow-inset-right: inset .5px 0px 0px #DCDCDC;
|
||||||
|
--td-shadow-inset-bottom: inset 0px -.5px 0px #DCDCDC;
|
||||||
|
--td-shadow-inset-left: inset -.5px 0px 0px #DCDCDC;
|
||||||
|
|
||||||
|
// table 特定阴影
|
||||||
|
--td-table-shadow-color: rgba(0, 0, 0, .08);
|
||||||
|
|
||||||
|
// 滚动条颜色
|
||||||
|
--td-scrollbar-color: rgba(0, 0, 0, .1);
|
||||||
|
}
|
||||||
14
src/style/theme/orange.less
Normal file
14
src/style/theme/orange.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
:root[theme-color='orange'],
|
||||||
|
:root[theme-color='orange'][theme-mode='dark'] {
|
||||||
|
--td-brand-color-1: #FFEFDB;
|
||||||
|
--td-brand-color-2: #FFD3A3;
|
||||||
|
--td-brand-color-3: #FFB473;
|
||||||
|
--td-brand-color-4: #FF9247;
|
||||||
|
--td-brand-color-5: #ED7B2F;
|
||||||
|
--td-brand-color-6: #D6621C;
|
||||||
|
--td-brand-color-7: #C24C08;
|
||||||
|
--td-brand-color-8: #A23C00;
|
||||||
|
--td-brand-color-9: #872D00;
|
||||||
|
--td-brand-color-10: #691F00;
|
||||||
|
--td-brand-color: #C24C08;
|
||||||
|
}
|
||||||
14
src/style/theme/pink.less
Normal file
14
src/style/theme/pink.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
:root[theme-color='pink'],
|
||||||
|
:root[theme-color='pink'][theme-mode='dark'] {
|
||||||
|
--td-brand-color: #ED49B4;
|
||||||
|
--td-brand-color-1: #FFE9FF;
|
||||||
|
--td-brand-color-2: #FFD1FC;
|
||||||
|
--td-brand-color-3: #FFB2F2;
|
||||||
|
--td-brand-color-4: #FF8FE1;
|
||||||
|
--td-brand-color-5: #FF66CC;
|
||||||
|
--td-brand-color-6: #ED49B4;
|
||||||
|
--td-brand-color-7: #D42C9D;
|
||||||
|
--td-brand-color-8: #BC0088;
|
||||||
|
--td-brand-color-9: #9B006B;
|
||||||
|
--td-brand-color-10: #7B0052;
|
||||||
|
}
|
||||||
14
src/style/theme/purple.less
Normal file
14
src/style/theme/purple.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
:root[theme-color='purple'],
|
||||||
|
:root[theme-color='purple'][theme-mode='dark'] {
|
||||||
|
--td-brand-color: #834EC2;
|
||||||
|
--td-brand-color-1: #F3E0FF;
|
||||||
|
--td-brand-color-2: #E6C4FF;
|
||||||
|
--td-brand-color-3: #D8ABFF;
|
||||||
|
--td-brand-color-4: #C68CFF;
|
||||||
|
--td-brand-color-5: #AE78F0;
|
||||||
|
--td-brand-color-6: #9963D8;
|
||||||
|
--td-brand-color-7: #834EC2;
|
||||||
|
--td-brand-color-8: #6D3BAC;
|
||||||
|
--td-brand-color-9: #572796;
|
||||||
|
--td-brand-color-10: #421381;
|
||||||
|
}
|
||||||
14
src/style/theme/red.less
Normal file
14
src/style/theme/red.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
:root[theme-color='red'],
|
||||||
|
:root[theme-color='red'][theme-mode='dark'] {
|
||||||
|
--td-brand-color: #E34D59;
|
||||||
|
--td-brand-color-1: #FFE9E9;
|
||||||
|
--td-brand-color-2: #FFCCCE;
|
||||||
|
--td-brand-color-3: #FFACAF;
|
||||||
|
--td-brand-color-4: #FF888C;
|
||||||
|
--td-brand-color-5: #FB646D;
|
||||||
|
--td-brand-color-6: #E34D59;
|
||||||
|
--td-brand-color-7: #C93043;
|
||||||
|
--td-brand-color-8: #B01531;
|
||||||
|
--td-brand-color-9: #960022;
|
||||||
|
--td-brand-color-10: #730021;
|
||||||
|
}
|
||||||
14
src/style/theme/yellow.less
Normal file
14
src/style/theme/yellow.less
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
:root[theme-color='yellow'],
|
||||||
|
:root[theme-color='yellow'][theme-mode='dark'] {
|
||||||
|
--td-brand-color: #EBB105;
|
||||||
|
--td-brand-color-1: #FFF8B8;
|
||||||
|
--td-brand-color-2: #FFE478;
|
||||||
|
--td-brand-color-3: #FBCA25;
|
||||||
|
--td-brand-color-4: #EBB105;
|
||||||
|
--td-brand-color-5: #D29C00;
|
||||||
|
--td-brand-color-6: #BA8700;
|
||||||
|
--td-brand-color-7: #A37200;
|
||||||
|
--td-brand-color-8: #8C5F00;
|
||||||
|
--td-brand-color-9: #754C00;
|
||||||
|
--td-brand-color-10: #5E3A00;
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// 获取常用时间
|
// 获取常用时间
|
||||||
import dayjs, { Dayjs } from 'dayjs';
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
|
|
||||||
export const LAST_7_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(7, 'day'), dayjs().subtract(1, 'day')];
|
export const LAST_7_DAYS = [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')];
|
||||||
|
|
||||||
export const LAST_30_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(30, 'day'), dayjs().subtract(1, 'day')];
|
export const LAST_30_DAYS = [dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')];
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,9 @@ import * as echarts from 'echarts/core';
|
||||||
* @param domId
|
* @param domId
|
||||||
* @param chart
|
* @param chart
|
||||||
*/
|
*/
|
||||||
export const useChart = (domId: string) => {
|
export const useChart = (domId: string): Ref<echarts.ECharts> => {
|
||||||
let chartContainer: HTMLCanvasElement;
|
let chartContainer: HTMLCanvasElement;
|
||||||
const selfChart = ref<echarts.ECharts>();
|
const selfChart = ref<echarts.ECharts | any>();
|
||||||
const updateContainer = () => {
|
const updateContainer = () => {
|
||||||
selfChart.value.resize({
|
selfChart.value.resize({
|
||||||
width: chartContainer.clientWidth,
|
width: chartContainer.clientWidth,
|
||||||
|
|
@ -23,14 +23,13 @@ export const useChart = (domId: string) => {
|
||||||
selfChart.value = echarts.init(chartContainer);
|
selfChart.value = echarts.init(chartContainer);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
window.addEventListener('resize', updateContainer, false);
|
window.addEventListener('resize', updateContainer, false);
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', updateContainer);
|
window.removeEventListener('resize', updateContainer);
|
||||||
});
|
});
|
||||||
|
|
||||||
return selfChart
|
return selfChart;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -38,25 +37,25 @@ export const useChart = (domId: string) => {
|
||||||
* @param duration
|
* @param duration
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const useCounter = (duration: number = 60): [
|
export const useCounter = (duration = 60): [Ref<number>, () => void] => {
|
||||||
Ref<number>, () => void
|
let intervalTimer: NodeJS.Timer;
|
||||||
] => {
|
|
||||||
let intervalTimer = null;
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
clearInterval(intervalTimer)
|
clearInterval(intervalTimer);
|
||||||
})
|
});
|
||||||
const countDown = ref(0);
|
const countDown = ref(0);
|
||||||
|
|
||||||
return [countDown, () => {
|
return [
|
||||||
countDown.value = duration;
|
countDown,
|
||||||
intervalTimer = setInterval(() => {
|
() => {
|
||||||
if (countDown.value > 0) {
|
countDown.value = duration;
|
||||||
countDown.value -= 1;
|
intervalTimer = setInterval(() => {
|
||||||
} else {
|
if (countDown.value > 0) {
|
||||||
clearInterval(intervalTimer);
|
countDown.value -= 1;
|
||||||
countDown.value = 0;
|
} else {
|
||||||
intervalTimer = null;
|
clearInterval(intervalTimer);
|
||||||
}
|
countDown.value = 0;
|
||||||
}, 1000)
|
}
|
||||||
}];
|
}, 1000);
|
||||||
}
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ const instance = axios.create({
|
||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
instance.interceptors.request.use(config => config);
|
instance.interceptors.request.use((config) => config);
|
||||||
|
|
||||||
instance.defaults.retry = 3;
|
instance.defaults.retry = 3;
|
||||||
|
|
||||||
|
|
@ -28,8 +28,8 @@ instance.interceptors.response.use(
|
||||||
if (data.code === CODE.REQUEST_SUCCESS) {
|
if (data.code === CODE.REQUEST_SUCCESS) {
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
return response;
|
|
||||||
}
|
}
|
||||||
|
return response;
|
||||||
},
|
},
|
||||||
(err) => {
|
(err) => {
|
||||||
const { config } = err;
|
const { config } = err;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
"target": "esnext",
|
"target": "esnext",
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"strict": false,
|
"strict": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
|
|
@ -12,8 +12,9 @@
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["src/*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["**/*.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
"include": ["**/*.ts", "src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"compileOnSave": false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,19 @@
|
||||||
import { defineConfig } from 'vite';
|
import { defineConfig } from 'vite';
|
||||||
import { viteMockServe } from 'vite-plugin-mock';
|
import { viteMockServe } from 'vite-plugin-mock';
|
||||||
import { viteThemePlugin } from 'vite-plugin-theme';
|
|
||||||
import createVuePlugin from '@vitejs/plugin-vue';
|
import createVuePlugin from '@vitejs/plugin-vue';
|
||||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||||
import svgLoader from 'vite-svg-loader';
|
import svgLoader from 'vite-svg-loader';
|
||||||
|
|
||||||
// import HttpProxyAgent from 'http-proxy-agent';
|
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
|
|
||||||
// import proxy from './src/config/proxy';
|
|
||||||
import { getColorList, getGreyColor, getBrandColor } from './src/config/color';
|
|
||||||
import USER_CONFIG from './src/config/style';
|
|
||||||
|
|
||||||
const { brandTheme, backgroundTheme } = USER_CONFIG;
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'~': path.resolve(__dirname, './'),
|
|
||||||
'@': path.resolve(__dirname, './src'),
|
'@': path.resolve(__dirname, './src'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
css: {
|
|
||||||
preprocessorOptions: {
|
|
||||||
less: {
|
|
||||||
modifyVars: {
|
|
||||||
...getBrandColor(brandTheme),
|
|
||||||
...getGreyColor(backgroundTheme),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
createVuePlugin(),
|
createVuePlugin(),
|
||||||
|
|
@ -41,9 +22,6 @@ export default defineConfig({
|
||||||
mockPath: 'mock',
|
mockPath: 'mock',
|
||||||
localEnabled: true,
|
localEnabled: true,
|
||||||
}),
|
}),
|
||||||
viteThemePlugin({
|
|
||||||
colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
|
|
||||||
}),
|
|
||||||
svgLoader(),
|
svgLoader(),
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user