暂存

src/api/dashboard.ts

@@ -23,3 +23,19 @@ export function queryPopularList(params: { type: string }) {
 export function index() {
   return axios.post<any>('/admin/api/v1/Dashboard/index');
 }
+/**
+ * 
+ * @param 获取仪表盘 用户注册分析
+ * @returns 
+ */
+export function useranalysis() {
+  return axios.post<any>('/admin/api/v1/Dashboard/useranalysis');
+}
+/**
+ * 
+ * @param 获取仪表盘 时间查询
+ * @returns 
+ */
+export function useranalysis_time() {
+  return axios.post<any>('/admin/api/v1/Dashboard/useranalysis_time');
+}

src/views/dashboard/workplace/components/categories-percent.vue

@@ -8,7 +8,7 @@
       }"
     >
       <template #title>
-        {{ $t('workplace.categoriesPercent') }}
+        注册用户分析
       </template>
       <Chart height="310px" :option="chartOption" />
     </a-card>
@@ -16,22 +16,29 @@
 </template>
 
 <script lang="ts" setup>
+  import { ref, onMounted } from 'vue';  // 导入 onMounted 钩子
   import useLoading from '@/hooks/loading';
   import useChartOption from '@/hooks/chart-option';
+  import { useranalysis } from '@/api/dashboard';
 
   const { loading } = useLoading();
-  const { chartOption } = useChartOption((isDark) => {
+  const chartOption = ref(null);  // 定义 chartOption 作为响应式数据
-    // echarts support https://echarts.apache.org/zh/theme-builder.html
+
-    // It's not used here
+  onMounted(async () => {
-    return {
+    const res = await useranalysis();
+    const userTotal = res.data.user_total || 0;
+    const register = res.data.register || 0;
+    const inviteRegistration = res.data.inviteregistration || 0;
+
+    chartOption.value = {
       legend: {
         left: 'center',
-        data: ['纯文本', '图文类', '视频类'],
+        data: ['自主注册', '邀请注册'],
         bottom: 0,
         icon: 'circle',
         itemWidth: 8,
         textStyle: {
-          color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
+          color: 'rgb(60, 60, 60)',
         },
         itemStyle: {
           borderWidth: 0,
@@ -48,9 +55,9 @@
             left: 'center',
             top: '40%',
             style: {
-              text: '内容量',
+              text: '总用户',
               textAlign: 'center',
-              fill: isDark ? '#ffffffb3' : '#4E5969',
+              fill: '#4E5969',
               fontSize: 14,
             },
           },
@@ -59,9 +66,9 @@
             left: 'center',
             top: '50%',
             style: {
-              text: '928,531',
+              text: userTotal,
               textAlign: 'center',
-              fill: isDark ? '#ffffffb3' : '#1D2129',
+              fill: '#1D2129',
               fontSize: 16,
               fontWeight: 500,
             },
@@ -76,32 +83,25 @@
           label: {
             formatter: '{d}%',
             fontSize: 14,
-            color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
+            color: '#4E5969',
           },
           itemStyle: {
-            borderColor: isDark ? '#232324' : '#fff',
+            borderColor: '#fff',
             borderWidth: 1,
           },
           data: [
             {
-              value: [148564],
+              value: register,
-              name: '纯文本',
+              name: '自主注册',
               itemStyle: {
-                color: isDark ? '#3D72F6' : '#249EFF',
+                color: '#249EFF',
               },
             },
             {
-              value: [334271],
+              value: inviteRegistration,
-              name: '图文类',
+              name: '邀请注册',
               itemStyle: {
-                color: isDark ? '#A079DC' : '#313CA9',
+                color: '#313CA9',
-              },
-            },
-            {
-              value: [445694],
-              name: '视频类',
-              itemStyle: {
-                color: isDark ? '#6CAAF5' : '#21CCFF',
               },
             },
           ],
@@ -109,6 +109,4 @@
       ],
     };
   });
-</script>
+</script>
-
-<style scoped lang="less"></style>

src/views/dashboard/workplace/components/content-chart.vue

@@ -8,9 +8,9 @@
       }"
       :title="$t('workplace.contentData')"
     >
-      <template #extra>
+      <!-- <template #extra>
         <a-link>{{ $t('workplace.viewMore') }}</a-link>
-      </template>
+      </template> -->
       <Chart height="289px" :option="chartOption" />
     </a-card>
   </a-spin>

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

@@ -0,0 +1,152 @@
+<template>
+          <a-row style="padding: 20px;">
+        <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="12">
+                <a-form-item field="createdTime" :label="'按照时间查询'">
+                  <a-range-picker v-model="queryParams" 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="search">
+              <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-grid :cols="24" :row-gap="16" class="panel">
+      <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
+        <a-space>
+          <a-avatar :size="54" class="col-avatar">
+            <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>
+            <template #suffix>
+              <span class="unit">个</span>
+            </template>
+          </a-statistic>
+        </a-space>
+      </a-grid-item>
+      <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
+        <a-space>
+          <a-avatar :size="54" class="col-avatar">
+            <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>
+            <template #suffix>
+              <span class="unit">{{ $t('workplace.pecs') }}</span>
+            </template>
+          </a-statistic>
+        </a-space>
+      </a-grid-item>
+      <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
+        <a-space>
+          <a-avatar :size="54" class="col-avatar">
+            <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>
+            <template #suffix>
+              <span class="unit">{{ $t('workplace.pecs') }}</span>
+            </template>
+          </a-statistic>
+        </a-space>
+      </a-grid-item>
+      <!-- <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
+        style="border-right: none">
+        <a-space>
+          <a-avatar :size="54" class="col-avatar">
+            <img alt="avatar"
+              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image" />
+          </a-avatar>
+          <a-statistic :title="'提款人数'" :value="data.withdraw" :value-from="0" animation>
+            <template #suffix> 人 </template>
+          </a-statistic>
+        </a-space>
+      </a-grid-item> -->
+      <a-grid-item :span="24">
+        <a-divider class="panel-border" />
+      </a-grid-item>
+    </a-grid>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import { index } from '@/api/dashboard';
+  import { Ref, onMounted, reactive, ref } from 'vue';
+  const data = reactive({
+    user_total: 0,
+    user_phone: 0,
+    withdraw: 0,
+    user_phone_onlin: 0,
+  });
+  
+  onMounted(async() => {
+    // setInterval(async () => {
+    //   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
+  })
+  
+  const reset=()=>{}
+  const search=()=>{}
+  const queryParams=ref([])
+  </script>
+  
+  <style lang="less" scoped>
+  .arco-grid.panel {
+    margin-bottom: 0;
+    padding: 16px 20px 0 20px;
+  }
+  
+  .panel-col {
+    padding-left: 43px;
+    border-right: 1px solid rgb(var(--gray-2));
+  }
+  
+  .col-avatar {
+    margin-right: 12px;
+    background-color: var(--color-fill-2);
+  }
+  
+  .up-icon {
+    color: rgb(var(--red-6));
+  }
+  
+  .unit {
+    margin-left: 8px;
+    color: rgb(var(--gray-8));
+    font-size: 12px;
+  }
+  
+  :deep(.panel-border) {
+    margin: 4px 0 0 0;
+  }
+  </style>
+  

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

@@ -55,7 +55,7 @@
       <a-divider class="panel-border" />
     </a-grid-item>
   </a-grid>
-  <a-grid :cols="24" :row-gap="16" class="panel">
+  <!-- <a-grid :cols="24" :row-gap="16" class="panel">
     <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
       <a-space>
         <a-avatar :size="54" class="col-avatar">
@@ -111,7 +111,7 @@
     <a-grid-item :span="24">
       <a-divider class="panel-border" />
     </a-grid-item>
-  </a-grid>
+  </a-grid> -->
 </template>
 
 <script lang="ts" setup>

src/views/dashboard/workplace/index.vue

@@ -4,14 +4,23 @@
       <div class="panel">
         <Banner />
         <DataPanel />
-        <ContentChart />
+        <!-- <ContentChart /> -->
+        
       </div>
+      <div class="">
+        <div class="left-side">
+          <div class="panel">
+            <DataPanelSearch></DataPanelSearch>
+          </div>
+        </div>
+      </div>
+      
       <a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
-        <a-grid-item
+        <!-- <a-grid-item
           :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
         >
           <PopularContent />
-        </a-grid-item>
+        </a-grid-item> -->
         <a-grid-item
           :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
         >
@@ -25,14 +34,11 @@
 <script lang="ts" setup>
   import Banner from './components/banner.vue';
   import DataPanel from './components/data-panel.vue';
+  import DataPanelSearch from './components/data-panel-search.vue';
   import ContentChart from './components/content-chart.vue';
   import PopularContent from './components/popular-content.vue';
   import CategoriesPercent from './components/categories-percent.vue';
-  import RecentlyVisited from './components/recently-visited.vue';
+
-  import QuickOperation from './components/quick-operation.vue';
-  import Announcement from './components/announcement.vue';
-  import Carousel from './components/carousel.vue';
-  import Docs from './components/docs.vue';
 </script>
 
 <script lang="ts">

src/views/jobuser/index.vue

@@ -1,9 +1,6 @@
 <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">