(修改了交易统计页面的样式和数据展示逻辑)

src/views/statistics/order_product/index.vue

@@ -23,6 +23,28 @@
                         @change="resetPage"
                     />
                 </el-form-item> -->
+                <el-form-item label="门店" prop="store_id" v-if="queryParams.is_all == 1">
+                    <!-- <el-input class="w-[280px]" v-model="queryParams.store_name" clearable placeholder="请输入门店id" /> -->
+                    <el-select
+                        v-model="queryParams.store_id"
+                        filterable
+                        remote
+                        reserve-keyword
+                        placeholder="输入门店名称搜索"
+                        remote-show-suffix
+                        :remote-method="remoteMethod"
+                        :loading="storeloading"
+                        style="width: 240px"
+                        @change="resetPage"
+                    >
+                        <el-option
+                            v-for="item in storeList"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        />
+                    </el-select>
+                </el-form-item>
                 <el-form-item label="" prop="create_time">
                     <daterange-picker
                         v-model:startTime="queryParams.start_time"
@@ -125,6 +147,7 @@ import { timeFormat } from '@/utils/util'
 import feedback from '@/utils/feedback'
 import { apiStoreCategoryLists } from '@/api/store_category'
 import { useRoute } from 'vue-router'
+import { apiSystemStoreLists } from '@/api/system_store'
 
 const route = useRoute()
 
@@ -133,9 +156,31 @@ const detailsRef = ref(null)
 const queryParams = reactive({
     start_time: '',
     end_time: '',
-    is_all: ''
+    is_all: '',
+    store_id: ''
 })
 
+const storeloading = ref(false)
+const storeList = ref([])
+const remoteMethod = (e = '') => {
+    storeloading.value = true
+    apiSystemStoreLists({
+        name: e,
+        page_size: 50
+    })
+        .then((res) => {
+            storeList.value = res.lists
+            setTimeout(() => {
+                storeloading.value = false
+            }, 300)
+        })
+        .catch((err) => {
+            setTimeout(() => {
+                storeloading.value = false
+            }, 300)
+        })
+}
+
 // 选中数据
 const selectData = ref<any[]>([])
 

src/views/statistics/transaction/index.vue

@@ -8,19 +8,33 @@
                         <span class="text-[12px]">¥</span>
                         <span class="text-2xl">{{ leftInfo.money || '0.00' }}</span>
                     </div>
-                    <v-charts style="height: 200px;" :option="leftOption" :autoresize="true"></v-charts>
+                    <v-charts
+                        style="height: 200px"
+                        :option="leftOption"
+                        :autoresize="true"
+                    ></v-charts>
                 </div>
                 <div class="w-[1px] bg-[#ccc] mr-4"></div>
                 <div class="flex-1 flex">
                     <div class="flex-1">
-                        <div class="text-1xl">{{ rightInfo1[0]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo1[0]?.now_money }}</span></div>
+                        <div class="text-1xl">
+                            {{ rightInfo1[0]?.name
+                            }}<span class="ml-2 text-[18px]">{{ rightInfo1[0]?.now_money }}</span>
+                        </div>
                         <div class="text-[12px]">
                             <span class="text-info">昨日: {{ rightInfo1[0]?.last_money }}</span>
                             <span class="text-info ml-2">日环比: </span>
                             <span class="text-success">{{ rightInfo1[0]?.rate }}%</span>
                         </div>
-                        <v-charts style="height: 160px;margin-bottom: 20px;" :option="rightOption1" :autoresize="true"></v-charts>
+                        <v-charts
-                        <div class="text-1xl">{{ rightInfo2[0]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo2[0]?.now_money }}</span></div>
+                            style="height: 160px; margin-bottom: 20px"
+                            :option="rightOption1"
+                            :autoresize="true"
+                        ></v-charts>
+                        <div class="text-1xl">
+                            {{ rightInfo2[0]?.name
+                            }}<span class="ml-2 text-[18px]">{{ rightInfo2[0]?.now_money }}</span>
+                        </div>
                         <div class="text-[12px]">
                             <span class="text-info">上月: {{ rightInfo2[0]?.last_money }}</span>
                             <span class="text-info ml-2">月环比: </span>
@@ -28,14 +42,24 @@
                         </div>
                     </div>
                     <div class="flex-1">
-                        <div class="text-1xl">{{ rightInfo1[1]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo1[1]?.now_money }}</span></div>
+                        <div class="text-1xl">
+                            {{ rightInfo1[1]?.name
+                            }}<span class="ml-2 text-[18px]">{{ rightInfo1[1]?.now_money }}</span>
+                        </div>
                         <div class="text-[12px]">
                             <span class="text-info">昨日: {{ rightInfo1[1]?.last_money }}</span>
                             <span class="text-info ml-2">日环比: </span>
                             <span class="text-success">{{ rightInfo1[1]?.rate }}%</span>
                         </div>
-                        <v-charts style="height: 160px;margin-bottom: 20px;" :option="rightOption2" :autoresize="true"></v-charts>
+                        <v-charts
-                        <div class="text-1xl">{{ rightInfo2[1]?.name }}<span class="ml-2 text-[18px]">{{ rightInfo2[1]?.now_money }}</span></div>
+                            style="height: 160px; margin-bottom: 20px"
+                            :option="rightOption2"
+                            :autoresize="true"
+                        ></v-charts>
+                        <div class="text-1xl">
+                            {{ rightInfo2[1]?.name
+                            }}<span class="ml-2 text-[18px]">{{ rightInfo2[1]?.now_money }}</span>
+                        </div>
                         <div class="text-[12px]">
                             <span class="text-info">上月: {{ rightInfo2[1]?.last_money }}</span>
                             <span class="text-info ml-2">月环比: </span>
@@ -50,23 +74,52 @@
                 <span class="text-2xl">交易概况</span>
                 <div class="flex items-center text-sm">
                     <span class="mr-4">时间筛选: </span>
-                    <el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
+                    <el-date-picker
-                        end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts"  @change="getData" />
+                        v-model="startEndTime"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        unlink-panels
+                        :shortcuts="shortcuts"
+                        @change="getData"
+                    />
                     <el-button type="primary" class="ml-4" @click="getData">查询</el-button>
                 </div>
             </div>
             <div class="flex flex-wrap">
-                <div class="w-1/5 flex mb-6" v-for="(item, index) in visitorOption.series" :key="index">
+                <div
+                    class="w-1/5 flex mb-6"
+                    v-for="(item, index) in visitorOption.series"
+                    :key="index"
+                >
                     <div class="mr-2">
-                        <div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 4] }">
+                        <div
+                            class="rounded-full p-2"
+                            :style="{ 'background-color': colorList[index % 4] }"
+                        >
                             <iconfont :iconName="iconList[index]" white className="text-6xl" />
                         </div>
                     </div>
                     <div>
-                        <div class="text-info">{{ item.name }}</div>
+                        <div class="text-info">
+                            {{ item.name }}
+                            <el-tooltip
+                                class="box-item"
+                                effect="dark"
+                                :content="item.desc"
+                                placement="top-start"
+                            >
+                                <el-icon><Warning /></el-icon>
+                            </el-tooltip>
+                        </div>
                         <div class="text-6xl">{{ item.money }}</div>
-                        <div class="text-info">环比增长: <span :class="item.rate > 0 ? 'text-success' : 'text-danger'">{{
+                        <div class="text-info">
-                            item.rate }}%</span></div>
+                            环比增长:
+                            <span :class="item.rate > 0 ? 'text-success' : 'text-danger'"
+                                >{{ item.rate }}%</span
+                            >
+                        </div>
                     </div>
                 </div>
             </div>
@@ -78,7 +131,12 @@
 </template>
 
 <script lang="ts" setup name="statistics_user">
-import { apiGetUserBasic, apiGetUserTrend, apiGetBottomTrade, apiGetTopTrade } from '@/api/workbench'
+import {
+    apiGetUserBasic,
+    apiGetUserTrend,
+    apiGetBottomTrade,
+    apiGetTopTrade
+} from '@/api/workbench'
 import moment from 'moment'
 import vCharts from 'vue-echarts'
 
@@ -90,7 +148,7 @@ const shortcuts = [
             const start = new Date()
             start.setDate(start.getDate() - 7)
             return [start, end]
-        },
+        }
     },
     {
         text: '本月',
@@ -101,7 +159,7 @@ const shortcuts = [
             end.setMonth(end.getMonth() + 1)
             end.setDate(0)
             return [start, end]
-        },
+        }
     },
     {
         text: '近一月',
@@ -110,7 +168,7 @@ const shortcuts = [
             const start = new Date()
             start.setMonth(start.getMonth() - 1)
             return [start, end]
-        },
+        }
     },
     {
         text: '近三月',
@@ -119,8 +177,8 @@ const shortcuts = [
             const start = new Date()
             start.setMonth(start.getMonth() - 3)
             return [start, end]
-        },
+        }
-    },
+    }
 ]
 
 // 表单数据
@@ -174,11 +232,11 @@ const optionModel = {
             type: 'cross'
         },
         formatter: (params) => {
-            let str = `<p><b>${params[0].name}点</b></p>`;
+            let str = `<p><b>${params[0].name}点</b></p>`
             params.forEach((item) => {
-                str += `<p><span style="display:inline-block;width:8px;height:4px;background-color:${item.color};"></span> ${item.seriesName}: <strong>${item.value}</strong></p>`;
+                str += `<p><span style="display:inline-block;width:8px;height:4px;background-color:${item.color};"></span> ${item.seriesName}: <strong>${item.value}</strong></p>`
-            });
+            })
-            return str;
+            return str
         }
     },
     grid: {
@@ -198,13 +256,13 @@ const optionModel = {
             boundaryGap: false,
             // data: ['03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '00', '01', '02'],
             axisLabel: {
-                show: false, // 不显示 x 轴标签
+                show: false // 不显示 x 轴标签
             },
             axisTick: {
-                show: false, // 不显示 x 轴刻度线
+                show: false // 不显示 x 轴刻度线
             },
             axisLine: {
-                show: false, // 不显示 x 轴线
+                show: false // 不显示 x 轴线
             },
             grid: {
                 show: false
@@ -219,18 +277,18 @@ const optionModel = {
                 show: false
             },
             axisLabel: {
-                show: false, // 不显示 x 轴标签
+                show: false // 不显示 x 轴标签
             },
             axisTick: {
-                show: false, // 不显示 x 轴刻度线
+                show: false // 不显示 x 轴刻度线
             },
             axisLine: {
-                show: false, // 不显示 x 轴线
+                show: false // 不显示 x 轴线
             },
             grid: {
                 show: false
             }
-        },
+        }
     ],
     series: [
         {
@@ -240,7 +298,7 @@ const optionModel = {
             smooth: true,
             symbol: 'none', // 不显示数据点
             itemStyle: {
-                color: '#ccc',
+                color: '#ccc'
             },
             areaStyle: {
                 color: {
@@ -250,14 +308,19 @@ const optionModel = {
                     y: 0,
                     x2: 0,
                     y2: 1,
-                    colorStops: [{
+                    colorStops: [
-                        offset: 0, color: '#ccc', // 0% 处的颜色
+                        {
-                    }, {
+                            offset: 0,
-                        offset: 0.6, color: '#fff', // 100% 处的颜色
+                            color: '#ccc' // 0% 处的颜色
-                    }],
-                    global: false, // 缺省为 false
-                },
                         },
+                        {
+                            offset: 0.6,
+                            color: '#fff' // 100% 处的颜色
+                        }
+                    ],
+                    global: false // 缺省为 false
+                }
+            }
         },
         {
             name: '今天',
@@ -273,16 +336,21 @@ const optionModel = {
                     y: 0,
                     x2: 0,
                     y2: 1,
-                    colorStops: [{
+                    colorStops: [
-                        offset: 0, color: '#5B8FF9', // 0% 处的颜色
+                        {
-                    }, {
+                            offset: 0,
-                        offset: 0.6, color: '#fff', // 100% 处的颜色
+                            color: '#5B8FF9' // 0% 处的颜色
-                    }],
-                    global: false, // 缺省为 false
-                },
-            },
                         },
+                        {
+                            offset: 0.6,
+                            color: '#fff' // 100% 处的颜色
+                        }
                     ],
+                    global: false // 缺省为 false
+                }
+            }
+        }
+    ]
 }
 const leftInfo = ref({
     money: 0,
@@ -290,59 +358,87 @@ const leftInfo = ref({
 })
 const leftOption: any = reactive(JSON.parse(JSON.stringify(optionModel)))
 
-const rightInfo1 = ref([]);
+const rightInfo1 = ref([])
 const rightOption1: any = reactive(JSON.parse(JSON.stringify(optionModel)))
-const rightInfo2 = ref([]);
+const rightInfo2 = ref([])
 const rightOption2: any = reactive(JSON.parse(JSON.stringify(optionModel)))
 
-
 // 颜色
-const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
+const colorList = [
+    '#5DB1FF',
+    '#4CD384',
+    '#FFC46A',
+    '#CAA5F1',
+    '#FFC46A',
+    '#4CD384',
+    '#5DB1FF',
+    '#CAA5F1'
+]
 // 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
-const iconList = ref(['RectangleCopy58', 'RectangleCopy48', 'RectangleCopy65', 'RectangleCopy62', 'RectangleCopy56', 'RectangleCopy55', 'RectangleCopy57', 'RectangleCopy65', 'RectangleCopy61', 'RectangleCopy52', 'RectangleCopy14', 'RectangleCopy32']);
+const iconList = ref([
+    'RectangleCopy58',
+    'RectangleCopy48',
+    'RectangleCopy65',
+    'RectangleCopy62',
+    'RectangleCopy56',
+    'RectangleCopy55',
+    'RectangleCopy57',
+    'RectangleCopy65',
+    'RectangleCopy61',
+    'RectangleCopy52',
+    'RectangleCopy14',
+    'RectangleCopy32'
+])
 
-const startEndTime = ref([new Date(), new Date()]);
+const startEndTime = ref([new Date(), new Date()])
 // 获取数据
 const getData = () => {
-    let date = '';
+    let date = ''
-    if (startEndTime.value[0] && startEndTime.value[1]) date = moment(startEndTime.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime.value[1]).format('YYYY/MM/DD');
+    if (startEndTime.value[0] && startEndTime.value[1])
+        date =
+            moment(startEndTime.value[0]).format('YYYY/MM/DD') +
+            '-' +
+            moment(startEndTime.value[1]).format('YYYY/MM/DD')
 
-    apiGetTopTrade({}).then(res => {
+    apiGetTopTrade({}).then((res) => {
         leftInfo.value = {
             money: res.left.series[0].money,
-            name: res.left.name,
+            name: res.left.name
         }
-        leftOption.series[0].data = res.left.series[1].value;
+        leftOption.series[0].data = res.left.series[1].value
-        leftOption.series[1].data = res.left.series[0].value;
+        leftOption.series[1].data = res.left.series[0].value
 
-        rightInfo1.value = res.right.today.series;
+        rightInfo1.value = res.right.today.series
-        rightInfo2.value = res.right.month;
+        rightInfo2.value = res.right.month
 
-        rightOption1.xAxis.data = res.right.today.x.map((item: any)=>item);
+        rightOption1.xAxis.data = res.right.today.x.map((item: any) => item)
-        rightOption1.series[0].name = res.right.today.series[0].name;
+        rightOption1.series[0].name = res.right.today.series[0].name
-        rightOption1.series[0].data = res.right.today.series[0].value;
+        rightOption1.series[0].data = res.right.today.series[0].value
-        rightOption1.series[1].name = res.right.today.series[1].name;
+        rightOption1.series[1].name = res.right.today.series[1].name
-        rightOption1.series[1].data = res.right.today.series[1].value;
+        rightOption1.series[1].data = res.right.today.series[1].value
 
         rightOption2.xAxis.data = Object.keys(res.right.month[0].value).map((item: any) => item)
-        rightOption2.series[0].name = res.right.month[0].name;
+        rightOption2.series[0].name = res.right.month[0].name
-        rightOption2.series[0].data = Object.values(res.right.month[0].value).map((item: any)=>item)
+        rightOption2.series[0].data = Object.values(res.right.month[0].value).map(
-        rightOption2.series[1].name = res.right.month[1].name;
+            (item: any) => item
-        rightOption2.series[1].data = Object.values(res.right.month[1].value).map((item: any)=>item)
+        )
-
+        rightOption2.series[1].name = res.right.month[1].name
+        rightOption2.series[1].data = Object.values(res.right.month[1].value).map(
+            (item: any) => item
+        )
     })
     apiGetBottomTrade({
         date: date
-    }).then(res => {
+    }).then((res) => {
         // 清空echarts 数据
         visitorOption.xAxis.data = []
         visitorOption.series = []
-        console.log(res);
+        console.log(res)
 
-        visitorOption.legend.data = Object.values(res.series).map((item: any) => item.name);
+        visitorOption.legend.data = Object.values(res.series).map((item: any) => item.name)
 
         // 写入从后台拿来的数据
-        visitorOption.xAxis.data = res.x;
+        visitorOption.xAxis.data = res.x
         visitorOption.series = Object.values(res.series).map((item: any) => {
             return {
                 type: 'line',
@@ -350,14 +446,13 @@ const getData = () => {
                 data: item.value,
                 name: item.name,
                 money: item.money,
-                rate: item.rate
+                rate: item.rate,
+                desc: item.desc
             }
-        });
+        })
-
     })
 }
 
-
 onMounted(() => {
     getData()
 })