msb-mca
/
shop-admin
mirror of http://internel-git.mashibing.cn/yanxuan-frontend/shop-admin.git
2.1k
3
Code Issues Projects Releases Wiki Activity

fix: 注释首页数据统计相关

Browse Source
fix-0609-xwk
ch 3 years ago
parent 52c696cbbf
commit 99b44440c3
2 changed files with 422 additions and 415 deletions
Show Stats Download Patch File Download Diff File

419
src/views/home/index copy.vue
Unescape View File

@ -0,0 +1,419 @@
<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>

418
src/views/home/index.vue
Unescape View File

@ -1,419 +1,7 @@
<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>
<div class="container">马士兵严选管理后台</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;
};
<script setup></script>
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>
<style lang="less" scoped></style>

Write Preview
Loading…
Cancel
Save