Merge branch 'cpq-dev' of wangfan/adweb3-web into master

src/hooks/component/useIframe.js

@@ -1,7 +1,8 @@
 import { postAction } from '/@/api/manage/manage';
 import { inject } from 'vue';
-
+import { router } from '/@/router';
 // TODO 先兼容vue2代码迁移，后期替换为vue3的写法， 当前from src/mixins/iframeMixin.js
+
 export const useIframe = {
   data() {
     return {
@@ -28,7 +29,7 @@ export const useIframe = {
 
   methods: {
     dealMessage(e) {
-      if (e.data.status == 2000) {
+      if (e.data.status === 2000) {
         if (!e.data.data['wp-auth-check']) {
           this.src = '';
           this.queryWordPressConfig();
@@ -98,6 +99,11 @@ export const useIframe = {
               that.iframeLoad();
             }
           }
+
+          if (res.code === 510) {
+            // 该站点验权不通过，设置调到首页重新选择站点
+            router.push({ path: '/dashboard/analysis' });
+          }
         })
         .catch((err) => {
           console.log(err);

src/views/adweb/marketing/googleads.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="search-form">
     <!-- 站点选择和时间筛选 -->
-    <a-row class="r1" :gutter="8">
+    <a-row class="r1 search-form-container" :gutter="8">
       <a-col :xl="7" :xxl="6">
         <div class="choose-site">
           <span class="t1">站点：</span>
@@ -11,19 +11,15 @@
       <a-col :xl="8" :xxl="6">
         <div class="choose-site">
           <span class="t1">统计时间：</span>
-          <a-range-picker @change="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate"
-            style="width: 70%" />
+          <a-range-picker @change="onChangeDatePicker" :disabledDate="disabledDate" :value="rangeDate" style="width: 70%" />
         </div>
       </a-col>
       <a-col :xl="9" :xxl="12">
         <a-button-group class="time-btn-group">
           <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
-          <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''"
-            @click="setTime('thirtyDay')">近30天</a-button>
-          <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''"
-            @click="setTime('sevenDay')">近一周</a-button>
-          <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''"
-            @click="setTime('yesterday')">昨日</a-button>
+          <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
+          <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
+          <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
           <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
         </a-button-group>
       </a-col>
@@ -62,11 +58,16 @@
         <a-row class="r2" style="height: 195px">
           <a-col :span="24">
             <p class="t1">优化得分</p>
-            <div class="score-circle" style="padding-bottom: 10px;">
-              <a-progress type="circle" :percent="customerStats.optiScore.toFixed(2)" :width="80" :stroke-color="{
-                '0%': '#FFB800',
-                '100%': '#FFC53D'
-              }" />
+            <div class="score-circle" style="padding-bottom: 10px">
+              <a-progress
+                type="circle"
+                :percent="customerStats.optiScore.toFixed(2)"
+                :width="80"
+                :stroke-color="{
+                  '0%': '#FFB800',
+                  '100%': '#FFC53D',
+                }"
+              />
             </div>
           </a-col>
         </a-row>
@@ -82,13 +83,10 @@
                 <template v-if="dailyStats.values && dailyStats.values.length > 0">
                   <div class="fl">
                     <a-button-group>
-                      <a-button :class="{ active: activeChart === 'impression' }"
-                        @click="switchChart('impression')">展示</a-button>
-                      <a-button :class="{ active: activeChart === 'clicks' }"
-                        @click="switchChart('clicks')">点击</a-button>
+                      <a-button :class="{ active: activeChart === 'impression' }" @click="switchChart('impression')">展示</a-button>
+                      <a-button :class="{ active: activeChart === 'clicks' }" @click="switchChart('clicks')">点击</a-button>
                       <a-button :class="{ active: activeChart === 'ctr' }" @click="switchChart('ctr')">点击率（%）</a-button>
-                      <a-button :class="{ active: activeChart === 'conversion' }"
-                        @click="switchChart('conversion')">转化数</a-button>
+                      <a-button :class="{ active: activeChart === 'conversion' }" @click="switchChart('conversion')">转化数</a-button>
                       <a-button :class="{ active: activeChart === 'cost' }" @click="switchChart('cost')">花费</a-button>
                     </a-button-group>
                   </div>
@@ -96,7 +94,7 @@
                   <line-chart :chartType="activeChart" :dailyStats="dailyStats" />
                 </template>
                 <template v-else>
-                  <a-empty></a-empty>
+                  <a-empty />
                 </template>
               </a-col>
             </a-row>
@@ -107,37 +105,58 @@
     <a-row>
       <a-col :span="24">
         <a-card style="margin: 10px" title="广告系列">
-          <a-table :columns="campaignColumns" :data-source="tableData" :loading="loading" :pagination="{
-            pageSize: 10,
-            showSizeChanger: false,
-            showQuickJumper: true,
-            showTotal: total => `共 ${total} 条`
-          }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
-            style="width: 100%" />
+          <a-table
+            :columns="campaignColumns"
+            :data-source="tableData"
+            :loading="loading"
+            :pagination="{
+              pageSize: 10,
+              showSizeChanger: false,
+              showQuickJumper: true,
+              showTotal: (total) => `共 ${total} 条`,
+            }"
+            bordered
+            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+            style="width: 100%"
+          />
         </a-card>
       </a-col>
     </a-row>
     <a-row :gutter="8">
       <a-col :span="12">
         <a-card style="margin: 10px" title="TOP关键词">
-          <a-table :columns="keywordColumns" :data-source="keywordData" :loading="loading" :pagination="{
-            pageSize: 10,
-            showSizeChanger: false,
-            showQuickJumper: true,
-            showTotal: total => `共 ${total} 条`
-          }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
-            style="width: 100%" />
+          <a-table
+            :columns="keywordColumns"
+            :data-source="keywordData"
+            :loading="loading"
+            :pagination="{
+              pageSize: 10,
+              showSizeChanger: false,
+              showQuickJumper: true,
+              showTotal: (total) => `共 ${total} 条`,
+            }"
+            bordered
+            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+            style="width: 100%"
+          />
         </a-card>
       </a-col>
       <a-col :span="12">
         <a-card style="margin: 10px" title="TOP展示位">
-          <a-table :columns="positionColumns" :data-source="positionData" :loading="loading" :pagination="{
-            pageSize: 10,
-            showSizeChanger: false,
-            showQuickJumper: true,
-            showTotal: total => `共 ${total} 条`
-          }" bordered :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
-            style="width: 100%" />
+          <a-table
+            :columns="positionColumns"
+            :data-source="positionData"
+            :loading="loading"
+            :pagination="{
+              pageSize: 10,
+              showSizeChanger: false,
+              showQuickJumper: true,
+              showTotal: (total) => `共 ${total} 条`,
+            }"
+            bordered
+            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
+            style="width: 100%"
+          />
         </a-card>
       </a-col>
     </a-row>
@@ -146,23 +165,31 @@
         <a-card style="margin: 10px" title="TOP国家/地区">
           <a-row class="r5">
             <a-col :span="18">
-              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" height="400"></map-adweb>
-              <a-empty v-else style="margin-top: 50px;">
-              </a-empty>
+              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" height="400" />
+              <a-empty v-else style="margin-top: 50px" />
             </a-col>
 
             <a-col :span="6">
-              <a-table :rowKey="(record, index) => { return index }" class="chartTable" :scroll="{ y: 500 }"
-                :pagination=false :columns="chartDetailDataCol" :data-source="chartDetailData" :showHeader="true">
+              <a-table
+                :rowKey="
+                  (record, index) => {
+                    return index;
+                  }
+                "
+                class="chartTable"
+                :scroll="{ y: 500 }"
+                :pagination="false"
+                :columns="chartDetailDataCol"
+                :data-source="chartDetailData"
+                :showHeader="true"
+              >
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'flagSlot'">
                     <span class="img-box">
                       <span :class="'flag-icon flag-icon-' + record.countryCode"></span>
                     </span>
                   </template>
-                  <template v-if="column.key === 'numSlot'">
-                    {{ record.impressions }} | {{ record.clicks }}
-                  </template>
+                  <template v-if="column.key === 'numSlot'"> {{ record.impressions }} | {{ record.clicks }} </template>
                 </template>
               </a-table>
             </a-col>
@@ -171,746 +198,763 @@
       </a-col>
     </a-row>
   </a-spin>
-
 </template>
 
 <script setup lang="ts" name="marketing-googleads">
-import { ref, reactive } from 'vue';
-import dayjs from 'dayjs';
-import selectSite from "@/components/Adweb/selectSite.vue";
-import LineChart from './charts/Line.vue';
-import MapAdweb from '@/components/chart/mapAdweb.vue';
-import {
-  getGoogleAdsCustomerStats,
-  getGoogleAdsDailyStats,
-  getGoogleAdsCampaignStats,
-  getGoogleAdsKeywordStats,
-  getGoogleAdsPlacementStats,
-  getGoogleAdsCountryStats
-} from './googleads.api';
-import "flag-icon-css/css/flag-icons.css";
-
-const rangeDate = ref([]);
-const queryParam = reactive<any>({});
-queryParam.limit = 10;
-queryParam.siteCode = localStorage.getItem("siteCode");
-const loading = ref(false);
-const activeChart = ref('impression');
-const chartDetailData = ref([]);
-const countryMapData = ref([]);
-const chartDetailDataCol = ref([
-  {
-    title: '',
-    key: 'flagSlot',
-    width: '30px'
-  },
-  {
-    title: '国家/地区名称',
-    dataIndex: 'countryName',
-    key: 'countryName'
-  },
-  {
-    title: '展示数 | 点击数',
-    key: 'numSlot',
-    align: 'right'
-  }
-]);
-
-const changeSite = (selectedSiteInfo: any) => {
-  queryParam.siteCode = selectedSiteInfo.code;
-  localStorage.setItem("siteCode", queryParam.siteCode);
-  reloadData();
-}
-
-const onChangeDatePicker = (date, dateString) => {
-  if (dateString.length > 0) {
-    console.log("rangeDate:", rangeDate.value);
-    rangeDate.value = date;
-    console.log("date:", date);
-    queryParam.start = dateString[0];
-    queryParam.end = dateString[1];
-    queryParam.dateType = undefined;
+  import { ref, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import selectSite from '@/components/Adweb/selectSite.vue';
+  import LineChart from './charts/Line.vue';
+  import MapAdweb from '@/components/chart/mapAdweb.vue';
+  import {
+    getGoogleAdsCustomerStats,
+    getGoogleAdsDailyStats,
+    getGoogleAdsCampaignStats,
+    getGoogleAdsKeywordStats,
+    getGoogleAdsPlacementStats,
+    getGoogleAdsCountryStats,
+  } from './googleads.api';
+  import 'flag-icon-css/css/flag-icons.css';
+
+  const rangeDate = ref([]);
+  const queryParam = reactive<any>({});
+  queryParam.limit = 10;
+  queryParam.siteCode = localStorage.getItem('siteCode');
+  const loading = ref(false);
+  const activeChart = ref('impression');
+  const chartDetailData = ref([]);
+  const countryMapData = ref([]);
+  const chartDetailDataCol = ref([
+    {
+      title: '',
+      key: 'flagSlot',
+      width: '30px',
+    },
+    {
+      title: '国家/地区名称',
+      dataIndex: 'countryName',
+      key: 'countryName',
+    },
+    {
+      title: '展示数 | 点击数',
+      key: 'numSlot',
+      align: 'right',
+    },
+  ]);
+
+  const changeSite = (selectedSiteInfo: any) => {
+    queryParam.siteCode = selectedSiteInfo.code;
+    localStorage.setItem('siteCode', queryParam.siteCode);
     reloadData();
-  }
-};
-
-const setTime = (time) => {
-  queryParam.dateType = time;
-  queryParam.start = "";
-  queryParam.end = "";
-
-  if (time == "") {
-    rangeDate.value = undefined;
-  } else if (time == "sevenDay") {
-    rangeDate.value = [dayjs().add(-7, 'd'), dayjs().add(-1, 'd')];
-  } else if (time == "thirtyDay") {
-    rangeDate.value = [dayjs().add(-30, 'd'), dayjs().add(-1, 'd')];
-  } else if (time == "yesterday") {
-    rangeDate.value = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')];
-  } else if (time == "today") {
-    rangeDate.value = [dayjs(), dayjs()];
-  }
+  };
 
-  reloadData();
-};
-
-//日期选择只能今天之前
-const disabledDate = (current) => {
-  return current && current > dayjs();
-}
-
-//重新刷新页面数据
-const reloadData = () => {
-  loading.value = true;
-  getCustomerStats();
-  getDailyStats();
-  getCampaignStats();
-  getKeywordStats();
-  getPlacementStats();
-  getCountryStats();
-  loading.value = false;
-}
-
-// 存储所有图表数据
-const allChartData = ref({
-  dates: [] as string[],
-  impression: [] as number[],
-  clicks: [] as number[],
-  ctr: [] as number[],
-  conversion: [] as number[],
-  cost: [] as number[]
-});
-
-// 修改 getDailyStats 函数
-const getDailyStats = async () => {
-  try {
-    loading.value = true;
-    const res = await getGoogleAdsDailyStats(queryParam);
-    if (res) {
-      // 按日期排序并保存原始数据
-      const sortedData = res.sort((a, b) =>
-        new Date(a.date).getTime() - new Date(b.date).getTime()
-      );
-
-      // 保存所有数据
-      allChartData.value = {
-        dates: sortedData.map(item => item.date),
-        impression: sortedData.map(item => Number(item.impressions) || 0),
-        clicks: sortedData.map(item => Number(item.clicks) || 0),
-        ctr: sortedData.map(item => (Number(item.ctr) * 100).toFixed(2) || 0.00),
-        conversion: sortedData.map(item => Number(item.conversions) || 0),
-        cost: sortedData.map(item => Number(item.cost) || 0)
-      };
+  const onChangeDatePicker = (date, dateString) => {
+    if (dateString.length > 0) {
+      console.log('rangeDate:', rangeDate.value);
+      rangeDate.value = date;
+      console.log('date:', date);
+      queryParam.start = dateString[0];
+      queryParam.end = dateString[1];
+      queryParam.dateType = undefined;
+      reloadData();
+    }
+  };
 
-      // 设置初始显示数据
-      dailyStats.value = {
-        dates: allChartData.value.dates,
-        values: allChartData.value[activeChart.value] || []
-      };
+  const setTime = (time) => {
+    queryParam.dateType = time;
+    queryParam.start = '';
+    queryParam.end = '';
+
+    if (time == '') {
+      rangeDate.value = undefined;
+    } else if (time == 'sevenDay') {
+      rangeDate.value = [dayjs().add(-7, 'd'), dayjs().add(-1, 'd')];
+    } else if (time == 'thirtyDay') {
+      rangeDate.value = [dayjs().add(-30, 'd'), dayjs().add(-1, 'd')];
+    } else if (time == 'yesterday') {
+      rangeDate.value = [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')];
+    } else if (time == 'today') {
+      rangeDate.value = [dayjs(), dayjs()];
     }
-  } catch (error) {
-    console.error('获取每日统计数据失败:', error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 简化切换图表类型的函数
-const switchChart = (type: string) => {
-  activeChart.value = type;
-  // 直接使用已有数据更新图表
-  dailyStats.value = {
-    dates: allChartData.value.dates,
-    values: allChartData.value[type] || []
+
+    reloadData();
   };
-};
-
-const campaignColumns = ref([
-  {
-    title: '广告系列名称',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: '状态',
-    dataIndex: 'status',
-    key: 'status',
-  },
-  {
-    title: '类型',
-    dataIndex: 'advertisingChannelType',
-    key: 'advertisingChannelType',
-  },
-  {
-    title: '展示数',
-    dataIndex: 'impressions',
-    key: 'impressions',
-  },
-  {
-    title: '点击数',
-    dataIndex: 'clicks',
-    key: 'clicks',
-  },
-  {
-    title: '点击率(%)',
-    dataIndex: 'ctr',
-    key: 'ctr',
-    customRender: ({ text }) => {
-            return text ? (Number(text) * 100).toFixed(2) + '%' : '0.00%';
-        },
-  },
-  {
-    title: 'CPC',
-    dataIndex: 'averageCpc',
-    key: 'cpc',
-    slots: { customRender: 'cpc' },
-    tooltip: '单次点击费用', 
-    customRender: ({ text }) => `${text.toFixed(2)}`
-  },
-  {
-    title: '转化数',
-    dataIndex: 'conversions',
-    key: 'conversions',
-    customRender: ({ text }) => `${text.toFixed(2)}`
-  },
-  {
-    title: '花费',
-    dataIndex: 'cost',
-    key: 'cost',
-    customRender: ({ text }) => `${text.toFixed(2)}`
-  }
-]);
-
-const tableData = ref([]);
-
-const keywordColumns = ref([
-  {
-    title: '关键词',
-    dataIndex: 'keyword',
-    key: 'keyword',
-  },
-  {
-    title: '展示次数',
-    dataIndex: 'impressions',
-    key: 'impressions',
-  },
-  {
-    title: '点击次数',
-    dataIndex: 'clicks',
-    key: 'clicks',
-  },
-  {
-    title: '花费',
-    dataIndex: 'cost',
-    key: 'cost',
-    customRender: ({ text }) => `${text.toFixed(2)}`
-  },
-]);
-
-const positionColumns = ref([
-  {
-    title: '展示位置',
-    dataIndex: 'placement',
-    key: 'placement',
-  },
-  {
-    title: '类型',
-    dataIndex: 'type',
-    key: 'type',
-  },
-  {
-    title: '展示次数',
-    dataIndex: 'impressions',
-    key: 'impressions',
-  },
-  {
-    title: '点击次数',
-    dataIndex: 'clicks',
-    key: 'clicks',
-  },
-  {
-    title: '花费',
-    dataIndex: 'cost',
-    key: 'cost',
-    customRender: ({ text }) => `${text.toFixed(2)}`
-  },
-]);
-
-const keywordData = ref([]);
-const positionData = ref([]);
-
-// 修改响应式数据的类型定义
-const customerStats = ref({
-  customerId: '-',
-  descriptiveName: '-',
-  currency: '',
-  balance: '-',
-  cost: '-',
-  conversions: '-',
-  optiScore: 0
-});
-
-// 添加格式化数字的函数
-const formatNumber = (num: string | number) => {
-  if (!num) return '-';
-  // 处理字符串类型的数字
-  const numStr = typeof num === 'string' ? num : num.toString();
-  // 分离整数和小数部分
-  const parts = numStr.split('.');
-  // 对整数部分添加千位分隔符
-  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  // 重新组合整数和小数部分
-  return parts.join('.');
-};
-
-// 获取客户统计数据
-const getCustomerStats = async () => {
-  try {
+
+  //日期选择只能今天之前
+  const disabledDate = (current) => {
+    return current && current > dayjs();
+  };
+
+  //重新刷新页面数据
+  const reloadData = () => {
     loading.value = true;
-    const res = await getGoogleAdsCustomerStats(queryParam);
-    const stats = res;
-
-    // // 处理余额和花费的分割
-    // const balanceParts = (stats.balance ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
-    // const costParts = (stats.cost ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
-
-    customerStats.value = {
-      customerId: stats.customerId ?? '-',
-      descriptiveName: stats.descriptiveName ?? '-',
-      currency: stats.currencyCode ?? '',
-      balance: stats.balance ? formatNumber(stats.balance) : '0',
-      cost: stats.cost ? formatNumber(stats.cost) : '-',
-      conversions: stats.conversions ? formatNumber(stats.conversions) : '-',
-      optiScore: stats.optiScore ? stats.optiScore * 100 : 0
-    };
-  } catch (error) {
-    console.error('获取客户统计数据失败:', error);
-  } finally {
+    getCustomerStats();
+    getDailyStats();
+    getCampaignStats();
+    getKeywordStats();
+    getPlacementStats();
+    getCountryStats();
     loading.value = false;
-  }
-};
+  };
 
-const dailyStats = ref({
-  dates: [] as string[],
-  values: [] as number[]
-});
+  // 存储所有图表数据
+  const allChartData = ref({
+    dates: [] as string[],
+    impression: [] as number[],
+    clicks: [] as number[],
+    ctr: [] as number[],
+    conversion: [] as number[],
+    cost: [] as number[],
+  });
+
+  // 修改 getDailyStats 函数
+  const getDailyStats = async () => {
+    try {
+      loading.value = true;
+      const res = await getGoogleAdsDailyStats(queryParam);
+      if (res) {
+        // 按日期排序并保存原始数据
+        const sortedData = res.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+        // 保存所有数据
+        allChartData.value = {
+          dates: sortedData.map((item) => item.date),
+          impression: sortedData.map((item) => Number(item.impressions) || 0),
+          clicks: sortedData.map((item) => Number(item.clicks) || 0),
+          ctr: sortedData.map((item) => (Number(item.ctr) * 100).toFixed(2) || 0.0),
+          conversion: sortedData.map((item) => Number(item.conversions) || 0),
+          cost: sortedData.map((item) => Number(item.cost) || 0),
+        };
+
+        // 设置初始显示数据
+        dailyStats.value = {
+          dates: allChartData.value.dates,
+          values: allChartData.value[activeChart.value] || [],
+        };
+      }
+    } catch (error) {
+      console.error('获取每日统计数据失败:', error);
+    } finally {
+      loading.value = false;
+    }
+  };
 
-const getCampaignStats = async () => {
-  try {
-    loading.value = true;
-    const res = await getGoogleAdsCampaignStats(queryParam);
-    if (res) {
-      tableData.value = res.map(item => ({
-        name: item.name,
-        status: item.status,
-        advertisingChannelType: item.advertisingChannelType,
-        biddingStrategyType: item.biddingStrategyType,
-        budget: item.budget,
-        impressions: item.impressions,
-        clicks: item.clicks,
-        ctr: item.ctr,
-        averageCpc: item.averageCpc,
-        averageCpm: item.averageCpm,
-        conversions: item.conversions,
-        cost: item.cost
-      }));
+  // 简化切换图表类型的函数
+  const switchChart = (type: string) => {
+    activeChart.value = type;
+    // 直接使用已有数据更新图表
+    dailyStats.value = {
+      dates: allChartData.value.dates,
+      values: allChartData.value[type] || [],
+    };
+  };
+
+  const campaignColumns = ref([
+    {
+      title: '广告系列名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+    },
+    {
+      title: '类型',
+      dataIndex: 'advertisingChannelType',
+      key: 'advertisingChannelType',
+    },
+    {
+      title: '展示数',
+      dataIndex: 'impressions',
+      key: 'impressions',
+    },
+    {
+      title: '点击数',
+      dataIndex: 'clicks',
+      key: 'clicks',
+    },
+    {
+      title: '点击率(%)',
+      dataIndex: 'ctr',
+      key: 'ctr',
+      customRender: ({ text }) => {
+        return text ? (Number(text) * 100).toFixed(2) + '%' : '0.00%';
+      },
+    },
+    {
+      title: 'CPC',
+      dataIndex: 'averageCpc',
+      key: 'cpc',
+      slots: { customRender: 'cpc' },
+      tooltip: '单次点击费用',
+      customRender: ({ text }) => `${text.toFixed(2)}`,
+    },
+    {
+      title: '转化数',
+      dataIndex: 'conversions',
+      key: 'conversions',
+      customRender: ({ text }) => `${text.toFixed(2)}`,
+    },
+    {
+      title: '花费',
+      dataIndex: 'cost',
+      key: 'cost',
+      customRender: ({ text }) => `${text.toFixed(2)}`,
+    },
+  ]);
+
+  const tableData = ref([]);
+
+  const keywordColumns = ref([
+    {
+      title: '关键词',
+      dataIndex: 'keyword',
+      key: 'keyword',
+    },
+    {
+      title: '展示次数',
+      dataIndex: 'impressions',
+      key: 'impressions',
+    },
+    {
+      title: '点击次数',
+      dataIndex: 'clicks',
+      key: 'clicks',
+    },
+    {
+      title: '花费',
+      dataIndex: 'cost',
+      key: 'cost',
+      customRender: ({ text }) => `${text.toFixed(2)}`,
+    },
+  ]);
+
+  const positionColumns = ref([
+    {
+      title: '展示位置',
+      dataIndex: 'placement',
+      key: 'placement',
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '展示次数',
+      dataIndex: 'impressions',
+      key: 'impressions',
+    },
+    {
+      title: '点击次数',
+      dataIndex: 'clicks',
+      key: 'clicks',
+    },
+    {
+      title: '花费',
+      dataIndex: 'cost',
+      key: 'cost',
+      customRender: ({ text }) => `${text.toFixed(2)}`,
+    },
+  ]);
+
+  const keywordData = ref([]);
+  const positionData = ref([]);
+
+  // 修改响应式数据的类型定义
+  const customerStats = ref({
+    customerId: '-',
+    descriptiveName: '-',
+    currency: '',
+    balance: '-',
+    cost: '-',
+    conversions: '-',
+    optiScore: 0,
+  });
+
+  // 添加格式化数字的函数
+  const formatNumber = (num: string | number) => {
+    if (!num) return '-';
+    // 处理字符串类型的数字
+    const numStr = typeof num === 'string' ? num : num.toString();
+    // 分离整数和小数部分
+    const parts = numStr.split('.');
+    // 对整数部分添加千位分隔符
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    // 重新组合整数和小数部分
+    return parts.join('.');
+  };
+
+  // 获取客户统计数据
+  const getCustomerStats = async () => {
+    try {
+      loading.value = true;
+      const res = await getGoogleAdsCustomerStats(queryParam);
+      const stats = res;
+
+      // // 处理余额和花费的分割
+      // const balanceParts = (stats.balance ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
+      // const costParts = (stats.cost ?? '-').toString().match(/^([\d,.]+)\s*(.*)$/);
+
+      customerStats.value = {
+        customerId: stats.customerId ?? '-',
+        descriptiveName: stats.descriptiveName ?? '-',
+        currency: stats.currencyCode ?? '',
+        balance: stats.balance ? formatNumber(stats.balance) : '0',
+        cost: stats.cost ? formatNumber(stats.cost) : '-',
+        conversions: stats.conversions ? formatNumber(stats.conversions) : '-',
+        optiScore: stats.optiScore ? stats.optiScore * 100 : 0,
+      };
+    } catch (error) {
+      console.error('获取客户统计数据失败:', error);
+    } finally {
+      loading.value = false;
     }
-  } catch (error) {
-    console.error('获取广告系列数据失败:', error);
-  } finally {
-    loading.value = false;
-  }
-};
+  };
 
-const getKeywordStats = async () => {
-  try {
-    loading.value = true;
-    const res = await getGoogleAdsKeywordStats(queryParam);
-    if (res) {
-      keywordData.value = res.map(item => ({
-        keyword: item.keyword,
-        impressions: item.impressions,
-        clicks: item.clicks,
-        ctr: item.ctr,
-        cost: item.cost
-      }));
+  const dailyStats = ref({
+    dates: [] as string[],
+    values: [] as number[],
+  });
+
+  const getCampaignStats = async () => {
+    try {
+      loading.value = true;
+      const res = await getGoogleAdsCampaignStats(queryParam);
+      if (res) {
+        tableData.value = res.map((item) => ({
+          name: item.name,
+          status: item.status,
+          advertisingChannelType: item.advertisingChannelType,
+          biddingStrategyType: item.biddingStrategyType,
+          budget: item.budget,
+          impressions: item.impressions,
+          clicks: item.clicks,
+          ctr: item.ctr,
+          averageCpc: item.averageCpc,
+          averageCpm: item.averageCpm,
+          conversions: item.conversions,
+          cost: item.cost,
+        }));
+      }
+    } catch (error) {
+      console.error('获取广告系列数据失败:', error);
+    } finally {
+      loading.value = false;
     }
-  } catch (error) {
-    console.error('获取关键词统计数据失败:', error);
-  } finally {
-    loading.value = false;
-  }
-};
+  };
 
-const getPlacementStats = async () => {
-  try {
-    loading.value = true;
-    const res = await getGoogleAdsPlacementStats(queryParam);
-    if (res) {
-      positionData.value = res.map(item => ({
-        placement: item.placement,
-        type: item.type,
-        impressions: item.impressions,
-        clicks: item.clicks,
-        ctr: item.ctr,
-        cost: item.cost
-      }));
+  const getKeywordStats = async () => {
+    try {
+      loading.value = true;
+      const res = await getGoogleAdsKeywordStats(queryParam);
+      if (res) {
+        keywordData.value = res.map((item) => ({
+          keyword: item.keyword,
+          impressions: item.impressions,
+          clicks: item.clicks,
+          ctr: item.ctr,
+          cost: item.cost,
+        }));
+      }
+    } catch (error) {
+      console.error('获取关键词统计数据失败:', error);
+    } finally {
+      loading.value = false;
     }
-  } catch (error) {
-    console.error('获取展示位置统计数据失败:', error);
-  } finally {
-    loading.value = false;
-  }
-};
+  };
 
-const getCountryStats = async () => {
-  try {
-    loading.value = true;
-    const res = await getGoogleAdsCountryStats(queryParam);
-    if (res) {
-      // 处理地图数据
-      countryMapData.value = res.map(item => ({
-        name: item.countryName,
-        value: item.impressions,
-      }));
-
-      // 处理表格数据
-      chartDetailData.value = res.map(item => ({
-        countryCode: item.countryCode?.toLowerCase(),
-        countryName: item.countryName,
-        clicks: item.clicks,
-        impressions: item.impressions,
-      }));
+  const getPlacementStats = async () => {
+    try {
+      loading.value = true;
+      const res = await getGoogleAdsPlacementStats(queryParam);
+      if (res) {
+        positionData.value = res.map((item) => ({
+          placement: item.placement,
+          type: item.type,
+          impressions: item.impressions,
+          clicks: item.clicks,
+          ctr: item.ctr,
+          cost: item.cost,
+        }));
+      }
+    } catch (error) {
+      console.error('获取展示位置统计数据失败:', error);
+    } finally {
+      loading.value = false;
     }
-  } catch (error) {
-    console.error('获取国家统计数据失败:', error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-// onMounted(() => {
-//   getCustomerStats();
-//   getDailyStats();
-//   getCampaignStats();
-//   getKeywordStats();
-//   getPlacementStats();
-//   getCountryStats();
-// });
+  };
+
+  const getCountryStats = async () => {
+    try {
+      loading.value = true;
+      const res = await getGoogleAdsCountryStats(queryParam);
+      if (res) {
+        // 处理地图数据
+        countryMapData.value = res.map((item) => ({
+          name: item.countryName,
+          value: item.impressions,
+        }));
+
+        // 处理表格数据
+        chartDetailData.value = res.map((item) => ({
+          countryCode: item.countryCode?.toLowerCase(),
+          countryName: item.countryName,
+          clicks: item.clicks,
+          impressions: item.impressions,
+        }));
+      }
+    } catch (error) {
+      console.error('获取国家统计数据失败:', error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // onMounted(() => {
+  //   getCustomerStats();
+  //   getDailyStats();
+  //   getCampaignStats();
+  //   getKeywordStats();
+  //   getPlacementStats();
+  //   getCountryStats();
+  // });
 </script>
 
 <style scoped lang="less">
-.r1 {
-  margin: 20px;
+  .search-form {
+    position: fixed;
+    width: 100%;
+    z-index: 999;
+    top: 110px;
+    background-color: #f5f5f5;
+    //background-color: var(--header-bg-color) !important;
 
-  .choose-site {
-    display: flex;
+    .search-form-container {
+      align-items: center;
+    }
   }
 
-  .t1 {
-    font-size: 18px;
-    font-weight: 400;
-    letter-spacing: 0px;
-    line-height: 32px;
-    margin-left: 10px;
+  :global(.jeecg-layout-content) {
+    padding-top: 72px;
   }
 
-  .ant-form-item {
-    flex: 1;
-  }
+  .r1 {
+    margin: 20px;
 
-  .ant-calendar-picker {
-    margin-right: 20px;
-  }
+    .choose-site {
+      display: flex;
+      align-items: center;
 
+      :deep(.ant-form-item) {
+        margin-bottom: 0;
+      }
+    }
 
-  /deep/ .ant-btn {
-    background: transparent;
-    margin-right: 10px;
-    padding: 4px 15px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    transition: all 0.3s;
+    .t1 {
+      font-size: 18px;
+      font-weight: 400;
+      letter-spacing: 0px;
+      line-height: 32px;
+      margin-left: 10px;
+    }
 
-    &:hover {
-      color: @primary-color;
-      border-color: @primary-color;
+    .ant-form-item {
+      flex: 1;
     }
 
-    &.active {
-      color: @primary-color;
-      background: #e6f7ff;
-      border-color: @primary-color;
+    .ant-calendar-picker {
+      margin-right: 20px;
     }
-  }
 
-  .time-btn-group {
     /deep/ .ant-btn {
-      background: #fff;
+      background: transparent;
+      margin-right: 10px;
       padding: 4px 15px;
       border: 1px solid #d9d9d9;
+      border-radius: 4px;
       transition: all 0.3s;
-      margin-right: 0;
-
-      &:first-child {
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
-      }
-
-      &:last-child {
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
-      }
-
-      &:not(:first-child) {
-        margin-left: -1px;
-      }
 
       &:hover {
         color: @primary-color;
         border-color: @primary-color;
-        position: relative;
-        z-index: 1;
-        background: #fff;
       }
 
       &.active {
         color: @primary-color;
         background: #e6f7ff;
         border-color: @primary-color;
-        position: relative;
-        z-index: 2;
       }
     }
-  }
-}
 
-.r2 {
-  background: #fff;
-  padding: 20px;
-  margin: 15px 10px 10px;
+    .time-btn-group {
+      /deep/ .ant-btn {
+        background: #fff;
+        padding: 4px 15px;
+        border: 1px solid #d9d9d9;
+        transition: all 0.3s;
+        margin-right: 0;
+
+        &:first-child {
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
 
-  .ant-col:not(:last-child) {
-    border-right: 1px solid #e6e6e6;
-  }
+        &:last-child {
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
 
-  p {
-    margin: 0;
-    text-align: center;
+        &:not(:first-child) {
+          margin-left: -1px;
+        }
 
-    &.t1 {
-      color: #333;
-      margin-bottom: 15px;
+        &:hover {
+          color: @primary-color;
+          border-color: @primary-color;
+          position: relative;
+          z-index: 1;
+          background: #fff;
+        }
 
-      img {
-        margin-right: 10px;
-        width: 15px;
-        margin-top: -5px;
+        &.active {
+          color: @primary-color;
+          background: #e6f7ff;
+          border-color: @primary-color;
+          position: relative;
+          z-index: 2;
+        }
       }
     }
+  }
+
+  .r2 {
+    background: #fff;
+    padding: 20px;
+    margin: 15px 10px 10px;
 
-    &.t2 {
-      color: @primary-color;
-      font-size: 30px;
-      font-weight: 500;
-      line-height: 1;
-      padding-left: 25px;
+    .ant-col:not(:last-child) {
+      border-right: 1px solid #e6e6e6;
     }
 
-    &.t3 {
-      font-size: 32px;
-      font-weight: 700;
-      letter-spacing: 0px;
-      line-height: 38px;
-      color: rgba(13, 62, 122, 1);
+    p {
+      margin: 0;
+      text-align: center;
 
-      .value {
-        font-size: 32px;
-      }
+      &.t1 {
+        color: #333;
+        margin-bottom: 15px;
 
-      .currency {
-        font-size: 16px;
-        margin-left: 4px;
+        img {
+          margin-right: 10px;
+          width: 15px;
+          margin-top: -5px;
+        }
       }
 
-      &.company-name {
-        font-size: 18px;
-        text-align: left;
+      &.t2 {
+        color: @primary-color;
+        font-size: 30px;
+        font-weight: 500;
         line-height: 1;
-        font-weight: 600;
+        padding-left: 25px;
+      }
+
+      &.t3 {
+        font-size: 32px;
+        font-weight: 700;
+        letter-spacing: 0px;
+        line-height: 38px;
+        color: rgba(13, 62, 122, 1);
+
+        .value {
+          font-size: 32px;
+        }
+
+        .currency {
+          font-size: 16px;
+          margin-left: 4px;
+        }
+
+        &.company-name {
+          font-size: 18px;
+          text-align: left;
+          line-height: 1;
+          font-weight: 600;
+        }
       }
     }
   }
-}
-
-.r5 {
-  background: #fff;
-  padding: 10px;
-  border-radius: 10px;
-  margin: 0 !important;
 
-  .wrap {
-    box-shadow: 0px 2px 4px 0px @primary-color;
-    padding: 15px;
-    border-radius: 10px;
-    overflow: hidden;
+  .r5 {
     background: #fff;
-    transition: all .3s;
+    padding: 10px;
+    border-radius: 10px;
+    margin: 0 !important;
 
-    &.blue {
+    .wrap {
       box-shadow: 0px 2px 4px 0px @primary-color;
-    }
+      padding: 15px;
+      border-radius: 10px;
+      overflow: hidden;
+      background: #fff;
+      transition: all 0.3s;
 
-    &.effect:hover {
-      box-shadow: none;
-      background: rgb(241, 248, 255);
-    }
+      &.blue {
+        box-shadow: 0px 2px 4px 0px @primary-color;
+      }
 
-    img {
-      width: 15px;
-    }
+      &.effect:hover {
+        box-shadow: none;
+        background: rgb(241, 248, 255);
+      }
 
-    .fr {
-      float: right;
-      width: calc(100% - 15px);
-      text-align: center;
+      img {
+        width: 15px;
+      }
 
-      p:last-child {
-        font-size: 30px;
+      .fr {
+        float: right;
+        width: calc(100% - 15px);
         text-align: center;
-        margin-top: 10px;
 
+        p:last-child {
+          font-size: 30px;
+          text-align: center;
+          margin-top: 10px;
+        }
       }
     }
-  }
 
-  /deep/ .ant-table-thead>tr>th {
-    background: rgb(241, 248, 255);
-    border: none;
-    color: #000;
-    padding: 10px;
-  }
-
-  /deep/ .ant-table-tbody .ant-table-row td {
-    padding: 10px;
-    color: #000;
-  }
+    /deep/ .ant-table-thead > tr > th {
+      background: rgb(241, 248, 255);
+      border: none;
+      color: #000;
+      padding: 10px;
+    }
 
-  .r5-1 {
-    display: inline-block;
-    width: 100%;
-    margin-top: 30px;
+    /deep/ .ant-table-tbody .ant-table-row td {
+      padding: 10px;
+      color: #000;
+    }
 
-    .fl {
-      float: left;
-      position: relative;
+    .r5-1 {
+      display: inline-block;
+      width: 100%;
+      margin-top: 30px;
 
-      .ant-btn {
-        border-radius: 0;
-        border: none;
-        margin-right: 10px;
-      }
+      .fl {
+        float: left;
+        position: relative;
 
-      .ant-btn-group {
         .ant-btn {
-          background: #f5f5f5;
+          border-radius: 0;
+          border: none;
+          margin-right: 10px;
+        }
+
+        .ant-btn-group {
+          .ant-btn {
+            background: #f5f5f5;
+
+            &:hover {
+              background: #fff;
+            }
+
+            &.active {
+              color: @primary-color;
+              background: #e6f7ff;
+              border-color: @primary-color;
+              z-index: 2;
+            }
+          }
+        }
+      }
 
-          &:hover {
-            background: #fff;
+      .fr {
+        float: right;
+        line-height: 2;
+
+        span {
+          margin-right: 30px;
+
+          i {
+            display: inline-block;
+            width: 25px;
+            height: 3px;
+            background: #544beb;
+            position: relative;
+            top: -4px;
+            margin-right: 20px;
           }
 
-          &.active {
-            color: @primary-color;
-            background: #e6f7ff;
-            border-color: @primary-color;
-            z-index: 2;
+          &:last-child i {
+            background: #f0b358;
           }
         }
       }
     }
 
-    .fr {
-      float: right;
-      line-height: 2;
+    .box {
+      border-radius: 10px;
+      text-align: center;
+      min-height: 180px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
 
-      span {
-        margin-right: 30px;
+      p {
+        color: #fff;
 
-        i {
-          display: inline-block;
-          width: 25px;
-          height: 3px;
-          background: #544BEB;
-          position: relative;
-          top: -4px;
-          margin-right: 20px;
+        img {
+          width: 19px;
+          margin: -5px 10px 0 0;
         }
+      }
 
-        &:last-child i {
-          background: #F0B358;
-        }
+      .num {
+        font-size: 30px;
+        margin-bottom: 10px;
       }
-    }
-  }
 
-  .box {
-    border-radius: 10px;
-    text-align: center;
-    min-height: 180px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+      &.b1 {
+        background: rgb(233, 107, 95);
+      }
 
-    p {
-      color: #fff;
+      &.b2 {
+        background: rgb(88, 204, 168);
+      }
 
-      img {
-        width: 19px;
-        margin: -5px 10px 0 0;
+      &.b3 {
+        background: rgb(124, 152, 252);
       }
-    }
 
-    .num {
-      font-size: 30px;
-      margin-bottom: 10px;
+      &.b4 {
+        background: #f0b358;
+      }
     }
+  }
 
-    &.b1 {
-      background: rgb(233, 107, 95);
-    }
+  .score-circle {
+    text-align: center;
+    margin-top: 20px;
+  }
 
-    &.b2 {
-      background: rgb(88, 204, 168);
-    }
+  // 添加表格样式
+  :deep(.table-striped) {
+    background-color: #fafafa;
+  }
 
-    &.b3 {
-      background: rgb(124, 152, 252);
-    }
+  // 修改表格头部样式
+  :deep(.ant-table-thead > tr > th) {
+    background: #e6f7ff !important;
+    font-weight: 700; // 字重改为700
+    color: rgba(13, 62, 122, 1) !important; // 字体颜色调整
+  }
 
-    &.b4 {
-      background: #F0B358;
-    }
+  :deep(.ant-table-tbody > tr > td) {
+    border-bottom: 1px solid #f0f0f0;
   }
-}
-
-.score-circle {
-  text-align: center;
-  margin-top: 20px;
-}
-
-// 添加表格样式
-:deep(.table-striped) {
-  background-color: #fafafa;
-}
-
-// 修改表格头部样式
-:deep(.ant-table-thead > tr > th) {
-  background: #e6f7ff !important;
-  font-weight: 700; // 字重改为700
-  color: rgba(13, 62, 122, 1) !important; // 字体颜色调整
-}
-
-:deep(.ant-table-tbody > tr > td) {
-  border-bottom: 1px solid #f0f0f0;
-}
 </style>

src/views/adweb/website/enterpriseInfo/enterprisehistory/HistoryList.vue

@@ -1,28 +1,24 @@
 <template>
   <div>
-    <iframe-com :loading="loading" ref="iframeCom" :src="src"/>
+    <iframe-com :loading="loading" ref="iframeCom" :src="src" />
   </div>
 </template>
 
 <script>
+  import iframeCom from '/@/views/adweb/wpInTo/iframeCom.vue';
+  import { useIframe } from '/src/hooks/component/useIframe';
 
-import iframeCom from '/@/views/adweb/wpInTo/iframeCom.vue'
-import { useIframe } from '/src/hooks/component/useIframe'
-
-
-export default {
-  components: {iframeCom},
-  mixins: [useIframe],
-  data() {
-    return {
-      url: 'edit.php?post_type=adweb_history',
-      loginUrl: 'edit.php?post_type=adweb_history',
-      iframePage: 'history'
-    }
-  }
-}
+  export default {
+    components: { iframeCom },
+    mixins: [useIframe],
+    data() {
+      return {
+        url: 'edit.php?post_type=adweb_history',
+        loginUrl: 'edit.php?post_type=adweb_history',
+        iframePage: 'history',
+      };
+    },
+  };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/dashboard/Analysis/homePage/adweb3Home.vue

@@ -13,8 +13,8 @@
 
     <!--基础信息-->
     <a-card title="网站概况">
-      <a-row >
-        <a-col class="border-right" :span="12" >
+      <a-row>
+        <a-col class="border-right" :span="12">
           <a-spin :spinning="baseInfoLoading">
             <a-row class="web-info">
               <a-col :span="8">
@@ -23,7 +23,6 @@
                   <p class="content">
                     <span>{{ filter_Null_format(baseInfo.deliveryProgress) }}</span>
                   </p>
-                  <a-progress style="width: 40%" :steps="6" :percent="baseInfo.percentage" />
                 </div>
               </a-col>
               <a-col :span="8">
@@ -31,7 +30,7 @@
                   <p class="title">运行状态</p>
                   <p class="content">
                     <span v-if="baseInfo.runStatus == 0">创建失败</span><span v-if="baseInfo.runStatus == 1">正常运行</span
-                  ><span v-if="baseInfo.runStatus == 2">运行异常</span>
+                    ><span v-if="baseInfo.runStatus == 2">运行异常</span>
                     <span v-if="baseInfo.runStatus == 3">站点停止</span>
                   </p>
                 </div>
@@ -40,14 +39,30 @@
                 <div class="web-content">
                   <p class="title">网站运行</p>
                   <p class="content">
-                    <span>
-                    {{ filter_Null_format(baseInfo.runDays) }}天
-                    </span>
+                    <span> {{ filter_Null_format(baseInfo.runDays) }}天 </span>
                   </p>
                 </div>
               </a-col>
             </a-row>
           </a-spin>
+
+          <a-steps style="margin-top: 30px; cursor: pointer" label-placement="vertical" v-model:current="current">
+            <a-step disabled v-for="(item, index) in stepData" :key="index" style="cursor: pointer">
+              <template #icon>
+                <a-popover :title="item.title">
+                  <template v-if="index < current">
+                    <CheckCircle-Outlined :style="{ fontSize: '26px', color: 'green' }" />
+                  </template>
+                  <template v-else-if="index == current">
+                    <LoadingOutlined :style="{ fontSize: '26px', color: '#53a2d3' }" />
+                  </template>
+                  <template v-else>
+                    <Lock-Outlined :style="{ fontSize: '26px', color: '#e5e7eb' }" />
+                  </template>
+                </a-popover>
+              </template>
+            </a-step>
+          </a-steps>
         </a-col>
         <a-col :span="12">
           <a-spin :spinning="baseInfoLoading">
@@ -72,7 +87,7 @@
                 <div class="web-content">
                   <p class="title">预计服务到期时间</p>
                   <p class="content">
-                    <span >{{ filter_Null_format(baseInfo.endTime) }}</span>
+                    <span>{{ filter_Null_format(baseInfo.endTime) }}</span>
                   </p>
                 </div>
               </a-col>
@@ -89,38 +104,38 @@
             <a-col :span="4" class="border-right">
               <div class="wrap effect">
                 <a-spin :spinning="coreInfoLoading">
-<!--                  <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisWeek' } }">-->
-                    <div class="fr">
-                      <p class="title">本周询盘数</p>
-                      <p class="theme-color">{{ formatNumber(currentWeekEnquiryCount) }}</p>
-                    </div>
-<!--                  </router-link>-->
+                  <!--                  <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisWeek' } }">-->
+                  <div class="fr">
+                    <p class="title">本周询盘数</p>
+                    <p class="theme-color">{{ formatNumber(currentWeekEnquiryCount) }}</p>
+                  </div>
+                  <!--                  </router-link>-->
                 </a-spin>
               </div>
             </a-col>
             <a-col :span="4" class="border-right">
               <div class="wrap effect">
                 <a-spin :spinning="coreInfoLoading">
-<!--                  <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisMonth' } }">-->
-                    <div class="fr">
-                      <p class="title">本月询盘数</p>
-                      <p class="theme-color">{{ formatNumber(currentMonthEnquiryCount) }}</p>
-                    </div>
-<!--                  </router-link>-->
+                  <!--                  <router-link :to="{ path: '/inquiry/list', query: { timeType: 'thisMonth' } }">-->
+                  <div class="fr">
+                    <p class="title">本月询盘数</p>
+                    <p class="theme-color">{{ formatNumber(currentMonthEnquiryCount) }}</p>
+                  </div>
+                  <!--                  </router-link>-->
                 </a-spin>
               </div>
             </a-col>
             <a-col :span="4" class="border-right">
-<!--              <router-link :to="{ path: '/inquiry/list' }">-->
-                <div class="wrap effect">
-                  <a-spin :spinning="coreInfoLoading">
-                    <div class="fr">
-                      <p class="title">累计询盘数</p>
-                      <p class="theme-color">{{ formatNumber(totalEnquiryCount) }}</p>
-                    </div>
-                  </a-spin>
-                </div>
-<!--              </router-link>-->
+              <!--              <router-link :to="{ path: '/inquiry/list' }">-->
+              <div class="wrap effect">
+                <a-spin :spinning="coreInfoLoading">
+                  <div class="fr">
+                    <p class="title">累计询盘数</p>
+                    <p class="theme-color">{{ formatNumber(totalEnquiryCount) }}</p>
+                  </div>
+                </a-spin>
+              </div>
+              <!--              </router-link>-->
             </a-col>
             <a-col :span="4" class="border-right">
               <div class="wrap blue">
@@ -161,8 +176,7 @@
                 :data-source="coreDataTable"
                 :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                 bordered
-              >
-              </a-table>
+              />
               <p style="color: #999; font-size: 13px">注：今日数据每小时更新一次。</p>
             </a-col>
 
@@ -237,10 +251,15 @@
   import selectSite from '/@/components/Adweb/selectSite.vue';
   import '/@/assets/less/home.less';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { onMounted, reactive, ref } from 'vue';
+  import { onMounted, reactive, ref, h } from 'vue';
+
+  import { LockOutlined, CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue';
 
   const { createMessage } = useMessage();
 
+  const current = ref(0);
+  let stepData = ref([{ value: '', title: '', color: '', description: '', status: 0 }]);
+
   const columns = [
     {
       title: '指标',
@@ -319,6 +338,7 @@
 
   onMounted(() => {
     userRole.value = useUserStore().roleList;
+    showStep();
   });
 
   //改变站点
@@ -355,6 +375,7 @@
       baseInfoLoading.value = false;
       if (res.code == 200) {
         baseInfo = res.result;
+        current.value = baseInfo.siteStatus;
         isShow.value = true;
       } else {
         createMessage.error('获取站点基础信息失败，请刷新重试');
@@ -504,6 +525,20 @@
     }
     return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   }
+
+  function showStep() {
+    stepData.value = [];
+
+    getAction('/sys/dict/getDictItems/build_website_status', null)
+      .then((res) => {
+        if (res.code === 0) {
+          stepData.value = res.result;
+        }
+      })
+      .catch((e) => {
+        createMessage.warning('获取数据失败！' + e.message());
+      });
+  }
 </script>
 
 <style lang="less">
@@ -657,28 +692,28 @@
 </style>
 
 <style lang="less" scoped>
-.time-btn {
-  &.ant-btn-default {
-    color: #666;
-    background: #f5f5f5;
-    border-color: #d9d9d9;
-    
-    &:hover {
-      color: @primary-color;
-      border-color: @primary-color;
+  .time-btn {
+    &.ant-btn-default {
+      color: #666;
+      background: #f5f5f5;
+      border-color: #d9d9d9;
+
+      &:hover {
+        color: @primary-color;
+        border-color: @primary-color;
+      }
     }
   }
-}
-
-// 添加表格头部样式
-:deep(.ant-table-thead > tr > th) {
-  background: #e6f7ff !important;
-  font-weight: 700; // 字重改为700
-  color: rgba(13, 62, 122, 1) !important; // 字体颜色调整
-}
-
-// 添加斑马线样式
-:deep(.table-striped) {
-  background-color: #fafafa;
-}
+
+  // 添加表格头部样式
+  :deep(.ant-table-thead > tr > th) {
+    background: #e6f7ff !important;
+    font-weight: 700; // 字重改为700
+    color: rgba(13, 62, 122, 1) !important; // 字体颜色调整
+  }
+
+  // 添加斑马线样式
+  :deep(.table-striped) {
+    background-color: #fafafa;
+  }
 </style>

src/views/system/tenant/tenant.data.ts

@@ -1,7 +1,7 @@
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { getAutoScrollContainer } from '/@/utils/common/compUtils';
-import { render } from "/@/utils/common/renderUtils";
-import { rules } from "/@/utils/helper/validator";
+import { render } from '/@/utils/common/renderUtils';
+import { rules } from '/@/utils/helper/validator';
 
 export const columns: BasicColumn[] = [
   {
@@ -14,26 +14,27 @@ export const columns: BasicColumn[] = [
     title: '租户编号(ID)',
     dataIndex: 'id',
     width: 180,
-  },{
+  },
+  {
     title: '组织LOGO',
     dataIndex: 'companyLogo',
     width: 100,
     customRender: ({ text }) => {
-      if(!text){
+      if (!text) {
         return text;
       }
-      return render.renderImage({text});
+      return render.renderImage({ text });
     },
   },
   {
     dataIndex: 'trade_dictText',
     title: '所属行业',
-    width: 150
+    width: 150,
   },
   {
     dataIndex: 'companySize_dictText',
     title: '公司规模',
-    width: 100
+    width: 100,
   },
   {
     dataIndex: 'houseNumber',
@@ -43,19 +44,19 @@ export const columns: BasicColumn[] = [
   {
     dataIndex: 'position_dictText',
     title: '职级',
-    width: 150
+    width: 150,
   },
   {
     dataIndex: 'department_dictText',
     title: '部门',
-    width: 150
+    width: 150,
   },
   {
     dataIndex: 'createBy_dictText',
     title: '创建者(拥有者)',
-    width: 150
+    width: 150,
   },
-/*  {
+  /*  {
     title: '开始时间',
     dataIndex: 'beginDate',
     sorter: true,
@@ -119,41 +120,43 @@ export const formSchema: FormSchema[] = [
     component: 'InputNumber',
     required: true,
     ifShow: ({ values }) => {
-      return values.id!=null;
+      return values.id != null;
     },
   },
   {
     field: 'companyLogo',
     label: '组织LOGO',
     component: 'JImageUpload',
-    componentProps:{
-      text:'logo'
-    }
+    componentProps: {
+      text: 'logo',
+    },
   },
   {
     field: 'trade',
     label: '所属行业',
     component: 'JDictSelectTag',
     componentProps: {
-      dictCode:'trade',
-    }
-  }, {
+      dictCode: 'trade',
+    },
+  },
+  {
     field: 'companySize',
     label: '公司规模',
     component: 'JDictSelectTag',
     componentProps: {
-      dictCode:'company_size',
-    }
-  }, {
+      dictCode: 'company_size',
+    },
+  },
+  {
     field: 'companyAddress',
     label: '公司地址',
     component: 'InputTextArea',
     componentProps: {
       placeholder: '请输入公司地址',
       rows: 4,
-    }
+    },
   },
-/*  {
+  /*  {
     field: 'beginDate',
     label: '开始时间',
     component: 'DatePicker',
@@ -179,24 +182,24 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     dynamicDisabled: true,
     ifShow: ({ values }) => {
-      return values.id!=null;
+      return values.id != null;
     },
   },
   {
     field: 'position',
     label: '职级',
     component: 'JDictSelectTag',
-    componentProps:{
-      dictCode: 'company_rank'
-    }
+    componentProps: {
+      dictCode: 'company_rank',
+    },
   },
   {
     field: 'department',
     label: '部门',
     component: 'JDictSelectTag',
-    componentProps:{
-      dictCode:'company_department'
-    }
+    componentProps: {
+      dictCode: 'company_department',
+    },
   },
   {
     field: 'status',
@@ -213,7 +216,7 @@ export const formSchema: FormSchema[] = [
 ];
 
 //定义用户表格列
-export const userColumns: BasicColumn[] =[
+export const userColumns: BasicColumn[] = [
   {
     title: '用户账号',
     dataIndex: 'username',
@@ -302,7 +305,7 @@ export const packMenuFormSchema: FormSchema[] = [
       dict: 'sys_permission,name,id',
       pidField: 'parent_id',
       multiple: true,
-      treeCheckAble:true,
+      treeCheckAble: true,
       treeCheckStrictly: true,
       getPopupContainer: () => document.body,
     },
@@ -328,12 +331,12 @@ export const packMenuFormSchema: FormSchema[] = [
     field: 'id',
     label: '开启状态',
     component: 'Input',
-    show: false
+    show: false,
   },
 ];
 
 //回收站列表
-export const recycleColumns : BasicColumn[] = [
+export const recycleColumns: BasicColumn[] = [
   {
     title: '租户名称',
     dataIndex: 'name',
@@ -350,21 +353,21 @@ export const recycleColumns : BasicColumn[] = [
     dataIndex: 'companyLogo',
     width: 100,
     customRender: ({ text }) => {
-      if(!text){
+      if (!text) {
         return text;
       }
-      return render.renderImage({text});
+      return render.renderImage({ text });
     },
   },
   {
     dataIndex: 'houseNumber',
     title: '门牌号',
     width: 100,
-  }
-]
+  },
+];
 
 //租户回收站搜索表单
-export const searchRecycleFormSchema : FormSchema[] = [
+export const searchRecycleFormSchema: FormSchema[] = [
   {
     field: 'name',
     label: '租户名称',
@@ -375,7 +378,7 @@ export const searchRecycleFormSchema : FormSchema[] = [
     label: '门牌号',
     component: 'Input',
   },
-]
+];
 
 //产品包用户列表
 export const tenantPackUserColumns: BasicColumn[] = [
@@ -389,16 +392,16 @@ export const tenantPackUserColumns: BasicColumn[] = [
     dataIndex: 'departNames',
     width: 200,
     ellipsis: true,
-    slots: { customRender: 'departNames' }
+    slots: { customRender: 'departNames' },
   },
   {
     title: '职位',
     dataIndex: 'positionNames',
     ellipsis: true,
     width: 200,
-    slots: { customRender: 'positionNames' }
-  }
-]
+    slots: { customRender: 'positionNames' },
+  },
+];
 
 /**
  * 用户租户新增编辑表单
@@ -415,6 +418,30 @@ export const tenantUserSchema: FormSchema[] = [
     },
   },
   {
+    label: '登录密码',
+    field: 'password',
+    component: 'StrengthMeter',
+    componentProps: {
+      autocomplete: 'new-password',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入登录密码',
+      },
+      {
+        pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
+        message: '密码由8位数字、大小写字母和特殊符号组成!',
+      },
+    ],
+  },
+  {
+    label: '确认密码',
+    field: 'confirmPassword',
+    component: 'InputPassword',
+    dynamicRules: ({ values }) => rules.confirmPassword(values, true),
+  },
+  {
     field: 'phone',
     label: '手机',
     component: 'Input',
@@ -442,20 +469,12 @@ export const tenantUserSchema: FormSchema[] = [
       return !!values.id;
     },
   },
-  { field: 'selecteddeparts', label: '部门', component: 'JSelectDept', componentProps: { checkStrictly: true } },
-  {
-    field: 'post',
-    label: '职位',
-    component: 'JSelectPosition',
-  },
   {
-    field: 'workNo',
-    label: '工号',
+    label: '公司名称',
+    field: 'realname',
+    required: true,
     component: 'Input',
-    dynamicRules: ({ model, schema }) => {
-      return [{ required: true, message: '请输入工号' }, { ...rules.duplicateCheckRule('sys_user', 'work_no', model, schema, false)[0] }];
-    },
   },
-  { field: 'relTenantIds', label: '租户', component: 'Input',show:false },
-  { field: 'selectedroles', label: '角色', component: 'Input',show:false },
+  { field: 'relTenantIds', label: '租户', component: 'Input', show: true },
+  { field: 'selectedroles', label: '角色', component: 'Input', show: true },
 ];