From 99b44440c3f09f9b48e6a10d295f2b6b8812c7e3 Mon Sep 17 00:00:00 2001
From: ch <cwl_ch@163.com>
Date: Wed, 1 Jun 2022 17:37:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B3=A8=E9=87=8A=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index copy.vue | 419 ++++++++++++++++++++++++++++++++++
 src/views/home/index.vue      | 418 +--------------------------------
 2 files changed, 422 insertions(+), 415 deletions(-)
 create mode 100644 src/views/home/index copy.vue

diff --git a/src/views/home/index copy.vue b/src/views/home/index copy.vue
new file mode 100644
index 0000000..b88ea81
--- /dev/null
+++ b/src/views/home/index copy.vue	
@@ -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>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b88ea81..ed2e35a 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -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>