mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-22 15:59:25 +08:00
feat: upgrade the third phase of the component
This commit is contained in:
pengYYYYY
parent
9811a061b6
commit
7282a8a48d
12
.gitignore
vendored
12
.gitignore
vendored
|
|
@ -17,15 +17,7 @@ coverage
|
||||||
test-report.html
|
test-report.html
|
||||||
.idea/
|
.idea/
|
||||||
yarn.lock
|
yarn.lock
|
||||||
|
yarn-error.log
|
||||||
*.zip
|
*.zip
|
||||||
.history
|
.history
|
||||||
script/test/cypress/screenshots
|
.stylelintcache
|
||||||
script/test/cypress/videos
|
|
||||||
script/test/cypress/results
|
|
||||||
script/test/cypress/support
|
|
||||||
results/
|
|
||||||
yarn-error.log
|
|
||||||
cypress
|
|
||||||
cypress.json
|
|
||||||
Dockerfile
|
|
||||||
robotMsg.json
|
|
||||||
|
|
|
||||||
8
.stylelintignore
Normal file
8
.stylelintignore
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
# .stylelintignore
|
||||||
|
# 旧的不需打包的样式库
|
||||||
|
*.min.css
|
||||||
|
|
||||||
|
# 其他类型文件
|
||||||
|
*.js
|
||||||
|
*.jpg
|
||||||
|
*.woff
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="containerCls">
|
<div :class="containerCls">
|
||||||
<div
|
<div :class="titleCls">
|
||||||
v-show="title || describe"
|
<span :class="titleTextCls">
|
||||||
class="card-title"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{{ title }}
|
{{ title }}
|
||||||
<span
|
<span
|
||||||
v-if="describe"
|
v-if="describe"
|
||||||
|
|
@ -18,42 +15,87 @@
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="size !== 'small'"
|
||||||
|
class="card-spacer-bottom"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent, PropType, computed } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Card',
|
name: 'Card',
|
||||||
props: {
|
props: {
|
||||||
title: String,
|
title: String as PropType<string>,
|
||||||
compact: {
|
compact: {
|
||||||
type: Boolean,
|
type: Boolean as PropType<boolean>,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
describe: String,
|
describe: String as PropType<string>,
|
||||||
|
size: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: 'default',
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
containerCls() {
|
|
||||||
return ['card-container', { 'card-container-compact': this.compact }];
|
|
||||||
},
|
},
|
||||||
|
setup(props) {
|
||||||
|
const containerCls = computed(() => {
|
||||||
|
const { compact } = props;
|
||||||
|
return ['card-container', { 'card-container-compact': compact }];
|
||||||
|
});
|
||||||
|
|
||||||
|
const titleCls = computed(() => {
|
||||||
|
const { size } = props;
|
||||||
|
return [
|
||||||
|
'card-title',
|
||||||
|
{
|
||||||
|
'card-title-small': size === 'small',
|
||||||
|
'card-title-default': size !== 'small',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const titleTextCls = computed(() => {
|
||||||
|
const { size } = props;
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
'card-title-text-small': size === 'small',
|
||||||
|
'card-title-text-default': size !== 'small',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
containerCls,
|
||||||
|
titleCls,
|
||||||
|
titleTextCls,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('@/style/index.less');
|
@import url('@/style/index.less');
|
||||||
.card {
|
|
||||||
&-option {
|
.t-col > .card-container {
|
||||||
position: absolute;
|
margin: 0;
|
||||||
top: 20px;
|
|
||||||
right: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
|
||||||
|
&-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
padding: 24px;
|
padding: 24px 32px;
|
||||||
margin: 16px 0;
|
margin: 16px 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
&-compact {
|
&-compact {
|
||||||
padding: 16px 16px 0;
|
padding: 16px 16px 0;
|
||||||
|
|
@ -65,17 +107,32 @@ export default defineComponent({
|
||||||
&-title {
|
&-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
line-height: 24px;
|
line-height: 22px;
|
||||||
font-family: PingFangSC-Medium;
|
font-family: PingFangSC-Regular;
|
||||||
margin-bottom: 16px;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: @text-level-1-color;
|
color: @text-color-primary;
|
||||||
|
|
||||||
|
&-small {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-default {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
&-default {
|
||||||
|
margin: @spacer 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-describe {
|
&-describe {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0, 0, 0, 0.6);
|
color: rgba(0, 0, 0, .6);
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -83,6 +140,11 @@ export default defineComponent({
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-spacer-bottom {
|
||||||
|
height: @spacer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
36
src/components/color.vue
Normal file
36
src/components/color.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="style"
|
||||||
|
class="color-container"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent } from 'vue';
|
||||||
|
import { getBrandColor } from '@/config/color';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Color',
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const style = computed(() => {
|
||||||
|
const { value } = props;
|
||||||
|
return {
|
||||||
|
backgroundColor: getBrandColor(value)['@brand-color'],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return { style };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.color-container {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -27,6 +27,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, PropType } from 'vue';
|
import { defineComponent, PropType } from 'vue';
|
||||||
import Card from '@/components/card/index.vue';
|
import Card from '@/components/card/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Result',
|
name: 'Result',
|
||||||
components: { Card },
|
components: { Card },
|
||||||
|
|
@ -44,7 +45,9 @@ export default defineComponent({
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('@/style/index.less');
|
@import url('@/style/index.less');
|
||||||
|
|
||||||
.result {
|
.result {
|
||||||
|
|
||||||
&-link {
|
&-link {
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent, computed } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Thumbnail',
|
name: 'Thumbnail',
|
||||||
|
|
@ -19,22 +19,26 @@ export default defineComponent({
|
||||||
default: 'layout',
|
default: 'layout',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
setup(props) {
|
||||||
className() {
|
const className = computed(() => {
|
||||||
|
const { type } = props;
|
||||||
return [
|
return [
|
||||||
'thumbnail-container',
|
'thumbnail-container',
|
||||||
{
|
{
|
||||||
'thumbnail-circle': this.type === 'circle',
|
'thumbnail-circle': type === 'circle',
|
||||||
'thumbnail-layout': this.type === 'layout',
|
'thumbnail-layout': type === 'layout',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
},
|
});
|
||||||
|
return { className };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url('@/style/index.less');
|
@import url('@/style/index.less');
|
||||||
|
|
||||||
.thumbnail {
|
.thumbnail {
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
132
src/components/trend/index.vue
Normal file
132
src/components/trend/index.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
<template>
|
||||||
|
<span :class="containerCls">
|
||||||
|
<span :class="iconCls">
|
||||||
|
<svg
|
||||||
|
v-if="type === 'up'"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<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="M8 5V12"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span>{{ describe }}</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, computed, PropType } from 'vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Trend',
|
||||||
|
props: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
describe: [String, Number] as PropType<string | number>,
|
||||||
|
isReverseColor: Boolean as PropType<boolean>,
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const containerCls = computed(() => {
|
||||||
|
const { isReverseColor, type } = props;
|
||||||
|
return [
|
||||||
|
'trend-container',
|
||||||
|
{
|
||||||
|
'trend-container__reverse': isReverseColor,
|
||||||
|
'trend-container__up': !isReverseColor && type === 'up',
|
||||||
|
'trend-container__down': !isReverseColor && type === 'down',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const iconCls = computed(() => ['trend-icon-container']);
|
||||||
|
|
||||||
|
return {
|
||||||
|
containerCls,
|
||||||
|
iconCls,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import url('@/style/index.less');
|
||||||
|
|
||||||
|
.trend {
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
|
||||||
|
&__up {
|
||||||
|
color: #e34d59 !important;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.trend-icon-container {
|
||||||
|
background: #f9d7d9;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__down {
|
||||||
|
color: #00a870 !important;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.trend-icon-container {
|
||||||
|
background: #bcebdc;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__reverse {
|
||||||
|
color: #ffffff !important;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.trend-icon-container {
|
||||||
|
background: @brand-color-5;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-icon-container {
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
106
src/config/color.ts
Normal file
106
src/config/color.ts
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
type ColorToken = Record<string, string>;
|
||||||
|
|
||||||
|
const BLUE_GREY_TOKEN: ColorToken = {
|
||||||
|
'@gray-color-1': '#F1F2F5',
|
||||||
|
'@gray-color-2': '#EBEDF1',
|
||||||
|
'@gray-color-3': '#E3E6EB',
|
||||||
|
'@gray-color-4': '#D6DBE3',
|
||||||
|
'@gray-color-5': '#BCC4D0',
|
||||||
|
'@gray-color-6': '#97A3B7',
|
||||||
|
'@gray-color-7': '#7787A2',
|
||||||
|
'@gray-color-8': '#5F7292',
|
||||||
|
'@gray-color-9': '#4B5B76',
|
||||||
|
'@gray-color-10': '#3C485C',
|
||||||
|
'@gray-color-11': '#2C3645',
|
||||||
|
'@gray-color-12': '#232A35',
|
||||||
|
'@gray-color-13': '#1C222B',
|
||||||
|
'@gray-color-14': '#13161B',
|
||||||
|
};
|
||||||
|
|
||||||
|
const NEUTRAL_GREY_TOKEN: ColorToken = {
|
||||||
|
'@gray-color-1': '#F3F3F3',
|
||||||
|
'@gray-color-2': '#EEEEEE',
|
||||||
|
'@gray-color-3': '#E7E7E7',
|
||||||
|
'@gray-color-4': '#DCDCDC',
|
||||||
|
'@gray-color-5': '#C5C5C5',
|
||||||
|
'@gray-color-6': '#A6A6A6',
|
||||||
|
'@gray-color-7': '#8B8B8B',
|
||||||
|
'@gray-color-8': '#777777',
|
||||||
|
'@gray-color-9': '#5E5E5E',
|
||||||
|
'@gray-color-10': '#4B4B4B',
|
||||||
|
'@gray-color-11': '#383838',
|
||||||
|
'@gray-color-12': '#2C2C2C',
|
||||||
|
'@gray-color-13': '#242424',
|
||||||
|
'@gray-color-14': '#181818',
|
||||||
|
};
|
||||||
|
const DEFAULT_TOKEN: ColorToken = {
|
||||||
|
'@brand-color': '#0052D9',
|
||||||
|
'@brand-color-1': '#ECF2FE',
|
||||||
|
'@brand-color-2': '#D4E3FC',
|
||||||
|
'@brand-color-3': '#BBD3FB',
|
||||||
|
'@brand-color-4': '#96BBF8',
|
||||||
|
'@brand-color-5': '#699EF5',
|
||||||
|
'@brand-color-6': '#4787F0',
|
||||||
|
'@brand-color-7': '#266FE8',
|
||||||
|
'@brand-color-8': '#0052D9',
|
||||||
|
'@brand-color-9': '#0034B5',
|
||||||
|
'@brand-color-10': '#001F97',
|
||||||
|
};
|
||||||
|
|
||||||
|
const PURPLE_TOKEN: ColorToken = {
|
||||||
|
'@brand-color': '#834ec2',
|
||||||
|
'@brand-color-1': '#f3e0ff',
|
||||||
|
'@brand-color-2': '#e6c4ff',
|
||||||
|
'@brand-color-3': '#d8abff',
|
||||||
|
'@brand-color-4': '#c68cff',
|
||||||
|
'@brand-color-5': '#ae78f0',
|
||||||
|
'@brand-color-6': '#9963d8',
|
||||||
|
'@brand-color-7': '#834ec2',
|
||||||
|
'@brand-color-8': '#6d3bac',
|
||||||
|
'@brand-color-9': '#572796',
|
||||||
|
'@brand-color-10': '#421381',
|
||||||
|
};
|
||||||
|
|
||||||
|
const YELLOW_TOKEN: ColorToken = {
|
||||||
|
'@brand-color': '#ebb105',
|
||||||
|
'@brand-color-1': '#fff8b8',
|
||||||
|
'@brand-color-2': '#ffe478',
|
||||||
|
'@brand-color-3': '#fbca25',
|
||||||
|
'@brand-color-4': '#ebb105',
|
||||||
|
'@brand-color-5': '#d29c00',
|
||||||
|
'@brand-color-6': '#ba8700',
|
||||||
|
'@brand-color-7': '#a37200',
|
||||||
|
'@brand-color-8': '#8c5f00',
|
||||||
|
'@brand-color-9': '#754c00',
|
||||||
|
'@brand-color-10': '#5e3a00',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getGreyColor(type: string): ColorToken {
|
||||||
|
if (type === 'blueGrey') {
|
||||||
|
return BLUE_GREY_TOKEN;
|
||||||
|
}
|
||||||
|
if (type === 'neutralGrey') {
|
||||||
|
return NEUTRAL_GREY_TOKEN;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getBrandColor(type: string): ColorToken {
|
||||||
|
if (type === 'yellow') {
|
||||||
|
return YELLOW_TOKEN;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === 'purple') {
|
||||||
|
return PURPLE_TOKEN;
|
||||||
|
}
|
||||||
|
|
||||||
|
return DEFAULT_TOKEN;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getColorList(colorArray: ColorToken[]): string[] {
|
||||||
|
const pureColorList = [];
|
||||||
|
colorArray.map(colorToken => Object.keys(colorToken).map(key => pureColorList.push(colorToken[key])));
|
||||||
|
|
||||||
|
return pureColorList;
|
||||||
|
}
|
||||||
|
|
@ -9,4 +9,6 @@ export default {
|
||||||
isSidebarFixed: true,
|
isSidebarFixed: true,
|
||||||
isHeaderFixed: true,
|
isHeaderFixed: true,
|
||||||
showHeader: true,
|
showHeader: true,
|
||||||
|
backgroundTheme: 'blueGrey',
|
||||||
|
brandTheme: 'default',
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,10 @@
|
||||||
@import '@/style/index';
|
@import '@/style/index';
|
||||||
|
|
||||||
@media (max-width: @screen-md-max) {
|
@media (max-width: @screen-md-max) {
|
||||||
.dashboard-panel .t-col-3 {
|
|
||||||
min-width: 50%;
|
|
||||||
&:first-child {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-panel .t-col {
|
|
||||||
.card-container {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.t-tabs__content {
|
.t-tabs__content {
|
||||||
padding-top: @spacer-3;
|
padding-top: @spacer-3;
|
||||||
}
|
}
|
||||||
|
|
@ -23,15 +14,20 @@
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
|
|
||||||
.card-container {
|
.card-container {
|
||||||
|
|
||||||
.card-content {
|
.card-content {
|
||||||
|
|
||||||
&-label-title {
|
&-label-title {
|
||||||
color: @text-color-primary;
|
color: @text-color-primary;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.t-table th, .t-table td {
|
|
||||||
|
.t-table th,
|
||||||
|
.t-table td {
|
||||||
padding: 10px 8px;
|
padding: 10px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-table tr {
|
.t-table tr {
|
||||||
color: @text-color-primary;
|
color: @text-color-primary;
|
||||||
}
|
}
|
||||||
|
|
@ -43,25 +39,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dashboard-item-bottom {
|
.dashboard-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-end;
|
flex: 1;
|
||||||
|
|
||||||
.dashboard-item-bottom-left {
|
.dashboard-item-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
&-unit {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(0,0,0,0.90);
|
|
||||||
padding-left: 4px;
|
|
||||||
padding-top: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-number {
|
> span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: black;
|
color: black;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
|
|
@ -70,77 +60,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-item-bottom-right {
|
.dashboard-item-bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 55px;
|
|
||||||
|
|
||||||
.dashboard-item-bottom-emergency {
|
> .t-icon {
|
||||||
width: 96px;
|
cursor: pointer;
|
||||||
height: 32px;
|
color: inherit;
|
||||||
background: #FFE9E9;
|
|
||||||
border-radius: 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #E34D59;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-item-bottom-right-top {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(0,0,0,0.60);
|
|
||||||
padding-right: 8px;
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
height: 24px;
|
|
||||||
// font-weight: bold;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding-top: 14px;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
color: #00A870;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dashboard-item-bottom-right-bottom {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(0,0,0,0.60);
|
|
||||||
padding-right: 8px;
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
height: 24px;
|
|
||||||
background: #FFE9E9;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
color: #E34D59;
|
|
||||||
// font-weight: bold;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1px 8px;
|
|
||||||
|
|
||||||
.t-icon-caret-up {
|
|
||||||
margin-left: 5px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -212,6 +139,7 @@
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
||||||
.dashboard-chart-tend-item-title {
|
.dashboard-chart-tend-item-title {
|
||||||
color: grey !important;
|
color: grey !important;
|
||||||
}
|
}
|
||||||
|
|
@ -233,6 +161,7 @@
|
||||||
.dashboard-chart-tend-left {
|
.dashboard-chart-tend-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
.dashboard-chart-tend-num {
|
.dashboard-chart-tend-num {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
}
|
}
|
||||||
|
|
@ -257,11 +186,13 @@
|
||||||
|
|
||||||
&-describe {
|
&-describe {
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
color: rgba(0,0,0,0.60) !important;
|
color: rgba(0,0,0,.60) !important;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
|
|
||||||
.t-date-picker {
|
.t-date-picker {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
}
|
}
|
||||||
|
|
@ -269,7 +200,7 @@
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: rgba(0,0,0,0.90);
|
color: rgba(0,0,0,.90);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
@ -298,6 +229,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-chart-container {
|
.dashboard-chart-container {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
@ -306,4 +238,76 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
line-height: 22px;
|
||||||
|
color: @text-color-placeholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-item-trend {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashbord-item-left {
|
||||||
|
position: absolute;
|
||||||
|
top: 32px;
|
||||||
|
right: 32px;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
background: #ECF2FE;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
.t-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #0052D9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashbord-rank {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: @gray-color-5;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
|
||||||
|
&__top {
|
||||||
|
background: @brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-container {
|
||||||
|
margin-bottom: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-pannel {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container.main-color {
|
||||||
|
background: @brand-color;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.card-describe {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-item-top span {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-item-block {
|
||||||
|
color: rgba(255,255,255,.55);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,29 @@
|
||||||
|
import { getBrandColor } from '@/config/color';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
/** 图表颜色 */
|
||||||
|
let chartListColor: Array<string> = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取表头数据
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @param {string[]} dateTime
|
||||||
|
* @param {number} divideNum
|
||||||
|
* @returns {string[]}
|
||||||
|
*/
|
||||||
|
export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
|
||||||
|
const timeArray: string[] = [];
|
||||||
|
if (dateTime.length > 0) {
|
||||||
|
for (let i = 0; i < divideNum; i++) {
|
||||||
|
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||||
|
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||||
|
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return timeArray;
|
||||||
|
}
|
||||||
export class DashboardBase {
|
export class DashboardBase {
|
||||||
/** 更新容器尺寸 */
|
/** 更新容器尺寸 */
|
||||||
setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void {
|
setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void {
|
||||||
|
|
@ -23,7 +47,7 @@ export class DashboardBase {
|
||||||
*
|
*
|
||||||
* @memberOf DashboardBase
|
* @memberOf DashboardBase
|
||||||
*/
|
*/
|
||||||
export function getRandomNum(num = 100): number {
|
export function getRandomArray(num = 100): number {
|
||||||
let resultNum = Number((Math.random() * num).toFixed(0));
|
let resultNum = Number((Math.random() * num).toFixed(0));
|
||||||
|
|
||||||
if (resultNum <= 1) {
|
if (resultNum <= 1) {
|
||||||
|
|
@ -33,13 +57,87 @@ export function getRandomNum(num = 100): number {
|
||||||
return resultNum;
|
return resultNum;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 首页 dashbord 折线图 */
|
||||||
|
export function constructInitDashbordDataset(type: string) {
|
||||||
|
const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||||
|
const datasetAxis = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
show: false,
|
||||||
|
data: dateArray,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: false,
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (type === 'line') {
|
||||||
|
const lineDataset = {
|
||||||
|
...datasetAxis,
|
||||||
|
color: ['#fff'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [150, 230, 224, 218, 135, 147, 260],
|
||||||
|
type,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
return lineDataset;
|
||||||
|
}
|
||||||
|
if (type === 'bar') {
|
||||||
|
const barDataset = {
|
||||||
|
...datasetAxis,
|
||||||
|
color: chartListColor,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
100,
|
||||||
|
130,
|
||||||
|
184,
|
||||||
|
218,
|
||||||
|
{
|
||||||
|
value: 135,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ECF2FE',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 118,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ECF2FE',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 60,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ECF2FE',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
type,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
return barDataset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/** 柱状图数据源 */
|
/** 柱状图数据源 */
|
||||||
export function constructInitDataset(dateTime: Array<string> = []) {
|
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 inArray = [];
|
||||||
|
const outArray = [];
|
||||||
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 = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||||
|
|
@ -51,12 +149,215 @@ export function constructInitDataset(dateTime: Array<string> = []) {
|
||||||
.format('YYYY-MM-DD'));
|
.format('YYYY-MM-DD'));
|
||||||
}
|
}
|
||||||
|
|
||||||
inArray.push(getRandomNum().toString());
|
inArray.push(getRandomArray().toString());
|
||||||
outArray.push(getRandomNum().toString());
|
outArray.push(getRandomArray().toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// console.log('timeArray..', timeArray);
|
||||||
|
|
||||||
|
const dataset = {
|
||||||
|
color: chartListColor,
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: timeArray,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '5%',
|
||||||
|
left: '25px',
|
||||||
|
right: 0,
|
||||||
|
bottom: '60px',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '0',
|
||||||
|
orient: 'horizontal',
|
||||||
|
data: ['出库', '入库'],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '出库',
|
||||||
|
data: outArray,
|
||||||
|
type: 'bar',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '入库',
|
||||||
|
data: inArray,
|
||||||
|
type: 'bar',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
return dataset;
|
return dataset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 平滑图数据 */
|
||||||
|
export function getSmoothLineDataSet(dateTime: any = []): any {
|
||||||
|
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
|
||||||
|
if (dateTime.length > 0) {
|
||||||
|
const devideNum = 7;
|
||||||
|
dateArray = getDateArray(dateTime, devideNum);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
color: chartListColor,
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: dateArray,
|
||||||
|
boundaryGap: false,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['本月', '上月'],
|
||||||
|
icon: 'roundRect',
|
||||||
|
bottom: '15%',
|
||||||
|
itemGap: 60,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '上月',
|
||||||
|
data: [
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
color: '#BCC4D0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '本月',
|
||||||
|
data: [
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.1,
|
||||||
|
},
|
||||||
|
color: '#0052D9',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 折线图数据 */
|
||||||
|
export function getFolderlineDataSet(dateTime: any = []): any {
|
||||||
|
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||||
|
if (dateTime.length > 0) {
|
||||||
|
const devideNum = 7;
|
||||||
|
dateArray = getDateArray(dateTime, devideNum);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
color: chartListColor,
|
||||||
|
grid: {
|
||||||
|
top: '5%',
|
||||||
|
right: '1px',
|
||||||
|
left: '30px',
|
||||||
|
bottom: '60px',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '0',
|
||||||
|
orient: 'horizontal', // legend 横向布局。
|
||||||
|
data: ['杯子', '茶叶', '蜂蜜', '面粉'],
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: dateArray,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '杯子',
|
||||||
|
stack: '总量',
|
||||||
|
data: [
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '茶叶',
|
||||||
|
stack: '总量',
|
||||||
|
data: [
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '蜂蜜',
|
||||||
|
stack: '总量',
|
||||||
|
data: [
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '面粉',
|
||||||
|
stack: '总量',
|
||||||
|
data: [
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 线性图表数据源
|
* 线性图表数据源
|
||||||
*
|
*
|
||||||
|
|
@ -64,60 +365,71 @@ export function constructInitDataset(dateTime: Array<string> = []) {
|
||||||
* @param {Array<string>} [dateTime=[]]
|
* @param {Array<string>} [dateTime=[]]
|
||||||
* @returns {*}
|
* @returns {*}
|
||||||
*/
|
*/
|
||||||
export function getLineChartDataSet(dateTime: Array<string> = []): any {
|
export function getLineChartDataSet(checkedValues = ''): any {
|
||||||
if (dateTime.length > 0) {
|
let dateValueList = [];
|
||||||
const devideNum = 10;
|
if (checkedValues === 'monthVal') {
|
||||||
const dateArray: Array<string> = getDateArray(dateTime, devideNum);
|
dateValueList = ['1', '3', '8', '13', '18', '23', '28'];
|
||||||
return [
|
} else {
|
||||||
dateArray,
|
dateValueList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||||
getSelftItemList('杯子', devideNum),
|
|
||||||
getSelftItemList('茶叶', devideNum),
|
|
||||||
getSelftItemList('蜂蜜', devideNum),
|
|
||||||
getSelftItemList('面粉', devideNum),
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
return [
|
const dataSet = {
|
||||||
[
|
color: chartListColor,
|
||||||
'日期',
|
tooltip: {
|
||||||
'2020-01-16',
|
trigger: 'item',
|
||||||
'2020-01-17',
|
},
|
||||||
'2020-01-18',
|
grid: {
|
||||||
'2020-01-19',
|
left: '0',
|
||||||
'2020-01-20',
|
right: '0',
|
||||||
'2020-01-21',
|
top: '5px',
|
||||||
'2020-01-22',
|
bottom: '36px',
|
||||||
'2020-01-23',
|
containLabel: true,
|
||||||
'2020-01-24',
|
},
|
||||||
'2020-01-25',
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '0',
|
||||||
|
orient: 'horizontal', // legend 横向布局。
|
||||||
|
data: ['付款金额', '收款金额'],
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: dateValueList,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '付款金额',
|
||||||
|
data: [
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
],
|
],
|
||||||
['杯子', 5, 15, 15, 25, 24, 13, 32, 37, 43, 35],
|
type: 'line',
|
||||||
['茶叶', 1, 6, 13, 38, 39, 44, 48, 75, 62, 52],
|
smooth: true,
|
||||||
['蜂蜜', 16, 22, 27, 22, 32, 35, 23, 32, 33, 25],
|
},
|
||||||
['面粉', 12, 12, 25, 29, 21, 30, 37, 47, 40, 47],
|
{
|
||||||
];
|
name: '收款金额',
|
||||||
}
|
data: [
|
||||||
/** 图表颜色 */
|
getRandomArray(),
|
||||||
export const CHART_LIST_COLOR: Array<string> = ['#0052D9', '#00A870', '#7D46BD', '#0594FA', '#ED7B2F'];
|
getRandomArray(),
|
||||||
|
getRandomArray(),
|
||||||
/**
|
getRandomArray(),
|
||||||
* 获取表头数据
|
getRandomArray(),
|
||||||
*
|
getRandomArray(),
|
||||||
* @export
|
getRandomArray(),
|
||||||
* @param {string[]} dateTime
|
],
|
||||||
* @param {number} divideNum
|
type: 'line',
|
||||||
* @returns {string[]}
|
smooth: true,
|
||||||
*/
|
},
|
||||||
export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
|
],
|
||||||
const timeArray: string[] = ['日期'];
|
};
|
||||||
if (dateTime.length > 0) {
|
// console.log('getLineChartDataSet..', dataSet);
|
||||||
for (let i = 0; i < divideNum; i++) {
|
return dataSet;
|
||||||
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
|
||||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
|
||||||
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return timeArray;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -130,7 +442,7 @@ export function getDateArray(dateTime: string[] = [], divideNum = 10): string[]
|
||||||
export function getSelftItemList(productName: string, devideNum: number): string[] {
|
export function getSelftItemList(productName: string, devideNum: number): string[] {
|
||||||
const productArray: string[] = [productName];
|
const productArray: string[] = [productName];
|
||||||
for (let i = 0; i < devideNum; i++) {
|
for (let i = 0; i < devideNum; i++) {
|
||||||
productArray.push(getRandomNum(100 * i).toString());
|
productArray.push(getRandomArray(100 * i).toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
return productArray;
|
return productArray;
|
||||||
|
|
@ -142,19 +454,58 @@ export function getSelftItemList(productName: string, devideNum: number): string
|
||||||
* @export
|
* @export
|
||||||
* @returns {any[]}
|
* @returns {any[]}
|
||||||
*/
|
*/
|
||||||
export function getScattlerDataSet(): any[] {
|
export function getScattlerDataSet(): any {
|
||||||
const scatterData = [...Array(40)].map(() => [
|
return {
|
||||||
getRandomNum(Math.random() * 100),
|
color: chartListColor,
|
||||||
getRandomNum(Math.random() * 200),
|
xAxis: {},
|
||||||
getRandomNum(Math.random() * 30),
|
yAxis: {},
|
||||||
getRandomNum(Math.random() * 400),
|
tooltip: {
|
||||||
]);
|
trigger: 'item',
|
||||||
|
},
|
||||||
return [
|
grid: {
|
||||||
['咖啡机质量', '咖啡机效果', '按摩仪质量', '按摩仪效果'],
|
top: '5%',
|
||||||
[getRandomNum(100), getRandomNum(200), getRandomNum(100), getRandomNum(500)],
|
left: '18px',
|
||||||
...scatterData,
|
right: '5px',
|
||||||
];
|
bottom: '60px',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '0',
|
||||||
|
orient: 'horizontal', // legend 横向布局。
|
||||||
|
data: ['满意度'],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '满意度',
|
||||||
|
symbolSize: 10,
|
||||||
|
data: [
|
||||||
|
[getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 8.04)],
|
||||||
|
[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)],
|
||||||
|
[getRandomArray(Math.random() * 11.0), getRandomArray(Math.random() * 8.33)],
|
||||||
|
[getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 7.66)],
|
||||||
|
[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',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -164,33 +515,66 @@ export function getScattlerDataSet(): any[] {
|
||||||
* @returns {any[]}
|
* @returns {any[]}
|
||||||
*/
|
*/
|
||||||
export function getAreaChartDataSet(text = ''): any {
|
export function getAreaChartDataSet(text = ''): any {
|
||||||
|
console.log(text);
|
||||||
|
|
||||||
|
const xAxisData = [];
|
||||||
|
const data1 = [];
|
||||||
|
const data2 = [];
|
||||||
|
for (let i = 0; i < 50; i++) {
|
||||||
|
xAxisData.push(`${i}`);
|
||||||
|
data1.push((getRandomArray() * Math.sin(i / 5) * (i / 5 - 5) + i / 6) * 2);
|
||||||
|
data2.push((getRandomArray() * Math.cos(i / 5) * (i / 5 - 5) + i / 6) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: {
|
color: chartListColor,
|
||||||
text,
|
// title: {
|
||||||
|
// text: '柱状图动画延迟',
|
||||||
|
// },
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '5%',
|
||||||
|
orient: 'horizontal',
|
||||||
|
data: ['测试', '上线'],
|
||||||
},
|
},
|
||||||
dataset: [
|
tooltip: {
|
||||||
['时间', '00:00', '02:00', '04:00', '06:00', '08:00'],
|
trigger: 'item',
|
||||||
[
|
},
|
||||||
'测试',
|
xAxis: {
|
||||||
getRandomNum(Math.random() * 100),
|
data: xAxisData,
|
||||||
getRandomNum(Math.random() * 200),
|
splitLine: {
|
||||||
getRandomNum(Math.random() * 300),
|
show: false,
|
||||||
getRandomNum(Math.random() * 400),
|
},
|
||||||
getRandomNum(Math.random() * 500),
|
},
|
||||||
],
|
yAxis: {},
|
||||||
[
|
series: [
|
||||||
'上线',
|
{
|
||||||
getRandomNum(Math.random() * 100),
|
name: '测试',
|
||||||
getRandomNum(Math.random() * 200),
|
type: 'bar',
|
||||||
getRandomNum(Math.random() * 300),
|
data: data1,
|
||||||
getRandomNum(Math.random() * 400),
|
emphasis: {
|
||||||
getRandomNum(Math.random() * 500),
|
focus: 'series',
|
||||||
],
|
},
|
||||||
],
|
animationDelay(idx) {
|
||||||
area: {
|
return idx * 10;
|
||||||
smooth: true,
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '上线',
|
||||||
|
type: 'bar',
|
||||||
|
data: data2,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
animationDelay(idx) {
|
||||||
|
return idx * 10 + 100;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
animationEasing: 'elasticOut',
|
||||||
|
animationDelayUpdate(idx) {
|
||||||
|
return idx * 5;
|
||||||
},
|
},
|
||||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -204,43 +588,197 @@ export function getAreaChartDataSet(text = ''): any {
|
||||||
export function getColumnChartDataSet(isMonth = false): any {
|
export function getColumnChartDataSet(isMonth = false): any {
|
||||||
if (isMonth) {
|
if (isMonth) {
|
||||||
return {
|
return {
|
||||||
title: {
|
color: chartListColor,
|
||||||
text: '',
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
orient: 'horizontal', // legend 横向布局。
|
||||||
|
data: ['直接访问'],
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['1', '4', '8', '12', '16', '20', '24'],
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
dataset: [
|
|
||||||
['日期', '1', '4', '8', '12', '16', '20', '24'],
|
|
||||||
[
|
|
||||||
'告警',
|
|
||||||
getRandomNum(Math.random() * 800),
|
|
||||||
getRandomNum(Math.random() * 700),
|
|
||||||
getRandomNum(Math.random() * 600),
|
|
||||||
getRandomNum(Math.random() * 500),
|
|
||||||
getRandomNum(Math.random() * 400),
|
|
||||||
getRandomNum(Math.random() * 300),
|
|
||||||
getRandomNum(Math.random() * 100),
|
|
||||||
],
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '直接访问',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: [
|
||||||
|
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),
|
||||||
|
],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: {
|
color: chartListColor,
|
||||||
text: '',
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '0%',
|
||||||
|
orient: 'horizontal', // legend 横向布局。
|
||||||
|
data: ['直接访问'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '13%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
dataset: [
|
|
||||||
['时间', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
||||||
[
|
|
||||||
'告警',
|
|
||||||
getRandomNum(Math.random() * 200),
|
|
||||||
getRandomNum(Math.random() * 300),
|
|
||||||
getRandomNum(Math.random() * 600),
|
|
||||||
getRandomNum(Math.random() * 500),
|
|
||||||
getRandomNum(Math.random() * 100),
|
|
||||||
getRandomNum(Math.random() * 300),
|
|
||||||
getRandomNum(Math.random() * 100),
|
|
||||||
],
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '直接访问',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20%',
|
||||||
|
data: [
|
||||||
|
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),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 柱状图数据结构
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @param {boolean} [isMonth=false]
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
export function get2ColBarChartDataSet(): any {
|
||||||
|
return {
|
||||||
|
color: chartListColor,
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
// 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '0',
|
||||||
|
left: '0',
|
||||||
|
right: '0',
|
||||||
|
// bottom: '10%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
data: ['去年', '今年'],
|
||||||
|
bottom: '0',
|
||||||
|
itemGap: 60,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '去年',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20%',
|
||||||
|
data: [
|
||||||
|
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: {
|
||||||
|
color: '#BCC4D0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '今年',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20%',
|
||||||
|
data: [
|
||||||
|
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: {
|
||||||
|
color: (params) => {
|
||||||
|
if (params.value >= 200) {
|
||||||
|
return '#E34D59';
|
||||||
|
}
|
||||||
|
return '#0052D9';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -253,16 +791,94 @@ export function getColumnChartDataSet(isMonth = false): any {
|
||||||
*/
|
*/
|
||||||
export function getPieChartDataSet(radius = 42): any {
|
export function getPieChartDataSet(radius = 42): any {
|
||||||
return {
|
return {
|
||||||
title: {
|
color: chartListColor,
|
||||||
text: '',
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
dataset: [
|
grid: {
|
||||||
['状态', '审核中', '待履行', '履行中', '已完成'],
|
top: '0',
|
||||||
['数量', 67, 45, radius, 36],
|
right: '0',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '0',
|
||||||
|
orient: 'horizontal', // legend 横向布局。
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '销售渠道',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['45%', '60%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: '12',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '线上' },
|
||||||
|
{ value: radius * 7, name: '门店' },
|
||||||
],
|
],
|
||||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
|
||||||
pie: {
|
|
||||||
radius: ['45%', '60%'], // 设置内圆和外圆半径
|
|
||||||
},
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 依据主题类型获取颜色
|
||||||
|
*
|
||||||
|
* @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
|
||||||
|
* @param {Array<any>} chartsList
|
||||||
|
* @param {string} theme
|
||||||
|
*/
|
||||||
|
export function changeChartsTheme(chartsList: Array<any>, theme: string): void {
|
||||||
|
if (chartsList && chartsList.length) {
|
||||||
|
const chartChangeColor: Array<any> = getColorFromTheme(theme) || chartListColor;
|
||||||
|
chartListColor = chartChangeColor;
|
||||||
|
|
||||||
|
for (let index = 0; index < chartsList.length; index++) {
|
||||||
|
const elementChart: any = chartsList[index];
|
||||||
|
|
||||||
|
if (elementChart) {
|
||||||
|
const optionVal: any = elementChart.getOption();
|
||||||
|
|
||||||
|
// 更改主题颜色
|
||||||
|
optionVal.color = chartChangeColor;
|
||||||
|
|
||||||
|
elementChart.setOption(optionVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,139 +1,69 @@
|
||||||
@import '@/style/index';
|
@import '@/style/index';
|
||||||
|
|
||||||
.t-tabs__content {
|
.t-tabs__content {
|
||||||
padding-top: @spacer-3;
|
padding-top: @spacer-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-card-item + .list-card-item {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard-panel-detail {
|
.dashboard-panel-detail {
|
||||||
padding: 0;
|
margin-top: -16px;
|
||||||
border-radius: @border-radius;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 标题内容
|
.card-date-picker {
|
||||||
.dashboard-chart-title {
|
width: 240px;
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(0,0,0,0.90);
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-chart-title-date {
|
.card-date-button {
|
||||||
display: flex;
|
margin-left: 8px;
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
padding: 5px 8px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
.dashboard-chart-title-to {
|
|
||||||
color: rgba(0,0,0,0.30);
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-icon-creditcard {
|
|
||||||
margin-left: 20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-chart-title-search {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid #DDDDDD;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
padding: 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
input {
|
|
||||||
border: solid 0px #ffffff !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: normal !important;
|
|
||||||
padding: 5px 15px !important;
|
|
||||||
|
|
||||||
.t-radio-button__label {
|
|
||||||
font-size: 10px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.dashboard-detail-top-container {
|
|
||||||
padding: 20px 24px;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
|
|
||||||
.dashboard-detail-box {
|
|
||||||
.dashboard-detail-container-item:not(:last-child) {
|
|
||||||
border-right: solid 1px #EBEBEB;
|
|
||||||
margin-right: 22.5px;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: @screen-md-max) {
|
|
||||||
.dashboard-detail-container-item-perfix {
|
|
||||||
border-right: solid 1px #EBEBEB;
|
|
||||||
margin-right: 22.5px;
|
|
||||||
}
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: @screen-md-max - 1px) and (min-width: 0) {
|
|
||||||
display: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dashboard-detail-container {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
padding-top: 20px;
|
|
||||||
|
|
||||||
.dashboard-detail-container-item {
|
.dashboard-detail-container-item {
|
||||||
min-width: 108px;
|
height: 168px;
|
||||||
width: 100%;
|
border: solid 1px #ebebeb;
|
||||||
height: 106px;
|
padding: 24px 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
|
||||||
span {
|
&:hover {
|
||||||
font-size: 14px;
|
background: @gray-color-1;
|
||||||
color: rgba(0,0,0,0.60);
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
color: rgba(0,0,0,0.90);
|
color: rgba(0,0,0,.90);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0,0,0,0.30);
|
color: rgba(0,0,0,.30);
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-detail-container-item-text {
|
.dashboard-detail-container-item-text {
|
||||||
// color: #E34D59;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-items: center;
|
justify-content: space-between;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
color: rgba(0,0,0,0.40);
|
color: rgba(0,0,0,.40);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 20px;
|
line-height: 22px;
|
||||||
}
|
|
||||||
|
> span {
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.dashboard-detail-bottom-container {
|
.dashboard-detail-bottom-container {
|
||||||
padding: 20px 24px;
|
padding: 20px 24px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -141,7 +71,8 @@
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
|
|
||||||
.dashboard-chart-title-container {
|
|
||||||
width: 240px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.trend-container {
|
||||||
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
@import '@/style/index';
|
@import '@/style/index';
|
||||||
|
|
||||||
.login-wrapper {
|
.login-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -7,6 +8,7 @@
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 28%;
|
top: 28%;
|
||||||
|
|
@ -14,21 +16,28 @@
|
||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-container {
|
.title-container {
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
width: 290px;
|
width: 290px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-title {
|
.side-title {
|
||||||
margin-top: 24.9px;
|
margin-top: 24.9px;
|
||||||
.tip1, .tip2 {
|
|
||||||
|
.tip1,
|
||||||
|
.tip2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip1 {
|
.tip1 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0,0,0,0.60);
|
color: rgba(0,0,0,.60);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip2 {
|
.tip2 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: @brand-color-8;
|
color: @brand-color-8;
|
||||||
|
|
@ -38,37 +47,48 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step1 {
|
.login-step1 {
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
margin-top: 72px;
|
margin-top: 72px;
|
||||||
|
|
||||||
.t-input {
|
.t-input {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-popup-reference {
|
.t-popup-reference {
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.check-container {
|
.check-container {
|
||||||
|
|
||||||
.t-checkbox__label {
|
.t-checkbox__label {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: @brand-color-8;
|
color: @brand-color-8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step3 {
|
.login-step3 {
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
margin-top: 34px;
|
margin-top: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
|
|
||||||
.tip-container {
|
.tip-container {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
.tip1 {
|
.tip1 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0,0,0,0.60);
|
color: rgba(0,0,0,.60);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip2 {
|
.tip2 {
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -80,12 +100,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.check-container {
|
.check-container {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(0,0,0,0.60);
|
color: rgba(0,0,0,.60);
|
||||||
|
|
||||||
.tip {
|
.tip {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
@ -96,33 +118,43 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step1 {
|
.login-step1 {
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
margin-top: 72px;
|
margin-top: 72px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step3 {
|
.login-step3 {
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container .tip-container {
|
.input-container .tip-container {
|
||||||
width: 192px;
|
width: 192px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step2 {
|
.login-step2 {
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
margin-top: 108.9px;
|
margin-top: 108.9px;
|
||||||
|
|
||||||
.tip1 {
|
.tip1 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
margin-top: 66px;
|
margin-top: 66px;
|
||||||
|
|
||||||
.tip {
|
.tip {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: @brand-color-8;
|
color: @brand-color-8;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
color: @gray-color-3;
|
color: @gray-color-3;
|
||||||
|
|
@ -130,12 +162,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rex-check {
|
.rex-check {
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: @text-color-placeholder;
|
color: @text-color-placeholder;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.format-correct {
|
.format-correct {
|
||||||
color: @text-color-primary;
|
color: @text-color-primary;
|
||||||
|
|
||||||
|
|
@ -145,21 +179,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step4 {
|
.login-step4 {
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
margin-top: 64px;
|
margin-top: 64px;
|
||||||
|
|
||||||
.t-input {
|
.t-input {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-popup-reference {
|
.t-popup-reference {
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.verification-code {
|
.verification-code {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
|
||||||
.t-input {
|
.t-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: 102px;
|
width: 102px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -167,10 +205,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
margin-top: 66px;
|
margin-top: 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.check-container {
|
.check-container {
|
||||||
|
|
||||||
.t-checkbox__label {
|
.t-checkbox__label {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
|
|
||||||
|
|
@ -182,23 +223,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step5 {
|
.login-step5 {
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
margin-top: 64px;
|
margin-top: 64px;
|
||||||
|
|
||||||
.t-input {
|
.t-input {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-popup-reference {
|
.t-popup-reference {
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-select-popup-reference {
|
.t-select-popup-reference {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
margin-top: 66px;
|
margin-top: 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.check-container {
|
.check-container {
|
||||||
|
|
||||||
.t-checkbox__label {
|
.t-checkbox__label {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
|
|
||||||
|
|
@ -210,21 +257,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-step6 {
|
.login-step6 {
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
margin-top: 64px;
|
margin-top: 64px;
|
||||||
|
|
||||||
.t-input {
|
.t-input {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-popup-reference {
|
.t-popup-reference {
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.verification-code {
|
.verification-code {
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
|
|
||||||
.t-input {
|
.t-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: 102px;
|
width: 102px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -232,10 +283,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
margin-top: 66px;
|
margin-top: 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.check-container {
|
.check-container {
|
||||||
|
|
||||||
.t-checkbox__label {
|
.t-checkbox__label {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "TencentSansW7";
|
font-family: 'TencentSansW7';
|
||||||
src: url("data:application/font-woff;charset=utf-8;base64,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") format("woff");
|
src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
@ -1,8 +1,12 @@
|
||||||
@import "./common.less";
|
@import './common.less';
|
||||||
@import "./variables.less";
|
|
||||||
@import "./rewrite.less";
|
@import './variables.less';
|
||||||
@import "./font-family.less";
|
|
||||||
@import "./sidenav.less";
|
@import './rewrite.less';
|
||||||
|
|
||||||
|
@import './font-family.less';
|
||||||
|
|
||||||
|
@import './sidenav.less';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: @text-level-2-color;
|
color: @text-level-2-color;
|
||||||
|
|
@ -13,6 +17,7 @@ body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
min-width: @screen-sm-min;
|
min-width: @screen-sm-min;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-family: @font-family;
|
font-family: @font-family;
|
||||||
}
|
}
|
||||||
|
|
@ -130,7 +135,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{prefix}-footer {
|
.@{prefix}-footer {
|
||||||
color: rgba(0, 0, 0, 0.3);
|
color: rgba(0, 0, 0, .3);
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -147,7 +152,7 @@ body {
|
||||||
.@{prefix}-flat-icon {
|
.@{prefix}-flat-icon {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: rgba(0,0,0,0.60);
|
background: rgba(0,0,0,.60);
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{prefix}-up-triangle {
|
.@{prefix}-up-triangle {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
@import './variables.less';
|
@import './variables.less';
|
||||||
|
|
||||||
@import './font-family.less';
|
@import './font-family.less';
|
||||||
|
|
||||||
.@{prefix} {
|
.@{prefix} {
|
||||||
|
|
||||||
&-sidebar-layout {
|
&-sidebar-layout {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sidebar-compact {
|
&-sidebar-compact {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
.@{prefix}-sidenav-logo-wrapper {
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sidebar-layout-side {
|
&-sidebar-layout-side {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
@ -47,15 +47,19 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-logo-t-logo {
|
&-logo-t-logo {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-logo-tdesign-logo {
|
&-logo-tdesign-logo {
|
||||||
width: 112px;
|
width: 112px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-logo-normal {
|
&-logo-normal {
|
||||||
font-family: TencentSansKoreanW7;
|
font-family: TencentSansKoreanW7;
|
||||||
color: @primary-color;
|
color: @brand-color;
|
||||||
font-size: @font-size-l;
|
font-size: @font-size-l;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
}
|
}
|
||||||
|
|
@ -75,8 +79,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold {
|
.t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold {
|
||||||
color: rgba(255, 255, 255, 0.55)
|
color: rgba(255, 255, 255, .55)
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
.logo-container {
|
||||||
|
|
@ -85,12 +90,3 @@
|
||||||
height: 64px;
|
height: 64px;
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.optional-icon {
|
|
||||||
color: #000000;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: @primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
10
stylelint.config.js
Normal file
10
stylelint.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
module.exports = {
|
||||||
|
defaultSeverity: 'error',
|
||||||
|
extends: ['stylelint-config-airbnb'],
|
||||||
|
plugins: ['stylelint-scss'],
|
||||||
|
rules: {
|
||||||
|
'max-nesting-depth': 10,
|
||||||
|
'string-quotes': 'single',
|
||||||
|
'declaration-property-value-disallowed-list': { '/^border/': ['none'] },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -1,12 +1,18 @@
|
||||||
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 createSvgPlugin from 'vite-plugin-vue-svg';
|
||||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||||
|
|
||||||
import vue from '@vitejs/plugin-vue';
|
import HttpProxyAgent from 'http-proxy-agent';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
// import proxy from './src/config/proxy';
|
import proxy from './src/config/proxy';
|
||||||
// const HttpProxyAgent = require('http-proxy-agent');
|
import { getColorList, getGreyColor, getBrandColor } from './src/config/color';
|
||||||
const path = require('path');
|
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({
|
||||||
|
|
@ -16,10 +22,31 @@ export default defineConfig({
|
||||||
'@': path.resolve(__dirname, './src'),
|
'@': path.resolve(__dirname, './src'),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
less: {
|
||||||
|
modifyVars: {
|
||||||
|
...getBrandColor(brandTheme),
|
||||||
|
...getGreyColor(backgroundTheme),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
createVuePlugin(),
|
||||||
vueJsx(),
|
vueJsx(),
|
||||||
|
viteMockServe({
|
||||||
|
mockPath: 'mock',
|
||||||
|
localEnabled: true,
|
||||||
|
}),
|
||||||
|
viteThemePlugin({
|
||||||
|
colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
|
||||||
|
}),
|
||||||
|
createSvgPlugin(),
|
||||||
],
|
],
|
||||||
|
|
||||||
server: {
|
server: {
|
||||||
port: 3002,
|
port: 3002,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user