增加一些数据展示功能

src/api/dashboard.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import type { TableData } from '@arco-design/web-vue/es/table/interface';
+import dayjs from 'dayjs';
 
 export interface ContentDataRecord {
   x: string;
@@ -36,6 +37,16 @@ export function useranalysis() {
  * @param 获取仪表盘 时间查询
  * @returns 
  */
-export function useranalysis_time() {
+export function useranalysis_time(start_time:any,end_time:any) {
-  return axios.post<any>('/admin/api/v1/Dashboard/useranalysis_time');
+  const startTimestamp = dayjs(start_time).startOf('day').unix();  // 开始时间的时间戳（00:00:00）
+  const endTimestamp = dayjs(end_time).endOf('day').unix();  
+  return axios.post<any>('/admin/api/v1/Dashboard/useranalysis_time',{start_time:startTimestamp,end_time:endTimestamp});
+}
+/**
+ * 
+ * @param 获取仪表盘 第三方支付余额
+ * @returns 
+ */
+export function shopGetBalance() {
+  return axios.post<any>('/admin/api/v1/Dashboard/shopGetBalance');
 }

src/api/jobuser.ts

@@ -114,3 +114,11 @@ export function set_user_remark(id: number,remark:string) {
 export function get_user_withdraw(id: number) {
   return axios.post<Black>('/admin/api/v1/jobuser/get_user_withdraw', { id });
 }
+/**
+ * 
+ * @param 获取用户在线时长
+ * @returns 
+ */
+export function get_user_wphone(username:string) {
+  return axios.post<Black>('/admin/api/v1/jobuser/get_user_wphone', { username });
+}

src/api/withdraw.ts

@@ -51,5 +51,5 @@ export function lists(params: ListParams) {
  * @returns 
  */
 export function pushMoney(params:any) {
-    return axios.post<jobuser>('/api/withdraw/pushMoney',params);
+    return axios.post<jobuser>('/admin/api/v1/withdraw/pushMoney',params);
   }

src/locale/en-US.ts

@@ -54,6 +54,7 @@ export default {
   'menu.hotinformation': 'Hotinformation',
   'menu.carousel': 'carousel',
   'menu.volunteerservicecorps':'volunteerservicecorps',
+  "menu.searchusertime": '用户在线时长',
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,

src/locale/zh-CN.ts

@@ -61,6 +61,7 @@ export default {
   'menu.jobuser':'用户',
   "menu.dictionary":'客服',
   "menu.withdraw": '提现管理',
+  "menu.searchusertime": '用户在线时长',
   ...localeSettings,
   ...localeMessageBox,
   ...localeLogin,

src/router/routes/modules/jobuser.ts

@@ -22,16 +22,16 @@ const JOBUSER: AppRouteRecordRaw = {
         roles: ['*'],
       },
     },
-    // {
+    {
-    //   path: 'monitor',
+      path: 'searchusertime',
-    //   name: 'Monitor',
+      name: 'searchusertime',
-    //   component: () => import('@/views/jobuser/monitor/index.vue'),
+      component: () => import('@/views/jobuser/searchusertime.vue'),
-    //   meta: {
+      meta: {
-    //     locale: 'menu.jobuser.monitor',
+        locale: 'menu.searchusertime',
-    //     requiresAuth: true,
+        requiresAuth: true,
-    //     roles: ['admin'],
+        roles: ['admin'],
-    //   },
+      },
-    // },
+    },
   ],
 };
 

src/router/routes/modules/list.ts

@@ -1,38 +1,38 @@
-import { DEFAULT_LAYOUT } from '../base';
+// import { DEFAULT_LAYOUT } from '../base';
-import { AppRouteRecordRaw } from '../types';
+// import { AppRouteRecordRaw } from '../types';
 
-const LIST: AppRouteRecordRaw = {
+// const LIST: AppRouteRecordRaw = {
-  path: '/list',
+//   path: '/list',
-  name: 'list',
+//   name: 'list',
-  component: DEFAULT_LAYOUT,
+//   component: DEFAULT_LAYOUT,
-  meta: {
+//   meta: {
-    locale: 'menu.list',
+//     locale: 'menu.list',
-    requiresAuth: true,
+//     requiresAuth: true,
-    icon: 'icon-list',
+//     icon: 'icon-list',
-    order: 2,
+//     order: 2,
-  },
+//   },
-  children: [
+//   children: [
-    {
+//     {
-      path: 'search-table', // The midline path complies with SEO specifications
+//       path: 'search-table', // The midline path complies with SEO specifications
-      name: 'SearchTable',
+//       name: 'SearchTable',
-      component: () => import('@/views/list/search-table/index.vue'),
+//       component: () => import('@/views/list/search-table/index.vue'),
-      meta: {
+//       meta: {
-        locale: 'menu.list.searchTable',
+//         locale: 'menu.list.searchTable',
-        requiresAuth: true,
+//         requiresAuth: true,
-        roles: ['*'],
+//         roles: ['*'],
-      },
+//       },
-    },
+//     },
-    {
+//     {
-      path: 'card',
+//       path: 'card',
-      name: 'Card',
+//       name: 'Card',
-      component: () => import('@/views/list/card/index.vue'),
+//       component: () => import('@/views/list/card/index.vue'),
-      meta: {
+//       meta: {
-        locale: 'menu.list.cardList',
+//         locale: 'menu.list.cardList',
-        requiresAuth: true,
+//         requiresAuth: true,
-        roles: ['*'],
+//         roles: ['*'],
-      },
+//       },
-    },
+//     },
-  ],
+//   ],
-};
+// };
 
-export default LIST;
+// export default LIST;

src/views/dashboard/workplace/components/amonut.vue

@@ -0,0 +1,102 @@
+<template>
+    <a-spin :loading="loading" style="width: 100%">
+      <a-card
+        class="general-card"
+        :header-style="{ paddingBottom: '0' }"
+        :body-style="{
+          padding: '20px',
+        }"
+      >
+        <template #title>
+          第三方支付余额
+        </template>
+        <Chart height="310px" :option="chartOption" />
+      </a-card>
+    </a-spin>
+  </template>
+  
+  <script lang="ts" setup>
+    import { ref, onMounted } from 'vue';  // 导入 onMounted 钩子
+    import useLoading from '@/hooks/loading';
+    import useChartOption from '@/hooks/chart-option';
+    import { shopGetBalance, useranalysis } from '@/api/dashboard';
+  
+    const { loading } = useLoading();
+    const chartOption = ref(null);  // 定义 chartOption 作为响应式数据
+  
+    onMounted(async () => {
+      const res = await shopGetBalance();
+      const AmountAvailable = res.data.AmountAvailable || 0;
+      chartOption.value = {
+        legend: {
+          left: 'center',
+          data: ['余额'],
+          bottom: 0,
+          icon: 'circle',
+          itemWidth: 8,
+          textStyle: {
+            color: 'rgb(60, 60, 60)',
+          },
+          itemStyle: {
+            borderWidth: 0,
+          },
+        },
+        tooltip: {
+          show: true,
+          trigger: 'item',
+        },
+        graphic: {
+          elements: [
+            {
+              type: 'text',
+              left: 'center',
+              top: '40%',
+              style: {
+                text: '余额',
+                textAlign: 'center',
+                fill: '#4E5969',
+                fontSize: 14,
+              },
+            },
+            {
+              type: 'text',
+              left: 'center',
+              top: '50%',
+              style: {
+                text: AmountAvailable,
+                textAlign: 'center',
+                fill: '#1D2129',
+                fontSize: 16,
+                fontWeight: 500,
+              },
+            },
+          ],
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            center: ['50%', '50%'],
+            label: {
+              formatter: '{d}%',
+              fontSize: 14,
+              color: '#4E5969',
+            },
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 1,
+            },
+            data: [
+              {
+                value: AmountAvailable,
+                name: '余额',
+                itemStyle: {
+                  color: '#313CA9',
+                },
+              },
+            ],
+          },
+        ],
+      };
+    });
+  </script>

src/views/dashboard/workplace/components/data-panel-search.vue

@@ -37,7 +37,7 @@
             <img alt="avatar"
               src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
           </a-avatar>
-          <a-statistic :title="'登录人数'" :value="data.user_total" :value-from="0" animation show-group-separator>
+          <a-statistic :title="'登录人数'" :value="data.login" :value-from="0" animation show-group-separator>
             <template #suffix>
               <span class="unit">个</span>
             </template>
@@ -50,7 +50,7 @@
             <img alt="avatar"
               src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
           </a-avatar>
-          <a-statistic :title="'注册人数'" :value="data.user_phone" :value-from="0" animation show-group-separator>
+          <a-statistic :title="'注册人数'" :value="data.registration" :value-from="0" animation show-group-separator>
             <template #suffix>
               <span class="unit">{{ $t('workplace.pecs') }}</span>
             </template>
@@ -63,9 +63,9 @@
             <img alt="avatar"
               src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image" />
           </a-avatar>
-          <a-statistic :title="'提款人数'" :value="data.user_phone_onlin" :value-from="0" animation show-group-separator>
+          <a-statistic :title="'提款数'" :value="data.withdraw" :value-from="0" animation show-group-separator>
             <template #suffix>
-              <span class="unit">{{ $t('workplace.pecs') }}</span>
+              <span class="unit">笔</span>
             </template>
           </a-statistic>
         </a-space>
@@ -90,13 +90,13 @@
   </template>
   
   <script lang="ts" setup>
-  import { index } from '@/api/dashboard';
+  import { index, useranalysis_time } from '@/api/dashboard';
+import dayjs from 'dayjs';
   import { Ref, onMounted, reactive, ref } from 'vue';
   const data = reactive({
-    user_total: 0,
+    login: 0,
-    user_phone: 0,
+    registration: 0,
     withdraw: 0,
-    user_phone_onlin: 0,
   });
   
   onMounted(async() => {
@@ -107,16 +107,20 @@
     //   data.user_total=res.data.user_total
     //   data.withdraw=res.data.withdraw
     // }, 1000)
-    const res = await index();
+    const res = await useranalysis_time(dayjs().format("YYYY-MM-DD HH:mm:ss"),dayjs().format("YYYY-MM-DD HH:mm:ss"));
-      data.user_phone=res.data.user_phone
+    data.login=res.data.login
-      data.user_phone_onlin=res.data.user_phone_onlin
+      data.registration=res.data.registration
-      data.user_total=res.data.user_total
       data.withdraw=res.data.withdraw
   })
   
   const reset=()=>{}
-  const search=()=>{}
+  const search=async ()=>{
-  const queryParams=ref([])
+    const res = await useranalysis_time(queryParams.value[0],queryParams.value[1]);
+    data.login=res.data.login
+      data.registration=res.data.registration
+      data.withdraw=res.data.withdraw
+  }
+  const queryParams=ref([dayjs().subtract(1, 'day').format("YYYY-MM-DD"),dayjs().format("YYYY-MM-DD")])
   </script>
   
   <style lang="less" scoped>

src/views/dashboard/workplace/components/data-panel.vue

@@ -124,14 +124,19 @@ const data = reactive({
   user_phone_onlin: 0,
 });
 
-onMounted(() => {
+onMounted(async () => {
-  setInterval(async () => {
+  // setInterval(async () => {
-    const res = await index();
+  //   const res = await index();
+  //   data.user_phone=res.data.user_phone
+  //   data.user_phone_onlin=res.data.user_phone_onlin
+  //   data.user_total=res.data.user_total
+  //   data.withdraw=res.data.withdraw
+  // }, 1000)
+  const res = await index();
     data.user_phone=res.data.user_phone
     data.user_phone_onlin=res.data.user_phone_onlin
     data.user_total=res.data.user_total
     data.withdraw=res.data.withdraw
-  }, 1000)
 })
 
 

src/views/dashboard/workplace/index.vue

@@ -26,6 +26,11 @@
         >
           <CategoriesPercent />
         </a-grid-item>
+        <a-grid-item
+          :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
+        >
+          <amonut />
+        </a-grid-item>
       </a-grid>
     </div>
   </div>
@@ -38,7 +43,7 @@
   import ContentChart from './components/content-chart.vue';
   import PopularContent from './components/popular-content.vue';
   import CategoriesPercent from './components/categories-percent.vue';
-
+  import amonut from './components/amonut.vue'
 </script>
 
 <script lang="ts">

src/views/jobuser/index.vue

@@ -60,7 +60,7 @@
           <a-table-column title="备注" data-index="remark"></a-table-column>
           <a-table-column title="用户vip等级" data-index="vip_id"></a-table-column>
           <a-table-column title="用户积分" data-index="money"></a-table-column>
-          <a-table-column title="上级代理" data-index="agent"></a-table-column>
+          <a-table-column title="上级代理" data-index="parent_username"></a-table-column>
           <a-table-column title="累计在线时长/分" data-index="time"></a-table-column>
           <a-table-column title="注册时间">
             <template #cell="{ record }">

src/views/jobuser/searchusertime.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="container">
+      <Breadcrumb :items="['menu.jobuser', 'menu.jobuser.userlist']" />
+      <a-card class="general-card" :title="$t('menu.jobuser.userlist')">
+        <a-row>
+          <a-col :flex="1">
+            <a-form :model="queryParams" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
+              label-align="left">
+              <a-row :gutter="16">
+                <a-col :span="8">
+                  <a-form-item field="name" :label="'用户名'">
+                    <a-input v-model="queryParams.key" :placeholder="'请输入用户名'" />
+                  </a-form-item>
+                </a-col>
+                <!-- <a-col :span="8">
+                  <a-form-item field="createdTime" :label="$t('searchTable.form.createdTime')">
+                    <a-range-picker v-model="formModel.createdTime" style="width: 100%" />
+                  </a-form-item>
+                </a-col> -->
+              </a-row>
+            </a-form>
+          </a-col>
+  
+          <a-col :flex="'86px'" style="text-align: right">
+            <a-space  :size="18">
+              <a-button type="primary" @click="getAll">
+                <template #icon>
+                  <icon-search />
+                </template>
+                查询
+              </a-button>
+              <a-button @click="reset">
+                <template #icon>
+                  <icon-refresh />
+                </template>
+                重置
+              </a-button>
+            </a-space>
+          </a-col>
+        </a-row>
+        <a-table :data="data">
+          <template #columns>
+            <a-table-column title="手机号" data-index="phone"></a-table-column>
+            <a-table-column title="在线时长/分" data-index="total_time"></a-table-column>
+          </template>
+        </a-table>
+      </a-card>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
+  import { lists, black, OutBlack, del, set_user_password, set_user_remark,get_user_withdraw, get_user_wphone } from '@/api/jobuser';
+  import { Modal } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
+
+  
+  interface DataItem {
+    id: number;
+    username: string;
+    password: string;
+    time: Date;
+    money: string;
+  }
+
+
+  let data = ref<DataItem[]>([])
+  //弹窗控制
+  const modal_visible = ref(false)
+  //保存需要修改的用户id
+  const userid = ref(0)
+  const show_group = (id: number) => {
+    userid.value = id
+    modal_visible.value = true
+  }
+  
+ 
+  
+
+
+
+
+
+
+  const queryParams = ref({
+    key: "1",
+  });
+  
+  const reset=()=>{
+    queryParams.value.key=""
+  }
+  
+  /**
+   * 获取所有的用户列表
+   */
+  const getAll = async () => {
+    const res: any = await get_user_wphone(queryParams.value.key);
+    if (res.code == 200) {
+      data.value = res.data.userPhonesWithTime;
+      Message.success('获取数据成功')
+    }else{
+        Message.error('获取数据失败')
+    }
+  };
+  onMounted(async () => {
+    // getAll()
+
+  })
+  </script>
+  
+  
+  <style lang="less" scoped>
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+  
+  .left-side {
+    flex: 1;
+    overflow: auto;
+  }
+  
+  .right-side {
+    width: 280px;
+    margin-left: 16px;
+  }
+  
+  .panel {
+    background-color: var(--color-bg-2);
+    border-radius: 4px;
+    overflow: auto;
+  }
+  
+  :deep(.panel-border) {
+    margin-bottom: 0;
+    border-bottom: 1px solid rgb(var(--gray-2));
+  }
+  
+  .moduler-wrap {
+    border-radius: 4px;
+    background-color: var(--color-bg-2);
+  
+    :deep(.text) {
+      font-size: 12px;
+      text-align: center;
+      color: rgb(var(--gray-8));
+    }
+  
+    :deep(.wrapper) {
+      margin-bottom: 8px;
+      text-align: center;
+      cursor: pointer;
+  
+      &:last-child {
+        .text {
+          margin-bottom: 0;
+        }
+      }
+  
+      &:hover {
+        .icon {
+          color: rgb(var(--arcoblue-6));
+          background-color: #e8f3ff;
+        }
+  
+        .text {
+          color: rgb(var(--arcoblue-6));
+        }
+      }
+    }
+  
+    :deep(.icon) {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      margin-bottom: 4px;
+      color: rgb(var(--dark-gray-1));
+      line-height: 32px;
+      font-size: 16px;
+      text-align: center;
+      background-color: rgb(var(--gray-1));
+      border-radius: 4px;
+    }
+  }
+  </style>
+  
+  <style lang="less" scoped>
+  // responsive
+  .mobile {
+    .container {
+      display: block;
+    }
+  
+    .right-side {
+      // display: none;
+      width: 100%;
+      margin-left: 0;
+      margin-top: 16px;
+    }
+  }
+  </style>
+