feat: 账号健康状态、统一组件逻辑

src/api/all/common.ts

@@ -6,10 +6,10 @@ import Http from '@/api';
 
 // 获取用户自定义列
 export const getCustomColumns = (params = {}) => {
-  return Http.get('/v1/user-custom-columns', params);
+  return Http.get('/v1/custom-columns', params);
 };
 
 // 保存用户自定义列
 export const updateCustomColumns = (params = {}) => {
-  return Http.put('/v1/user-custom-columns', params);
+  return Http.put('/v1/custom-columns', params);
 };

src/api/all/propertyMarketing.ts

@@ -19,16 +19,21 @@ export const fetchAccountOperators = (params = {}) => {
   return Http.get('/v1/media-account-operators/list', params);
 };
 
-// 投放账户运营人员分组-列表
-export const fetchPlacementAccountOperators = (params = {}) => {
-  return Http.get('/v1/placement-account-operators/list', params);
-};
-
 // 媒体账号-分页
 export const getMediaAccounts = (params = {}) => {
   return Http.get('/v1/media-accounts', params);
 };
 
+// 媒体账号-健康情况
+export const getMediaAccountsHealth = (params = {}) => {
+  return Http.get('/v1/media-accounts/health', params);
+};
+
+// 投放账号-健康情况
+export const getPlacementAccountsHealth = (params = {}) => {
+  return Http.get('/v1/placement-accounts/health', params);
+};
+
 // 媒体账号-添加
 export const postMediaAccounts = (params = {}) => {
   return Http.post('/v1/media-accounts', params);

src/components/custom-table-column-modal/index.vue

@@ -39,7 +39,7 @@
           已添加<span class="count">（{{ checkColumns.length }}）</span>
         </span>
         <div class="checked-list">
-          <div v-for="(groupName, index) in requiredGroupNames" :key="index" class="checked-item">
+          <div v-for="(groupName, index) in requiredGroupNames" :key="index" class="checked-item !cursor-default">
             <div class="flex items-center">
               <img :src="icon1" alt="icon" class="mr-8px" width="16" height="16" />
               <span>{{ groupName }}</span>
@@ -117,48 +117,13 @@ const close = () => {
 };
 
 const initData = async () => {
-  const data = {
+  const { code, data } = await getCustomColumns({ type: props.type });
-    selected_columns: [],
+  if (code === 200) {
-    groups: [
-      {
-        label: '基础信息',
-        is_require: 1,
-        columns: [
-          { label: '账号名称', value: 'account_name', is_require: 1 },
-          { label: '项目分组', value: 'project_group', is_require: 1 },
-          { label: '状态', value: 'status', is_require: 1 },
-          { label: '运营人员', value: 'operator', is_require: 1 },
-          { label: 'AI评价', value: 'ai_score', is_require: 1 },
-        ],
-      },
-      {
-        label: '分析数据',
-        is_require: 0,
-        columns: [
-          { label: '粉丝量', value: 'fans', is_require: 0 },
-          { label: '总赞藏数', value: 'total_likes', is_require: 0 },
-          { label: '观看量', value: 'views', is_require: 0 },
-          { label: '观看量环比', value: 'views_ratio', is_require: 0 },
-          { label: '点赞量', value: 'likes', is_require: 0 },
-          { label: '点赞量环比', value: 'likes_ratio', is_require: 0 },
-          { label: '最新内容标题/日期', value: 'latest_content', is_require: 0 },
-          { label: '最新作品观看数', value: 'latest_views', is_require: 0 },
-          { label: '最新作品日增长', value: 'latest_growth', is_require: 0 },
-          { label: '次新内容标题/日期', value: 'second_latest_content', is_require: 0 },
-          { label: '次新作品观看数', value: 'second_latest_views', is_require: 0 },
-          { label: '次新作品日增长', value: 'second_latest_growth', is_require: 0 },
-        ],
-      },
-    ],
-  };
-
-  // const { code, data } = await getCustomColumns({ type: props.type });
-  // if (code === 0) {
     const { selected_columns, groups } = data;
     dataSource.value = groups;
     setDefaultCheckColumns(groups, selected_columns);
     allColumns.value = groups.flatMap((group) => group.columns);
-  // }
+  }
 };
 
 const isCheck = (option) => {

src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts

@@ -2,38 +2,51 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-28 10:33:06
  */
-export const TABLE_COLUMNS = [
+export const getDefaultColumns = (type = 'week') => {
+  const isWeek = type === 'week';
+  const viewChain = isWeek ? 'week_view_chain' : 'month_view_chain';
+  const likeChain = isWeek ? 'week_like_chain' : 'month_like_chain';
+  const viewChainText = isWeek ? '近7天观看量环比' : '近30天观看量环比';
+  const likeChainText = isWeek ? '近7天点赞量环比' : '近30天点赞量环比';
+
+  return [
     {
       title: '账号名称',
       dataIndex: 'name',
+      prop: 'name',
       width: 180,
       fixed: 'left',
     },
     {
       title: '项目分组',
       dataIndex: 'group.name',
+      prop: 'group',
       width: 180,
       fixed: 'left',
     },
     {
       title: '状态',
       dataIndex: 'status',
+      prop: 'status',
       width: 180,
       fixed: 'left',
     },
     {
       title: '运营人员',
       dataIndex: 'operator.name',
+      prop: 'operator',
       width: 180,
     },
     {
       title: 'AI评价',
-    dataIndex: 'ai_evaluation',
+      dataIndex: 'ai_evaluate',
+      prop: 'ai_evaluate',
       width: 260,
     },
     {
       title: '粉丝量',
       dataIndex: 'fans_number',
+      prop: 'fans_number',
       width: 180,
       tooltip: '账号当前粉丝总数',
       align: 'right',
@@ -44,6 +57,7 @@ export const TABLE_COLUMNS = [
     {
       title: '总赞藏数',
       dataIndex: 'like_collect_number',
+      prop: 'like_collect_number',
       width: 180,
       tooltip: '账号所有内容的点赞和收藏总数',
       align: 'right',
@@ -54,6 +68,7 @@ export const TABLE_COLUMNS = [
     {
       title: '观看量',
       dataIndex: 'view_number',
+      prop: 'view_number',
       width: 180,
       tooltip: '账号所有内容的总观看次数',
       align: 'right',
@@ -62,8 +77,9 @@ export const TABLE_COLUMNS = [
       },
     },
     {
-    title: '观看量环比',
+      title: viewChainText,
-    dataIndex: 'view_chain',
+      dataIndex: viewChain,
+      prop: viewChain,
       width: 180,
       tooltip: '相比上一周期的观看量变化百分比',
       align: 'right',
@@ -75,6 +91,7 @@ export const TABLE_COLUMNS = [
     {
       title: '点赞量',
       dataIndex: 'like_number',
+      prop: 'like_number',
       width: 180,
       tooltip: '账号所有内容的总点赞数',
       align: 'right',
@@ -83,8 +100,9 @@ export const TABLE_COLUMNS = [
       },
     },
     {
-    title: '点赞量环比',
+      title: likeChainText,
-    dataIndex: 'like_chain',
+      dataIndex: likeChain,
+      prop: likeChain,
       width: 180,
       tooltip: '相比上一周期的点赞量变化百分比',
       align: 'right',
@@ -95,13 +113,15 @@ export const TABLE_COLUMNS = [
     },
     {
       title: '最新内容标题/日期',
-    dataIndex: 'like_chain1',
+      dataIndex: 'newest_work_title_and_publish_time',
+      prop: 'newest_work_title_and_publish_time',
       width: 240,
       tooltip: '最新发布内容的标题和发布日期',
     },
     {
       title: '最新作品观看数',
-    dataIndex: 'latest_view_number',
+      dataIndex: 'newest_work_view_number',
+      prop: 'newest_work_view_number',
       width: 180,
       tooltip: '最新发布内容的观看次数',
       align: 'right',
@@ -111,7 +131,8 @@ export const TABLE_COLUMNS = [
     },
     {
       title: '最新作品日增长',
-    dataIndex: 'latest_daily_growth',
+      dataIndex: 'newest_work_view_grow_number',
+      prop: 'newest_work_view_grow_number',
       width: 180,
       tooltip: '最新作品每日观看量的增长情况',
       align: 'right',
@@ -121,12 +142,14 @@ export const TABLE_COLUMNS = [
     },
     {
       title: '次新内容标题/日期',
-    dataIndex: 'like_chain4',
+      dataIndex: 'second_new_work_title_and_publish_time',
+      prop: 'second_new_work_title_and_publish_time',
       width: 240,
     },
     {
       title: '次新作品观看数',
-    dataIndex: 'second_latest_view_number',
+      dataIndex: 'second_new_work_view_number',
+      prop: 'second_new_work_view_number',
       width: 180,
       tooltip: '倒数第二个发布内容的观看次数',
       align: 'right',
@@ -136,7 +159,8 @@ export const TABLE_COLUMNS = [
     },
     {
       title: '次新作品日增长',
-    dataIndex: 'second_latest_daily_growth',
+      dataIndex: 'second_new_work_view_grow_number',
+      prop: 'second_new_work_view_grow_number',
       width: 180,
       tooltip: '倒数第二个作品每日观看量的增长情况',
       align: 'right',
@@ -150,4 +174,5 @@ export const TABLE_COLUMNS = [
       width: 100,
       fixed: 'right',
     },
-];
+  ];
+};

src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue

@@ -47,7 +47,7 @@
     </template>
     <template #columns>
       <a-table-column
-        v-for="column in TABLE_COLUMNS"
+        v-for="column in tableColumns"
         :key="column.dataIndex"
         :data-index="column.dataIndex"
         :fixed="column.fixed"
@@ -60,7 +60,7 @@
       >
         <template #title>
           <div class="flex items-center">
-            <img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
+            <img v-if="column.dataIndex === 'ai_evaluate'" 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" />
@@ -78,18 +78,18 @@
             }}</span>
           </div>
         </template>
-        <template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
+        <template v-else-if="column.dataIndex === 'ai_evaluate'" #cell="{ record }">
           <div class="ai-evaluation-row flex">
             <img
               width="16"
               height="16"
-              :src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
+              :src="record.ai_evaluate?.status === 1 ? icon4 : record.ai_evaluate?.status === 2 ? icon3 : icon2"
               class="mr-8px icon"
             />
             <div>
-              <p class="cts">{{ record.ai_evaluation?.text }}</p>
+              <p class="cts">{{ record.ai_evaluate?.advise }}</p>
               <p class="cts text-12px lh-20px !color-#939499">
-                {{ `观看: ${record.ai_evaluation?.look_chain}%  点赞: ${record.ai_evaluation?.like_chain}%` }}
+                {{ `观看: ${record.week_view_chain}%  点赞: ${record.week_like_chain}%` }}
               </p>
             </div>
           </div>
@@ -101,14 +101,24 @@
           <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
         </template>
 
-        <template v-else-if="['view_chain', 'like_chain'].includes(column.dataIndex)" #cell="{ record }">
+        <template
+          v-else-if="
+            ['week_view_chain', 'month_view_chain', 'week_like_chain', 'month_like_chain'].includes(column.dataIndex)
+          "
+          #cell="{ record }"
+        >
           <div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
             <icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
             <icon-arrow-down v-else size="16" />
             {{ formatTableField(column, record) }}
           </div>
         </template>
-        <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
+        <template
+          v-else-if="
+            ['newest_work_title_and_publish_time', 'second_new_work_title_and_publish_time'].includes(column.dataIndex)
+          "
+          #cell="{ record }"
+        >
           <p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
           <p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
         </template>
@@ -120,16 +130,17 @@
     </template>
   </a-table>
 
-  <CustomTableColumnModal ref="customTableColumnModalRef" type="media_account" @success="onCustomColumnSuccess" />
+  <CustomTableColumnModal ref="customTableColumnModalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { STATUS_LIST } from '../../constants';
+import { getCustomColumns } from '@/api/all/common';
+import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
 import { formatTableField, formatNumberShow } from '@/utils/tools';
-import { TABLE_COLUMNS } from './constants';
+import { getDefaultColumns } from './constants';
 import CustomTableColumnModal from '@/components/custom-table-column-modal';
 
 import icon1 from '@/assets/img/media-account/icon-custom.png';
@@ -147,11 +158,14 @@ const props = defineProps({
 
 const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
 
+const CUSTOM_COLUMN_TYPE = 'media_account';
+
 const router = useRouter();
 
 const selectedItems = ref([]);
 const tableRef = ref(null);
 const customTableColumnModalRef = ref(null);
+const selectedColumns = ref([]);
 
 const checkedAll = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@@ -165,6 +179,18 @@ const rowSelection = computed(() => ({
   showCheckedAll: true,
 }));
 
+const tableColumns = computed(() => {
+  const _result = [];
+  const _columns = getDefaultColumns();
+  selectedColumns.value.forEach((item) => {
+    const _column = _columns.find((_item) => _item.prop === item);
+    if (_column) {
+      _result.push(_column);
+    }
+  });
+  return _result;
+});
+
 const handleSelectAll = (checked) => {
   if (checked) {
     selectedItems.value = props.dataSource.map((item) => item.id);
@@ -201,13 +227,26 @@ const openCustomColumn = () => {
   customTableColumnModalRef.value.open();
 };
 
-const onCustomColumnSuccess = (selectedColumns) => {
+const onCustomColumnSuccess = (columns) => {
-  console.log(selectedColumns);
+  selectedColumns.value = columns;
+};
+
+const getSelectedColumns = () => {
+  getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
+    const { code, data } = res;
+    if (code === 200) {
+      selectedColumns.value = data.selected_columns;
+    }
+  });
 };
 
 defineExpose({
   resetTable,
 });
+
+onMounted(() => {
+  getSelectedColumns();
+});
 </script>
 
 <style scoped lang="scss">

src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue

@@ -19,27 +19,19 @@
       <div class="filter-row-item flex items-center">
         <span class="label">分组</span>
         <a-space class="w-200px">
-          <group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
+          <GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">状态</span>
         <a-space class="w-180px">
-          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <StatusSelect v-model="query.status" @change="handleSearch" />
-            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
-              item.text
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
-            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
-              item.name
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
 
@@ -62,8 +54,9 @@
 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
 import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
-import GroupSelect from '../group-select/index.vue';
+import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
-import { STATUS_LIST } from '@/views/property-marketing/media-account/account-dashboard/constants';
+import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
+import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
 
 const props = defineProps({
   query: {
@@ -100,8 +93,8 @@ const getOperators = async () => {
 };
 
 onMounted(() => {
-  // getGroups();
+  getGroups();
-  // getOperators();
+  getOperators();
 });
 </script>
 

src/views/property-marketing/media-account/account-dashboard/constants.ts

@@ -43,54 +43,3 @@ export const INITIAL_QUERY = {
   column: '',
   order: '',
 };
-
-export enum EnumStatus {
-  NORMAL = 1,
-  PAUSE = 3,
-  UNAUTHORIZED = 0,
-  ABNORMAL = 2,
-  ABNORMAL_LOGIN = 4,
-  ABNORMAL_REQUEST = 5,
-  ABNORMAL_FREEZE = 6,
-}
-
-export const STATUS_LIST = [
-  {
-    text: '正常',
-    label: '正常',
-    value: EnumStatus.NORMAL,
-  },
-  {
-    text: '暂停同步',
-    label: '暂停同步',
-    value: EnumStatus.PAUSE,
-  },
-  {
-    text: '未授权',
-    label: '未授权',
-    value: EnumStatus.UNAUTHORIZED,
-  },
-  {
-    text: '异常',
-    label: '异常',
-    value: EnumStatus.ABNORMAL,
-  },
-  {
-    text: '异常-登录状态失效',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_LOGIN,
-    tooltip: '登录状态失效，需重新扫码授权',
-  },
-  {
-    text: '异常-请求过于频繁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_REQUEST,
-    tooltip: '请求过于频繁，需等待24小时后重试',
-  },
-  {
-    text: '异常-账号被冻结/封禁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_FREEZE,
-    tooltip: '账号被冻结/封禁',
-  },
-];

src/views/property-marketing/media-account/account-manage/components/account-table/index.vue

@@ -98,7 +98,8 @@
 
 <script setup>
 import { defineProps, ref, computed } from 'vue';
-import { STATUS_LIST, EnumStatus } from '../../constants';
+import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '../status-box';
 import ReauthorizeAccountModal from '../reauthorize-account-modal';

src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue

@@ -123,8 +123,8 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import TagSelect from '../tag-select';
+import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
-import GroupSelect from '../group-select';
+import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
 import AuthorizedAccountModal from '../authorized-account-modal';
 import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
@@ -205,26 +205,18 @@ const confirmBtnText = computed(() => {
 
 // 获取分组数据
 const getGroups = async () => {
-  try {
   const { code, data } = await fetchAccountGroups();
   if (code === 200) {
     groupOptions.value = data;
   }
-  } catch (error) {
-    console.error('获取分组列表失败:', error);
-  }
 };
 
 // 获取标签数据
 const getTags = async () => {
-  try {
   const { code, data } = await fetchAccountTags();
   if (code === 200) {
     tagOptions.value = data;
   }
-  } catch (error) {
-    console.error('获取标签列表失败:', error);
-  }
 };
 
 function handleUpload(option) {

src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue

@@ -47,7 +47,7 @@
             <a-table-column title="选择分组" data-index="group_id">
               <template #cell="{ record }">
                 <div class="flex items-center w-100%">
-                  <a-select v-model="record.group_id" :options="groupOptions" placeholder="请选择..." />
+                  <GroupSelect v-model="record.group_id" :options="groupOptions" />
                 </div>
               </template>
             </a-table-column>
@@ -65,6 +65,7 @@
 <script setup>
 import { ref, reactive } from 'vue';
 import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
+import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
 
 import icon1 from '@/assets/img/icon-question.png';
 

src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue

@@ -26,11 +26,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">状态</span>
         <a-space class="w-180px">
-          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <StatusSelect v-model="query.status" @change="handleSearch" />
-            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
-              item.text
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
@@ -46,11 +42,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
-            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
-              item.name
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
     </div>
@@ -58,13 +50,13 @@
       <div class="filter-row-item flex items-center">
         <span class="label">分组</span>
         <a-space class="w-200px">
-          <group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
+          <GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">标签</span>
         <a-space class="w-320px">
-          <tag-select v-model="query.tag_ids" :options="tags" @change="handleSearch" />
+          <TagSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
         </a-space>
       </div>
       <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
@@ -86,13 +78,12 @@
 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
 import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
-import TagSelect from '../tag-select/index.vue';
+import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
-import GroupSelect from '../group-select/index.vue';
+import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
-import {
+import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
-  INITIAL_QUERY,
+import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
-  PLATFORM_LIST,
+
-  STATUS_LIST,
+import { INITIAL_QUERY, PLATFORM_LIST } from '@/views/property-marketing/media-account/account-manage/constants';
-} from '@/views/property-marketing/media-account/account-manage/constants';
 
 const props = defineProps({
   query: {

src/views/property-marketing/media-account/account-manage/components/status-box/index.vue

@@ -13,7 +13,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { STATUS_LIST, EnumStatus } from '../../constants';
+import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
 
 import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
 import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';

src/views/property-marketing/media-account/account-manage/constants.ts

@@ -27,60 +27,3 @@ export const PLATFORM_LIST = [
     value: 1,
   },
 ];
-
-export enum EnumStatus {
-  UNAUTHORIZED = 0,
-  NORMAL = 1,
-  ABNORMAL = 2,
-  PAUSE = 3,
-  ABNORMAL_LOGIN = 4,
-  ABNORMAL_REQUEST = 5,
-  ABNORMAL_FREEZE = 6,
-  ABNORMAL_MISSING = 7,
-}
-
-export const STATUS_LIST = [
-  {
-    text: '正常',
-    label: '正常',
-    value: EnumStatus.NORMAL,
-  },
-  {
-    text: '暂停同步',
-    label: '暂停同步',
-    value: EnumStatus.PAUSE,
-  },
-  {
-    text: '未授权',
-    label: '未授权',
-    value: EnumStatus.UNAUTHORIZED,
-  },
-  {
-    text: '异常',
-    label: '异常',
-    value: EnumStatus.ABNORMAL,
-  },
-  {
-    text: '数据缺失',
-    label: '数据缺失',
-    value: EnumStatus.ABNORMAL_MISSING,
-  },
-  {
-    text: '异常-登录状态失效',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_LOGIN,
-    tooltip: '登录状态失效，需重新扫码授权',
-  },
-  {
-    text: '异常-请求过于频繁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_REQUEST,
-    tooltip: '请求过于频繁，需等待24小时后重试',
-  },
-  {
-    text: '异常-账号被冻结/封禁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_FREEZE,
-    tooltip: '账号被冻结/封禁',
-  },
-];

src/views/property-marketing/media-account/account-manage/index.vue

@@ -32,8 +32,9 @@
     </div>
 
     <div
+      v-if="dataSource.length > 0"
       class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
+      :class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
     >
       <div class="flex items-center">
         <div class="flex items-center">
@@ -55,14 +56,8 @@
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
           </template>
           <template v-else>
-            <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
+            <img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
-            <span class="label">
+            <span class="label"> {{ tipLabel }} </span>
-              {{
-                isNormalStatus
-                  ? '太棒啦！所有账号都在正常运行。'
-                  : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
-              }}
-            </span>
           </template>
         </div>
       </div>
@@ -71,7 +66,7 @@
         <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
       </template>
       <div v-else>
-        <a-space v-if="isAbnormalStatus" class="flex items-center">
+        <a-space v-if="isAbNormalStatus" class="flex items-center">
           <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
             <template #default>查看异常账号</template>
           </a-button>
@@ -126,7 +121,7 @@ import BatchTagModal from './components/batch-tag-modal';
 import BatchGroupModal from './components/batch-group-modal';
 
 import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
-import { getMediaAccounts } from '@/api/all/propertyMarketing';
+import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon2 from '@/assets/img/media-account/icon-group.png';
@@ -143,24 +138,61 @@ const batchTagModalRef = ref(null);
 const batchGroupModalRef = ref(null);
 const filterBlockRef = ref(null);
 
-const tipStatus = ref(2);
 const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
+const healthData = ref({});
+
+const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
 
-const isNormalStatus = computed(() => tipStatus.value === 1);
-const isAbnormalStatus = computed(() => tipStatus.value === 2);
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
 );
 
+const tipLabel = computed(() => {
+  if (!isAbNormalStatus.value) {
+    return '太棒啦！所有账号都在正常运行。';
+  }
+
+  const {
+    abnormal_number = 0,
+    login_invalid_number = 0,
+    too_many_requests_number = 0,
+    account_frozen_number = 0,
+  } = healthData.value;
+
+  // 定义异常类型映射
+  const abnormalTypes = [
+    { count: login_invalid_number, label: 'cookie过期' },
+    { count: too_many_requests_number, label: '已请求频繁' },
+    { count: account_frozen_number, label: '账号被封' },
+  ];
+
+  // 过滤出有异常的项并格式化
+  const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
+
+  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+});
+
 onMounted(() => {
   getData();
 });
 
-const getData = async () => {
+const getData = () => {
+  getHealthData();
+  getAccountData();
+};
+
+const getHealthData = async () => {
+  const { code, data } = await getMediaAccountsHealth();
+  if (code === 200) {
+    healthData.value = data;
+    console.log(healthData.value);
+  }
+};
+const getAccountData = async () => {
   const { page, pageSize } = pageInfo.value;
   const { code, data } = await getMediaAccounts({
     page,
@@ -217,12 +249,12 @@ const handleChangeAll = (checked) => {
 };
 const handleBatchDelete = () => {
   const ids = selectedItems.value.map((item) => item.id);
-  const names = selectedItems.value.map((item) => `“${item.name || '-'}”`).join('，');
+  const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
   deleteAccountRef.value?.open({ id: ids, name: names });
 };
 const handleDelete = (item) => {
   const { id, name } = item;
-  deleteAccountRef.value?.open({ id, name: `“${name || '-'}”` });
+  deleteAccountRef.value?.open({ id, name: `"${name || '-'}"` });
 };
 const handleCloseTip = () => {
   selectedItems.value = [];

src/views/property-marketing/media-account/components/group-select/index.vue

@@ -51,7 +51,6 @@ watch(
   },
   { immediate: true },
 );
-
 // 监听内部值变化，向外部发送更新
 watch(selectedGroups, (newVal) => {
   emits('update:modelValue', newVal);

src/views/property-marketing/media-account/components/operator-select/index.vue

@@ -4,7 +4,7 @@
 -->
 <template>
   <a-select
-    v-model="selectedGroups"
+    v-model="selectedOperators"
     :multiple="multiple"
     size="medium"
     :placeholder="placeholder"
@@ -27,7 +27,7 @@ const props = defineProps({
   },
   multiple: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   placeholder: {
     type: String,
@@ -41,24 +41,24 @@ const props = defineProps({
 
 const emits = defineEmits(['update:modelValue', 'change']);
 
-const selectedGroups = ref(props.multiple ? [] : '');
+const selectedOperators = ref(props.multiple ? [] : '');
 
 // 监听外部传入的值变化
 watch(
   () => props.modelValue,
   (newVal) => {
-    selectedGroups.value = newVal;
+    selectedOperators.value = newVal;
   },
   { immediate: true },
 );
 
 // 监听内部值变化，向外部发送更新
-watch(selectedGroups, (newVal) => {
+watch(selectedOperators, (newVal) => {
   emits('update:modelValue', newVal);
 });
 
 const handleChange = (value) => {
-  selectedGroups.value = value;
+  selectedOperators.value = value;
   emits('change', value);
 };
 </script>

src/views/property-marketing/media-account/components/status-select/constants.ts

@@ -0,0 +1,60 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-07-04 11:18:11
+ */
+export enum EnumStatus {
+  UNAUTHORIZED = 0,
+  NORMAL = 1,
+  ABNORMAL = 2,
+  PAUSE = 3,
+  ABNORMAL_LOGIN = 4,
+  ABNORMAL_REQUEST = 5,
+  ABNORMAL_FREEZE = 6,
+  ABNORMAL_MISSING = 7,
+}
+
+export const STATUS_LIST = [
+  {
+    text: '正常',
+    label: '正常',
+    value: EnumStatus.NORMAL,
+  },
+  {
+    text: '暂停同步',
+    label: '暂停同步',
+    value: EnumStatus.PAUSE,
+  },
+  {
+    text: '未授权',
+    label: '未授权',
+    value: EnumStatus.UNAUTHORIZED,
+  },
+  {
+    text: '异常',
+    label: '异常',
+    value: EnumStatus.ABNORMAL,
+  },
+  {
+    text: '数据缺失',
+    label: '数据缺失',
+    value: EnumStatus.ABNORMAL_MISSING,
+  },
+  {
+    text: '异常-登录状态失效',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_LOGIN,
+    tooltip: '登录状态失效，需重新扫码授权',
+  },
+  {
+    text: '异常-请求过于频繁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_REQUEST,
+    tooltip: '请求过于频繁，需等待24小时后重试',
+  },
+  {
+    text: '异常-账号被冻结/封禁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_FREEZE,
+    tooltip: '账号被冻结/封禁',
+  },
+];

src/views/property-marketing/media-account/components/status-select/index.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <a-select
+    v-model="selectedStatus"
+    :multiple="multiple"
+    size="medium"
+    :placeholder="placeholder"
+    allow-clear
+    @change="handleChange"
+  >
+    <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
+      {{ item.text }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { STATUS_LIST } from './constants';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '全部',
+  },
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const selectedStatus = ref(props.multiple ? [] : '');
+
+// 监听外部传入的值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedStatus.value = newVal;
+  },
+  { immediate: true },
+);
+// 监听内部值变化，向外部发送更新
+watch(selectedStatus, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+const handleChange = (value) => {
+  selectedStatus.value = value;
+  emits('change', value);
+};
+</script>

src/views/property-marketing/put-account/account-data/components/board-table/constants.ts

@@ -6,29 +6,33 @@ export const TABLE_COLUMNS = [
   {
     title: '账户名称',
     dataIndex: 'name',
+    prop: 'name',
     width: 180,
     fixed: 'left',
   },
-  {
+  // {
-    title: '项目分组',
+  //   title: '项目分组',
-    dataIndex: 'group.name',
+  //   dataIndex: 'group.name',
-    width: 180,
+  //   width: 180,
-    fixed: 'left',
+  //   fixed: 'left',
-  },
+  // },
   {
     title: '状态',
     dataIndex: 'status',
+    prop: 'status',
     width: 180,
     fixed: 'left',
   },
   {
     title: '运营人员',
     dataIndex: 'operator.name',
+    prop: 'operator',
     width: 180,
   },
   {
     title: '账户总消耗',
     dataIndex: 'total_consumption',
+    prop: 'total_consumption',
     width: 180,
     tooltip: '账号总消耗',
     prefix: '¥',
@@ -40,6 +44,7 @@ export const TABLE_COLUMNS = [
   {
     title: '账户余额',
     dataIndex: 'balance',
+    prop: 'balance',
     width: 180,
     tooltip: '账号余额',
     prefix: '¥',
@@ -51,11 +56,13 @@ export const TABLE_COLUMNS = [
   {
     title: 'AI评价',
     dataIndex: 'ai_evaluation',
+    prop: 'ai_evaluation',
     width: 260,
   },
   {
     title: 'ROI',
     dataIndex: 'roi',
+    prop: 'roi',
     width: 180,
     tooltip: '账号ROI',
     align: 'right',
@@ -66,6 +73,7 @@ export const TABLE_COLUMNS = [
   {
     title: 'ROI环比',
     dataIndex: 'roi_chain',
+    prop: 'roi_chain',
     width: 180,
     tooltip: '相比上一周期的ROI变化百分比',
     align: 'right',
@@ -77,6 +85,7 @@ export const TABLE_COLUMNS = [
   {
     title: 'CPA',
     dataIndex: 'cpa',
+    prop: 'cpa',
     width: 180,
     tooltip: '账号CPA',
     align: 'right',
@@ -87,6 +96,7 @@ export const TABLE_COLUMNS = [
   {
     title: 'CPA环比',
     dataIndex: 'roi_chain',
+    prop: 'roi_chain',
     width: 180,
     tooltip: '相比上一周期的CPA变化百分比',
     align: 'right',
@@ -98,6 +108,7 @@ export const TABLE_COLUMNS = [
   {
     title: '转化数',
     dataIndex: 'conversion_number',
+    prop: 'conversion_number',
     width: 180,
     tooltip: '账号转化数',
     align: 'right',
@@ -108,6 +119,7 @@ export const TABLE_COLUMNS = [
   {
     title: '转化数环比',
     dataIndex: 'conversion_chain',
+    prop: 'conversion_chain',
     width: 180,
     tooltip: '相比上一周期的转化数变化百分比',
     align: 'right',
@@ -119,6 +131,7 @@ export const TABLE_COLUMNS = [
   {
     title: 'CVR',
     dataIndex: 'conversion_rate',
+    prop: 'conversion_rate',
     width: 180,
     tooltip: '账号转化率',
     align: 'right',
@@ -129,6 +142,7 @@ export const TABLE_COLUMNS = [
   {
     title: 'CVR环比',
     dataIndex: 'conversion_rate_chain',
+    prop: 'conversion_rate_chain',
     width: 180,
     tooltip: '相比上一周期的CVR变化百分比',
     align: 'right',
@@ -140,12 +154,14 @@ export const TABLE_COLUMNS = [
   {
     title: '最新投放计划标题/日期',
     dataIndex: 'like_chain1',
+    prop: 'like_chain1',
     width: 260,
     tooltip: '最新发布内容的标题和发布日期',
   },
   {
     title: '最新投放计划表现',
     dataIndex: 'latest_plan_performance',
+    prop: 'latest_plan_performance',
     width: 180,
     tooltip: '最新投放计划表现',
     align: 'right',
@@ -157,6 +173,7 @@ export const TABLE_COLUMNS = [
   {
     title: '展示量',
     dataIndex: 'view_number',
+    prop: 'view_number',
     width: 180,
     tooltip: '账号所有内容的总展示次数',
     align: 'right',
@@ -167,6 +184,7 @@ export const TABLE_COLUMNS = [
   {
     title: '点击量',
     dataIndex: 'click_number',
+    prop: 'click_number',
     width: 180,
     tooltip: '账号所有内容的总点击次数',
     align: 'right',
@@ -177,6 +195,7 @@ export const TABLE_COLUMNS = [
   {
     title: '点击率',
     dataIndex: 'click_rate',
+    prop: 'click_rate',
     width: 180,
     tooltip: '账号所有内容的总点击率',
     align: 'right',
@@ -187,6 +206,7 @@ export const TABLE_COLUMNS = [
   {
     title: '平均点击成本',
     dataIndex: 'avg_click_cost',
+    prop: 'avg_click_cost',
     width: 180,
     tooltip: '账号所有内容的平均点击成本',
     align: 'right',
@@ -197,6 +217,7 @@ export const TABLE_COLUMNS = [
   {
     title: '千次展现费用',
     dataIndex: 'cost_per_thousand_views',
+    prop: 'cost_per_thousand_views',
     width: 180,
     prefix: '¥',
     tooltip: '账号所有内容的千次展现费用',
@@ -208,6 +229,7 @@ export const TABLE_COLUMNS = [
   {
     title: '平均转化成本',
     dataIndex: 'avg_conversion_cost',
+    prop: 'avg_conversion_cost',
     width: 180,
     prefix: '¥',
     tooltip: '账号所有内容的平均转化成本',
@@ -219,6 +241,7 @@ export const TABLE_COLUMNS = [
   {
     title: '深度转化数',
     dataIndex: 'deep_conversion_number',
+    prop: 'deep_conversion_number',
     width: 180,
     tooltip: '账号所有内容的总深度转化次数',
     align: 'right',
@@ -229,6 +252,7 @@ export const TABLE_COLUMNS = [
   {
     title: '深度转化率',
     dataIndex: 'deep_conversion_rate',
+    prop: 'deep_conversion_rate',
     width: 180,
     tooltip: '账号所有内容的总深度转化率',
     align: 'right',

src/views/property-marketing/put-account/account-data/components/board-table/index.vue

@@ -48,7 +48,7 @@
     </template>
     <template #columns>
       <a-table-column
-        v-for="column in getColumns()"
+        v-for="column in tableColumns"
         :key="column.dataIndex"
         :data-index="column.dataIndex"
         :fixed="column.fixed"
@@ -130,16 +130,17 @@
     </template>
   </a-table>
 
-  <CustomTableColumnModal ref="modalRef" type="placement_account" @success="onCustomColumnSuccess" />
+  <CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
-import { STATUS_LIST } from '../../constants';
+import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
 import { formatTableField } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
 import { useRouter } from 'vue-router';
 import CustomTableColumnModal from '@/components/custom-table-column-modal';
+import { getCustomColumns } from '@/api/all/common';
 
 import icon1 from '@/assets/img/media-account/icon-custom.png';
 import icon2 from '@/assets/img/media-account/icon-warn.png';
@@ -156,11 +157,14 @@ const props = defineProps({
 
 const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
 
+const CUSTOM_COLUMN_TYPE = 'placement_account';
+
 const router = useRouter();
 
 const selectedItems = ref([]);
 const tableRef = ref(null);
 const modalRef = ref(null);
+const selectedColumns = ref([]);
 
 const checkedAll = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
@@ -200,10 +204,18 @@ const handleSelect = (selectedRowKeys, selectedRows) => {
 const handleExport = () => {
   emit('export');
 };
-const getColumns = () => {
+
-  const columns = cloneDeep(TABLE_COLUMNS);
+const tableColumns = computed(() => {
-  return columns;
+  const _result = [];
-};
+  const _columns = cloneDeep(TABLE_COLUMNS);
+  selectedColumns.value.forEach((item) => {
+    const _column = _columns.find((_item) => _item.prop === item);
+    if (_column) {
+      _result.push(_column);
+    }
+  });
+  return _result;
+});
 
 const resetTable = () => {
   selectedItems.value = [];
@@ -214,10 +226,23 @@ const openCustomColumn = () => {
   modalRef.value.open();
 };
 
-const onCustomColumnSuccess = (selectedColumns) => {
+const onCustomColumnSuccess = (columns) => {
-  console.log(selectedColumns);
+  selectedColumns.value = columns;
 };
 
+const getSelectedColumns = () => {
+  getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
+    const { code, data } = res;
+    if (code === 200) {
+      selectedColumns.value = data.selected_columns;
+    }
+  });
+};
+
+onMounted(() => {
+  getSelectedColumns();
+});
+
 defineExpose({
   resetTable,
 });

src/views/property-marketing/put-account/account-data/components/filter-block/index.vue

@@ -7,7 +7,7 @@
   <div class="container px-24px">
     <div class="filter-row flex mb-20px">
       <div class="filter-row-item flex items-center">
-        <span class="label">账户名称</span>
+        <span class="label">{{ isAccountTab ? '账户名称' : '计划名称' }}</span>
         <a-space size="medium" class="w-240px">
           <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
             <template #prefix>
@@ -16,7 +16,7 @@
           </a-input>
         </a-space>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div v-if="!isAccountTab" class="filter-row-item flex items-center">
         <span class="label">计划分组</span>
         <a-space class="w-200px">
           <group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
@@ -25,21 +25,13 @@
       <div class="filter-row-item flex items-center">
         <span class="label">状态</span>
         <a-space class="w-180px">
-          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <StatusSelect v-model="query.status" @change="handleSearch" />
-            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
-              item.text
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
-            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
-              item.name
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
     </div>
@@ -75,14 +67,20 @@
 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
 import { getPlacementAccountProjectGroupsList, getPlacementAccountOperators } from '@/api/all/propertyMarketing';
-import GroupSelect from '../group-select/index.vue';
+import GroupSelect from '../group-select';
-import { STATUS_LIST } from '../../constants';
+
+import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
+import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
 
 const props = defineProps({
   query: {
     type: Object,
     required: true,
   },
+  isAccountTab: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emits = defineEmits('onSearch', 'onReset', 'update:query');
@@ -100,7 +98,6 @@ const handleReset = () => {
 };
 
 const getGroups = async () => {
-  console.log('getGroups');
   const { code, data } = await getPlacementAccountProjectGroupsList();
   if (code === 200) {
     groups.value = data;

src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts

@@ -0,0 +1,264 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 10:33:06
+ */
+export const TABLE_COLUMNS = [
+  {
+    title: '计划名称',
+    dataIndex: 'name',
+    prop: 'name',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '计划分组',
+    dataIndex: 'group.name',
+    prop: 'group',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    prop: 'status',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '运营人员',
+    dataIndex: 'operator.name',
+    prop: 'operator',
+    width: 180,
+  },
+  {
+    title: '账户总消耗',
+    dataIndex: 'total_consumption',
+    prop: 'total_consumption',
+    width: 180,
+    tooltip: '账号总消耗',
+    prefix: '¥',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '账户余额',
+    dataIndex: 'balance',
+    prop: 'balance',
+    width: 180,
+    tooltip: '账号余额',
+    prefix: '¥',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'AI评价',
+    dataIndex: 'ai_evaluation',
+    prop: 'ai_evaluation',
+    width: 260,
+  },
+  {
+    title: 'ROI',
+    dataIndex: 'roi',
+    prop: 'roi',
+    width: 180,
+    tooltip: '账号ROI',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'ROI环比',
+    dataIndex: 'roi_chain',
+    prop: 'roi_chain',
+    width: 180,
+    tooltip: '相比上一周期的ROI变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CPA',
+    dataIndex: 'cpa',
+    prop: 'cpa',
+    width: 180,
+    tooltip: '账号CPA',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CPA环比',
+    dataIndex: 'roi_chain',
+    prop: 'roi_chain',
+    width: 180,
+    tooltip: '相比上一周期的CPA变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversion_number',
+    prop: 'conversion_number',
+    width: 180,
+    tooltip: '账号转化数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '转化数环比',
+    dataIndex: 'conversion_chain',
+    prop: 'conversion_chain',
+    width: 180,
+    tooltip: '相比上一周期的转化数变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CVR',
+    dataIndex: 'conversion_rate',
+    prop: 'conversion_rate',
+    width: 180,
+    tooltip: '账号转化率',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CVR环比',
+    dataIndex: 'conversion_rate_chain',
+    prop: 'conversion_rate_chain',
+    width: 180,
+    tooltip: '相比上一周期的CVR变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '最新投放计划标题/日期',
+    dataIndex: 'like_chain1',
+    prop: 'like_chain1',
+    width: 260,
+    tooltip: '最新发布内容的标题和发布日期',
+  },
+  {
+    title: '最新投放计划表现',
+    dataIndex: 'latest_plan_performance',
+    prop: 'latest_plan_performance',
+    width: 180,
+    tooltip: '最新投放计划表现',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+
+  {
+    title: '展示量',
+    dataIndex: 'view_number',
+    prop: 'view_number',
+    width: 180,
+    tooltip: '账号所有内容的总展示次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '点击量',
+    dataIndex: 'click_number',
+    prop: 'click_number',
+    width: 180,
+    tooltip: '账号所有内容的总点击次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '点击率',
+    dataIndex: 'click_rate',
+    prop: 'click_rate',
+    width: 180,
+    tooltip: '账号所有内容的总点击率',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '平均点击成本',
+    dataIndex: 'avg_click_cost',
+    prop: 'avg_click_cost',
+    width: 180,
+    tooltip: '账号所有内容的平均点击成本',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '千次展现费用',
+    dataIndex: 'cost_per_thousand_views',
+    prop: 'cost_per_thousand_views',
+    width: 180,
+    prefix: '¥',
+    tooltip: '账号所有内容的千次展现费用',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '平均转化成本',
+    dataIndex: 'avg_conversion_cost',
+    prop: 'avg_conversion_cost',
+    width: 180,
+    prefix: '¥',
+    tooltip: '账号所有内容的平均转化成本',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '深度转化数',
+    dataIndex: 'deep_conversion_number',
+    prop: 'deep_conversion_number',
+    width: 180,
+    tooltip: '账号所有内容的总深度转化次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '深度转化率',
+    dataIndex: 'deep_conversion_rate',
+    prop: 'deep_conversion_rate',
+    width: 180,
+    tooltip: '账号所有内容的总深度转化率',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+];

src/views/property-marketing/put-account/account-data/components/plan-table/index.vue

@@ -0,0 +1,253 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 18:08:04
+-->
+<template>
+  <div class="action-row mb-12px flex justify-between">
+    <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>
+        <template #default>导出数据</template>
+      </a-button>
+      <a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
+        <template #icon>
+          <img :src="icon1" width="14" height="14" />
+        </template>
+        <template #default>自定义列</template>
+      </a-button>
+    </div>
+  </div>
+
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    :row-selection="rowSelection"
+    :selected-keys="selectedItems"
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="plan-table w-100%"
+    bordered
+    @sorter-change="handleSorterChange"
+    @select="handleSelect"
+    @select-all="handleSelectAll"
+  >
+    <template #empty>
+      <NoData />
+    </template>
+    <template #columns>
+      <a-table-column
+        v-for="column in tableColumns"
+        :key="column.dataIndex"
+        :data-index="column.dataIndex"
+        :fixed="column.fixed"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :sortable="column.sortable"
+        :align="column.align"
+        ellipsis
+        tooltip
+      >
+        <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" />
+            </a-tooltip>
+          </div>
+        </template>
+
+        <template v-if="column.dataIndex === 'platform'" #cell="{ record }">
+          {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
+        </template>
+        <template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
+          <div class="status-tag" :class="`status-tag-${record.status}`">
+            <span class="cts status-tag-text">{{
+              STATUS_LIST.find((item) => item.value === record.status)?.label
+            }}</span>
+          </div>
+        </template>
+        <template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
+          <div class="ai-evaluation-row flex">
+            <img
+              width="16"
+              height="16"
+              :src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
+              class="mr-8px icon"
+            />
+            <div>
+              <p class="cts">{{ record.ai_evaluation?.text || '-' }}</p>
+              <p class="cts text-12px lh-20px !color-#939499">
+                {{ `ROI: ${record.ai_evaluation?.look_chain}%  CVR: ${record.ai_evaluation?.like_chain}%` }}
+              </p>
+            </div>
+          </div>
+        </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>
+
+        <template
+          v-else-if="
+            [
+              'view_chain',
+              'roi_chain',
+              'like_chain',
+              'cpa_chain',
+              'conversion_chain',
+              'conversion_rate_chain',
+            ].includes(column.dataIndex)
+          "
+          #cell="{ record }"
+        >
+          <div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
+            <icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
+            <icon-arrow-down v-else size="16" />
+            {{ formatTableField(column, record) }}
+          </div>
+        </template>
+        <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
+          <p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
+          <p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
+        </template>
+
+        <template v-else #cell="{ record }">
+          {{ formatTableField(column, record, true) }}
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+
+  <CustomTableColumnModal ref="modalRef" :type="CUSTOM_COLUMN_TYPE" @success="onCustomColumnSuccess" />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
+import { formatTableField } from '@/utils/tools';
+import { TABLE_COLUMNS } from './constants';
+import { useRouter } from 'vue-router';
+import CustomTableColumnModal from '@/components/custom-table-column-modal';
+import { getCustomColumns } from '@/api/all/common';
+
+import icon1 from '@/assets/img/media-account/icon-custom.png';
+import icon2 from '@/assets/img/media-account/icon-warn.png';
+import icon3 from '@/assets/img/media-account/icon-warn-1.png';
+import icon4 from '@/assets/img/media-account/icon-success.png';
+import icon5 from '@/assets/img/media-account/icon5.png';
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
+
+const CUSTOM_COLUMN_TYPE = 'placement_account_project';
+
+const router = useRouter();
+
+const selectedItems = ref([]);
+const tableRef = ref(null);
+const modalRef = ref(null);
+const selectedColumns = ref([]);
+
+const checkedAll = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
+);
+const indeterminate = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
+);
+
+const rowSelection = computed(() => ({
+  type: 'checkbox',
+  showCheckedAll: true,
+}));
+
+const handleSelectAll = (checked) => {
+  if (checked) {
+    selectedItems.value = props.dataSource.map((item) => item.id);
+  } else {
+    selectedItems.value = [];
+  }
+  emit('selectionChange', checked ? selectedItems.value : []);
+};
+
+const handleDetail = (record) => {
+  router.push(`/media-account/detail/${record.id}`);
+};
+
+// 处理排序变化
+const handleSorterChange = (column, order) => {
+  emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+};
+
+const handleSelect = (selectedRowKeys, selectedRows) => {
+  selectedItems.value = selectedRowKeys;
+  emit('selectionChange', selectedRows);
+};
+
+const handleExport = () => {
+  emit('export');
+};
+
+const tableColumns = computed(() => {
+  const _result = [];
+  const _columns = cloneDeep(TABLE_COLUMNS);
+  selectedColumns.value.forEach((item) => {
+    const _column = _columns.find((_item) => _item.prop === item);
+    if (_column) {
+      _result.push(_column);
+    }
+  });
+  return _result;
+});
+
+const resetTable = () => {
+  selectedItems.value = [];
+  // tableRef.value?.clearSorters();
+};
+
+const openCustomColumn = () => {
+  modalRef.value.open();
+};
+
+const onCustomColumnSuccess = (columns) => {
+  selectedColumns.value = columns;
+};
+
+const getSelectedColumns = () => {
+  getCustomColumns({ type: CUSTOM_COLUMN_TYPE }).then((res) => {
+    const { code, data } = res;
+    if (code === 200) {
+      selectedColumns.value = data.selected_columns;
+    }
+  });
+};
+
+onMounted(() => {
+  getSelectedColumns();
+});
+
+defineExpose({
+  resetTable,
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/property-marketing/put-account/account-data/components/plan-table/style.scss

@@ -0,0 +1,63 @@
+.action-row {
+  :deep(.arco-btn) {
+    .arco-btn-icon {
+      line-height: 14px;
+    }
+  }
+}
+
+.plan-table {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .status-tag {
+    width: fit-content;
+    display: flex;
+    height: 28px;
+    padding: 0px 8px;
+    align-items: center;
+    border-radius: 2px;
+    background: var(--Functional-Red-1, #ffe9e7);
+
+    .status-tag-text {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+    &-3 {
+      background: #fff7e5;
+      .status-tag-text {
+        color: var(--Functional-yellow-6, #ffae00);
+      }
+    }
+    &-1 {
+      background: var(--Functional-Green-1, #ebf7f2);
+      .status-tag-text {
+        color: var(--Functional-Green-6, #25c883);
+      }
+    }
+    &-0 {
+      background: var(--BG-200, #f2f3f5);
+      .status-tag-text {
+        color: var(--Text-2, #3c4043);
+      }
+    }
+  }
+  .ai-evaluation-row {
+    .icon {
+      position: relative;
+      top: 1px;
+    }
+  }
+  .rate-row {
+    &.up {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+    &.down {
+      color: var(--Functional-Green-6, #25c883);
+    }
+  }
+}

src/views/property-marketing/put-account/account-data/constants.ts

@@ -12,54 +12,3 @@ export const INITIAL_QUERY = {
   column: '',
   order: '',
 };
-
-export enum EnumStatus {
-  NORMAL = 1,
-  PAUSE = 3,
-  UNAUTHORIZED = 0,
-  ABNORMAL = 2,
-  ABNORMAL_LOGIN = 4,
-  ABNORMAL_REQUEST = 5,
-  ABNORMAL_FREEZE = 6,
-}
-
-export const STATUS_LIST = [
-  {
-    text: '正常',
-    label: '正常',
-    value: EnumStatus.NORMAL,
-  },
-  {
-    text: '暂停同步',
-    label: '暂停同步',
-    value: EnumStatus.PAUSE,
-  },
-  {
-    text: '未授权',
-    label: '未授权',
-    value: EnumStatus.UNAUTHORIZED,
-  },
-  {
-    text: '异常',
-    label: '异常',
-    value: EnumStatus.ABNORMAL,
-  },
-  {
-    text: '异常-登录状态失效',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_LOGIN,
-    tooltip: '登录状态失效，需重新扫码授权',
-  },
-  {
-    text: '异常-请求过于频繁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_REQUEST,
-    tooltip: '请求过于频繁，需等待24小时后重试',
-  },
-  {
-    text: '异常-账号被冻结/封禁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_FREEZE,
-    tooltip: '账号被冻结/封禁',
-  },
-];

src/views/property-marketing/put-account/account-data/index.vue

@@ -17,12 +17,19 @@
           </a-button>
         </template>
       </a-tabs>
-      <FilterBlock ref="filterBlockRef" v-model:query="query" @onSearch="getData" @onReset="handleReset" />
+      <FilterBlock
+        ref="filterBlockRef"
+        v-model:query="query"
+        :isAccountTab="isAccountTab"
+        @onSearch="getData"
+        @onReset="handleReset"
+      />
     </div>
     <div
       class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
     >
-      <BoardTable
+      <component
+        :is="isAccountTab ? BoardTable : PlanTable"
         ref="accountTableRef"
         :dataSource="dataSource"
         @export="handleExport"
@@ -51,6 +58,7 @@
 <script setup>
 import FilterBlock from './components/filter-block';
 import BoardTable from './components/board-table';
+import PlanTable from './components/plan-table';
 import GroupManageModal from './components/group-manage-modal';
 
 import {
@@ -74,7 +82,7 @@ const dataSource = ref([]);
 const pageInfo = ref({
   page: 1,
   pageSize: 20,
-  total: 100,
+  total: 0,
 });
 
 const isAccountTab = computed(() => activeTab.value === '1');

src/views/property-marketing/put-account/account-manage/components/account-table/index.vue

@@ -70,7 +70,9 @@
 
 <script setup>
 import { defineProps, ref, computed } from 'vue';
-import { STATUS_LIST, EnumStatus, PLATFORM_LIST } from '../../constants';
+import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
+
 import { formatNumberShow } from '@/utils/tools';
 
 import PauseAccountPatchModal from './pause-account-patch';

src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue

@@ -140,7 +140,7 @@ import { ref, defineEmits } from 'vue';
 import AuthorizedAccountModal from '../authorized-account-modal';
 // import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
-import { PLATFORM_LIST } from '../../constants';
+import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
 
 import {
   postPlacementAccounts,

src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue

@@ -26,11 +26,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">状态</span>
         <a-space class="w-180px">
-          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <StatusSelect v-model="query.status" @change="handleSearch" />
-            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
-              item.text
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
@@ -46,11 +42,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
-            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
-              item.name
-            }}</a-option>
-          </a-select>
         </a-space>
       </div>
     </div>
@@ -73,8 +65,10 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { fetchPlacementAccountOperators } from '@/api/all/propertyMarketing';
+import { getPlacementAccountOperators } from '@/api/all/propertyMarketing';
-import { PLATFORM_LIST, STATUS_LIST } from '@/views/property-marketing/put-account/account-manage/constants';
+import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
+import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
 
 const props = defineProps({
   query: {
@@ -95,7 +89,7 @@ const handleReset = () => {
   emits('onReset');
 };
 const getOperators = async () => {
-  const { code, data } = await fetchPlacementAccountOperators();
+  const { code, data } = await getPlacementAccountOperators();
   if (code === 200) {
     operators.value = data;
   }

src/views/property-marketing/put-account/account-manage/components/status-box/index.vue

@@ -13,7 +13,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { STATUS_LIST, EnumStatus } from '../../constants';
+import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
 
 import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
 import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';

src/views/property-marketing/put-account/account-manage/constants.ts

@@ -2,9 +2,6 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-25 15:24:59
  */
-import icon1 from '@/assets/img/media-account/icon-jl.png';
-import icon2 from '@/assets/img/media-account/icon-jg.png';
-import icon3 from '@/assets/img/media-account/icon-bili.png';
 
 export const INITIAL_QUERY = {
   search: '',
@@ -12,78 +9,3 @@ export const INITIAL_QUERY = {
   platform: '',
   operator_id: '',
 };
-
-export const PLATFORM_LIST = [
-  {
-    label: '巨量',
-    value: 0,
-    icon: icon1,
-  },
-  {
-    label: '聚光',
-    value: 1,
-    icon: icon2,
-  },
-  {
-    label: 'B站',
-    value: 2,
-    icon: icon3,
-  },
-];
-
-export enum EnumStatus {
-  UNAUTHORIZED = 0,
-  NORMAL = 1,
-  PAUSE = 2,
-  ABNORMAL = 3,
-  ABNORMAL_LOGIN = 4,
-  ABNORMAL_REQUEST = 5,
-  ABNORMAL_FREEZE = 6,
-  ABNORMAL_MISSING = 7,
-}
-
-export const STATUS_LIST = [
-  {
-    text: '正常',
-    label: '正常',
-    value: EnumStatus.NORMAL,
-  },
-  {
-    text: '暂停同步',
-    label: '暂停同步',
-    value: EnumStatus.PAUSE,
-  },
-  {
-    text: '未授权',
-    label: '未授权',
-    value: EnumStatus.UNAUTHORIZED,
-  },
-  {
-    text: '异常',
-    label: '异常',
-    value: EnumStatus.ABNORMAL,
-  },
-  {
-    text: '异常-登录状态失效',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_LOGIN,
-    tooltip: '登录状态失效，需重新扫码授权',
-  },
-  {
-    text: '异常-请求过于频繁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_REQUEST,
-    tooltip: '请求过于频繁，需等待24小时后重试',
-  },
-  {
-    text: '异常-账号被冻结/封禁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_FREEZE,
-    tooltip: '账号被冻结/封禁',
-  },
-  {
-    text: '数据缺失',
-    label: '数据缺失',
-    value: EnumStatus.ABNORMAL_MISSING,
-  },
-];

src/views/property-marketing/put-account/account-manage/index.vue

@@ -22,7 +22,7 @@
     <div
       v-if="dataSource.length > 0"
       class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="selectedItems.length > 0 ? 'selected' : 'normal'"
+      :class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
     >
       <div class="flex items-center">
         <div class="flex items-center">
@@ -42,8 +42,8 @@
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
           </template>
           <template v-else>
-            <img :src="icon4" width="16" height="16" class="mr-8px" />
+            <img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
-            <span class="label"> 太棒啦！所有账号都在正常运行。 </span>
+            <span class="label"> {{ tipLabel }} </span>
           </template>
         </div>
       </div>
@@ -51,6 +51,13 @@
       <template v-if="selectedItems.length > 0">
         <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
       </template>
+      <div v-else>
+        <a-space v-if="isAbNormalStatus" class="flex items-center">
+          <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
+            <template #default>查看异常账号</template>
+          </a-button>
+        </a-space>
+      </div>
     </div>
     <div class="card-wrap">
       <AccountTable
@@ -93,7 +100,7 @@ import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 
 import { INITIAL_QUERY } from './constants';
-import { getPlacementAccounts } from '@/api/all/propertyMarketing';
+import { getPlacementAccounts, getPlacementAccountsHealth } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
@@ -113,17 +120,57 @@ const pageInfo = ref({
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
+const healthData = ref({});
+
+const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
 );
 
+const tipLabel = computed(() => {
+  if (!isAbNormalStatus.value) {
+    return '太棒啦！所有账号都在正常运行。';
+  }
+
+  const {
+    abnormal_number = 0,
+    login_invalid_number = 0,
+    too_many_requests_number = 0,
+    account_frozen_number = 0,
+  } = healthData.value;
+
+  // 定义异常类型映射
+  const abnormalTypes = [
+    { count: login_invalid_number, label: 'cookie过期' },
+    { count: too_many_requests_number, label: '已请求频繁' },
+    { count: account_frozen_number, label: '账号被封' },
+  ];
+
+  // 过滤出有异常的项并格式化
+  const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
+
+  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+});
+
 onMounted(() => {
   getData();
 });
 
-const getData = async () => {
+const getData = () => {
+  getHealthData();
+  getAccountData();
+};
+
+const getHealthData = async () => {
+  const { code, data } = await getMediaAccountsHealth();
+  if (code === 200) {
+    healthData.value = data;
+    console.log(healthData.value);
+  }
+};
+const getAccountData = async () => {
   const { page, pageSize } = pageInfo.value;
   const { code, data, total } = await getPlacementAccounts({
     page,
@@ -202,6 +249,10 @@ const onDeleteSuccess = (ids) => {
   selectedItems.value = selectedItems.value.filter((item) => !ids.includes(item.id));
   getData();
 };
+const handleOpenAbnormalAccount = () => {
+  query.value.status = 2;
+  reload();
+};
 </script>
 
 <style scoped lang="scss">

src/views/property-marketing/put-account/components/operator-select/index.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <a-select
+    v-model="selectedOperators"
+    :multiple="multiple"
+    size="medium"
+    :placeholder="placeholder"
+    allow-clear
+    @change="handleChange"
+  >
+    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+      {{ item.name }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '全部',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const selectedOperators = ref(props.multiple ? [] : '');
+
+// 监听外部传入的值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedOperators.value = newVal;
+  },
+  { immediate: true },
+);
+
+// 监听内部值变化，向外部发送更新
+watch(selectedOperators, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+const handleChange = (value) => {
+  selectedOperators.value = value;
+  emits('change', value);
+};
+</script>

src/views/property-marketing/put-account/components/status-select/constants.ts

@@ -0,0 +1,60 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-07-04 11:18:11
+ */
+export enum EnumStatus {
+  UNAUTHORIZED = 0,
+  NORMAL = 1,
+  ABNORMAL = 2,
+  PAUSE = 3,
+  ABNORMAL_LOGIN = 4,
+  ABNORMAL_REQUEST = 5,
+  ABNORMAL_FREEZE = 6,
+  ABNORMAL_MISSING = 7,
+}
+
+export const STATUS_LIST = [
+  {
+    text: '正常',
+    label: '正常',
+    value: EnumStatus.NORMAL,
+  },
+  {
+    text: '暂停同步',
+    label: '暂停同步',
+    value: EnumStatus.PAUSE,
+  },
+  {
+    text: '未授权',
+    label: '未授权',
+    value: EnumStatus.UNAUTHORIZED,
+  },
+  {
+    text: '异常',
+    label: '异常',
+    value: EnumStatus.ABNORMAL,
+  },
+  {
+    text: '数据缺失',
+    label: '数据缺失',
+    value: EnumStatus.ABNORMAL_MISSING,
+  },
+  {
+    text: '异常-登录状态失效',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_LOGIN,
+    tooltip: '登录状态失效，需重新扫码授权',
+  },
+  {
+    text: '异常-请求过于频繁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_REQUEST,
+    tooltip: '请求过于频繁，需等待24小时后重试',
+  },
+  {
+    text: '异常-账号被冻结/封禁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_FREEZE,
+    tooltip: '账号被冻结/封禁',
+  },
+];

src/views/property-marketing/put-account/components/status-select/index.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <a-select
+    v-model="selectedStatus"
+    :multiple="multiple"
+    size="medium"
+    :placeholder="placeholder"
+    allow-clear
+    @change="handleChange"
+  >
+    <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
+      {{ item.text }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { STATUS_LIST } from './constants';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '全部',
+  },
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const selectedStatus = ref(props.multiple ? [] : '');
+
+// 监听外部传入的值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedStatus.value = newVal;
+  },
+  { immediate: true },
+);
+// 监听内部值变化，向外部发送更新
+watch(selectedStatus, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+const handleChange = (value) => {
+  selectedStatus.value = value;
+  emits('change', value);
+};
+</script>

vite.config.ts

@@ -40,7 +40,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           // 目标地址
-          target: 'http://192.168.40.22/api',
+          target: 'http://192.168.40.3/api',
           // target: 'https://lingjiapi.lvfunai.com/api',
         },
       },