1

src/api/system_store.ts

@@ -63,4 +63,9 @@ export function apiSystemStoreStatisticsOrderChart(params: any) {
 // 运营概况-门店业绩
 export function apiSystemStoreStatisticsStore(params: any) {
     return request.get({ url: '/system_store/SystemStoreStatistics/store', params })
+}
+
+// 门店交易统计
+export function apiWorkbenchStoreIndex(params: any) {
+    return request.get({ url: '/workbench/store_index', params })
 }

src/views/finance/store_finance_flow/index.vue

@@ -4,17 +4,17 @@
             <el-form class="mb-[-16px]" :model="queryParams" inline>
                 <el-form-item label="门店" prop="store_id">
                     <!-- <el-input class="w-[280px]" v-model="queryParams.store_name" clearable placeholder="请输入门店id" /> -->
-                    <el-select v-model="queryParams.store_id" filterable remote reserve-keyword
+                    <el-select v-model="queryParams.store_id" filterable remote reserve-keyword placeholder="输入门店名称搜索"
-                        placeholder="输入门店名称搜索" remote-show-suffix :remote-method="remoteMethod" :loading="storeloading"
+                        remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" style="width: 240px"
-                        style="width: 240px" @change="resetPage">
+                        @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="uid">
                     <!-- <el-input class="w-[280px]" v-model="queryParams.uid" clearable placeholder="请输入用户id" /> -->
-                    <el-select v-model="queryParams.user_id" filterable remote reserve-keyword
+                    <el-select v-model="queryParams.user_id" filterable remote reserve-keyword placeholder="输入用户名称搜索"
-                        placeholder="输入用户名称搜索" remote-show-suffix :remote-method="remoteMethodUser" :loading="userloading"
+                        remote-show-suffix :remote-method="remoteMethodUser" :loading="userloading" style="width: 240px"
-                        style="width: 240px" @change="resetPage">
+                        @change="resetPage">
                         <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
                     </el-select>
                 </el-form-item>
@@ -32,15 +32,15 @@
                 <template #icon>
                     <icon name="el-icon-Plus" />
                 </template>
-                新增
+新增
-                </el-button>
+</el-button>
-                <el-button v-perms="['store_finance_flow.store_finance_flow/delete']" :disabled="!selectData.length"
+<el-button v-perms="['store_finance_flow.store_finance_flow/delete']" :disabled="!selectData.length"
-                    @click="handleDelete(selectData)">
+    @click="handleDelete(selectData)">
-                    删除
+    删除
-                </el-button> -->
+</el-button> -->
             <div>
-                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+                <el-table :data="pager.lists" @selection-change="handleSelectionChange" row-key="id" :tree-props="{ children: 'list' }">
-                    <el-table-column type="selection" width="55" />
+                    <el-table-column label="ID" prop="id" min-width="100" show-overflow-tooltip />
                     <el-table-column label="交易单号" prop="order_sn" min-width="120" show-overflow-tooltip />
                     <el-table-column label="交易时间" prop="create_time" min-width="120" show-overflow-tooltip />
                     <el-table-column label="金额" prop="number" min-width="100" show-overflow-tooltip>
@@ -51,7 +51,7 @@
                     </el-table-column>
                     <el-table-column label="门店名称" prop="store_name" show-overflow-tooltip />
                     <el-table-column label="用户" prop="nickname" min-width="80" show-overflow-tooltip />
-                    <el-table-column label="交易类型" prop="financial_type_name" show-overflow-tooltip />
+                    <el-table-column label="收益/扣除" prop="financial_type_name" show-overflow-tooltip />
                     <el-table-column label="支付方式" prop="pay_type_name" show-overflow-tooltip />
                     <el-table-column label="备注" prop="remark" show-overflow-tooltip />
 
@@ -131,39 +131,39 @@ getLists()
 
 const storeloading = ref(false);
 const storeList = ref([]);
-const remoteMethod = (e:string='') => {
+const remoteMethod = (e: string = '') => {
     storeloading.value = true;
     apiSystemStoreLists({
         name: e,
         page_size: 50
     }).then(res => {
         storeList.value = res.lists;
-        setTimeout(()=>{
+        setTimeout(() => {
             storeloading.value = false;
-        },300)
+        }, 300)
     }).catch(err => {
-        setTimeout(()=>{
+        setTimeout(() => {
             storeloading.value = false;
-        },300)
+        }, 300)
     })
 }
 
 const userloading = ref(false);
 const userList = ref([]);
-const remoteMethodUser = (e:string='') => {
+const remoteMethodUser = (e: string = '') => {
     storeloading.value = true;
     apiUserLists({
         nickname: e,
         page_size: 50
     }).then(res => {
         userList.value = res.lists;
-        setTimeout(()=>{
+        setTimeout(() => {
             storeloading.value = false;
-        },300)
+        }, 300)
     }).catch(err => {
-        setTimeout(()=>{
+        setTimeout(() => {
             storeloading.value = false;
-        },300)
+        }, 300)
     })
 }
 </script>

src/views/store/statistics/index.vue

@@ -2,7 +2,15 @@
     <div class="workbench">
         <el-card shadow="never" class=" !border-none">
             <div class="flex justify-between items-center">
-                <span class="text-2xl">运营概况</span>
+                <div class="flex items-center">
+                    <span class="text-2xl mr-4">运营概况</span>
+                    <el-select v-model="store_id" filterable remote reserve-keyword placeholder="输入门店名称搜索"
+                        remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" style="width: 240px"
+                        @change="getData">
+                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                    <span class="ml-4 text-info text-[12px]">点击左侧切换门店</span>
+                </div>
                 <div class="flex items-center text-sm">
                     <span class="mr-4">时间筛选: </span>
                     <el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -37,48 +45,32 @@
         <div class="mt-4 flex justify-center">
             <el-card shadow="never" class="flex-1 !border-none">
                 <span class="text-2xl">交易数据</span>
-                <el-table :data="orderList" class="mt-4" height="280">
+                <el-table :data="formData.order_list" height="500px">
-                    <el-table-column prop="avatar" label="头像" min-width="55">
+                    <el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
                         <template #default="{ row }">
-                            <el-avatar :size="40" :src="row.avatar" />
+                            <el-avatar style="width: 50px; height: 50px" :src="row.avatar" />
                         </template>
                     </el-table-column>
-                    <el-table-column prop="nickname" label="用户名称" />
+                    <el-table-column label="用户名称" prop="nickname" show-overflow-tooltip />
-                    <el-table-column prop="order_id" label="订单号" min-width="200" />
+                    <el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
-                    <el-table-column prop="pay_price" label="交易金额" />
+                    <el-table-column label="交易金额" prop="pay_price" show-overflow-tooltip />
-                    <el-table-column prop="pay_time" label="成交时间">
+                    <el-table-column label="成交时间" prop="pay_time" show-overflow-tooltip />
-
-                    </el-table-column>
                 </el-table>
             </el-card>
             <el-card shadow="never" class="w-[500px] !border-none ml-4">
                 <span class="text-2xl">交易类型</span>
-                <v-charts style="height: 300px" :option="circleOption" :autoresize="true" />
+                <v-charts style="height:500px" :option="tradTypeOption" :autoresize="true" />
             </el-card>
         </div>
-        <!-- <el-card shadow="never" class="mt-4 !border-none">
-            <span class="text-2xl">门店业绩</span>
-            <el-table :data="storeList" class="mt-4">
-                <el-table-column prop="avatar" label="logo" min-width="55">
-                    <template #default="{ row }">
-                        <el-avatar :size="40" :src="row.avatar" />
-                    </template>
-                </el-table-column>
-                <el-table-column prop="name" label="门店名称" />
-                <el-table-column prop="store_price" label="门店实际收款"/>
-                <el-table-column prop="store_order_price" label="门店商品销售额" />
-                <el-table-column prop="store_product_count" label="门店商品销量" />
-                <el-table-column prop="store_user_count" label="门店新增用户数" />
-            </el-table>
-        </el-card> -->
     </div>
 </template>
 
 <script lang="ts" setup name="statistics_store">
 import { apiGetUserBasic, apiGetUserTrend } from '@/api/workbench'
-import { apiSystemStoreStatisticsHeader, apiSystemStoreStatisticsOperate, apiSystemStoreStatisticsOrderChart, apiSystemStoreStatisticsStore } from '@/api/system_store'
+import { apiSystemStoreStatisticsHeader, apiSystemStoreStatisticsOperate, apiSystemStoreStatisticsOrderChart, apiSystemStoreStatisticsStore, apiWorkbenchStoreIndex } from '@/api/system_store'
 import moment from 'moment'
 import vCharts from 'vue-echarts'
+import { apiSystemStoreLists } from '@/api/system_store'
 
 const shortcuts = [
     {
@@ -156,10 +148,16 @@ const visitorOption: any = reactive({
     },
     series: [
         {
-            name: '访问量',
+            data: [],
-            data: [0],
             type: 'line',
-            smooth: true
+            smooth: true,
+            name: "门店收款"
+        },
+        {
+            data: [],
+            type: 'line',
+            smooth: true,
+            name: '新增用户'
         }
     ]
 })
@@ -188,128 +186,157 @@ const circleOption: any = reactive({
     ],
 
 })
-const orderList: any = ref([])
-const storeList: any = ref([])
 
 // 颜色
 const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
 const basicList = reactive([
     {
-        name: '门店订单金额',
+        name: '门店收款金额',
-        type: 'store_income',
+        type: 'receipt_amount',
         icon: 'RectangleCopy',
         num: 0,
 
     },
     {
-        name: '余额消耗金额',
+        name: '门店营业额',
-        type: 'store_use_yue',
+        type: 'order_amount',
         icon: 'RectangleCopy49',
         num: 0,
 
     },
     {
-        name: '用户充值金额',
+        name: '门店收益金额',
-        type: 'recharge_price',
+        type: 'income_amount',
         icon: 'RectangleCopy53',
         num: 0,
 
     },
     {
-        name: '收银订单金额',
+        name: '核销订单金额',
-        type: 'cashier_order_price',
+        type: 'verify_amount',
         icon: 'RectangleCopy5',
         num: 0,
 
     },
     {
-        name: '付费会员金额',
+        name: '线下收银订单金额',
-        type: 'vip_price',
+        type: 'cashier_amount',
         icon: 'RectangleCopy4',
         num: 0,
 
     },
     {
-        name: '分配订单金额',
+        name: '现金收银订单金额',
-        type: 'store_income',
+        type: 'cash_amount',
         icon: 'RectangleCopy7',
         num: 0,
 
     },
     {
-        name: '核销订单金额',
+        name: '余额消费金额',
-        type: 'store_writeoff_order_price',
+        type: 'balance_amount',
         icon: 'RectangleCopy59',
         num: 0,
 
-    },
-    {
-        name: '门店新增用户数',
-        type: 'store_user_count',
-        icon: 'RectangleCopy15',
-        num: 0,
-
     },
     {
         name: '门店成交用户数',
-        type: 'store_pay_user_count',
+        type: 'user_number',
         icon: 'RectangleCopy54',
         num: 0,
 
     },
-    // {
-    //     name: '微信会员卡激活数',
-    //     type: 'card_count',
-    //     icon: 'RectangleCopy7',
-    //     num: 0,
-    // },
 ])
 const startEndTime = ref(['', '']);
+const store_id = ref('');
+const formData = ref({});
+const tradTypeOption = reactive(
+    {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left'
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: '50%',
+                data: [
+                    { value: 1048, name: '线上收银订单' },
+                    { value: 735, name: '现金收银订单' },
+                    { value: 580, name: '核销订单' },
+                    { value: 484, name: '充值订单' },
+                ],
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+)
+
 // 获取数据
 const getData = () => {
     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');
+    let start_time, end_time;
-    apiSystemStoreStatisticsHeader({
+    if (startEndTime.value[0] && startEndTime.value[1]) {
-        date: date
+        date = moment(startEndTime.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime.value[1]).format('YYYY/MM/DD');
+        start_time = moment(startEndTime.value[0]).format('YYYY/MM/DD') + ' 00:00:00';
+        end_time = moment(startEndTime.value[1]).format('YYYY/MM/DD') + ' 23:59:59'
+    }
+    apiWorkbenchStoreIndex({
+        start_time: start_time,
+        end_time: end_time,
+        store_id: store_id.value
     }).then(res => {
         basicList.forEach((item: any) => {
             item.num = res[item.type];
         })
-    })
-    apiSystemStoreStatisticsOperate({
-        date: date
-    }).then(res => {
-        // 清空echarts 数据
-        visitorOption.xAxis.data = []
-        visitorOption.series = []
-        visitorOption.legend.data = res.series.map((item: any) => item.name);
 
         // 写入从后台拿来的数据
-        visitorOption.xAxis.data = res.xAxis;
+        visitorOption.xAxis.data = res.statistics.range
-        visitorOption.series = res.series.map((item: any) => {
+        visitorOption.series[0].data = res.statistics.data.order_amount
-            if (item.name == '新增用户数') item.yAxisIndex = 0;
+        visitorOption.series[1].data = res.statistics.data.user_number
-            return item;
-        });
 
+        formData.value = res;
+        tradTypeOption.series[0].data = res.pay_type;
     })
-    apiSystemStoreStatisticsOrderChart({
+
-        date: date
-    }).then(res => {
-        circleOption.legend.data = res.bing_xdata;
-        // 写入从后台拿来的数据
-        circleOption.series[0].data = res.bing_data;
-        orderList.value = res.order_list;
-    })
-    // apiSystemStoreStatisticsStore({
-    //     date: date
-    // }).then(res => {
-    //     storeList.value = res;
-    // })
 }
 
 
+const storeloading = ref(false);
+const storeList = ref([]);
+const remoteMethod = (e: string = '') => {
+    storeloading.value = true;
+    apiSystemStoreLists({
+        name: e,
+        page_size: 50
+    }).then(res => {
+        storeList.value = res.lists;
+        if (store_id.value === '') {
+            const index = Math.floor(Math.random() * res.lists.length)
+            store_id.value = res.lists[index].id;
+            getData();
+        }
+        setTimeout(() => {
+            storeloading.value = false;
+        }, 300)
+    }).catch(err => {
+        setTimeout(() => {
+            storeloading.value = false;
+        }, 300)
+    })
+}
+
 onMounted(() => {
-    getData()
+    remoteMethod()
 })
 </script>