feat: 完善仪表盘总计区块内容

2025-09-27 04:57:10 +08:00 · 2023-09-09 00:20:50 +08:00
parent 0ec5647421
commit 3440aa4faa
26 changed files with 320 additions and 75 deletions
--- a/continew-admin-ui/src/views/dashboard/workplace/components/announcement.vue
+++ b/continew-admin-ui/src/views/dashboard/workplace/components/announcement.vue
@@ -84,12 +84,12 @@
 <script lang="ts" setup>
  import { ref } from 'vue';
  import {
-    AnnouncementDashboardRecord,
+    DashboardAnnouncementRecord,
    listAnnouncement,
-  } from '@/api/dashboard';
+  } from '@/api/common/dashboard';
  import { DataRecord, get } from '@/api/system/announcement';

-  const dataList = ref<AnnouncementDashboardRecord[]>([]);
+  const dataList = ref<DashboardAnnouncementRecord[]>([]);
  const dataDetail = ref<DataRecord>({});
  const detailLoading = ref(false);
  const detailVisible = ref(false);
--- a/continew-admin-ui/src/views/dashboard/workplace/components/carousel.vue
+++ b/continew-admin-ui/src/views/dashboard/workplace/components/carousel.vue
@@ -3,22 +3,16 @@
    indicator-type="slider"
    show-arrow="hover"
    auto-play
-    style="width: 100%; height: 170px; border-radius: 4px; overflow: hidden"
+    style="width: 100%; height: 300px; border-radius: 4px; overflow: hidden"
  >
    <a-carousel-item v-for="(src, idx) in imageSrc" :key="idx">
      <div>
-        <img :src="src" style="width: 100%" />
+        <img :src="src" style="width: 100%" alt="QrCode" />
      </div>
    </a-carousel-item>
  </a-carousel>
 </template>

 <script lang="ts" setup>
-  const imageSrc = [
-    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/5cc3cd1d994b7ef9db6a1f619a22addd.jpg~tplv-49unhts6dw-image.image',
-    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/f256cbcc287139e191fecea9d255a1f0.jpg~tplv-49unhts6dw-image.image',
-    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/b557ff0cd44146a2e471b477af2f30d0.jpg~tplv-49unhts6dw-image.image',
-    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/665106f4bbd2a2df96eaf7aec52f7bc3.jpg~tplv-49unhts6dw-image.image',
-    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea095a2c9c72b5d8f2f2818040db736d.jpg~tplv-49unhts6dw-image.image',
-  ];
+  const imageSrc = ['https://doc.charles7c.top/qrcode.jpg'];
 </script>
--- a/continew-admin-ui/src/views/dashboard/workplace/components/content-chart.vue
+++ b/continew-admin-ui/src/views/dashboard/workplace/components/content-chart.vue
@@ -20,7 +20,7 @@
  import { ref } from 'vue';
  import { graphic } from 'echarts';
  import useLoading from '@/hooks/loading';
-  import { queryContentData, ContentDataRecord } from '@/api/dashboard';
+  import { queryContentData, ContentDataRecord } from '@/api/common/dashboard';
  import useChartOption from '@/hooks/chart-option';
  import { ToolTipFormatterParams } from '@/types/echarts';
  import { AnyObject } from '@/types/global';
--- a/continew-admin-ui/src/views/dashboard/workplace/components/data-panel.vue
+++ b/continew-admin-ui/src/views/dashboard/workplace/components/data-panel.vue
@@ -6,21 +6,17 @@
    >
      <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"
-          />
+          <svg-icon icon-class="popularity" />
        </a-avatar>
        <a-statistic
-          :title="$t('workplace.onlineContent')"
-          :value="373.5"
-          :precision="1"
+          :title="$t('workplace.pvCount')"
+          :value="totalData.pvCount"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
-            W+ <span class="unit">{{ $t('workplace.pecs') }}</span>
+            <span class="unit">{{ $t('workplace.unit.times') }}</span>
          </template>
        </a-statistic>
      </a-space>
@@ -31,20 +27,17 @@
    >
      <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"
-          />
+          <svg-icon icon-class="same-city" />
        </a-avatar>
        <a-statistic
-          :title="$t('workplace.putIn')"
-          :value="368"
+          :title="$t('workplace.ipCount')"
+          :value="totalData.ipCount"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
-            <span class="unit">{{ $t('workplace.pecs') }}</span>
+            <span class="unit">{{ $t('workplace.unit.pecs') }}</span>
          </template>
        </a-statistic>
      </a-space>
@@ -55,20 +48,17 @@
    >
      <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"
-          />
+          <svg-icon icon-class="hot" />
        </a-avatar>
        <a-statistic
-          :title="$t('workplace.newDay')"
-          :value="8874"
+          :title="$t('workplace.todayPvCount')"
+          :value="totalData.todayPvCount"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
-            <span class="unit">{{ $t('workplace.pecs') }}</span>
+            <span class="unit">{{ $t('workplace.unit.times') }}</span>
          </template>
        </a-statistic>
      </a-space>
@@ -80,19 +70,26 @@
    >
      <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"
-          />
+          <svg-icon icon-class="data" />
        </a-avatar>
        <a-statistic
-          :title="$t('workplace.newFromYesterday')"
-          :value="2.8"
+          :title="$t('workplace.newPvFromYesterday')"
+          :value="totalData.newPvFromYesterday"
          :precision="1"
          :value-from="0"
          animation
        >
-          <template #suffix> % <icon-caret-up class="up-icon" /> </template>
+          <template #suffix>
+            %
+            <icon-caret-up
+              v-if="totalData.newPvFromYesterday > 0"
+              class="up-icon"
+            />
+            <icon-caret-down
+              v-if="totalData.newPvFromYesterday < 0"
+              class="down-icon"
+            />
+          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
@@ -102,7 +99,30 @@
  </a-grid>
 </template>

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { DashboardTotalRecord, getTotal } from '@/api/common/dashboard';
+
+  const totalData = ref<DashboardTotalRecord>({
+    pvCount: 0,
+    ipCount: 0,
+    todayPvCount: 0,
+    newPvFromYesterday: 0.0,
+  });
+
+  /**
+   * 查询总计信息
+   */
+  const getData = async () => {
+    try {
+      const { data } = await getTotal();
+      totalData.value = data;
+    } catch (err) {
+      // you can report use errorHandler or other
+    }
+  };
+  getData();
+</script>

 <style lang="less" scoped>
  .arco-grid.panel {
@@ -120,6 +140,9 @@
  .up-icon {
    color: rgb(var(--red-6));
  }
+  .down-icon {
+    color: rgb(var(--green-6));
+  }
  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
--- a/continew-admin-ui/src/views/dashboard/workplace/components/popular-content.vue
+++ b/continew-admin-ui/src/views/dashboard/workplace/components/popular-content.vue
@@ -75,7 +75,7 @@
 <script lang="ts" setup>
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
-  import { queryPopularList } from '@/api/dashboard';
+  import { queryPopularList } from '@/api/common/dashboard';
  import type { TableData } from '@arco-design/web-vue/es/table/interface';

  const type = ref('text');
--- a/continew-admin-ui/src/views/dashboard/workplace/locale/en-US.ts
+++ b/continew-admin-ui/src/views/dashboard/workplace/locale/en-US.ts
@@ -4,10 +4,10 @@ export default {
  'workplace.balance': 'Balance (CNY)',
  'workplace.order.pending': 'Pending',
  'workplace.order.pendingRenewal': 'Renewal Order',
-  'workplace.onlineContent': 'Online Content',
-  'workplace.putIn': 'Put In',
-  'workplace.newDay': 'Daily Additional Comments',
-  'workplace.newFromYesterday': 'New From Yesterday',
+  'workplace.pvCount': 'Pv Count',
+  'workplace.ipCount': 'Ip Count',
+  'workplace.todayPvCount': 'Today Pv Count',
+  'workplace.newPvFromYesterday': 'New Pv From Yesterday',
  'workplace.minute': 'Min',
  'workplace.docs': 'Documents',
  'workplace.docs.intro': 'Project Introduction',
@@ -28,5 +28,6 @@ export default {
  'workplace.popularContent.image': 'image',
  'workplace.popularContent.video': 'video',
  'workplace.categoriesPercent': 'Categories Percent',
-  'workplace.pecs': 'pecs',
+  'workplace.unit.pecs': 'pecs',
+  'workplace.unit.times': 'times',
 };
--- a/continew-admin-ui/src/views/dashboard/workplace/locale/zh-CN.ts
+++ b/continew-admin-ui/src/views/dashboard/workplace/locale/zh-CN.ts
@@ -4,10 +4,10 @@ export default {
  'workplace.balance': '余额（元）',
  'workplace.order.pending': '待支付',
  'workplace.order.pendingRenewal': '待续费订单',
-  'workplace.onlineContent': '线上总内容',
-  'workplace.putIn': '投放中内容',
-  'workplace.newDay': '日新增评论',
-  'workplace.newFromYesterday': '较昨日新增',
+  'workplace.pvCount': '浏览量(PV)',
+  'workplace.ipCount': 'IP数',
+  'workplace.todayPvCount': '今日浏览量',
+  'workplace.newPvFromYesterday': '较昨日新增',
  'workplace.minute': '分钟',
  'workplace.docs': '帮助文档',
  'workplace.docs.intro': '项目简介',
@@ -28,5 +28,6 @@ export default {
  'workplace.popularContent.image': '图片',
  'workplace.popularContent.video': '视频',
  'workplace.categoriesPercent': '内容类型占比',
-  'workplace.pecs': '个',
+  'workplace.unit.pecs': '个',
+  'workplace.unit.times': '次',
 };