部分样式修改

src/views/adManage/sb/keywords/crud.ts

@@ -162,7 +162,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '出价',
           column: {
             width: 80,
-            align: 'left',
+            align: 'center',
             sortable: true,
             formatter: (row) => {
                 return '$' + row.value

src/views/adManage/sb/targets/index.vue

@@ -9,7 +9,7 @@
                 v-if="tabActiveName === 'dataTendency'"
                 :fetchCard="getCardData"
                 :fetch-line-month="getLineMonthData"
-							  :fetch-line-week="getLineWeekData"
+                :fetch-line-week="getLineWeekData"
                 :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
@@ -20,26 +20,48 @@
         </el-tabs>
       </template>
       <template #cell_percentTimeInBudget="scope">
-        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
+        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0"/>
       </template>
+
+      <template #cell_resolvedExpression_value="scope">
+        <el-tooltip effect="dark" placement="top">
+          <template #content>
+            <p>{{ scope.row.resolvedExpression_value }}</p>
+            {{ scope.row.ASIN }}
+          </template>
+          <div>
+            <el-link :underline="false" class="ellipsis-inline" style="color: rgb(30, 33, 40); display: inline-block; max-width: 100%;">
+              {{ scope.row.resolvedExpression_value }}
+            </el-link>
+            <br>
+            <span class="ellipsis">
+              <span style="color: rgb(109, 119, 132)">ASIN: </span>
+              <span style="color: rgb(30, 33, 40)">{{ scope.row.ASIN }}</span>
+            </span>
+          </div>
+        </el-tooltip>
+      </template>
+
       <template #cell_campaignName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.campaignName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.campaignName }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_adGroupName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.adGroupName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.adGroupName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.adGroupName }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_ASIN="scope">
-          <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
-            <div class="en-text">{{ scope.row.ASIN }}</div>
-          </el-link>
+        <el-tooltip effect="dark" :content="scope.row.ASIN" placement="top">
+        <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
+          <div class="en-text">{{ scope.row.ASIN }}</div>
+        </el-link>
+        </el-tooltip>
       </template>
       <template #cell_suggestedBid="scope">
         <div>${{ scope.row.suggestedBid }}</div>
@@ -48,8 +70,8 @@
       <template #cell_MissedImpressions="scope">
         {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
       </template>
-      <template #cell_MissedClicks="scope"> {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }} </template>
-      <template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }} </template>
+      <template #cell_MissedClicks="scope"> {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template>
+      <template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template>
 
       <template v-for="field of Object.keys(SbBaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
@@ -63,7 +85,7 @@
       <template #toolbar-left>
         <div class="campare-switch">
           <span>数据对比 </span>
-          <el-switch v-model="showCompare" size="small" />
+          <el-switch v-model="showCompare" size="small"/>
         </div>
       </template>
     </fs-crud>
@@ -110,7 +132,7 @@ onMounted(() => {
 const jumpGroup = (row: any) => {
   router.push({
     name: 'CampaignDetail',
-    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
+    query: {campaignId: row.campaignId, tagsViewName: row.campaignName},
   })
 }
 
@@ -155,9 +177,11 @@ watch(queryParams, async () => {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
 ::v-deep(.el-table__footer-wrapper) {
   border: 0;
 }
+
 ::v-deep(.el-table .el-table__footer-wrapper .cell) {
   font-weight: 600;
 }
@@ -165,4 +189,37 @@ watch(queryParams, async () => {
 .text-range {
   color: #808184;
 }
+
+.ellipsis {
+  max-width: 100%;
+  font-size: 13px;
+  font-weight: 420;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.ellipsis-inline {
+  max-width: 100%;
+  font-size: 13px;
+  font-weight: 420;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  display: inline;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+::v-deep(span.el-link__inner) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline;
+}
+
 </style>

src/views/adManage/sd/campaigns/crud.tsx

@@ -46,7 +46,6 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
       },
       actionbar: {
         show: true,
-        color: "#626aef",
         buttons: {
           add: {
             show: false

src/views/adManage/sp/keywords/crud.tsx

@@ -1,8 +1,7 @@
 import * as api from './api'
-import {dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet} from '@fast-crud/fast-crud'
+import {AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
 import {inject} from 'vue'
 import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
-import {dynBidStrategyEnum} from '/@/views/adManage/utils/enum.js'
 import {parseQueryParams} from '/@/views/adManage/utils/tools'
 import XEUtils from 'xe-utils'
 
@@ -40,6 +39,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           border: 'none',
           borderBottom: '0.5px solid #ddd',
         },
+        showSummary: true,
         stripe: false
       },
       container: {
@@ -103,26 +103,18 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
             show: false
           }
         },
-        keywordText: {
+        keywordText:{
           title: '关键词',
           column: {
-            width: '200px',
             fixed: 'left',
-            align: 'center'
-          },
-          search: {
-            show: true,
-            component: {
-              props: {
-                clearable: true
-              }
-            }
+            width: 180,
+            sortable: true
           },
         },
         state: {
           title: '状态',
           column: {
-            width: '90px',
+            width: 90,
             align: 'center'
           },
           type: 'dict-select',
@@ -139,9 +131,8 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
         campaignName: {
           title: '广告活动名称',
           column: {
-            width: '200px',
-            fixed: 'left',
-            align: 'center'
+            width: 200,
+            align: 'left'
           },
           search: {
             show: true,
@@ -157,36 +148,40 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
         },
         adGroupName: {
           title: '广告组名称',
+          column: {
+            width: 200,
+            align: 'left'
+          },
         },
-        suggestedBudget: {
+        suggestedBid: {
           title: '建议竞价',
-          form: {
-            show: false
+          column: {
+            width: 130,
+            align: 'right'
           }
         },
-        bid: {title: '出价'},
-        '标签': {},
-        Impression: {
-          title: '曝光量'
-        },
-        '搜索结果顶部展示份额': {},
-        Click: {
-          title: '点击量'
+        bid: {
+          title: '出价',
+          column: {
+            width: 80,
+            align: 'center',
+            sortable: true,
+            formatter: (row) => {
+              return '$' + row.value
+            }
+          }
         },
-        CTR: {
-          title: '点击率'
+        suggestedBid_lower: {
+          column: {
+            show: false,
+          }
         },
-        Spend: {
-          title: '花费'
+        suggestedBid_upper: {
+          column: {
+            show: false,
+          }
         },
-        CPC: {title: '点击成本'},
-        TotalPurchases: {title: '订单数'},
-        TotalSales: {title: '销售额'},
-        TotalUnitOrdered: {title: '销量'},
-        PurchasesRate: {title: '转化率'},
-        ACOS: {title: 'ACOS'},
-        ROAS: {title: 'ROAS'},
-        CPA: {title: '订单成本'},
+
         ...BaseColumn
       }
     }

src/views/adManage/sp/keywords/index.vue

@@ -19,6 +19,52 @@
           <el-tab-pane label="散点视图" name="scatterView"></el-tab-pane>
         </el-tabs>
       </template>
+
+      <template #cell_keywordText="scope">
+        <el-tooltip  effect="dark" :content="scope.row.keywordText" placement="top">
+          <el-link  :underline="false" @click="jumpGroup(scope.row)">
+            <div class="en-text">{{ scope.row.keywordText }}</div>
+          </el-link>
+        </el-tooltip>
+      </template>
+      <template #cell_campaignName="scope">
+        <el-tooltip  effect="dark" :content="scope.row.campaignName" placement="top">
+          <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
+            <div class="en-text">{{ scope.row.campaignName }}</div>
+          </el-link>
+        </el-tooltip>
+      </template>
+      <template #cell_adGroupName="scope">
+        <el-tooltip  effect="dark" :content="scope.row.adGroupName" placement="top">
+          <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
+            <div class="en-text">{{ scope.row.adGroupName }}</div>
+          </el-link>
+        </el-tooltip>
+      </template>
+      <template #cell_suggestedBid="scope">
+        <div>${{ scope.row.suggestedBid }}</div>
+        <div class="text-range">${{ scope.row.suggestedBid_lower }} ~ ${{ scope.row.suggestedBid_upper }}</div>
+      </template>
+      <template #cell_MissedImpressions="scope">
+        {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
+      </template>
+      <template #cell_MissedClicks="scope"> {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }} </template>
+      <template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }} </template>
+      <template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
+        <DataCompare
+            :field="field"
+            :value="scope.row[field]"
+            :prev-val="scope.row[`prev${field}`]"
+            :gap-val="scope.row[`gap${field}`]"
+            :date-range="dateRange"
+            :show-compare="showCompare"/>
+      </template>
+      <template #toolbar-left>
+        <div class="campare-switch">
+          <span>数据对比 </span>
+          <el-switch v-model="showCompare" size="small" />
+        </div>
+      </template>
     </fs-crud>
   </fs-page>
 </template>
@@ -30,9 +76,12 @@ import {createCrudOptions} from './crud'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
-import {getCardData, getLineData,getLineMonthData, getLineWeekData} from './api'
+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
 import {usePublicData} from '/@/stores/publicData'
 import {storeToRefs} from 'pinia'
+import router from '/@/router'
+import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn'
+import DataCompare from '/@/components/dataCompare/index.vue'
 
 
 const tabActiveName = ref('dataTendency')
@@ -45,6 +94,13 @@ const queryParams = ref({
   dateRange
 })
 const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
+const showCompare = ref(false)
+const jumpGroup = (row: any) => {
+  router.push({
+    name: 'CampaignDetail',
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
+  })
+}
 
 onMounted(async () => {
   crudExpose.doRefresh()
@@ -56,7 +112,7 @@ watch(queryParams, async () => {
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .chart-tabs {
   margin: 5px 0;
 
@@ -64,4 +120,29 @@ watch(queryParams, async () => {
     padding-left: 0 !important;
   }
 }
+
+.en-text {
+  max-width: 100%;
+  font-size: 13px;
+  font-weight: 420;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+3):nth-child(-n+6) .cell) {
+  display: none;
+}
+::v-deep(.el-table--border .el-table__footer-wrapper) {
+  border: none;
+}
+::v-deep(.el-table .el-table__footer-wrapper .cell) {
+  font-weight: 600;
+}
+.text-range {
+  color: #808184;
+}
 </style>