向文可
2 years ago
commit
383eaa7e85
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 322 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 300 B |
@ -1,419 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="flex row row-1">
|
||||
<el-card v-for="(item, index) in opts.summary" :key="index">
|
||||
<div class="flex">
|
||||
<div class="text">
|
||||
<p class="label">{{ item.label }}</p>
|
||||
<p class="value">{{ handleValue(item) }}</p>
|
||||
</div>
|
||||
<el-icon :name="item.icon" :size="54" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="row row-2" header="待处理事务">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.order" :key="index" @click="handleRoute(item.route)">
|
||||
<span class="label">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<span class="value">
|
||||
(
|
||||
<span class="red">
|
||||
{{ item.value }}
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
<el-card class="row row-3" header="运营快捷入口">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.teleport" :key="index" @click="handleRoute(item.route)">
|
||||
<p class="value">
|
||||
<el-icon :name="item.value" :size="54" />
|
||||
</p>
|
||||
<p class="label">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
<div class="flex row row-4">
|
||||
<el-card header="商品总览">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.product" :key="index">
|
||||
<p class="value red">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
<p class="label">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
<el-card header="用户总览">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.customer" :key="index">
|
||||
<p class="value red">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
<p class="label">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="row row-5" header="访客统计">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="text">
|
||||
<p class="label">本周访客数量</p>
|
||||
<p class="value">1000</p>
|
||||
<p class="rate">
|
||||
<span class="down">10%</span>
|
||||
<span class="desc">同比上周</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="label">本月访客数量</p>
|
||||
<p class="value">10000</p>
|
||||
<p class="rate">
|
||||
<span class="up">10%</span>
|
||||
<span class="desc">同比上月</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="header flex">
|
||||
<p class="title">近一周访客统计</p>
|
||||
<date-range v-model="condition1" />
|
||||
</div>
|
||||
<div class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="row row-6" header="订单统计">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="text">
|
||||
<p class="label">本周订单数量</p>
|
||||
<p class="value">1000</p>
|
||||
<p class="rate">
|
||||
<span class="down">10%</span>
|
||||
<span class="desc">同比上周</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="label">本月订单总数</p>
|
||||
<p class="value">10000</p>
|
||||
<p class="rate">
|
||||
<span class="up">10%</span>
|
||||
<span class="desc">同比上月</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="header flex">
|
||||
<p class="title">近一周订单统计</p>
|
||||
<date-range v-model="condition2" />
|
||||
</div>
|
||||
<div class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="row row-7" header="销售统计">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="text">
|
||||
<p class="label">本周销售总额</p>
|
||||
<p class="value">1000</p>
|
||||
<p class="rate">
|
||||
<span class="down">10%</span>
|
||||
<span class="desc">同比上周</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="label">本月销售总额</p>
|
||||
<p class="value">10000</p>
|
||||
<p class="rate">
|
||||
<span class="up">10%</span>
|
||||
<span class="desc">同比上月</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="header flex">
|
||||
<p class="title">近一周销售统计</p>
|
||||
<date-range v-model="condition3" />
|
||||
</div>
|
||||
<div class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import DateRange from './dateRange.vue';
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const opts = computed(() => store.state.home.opts);
|
||||
const condition1 = ref([]);
|
||||
watch(condition1, (value) => {
|
||||
store.dispatch('home/loadChartData1', {
|
||||
beginDate: value[0].split(' ')[0],
|
||||
endDate: value[1].split(' ')[0],
|
||||
});
|
||||
});
|
||||
const condition2 = ref([]);
|
||||
watch(condition2, (value) => {
|
||||
store.dispatch('home/loadChartData2', {
|
||||
beginDate: value[0].split(' ')[0],
|
||||
endDate: value[1].split(' ')[0],
|
||||
});
|
||||
});
|
||||
const condition3 = ref([]);
|
||||
watch(condition3, (value) => {
|
||||
store.dispatch('home/loadChartData3', {
|
||||
beginDate: value[0].split(' ')[0],
|
||||
endDate: value[1].split(' ')[0],
|
||||
});
|
||||
});
|
||||
const handleValue = (item) => {
|
||||
let res = new Number(item.value).toLocaleString();
|
||||
if (item.type === 'money') {
|
||||
res = '￥' + res;
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
const handleRoute = (route) => router.push(route);
|
||||
const handleChart = (selector, color, name, data) => {
|
||||
const chart = echarts.init(document.querySelector(selector));
|
||||
const option = {
|
||||
color: color,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.map((item) => item.label),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name,
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: data.map((item) => item.value),
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
};
|
||||
onActivated(async () => {
|
||||
await store.dispatch('home/load');
|
||||
handleChart('.row-5 .chart', '#80FFA5', '访客数量', unref(opts).chart[0].data);
|
||||
handleChart('.row-6 .chart', '#00DDFF', '订单数量', unref(opts).chart[1].data);
|
||||
handleChart('.row-7 .chart', '#37A2FF', '销售额', unref(opts).chart[2].data);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@big-font: 30px;
|
||||
.container {
|
||||
height: auto !important;
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.red {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
.el-card {
|
||||
flex: 1;
|
||||
:deep(.el-card__header) {
|
||||
padding: @layout-space;
|
||||
font-weight: bolder;
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: @layout-space;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
& + .row {
|
||||
margin-top: @layout-space;
|
||||
}
|
||||
.el-card {
|
||||
& + .el-card {
|
||||
margin-left: @layout-space;
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
.flex {
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.value {
|
||||
font-size: calc(@big-font * 0.8);
|
||||
}
|
||||
.x-icon {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: 45%;
|
||||
padding: @layout-space 3%;
|
||||
margin: 0 2%;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
ul {
|
||||
display: flex;
|
||||
li {
|
||||
flex: 1;
|
||||
padding: @layout-space 3%;
|
||||
margin: 0 2%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.red {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-4 {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li {
|
||||
flex: 1;
|
||||
padding: @layout-space 3%;
|
||||
margin: 0 2%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
font-size: @big-font;
|
||||
}
|
||||
}
|
||||
&-5,
|
||||
&-6,
|
||||
&-7 {
|
||||
.left {
|
||||
border-right: 1px solid #eee;
|
||||
margin-right: @layout-space-super;
|
||||
padding-right: @layout-space-super;
|
||||
.text {
|
||||
& + .text {
|
||||
margin-top: @layout-space-super;
|
||||
}
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: @color-white3;
|
||||
}
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: @color-white2;
|
||||
margin-left: @layout-space;
|
||||
}
|
||||
.value {
|
||||
font-size: @big-font;
|
||||
}
|
||||
.down {
|
||||
color: var(--el-color-success);
|
||||
&::before {
|
||||
content: '▼';
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
.up {
|
||||
color: var(--el-color-danger);
|
||||
&::before {
|
||||
content: '▲';
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
.header {
|
||||
margin-bottom: @layout-space;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,514 @@
|
||||
<template>
|
||||
<div class="container">马士兵严选管理后台</div>
|
||||
<div class="container">
|
||||
<div class="flex row row-1">
|
||||
<el-card v-for="(item, index) in opts.summary" :key="index">
|
||||
<div class="flex">
|
||||
<div class="text">
|
||||
<p class="label">{{ item.label }}</p>
|
||||
<p class="value">{{ handleValue(item) }}</p>
|
||||
</div>
|
||||
<img :src="item.icon" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="row row-2" header="待处理事务">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.order" :key="index" @click="handleRoute(item.route)">
|
||||
<span class="label">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<span class="value">
|
||||
(
|
||||
{{ item.value }}
|
||||
)
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
<el-card class="row row-3" header="运营快捷入口">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.teleport" :key="index" @click="handleRoute(item.route)">
|
||||
<p class="value">
|
||||
<img :src="item.value" />
|
||||
</p>
|
||||
<p class="label">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
<div class="flex row row-4">
|
||||
<el-card header="商品总览">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.product" :key="index">
|
||||
<p class="value red">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
<p class="label">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
<el-card header="用户总览">
|
||||
<ul>
|
||||
<li v-for="(item, index) in opts.customer" :key="index">
|
||||
<p class="value red">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
<p class="label">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="row row-5" header="访客统计">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="text">
|
||||
<p class="label">本周访客数量</p>
|
||||
<p class="value">{{ opts.chart[0].info.weekVisitor }}</p>
|
||||
<p class="rate" :class="opts.chart[0].info.weekUpsOrDownsScale < 0 ? 'down' : 'up'">
|
||||
<img class="down" src="@/assets/home/down.png" />
|
||||
<img class="up" src="@/assets/home/up.png" />
|
||||
<span class="num">{{ handleRate(opts.chart[0].info.weekUpsOrDownsScale) }}</span>
|
||||
<span class="desc">同比上周</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="label">本月访客数量</p>
|
||||
<p class="value">{{ opts.chart[0].info.monthVisitor }}</p>
|
||||
<p class="rate" :class="opts.chart[0].info.monthUpsOrDownsScale < 0 ? 'down' : 'up'">
|
||||
<img class="down" src="@/assets/home/down.png" />
|
||||
<img class="up" src="@/assets/home/up.png" />
|
||||
<span class="num">{{ handleRate(opts.chart[0].info.monthUpsOrDownsScale) }}</span>
|
||||
<span class="desc">同比上月</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="header flex">
|
||||
<date-range v-model="condition1" v-model:today="today1" hidden-today />
|
||||
</div>
|
||||
<div class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="row row-6" header="订单统计">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="text">
|
||||
<p class="label">本周订单数量</p>
|
||||
<p class="value">{{ opts.chart[1].info.weekOrder }}</p>
|
||||
<p class="rate" :class="opts.chart[1].info.weekUpsOrDownsScale < 0 ? 'down' : 'up'">
|
||||
<img class="down" src="@/assets/home/down.png" />
|
||||
<img class="up" src="@/assets/home/up.png" />
|
||||
<span class="num">{{ handleRate(opts.chart[1].info.weekUpsOrDownsScale) }}</span>
|
||||
<span class="desc">同比上周</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="label">本月订单总数</p>
|
||||
<p class="value">{{ opts.chart[1].info.monthOrder }}</p>
|
||||
<p class="rate" :class="opts.chart[1].info.monthUpsOrDownsScale < 0 ? 'down' : 'up'">
|
||||
<img class="down" src="@/assets/home/down.png" />
|
||||
<img class="up" src="@/assets/home/up.png" />
|
||||
<span class="num">{{ handleRate(opts.chart[1].info.monthUpsOrDownsScale) }}</span>
|
||||
<span class="desc">同比上月</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="header flex">
|
||||
<date-range v-model="condition2" v-model:today="today2" />
|
||||
</div>
|
||||
<div class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="row row-7" header="销售统计">
|
||||
<div class="flex">
|
||||
<div class="left">
|
||||
<div class="text">
|
||||
<p class="label">本周销售总额</p>
|
||||
<p class="value">{{ opts.chart[2].info.weekSales }}</p>
|
||||
<p class="rate" :class="opts.chart[2].info.weekUpsOrDownsScale < 0 ? 'down' : 'up'">
|
||||
<img class="down" src="@/assets/home/down.png" />
|
||||
<img class="up" src="@/assets/home/up.png" />
|
||||
<span class="num">{{ handleRate(opts.chart[2].info.weekUpsOrDownsScale) }}</span>
|
||||
<span class="desc">同比上周</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="label">本月销售总额</p>
|
||||
<p class="value">{{ opts.chart[2].info.monthSales }}</p>
|
||||
<p class="rate" :class="opts.chart[2].info.monthUpsOrDownsScale < 0 ? 'down' : 'up'">
|
||||
<img class="down" src="@/assets/home/down.png" />
|
||||
<img class="up" src="@/assets/home/up.png" />
|
||||
<span class="num">{{ handleRate(opts.chart[2].info.monthUpsOrDownsScale) }}</span>
|
||||
<span class="desc">同比上月</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="header flex">
|
||||
<date-range v-model="condition3" v-model:today="today3" />
|
||||
</div>
|
||||
<div class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import DateRange from './dateRange.vue';
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const opts = computed(() => store.state.home.opts);
|
||||
const condition1 = ref([]);
|
||||
const today1 = ref(false);
|
||||
watch(condition1, async (value) => {
|
||||
if (unref(today1)) {
|
||||
await store.dispatch('home/loadChartData11');
|
||||
handleChart(
|
||||
'.row-5 .chart',
|
||||
'访客数量',
|
||||
unref(opts).chart[0].data,
|
||||
(params) =>
|
||||
`${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
|
||||
);
|
||||
} else {
|
||||
await store.dispatch('home/loadChartData1', {
|
||||
beginDate: value[0].split(' ')[0],
|
||||
endDate: value[1].split(' ')[0],
|
||||
});
|
||||
handleChart('.row-5 .chart', '访客数量', unref(opts).chart[0].data);
|
||||
}
|
||||
});
|
||||
const condition2 = ref([]);
|
||||
const today2 = ref(false);
|
||||
watch(condition2, async (value) => {
|
||||
if (unref(today2)) {
|
||||
await store.dispatch('home/loadChartData22');
|
||||
handleChart(
|
||||
'.row-6 .chart',
|
||||
'订单数量',
|
||||
unref(opts).chart[1].data,
|
||||
(params) =>
|
||||
`${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
|
||||
);
|
||||
} else {
|
||||
await store.dispatch('home/loadChartData2', {
|
||||
beginDate: value[0].split(' ')[0],
|
||||
endDate: value[1].split(' ')[0],
|
||||
});
|
||||
handleChart('.row-6 .chart', '订单数量', unref(opts).chart[1].data);
|
||||
}
|
||||
});
|
||||
const condition3 = ref([]);
|
||||
const today3 = ref(false);
|
||||
watch(condition3, async (value) => {
|
||||
if (unref(today3)) {
|
||||
await store.dispatch('home/loadChartData33');
|
||||
handleChart(
|
||||
'.row-7 .chart',
|
||||
'销售额',
|
||||
unref(opts).chart[2].data,
|
||||
(params) =>
|
||||
`${params[0].axisValue}:00 - ${params[0].axisValue}:59<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName} <b style="margin-left:10px;">${params[0].value}</b>`
|
||||
);
|
||||
} else {
|
||||
await store.dispatch('home/loadChartData3', {
|
||||
beginDate: value[0].split(' ')[0],
|
||||
endDate: value[1].split(' ')[0],
|
||||
});
|
||||
handleChart('.row-7 .chart', '销售额', unref(opts).chart[2].data);
|
||||
}
|
||||
});
|
||||
const handleValue = (item) => {
|
||||
let res = item.value;
|
||||
if (res !== '-') {
|
||||
res = new Number(item.value).toLocaleString();
|
||||
if (item.type === 'money') {
|
||||
res = '￥' + res;
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
const handleRate = (num) => (num === '--' ? num : new Number(Math.abs(num || 0)).toFixed(2) + '%');
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
const handleRoute = (route) => router.push(route);
|
||||
const charts = ref({});
|
||||
window.addEventListener('resize', () =>
|
||||
setTimeout(() => {
|
||||
Object.entries(unref(charts)).forEach((entry) => {
|
||||
entry[1].resize();
|
||||
});
|
||||
}, 100)
|
||||
);
|
||||
const handleChart = (
|
||||
selector,
|
||||
name,
|
||||
data,
|
||||
formatter = (params) =>
|
||||
`${params[0].axisValue}<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName}<b style="margin-left:10px;">${params[0].value}</b>`
|
||||
) => {
|
||||
let chart = charts.value[selector];
|
||||
chart?.dispose();
|
||||
chart = charts.value[selector] = echarts.init(document.querySelector(selector));
|
||||
const option = {
|
||||
gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'],
|
||||
visualMap: [
|
||||
{
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
dimension: 0,
|
||||
min: 0,
|
||||
max: data.length - 1,
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter,
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '30px',
|
||||
top: '60px',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: data.map((item) => item.label),
|
||||
},
|
||||
yAxis: {
|
||||
minInterval: 1,
|
||||
},
|
||||
series: {
|
||||
type: 'line',
|
||||
name,
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(29, 231, 255, 0.3)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(29, 231, 255, 0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: data.map((item) => item.value),
|
||||
},
|
||||
};
|
||||
chart.setOption(option);
|
||||
};
|
||||
onActivated(() => {
|
||||
store.dispatch('home/load');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@big-font: 24px;
|
||||
@super-font: 32px;
|
||||
.container {
|
||||
height: auto !important;
|
||||
background: #f6f7fb;
|
||||
color: #1d2129;
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.red {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
.el-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
:deep(.el-card__header) {
|
||||
padding: 20px 30px 0;
|
||||
font-weight: bolder;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px 30px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
& + .row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.el-card {
|
||||
& + .el-card {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
.el-card {
|
||||
height: 140px;
|
||||
& + .el-card {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.label {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.value {
|
||||
font-size: @big-font;
|
||||
font-weight: bolder;
|
||||
}
|
||||
img {
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: 29%;
|
||||
height: 40px;
|
||||
padding: @layout-space 3%;
|
||||
margin: 0 2%;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:nth-of-type(4),
|
||||
&:nth-of-type(5) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
ul {
|
||||
display: flex;
|
||||
li {
|
||||
padding: @layout-space 53px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-4 {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li {
|
||||
flex: 1;
|
||||
padding: @layout-space 3%;
|
||||
margin: 0 2%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.value {
|
||||
font-size: @big-font;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-5,
|
||||
&-6,
|
||||
&-7 {
|
||||
.left {
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #eee;
|
||||
margin-right: 50px;
|
||||
padding: 0 96px;
|
||||
.text {
|
||||
& + .text {
|
||||
margin-top: 34px;
|
||||
}
|
||||
.label {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.value {
|
||||
font-size: @super-font;
|
||||
margin: 9px 0 6px;
|
||||
}
|
||||
.rate {
|
||||
font-size: 14px;
|
||||
img {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
&.down {
|
||||
.up {
|
||||
display: none;
|
||||
}
|
||||
.num {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
&.up {
|
||||
.down {
|
||||
display: none;
|
||||
}
|
||||
.num {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.header {
|
||||
margin-bottom: @layout-space;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 0;
|
||||
}
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue