feat: 投放账户数据

2025-07-02 17:55:20 +08:00
parent b8d88cd6cb
commit 2b4e691f4e
21 changed files with 222 additions and 860 deletions
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts
@ -43,7 +43,7 @@ export const TABLE_COLUMNS = [
  },
  {
    title: '总赞藏数',
-    dataIndex: 'like_number',
+    dataIndex: 'like_collect_number',
    width: 180,
    tooltip: '账号所有内容的点赞和收藏总数',
    align: 'right',
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
@ -4,9 +4,16 @@
 -->
 <template>
  <div class="action-row mb-12px flex justify-between">
-    <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
-      >全选</a-checkbox
-    >
+    <div>
+      <a-checkbox
+        v-if="dataSource.length > 0"
+        :model-value="checkedAll"
+        :indeterminate="indeterminate"
+        class="!pl-13px"
+        @change="handleSelectAll"
+        >全选</a-checkbox
+      >
+    </div>
    <div class="flex items-center">
      <a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
        <template #icon> <icon-download /> </template>
@ -35,6 +42,9 @@
    @select="handleSelect"
    @select-all="handleSelectAll"
  >
+    <template #empty>
+      <NoData />
+    </template>
    <template #columns>
      <a-table-column
        v-for="column in TABLE_COLUMNS"
@ -84,6 +94,9 @@
            </div>
          </div>
        </template>
+        <template v-else-if="column.dataIndex === 'like_collect_number'" #cell="{ record }">
+          {{ formatNumberShow({ value: record.like_number + record.collect_number, showExactValue: true }) }}
+        </template>
        <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
          <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
        </template>
@ -107,7 +120,7 @@
    </template>
  </a-table>

-  <CustomTableColumnModal ref="modalRef" type="media_account" @success="onCustomColumnSuccess" />
+  <CustomTableColumnModal ref="customTableColumnModalRef" type="media_account" @success="onCustomColumnSuccess" />
 </template>

 <script setup>
@ -115,7 +128,7 @@ import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';

 import { STATUS_LIST } from '../../constants';
-import { formatTableField } from '@/utils/tools';
+import { formatTableField, formatNumberShow } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
 import CustomTableColumnModal from '@/components/custom-table-column-modal';

@ -138,7 +151,7 @@ const router = useRouter();

 const selectedItems = ref([]);
 const tableRef = ref(null);
-const modalRef = ref(null);
+const customTableColumnModalRef = ref(null);

 const checkedAll = computed(
  () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@ -167,6 +180,7 @@ const handleDetail = (record) => {

 // 处理排序变化
 const handleSorterChange = (column, order) => {
+  console.log(column, order);
  emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
 };

@ -181,11 +195,10 @@ const handleExport = () => {

 const resetTable = () => {
  selectedItems.value = [];
-  tableRef.value?.clearSorters();
 };

 const openCustomColumn = () => {
-  modalRef.value.open();
+  customTableColumnModalRef.value.open();
 };

 const onCustomColumnSuccess = (selectedColumns) => {
--- a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
@ -5,7 +5,7 @@
 -->
 <template>
  <div class="container">
-    <div class="filter-row flex mb-20px">
+    <div class="filter-row flex">
      <div class="filter-row-item flex items-center">
        <span class="label">账号名称</span>
        <a-space size="medium" class="w-240px">
@ -42,26 +42,7 @@
          </a-select>
        </a-space>
      </div>
-    </div>
-    <div class="filter-row flex">
-      <div class="filter-row-item flex items-center">
-        <span class="label">时间筛选</span>
-        <a-space class="w-240px">
-          <a-select
-            v-model="query.date_range"
-            size="medium"
-            placeholder="全部"
-            class="w-120px"
-            allow-clear
-            @change="handleSearch"
-          >
-            <template #arrow-icon> <icon-calendar size="16" /> </template>
-            <a-option :value="7" label="近7天">近7天</a-option>
-            <a-option :value="14" label="近14天">近14天</a-option>
-            <a-option :value="30" label="近30天">近30天</a-option>
-          </a-select>
-        </a-space>
-      </div>
+
      <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
        <template #icon>
          <icon-search />
--- a/src/views/property-marketing/media-account/account-dashboard/constants.ts
+++ b/src/views/property-marketing/media-account/account-dashboard/constants.ts
@ -39,7 +39,7 @@ export const INITIAL_QUERY = {
  status: '',
  operator_id: '',
  group_ids: [],
-  date_range: '',
+  // date_range: '',
  column: '',
  order: '',
 };
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@ -6,10 +6,12 @@
 <template>
  <div class="account-dashboard-wrap">
    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
-      <div class="top flex h-64px py-10px justify-between items-center mb-19px">
+      <div class="top flex h-64px py-10px justify-between items-center">
        <div class="flex items-center">
          <p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
-          <img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
+          <a-tooltip content="数据纵览">
+            <img :src="icon1" width="14" height="14" class="ml-4px" />
+          </a-tooltip>
        </div>
      </div>
      <div class="overview-row flex">
@ -42,7 +44,7 @@
        @export="handleExport"
        @sorterChange="handleSorterChange"
      />
-      <div class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-box">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
@ -74,201 +76,34 @@ const dataSource = ref([]);
 const overviewData = ref({});
 const selectedRowKeys = ref([]);
 const accountTableRef = ref(null);
-const pageInfo = reactive({
+const pageInfo = ref({
  page: 1,
  pageSize: 20,
-  total: 100,
+  total: 0,
 });

-// 测试数据
-const mockData = [
-  {
-    id: 1,
-    name: '抖音官方账号',
-    mobile: '13800138001',
-    account_id: 'douyin_001',
-    holder_name: '张三',
-    operator_id: 1,
-    platform: 0,
-    group_id: 1,
-    status: 1,
-    is_pause: 0,
-    fans_number: 1250000,
-    like_number: 890000,
-    collect_number: 45000,
-    view_number: 5600000,
-    view_chain: 12.5,
-    like_chain: 8.3,
-    ai_evaluation: {
-      status: 1,
-      text: '表现优质 | 建议保持',
-      look_chain: 12.5,
-      like_chain: 8.3,
-    },
-    operator: {
-      id: 1,
-      name: '李运营',
-    },
-    group: {
-      id: 1,
-      name: '抖音组',
-    },
-  },
-  {
-    id: 2,
-    name: '小红书美妆号',
-    mobile: '13800138002',
-    account_id: 'xhs_001',
-    holder_name: '李四',
-    operator_id: 2,
-    platform: 1,
-    group_id: 2,
-    status: 1,
-    is_pause: 1,
-    fans_number: 890000,
-    like_number: 670000,
-    collect_number: 89000,
-    view_number: 3200000,
-    view_chain: -5.2,
-    like_chain: 15.7,
-    ai_evaluation: {
-      status: 2,
-      text: '表现中等 | 建议优化',
-      look_chain: -12.5,
-      like_chain: 8.3,
-    },
-    operator: {
-      id: 2,
-      name: '王运营',
-    },
-    group: {
-      id: 2,
-      name: '小红书组',
-    },
-  },
-  {
-    id: 3,
-    name: '抖音美食号',
-    mobile: '13800138003',
-    account_id: 'douyin_002',
-    holder_name: '王五',
-    operator_id: 1,
-    platform: 0,
-    group_id: 1,
-    status: 0,
-    is_pause: 0,
-    fans_number: 0,
-    like_number: 0,
-    collect_number: 0,
-    view_number: 0,
-    view_chain: 0,
-    like_chain: 0,
-    ai_evaluation: {
-      status: 3,
-      text: '表现较差 | 建议整改',
-      look_chain: -12.5,
-      like_chain: -8.3,
-    },
-    operator: {
-      id: 1,
-      name: '李运营',
-    },
-    group: {
-      id: 1,
-      name: '抖音组',
-    },
-  },
-  {
-    id: 4,
-    name: '小红书穿搭号',
-    mobile: '13800138004',
-    account_id: 'xhs_002',
-    holder_name: '赵六',
-    operator_id: 2,
-    platform: 1,
-    group_id: 2,
-    status: 2,
-    is_pause: 0,
-    fans_number: 450000,
-    like_number: 320000,
-    collect_number: 23000,
-    view_number: 1800000,
-    view_chain: -12.8,
-    like_chain: -8.5,
-    operator: {
-      id: 2,
-      name: '王运营',
-    },
-    group: {
-      id: 2,
-      name: '小红书组',
-    },
-  },
-  {
-    id: 5,
-    name: '抖音科技号',
-    mobile: '13800138005',
-    account_id: 'douyin_003',
-    holder_name: '钱七',
-    operator_id: 3,
-    platform: 0,
-    group_id: 3,
-    status: 1,
-    is_pause: 0,
-    fans_number: 2100000,
-    like_number: 1500000,
-    collect_number: 120000,
-    view_number: 8900000,
-    view_chain: 25.6,
-    like_chain: 18.9,
-    operator: {
-      id: 3,
-      name: '陈运营',
-    },
-    group: {
-      id: 3,
-      name: '科技组',
-    },
-  },
-];
-
 const getOverviewData = async () => {
-  // 使用模拟数据
-  overviewData.value = {
-    total_number: 5,
-    total_fans_number: 4690000,
-    total_like_number: 3380000,
-    total_collect_number: 1230000,
-    in_the_past_seven_days_view_number: 19500000,
-  };
-
-  // 如果有真实接口，可以这样调用：
-  // const { code, data } = await getAccountBoardOverview();
-  // if (code === 200) {
-  //   overviewData.value = data;
-  // }
+  const { code, data } = await getAccountBoardOverview();
+  if (code === 200) {
+    overviewData.value = data;
+  }
 };

 const getData = async () => {
-  // 使用模拟数据
-  dataSource.value = mockData;
-  pageInfo.total = mockData.length;
-
-  // 如果有真实接口，可以这样调用：
-  // const { code, data } = await getAccountBoardList(query.value);
-  // if (code === 200) {
-  //   dataSource.value = data.data;
-  //   pageInfo.total = data.total;
-  // }
+  const { code, data } = await getAccountBoardList(query.value);
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data.total;
+  }
 };

 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
  getData();
 };

 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
+  pageInfo.value.pageSize = pageSize;
  reload();
 };

@ -277,15 +112,15 @@ const handleSearch = () => {
 };

 const reload = () => {
-  pageInfo.page = 1;
+  pageInfo.value.page = 1;
  getData();
 };

 const handleReset = () => {
  selectedRowKeys.value = [];
-  pageInfo.page = 1;
-  pageInfo.pageSize = 20;
-  pageInfo.total = 0;
+  pageInfo.value.page = 1;
+  pageInfo.value.pageSize = 20;
+  pageInfo.value.total = 0;
  query.value = cloneDeep(INITIAL_QUERY);
  accountTableRef.value?.resetTable();
  reload();
@ -293,7 +128,6 @@ const handleReset = () => {

 const handleSelectionChange = (selectedRows) => {
  selectedRowKeys.value = selectedRows;
-  console.log('选中的账号:', selectedRowKeys.value);
 };

 const handleExport = () => {
@ -302,7 +136,7 @@ const handleExport = () => {
  }).then((res) => {
    const { code, data } = res;
    if (code === 200) {
-      console.log(data.download_url);
+      window.open(data.download_url, '_blank');
    }
  });
 };
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
@ -41,7 +41,6 @@
              </span>
            </div>
          </template>
-          <!-- 其他项占1/4宽度 -->
          <template v-else>
            <div class="flex items-center mb-4px">
              <p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
@ -50,7 +49,6 @@
              </a-tooltip>
            </div>
            <p class="cts">
-              <!-- 状态特殊渲染 -->
              <template v-if="field.type === 'status'">
                <span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
                <span v-else style="color: #ff4d4f">异常</span>
@ -63,7 +61,6 @@
                  {{ detailData[field.dataIndex] }}%
                </span>
              </template>
-              <!-- 普通字段，支持多层key -->
              <template v-else>
                {{ formatTableField(field, detailData, true) }}
              </template>
@ -89,38 +86,39 @@ import icon4 from '@/assets/img/media-account/icon-success.png';

 const route = useRoute();
 const id = route.params.id;
-const detailData = ref({
-  id: 1,
-  name: '抖音官方账号',
-  mobile: '13800138001',
-  account_id: 'douyin_001',
-  holder_name: '张三',
-  operator_id: 1,
-  platform: 0,
-  group_id: 1,
-  status: 1,
-  is_pause: 0,
-  fans_number: 1250000,
-  like_number: 890000,
-  collect_number: 45000,
-  view_number: 5600000,
-  view_chain: -12.5,
-  like_chain: 8.3,
-  ai_evaluation: {
-    status: 1,
-    text: '表现优质 | 建议保持',
-    look_chain: 12.5,
-    like_chain: 8.3,
-  },
-  operator: {
-    id: 1,
-    name: '李运营',
-  },
-  group: {
-    id: 1,
-    name: '抖音组',
-  },
-});
+const detailData = ref({});
+// const detailData = ref({
+//   id: 1,
+//   name: '抖音官方账号',
+//   mobile: '13800138001',
+//   account_id: 'douyin_001',
+//   holder_name: '张三',
+//   operator_id: 1,
+//   platform: 0,
+//   group_id: 1,
+//   status: 1,
+//   is_pause: 0,
+//   fans_number: 1250000,
+//   like_number: 890000,
+//   collect_number: 45000,
+//   view_number: 5600000,
+//   view_chain: -12.5,
+//   like_chain: 8.3,
+//   ai_evaluation: {
+//     status: 1,
+//     text: '表现优质 | 建议保持',
+//     look_chain: 12.5,
+//     like_chain: 8.3,
+//   },
+//   operator: {
+//     id: 1,
+//     name: '李运营',
+//   },
+//   group: {
+//     id: 1,
+//     name: '抖音组',
+//   },
+// });

 const getDetail = async () => {
  const { code, data } = await getAccountBoardDetail(id);
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
@ -5,19 +5,21 @@

 export const INITIAL_QUERY = {
  name: '',
-  publish_date: [],
+  published_at: [],
 };

 export const TABLE_COLUMNS = [
  {
    title: '笔记标题',
-    dataIndex: 'name',
+    dataIndex: 'title',
    width: 240,
+    fixed: 'left',
  },
  {
    title: '发布日期',
-    dataIndex: 'publish_date',
+    dataIndex: 'published_at',
    width: 160,
+    fixed: 'left',
  },
  {
    title: '曝光量',
@ -35,28 +37,28 @@ export const TABLE_COLUMNS = [
  },
  {
    title: '点赞量',
-    dataIndex: 'like_count',
+    dataIndex: 'like_number',
    width: 180,
    tooltip: '账号所有内容的总点赞数',
    align: 'right',
  },
  {
    title: '收藏量',
-    dataIndex: 'collect_count',
+    dataIndex: 'collect_number',
    width: 180,
    tooltip: '账号所有内容的总收藏数',
    align: 'right',
  },
  {
    title: '评论数',
-    dataIndex: 'comment_count',
+    dataIndex: 'comment_number',
    width: 180,
    tooltip: '账号所有内容的总评论数',
    align: 'right',
  },
  {
    title: '分享量',
-    dataIndex: 'share_count',
+    dataIndex: 'share_number',
    width: 180,
    tooltip: '账号所有内容的总转发数',
    align: 'right',
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@ -25,7 +25,7 @@
        <span class="label">发布日期</span>
        <a-space size="medium" class="w-240px">
          <a-range-picker
-            v-model="query.publish_date"
+            v-model="query.published_at"
            size="medium"
            allow-clear
            format="YYYY-MM-DD HH:mm"
@ -47,6 +47,9 @@
      </a-button>
    </div>
    <a-table :data="dataSource" row-key="id" :pagination="false" :scroll="{ x: '100%' }" class="w-100%" bordered>
+      <template #empty>
+        <NoData />
+      </template>
      <template #columns>
        <a-table-column
          v-for="column in TABLE_COLUMNS"
@ -62,7 +65,6 @@
        >
          <template #title>
            <div class="flex items-center">
-              <img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
              <span class="cts mr-4px">{{ column.title }}</span>
              <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
                <icon-question-circle class="tooltip-icon color-#737478" size="16" />
@ -71,8 +73,8 @@
          </template>

          <template #cell="{ record }">
-            <template v-if="column.dataIndex === 'publish_date'">
-              {{ exactFormatTime(record.publish_date) }}
+            <template v-if="column.dataIndex === 'published_at'">
+              {{ exactFormatTime(record.published_at) }}
            </template>
            <template v-else>
              {{ formatTableField(column, record, true) }}
@ -81,7 +83,7 @@
        </a-table-column>
      </template>
    </a-table>
-    <div class="pagination-box">
+    <div v-if="pageInfo.total > 0" class="pagination-box">
      <a-pagination
        :total="pageInfo.total"
        size="mini"
@ -101,14 +103,15 @@
 import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
 import { useRoute } from 'vue-router';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
+import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';

 const route = useRoute();
 const id = route.params.id;
 const dataSource = ref([]);
-const pageInfo = reactive({
+const pageInfo = ref({
  page: 1,
  pageSize: 20,
-  total: 100,
+  total: 0,
 });

 const query = ref(cloneDeep(INITIAL_QUERY));
@ -118,34 +121,34 @@ const handleSearch = () => {
 };

 const handleReset = () => {
-  pageInfo.page = 1;
-  pageInfo.pageSize = 20;
-  pageInfo.total = 0;
+  pageInfo.value.page = 1;
+  pageInfo.value.pageSize = 20;
+  pageInfo.value.total = 0;
  query.value = cloneDeep(INITIAL_QUERY);
  reload();
 };

 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
  getData();
 };

 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
+  pageInfo.value.pageSize = pageSize;
  reload();
 };

 const reload = () => {
-  pageInfo.page = 1;
+  pageInfo.value.page = 1;
  getData();
 };

 const getData = async () => {
-  // const { code, data } = await getAccountBoardList(query.value);
-  // if (code === 200) {
-  //   dataSource.value = data?.list || [];
-  //   pageInfo.total = data.total;
-  // }
+  const { code, data } = await getMediaAccountBoardWorks(query.value);
+  if (code === 200) {
+    dataSource.value = data?.data || [];
+    pageInfo.value.total = data.total;
+  }
 };

 onMounted(() => {
--- a/src/views/property-marketing/media-account/account-detail/constants.ts
+++ b/src/views/property-marketing/media-account/account-detail/constants.ts
@ -7,7 +7,7 @@ export const accountInfoFields = [
    { label: '账号名称', dataIndex: 'name' },
    { label: '项目分组', dataIndex: 'group.name' },
    { label: '状态', dataIndex: 'status', type: 'status' },
-    { label: '运营人员', dataIndex: 'operator.name' },
+    { label: '运营人员', dataIndex: 'operator_name' },
  ],
  [
    { label: 'AI评价', dataIndex: 'ai_evaluation' },