From 8160c594ad0fb7e7d04995440702908be369d0d7 Mon Sep 17 00:00:00 2001
From: pjhmizn49 <zhangjiadi2008@126.com>
Date: Fri, 13 Dec 2024 09:07:48 +0800
Subject: [PATCH] ADD file via upload

---
 .../src/views/statisticView.vue               | 277 ++++++++++++++++++
 1 file changed, 277 insertions(+)
 create mode 100644 flower_admin_front/src/views/statisticView.vue

diff --git a/flower_admin_front/src/views/statisticView.vue b/flower_admin_front/src/views/statisticView.vue
new file mode 100644
index 0000000..417b340
--- /dev/null
+++ b/flower_admin_front/src/views/statisticView.vue
@@ -0,0 +1,277 @@
+<template>
+    <el-row>
+        <el-col :span="24">
+            <div class="num">
+                <el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
+                    <i class="icon el-icon-s-goods" style="background:#2ec7c9"></i>
+                    <div class="detail">
+                        <p class="number">{{this.topData.order_pay_num}}</p>
+                        <p class="desc">今日下单数</p>
+                    </div>
+                </el-card>
+                <el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
+                    <i class="icon el-icon-success" style="background:#2ec7c9"></i>
+                    <div class="detail">
+                        <p class="number">{{this.topData.order_ok_num}}</p>
+                        <p class="desc">今日成交订单数</p>
+                    </div>
+                </el-card>
+                <el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
+                    <i class="icon el-icon-s-finance" style="background:#5ab1ef"></i>
+                    <div class="detail">
+                        <p class="number">￥{{this.topData.order_today_money}}</p>
+                        <p class="desc">今日成交金额</p>
+                    </div>
+                </el-card>
+                <el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
+                    <i class="icon el-icon-s-finance" style="background:#5ab1ef"></i>
+                    <div class="detail">
+                        <p class="number">￥{{this.topData.order_month_money}}</p>
+                        <p class="desc">本月成交金额</p>
+                    </div>
+                </el-card>
+                <el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
+                    <i class="icon el-icon-s-promotion" style="background:#ffb980"></i>
+                    <div class="detail">
+                        <p class="number">{{this.topData.order_delivery_num}}</p>
+                        <p class="desc">待发货</p>
+                    </div>
+                </el-card>
+                <el-card class="top-num" shadow="hover" :body-style="{display:'flex',padding:0}">
+                    <i class="icon el-icon-s-release" style="background:#ffb980"></i>
+                    <div class="detail">
+                        <p class="number">{{this.topData.order_refund_num}}</p>
+                        <p class="desc">待退款</p>
+                    </div>
+                </el-card>
+            </div>
+            <el-card shadow="hover" style="height: 350px">
+            <!-- 折线图 -->
+                <div ref="echarts1" style="height: 330px;width: auto"></div>
+            </el-card>
+            <div class="bottom-num">
+                <!-- 柱状图 -->
+                <el-card shadow="hover" style="height:500px;width:48%;">
+                    <div ref="echarts2" style="height: 450px; width: auto"></div>
+                </el-card>
+                <!-- 饼图 -->
+                <el-card shadow="hover" style="height:650px;width:48%">
+                    <div ref="echarts3" style="height: 650px; width: auto"></div>
+                </el-card>
+            </div>
+        </el-col>
+    </el-row>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+import * as echarts from "echarts";
+import {watch} from "vue";
+export default {
+    data(){
+        return {
+            timer:null,
+            //页面数据(上)
+            topData: [{
+                order_pay_num:1,
+                order_ok_num:1,
+                order_today_money:1.00,
+                order_month_money:1.00,
+                order_delivery_num:1,
+                order_refund_num:1
+            }],
+            //折线图
+            middleData: [{
+                '1月':1,
+                '2月':1,
+                '3月':1,
+                '4月':1,
+                '5月':1,
+            }],
+            //柱状图
+            bottomData1:[{
+                name:'',
+                value:1
+            }],
+            //饼图
+            bottomData2:[{
+                name:'',
+                value:1
+            }]
+        }
+    },
+    mounted(){
+        const _this = this
+        this.timer = setTimeout(() => {
+            //折线图
+            // 基于准备好的dom，初始化echarts实例
+            const echarts1 = echarts.init(this.$refs.echarts1)
+            // 指定图表的配置项和数据
+            const option1 = {
+                title: { text:'每月成交金额折线图' },
+                xAxis: { data: Object.keys(_this.middleData).reverse() },
+                yAxis: {},
+                tooltip: { trigger: 'item' },
+                series: [{
+                    data: Object.values(_this.middleData).reverse(),
+                    type: 'line'
+                }]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            echarts1.setOption(option1)
+
+            //柱状图
+            const echarts2 = echarts.init(this.$refs.echarts2)
+            const option2 = {
+                title: { text:'商品销售量TOP3' },
+                xAxis: {
+                    data:_this.bottomData1.map(item => item.name),
+                    // x轴文字配置
+                    axisLabel: {
+                        interval: 0,
+                        // 文字换行
+                        formatter: function (value) {
+                            let res = ""; // 拼接加\n返回的类目项
+                            let maxLength = 15; // 每项显示文字个数  数字设置几，就一行显示几个文字
+                            let valLength = value.length; // X轴上的文字个数
+                            let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
+                            // 换行的行数大于1,
+                            if (rowN > 1) {
+                                for (let i = 0; i < rowN; i++) {
+                                    let temp = ""; //每次截取的字符串
+                                    let start = i * maxLength; //开始截取的位置
+                                    let end = start + maxLength; //结束截取的位置
+                                    temp = value.substring(start, end) + "\n";
+                                    res += temp; //拼接字符串
+                                }
+                                return res;
+                            } else {
+                                return value;
+                            }
+                        },
+                    },
+                },
+                yAxis: {},
+                tooltip: { trigger: 'item' },
+                series: [{
+                    data: _this.bottomData1.map(item => item.value),
+                    type: 'bar',
+                    color:'#62acee'
+                }]
+            }
+            echarts2.setOption(option2)
+
+            //饼图
+            const echarts3 = echarts.init(this.$refs.echarts3)
+            const option3 = {
+                title: { text:'花卉种类销售量占比' },
+                legend: {
+                    top: '10%',
+                    left: 'center'
+                },
+                tooltip: { trigger: 'item' },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['30%', '60%'],
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        data: _this.bottomData2
+                    }
+                ]
+            }
+            echarts3.setOption(option3)
+
+        },500);
+    },
+    beforeDestroy() {	// 最后在beforeDestroy()生命周期内清除定时器：
+        clearTimeout(this.timer);
+        this.timer =  null;
+    },
+    created() {
+        this.fetchData();
+    },
+    methods: {
+        fetchData(){
+            //获取统计信息
+            const _this=this;
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/order/statistic',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        //查询成功
+                        _this.topData = response.data.data.data_top;
+                        _this.middleData = response.data.data.data_middle;
+                        _this.bottomData1 = response.data.data.data_bottom1;
+                        _this.bottomData2 = response.data.data.data_bottom2;
+                        // console.log(_this.bottomData2)
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+    }
+}
+</script>
+<style>
+.num{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.top-num{
+    width: 32%;
+    margin-bottom: 20px;
+}
+.icon{
+    width: 70px;
+    height: 55px;
+    padding-top: 15px;
+    font-size: 30px;
+    text-align: center;
+    line-height: 70px;
+    color:#fff;
+}
+.detail{
+    margin-left: 15px;
+    margin-top: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.number{
+    font-size: 25px;
+    margin: -5px;
+    line-height: 25px;
+}
+.desc{
+    font-size: 14px;
+    color: #999;
+    text-align: center;
+    margin-bottom: 0;
+}
+.bottom-num{
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+}
+</style>